/* IchWillTechno.de Version 5, Ansicht "2006": so nah wie moeglich an der gesicherten PHPKIT-Seite von 2006 bis 2008
   (Farbschema "BlueArt": Grund #CED7DE, Kopfleisten #31556B, Tahoma, Links blau, Hover #52799C, feste Breite 980 px).
   Eigene Gestaltung nach Sichtvorlage, kein uebernommener Code. Titelleisten wie damals aus Endstuecken und einem 1 Pixel breiten
   Mittelstreifen: Die drei Endstuecke (static/2006/ecke-*.gif) sind die Originalgrafiken der Seite aus der Wayback Machine
   (Theme "BlueArt", 26.05.2006), die Mittelstreifen sind aus deren Rand geschnitten, das vierte Eck ist gespiegelt.
   Ebenfalls Originale aus dem Archiv: die Forenknoepfe und Forensymbole (static/2006/knopf-*.gif, forum-*.gif, "buttonblueart").
   Masse und Farben nach dem gesicherten Original-CSS: Tahoma 12 px, alles flach in #CED7DE, Kastenkoepfe #31556B, Kaesten 140 px.
   Plattenhuellen, Smilies, Equalizer und Lichtschalter sind CSS, das Kopfbanner ist eine eigene SVG. Kein Inline-Stil (CSP). */

:root {
  --g06: #ced7de;        /* Grund wie im Original */
  --g06-hell: #e3e9ee;   /* Inhaltsflaeche */
  --g06-zeile: #d7dfe5;  /* zweite Tabellenzeile */
  --kopf06: #31556b;     /* Kopfleisten der Kaesten */
  --kopf06-hell: #4f7690;
  --kante06: #7f97a8;
  --text06: #000;
  --leise06: #3b4b57;
  --link06: #0000ff;
  --hover06: #52799c;
  --streifen06: #9dbbd6;
  color-scheme: light;
}
* { box-sizing: content-box; }
html { background: var(--g06); }
body.b06 { margin: 0; padding: 0 0 20px; color: var(--text06); background: var(--g06); font: 12px/1.3 Tahoma, Verdana, Arial, sans-serif; }
a:link, a:visited { color: var(--link06); text-decoration: none; }
a:hover, a:active { color: var(--hover06); text-decoration: underline; }
b, strong { font-weight: bold; }
h1, h2, h3, h4 { font-family: Tahoma, Verdana, sans-serif; margin: 0 0 4px; }
h1 { font-size: 13px; } h2 { font-size: 12px; } h3 { font-size: 12px; } h4 { font-size: 11px; }
p { margin: 4px 0; }
img { border: 0; max-width: 100%; height: auto; }
ul, ol { margin: 4px 0; padding-left: 18px; }
:focus-visible { outline: 2px dotted #000; outline-offset: 1px; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sprung { position: absolute; left: 6px; top: -40px; background: #ffffcc; border: 1px solid #000; padding: 3px 8px; z-index: 5; }
.sprung:focus { top: 4px; }
.kl { font-size: 11px; color: var(--leise06); }
.z, .z06 { text-align: center; }
.rechts06 { text-align: right; margin: -2px 0 8px; }
code { font: 11px "Courier New", monospace; background: #eef2f5; padding: 0 2px; }

/* ---------- Seitenrahmen 980 px ---------- */
.w980 { width: 980px; margin: 0 auto; }
/* Titelleiste wie bei PHPKIT/BlueArt: Endstueck links + 1 px Mittelstreifen (wiederholt) + Endstueck rechts */
.balken06 { position: relative; height: 20px; line-height: 20px; text-align: center; color: #000; font-size: 12px; font-weight: bold;
  background: url(2006/mitte-oben.png) repeat-x; background-clip: content-box; padding: 0 44px; }
/* Die Endstuecke sind teils durchsichtig: dahinter liegt wie damals der Seitengrund, nicht der Mittelstreifen (eigene Tabellenzelle) */
.balken06.unten { background-image: url(2006/mitte-unten.png); }
.ecke06 { position: absolute; top: 0; width: 44px; height: 20px; background-repeat: no-repeat; }
.ecke06.l { left: 0; background-image: url(2006/ecke-oben-links.gif); }
.ecke06.r { right: 0; background-image: url(2006/ecke-oben-rechts.gif); }
.balken06.unten .ecke06.l { background-image: url(2006/ecke-unten-links.gif); }
.balken06.unten .ecke06.r { background-image: url(2006/ecke-unten-rechts.gif); }
/* Spaltenkoepfe: linke Spalte endet rechts im Eckstueck, Mittelspalte beginnt links mit dem Eckstueck (wie im Original) */
.spaltenkopf06 { position: relative; height: 20px; margin: 0; background: url(2006/mitte-oben.png) repeat-x; background-clip: content-box; }
.mitte06 .spaltenkopf06 { padding: 0 44px; }
/* 10 px Abstand zwischen den Kaesten (spacer_bg ist verloren; ein Streifen dort doppelte sich mit den Kastenkoepfen) */
.links06 .k06 { margin: 0 0 12px; }

/* Kopf wie im Original: Banner 890 x 114 mittig und gerahmt, in den 44-px-Raendern links der Equalizer, rechts der Lichtschalter */
.kopf06 { display: flex; height: 116px; margin: 0; }
.rand06 { position: relative; flex: none; width: 44px; }
.banner06 { display: block; width: 890px; height: 114px; border: 1px solid #6f7f8a; flex: none; }
.banner06 img { display: block; width: 890px; height: 114px; }
/* LED-Equalizer neben dem Willkommenstext (wie die EQ-GIFs von damals): 10 Saeulen x 16 LEDs; unbeleuchtete LEDs schimmern
   dunkel, die beleuchteten (::after) werden von oben abgeschnitten. Ohne Musik tanzen sie in Stufen, mit Radio-Pegel live. */
.willkommen06 { display: flex; align-items: center; justify-content: center; gap: 22px; }
.wk06-text { flex: none; }
.eq06 { --led-aus: repeating-linear-gradient(to top, transparent 0 2px, #030603 2px 3px), linear-gradient(to top, #0e3514 0 56.25%, #3a3410 56.25% 81.25%, #3d1210 81.25%);
  --led-an: repeating-linear-gradient(to top, transparent 0 2px, #030603 2px 3px), linear-gradient(to top, #2bff4a 0 56.25%, #ffe23a 56.25% 81.25%, #ff3a2a 81.25%);
  display: flex; gap: 1px; height: 48px; padding: 3px; background: #030603; border: 1px solid #1d3442; box-shadow: inset 0 0 0 1px #24323a, 1px 1px 0 #fff; flex: none; }
.eq06 i { position: relative; width: 5px; height: 48px; background: var(--led-aus); }
.eq06 i::after { content: ""; position: absolute; inset: 0; background: var(--led-an); clip-path: inset(62.5% 0 0 0);
  filter: drop-shadow(0 0 1.5px rgba(80, 255, 90, .55)); animation: led06 1.6s steps(1) infinite; }
.eq06 i:nth-child(2)::after { animation-duration: 1.2s; animation-delay: -.3s; } .eq06 i:nth-child(3)::after { animation-duration: 1.9s; animation-delay: -.9s; }
.eq06 i:nth-child(4)::after { animation-duration: 1.4s; animation-delay: -.5s; } .eq06 i:nth-child(5)::after { animation-duration: 1.1s; animation-delay: -1.1s; }
.eq06 i:nth-child(6)::after { animation-duration: 1.7s; animation-delay: -.2s; } .eq06 i:nth-child(7)::after { animation-duration: 1.3s; animation-delay: -.7s; }
.eq06 i:nth-child(8)::after { animation-duration: 2s; animation-delay: -1.4s; } .eq06 i:nth-child(9)::after { animation-duration: 1.25s; animation-delay: -.4s; }
.eq06 i:nth-child(10)::after { animation-duration: 1.5s; animation-delay: -1s; }
.eq06.r { transform: scaleX(-1); }        /* rechts gespiegelt: die Baesse aussen */
.eq06.r i::after { animation-direction: reverse; }
@keyframes led06 { 0% { clip-path: inset(62.5% 0 0 0); } 12% { clip-path: inset(25% 0 0 0); } 25% { clip-path: inset(50% 0 0 0); } 37% { clip-path: inset(12.5% 0 0 0); }
  50% { clip-path: inset(68.75% 0 0 0); } 62% { clip-path: inset(31.25% 0 0 0); } 75% { clip-path: inset(6.25% 0 0 0); } 87% { clip-path: inset(43.75% 0 0 0); } 100% { clip-path: inset(62.5% 0 0 0); } }
.eq06.spiel i::after { animation-duration: .7s; }
.eq06.live i::after { animation: none; clip-path: inset(calc((1 - var(--pegel, .3)) * 100%) 0 0 0); transition: clip-path .08s linear; }

/* Lichtschalter fuer die Zeitreise: Wippe oben = 2006 an */
.schalter06 { position: absolute; right: 5px; top: 2px; margin: 0; }
.schalter06 button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; font: 9px Tahoma, sans-serif; color: #000; }
.sch-platte { position: relative; display: block; width: 30px; height: 46px; border-radius: 3px; background: linear-gradient(135deg, #fbf8ee, #ddd6c2);
  border: 1px solid #8f8670; box-shadow: 1px 2px 0 rgba(0, 0, 0, .35), inset 0 1px 0 #fff; }
.sch-wippe { position: absolute; left: 8px; top: 7px; width: 14px; height: 32px; border-radius: 2px; border: 1px solid #8f8670;
  background: linear-gradient(#f7f3e6 0, #fffdf6 45%, #c9c1aa 50%, #e9e3d0 100%); box-shadow: inset 0 -1px 0 #fff; }
.sch-wippe::after { content: ""; position: absolute; left: 4px; top: 4px; width: 6px; height: 3px; border-radius: 1px; background: #ff7a1a; box-shadow: 0 0 4px #ff9a1a; }
.sch-text { line-height: 1.15; text-align: center; }
.schalter06 button:hover .sch-platte { filter: brightness(1.05); }
.schalter06 button:focus-visible { outline: 2px dotted #000; }

/* Laufband wie damals (marquee): 10 px Abstand, dann eine 20-px-Zeile zwischen den unteren Endstuecken, Sender als blaue Links */
.balken06.lauf06 { margin-top: 10px; background: none; font-weight: normal; text-align: left; }
.lauf06-fenster { height: 20px; overflow: hidden; }
.lauf06-band { display: flex; width: max-content; animation: lauf06 60s linear infinite; }
.lauf06:hover .lauf06-band, .lauf06:focus-within .lauf06-band { animation-play-state: paused; }
.lauf06 ul { display: flex; list-style: none; margin: 0; padding: 0 12px 0 0; gap: 12px; }
.lauf06 a { white-space: nowrap; font-size: 12px; }
@keyframes lauf06 { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Zwei Spalten wie damals: links 188 px (5 px Rand, Kaesten 140 px), 4 px Luecke, Mitte 788 px mit 44-px-Raendern */
.spalten06 { width: 100%; border-collapse: collapse; table-layout: fixed; }
.links06 { width: 188px; vertical-align: top; padding: 0; }
.links06 aside { display: block; width: 140px; padding: 0 0 0 5px; }
.mitte06 { vertical-align: top; padding: 0 0 0 4px; }
.mitte06 main { display: block; padding: 4px 44px 0; }
main { outline: none; }

/* ---------- Kaesten links (navtableleft) ----------
   Kopf (navheadleft): im Original-CSS ein Hintergrundbild mit schwarzer Schrift 13 px; #31556B war nur die Ersatzfarbe fuer das
   verlorene Bild. Der Titel steht darum auf dem Streifenbalken, der rechts im Endstueck auslaeuft (wie die Spaltenkoepfe). */
.k06 { margin: 0; background: var(--g06); }
.k06-k { position: relative; margin: 0 0 1px; height: 20px; line-height: 20px; text-align: center; color: #000; font-size: 13px; font-weight: normal;
  background: var(--kopf06) url(2006/mitte-oben.png) repeat-x; }
.k06-k::after { content: ""; position: absolute; left: 139px; top: 0; width: 44px; height: 20px; background: url(2006/ecke-oben-rechts.gif) no-repeat; }
.k06-i { padding: 2px; }
.k06 form { margin: 2px 0; }
.nav06 { list-style: none; margin: 0; padding: 0; }
.nav06 li { margin: 0; padding: 1px 2px; }
.nav06 a:link, .nav06 a:visited { color: #000; font-size: 12px; }
.nav06 a:hover { color: var(--hover06); text-decoration: none; }
.nav06 a[aria-current="page"] { font-weight: bold; }
.punkt06 li::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 5px 2px 2px; background: var(--kopf06); }
.home06 .nav06 a { display: block; }
.tot06 { color: #6c7c88; font-size: 12px; cursor: default; }
.chatlogin06 { margin: 8px 0 2px; font-weight: bold; } .chatlogin06 a:link, .chatlogin06 a:visited { color: #000; font-size: 12px; }
.neu06 { color: #b00000; }
.login06 input:not([type=checkbox]), .tell06 input { width: 128px; margin: 0 0 2px; padding: 2px 3px; border: 2px inset #9aa8b2; background: var(--g06); }
.zeile06 { display: flex; gap: 2px; align-items: flex-start; } .zeile06 input { width: 96px !important; }
.dl06 a:link, .dl06 a:visited { font-weight: bold; }
.dlsym06 { display: inline-block; width: 9px; height: 10px; margin: 0 4px -1px 1px; background: #fff; border: 1px solid #7f8c95; box-shadow: inset -2px -2px 0 #dfe5ea; }
.besucher06 { margin: 10px 0 0; }
.check06 { display: block; margin: 2px 0; }
.shouts06 { list-style: none; margin: 0 0 4px; padding: 0; max-height: 210px; overflow-y: auto; background: #fff; border: 1px solid var(--kante06); }
.shouts06 li { padding: 2px 3px; border-bottom: 1px solid var(--g06); overflow-wrap: anywhere; }
.shout06 { display: flex; gap: 2px; } .shout06 input:not([type=hidden]) { width: 96px; }
.live06 { list-style: none; margin: 0; padding: 0; } .live06 li { padding: 2px 0; }
.play06 { display: inline-block; width: 0; height: 0; margin-right: 4px; border-left: 7px solid var(--kopf06); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.bild06 { display: block; margin: 2px auto; max-width: 134px; border: 1px solid #000; }
.ev06 { list-style: none; margin: 0; padding: 0; } .ev06 li { padding: 2px 0; border-bottom: 1px dotted var(--kante06); }
.fs06 { border: 0; padding: 0; margin: 0 0 3px; } .fs06 legend { font-weight: bold; padding: 0; }
meter.balken06 { width: 160px; height: 8px; display: block; }

/* Kaesten, deren Ziele es nicht mehr gibt: sichtbar, laufen wie damals, aber ohne Link */
.tot06box .k06-i { color: #4a5a66; }
/* Shopping Tip: Cover von unten nach oben wie damals; die Huelle ist gezeichnet, die Platte schaut rechts heraus */
.hoch06 { height: 272px; overflow: hidden; }
.hoch06 ul { list-style: none; margin: 0; padding: 0; animation: hoch06 40s linear infinite; }
.hoch06 li { padding: 0 0 6px; }
@keyframes hoch06 { from { transform: translateY(0); } to { transform: translateY(-100%); } }
.cover06 { position: relative; display: block; width: 134px; height: 130px; overflow: hidden; border: 1px solid #000;
  background: linear-gradient(160deg, #3b5a70 0, #16232d 55%, #0b1116 100%); }
.cover06 .platte06 { position: absolute; right: -46px; top: 14px; width: 100px; height: 100px; border-radius: 50%; border: 1px solid #000;
  background: radial-gradient(circle, #c43c1e 0 14%, #111 15% 48%, #2c3136 49% 51%, #141618 52% 70%, #24292d 71% 72%, #101214 73%); }
.ct06 { position: absolute; left: 6px; right: 40px; bottom: 6px; color: #fff; font: bold 11px/1.2 Verdana, sans-serif; text-shadow: 1px 1px 0 #000; overflow-wrap: anywhere; }
.cover06::before { content: "TIP"; position: absolute; left: 6px; top: 5px; padding: 0 3px; font: bold 9px Verdana, sans-serif; color: #000; background: #f2c200; }
.cover06b { display: block; width: 134px; height: 134px; border: 0; }
.quer06 { display: flex; overflow: hidden; width: 136px; }
.quer06 li { display: flex; align-items: center; }
.b88bild { display: block; height: 31px; width: auto; max-width: none; }
.quer06 ul { display: flex; flex: none; list-style: none; margin: 0; padding: 0 6px 0 0; gap: 6px; animation: quer06 18s linear infinite; }
@keyframes quer06 { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.b88 { display: flex; align-items: center; justify-content: center; text-align: center; width: 86px; height: 29px; font: bold 9px/1.1 Verdana, sans-serif; color: #fff;
  background: linear-gradient(#6d8fa6, #24465b); border: 1px solid #000; box-shadow: inset 1px 1px 0 #a9c4d6; overflow: hidden; }
.quer06 li:nth-child(3n+2) .b88 { background: linear-gradient(#ffb24a, #b25400); }
.quer06 li:nth-child(3n) .b88 { background: linear-gradient(#a4a4a4, #3e3e3e); }

/* Web Status: schlichte Zahlen wie damals */
.zahlen06 { border-collapse: collapse; margin: 0; }
.zahlen06 th { font-weight: normal; text-align: left; padding: 0 14px 0 0; }
.zahlen06 td { text-align: left; padding: 0; }

/* ---------- Inhalt Mitte (contenthead/contentbody: im Original alles flach im Seitengrund) ---------- */
.willkommen06 { text-align: center; margin: 0 0 10px; } .willkommen06 h1 { font-size: 12px; }
.willkommen06 p { margin: 4px 0 0; }
.t06 { margin: 0 0 14px; border: 0; background: none; }
/* Kopfzeile (td.heads, 13 px fett). Die Grafik heads.jpg ist verloren; nachgebaut als heller Verlauf in den BlueArt-Farben */
.t06-k { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 3px 5px; background: linear-gradient(#eef2f5, #bccbd6); }
.t06-k h2, .t06-k h3 { margin: 0; font-size: 13px; font-weight: bold; }
.t06-k a:link, .t06-k a:visited { color: #000; text-decoration: underline; } .t06-k a:hover { color: var(--link06); }
.t06-r { font-size: 11px; font-weight: normal; }
.t06-i { padding: 5px 4px; display: flow-root; }     /* Kategoriebilder (float) bleiben in ihrer Tabelle */
.t06 .t06 { background: none; }
.hinweis { margin: 0 0 8px; padding: 4px 6px; border: 1px solid; font-weight: bold; }
.hinweis.ok { background: #e9ffe0; border-color: #3a8a2a; color: #134400; }
.hinweis.fehler { background: #ffe8e0; border-color: #b00000; color: #7a0000; }

/* Party Tips fuers Wochenende (Startseite): Terminliste wie bei PHPKIT, links Tag und Uhrzeit, rechts Party, Ort, Line-up */
.party06 { border-collapse: collapse; width: calc(100% - 132px); margin: 4px 0 6px; }
.party06 td { padding: 5px 6px 5px 0; vertical-align: top; border-bottom: 1px dotted var(--kante06); }
.party06 tr:last-child td { border-bottom: 0; }
.pt06-datum { width: 64px; white-space: nowrap; }
.pt06-tag th { text-align: left; font-size: 12px; padding: 8px 0 3px; border-bottom: 1px solid var(--kante06); }
.party06 tr.pt06-tag:first-child th { padding-top: 0; }
.pt06-party a:link, .pt06-party a:visited { font-size: 12px; }
.pt06-old { font-size: 10px; font-weight: bold; color: #fff; background: #b00000; padding: 0 3px; }

/* Formulare und Knoepfe im Stil von damals */
input, select, textarea { font: 11px Tahoma, Verdana, sans-serif; color: #000; background: #f2f5f7; border: 1px solid var(--kante06); padding: 1px 2px; }
textarea { width: 96%; }
input[type=checkbox], input[type=radio] { background: none; border: 0; vertical-align: -2px; }
button, .aktion, .knopf06 { display: inline-block; font: 11px Tahoma, Verdana, sans-serif; color: #000; cursor: pointer; padding: 1px 8px; margin: 1px 0;
  background: linear-gradient(#ffffff, #d2dbe1); border: 1px solid #31556b; border-radius: 0; text-decoration: none; }
a.aktion:link, a.aktion:visited { color: #000; }
button:hover, .aktion:hover, .knopf06:hover { background: linear-gradient(#ffffff, #b8c8d4); color: #000; text-decoration: none; }
button:active { background: linear-gradient(#b8c8d4, #fff); }
button.link { background: none; border: 0; color: var(--link06); padding: 0; text-decoration: underline; }
button.gefahr { color: #900; }
form.inline { display: inline; }
.formular p { margin: 3px 0; }
.formular label:not(.check) { display: block; font-weight: bold; }
.formular input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]) { width: 300px; }
.formular .kl { display: block; }
.check { display: block; font-weight: normal; }
fieldset { border: 1px solid var(--kante06); margin: 0 0 6px; padding: 3px 6px; }
legend { font-weight: bold; }
.ohne-js { } .js .ohne-js { display: none; }
.zeilenform { display: flex; flex-wrap: wrap; gap: 6px; align-items: end; }
.shout-form { display: flex; gap: 3px; margin-top: 4px; } .shout-form input:not([type=hidden]) { flex: 1; }

/* Tabellen (Forum, Listen, Verwaltung) */
.tab-rahmen { overflow-x: auto; }
.tab, .forum06 { width: 100%; border-collapse: collapse; background: var(--g06-hell); }
.tab th, .tab td, .forum06 th, .forum06 td { border: 1px solid var(--kante06); padding: 2px 4px; vertical-align: top; text-align: left; }
.tab thead th, .forum06 thead th { background: linear-gradient(#f4f7f9, #c3d0d9); font-weight: bold; text-align: center; }
.tab tbody tr:nth-child(even) > *, .forum06 tbody tr:nth-child(even) > td { background: var(--g06-zeile); }
/* Forenuebersicht wie damals: kein Gitter, alles im Seitengrund, Original-Symbole (buttonblueart), Kategorien in Sperrschrift */
table.forum06 { background: none; border-collapse: separate; border-spacing: 0 6px; }
.forum06 th, .forum06 td { border: 0 !important; background: none !important; padding: 2px 3px; vertical-align: middle; }
.forum06 thead th { background: none; font-size: 12px; padding-bottom: 4px; }
.forum06 thead th:first-child { text-align: left; padding-left: 50px; }
.forum06 .f06-sym { width: 26px; padding: 0; } .forum06 tbody tr:not(.fkat06) .f06-sym { padding-left: 4px; }
.forum06 col, .forum06 .z { width: 58px; text-align: center; }
.forum06 .f06-mod { width: 96px; font-size: 11px; }
.forum06 .f06-letzt { width: 168px; font-size: 11px; }
.forum06 .f06-letzt .fsym06 { float: left; margin: 0 3px 0 0; }
.forum06 .f06-letzt a:link, .forum06 .f06-letzt a:visited { font-size: 11px; }
.forum06 .fkat06 th { text-align: left; font-weight: normal; }
.forum06 .fkat06 th a { font-size: 13px; letter-spacing: 3px; }
.forum06 .f06-name .kl { color: #000; }
.fsym06 { display: inline-block; vertical-align: middle; }
.keine06 { display: block; text-align: center; }
.fknoepfe06 { text-align: center; margin: 0 0 6px; } .fknoepfe06 a { display: inline-block; margin: 0 1px; } .fknoepfe06 img { display: block; }
.fzeile06 { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin: 0 0 8px; }
.fzeile06 p { margin: 0; }
.flogin06 { display: grid; grid-template-columns: auto auto auto; gap: 3px; justify-items: end; margin: 0; }
.flogin06 input:not([type=checkbox]) { width: 40px; padding: 2px; border: 2px inset #9aa8b2; background: var(--g06); }
.flogin06 .check06 { grid-column: 1 / -1; justify-self: center; margin: 0; font-size: 11px; }
.ffuss06 { margin-top: 8px; font-size: 11px; }
.ffuss06 .rechts06 { margin: 4px 0 0; }
.legende06 { display: flex; justify-content: center; gap: 22px; margin: 14px 0 4px; }
.legende06 span { display: inline-flex; align-items: center; gap: 4px; }
.forum06 .f06-letzt { width: 168px; } .forum06 td.z { width: 58px; vertical-align: middle; }
.ordner06 { display: inline-block; width: 16px; height: 12px; margin: 0 5px 0 0; vertical-align: -1px; background: linear-gradient(#f9e9a6, #d8a52c); border: 1px solid #8a6a10; border-radius: 1px 4px 1px 1px; }
.ordner06.neu { background: linear-gradient(#ffd0a0, #e0561e); border-color: #8a2a00; }
.ordner06.kat { background: linear-gradient(#e4ecf2, #8fa9bb); border-color: #e4ecf2; }
.f06-name .ordner06 { float: left; margin-top: 2px; }
.legende06 { margin-top: 4px; }
.tab .ikon { width: 22px; text-align: center; }
.ordner { display: inline-block; width: 16px; height: 12px; background: linear-gradient(#f9e9a6, #d8a52c); border: 1px solid #8a6a10; }
table.mini th { text-align: left; font-weight: normal; padding-right: 8px; }
dl.meta { display: grid; grid-template-columns: max-content 1fr; gap: 1px 10px; margin: 4px 0; }
dl.meta dt { color: var(--leise06); } dl.meta dd { margin: 0; }

/* Inhalte */
.eintrag { padding: 4px 0; border-bottom: 1px dotted var(--kante06); overflow: hidden; }
.eintrag h3 { margin: 0; } .gross { font-size: 12px; font-weight: bold; }
.katbild { float: right; margin: 0 0 4px 8px; border: 1px solid #000; max-width: 120px; }
.filter { background: #fff; border: 1px solid var(--kante06); padding: 3px 5px; margin-bottom: 6px; }
.filter .abc { word-spacing: 2px; }
.seiten { margin: 6px 0; }
.fuss-zeile { margin-top: 6px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.komm { border-bottom: 1px dotted var(--kante06); padding: 3px 0; overflow-wrap: anywhere; }
blockquote.zitat { margin: 4px 0; padding: 3px 6px; background: #fff; border: 1px solid var(--kante06); }
pre.code { background: #fff; border: 1px solid var(--kante06); padding: 4px; overflow-x: auto; font: 11px "Courier New", monospace; }
.sig { color: var(--leise06); border-top: 1px dashed var(--kante06); margin-top: 6px; padding-top: 3px; }
.thread .beitrag { display: grid; grid-template-columns: 140px 1fr; border: 1px solid var(--kante06); margin-bottom: -1px; }
.beitrag .autor { background: var(--g06-zeile); padding: 4px; border-right: 1px solid var(--kante06); font-weight: bold; }
.beitrag .inhalt { padding: 4px 6px; background: #fff; overflow-wrap: anywhere; }
.modbox { margin-top: 6px; }
.reiter ul { display: flex; list-style: none; margin: 0 0 6px; padding: 0; gap: 2px; border-bottom: 1px solid var(--kante06); }
.reiter a { display: block; padding: 2px 10px; background: var(--g06-zeile); border: 1px solid var(--kante06); border-bottom: 0; }
.reiter a[aria-current="page"] { background: var(--g06-hell); font-weight: bold; color: #000; }
.kanaele { display: grid; grid-template-columns: 150px 1fr; gap: 8px; }
.kanalliste ul { list-style: none; margin: 2px 0 6px; padding: 0; } .kanalliste a[aria-current="page"] { font-weight: bold; color: #000; }
.kanalliste h3 { margin: 0; }
.chat-liste { list-style: none; height: 280px; overflow-y: auto; margin: 0 0 4px; padding: 3px 5px; background: #fff; border: 1px solid var(--kante06); }
.chat-liste li { padding: 1px 0; overflow-wrap: anywhere; }
.abschnitt { margin-bottom: 8px; }
.liste { list-style: none; margin: 0; padding: 0; } .liste li { padding: 2px 0; border-bottom: 1px dotted var(--kante06); }
.galerie, .kacheln { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.galerie li { width: 150px; text-align: center; } .galerie img, .thumb { border: 1px solid #000; max-width: 140px; }
.kacheln li { border: 1px solid var(--kante06); background: #fff; padding: 4px 8px; }
.bildbox img { border: 1px solid #000; }
.wand { display: block; }
.zettel { border: 1px solid var(--kante06); background: #fff; margin: 0 0 6px; padding: 0; }
.zettel h3 { margin: 0; padding: 2px 5px; background: linear-gradient(#f4f7f9, #c3d0d9); border-bottom: 1px solid var(--kante06); font-size: 12px; }
.zettel > p, .zettel > div { padding: 0 5px; }
.wochenende { overflow-x: auto; } .karten { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.flyer { flex: none; width: 160px; border: 1px solid var(--kante06); background: #fff; padding: 4px; }
.flyer-datum span { display: inline-block; margin-right: 4px; font-weight: bold; }
.flyer h3 { font-size: 11px; margin: 2px 0; }
.teilen { display: none; }
.chip { display: inline-block; font-size: 10px; padding: 0 5px; border: 1px solid var(--kante06); background: #fff; color: #000; }
.chip.aus, .aus { color: #777; }
.lampe { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1px solid #555; background: #9aa5ad; vertical-align: 0; }
.lampe.an { background: #22c42a; }
.rang, .rolle { font-size: 10px; color: #31556b; font-weight: bold; }
.rang::before { content: "["; } .rang::after { content: "]"; }
.rolle.admin { color: #b00000; } .rolle.mod { color: #006d2a; }
.zahl { font-weight: bold; color: #b00000; }
.umfrage { list-style: none; margin: 0; padding: 0; } meter { width: 100%; }
.zaehler { display: none; }
.buddies { list-style: none; margin: 0; padding: 0; }
.hoert { font-size: 10px; color: #8a4a00; }
.geheim code { font-size: 14px; padding: 2px 6px; }
/* Passkeys in der Ansicht 2006 */
.pk-meldung { margin: 4px 0; padding: 3px 5px; border: 1px solid #5a6b8c; font-size: 11px; background: #fff; }
.pk-meldung.fehler { color: #a00000; border-color: #a04040; }
.pk-meldung.ok { color: #1d5e1d; }
ol.codes { margin: 6px 0 10px 18px; padding: 0; }
ol.codes code { font-size: 13px; }
.pk-codes { padding: 6px; border: 1px solid #5a6b8c; }
.flogin06 .pk-meldung { grid-column: 1 / -1; }

/* Smilies (gezeichnet) */
.sm { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; border-radius: 50%; border: 1px solid #8a5d00; background: radial-gradient(circle at 35% 30%, #fff3a8, #f5c400); position: relative; box-sizing: border-box; }
.sm::before { content: ""; position: absolute; left: 3px; top: 4px; width: 2px; height: 3px; background: #3b2a00; box-shadow: 5px 0 0 #3b2a00; }
.sm::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 2px; height: 3px; border-bottom: 2px solid #5c3d00; border-radius: 0 0 6px 6px; }
.sm-sad::after { bottom: 1px; border-bottom: 0; border-top: 2px solid #5c3d00; border-radius: 6px 6px 0 0; }
.sm-oh::after { left: 5px; right: 5px; height: 3px; border: 1px solid #5c3d00; border-radius: 50%; }
.sm-grin::after { height: 3px; background: #5c3d00; }
.sm-tongue::after { background: linear-gradient(transparent 40%, #e8526b 40%); }
.sm-wink::before { height: 1px; top: 5px; }

/* Fuss */
.fuss06 { margin-top: 6px; padding: 6px 0 2px; text-align: center; border-top: 1px solid var(--kante06); font-size: 10px; }
.fuss06 p { margin: 2px 0; }

/* Techno-Mauszeiger wie um 2000: DJ-Tonabnehmer, das Foto des Betreibers im 16-Bit-Pixelstil, ueberall gleich, auch ueber
   Links, Knoepfen und Eingabefeldern. Ausrichtung wie auf dem Foto; Klickpunkt ist die goldene Nadelspitze unten links (1,29). */
html.zeit-2006, body.b06, body.b06 * { cursor: url(2006/zeiger.png) 1 29, auto !important; }

/* Druck und Bewegung */
@media (prefers-reduced-motion: reduce) {
  .lauf06-band, .hoch06 ul, .quer06 ul, .eq06 i::after { animation: none !important; }
  .lauf06-fenster { overflow-x: auto; }
  .hoch06 { height: auto; max-height: 272px; overflow-y: auto; }
  .quer06 { overflow-x: auto; }
}

/* Bilder aus dem Fediverse: eingeblendet erst nach Klick (Zwei-Klick), vorher ein Platzhalter im Stil von damals */
figure.fedi { margin: 0 0 4px; text-align: center; }
.fedi-rahmen { display: flex; align-items: center; justify-content: center; width: 130px; height: 130px; margin: 2px auto; border: 1px solid #000;
  background: repeating-linear-gradient(135deg, #dfe6eb 0 6px, #c8d3db 6px 12px); overflow: hidden; }
.fedi-galerie .fedi-rahmen { width: 140px; height: 140px; }
.fedi-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fedi-platz { font-size: 10px; color: #3b4b57; padding: 4px; }
.fedi-rahmen.geladen .fedi-platz { display: none; }
.fedi-zustimmung { margin: 4px 0 8px; padding: 6px 8px; font-size: 12px; color: #1d1d1d; background: #fff4c2; border: 1px solid #b8962a; border-left-width: 4px; }
.fedi-laden { font-weight: bold; }
.fedi-tipp { display: block; margin-top: 3px; font-weight: bold; color: #1d1d1d; }
html:not(.js) .fedi-laden, html:not(.js) .fedi-tipp { display: none; }
/* Galerie-Archiv nach Monat und Tag (2006: schlichte Aufklapp-Zeilen) */
.farchiv details { margin: 0 0 4px; border: 1px solid #8fa1ad; background: #eef2f5; }
.farchiv summary { padding: 3px 6px; cursor: pointer; font-weight: bold; }
.farchiv .fboard summary { font-weight: normal; }
.farchiv .fzahl { margin-left: 8px; font-weight: normal; color: #3b4b57; font-size: 11px; }
.farchiv .finnen { padding: 4px 6px; }
.farchiv .fedi-rahmen { cursor: zoom-in; }
/* Bild-Ansicht der Galerie: Handy wischen (scroll-snap), PC Lightbox; Beruehrungsziele mindestens 44 px, Safe-Area beachtet */
body.bt-offen { overflow: hidden; }
.betrachter { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: rgba(0, 0, 0, .97); color: #f2f2f2;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.bt-kopf { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; flex: none; }
.bt-zaehler { font-weight: 700; font-size: 1rem; }
.betrachter button { min-width: 48px; min-height: 48px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(0, 0, 0, .55);
  color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.betrachter button:focus-visible, .bt-bahn:focus-visible { outline: 3px solid #ffd23a; outline-offset: 2px; }
.betrachter button[disabled] { opacity: .3; cursor: default; }
.bt-bahn { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.bt-bahn::-webkit-scrollbar { display: none; }
.bt-folie { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; margin: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 8px 12px 14px; min-width: 0; }
.bt-img { max-width: 100%; max-height: calc(100% - 90px); object-fit: contain; }
.bt-text { max-width: 60ch; text-align: center; font-size: .95rem; line-height: 1.45; }
.bt-von { opacity: .85; }
.bt-links { display: flex; gap: 18px; justify-content: center; margin-top: 6px; }
.bt-links a { color: #ffd23a; display: inline-block; min-height: 44px; line-height: 44px; }
.bt-pfeil { position: absolute; top: 50%; transform: translateY(-50%); }
.bt-zurueck { left: max(8px, env(safe-area-inset-left)); } .bt-weiter { right: max(8px, env(safe-area-inset-right)); }
@media (hover: none) and (pointer: coarse) { .bt-pfeil { display: none; } }      /* am Handy wischen statt Pfeile */
@media (prefers-reduced-motion: reduce) { .bt-bahn { scroll-behavior: auto; } }

a.melden:link, a.melden:visited { font-size: 10px; color: #52799c; }

/* Videos (Zwei-Klick) in der Ansicht 2006 */
.videoraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
figure.video { margin: 0; }
.video-rahmen { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid #8fa1ad; }
.video-rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-platz { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; text-align: center;
  text-decoration: none; background: #1b2a35; font-size: 12px; }
.video-play { width: 40px; height: 40px; border: 2px solid #fff; border-radius: 50%; position: relative; }
.video-play::after { content: ''; position: absolute; left: 15px; top: 11px; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
figure.video figcaption { font-size: 11px; margin-top: 4px; }
.video-zustimmung { margin: 4px 0 8px; padding: 6px 8px; font-size: 12px; color: #1d1d1d; background: #fff4c2; border: 1px solid #b8962a; border-left-width: 4px; }
html:not(.js) .video-zustimmung { display: none; }

/* Fediverse-Stream in der Ansicht 2006 */
.sb-filter a { margin-right: 6px; }
.sb-filter a[aria-current="page"] { font-weight: bold; }
.sb { margin: 0 0 8px; padding: 6px 8px; border: 1px solid #8fa1ad; background: #eef2f5; font-size: 12px; overflow-wrap: anywhere; }
.sb-kopf { margin-bottom: 4px; }
.sb-bot { font-size: 10px; border: 1px solid #8fa1ad; padding: 0 3px; }
.sb-medien { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sb-fuss { margin-top: 4px; font-size: 11px; }
/* Podcasts in der Ansicht 2006 */
.pod-liste { list-style: none; margin: 0; padding: 0; }
.pod-liste li { margin: 0 0 6px; padding: 4px 6px; border: 1px solid #8fa1ad; background: #eef2f5; font-size: 12px; }