/* Inselradio Smart Site, Admin-Demo. Modus "Operate": ruhig, scanbar, einheitlich.
   Tokens, Schriften und Knöpfe kommen aus ../css/style.css. Hier nur, was der Admin zusätzlich braucht. */
@import url(../css/style.css);

:root{
  --seite:#F2F6F5; --karte:#FFFFFF; --seitenleiste:#0B2530; --seitenleiste-text:#E6EEEE;
  --rahmen:#0B253026; --rahmen-stark:#0B253066;
  --ok-t:#1B5E36; --ok-h:#E1F1E6;
  --teil-t:#6B4700; --teil-h:#FFEFC2;
  --nicht-t:#3F5560; --nicht-h:#E4EAEA;
  --wider-t:#9A1B1B; --wider-h:#FBE3E3;
  --info-t:#0E4F5A; --info-h:#DCEEF0;
  --leiste:56px; --seitenbreite:252px;
}
body{padding-bottom:0;font-size:1rem;line-height:1.5;background:var(--seite)}
h1,h2,h3{line-height:1.2;letter-spacing:-.01em}
h1{font-size:1.9rem;font-weight:700}
h2{font-size:1.2rem;max-width:none;font-weight:700;font-family:var(--body);letter-spacing:0}
h3{font-size:1.02rem;font-family:var(--body);font-weight:700;letter-spacing:0}
p{margin:0}
.klein{font-size:.9rem;color:var(--text-leise)}
.ico{width:1.05em;height:1.05em;flex:none;vertical-align:-.15em}
.nur-lesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Rahmen: Seitenleiste links, Inhalt rechts */
.seitenleiste{position:fixed;inset:0 auto 0 0;width:var(--seitenbreite);background:var(--seitenleiste);color:var(--seitenleiste-text);display:flex;flex-direction:column;overflow-y:auto;z-index:40}
.seitenleiste .logozeile{display:flex;align-items:center;gap:10px;padding:18px 20px 14px;text-decoration:none;color:var(--salz);font:800 1.1rem var(--display);letter-spacing:-.02em;white-space:nowrap}
.seitenleiste .logozeile svg{width:30px;height:30px}
.seitenleiste .logozeile small{display:block;font:600 .78rem var(--body);letter-spacing:0;color:#F2F6F5A6}
.seitenleiste nav{padding:6px 12px 20px;display:grid;gap:2px}
.gruppe{margin:14px 8px 4px;font:700 .75rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:#F2F6F5A6}
.seitenleiste a.punkt{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:0 12px;border-radius:var(--r);color:var(--seitenleiste-text);text-decoration:none;font-weight:600;white-space:nowrap}
.seitenleiste a.punkt:hover{background:#F2F6F512}
.seitenleiste a.punkt[aria-current=page]{background:var(--salz);color:var(--tinte)}
.zaehler{min-width:24px;height:22px;padding:0 7px;border-radius:var(--r-knopf);display:inline-grid;place-items:center;background:var(--sonne);color:var(--tinte);font:800 .8rem var(--body)}
.seitenleiste .fuss{margin-top:auto;padding:14px 20px 20px;font-size:.85rem;color:#F2F6F5A6;border-top:1px solid var(--linie-hell)}
.seitenleiste .fuss a{color:#F2F6F5D9}

.rahmen{margin-left:var(--seitenbreite);min-height:100vh}
.leiste{position:sticky;top:0;z-index:30;height:var(--leiste);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 clamp(16px,3vw,40px);background:#F2F6F5F2;backdrop-filter:blur(8px);border-bottom:1px solid var(--rahmen)}
.leiste .links{display:flex;align-items:center;gap:12px;min-width:0}
.menueknopf{display:none;min-height:40px;padding:0 14px;border:2px solid var(--tinte);border-radius:var(--r-knopf);background:none;color:var(--tinte);font:700 .95rem var(--body);cursor:pointer}
.ort{font-size:.92rem;color:var(--text-leise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-hinweis{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:var(--r-knopf);background:var(--abend);color:#5A2A10;font-weight:700;font-size:.85rem;white-space:nowrap}
.inhalt{padding:clamp(20px,3vw,40px) clamp(16px,3vw,40px) 80px;max-width:1280px}
.kopfbereich{display:grid;gap:8px;margin-bottom:26px;max-width:75ch}
.kopfbereich .lead{color:var(--text-leise);font-size:1.05rem}
.abstand{display:grid;gap:22px}
.abschnitt-kopf{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:8px 16px;margin:34px 0 12px}
.abschnitt-kopf:first-child{margin-top:0}
.abschnitt-kopf p{color:var(--text-leise);font-size:.95rem;max-width:62ch}
.danach{margin-top:34px;padding:18px 20px;border-radius:var(--r);background:var(--tinte);color:var(--salz);display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.danach b{display:block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--abend);margin-bottom:2px}
.danach p{max-width:58ch}

/* Karten, Raster */
.karte{background:var(--karte);border:1px solid var(--rahmen);border-radius:var(--r);padding:20px}
.karte>h2:first-child,.karte>h3:first-child{margin-bottom:10px}
.gitter-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gitter-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gitter-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.kpi{background:var(--karte);border:1px solid var(--rahmen);border-radius:var(--r);padding:16px 18px;display:grid;gap:2px;align-content:start}
.kpi .zahl{font-size:2rem;line-height:1.1}
.kpi .name{font-weight:600}
.kpi .zusatz{font-size:.88rem;color:var(--text-leise)}
.kpi a{color:inherit}
.liste{list-style:none;padding:0;display:grid}
.liste>li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:space-between;padding:11px 0;border-top:1px solid var(--rahmen)}
.liste>li:first-child{border-top:0;padding-top:0}
.liste .zeit{font-size:.88rem;color:var(--text-leise);white-space:nowrap}
.punktliste{padding-left:1.15em;display:grid;gap:6px}
.vertrauen{display:flex;flex-wrap:wrap;gap:6px 14px}

/* Hinweisboxen (Symbol plus Text, nie nur Farbe) */
.hinweis{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);background:var(--info-h);color:#0A3C45;border:1px solid #1E6F7C44}
.hinweis .ico{margin-top:.2em;width:1.2em;height:1.2em}
.hinweis p+p{margin-top:4px}
.hinweis.warn{background:var(--teil-h);color:#4D3400;border-color:#B8860B66}
.hinweis.stopp{background:var(--wider-h);color:#6E1313;border-color:#9A1B1B55}
.hinweis.gut{background:var(--ok-h);color:#144A29;border-color:#1B5E3655}

/* Status: Symbol plus Text */
.status{display:inline-flex;align-items:flex-start;gap:6px;padding:3px 11px 3px 8px;border-radius:14px;font-weight:700;font-size:.85rem;line-height:1.35;max-width:100%}
.status .ico{margin-top:.18em}
.abstand>*,.gitter-2>*,.gitter-3>*,.gitter-auto>*,.zweispaltig>*,.kpis>*{min-width:0}
.status .ico{width:15px;height:15px}
.s-ok{background:var(--ok-h);color:var(--ok-t)}
.s-teil{background:var(--teil-h);color:var(--teil-t)}
.s-nicht{background:var(--nicht-h);color:var(--nicht-t)}
.s-wider{background:var(--wider-h);color:var(--wider-t)}
.s-info{background:var(--info-h);color:var(--info-t)}
.s-neu{background:var(--abend);color:#5A2A10}

/* Tabellen */
.tabellenhuelle{background:var(--karte);border:1px solid var(--rahmen);border-radius:var(--r);overflow:hidden}
.scroll{overflow-x:auto}
table.tab{width:100%;border-collapse:collapse;font-size:.95rem}
.tab th{text-align:left;font-weight:700;font-size:.82rem;letter-spacing:.04em;color:var(--text-leise);padding:11px 14px;border-bottom:1px solid var(--rahmen);background:#F7FAF9;white-space:nowrap}
.tab td{padding:12px 14px;border-bottom:1px solid var(--rahmen);vertical-align:top}
.tab tbody tr:last-child td{border-bottom:0}
.tab td.zahl-spalte,.tab th.zahl-spalte{text-align:right;font-variant-numeric:tabular-nums}
.tab .titel-zelle{font-weight:600}
.zeilenknopf{all:unset;cursor:pointer;display:inline-flex;gap:8px;align-items:flex-start;font-weight:700;color:var(--tinte);border-radius:6px}
.zeilenknopf:hover{text-decoration:underline}
.zeilenknopf:focus-visible{outline:3px solid var(--sonne);outline-offset:3px}
.zeilenknopf .ico{margin-top:.25em;transition:transform .15s}
.zeilenknopf[aria-expanded=true] .ico{transform:rotate(90deg)}
.detail td{background:#F7FAF9;padding:16px 14px 18px 40px}
.detail[hidden]{display:none}
.detail dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px}
.detail dt{font-weight:700;color:var(--text-leise)}
.detail dd{margin:0}
.detail-aktionen{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88rem}

/* Formulare */
.feld{display:grid;gap:6px;font-weight:600}
.feld small{font-weight:400;color:var(--text-leise)}
.feld input,.feld select,.feld textarea,select.auswahl,input.suche{min-height:44px;padding:8px 12px;border-radius:var(--r);border:2px solid var(--rahmen-stark);background:#fff;font:400 1rem var(--body);color:var(--tinte);width:100%}
.feld textarea{min-height:110px;resize:vertical;line-height:1.5}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--sonne);outline:none}
select.auswahl{width:auto;padding-right:30px}
.formzeile{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.form{display:grid;gap:16px}
.filterzeile{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end;margin-bottom:14px}
.filterzeile .feld{font-size:.88rem;min-width:150px}
.filterzeile .feld.breit{flex:1 1 220px;align-content:start}
.optionen{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0}
.optionen legend{font-weight:600;margin-bottom:8px;padding:0}
.optionen label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:2px solid var(--rahmen-stark);border-radius:var(--r-knopf);background:#fff;font-weight:600;cursor:pointer}
.optionen input{accent-color:var(--sonne);width:18px;height:18px}
.optionen label:has(input:checked){border-color:var(--tinte);background:var(--tinte);color:var(--salz)}
.optionen label:has(input:focus-visible){outline:3px solid var(--sonne);outline-offset:2px}
.schalter{display:inline-flex;align-items:center;gap:10px;font-weight:600;cursor:pointer;min-height:44px}
.schalter input{accent-color:var(--sonne);width:20px;height:20px}
.knopf{min-height:44px;padding:.5em 1.2em;white-space:nowrap}
.knopf.s{min-height:38px;padding:.3em 1em;font-size:.92rem}
.knopf[disabled]{opacity:.5;cursor:not-allowed}
.knopf.gefahr{border-color:var(--wider-t);color:var(--wider-t)}
.knopf.gefahr:hover{background:var(--wider-t);color:#fff}
.knopfreihe{display:flex;flex-wrap:wrap;gap:10px}
.dunkel .knopf{border-color:var(--salz);color:var(--salz)}
.danach .knopf{border-color:var(--salz);color:var(--salz)}
.danach .knopf:hover{background:var(--salz);color:var(--tinte)}
.danach .knopf.voll{background:var(--sonne);border-color:var(--sonne);color:var(--tinte)}
.danach .knopf.voll:hover{background:var(--salz);border-color:var(--salz)}

/* Leere Zustände */
.leer{text-align:center;padding:34px 20px;display:grid;justify-items:center;gap:10px}
.leer h3{font-size:1.1rem}
.leer p{color:var(--text-leise);max-width:46ch}
.leer[hidden]{display:none}

/* Reiter */
.reiter{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--rahmen);margin-bottom:18px}
.reiter button{all:unset;cursor:pointer;padding:10px 16px;border-radius:var(--r) var(--r) 0 0;font-weight:700;color:var(--text-leise);border-bottom:3px solid transparent;margin-bottom:-1px}
.reiter button:hover{color:var(--tinte)}
.reiter button[aria-selected=true]{color:var(--tinte);border-bottom-color:var(--sonne)}
.reiter button:focus-visible{outline:3px solid var(--sonne);outline-offset:-3px}
[role=tabpanel][hidden]{display:none}

/* Dialog */
dialog.fenster{border:0;border-radius:var(--r);padding:0;width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 24px);color:var(--tinte);background:var(--karte);box-shadow:0 30px 70px -20px #0B2530AA}
dialog.fenster::backdrop{background:#0B253099}
.fenster-kopf{display:flex;justify-content:space-between;gap:12px;align-items:start;padding:20px 22px 0}
.fenster-koerper{padding:14px 22px 22px;display:grid;gap:16px}
.zu{all:unset;cursor:pointer;min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:50%;font-size:1.5rem;line-height:1}
.zu:hover{background:var(--nicht-h)}
.zu:focus-visible{outline:3px solid var(--sonne)}

/* Meldung am unteren Rand */
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--tinte);color:var(--salz);padding:12px 18px;border-radius:var(--r);max-width:min(520px,calc(100vw - 32px));z-index:90;box-shadow:0 14px 30px -12px #0B2530AA;transition:opacity .2s,transform .2s}
.toast.an{opacity:1;transform:translate(-50%,0)}

/* Diagramme */
.diagramm{background:var(--karte);border:1px solid var(--rahmen);border-radius:var(--r);padding:18px 18px 12px}
.diagramm h3{margin-bottom:2px}
.diagramm .klein{margin-bottom:8px}
.diagramm svg{width:100%;height:auto;overflow:visible}
.diagramm svg text{font-family:var(--body);fill:var(--tinte);font-size:12px}
.diagramm svg .achse{fill:var(--text-leise)}
.diagramm details{margin-top:8px}
.diagramm summary,details.mehr summary{cursor:pointer;font-weight:700;padding:8px 0;min-height:36px}
.diagramm summary:focus-visible,details.mehr summary:focus-visible{outline:3px solid var(--sonne);outline-offset:2px;border-radius:6px}
.balken-reihe{display:grid;grid-template-columns:130px 1fr auto;gap:12px;align-items:center;padding:7px 0}
.balken-reihe .spur{height:14px;border-radius:7px;background:var(--nicht-h);overflow:hidden}
.balken-reihe .spur i{display:block;height:100%;background:var(--bucht);border-radius:7px}
.balken-reihe .wert{font-variant-numeric:tabular-nums;font-weight:700;min-width:56px;text-align:right}

/* Entwurf und Freigabe */
.zweispaltig{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:20px;align-items:start}
.entwurf{padding:clamp(18px,3vw,34px)}
.entwurf h2{font-family:var(--display);font-size:1.7rem;line-height:1.15;letter-spacing:-.02em;margin-bottom:12px}
.entwurf p{margin-bottom:14px;max-width:62ch}
.entwurf .vorspann{font-size:1.1rem;font-weight:600}
.satz{padding:1px 4px;border-radius:5px;box-decoration-break:clone;-webkit-box-decoration-break:clone;border-bottom:3px solid transparent;cursor:pointer;background:none;border-top:0;border-left:0;border-right:0;font:inherit;color:inherit;text-align:inherit}
.satz.belegt{background:#E1F1E655;border-bottom-color:#1B5E36}
.satz.teil{background:var(--teil-h);border-bottom-color:#B8860B}
.satz.stark{outline:3px solid var(--sonne)}
.satz sup{font-weight:800;font-size:.7em;margin-left:2px;color:var(--text-leise)}
.randleiste{position:sticky;top:calc(var(--leiste) + 16px);display:grid;gap:14px}
.behauptung-zeile{display:grid;gap:6px;padding:12px 0;border-top:1px solid var(--rahmen)}
.behauptung-zeile:first-of-type{border-top:0}
.behauptung-zeile p{font-size:.95rem}
.behauptung-zeile .kopf-zeile{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:space-between}
.entscheidung{display:grid;gap:10px}
.entscheidung[hidden]{display:none}
.pflicht{color:var(--wider-t);font-weight:700}
.fehlertext{color:var(--wider-t);font-weight:600;min-height:1.4em}
.naechster{border:2px solid var(--ok-t);background:var(--ok-h);border-radius:var(--r);padding:18px 20px;display:grid;gap:10px}
.naechster[hidden]{display:none}
.naechster.abgelehnt{border-color:var(--nicht-t);background:var(--nicht-h)}

/* Prüfbericht */
.beh{background:var(--karte);border:1px solid var(--rahmen);border-radius:var(--r);padding:18px 20px;display:grid;gap:12px}
.beh-kopf{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:start;justify-content:space-between}
.beh-kopf h3{max-width:60ch}
.beh .nr{font:800 .9rem var(--body);color:var(--text-leise);margin-right:6px}
.beleg-liste{list-style:none;padding:0;display:grid;gap:8px}
.beleg-liste li{display:grid;gap:2px;padding:10px 12px;border-radius:var(--r);background:#F7FAF9;border:1px solid var(--rahmen)}
.beleg-liste li.gegen{background:#FFF7F5;border-color:#9A1B1B33}
.beleg-liste .wer{font-size:.85rem;color:var(--text-leise)}
a.quelle{color:var(--info-t);font-weight:700;text-underline-offset:3px}
a.quelle:hover{color:var(--tinte)}
.beh h4{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-leise);margin-bottom:6px;font-family:var(--body)}
.streit{border:2px solid var(--wider-t);border-radius:var(--r);padding:18px 20px;background:#FFF9F8;display:grid;gap:14px}
.streit-paar{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.streit-paar>div{padding:14px;border-radius:var(--r);background:#fff;border:1px solid var(--rahmen);display:grid;gap:6px;align-content:start}
.rollen td select{min-height:38px;padding:4px 10px;border-radius:var(--r);border:2px solid var(--rahmen-stark);background:#fff;font:400 .95rem var(--body);color:var(--tinte);max-width:100%}
.rollen td select:focus{border-color:var(--sonne);outline:none}
.rollen .aus td{color:var(--text-leise)}
.anbieter-hinweis{display:block;margin-top:6px;font-size:.88rem;color:var(--teil-t);font-weight:600}
.anbieter-hinweis[hidden]{display:none}

/* Vorschau, Kanäle */
.kanal{display:grid;gap:12px;align-content:start}
.kanal-kopf{display:flex;justify-content:space-between;gap:10px;align-items:start;flex-wrap:wrap}
.vorschau{border:1px dashed var(--rahmen-stark);border-radius:var(--r);padding:14px;background:#F7FAF9;display:grid;gap:6px;font-size:.95rem}
.vorschau .betreff{font-weight:700}
.vorschau.zettel-vorschau{background:#FFF8DC;border-style:solid;border-color:#B8860B55;font-family:var(--body)}
.vorschau.zettel-vorschau ul{padding-left:1.1em;display:grid;gap:3px}
.kanal .zeitplan{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.kanal .zeitplan .feld{font-size:.88rem}
.kanal .zeitplan input{min-width:0;width:auto}

/* Wetterkarte (Flächengrafik) */
.karte-wetter{background:var(--tinte);border-radius:var(--r);padding:12px;color:var(--salz)}
.karte-wetter svg{width:100%;height:auto}
.karte-wetter svg text{font-family:var(--body);font-size:13px;fill:#F2F6F5;paint-order:stroke;stroke:#0B2530;stroke-width:4px;stroke-linejoin:round}
.karte-wetter .flaeche{transition:opacity .25s}
.karte-legende{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 4px 2px;font-size:.9rem;color:var(--text-leise)}
.karte-legende i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* Inserate, Fortschritt */
.pruefzeile{display:flex;flex-wrap:wrap;gap:6px 8px}
.preisliste{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.preis{background:var(--karte);border:1px solid var(--rahmen);border-radius:var(--r);padding:16px 18px;display:grid;gap:2px}
.preis .zahl{font-size:1.7rem}
.preis.premium{border-color:var(--sonne);box-shadow:inset 0 0 0 1px var(--sonne)}
.preis .klein{max-width:30ch}

/* Datenbank */
.tabellenwahl{display:flex;flex-wrap:wrap;gap:8px}
.tabellenwahl button{all:unset;cursor:pointer;min-height:38px;padding:0 14px;display:inline-flex;align-items:center;border-radius:var(--r-knopf);border:2px solid var(--rahmen-stark);font-weight:600;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88rem;background:#fff;box-sizing:border-box}
.tabellenwahl button[aria-pressed=true]{background:var(--tinte);color:var(--salz);border-color:var(--tinte)}
.tabellenwahl button:focus-visible{outline:3px solid var(--sonne);outline-offset:2px}
.notion{background:#fff;border:1px solid var(--rahmen);border-radius:var(--r);overflow:hidden}
.notion-kopf{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--rahmen)}
.notion-kopf .sym{font-size:1.6rem}
.notion-ansicht{display:flex;gap:6px;padding:8px 18px;border-bottom:1px solid var(--rahmen);font-size:.9rem;color:var(--text-leise);flex-wrap:wrap}
.notion-ansicht span{padding:2px 10px;border-radius:6px}
.notion-ansicht .akt{background:var(--nicht-h);color:var(--tinte);font-weight:700}
.schema{background:var(--karte);border:1px solid var(--rahmen);border-radius:var(--r);padding:12px;overflow-x:auto}
.schema svg{min-width:860px;width:100%;height:auto}
.schema text{font-family:var(--body);fill:var(--tinte);font-size:13px}
.schema .kopftext{font-weight:700}

.fuss-hinweis{margin-top:40px;font-size:.88rem;color:var(--text-leise)}

/* Mobil: Seitenleiste wird Menü, Tabellen werden Karten */
@media(max-width:1050px){
  .zweispaltig{grid-template-columns:1fr}
  .randleiste{position:static}
  .gitter-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .seitenleiste{transform:translateX(-102%);transition:transform .2s;box-shadow:0 0 0 100vmax transparent;width:min(300px,86vw)}
  body.menue-offen .seitenleiste{transform:none;box-shadow:0 0 0 100vmax #0B253099}
  .rahmen{margin-left:0}
  .menueknopf{display:inline-flex;align-items:center}
}
@media(max-width:780px){
  .gitter-2,.gitter-3,.streit-paar{grid-template-columns:1fr}
  h1{font-size:1.6rem}
  .ort{display:none}
  .demo-hinweis{font-size:.8rem;padding:3px 10px}
  table.stapeln,table.stapeln tbody,table.stapeln tr,table.stapeln td{display:block;width:100%}
  table.stapeln thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.stapeln tr{padding:12px 14px;border-bottom:1px solid var(--rahmen)}
  table.stapeln tbody tr:last-child{border-bottom:0}
  table.stapeln td{padding:3px 0;border:0;display:flex;gap:10px;justify-content:space-between;align-items:baseline;text-align:right}
  table.stapeln td::before{content:attr(data-l);font-weight:700;font-size:.82rem;color:var(--text-leise);text-align:left;flex:none}
  table.stapeln td.voll-breit{display:block;text-align:left}
  table.stapeln td.voll-breit::before{display:block;margin-bottom:2px}
  table.stapeln td.titel-zelle{display:block;text-align:left;padding-bottom:6px}
  table.stapeln td.titel-zelle::before{display:none}
  table.stapeln .detail td{padding:6px 0}
  table.stapeln tr.detail{background:#F7FAF9}
  .detail dl{grid-template-columns:1fr}
  .detail dt{margin-top:6px}
  .balken-reihe{grid-template-columns:96px 1fr auto}
  .knopfreihe .knopf{flex:1 1 auto;justify-content:center}
  .danach .knopf{width:100%;justify-content:center}
}
@media(max-width:380px){.demo-hinweis span.lang{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}