/* Schriften liegen im Paket. Es geht keine Anfrage an Google oder sonst nach außen. */
@font-face{font-family:'Inter'; src:url('/fonts/inter-latin-400-normal.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:'Inter'; src:url('/fonts/inter-latin-500-normal.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:'Inter'; src:url('/fonts/inter-latin-600-normal.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap}
@font-face{font-family:'Bricolage Grotesque'; src:url('/fonts/bricolage-grotesque-latin-500-normal.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:'Bricolage Grotesque'; src:url('/fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap}
@font-face{font-family:'Bricolage Grotesque'; src:url('/fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap}

:root{
  --h:40px;
  --gruen:#2F6F3A; --gruen-2:#265C30; --rot:#B3261E; --rot-2:#8F1D18;
  --ink:#122542; --navy:#1B3A66; --navy-2:#2A5490; --paper:#F7F4EE;
  --card:#FFFFFF; --line:#E6E0D4; --erz:#C24A12; --orange:#EE7A22;
  --muted:#6E7B8C; --sand:#EFE9DE; --gruen:#2F6F3A;
  /* Karten liegen auf dem Papier, nicht darin: ein Hauch Schatten reicht */
  --karte-schatten:0 1px 2px rgba(18,37,66,.05);
  --r:14px; --shadow:0 1px 2px rgba(18,37,66,.07), 0 8px 24px rgba(18,37,66,.08);
  --weich:#FBF7F0; --weich2:#FAF4EA; --weich3:#FFF7EF; --fuss:#EBE1D0;
  --gruen-weich:#F1F7EF; --gruen-weich2:#DCE9D8; --orange-weich:#FCE6D3; --rot-weich:#FBE0D6;
  --feldbg:#FFFFFF; --kopf:#122542; --kopfschrift:#F3EBDD; --kopflinie:#34507C; --kopfhover:#1D3860;
  --bild:#EDE3D2; --schatten-stark:rgba(18,37,66,.6);
  /* Zu jeder Fläche gehört die Schrift, die darauf lesbar ist. Dreht sich die
     Fläche beim Umschalten von hell auf dunkel, dreht sich die Schrift mit. */
  --auf-ink:#F3EBDD; --auf-navy:#FFFFFF; --auf-orange:#12253F; --auf-erz:#FFFFFF;
  --auf-gruen:#FFFFFF; --auf-rot:#FFFFFF; --auf-sand:#122542;
  --auf-weich-gruen:#2E5A2A; --auf-weich-orange:#8E430D; --auf-weich-rot:#8E2F0D;
  /* Zweite Spalte der Doppelansicht */
  --zweit:#0E7C86; --auf-zweit:#FFFFFF; --zweit-weich:#E2F1F2;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ======================================================================
   DUNKLER MODUS
   Umgeschaltet über data-thema am html-Element. Ohne eigene Wahl richtet
   sich die Seite nach der Einstellung des Geräts.
   ====================================================================== */
html[data-thema="dunkel"]{
  --ink:#E6EDF5; --navy:#7FA8DC; --navy-2:#9BC0EC; --paper:#131C27;
  --card:#1B2733; --line:#2C3B4B; --erz:#E9713A; --orange:#F08A38;
  --muted:#94A6BA; --sand:#243343;
  --gruen:#4E9A5B; --gruen-2:#5CAE6A; --rot:#D9584E; --rot-2:#E56A60;
  --weich:#212E3C; --weich2:#26333F; --weich3:#2A3644; --fuss:#0F1720;
  --gruen-weich:#1D2E24; --gruen-weich2:#22392A; --orange-weich:#382518; --rot-weich:#3A2320;
  --feldbg:#141D27; --kopf:#0E1720; --kopfschrift:#E6EDF5; --kopflinie:#2C3B4B; --kopfhover:#1A2632;
  --bild:#243343; --schatten-stark:rgba(0,0,0,.72);
  /* Im Dunkeln sind ink und navy helle Farben, also braucht es dunkle Schrift darauf */
  --auf-ink:#0E1720; --auf-navy:#0E1720; --auf-orange:#1A1005; --auf-erz:#FFFFFF;
  --auf-gruen:#FFFFFF; --auf-rot:#FFFFFF; --auf-sand:#E6EDF5;
  --auf-weich-gruen:#9FD3A6; --auf-weich-orange:#F3B27E; --auf-weich-rot:#F0A18C;
  --zweit:#3FB3BD; --auf-zweit:#0E1720; --zweit-weich:#163034;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
}
html[data-thema="dunkel"] .hero{background:linear-gradient(160deg,#101C2B 0%, #1B3252 100%)}
html[data-thema="dunkel"] .anmelde{background:linear-gradient(160deg,#0B131C 0%, #16283E 100%)}
html[data-thema="dunkel"] .merk{background:rgba(27,39,51,.9)}
html[data-thema="dunkel"] .csys{background:var(--card)}
html[data-thema="dunkel"] img{filter:brightness(.94)}
html[data-thema="dunkel"] .tag{color:#C6D4E4}
html[data-thema="dunkel"] .crow.me .cbub{background:#24507F}
html[data-thema="dunkel"] .k{background:rgba(255,255,255,.08)}
html[data-thema="dunkel"] .leer{border-color:var(--line)}

*{box-sizing:border-box}
body{margin:0; font-family:var(--body); background:var(--paper); color:var(--ink); line-height:1.5}
button,input,select,textarea{font-family:inherit}
a{color:var(--navy)}
:focus-visible{outline:3px solid var(--orange); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }

/* Kopfzeile */
.top{background:var(--kopf); color:var(--kopfschrift); padding:12px 18px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; position:sticky; top:0; z-index:30}
.top .such,.top .tbtn{height:var(--h)}
.marke{display:flex; align-items:center; gap:10px; background:none; border:0; color:inherit; cursor:pointer; padding:0}
.logo{width:34px;height:34px;border-radius:9px;background:var(--orange);display:grid;place-items:center;font-size:19px}
.wort{font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.02em; line-height:1}
.wort span{color:var(--orange)}
.claim{font-size:10.5px; color:#9DB0CB; text-transform:uppercase; letter-spacing:.05em}
.such{flex:1 1 220px; display:flex; background:var(--feldbg); border-radius:9px; overflow:hidden; min-width:180px}
.such input{flex:1; border:0; padding:0 13px; font-size:13.5px; min-width:0; background:transparent; color:var(--ink)}
.such input:focus{outline:none}
.such button{border:0; background:var(--orange); color:var(--auf-orange); padding:0 15px; font-weight:600; cursor:pointer}
.tnav{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.tbtn{background:transparent; border:1px solid var(--kopflinie); color:var(--kopfschrift); padding:0 12px; border-radius:9px; font-size:13px;
  cursor:pointer; display:inline-flex; gap:7px; align-items:center; white-space:nowrap}
.tbtn:hover{background:var(--kopfhover)}
.tbtn.warn{background:var(--orange); border-color:var(--orange); color:var(--auf-orange); font-weight:600}
.badge{background:var(--erz); color:var(--auf-erz); border-radius:20px; font-size:10px; padding:1px 6px; font-weight:600}

.wrap{max-width:1320px; margin:0 auto; padding:20px 18px 60px}
h1,h2,h3,h4{font-family:var(--display); letter-spacing:-.02em; margin:0}
h2.sec{font-size:22px; font-weight:700; margin-bottom:4px}
h3.sub3{font-size:16px; font-weight:700; margin-bottom:6px}
h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:9px}
.sub{color:var(--muted); font-size:13px; margin:0 0 16px}
.hint{font-size:12px; color:var(--muted)}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.kasten{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:16px;
  box-shadow:var(--karte-schatten)}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:760px){ .duo{grid-template-columns:1fr} }

/* Formulare */
.f{display:block; margin-bottom:10px}
.f label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:5px; font-weight:600}
.f input,.f select,.f textarea{width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:9px;
  font-size:13.5px; background:var(--feldbg); color:var(--ink)}
.f textarea{min-height:110px; resize:vertical}
.frow{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
/* ---------- Knopfsystem ----------
   grün speichern · orange handeln · rot löschen und abbrechen · weiß neutral */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--h);
  padding:0 18px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink);
  font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; line-height:1;
  transition:filter .12s, background .12s}
.btn:hover{background:var(--weich2)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn.speichern{background:var(--gruen); border-color:var(--gruen); color:var(--auf-gruen)}
.btn.speichern:hover{background:var(--gruen-2)}
.btn.aktion,.btn.warn{background:var(--orange); border-color:var(--orange); color:var(--auf-orange)}
.btn.aktion:hover,.btn.warn:hover{filter:brightness(1.06); background:var(--orange)}
.btn.loeschen{background:var(--rot); border-color:var(--rot); color:var(--auf-rot)}
.btn.loeschen:hover{background:var(--rot-2)}
.btn.abbrechen{background:var(--card); border-color:var(--rot); color:var(--rot)}
.btn.abbrechen:hover{background:var(--rot-weich)}
.btn.go{background:var(--navy); border-color:var(--navy); color:var(--auf-navy)}
.btn.go:hover{background:var(--navy-2)}
.btn.voll{width:100%; margin-top:9px}
.btn.klein{min-height:32px; padding:0 13px; font-size:13px}
.knopfreihe{display:flex; gap:9px; flex-wrap:wrap; align-items:center}
.knopfreihe.rechts{justify-content:flex-end}

.chip{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:6px 12px; font-size:12.5px; cursor:pointer; color:var(--ink)}
.chip.on{background:var(--kopf); color:var(--kopfschrift); border-color:var(--kopf)}
.chip.warn,.chip.aktion{background:var(--orange); border-color:var(--orange); color:var(--auf-orange); font-weight:600}
.chip.speichern{background:var(--gruen); border-color:var(--gruen); color:var(--auf-gruen); font-weight:600}
.chip.loeschen{background:var(--rot); border-color:var(--rot); color:var(--auf-rot); font-weight:600}
.chip.abbrechen{background:var(--card); border-color:var(--rot); color:var(--rot)}
.tag{font-size:10.5px; background:var(--sand); color:var(--auf-sand); padding:2px 8px; border-radius:20px; font-weight:500}
.tag.ok{background:var(--gruen-weich2); color:var(--auf-weich-gruen)}
.tag.warn{background:var(--orange-weich); color:var(--auf-weich-orange)}
.tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:16px; flex-wrap:wrap}
.tab{background:none; border:0; padding:9px 13px; cursor:pointer; font-size:13.5px; color:var(--muted); border-bottom:2px solid transparent}
.tab.on{color:var(--ink); border-bottom-color:var(--orange); font-weight:600}
.meldung{border-radius:10px; padding:10px 13px; font-size:13px; margin-bottom:14px}
.meldung.fehler{background:var(--rot-weich); border:1px solid var(--rot); color:var(--auf-weich-rot)}
.meldung.gut{background:var(--gruen-weich2); border:1px solid var(--gruen); color:var(--auf-weich-gruen)}
.meldung.info{background:var(--orange-weich); border:1px solid var(--orange); color:var(--auf-weich-orange)}

/* Anmeldung */
.anmelde{min-height:100vh; display:grid; place-items:center; padding:24px;
  background:linear-gradient(160deg,#0E2039 0%, #244B80 100%)}
.anmeldebox{background:var(--card); border-radius:18px; padding:26px; width:100%; max-width:440px; box-shadow:var(--shadow)}
.anmeldebox .kopf{display:flex; align-items:center; gap:11px; margin-bottom:6px}
.umschalt{display:flex; background:var(--sand); border-radius:10px; padding:3px; margin:16px 0}
.umschalt button{flex:1; border:0; background:none; padding:9px; border-radius:8px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--muted)}
.umschalt button.on{background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(18,37,66,.12)}

/* Anzeigen */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-top:14px}
.karte{background:var(--card); border:1px solid var(--line); border-radius:13px; overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column; text-align:left; padding:0; box-shadow:var(--karte-schatten); transition:transform .12s, box-shadow .12s}
.karte:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.bild{aspect-ratio:4/3; background:var(--bild); display:grid; place-items:center; font-size:38px; position:relative; overflow:hidden}
.bild img{width:100%; height:100%; object-fit:cover}
.artflag{position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em}
.art-verkaufe{background:var(--kopf); color:var(--kopfschrift)}
.art-verschenke{background:var(--gruen); color:var(--auf-gruen)}
.art-tausche{background:var(--navy-2); color:var(--auf-navy)}
.art-suche{background:var(--orange); color:var(--auf-orange)}
.kinhalt{padding:11px 12px 13px; display:flex; flex-direction:column; gap:5px; flex:1}
.preis{font-family:var(--display); font-weight:700; font-size:17px}
.ktitel{font-weight:600; font-size:14px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.kmeta{font-size:11.5px; color:var(--muted); margin-top:auto}

.detail{display:grid; grid-template-columns:1.4fr .6fr; gap:22px}
@media(max-width:860px){ .detail{grid-template-columns:1fr} }
.galerie{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:var(--karte-schatten)}
.gmain{aspect-ratio:4/3; background:var(--bild); display:grid; place-items:center; font-size:80px}
.gmain img{width:100%; height:100%; object-fit:contain; background:var(--card)}
.gmini{display:flex; gap:8px; padding:10px; flex-wrap:wrap}
.gmini button{width:64px; height:50px; border-radius:8px; overflow:hidden; border:2px solid transparent; cursor:pointer; padding:0; background:var(--sand)}
.gmini button.on{border-color:var(--orange)}
.gmini img{width:100%; height:100%; object-fit:cover}
.kv{display:grid; grid-template-columns:auto 1fr; gap:7px 14px; font-size:13.5px; margin:14px 0}
.kv dt{color:var(--muted)}
.kv dd{margin:0; font-weight:500}

/* Profilbilder */
.av{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:18px; overflow:hidden;
  flex:0 0 36px; background:var(--sand); border:1px solid rgba(18,37,66,.12); line-height:1}
.av img{width:100%; height:100%; object-fit:cover}
.av.gross{width:72px; height:72px; flex:0 0 72px; font-size:34px}
.av.klein{width:26px; height:26px; flex:0 0 26px; font-size:13px}
.avwahl{display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:8px; margin:12px 0}
.avwahl button{aspect-ratio:1; border-radius:50%; border:2px solid transparent; font-size:22px; cursor:pointer; color:#fff}
.avwahl button.on{border-color:var(--orange); box-shadow:0 0 0 3px rgba(238,122,34,.25)}

/* Vorgänge und Chat */
.vorg{display:grid; grid-template-columns:62px 1fr auto; gap:13px; align-items:center; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:13px; padding:11px; margin-bottom:9px; cursor:pointer; color:var(--ink); box-shadow:var(--karte-schatten)}
.vorg:hover{border-color:var(--orange)}
.vbild{width:62px; height:50px; border-radius:9px; overflow:hidden; background:var(--sand); display:grid; place-items:center; font-size:22px}
.vbild img{width:100%; height:100%; object-fit:cover}
.chat{display:flex; flex-direction:column; gap:13px; margin-top:12px}
.crow{display:flex; gap:9px; align-items:flex-end}
.crow.me{flex-direction:row-reverse}
.cbub{max-width:76%; padding:9px 13px; border-radius:16px; font-size:13.5px}
/* Auch hier gehören die Umbrüche zum Text und nicht zur Blase */
.ctext{display:block; white-space:pre-wrap; overflow-wrap:anywhere}
.crow.me .cbub{background:var(--navy); color:var(--auf-navy); border-bottom-right-radius:5px}
.crow.them .cbub{background:var(--sand); border-bottom-left-radius:5px}
.cname{font-size:10.5px; color:var(--muted); margin:0 0 4px 3px}
.crow.me .cname{text-align:right; margin:0 3px 4px 0}
.ctime{font-size:9.5px; opacity:.65; margin-top:4px}
.csys{align-self:center; background:var(--card); border:1px solid var(--line); color:var(--muted); font-size:11.5px;
  padding:6px 13px; border-radius:20px; text-align:center; max-width:90%}
.cang{align-self:center; background:var(--orange-weich); border:1px solid var(--orange); color:var(--auf-weich-orange); font-size:12.5px;
  padding:8px 14px; border-radius:12px; text-align:center; font-weight:600}
.anh{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px}
.anh a{width:62px; height:50px; border-radius:7px; overflow:hidden; display:grid; place-items:center;
  background:var(--sand); font-size:10px; color:var(--ink); text-decoration:none}
.anh img{width:100%; height:100%; object-fit:cover}
.frei{background:var(--gruen-weich); border:1px solid #B9D4B0; border-radius:14px; padding:16px; margin-bottom:16px}

/* Tabellen */
.tbl{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:13px; box-shadow:var(--karte-schatten)}
.tbl th{background:var(--kopf); color:var(--kopfschrift); text-align:left; padding:9px 11px; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em}
.tbl td{padding:9px 11px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.leer{background:var(--card); border:1px dashed var(--line); border-radius:14px; padding:30px; text-align:center}
.leer b{font-family:var(--display); font-size:17px; display:block; margin-bottom:6px}
.modal{position:fixed; inset:0; background:var(--schatten-stark); display:flex; align-items:center;
  justify-content:center; padding:18px; z-index:50; overflow:auto; overscroll-behavior:contain}
.blatt{background:var(--card); border-radius:16px; padding:22px; max-width:560px; width:100%; box-shadow:var(--shadow)}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--kopf); color:var(--kopfschrift);
  padding:11px 18px; border-radius:30px; font-size:13.5px; z-index:60}
.kpi{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:18px}
.kpi>div{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px;
  box-shadow:var(--karte-schatten)}
.kpi b{display:block; font-family:var(--display); font-size:24px; font-weight:800}
.kpi span{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}

/* Hervorhebung, wenn zu einem fehlenden Feld gesprungen wird */
@keyframes blinken{0%,100%{box-shadow:0 0 0 0 rgba(238,122,34,0)}30%,70%{box-shadow:0 0 0 4px rgba(238,122,34,.45)}}
.blinkt{animation:blinken 1.5s ease-in-out; border-color:var(--orange)!important}
@media (prefers-reduced-motion: reduce){ .blinkt{animation:none; border-color:var(--orange)!important; box-shadow:0 0 0 3px rgba(238,122,34,.4)} }

/* Leerer Profilbildplatz */
.av.leer{background:var(--bild); border:1px solid var(--line); color:var(--muted); font-weight:700; font-family:var(--display)}

/* ======================================================================
   LAYOUTSYSTEM
   Drei Bausteine, überall gleich aufgebaut:

     TAFEL    Ein Kasten im Seiteninhalt.   header · inhalt · footer
     BLATT    Ein Fenster über der Seite.   header · inhalt · footer
     ZEILE    Eine Feldzeile in einem Inhalt: Beschriftung links, Eingabe rechts.

   Regeln, die für beide Kästen gelten:
     - header trägt Titel und Erklärung, hat immer denselben Hintergrund.
     - inhalt trägt alles Übrige und ist das Einzige, was scrollt.
     - footer trägt ausschließlich Knöpfe, immer rechtsbündig, immer sichtbar.
     - Ein Formular darf die drei umschließen. Deshalb wird es mit
       display:contents unsichtbar gemacht, sonst greifen die Kindregeln nicht.
       Genau daran ist die Fußzeile zuvor nach links gerutscht.
     - Nichts darf breiter werden als sein Kasten: minmax(0,1fr) im Raster
       und box-sizing überall.
   ====================================================================== */

/* ---------- Adminbereich: Menü links, Inhalt rechts ---------- */
.admin{display:grid; grid-template-columns:250px minmax(0,1fr); gap:18px; align-items:start}
@media(max-width:900px){ .admin{grid-template-columns:minmax(0,1fr)} }
.adminmenu{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:8px;
  position:sticky; top:76px; min-width:0}
@media(max-width:900px){ .adminmenu{position:static; display:flex; gap:6px; overflow-x:auto; padding:8px} }
.adminmenu button{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none;
  border:0; border-radius:10px; padding:11px 12px; font-size:13.5px; color:var(--ink); cursor:pointer;
  white-space:nowrap; font-weight:500}
.adminmenu button:hover{background:var(--weich2)}
.adminmenu button.on{background:var(--kopf); color:var(--kopfschrift); font-weight:600}
.adminmenu button .sym{width:24px; text-align:center; font-size:15px; flex:0 0 24px}
.adminmenu button .zahl{margin-left:auto; background:var(--erz); color:var(--auf-erz); border-radius:20px;
  font-size:10px; padding:1px 7px; font-weight:700}
.adminmenu button.on .zahl{background:var(--orange); color:var(--auf-orange)}
.adminmenu .trenner{height:1px; background:var(--line); margin:6px 8px}

/* ---------- TAFEL ---------- */
.tafel{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  min-width:0; box-shadow:var(--karte-schatten)}
.tafel + .tafel{margin-top:16px}
.tafel form{display:contents}
.tafel header{padding:16px 18px; border-bottom:1px solid var(--line); background:var(--weich)}
.tafel header h3{font-family:var(--display); font-size:17px; font-weight:700; margin:0}
.tafel header p{margin:4px 0 0; font-size:12.5px; color:var(--muted)}
.tafel .inhalt{padding:18px; min-width:0}
.tafel footer{padding:14px 18px; border-top:1px solid var(--line); background:var(--weich);
  display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; align-items:center}

/* ---------- ZEILE ---------- */
.zeile{display:grid; grid-template-columns:minmax(170px,250px) minmax(0,1fr); gap:18px; align-items:center;
  padding:13px 0; border-bottom:1px solid var(--line)}
.zeile:first-child{padding-top:0}
.zeile:last-child{border-bottom:0; padding-bottom:0}
.zeile > .bez{font-size:13.5px; font-weight:600; min-width:0}
.zeile > .bez small{display:block; font-weight:400; color:var(--muted); font-size:11.5px; margin-top:3px; line-height:1.45}
.zeile > .wert{min-width:0}
.zeile .wert input,.zeile .wert select,.zeile .wert textarea{
  width:100%; max-width:640px; padding:9px 11px; border:1px solid var(--line); border-radius:9px;
  font-size:13.5px; background:var(--feldbg); color:var(--ink); font-family:inherit}
.zeile .wert textarea{min-height:90px; resize:vertical; line-height:1.6}
.zeile .wert input[type=number]{max-width:180px}
.zeile .wert .kurz{max-width:260px}
@media(max-width:640px){ .zeile{grid-template-columns:minmax(0,1fr); gap:7px; align-items:start} }

/* ---------- BLATT, das Fenster ---------- */
/* dvh statt vh: auf dem iPhone rechnet vh die Adressleiste mit, dadurch wird
   das Fenster höher als der sichtbare Bereich und Kopf oder Fuß rutschen hinaus. */
.blatt{padding:0; overflow:hidden; display:flex; flex-direction:column; min-width:0;
  max-height:88vh; max-height:88dvh}
.blatt form{display:contents}
.blatt header{padding:16px 18px; border-bottom:1px solid var(--line); background:var(--weich);
  display:flex; align-items:flex-start; gap:12px; flex:0 0 auto}
.blatt header h3{font-family:var(--display); font-size:18px; font-weight:700; margin:0; flex:1}
.blatt header p{margin:4px 0 0; font-size:12.5px; color:var(--muted)}
.blatt header .zu{background:none; border:0; font-size:20px; line-height:1; cursor:pointer;
  color:var(--muted); padding:2px 4px}
.blatt header .zu:hover{color:var(--ink)}
.blatt .inhalt{padding:18px; overflow-y:auto; min-width:0}
.blatt footer{padding:14px 18px; border-top:1px solid var(--line); background:var(--weich);
  display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; flex:0 0 auto}

/* ---------- Startband mit Bezirkskarte ---------- */
.hero{background:linear-gradient(160deg,#0E2039 0%, #244B80 100%); color:#F5EFE4; border-radius:18px;
  padding:26px; display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:center; margin-bottom:18px}
.hero h1{font-family:var(--display); font-size:clamp(24px,3vw,36px); line-height:1.05; letter-spacing:-.03em;
  margin:0 0 10px; font-weight:800}
.hero p{margin:0 0 18px; color:#C3D2E6; font-size:15px; max-width:48ch; line-height:1.6}
.stats{display:flex; gap:24px; margin-top:20px; border-top:1px solid rgba(255,255,255,.15); padding-top:14px; flex-wrap:wrap}
.stat b{display:block; font-family:var(--display); font-size:21px; font-weight:700}
.stat span{font-size:11px; color:#A8BCD8; text-transform:uppercase; letter-spacing:.05em}
@media(max-width:860px){ .hero{grid-template-columns:1fr; padding:20px} }

.mapbox{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:14px}
.maphead{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#A8BCD8; margin-bottom:10px}
.kmap{display:grid; grid-template-columns:repeat(4,1fr); gap:5px}
.k{background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.15); color:#EDF2F9; border-radius:7px;
  padding:9px 6px; font-size:10.5px; font-weight:500; cursor:pointer; text-align:left; line-height:1.25; min-height:46px}
.k:hover,.k.on{background:var(--orange); color:var(--auf-orange); border-color:var(--orange)}
.k .n{display:block; opacity:.7; font-size:9.5px; font-variant-numeric:tabular-nums; margin-top:2px}
.k.breit{grid-column:1 / span 2}

.cats{display:grid; grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); gap:9px; margin-top:12px}
.cat{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:9px 10px 10px; text-align:left;
  cursor:pointer; display:flex; flex-direction:column; gap:3px; color:var(--ink); box-shadow:var(--karte-schatten); transition:transform .12s, border-color .12s}
.cat:hover{transform:translateY(-2px); border-color:var(--orange)}
.cat.on{border-color:var(--orange); background:var(--weich3)}
.cat .ic{font-size:22px; line-height:1}
.cat .nm{font-weight:600; font-size:13px; line-height:1.25}
.cat .ct{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}

/* Merkherz auf der Karte */
.karte{cursor:pointer}
.merk{position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.92); border:1px solid var(--line); color:var(--muted);
  font-size:15px; line-height:1; cursor:pointer; display:grid; place-items:center; padding:0}
.merk:hover{color:var(--erz); border-color:var(--erz)}
.merk.on{color:var(--auf-erz); background:var(--erz); border-color:var(--erz)}

/* ---------- Breiter Adminbereich ---------- */
.wrap.breit{max-width:1560px}
.admin{grid-template-columns:250px minmax(0,1fr)}

/* Tabellenspalten mit Augenmaß */
.tbl{table-layout:auto}
.tbl td:last-child,.tbl th:last-child{text-align:right; white-space:nowrap; width:1%}
.tbl td:first-child{white-space:nowrap}
.tbl .sym{width:1%; font-size:20px; text-align:center; padding-right:0}
.tbl .knopfreihe{justify-content:flex-end}
.tbl tr:hover td{background:var(--weich)}

/* Forum */
.vorg.gepinnt{border-color:var(--orange); background:var(--weich3)}
.neupunkt{width:8px; height:8px; border-radius:50%; background:var(--orange); flex:0 0 8px; display:inline-block}
.loesung{margin-top:14px; border-left:3px solid var(--gruen); background:var(--gruen-weich); border-radius:0 10px 10px 0; padding:12px 14px}

/* ======================================================================
   HANDY
   Ab 760 Pixel abwärts: oben die Suche, unten eine feste Leiste mit den
   fünf wichtigsten Zielen, dazwischen der Inhalt. Am Rechner bleibt alles
   wie bisher, die Leiste ist dort ausgeblendet.
   ====================================================================== */
/* Die Zeichen neben der Marke gibt es nur am Handy. Am Rechner stehen
   Glocke und Profil in der Menüleiste, sonst stünde alles doppelt da. */
.kopfzeichen{display:none}
.tabbar{display:none}

@media (max-width: 760px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px))}

  /* Kopfzeile: Marke und Zeichen oben, Suche darunter über die volle Breite */
  .top{padding:10px 12px; gap:9px; flex-wrap:wrap; align-items:center}
  .top .marke{order:1}
  .top .kopfzeichen{order:2; margin-left:auto; display:flex; gap:7px; align-items:center}
  .top .thema{order:1}
  .top .such{order:3; flex:1 1 100%; min-width:0; height:42px}
  .top .tnav{display:none}
  .wort{font-size:17px}
  .claim{display:none}

  .wrap{padding:14px 12px 24px}
  .wrap.breit{max-width:none}

  /* Zwei Karten nebeneinander, sonst wird gescrollt ohne Ende */
  .grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
  .kinhalt{padding:9px 10px 11px}
  .ktitel{font-size:13px}
  .preis{font-size:15px}
  .kmeta{font-size:11px}

  .hero{grid-template-columns:minmax(0,1fr); padding:18px; gap:18px}
  .hero h1{font-size:23px}
  .kmap{grid-template-columns:repeat(2,1fr)}
  .k.breit{grid-column:auto}
  .stats{gap:16px}
  .cats{grid-template-columns:repeat(2, minmax(0,1fr))}

  .duo{grid-template-columns:minmax(0,1fr)}
  .frow{grid-template-columns:minmax(0,1fr)}
  .zeile{grid-template-columns:minmax(0,1fr); gap:7px; align-items:start}
  .zeile .wert input,.zeile .wert select,.zeile .wert textarea{max-width:none}

  /* Fenster kommen von unten und füllen die Breite */
  .modal{padding:0; align-items:flex-end}
  .blatt{max-width:none; max-height:92vh; max-height:92dvh; border-radius:16px 16px 0 0}
  .blatt .inhalt{-webkit-overflow-scrolling:touch; overscroll-behavior:contain}
  .blatt footer{padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px))}

  /* Finger statt Mauszeiger */
  .btn{min-height:44px; padding:0 16px}
  .btn.klein{min-height:38px}
  .chip{padding:9px 13px; font-size:13px}
  .adminmenu button{padding:12px 13px}
  .tbl{font-size:12.5px}
  .tbl td,.tbl th{padding:8px 9px}
  .vorg{grid-template-columns:52px minmax(0,1fr); gap:10px}
  .vorg > :last-child{grid-column:1 / -1; text-align:right}
  .cbub{max-width:84%}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom, 0px))}

  /* Untere Leiste */
  .tabbar{display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0;
    z-index:40; background:var(--kopf); border-top:1px solid var(--kopflinie);
    padding-bottom:env(safe-area-inset-bottom, 0px)}
  .tabbar button{background:none; border:0; color:var(--kopfschrift); opacity:.62; padding:8px 4px 9px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; font-weight:500;
    position:relative; min-height:56px; justify-content:center}
  .tabbar button .sym{font-size:19px; line-height:1}
  /* Wo man gerade steht: oranger Balken oben, Zeichen in einem Ring,
     kräftigere Schrift. Beim Umschalten fährt der Balken ein. */
  .tabbar button.on{opacity:1; color:var(--orange); font-weight:700}
  .tabbar button.on:before{content:""; position:absolute; top:0; left:22%; right:22%; height:3px;
    background:var(--orange); border-radius:0 0 3px 3px}
  .tabbar button.on .sym{background:rgba(238,122,34,.16); border-radius:50%;
    width:32px; height:32px; display:grid; place-items:center; margin-bottom:-2px}
  .tabbar button.mitte{opacity:1}
  .tabbar button.mitte .sym{background:var(--orange); color:var(--auf-orange); width:42px; height:42px;
    border-radius:50%; display:grid; place-items:center; margin-top:-14px;
    box-shadow:0 4px 10px rgba(18,37,66,.35); font-size:22px; font-weight:700}
  .tabbar button.mitte{color:var(--orange)}
  .tabbar .zahl{position:absolute; top:4px; right:calc(50% - 22px); background:var(--erz); color:var(--auf-erz);
    border-radius:20px; font-size:9px; font-weight:700; padding:1px 5px; line-height:1.5}
}

/* Am Handy klebt die Handlungsleiste unten, wie in den großen Apps.
   Sonst muss man erst an der ganzen Beschreibung vorbeiscrollen. */
@media (max-width: 760px){
  .handeln{position:sticky; bottom:calc(64px + env(safe-area-inset-bottom, 0px)); z-index:20;
    background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px;
    box-shadow:0 -4px 16px rgba(18,37,66,.10)}
  .handeln .btn.voll:first-child{margin-top:0}
  .detail aside{order:-1}
  .preisflag{transform:translateY(0); top:36px}
}

@media (max-width: 400px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .cats{grid-template-columns:minmax(0,1fr)}
}

/* Ähnliche Anzeigen unter dem Inserat */
.aehnlich .grund{font-size:10.5px; color:var(--erz); font-weight:600; margin-top:4px}

/* Umschalter hell und dunkel */
.thema{background:transparent; border:1px solid var(--kopflinie); color:var(--kopfschrift);
  height:var(--h); width:var(--h); border-radius:9px; cursor:pointer; font-size:16px;
  display:grid; place-items:center; padding:0; flex:0 0 auto}
.thema:hover{background:var(--kopfhover)}

.kennzeichen{position:absolute; top:8px; right:8px; font-size:10px; font-weight:700;
  padding:3px 8px; border-radius:20px; max-width:calc(100% - 16px); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}

/* ---------- Kategorienbaum, Aufbau wie im Dateiverwalter ---------- */
.baum{font-size:13.5px}
.ordner + .ordner{border-top:1px solid var(--line)}
.zweig{display:grid; grid-template-columns:26px 26px minmax(0,1fr) auto auto auto; gap:10px;
  align-items:center; padding:9px 4px}
.zweig:hover{background:var(--weich)}
.ordner.auf > .zweig{background:var(--weich)}
.klapp{background:none; border:0; cursor:pointer; font-size:13px; color:var(--muted); padding:2px}
.klapp:hover{color:var(--ink)}
.zweig .sym{font-size:18px; text-align:center}
.zweig .nm{font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.zahl{font-size:11.5px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.zahl.stark{color:var(--ink); font-weight:600}
.tun{display:flex; gap:6px; flex-wrap:nowrap}
/* Achtung: hier nicht .blatt verwenden, so heißt schon das Fenster. */
.aeste{padding:0 0 8px 39px; position:relative}
.aeste:before{content:""; position:absolute; left:16px; top:0; bottom:18px; width:1px; background:var(--line)}
.ast{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center;
  padding:6px 4px 6px 14px; position:relative}
.ast:before{content:""; position:absolute; left:-23px; top:50%; width:22px; height:1px; background:var(--line)}
.ast:hover{background:var(--weich)}
.ast .nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ast.leerzeile .nm{color:var(--muted); font-style:italic}
.ast.neu{padding-top:8px}
.ast.neu:before{border-top:1px dashed var(--line); background:none; height:0}
@media(max-width:760px){
  .zweig{grid-template-columns:24px 24px minmax(0,1fr); row-gap:6px}
  .zweig .zahl,.zweig .tun{grid-column:1 / -1; padding-left:58px}
  .ast{grid-template-columns:minmax(0,1fr) auto; row-gap:6px}
  .ast .tun{grid-column:1 / -1}
}

/* Ankündigungen oben, danach ein Strich */
.ankuendigungen .vorg{border-color:var(--orange)}
.trennstrich{display:flex; align-items:center; gap:12px; margin:18px 0 14px; color:var(--muted); font-size:11.5px}
.trennstrich:before,.trennstrich:after{content:""; height:1px; background:var(--line); flex:1}

/* ---------- Filterleiste ---------- */
.filterkasten{padding:14px 16px}
.filterreihe{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-top:12px}
.filterreihe .f{margin:0}
.filterreihe .preisfeld{grid-column:span 2; min-width:0}
.filterreihe .preisfeld input{width:100%; min-width:0}
.pillen{display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-top:12px;
  padding-top:12px; border-top:1px dashed var(--line)}
.pille{background:var(--ink); color:var(--auf-ink); border:0; border-radius:20px; padding:5px 11px;
  font-size:12px; font-weight:600; cursor:pointer; display:inline-flex; gap:6px; align-items:center}
.pille:hover{background:var(--rot)}
@media(max-width:760px){
  .filterreihe{grid-template-columns:minmax(0,1fr)}
  .filterreihe .preisfeld{grid-column:auto}
}

/* Solange ein Fenster offen ist, scrollt die Seite dahinter nicht mit */
body.fenster-offen{overflow:hidden}

/* Gesenkter Preis */
.alterpreis{font-family:var(--body); font-size:13px; font-weight:500; color:var(--muted);
  text-decoration:line-through; margin-left:7px}
.preisflag{position:absolute; top:8px; left:8px; background:var(--erz); color:var(--auf-erz); font-size:10px;
  font-weight:700; padding:3px 8px; border-radius:20px; transform:translateY(24px)}
.gruss{margin:0 0 6px; color:#A8BCD8; font-size:13px; font-weight:500}

/* Kategoriekachel mit Bild */
/* Flacher als hoch: die Kacheln sollen den Marktplatz nicht wegdrängen */
.katbild{display:block; aspect-ratio:16/6; border-radius:8px; overflow:hidden; background:var(--sand);
  display:grid; place-items:center; margin-bottom:2px}
.katbild img{width:100%; height:100%; object-fit:cover}
.cat .ic{font-size:21px}

/* Wischbare Galerie */
.gstreifen{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none}
.gstreifen::-webkit-scrollbar{display:none}
.gstreifen img{flex:0 0 100%; width:100%; aspect-ratio:4/3; object-fit:contain; background:var(--card);
  scroll-snap-align:center}
.gpunkte{display:flex; gap:7px; justify-content:center; padding:10px 0 2px}
.gpunkte button{width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--line)}
.gpunkte button.on{background:var(--orange); transform:scale(1.25)}
@media(max-width:760px){ .gmini{display:none} }

.kennzeichen.suchliste{background:var(--gruen); color:var(--auf-gruen)}
.kennzeichen.verlauf{background:var(--erz); color:var(--auf-erz)}

/* ---------- Schreibfeld im Forum ---------- */
.schreibfeld{margin:12px 0 18px; border:1px solid var(--line); border-radius:13px;
  background:var(--feldbg); overflow:hidden; box-shadow:var(--karte-schatten)}
.schreibfeld:focus-within{border-color:var(--orange)}
.schreibfeld textarea{width:100%; min-height:96px; max-height:320px; border:0; outline:none;
  padding:13px 15px; font:inherit; font-size:14px; line-height:1.65; resize:vertical;
  background:transparent; color:var(--ink); display:block}
.schreibfuss{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 11px;
  border-top:1px solid var(--line); background:var(--weich)}
.emojiknopf{background:none; border:1px solid transparent; border-radius:8px; font-size:17px;
  line-height:1; padding:5px 6px; cursor:pointer}
.emojiknopf:hover{background:var(--card); border-color:var(--line)}
@media(max-width:760px){
  .schreibfuss .hint{display:none}
  .schreibfuss .btn{flex:1}
}

/* ---------- Doppelansicht ----------
   Nur am Rechner ab 1100 Pixeln. Links die geführte Ansicht in Orange,
   rechts die zweite in Blaugrün. Jede Spalte scrollt für sich. */
.tbtn.aktiv{background:var(--orange); border-color:var(--orange); color:var(--auf-orange); font-weight:600}
.tbtn.aktiv2{background:var(--zweit); border-color:var(--zweit); color:var(--auf-zweit); font-weight:600}

.doppel{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start;
  max-width:2200px; margin:0 auto; padding:14px 14px 40px}
.spalte{border:1px solid var(--line); border-radius:16px; background:var(--card);
  overflow:hidden; min-width:0; box-shadow:var(--karte-schatten)}
.spalte .spalteninhalt{max-height:calc(100vh - 150px); overflow-y:auto; overscroll-behavior:contain}
.spalte .wrap{padding:16px}
.spaltenkopf{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 14px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.spaltenkopf.links{background:var(--orange); color:var(--auf-orange)}
.spaltenkopf.rechts{background:var(--zweit); color:var(--auf-zweit)}
.spaltenkopf .zu{background:none; border:0; color:inherit; font-size:19px; line-height:1; cursor:pointer; padding:0 2px}
.doppel .grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.doppel .hero{grid-template-columns:minmax(0,1fr)}
.doppel .detail{grid-template-columns:minmax(0,1fr)}
.doppel .admin{grid-template-columns:minmax(0,1fr)}
.doppel .adminmenu{position:static; display:flex; gap:6px; overflow-x:auto}
.doppel .filterreihe{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
@media(max-width:1100px){ .doppel{grid-template-columns:minmax(0,1fr)} .spalte.rechts{display:none} }

/* ---------- Klappmenü am Profil ---------- */
.profilmenue{position:relative; display:inline-flex}
.profilmenue .pfeil{font-size:9px; opacity:.7; margin-left:2px}
.aufklapp{position:absolute; right:0; top:calc(100% + 8px); min-width:240px; z-index:60;
  background:var(--card); border:1px solid var(--line); border-radius:13px; padding:6px;
  box-shadow:0 10px 30px var(--schatten-stark)}
.aufklapp .menupunkt{display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:none; border:0; border-radius:9px; padding:10px 11px; font-size:13.5px; cursor:pointer;
  color:var(--ink); font-family:inherit}
.aufklapp .menupunkt:hover{background:var(--weich)}
.aufklapp .menupunkt.aktiv{background:var(--orange); color:var(--auf-orange); font-weight:600}
.aufklapp .menupunkt.aktiv2{background:var(--zweit); color:var(--auf-zweit); font-weight:600}
.aufklapp .menupunkt.rot{color:var(--rot)}
.aufklapp .menupunkt .sym{width:20px; text-align:center; font-size:15px; flex:0 0 20px}
.aufklapp .trenner{height:1px; background:var(--line); margin:5px 8px}

/* Wahl der Ansicht im Profil */
.wahlreihe{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}
.wahlkarte{display:flex; flex-direction:column; gap:5px; align-items:flex-start; text-align:left;
  background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:14px;
  cursor:pointer; color:var(--ink); font-family:inherit}
.wahlkarte:hover{border-color:var(--orange)}
.wahlkarte.on{border-color:var(--orange); background:var(--weich3)}
.wahlkarte .wsym{font-size:20px; line-height:1}
.wahlkarte b{font-size:14px}
.mapbox.schmal{align-self:start}
.bezirkwahl{width:100%; padding:10px 12px; border-radius:9px; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.10); color:#EDF2F9; font-size:13.5px; font-family:inherit}
.bezirkwahl option{color:var(--ink); background:var(--card)}

/* Kategorien als Klappfeld mit Baum, vor allem fürs Handy gedacht */
.katwahl{margin-top:10px; background:var(--card); border:1px solid var(--line); border-radius:13px;
  overflow:hidden; box-shadow:var(--karte-schatten)}
.katwahl.auf{border-color:var(--orange)}
.katkopf{display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none;
  border:0; padding:12px 14px; cursor:pointer; color:var(--ink); font-family:inherit}
.katkopf .ksym{font-size:19px; flex:0 0 auto}
.katkopf .ktext{flex:1; min-width:0}
.katkopf .ktext b{display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.katkopf .ktext .hint{display:block; font-size:11.5px; margin-top:1px}
.katkopf .kzahl{background:var(--orange); color:var(--auf-orange); border-radius:20px;
  font-size:11px; font-weight:700; padding:2px 9px}
.katkopf .kpfeil{color:var(--muted); font-size:11px}
.katbaum{border-top:1px solid var(--line); max-height:min(60vh, 460px); overflow-y:auto;
  overscroll-behavior:contain}
.kzeile{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none;
  border:0; border-bottom:1px solid var(--line); padding:11px 14px; cursor:pointer;
  color:var(--ink); font-family:inherit; font-size:13.5px}
.kzeile:last-child{border-bottom:0}
.kzeile:hover{background:var(--weich)}
.kzeile.haupt{font-weight:600}
.kzeile.on{background:var(--weich3); color:var(--erz)}
.kzeile.on:before{content:"✓"; margin-right:-4px; font-weight:700}
.kzeile .knm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kzeile .kn{font-size:11.5px; font-weight:700; background:var(--sand); color:var(--auf-sand);
  border-radius:20px; padding:2px 9px; font-variant-numeric:tabular-nums}
.kzeile.on .kn{background:var(--orange); color:var(--auf-orange)}
.kaeste{background:var(--weich); padding-left:20px; border-bottom:1px solid var(--line)}
.kzeile.sub{font-size:13px; padding:9px 14px 9px 8px; border-bottom:1px solid var(--line)}
.kzeile.sub:last-child{border-bottom:0}
.kzeile.sub.leerzeile{color:var(--muted); font-style:italic; cursor:default}
.katfuss{padding:10px 14px; background:var(--weich); position:sticky; bottom:0}

/* Beiträge als Liste: links wer, rechts was */
.btab{border-top:1px solid var(--line)}
.bzeile{display:grid; grid-template-columns:140px minmax(0,1fr); gap:12px; padding:10px 4px;
  border-bottom:1px solid var(--line); align-items:start}
.bzeile:hover{background:var(--weich)}
.bzeile.eigen{border-left:2px solid var(--orange); border-radius:0; padding-left:8px}
.bzeile.loesung{background:var(--gruen-weich)}
.bzeile + .bzeile{margin-top:0}
.bwer{display:flex; gap:8px; align-items:flex-start; min-width:0; padding-top:1px}
.bwer b{display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bwer .hint{display:block; font-size:11px}
/* Nur der Beitrag selbst behält die Umbrüche. Läge pre-wrap auf dem ganzen
   Feld, würde auch die Einrückung des Quelltextes mitgezeichnet – daher die
   leeren Zeilen zwischen Text und Reaktionen. */
.btext{font-size:13.5px; line-height:1.6; min-width:0; overflow-wrap:anywhere}
.bpost{white-space:pre-wrap}
.chip.mini{padding:2px 9px; font-size:12px}
.chip.mini.meins{border-color:var(--orange)}
@media(max-width:760px){
  .bzeile{grid-template-columns:minmax(0,1fr); gap:6px; padding:10px 2px}
  .bwer{gap:7px}
}

/* Unterkategorien unter der Kategorienreihe */
.unterblock{margin-top:10px; border-left:2px solid var(--orange); border-radius:0; padding:2px 0 2px 12px}
.unterzeile{display:flex; gap:12px; align-items:flex-start; padding:6px 0; flex-wrap:wrap}
.unterzeile .ukopf{font-size:12px; color:var(--muted); font-weight:600; min-width:150px; padding-top:5px}
.unterzeile .row{flex:1; flex-wrap:wrap}
@media(max-width:760px){
  .unterzeile{gap:5px}
  .unterzeile .ukopf{min-width:0; width:100%; padding-top:0}
  .unterzeile .row{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px}
  .unterzeile .row::-webkit-scrollbar{display:none}
}

/* Eine Zeile aus dem letzten Beitrag in der Forenliste */
.vorschau{font-size:12.5px; color:var(--muted); margin-top:4px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; font-style:italic}

/* Was liegt an */
.anliegenband{background:var(--card); border:1px solid var(--orange); border-radius:14px;
  padding:12px 14px; margin-bottom:16px; box-shadow:var(--karte-schatten)}
.akopf{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--erz); margin-bottom:9px}
.areihe{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:8px}
.anliegen{display:flex; align-items:center; gap:10px; text-align:left; background:var(--weich);
  border:1px solid var(--line); border-radius:11px; padding:9px 11px; cursor:pointer;
  color:var(--ink); font-family:inherit}
.anliegen:hover{border-color:var(--orange); background:var(--weich3)}
.anliegen .asym{font-size:17px; flex:0 0 auto}
.anliegen .azahl{font-family:var(--display); font-size:17px; font-weight:700; min-width:20px}
.anliegen .atext{font-size:12.5px; line-height:1.35; min-width:0}

/* Anliegen im dunklen Begrüßungsband */
.areihe.eng{grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:6px}
.anliegen.dunkel{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); color:#EDF2F9}
.anliegen.dunkel:hover{background:var(--orange); border-color:var(--orange); color:var(--auf-orange)}
.mapbox.schmal{align-self:stretch}

/* Was liegt an, unten im Begrüßungsband */
.anliegenstreifen{grid-column:1 / -1; border-top:1px solid rgba(255,255,255,.16);
  padding-top:14px; margin-top:4px}
.anliegenstreifen .maphead{margin-bottom:9px}

/* Ansichtseinstellungen je Gerät */
.ansichtsblock{border-top:1px solid var(--line); padding:12px 0 4px}
.ansichtsblock:first-of-type{border-top:0; padding-top:0}
.ansichtsblock h4{margin:0 0 8px}
.ageraet{display:flex; gap:12px; align-items:center; padding:4px 0; flex-wrap:wrap}
.ageraet .alabel{font-size:12.5px; color:var(--muted); min-width:120px}
@media(max-width:760px){ .ageraet .alabel{min-width:0; width:100%} }

.zurueckleiste{padding-bottom:0}