/* Vereinszentrale MunkenRadio e.V. — Design-System.
   Licht ist Standard, Dunkel via prefers-color-scheme ODER [data-thema="dunkel"].
   Kein Inline-Style erlaubt (CSP) — alles ueber Klassen. */

:root{
  --tinte:#20242E; --tinte-2:#3D4351; --tinte-3:#6A7180; --tinte-4:#9AA1AE;
  --grund:#F3F4F6; --flaeche:#FFFFFF; --flaeche-2:#FAFAFB; --flaeche-3:#EDEEF1;
  --linie:#E2E4E9; --linie-weich:#ECEDF1;
  --akzent:#E8632B; --akzent-tief:#C94F1D; --akzent-weich:#FCEDE4; --akzent-linie:#F2C4A9;
  --marke:#20242E;
  --gut:#2C7A57; --gut-weich:#E2F1E9;
  --warn:#B07E1F; --warn-weich:#F9EFD8;
  --krit:#B23A31; --krit-weich:#F9E5E3;
  --info:#3E5FA8; --info-weich:#E7EDF9;
  --radius:12px; --radius-g:16px; --radius-k:7px;
  --schatten-1:0 1px 2px rgba(24,28,38,.06);
  --schatten-2:0 4px 16px rgba(24,28,38,.09);
  --schatten-3:0 12px 40px rgba(24,28,38,.16);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --nav-b:236px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-thema="hell"]){
    --tinte:#EAECF1; --tinte-2:#C6CAD4; --tinte-3:#9298A6; --tinte-4:#666D7C;
    --grund:#111318; --flaeche:#191C23; --flaeche-2:#1E222B; --flaeche-3:#262B36;
    --linie:#2C313D; --linie-weich:#232833;
    --akzent:#F07A42; --akzent-tief:#E8632B; --akzent-weich:#33241C; --akzent-linie:#57392A;
    --marke:#EAECF1;
    --gut:#63B98E; --gut-weich:#1C2E26;
    --warn:#D9AC5C; --warn-weich:#312819;
    --krit:#DD7A6F; --krit-weich:#33211F;
    --info:#84A3E0; --info-weich:#202A3F;
    --schatten-1:0 1px 2px rgba(0,0,0,.4);
    --schatten-2:0 4px 16px rgba(0,0,0,.5);
    --schatten-3:0 12px 40px rgba(0,0,0,.6);
  }
}
:root[data-thema="dunkel"]{
  --tinte:#EAECF1; --tinte-2:#C6CAD4; --tinte-3:#9298A6; --tinte-4:#666D7C;
  --grund:#111318; --flaeche:#191C23; --flaeche-2:#1E222B; --flaeche-3:#262B36;
  --linie:#2C313D; --linie-weich:#232833;
  --akzent:#F07A42; --akzent-tief:#E8632B; --akzent-weich:#33241C; --akzent-linie:#57392A;
  --marke:#EAECF1;
  --gut:#63B98E; --gut-weich:#1C2E26;
  --warn:#D9AC5C; --warn-weich:#312819;
  --krit:#DD7A6F; --krit-weich:#33211F;
  --info:#84A3E0; --info-weich:#202A3F;
  --schatten-1:0 1px 2px rgba(0,0,0,.4);
  --schatten-2:0 4px 16px rgba(0,0,0,.5);
  --schatten-3:0 12px 40px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--grund); color:var(--tinte);
  font-family:var(--sans); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:650; letter-spacing:-.015em; line-height:1.25}
h1{font-size:22px} h2{font-size:17px} h3{font-size:15px}
p{margin:0}
a{color:var(--akzent-tief); text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:none; padding:0}
input,select,textarea{font:inherit; color:var(--tinte)}
:focus-visible{outline:2px solid var(--akzent); outline-offset:2px; border-radius:4px}
.num{font-variant-numeric:tabular-nums}
.leise{color:var(--tinte-3)}
.klein{font-size:12.5px}
.fett{font-weight:650}

/* ---------- Geruest ---------- */
.schale{display:grid; grid-template-columns:var(--nav-b) minmax(0,1fr); min-height:100vh}
.inhalt{padding:22px 28px 60px; max-width:1280px; width:100%; margin:0 auto; min-width:0}

/* ---------- Seitenleiste ---------- */
.nav{
  background:var(--flaeche); border-right:1px solid var(--linie);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.marke{display:flex; align-items:center; gap:11px; padding:18px 16px 16px}
.marke .logo{
  width:38px; height:38px; border-radius:11px; flex:none;
  background:linear-gradient(135deg,var(--akzent) 0%,var(--akzent-tief) 100%);
  display:grid; place-items:center; color:#fff; box-shadow:var(--schatten-1);
}
.marke .logo svg{width:22px; height:22px}
.marke .name{font-weight:700; font-size:15px; letter-spacing:-.01em; line-height:1.2}
.marke .name small{display:block; font-weight:500; font-size:11px; color:var(--tinte-3); letter-spacing:.02em}
.onair{
  display:inline-flex; align-items:center; gap:5px; margin:0 16px 10px;
  font-size:10.5px; font-weight:700; letter-spacing:.09em; color:var(--akzent-tief);
  text-transform:uppercase;
}
.onair .punkt{width:7px; height:7px; border-radius:50%; background:var(--akzent); animation:pulsieren 2.4s ease-in-out infinite}
@keyframes pulsieren{0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(232,99,43,.4)} 50%{opacity:.55; box-shadow:0 0 0 5px rgba(232,99,43,0)}}
@media (prefers-reduced-motion:reduce){ .onair .punkt{animation:none} }

.navliste{flex:1; padding:2px 10px 12px; display:flex; flex-direction:column; gap:2px}
.navgruppe{margin-top:14px}
.navgruppe>span{
  display:block; padding:0 8px 5px; font-size:10.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--tinte-4);
}
.navpunkt{
  display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:9px;
  color:var(--tinte-2); font-weight:530; font-size:13.5px; text-decoration:none;
  transition:background .12s, color .12s;
}
.navpunkt:hover{background:var(--flaeche-3); text-decoration:none; color:var(--tinte)}
.navpunkt.aktiv{background:var(--akzent-weich); color:var(--akzent-tief); font-weight:650}
.navpunkt svg{width:17px; height:17px; flex:none; opacity:.85}
.navpunkt .zaehler{
  margin-left:auto; background:var(--akzent); color:#fff; font-size:10.5px; font-weight:700;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:grid; place-items:center;
}
.navfuss{border-top:1px solid var(--linie-weich); padding:12px 16px; font-size:12.5px; color:var(--tinte-3)}
.navfuss .wer{font-weight:650; color:var(--tinte); display:block}
.navfuss .rolle{display:inline-block; margin-top:2px}
.navfuss .aktionen{display:flex; gap:12px; margin-top:8px}
.navfuss button{color:var(--tinte-3); font-size:12.5px}
.navfuss button:hover{color:var(--akzent-tief)}

/* ---------- Kopfzeile ---------- */
.kopf{display:flex; align-items:center; gap:14px; margin-bottom:20px; flex-wrap:wrap}
.kopf .titelblock{min-width:0}
.kopf .datum{color:var(--tinte-3); font-size:13px; margin-top:2px}
.kopf .platz{flex:1}
.suchknopf{
  display:flex; align-items:center; gap:8px; background:var(--flaeche); border:1px solid var(--linie);
  border-radius:10px; padding:7px 12px; color:var(--tinte-3); font-size:13px; min-width:200px;
  box-shadow:var(--schatten-1); transition:border-color .12s;
}
.suchknopf:hover{border-color:var(--akzent-linie)}
.suchknopf .taste{margin-left:auto; font-size:11px; background:var(--flaeche-3); border-radius:5px; padding:1px 6px; font-family:var(--mono)}
.menueknopf{display:none}

/* ---------- Karten & Raster ---------- */
.karte{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  box-shadow:var(--schatten-1); padding:16px 18px; min-width:0;
}
.karte>h2{display:flex; align-items:center; gap:8px; margin-bottom:12px}
.karte>h2 .mehr{margin-left:auto; font-size:12.5px; font-weight:550; color:var(--akzent-tief)}
.raster{display:grid; gap:14px}
.raster.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.raster.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.raster.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){ .raster.vier{grid-template-columns:repeat(2,minmax(0,1fr))} .raster.drei{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .raster.vier,.raster.drei,.raster.zwei{grid-template-columns:1fr} }

.kennzahl{display:flex; flex-direction:column; gap:2px}
.kennzahl .wert{font-size:24px; font-weight:700; letter-spacing:-.02em; line-height:1.15}
.kennzahl .einheit{font-size:13px; font-weight:550; color:var(--tinte-3)}
.kennzahl .beschriftung{font-size:12.5px; color:var(--tinte-3); font-weight:550}
.kennzahl .trend{font-size:12px; margin-top:4px}

/* ---------- Abzeichen & Status ---------- */
.abzeichen{
  display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:99px;
  font-size:11.5px; font-weight:650; white-space:nowrap;
}
.abzeichen.gut{background:var(--gut-weich); color:var(--gut)}
.abzeichen.warn{background:var(--warn-weich); color:var(--warn)}
.abzeichen.krit{background:var(--krit-weich); color:var(--krit)}
.abzeichen.info{background:var(--info-weich); color:var(--info)}
.abzeichen.neutral{background:var(--flaeche-3); color:var(--tinte-2)}
.abzeichen.akzent{background:var(--akzent-weich); color:var(--akzent-tief)}
.punktchen{width:8px; height:8px; border-radius:50%; display:inline-block; flex:none}
.prio-hoch{background:var(--krit)} .prio-normal{background:var(--info)} .prio-niedrig{background:var(--tinte-4)}
.abstand{height:14px}

/* ---------- Balken (Toepfe/Budgets) ---------- */
.balken{height:9px; border-radius:5px; background:var(--flaeche-3); overflow:hidden; position:relative}
.balken>i{
  display:block; height:100%; width:100%; border-radius:5px; background:var(--akzent);
  transform:scaleX(0); transform-origin:left; transition:transform .5s ease;
}
.balken>i.gut{background:var(--gut)} .balken>i.warn{background:var(--warn)} .balken>i.krit{background:var(--krit)} .balken>i.info{background:var(--info)}

/* ---------- Listen ---------- */
.zeilenliste{display:flex; flex-direction:column}
.zeile{
  display:flex; align-items:center; gap:12px; padding:9px 2px;
  border-bottom:1px solid var(--linie-weich); min-width:0;
}
.zeile:last-child{border-bottom:none}
.zeile .haupt{flex:1; min-width:0}
.zeile .haupt .t{font-weight:570; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.zeile .haupt .u{font-size:12px; color:var(--tinte-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.zeile.klickbar{cursor:pointer; border-radius:8px; padding-left:8px; padding-right:8px; margin:0 -8px}
.zeile.klickbar:hover{background:var(--flaeche-2)}
.datumsblock{
  flex:none; width:44px; text-align:center; background:var(--flaeche-2); border:1px solid var(--linie);
  border-radius:9px; padding:4px 0; line-height:1.1;
}
.datumsblock .tag{font-size:16px; font-weight:700}
.datumsblock .monat{font-size:10px; font-weight:650; text-transform:uppercase; letter-spacing:.05em; color:var(--tinte-3)}

/* ---------- Tabellen ---------- */
.tabellenhuelle{overflow-x:auto; margin:0 -18px; padding:0 18px}
table.daten{width:100%; border-collapse:collapse; font-size:13.5px}
table.daten th{
  text-align:left; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinte-4); padding:8px 10px; border-bottom:1px solid var(--linie); white-space:nowrap;
}
table.daten td{padding:9px 10px; border-bottom:1px solid var(--linie-weich); vertical-align:middle}
table.daten tr:last-child td{border-bottom:none}
table.daten tr.klickbar{cursor:pointer}
table.daten tr.klickbar:hover td{background:var(--flaeche-2)}
table.daten td.rechts, table.daten th.rechts{text-align:right}
table.daten td.schmal{white-space:nowrap}
.betrag-plus{color:var(--gut); font-weight:650}
.betrag-minus{color:var(--tinte); font-weight:650}
.durchgestrichen{text-decoration:line-through; opacity:.55}

/* ---------- Knoepfe ---------- */
.knopf{
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:9px;
  font-weight:620; font-size:13.5px; border:1px solid var(--linie); background:var(--flaeche);
  box-shadow:var(--schatten-1); transition:transform .08s, background .12s, border-color .12s;
  white-space:nowrap;
}
.knopf:hover{border-color:var(--akzent-linie); background:var(--flaeche-2)}
.knopf:active{transform:translateY(1px)}
.knopf.primaer{background:var(--akzent); border-color:var(--akzent); color:#fff}
.knopf.primaer:hover{background:var(--akzent-tief); border-color:var(--akzent-tief)}
.knopf.leise{border:none; box-shadow:none; background:transparent; color:var(--tinte-3); padding:5px 8px}
.knopf.leise:hover{color:var(--akzent-tief); background:var(--akzent-weich)}
.knopf.gefahr{color:var(--krit)}
.knopf.gefahr:hover{border-color:var(--krit); background:var(--krit-weich)}
.knopf svg{width:15px; height:15px}
.knopf:disabled{opacity:.5; cursor:not-allowed}
.knopfleiste{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* ---------- Formulare ---------- */
.feld{display:flex; flex-direction:column; gap:4px; min-width:0}
.feld>span{font-size:12px; font-weight:650; color:var(--tinte-2)}
.feld input,.feld select,.feld textarea{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:9px;
  padding:8px 11px; font-size:13.5px; width:100%;
}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--akzent); outline:none; box-shadow:0 0 0 3px var(--akzent-weich)}
.feld textarea{resize:vertical; min-height:70px}
.feld .hinweis{font-size:11.5px; color:var(--tinte-4)}
.formraster{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.formraster .breit{grid-column:1 / -1}
@media (max-width:560px){ .formraster{grid-template-columns:1fr} }
.fehlertext{color:var(--krit); font-size:13px; font-weight:570}

/* ---------- Dialog ---------- */
.dialoghintergrund{
  position:fixed; inset:0; background:rgba(15,17,22,.5); backdrop-filter:blur(3px);
  display:grid; place-items:start center; padding:6vh 16px 16px; z-index:60; overflow-y:auto;
}
.dialog{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius-g);
  box-shadow:var(--schatten-3); width:100%; max-width:560px; padding:20px 22px;
  animation:auftauchen .18s ease;
}
.dialog.gross{max-width:720px}
@keyframes auftauchen{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.dialog h2{margin-bottom:14px}
.dialog .fussleiste{display:flex; justify-content:flex-end; gap:8px; margin-top:18px}

/* ---------- Toasts ---------- */
.toasts{position:fixed; bottom:18px; right:18px; display:flex; flex-direction:column; gap:8px; z-index:80}
.toast{
  display:flex; align-items:center; gap:9px;
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:10px; box-shadow:var(--schatten-2); padding:11px 16px; font-size:13.5px; font-weight:570;
  max-width:340px; animation:auftauchen .2s ease;
}
.toast::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--gut); flex:none}
.toast.fehler::before{background:var(--krit)}

/* ---------- Befehls-Palette ---------- */
.dialognackt{width:100%; max-width:520px}
.palette{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius-g);
  box-shadow:var(--schatten-3); width:100%; max-width:520px; overflow:hidden;
  animation:auftauchen .15s ease;
}
.palette input{
  width:100%; border:none; background:transparent; padding:15px 18px; font-size:15px;
  border-bottom:1px solid var(--linie-weich);
}
.palette input:focus{outline:none}
.palette .treffer{max-height:340px; overflow-y:auto; padding:6px}
.palette .eintrag{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; cursor:pointer;
  font-size:13.5px;
}
.palette .eintrag:hover,.palette .eintrag.gewaehlt{background:var(--akzent-weich)}
.palette .eintrag .art{
  flex:none; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--tinte-4); width:70px;
}
.palette .leer{padding:18px; text-align:center; color:var(--tinte-3); font-size:13px}

/* ---------- Anmeldung ---------- */
.anmeldebuehne{
  min-height:100vh; display:grid; place-items:center; padding:20px;
  background:
    radial-gradient(1100px 500px at 85% -10%, var(--akzent-weich), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--info-weich), transparent 55%),
    var(--grund);
}
.anmeldekarte{
  width:100%; max-width:400px; background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--radius-g); box-shadow:var(--schatten-3); padding:30px 30px 26px;
}
.anmeldekarte .kopfbereich{display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:22px; text-align:center}
.anmeldekarte .logo{
  width:52px; height:52px; border-radius:15px;
  background:linear-gradient(135deg,var(--akzent) 0%,var(--akzent-tief) 100%);
  display:grid; place-items:center; color:#fff; box-shadow:var(--schatten-2);
}
.anmeldekarte .logo svg{width:30px; height:30px}
.anmeldekarte form{display:flex; flex-direction:column; gap:13px}
.anmeldefuss{margin-top:18px; text-align:center; font-size:12px; color:var(--tinte-4)}

/* ---------- Tabs / Filterchips ---------- */
.chips{display:flex; gap:7px; flex-wrap:wrap}
.chip{
  padding:5px 12px; border-radius:99px; border:1px solid var(--linie); background:var(--flaeche);
  font-size:12.5px; font-weight:600; color:var(--tinte-2);
}
.chip:hover{border-color:var(--akzent-linie)}
.chip.aktiv{background:var(--tinte); border-color:var(--tinte); color:var(--flaeche)}

/* ---------- Leerzustand ---------- */
.leerzustand{
  text-align:center; padding:28px 16px; color:var(--tinte-3); font-size:13.5px;
}
.leerzustand .symbol{font-size:26px; margin-bottom:6px; opacity:.5}

/* ---------- Kalender ---------- */
.kalenderkopf{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.kalenderkopf h2{min-width:150px; text-align:center}
.monatsraster{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px}
.wochentag{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--tinte-4); text-align:center; padding:4px 0}
.tagzelle{
  min-height:86px; background:var(--flaeche); border:1px solid var(--linie-weich); border-radius:9px;
  padding:5px 6px; font-size:11.5px; display:flex; flex-direction:column; gap:3px; overflow:hidden;
}
.tagzelle .nr{font-weight:650; color:var(--tinte-3); font-size:11px}
.tagzelle.andererMonat{opacity:.4}
.tagzelle.heute{border-color:var(--akzent); box-shadow:0 0 0 1px var(--akzent)}
.tagzelle.heute .nr{color:var(--akzent-tief)}
.terminchip{
  border-radius:5px; padding:1px 5px; font-size:10.5px; font-weight:600; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:var(--info-weich); color:var(--info);
}
.terminchip.frist{background:var(--krit-weich); color:var(--krit)}
.terminchip.workshop{background:var(--gut-weich); color:var(--gut)}
.terminchip.reise{background:var(--warn-weich); color:var(--warn)}
.terminchip.event{background:var(--akzent-weich); color:var(--akzent-tief)}

/* ---------- Monats-Minichart (Finanzen) ---------- */
.monatschart{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px; align-items:end}
.monatssaeule{display:flex; flex-direction:column; align-items:center; gap:4px}
.balkenpaar{display:flex; gap:3px; align-items:flex-end; height:84px; width:100%; justify-content:center}
.balkenpaar i{
  width:38%; max-width:14px; height:100%; border-radius:4px 4px 2px 2px;
  transform:scaleY(0.02); transform-origin:bottom; transition:transform .5s ease;
}
.balkenpaar i.ein{background:var(--gut)}
.balkenpaar i.aus{background:var(--tinte-4); opacity:.65}
.monatsname{font-size:10px; font-weight:650; color:var(--tinte-4); text-transform:uppercase; letter-spacing:.04em}

/* ---------- Kanban (Aufgaben) ---------- */
.spaltenraster{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:900px){ .spaltenraster{grid-template-columns:1fr} }
.spalte{background:var(--flaeche-2); border:1px solid var(--linie-weich); border-radius:var(--radius); padding:10px}
.spalte>h3{display:flex; align-items:center; gap:7px; padding:2px 6px 10px; font-size:13px; color:var(--tinte-2)}
.spalte>h3 .zahl{margin-left:auto; font-size:11.5px; color:var(--tinte-4); font-weight:650}
.aufgabenkarte{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:10px; padding:10px 12px;
  margin-bottom:8px; cursor:pointer; box-shadow:var(--schatten-1); transition:transform .1s, box-shadow .1s;
}
.aufgabenkarte:hover{transform:translateY(-1px); box-shadow:var(--schatten-2)}
.aufgabenkarte .t{font-weight:600; font-size:13px; margin-bottom:5px}
.aufgabenkarte .meta{display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:11.5px; color:var(--tinte-3)}

/* ---------- Skelett / Laden ---------- */
.laden{display:grid; place-items:center; padding:50px; color:var(--tinte-3)}
.spinner{width:26px; height:26px; border-radius:50%; border:3px solid var(--flaeche-3); border-top-color:var(--akzent); animation:drehen .8s linear infinite}
@keyframes drehen{to{transform:rotate(360deg)}}

/* ---------- Responsiv: mobile Navigation ---------- */
@media (max-width:860px){
  .schale{grid-template-columns:1fr}
  .nav{
    position:fixed; z-index:70; width:min(300px,84vw); height:100vh; left:0; top:0;
    transform:translateX(-102%); transition:transform .2s ease; box-shadow:var(--schatten-3);
  }
  .nav.offen{transform:none}
  .navschleier{position:fixed; inset:0; background:rgba(15,17,22,.45); z-index:65}
  .menueknopf{
    display:grid; place-items:center; width:38px; height:38px; border-radius:10px;
    border:1px solid var(--linie); background:var(--flaeche); box-shadow:var(--schatten-1);
  }
  .menueknopf svg{width:19px; height:19px}
  .inhalt{padding:16px 16px 80px}
  .kopf .platz{display:none}
  .suchknopf{min-width:0; flex-basis:100%; order:10}
  .suchknopf span:first-child{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .suchknopf .taste{display:none}
  .kopf .knopfleiste{order:11}
}
.druckbereich{display:none}
@media print{
  .nav,.kopf .suchknopf,.knopfleiste,.menueknopf{display:none !important}
  .schale{display:block}
  body{background:#fff}
}