/* ─────────────────────────────────────────────────────────────
   Klickbare Vorschau der Kanzlei-KI, im Design der Hauptseite (seit 15.10.2026):
   dunkler Rahmen mit Seitenleiste, helles rundes Blatt als Arbeitsfläche,
   Überschriften in Archivo mit kursivem grünem Akzent, alles rund,
   Handlungen als Pillen. Farben und Schriften kommen aus assets/stil.css.
   Eingebettet auf der Startseite (iframe) entfällt das Band oben.
   ───────────────────────────────────────────────────────────── */
:root{
  --papier:var(--bg);--flaeche:var(--surface);--flaeche-2:var(--surface-2);
  --tinte:var(--ink);--tinte-2:var(--muted);--tinte-3:var(--muted);
  --linie:var(--line);--akzent:var(--accent);--akzent-weich:var(--mark);--auf-akzent:var(--on-accent);
  --hinweis:var(--amber);--hinweis-weich:var(--amber-weich);
  --kurve:var(--ease-out);--mono:ui-monospace,"SF Mono",Menlo,monospace; /* taste-skill-ignore: Anweisung des Workspaces ist Konfigurationstext */
  --rund:22px;--rund-klein:14px;--rund-blatt:clamp(16px,1.6vw,26px);
  --innen:clamp(1.1rem,.6rem + 2.2vw,2.75rem);
}
body.vorschau{background:var(--rahmen);color:var(--ink);font-size:1.0625rem;line-height:1.5}
.vorschau{--band-h:52px}
.vorschau svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.knopf--leise{background:var(--bg);color:var(--ink)}
.knopf--leise:hover{background:var(--surface-2);color:var(--ink)}
.knopf[disabled]{opacity:.45;cursor:not-allowed}

/* Band oben, auf dem dunklen Rahmen: dauerhaft sichtbar, dass es Beispieldaten sind */
.app-band{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:center;gap:.4rem 1rem;flex-wrap:wrap;
  padding:.35rem var(--rand);background:var(--rahmen);color:var(--rahmen-leise);font-size:.875rem;text-align:center;
}
.app-band b{color:var(--rahmen-tinte);font-weight:600}
.app-band a{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1rem;border-radius:999px;
  background:rgba(236,235,225,.1);color:var(--rahmen-tinte);font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color var(--t-hover) ease}
.app-band a:hover{background:rgba(236,235,225,.18)}

/* Rahmen: Seitenleiste auf Dunkelgrün, Arbeitsfläche als helles Blatt */
.app{display:grid;grid-template-columns:268px minmax(0,1fr);min-height:calc(100vh - var(--band-h))}
.app-seite{
  position:sticky;top:var(--band-h);align-self:start;height:calc(100svh - var(--band-h));overflow-y:auto;scrollbar-width:none;
  display:flex;flex-direction:column;gap:1.5rem;padding:.75rem .85rem 1.1rem;color:var(--rahmen-tinte);
}
.app-seite::-webkit-scrollbar{display:none}
.app-marke{display:flex;align-items:center;gap:.7rem;color:var(--rahmen-tinte);text-decoration:none;padding:.2rem .5rem;min-height:44px}
.app-marke__zeichen{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--night-accent);color:#0F2417}
.app-marke__zeichen svg{width:19px;height:19px}
.app-marke__wort{display:flex;flex-direction:column;line-height:1.15}
.app-marke__wort b{font-size:1.05rem;letter-spacing:.06em;font-weight:600}
.app-marke__wort span{font-size:.8rem;color:var(--rahmen-leise)}

.app-nav{display:flex;flex-direction:column;gap:1.25rem}
.app-nav__gruppe{display:flex;flex-direction:column;gap:.15rem}
.app-nav__titel{margin:0 0 .3rem;padding:0 .85rem;font-size:.8125rem;font-weight:500;color:var(--rahmen-leise)}
.app-nav a{
  display:flex;align-items:center;gap:.65rem;min-height:44px;padding:.5rem .85rem;border-radius:999px;
  color:rgba(236,235,225,.8);text-decoration:none;font-size:.95rem;line-height:1.25;
  transition:background-color var(--t-hover) ease,color var(--t-hover) ease;
}
.app-nav a:hover{background:rgba(236,235,225,.08);color:var(--rahmen-tinte)}
.app-nav a[aria-current="page"]{background:var(--night-accent);color:#0F2417;font-weight:600}
.app-nav__neu{animation:auftauchen .5s var(--kurve)}
@keyframes auftauchen{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

.app-status{
  margin-top:auto;display:grid;grid-template-columns:8px 1fr;align-items:center;gap:.6rem;padding:.75rem .9rem;border-radius:18px;
  background:rgba(236,235,225,.07);font-size:.8125rem;color:var(--rahmen-leise);line-height:1.35;
}
.app-status__punkt{grid-row:1 / span 2;width:8px;height:8px;border-radius:50%;background:#5DB37C;flex:none;box-shadow:0 0 0 4px rgba(93,179,124,.22)} /* taste-skill-ignore: Live-Punkt */
@media (prefers-reduced-motion:no-preference){.app-status__punkt{animation:kugel-punkt 2.4s infinite}}
.app-basis{font-size:.78rem;color:var(--rahmen-leise);padding:0 .9rem;line-height:1.4}

.app-haupt{min-width:0;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);
  border-radius:var(--rund-blatt);margin:0 10px 10px 0;min-height:calc(100vh - var(--band-h) - 10px)}

/* Kopf der Arbeitsfläche */
.app-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;padding:clamp(1.5rem,1rem + 2vw,2.75rem) var(--innen) .75rem}
.app-kopf__text{display:grid;gap:.7rem;max-width:48rem}
.app-ueber{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.875rem;font-weight:500;color:var(--muted)}
.app-kopf h1{font-family:var(--font);font-weight:500;font-size:clamp(2rem,1.25rem + 2.4vw,3.5rem);line-height:1.03;letter-spacing:-.035em}
.app-unter{color:var(--muted);max-width:54ch;font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem)}

.schild{display:inline-flex;align-items:center;padding:.3rem .75rem;border-radius:999px;font-size:.78rem;font-weight:600;background:var(--surface);color:var(--muted)}
.schild--atlas{background:var(--mark);color:var(--accent)}

.app-person{display:grid;gap:.35rem;font-size:.8125rem;color:var(--muted);font-weight:500}
.app-person select{
  -webkit-appearance:none;appearance:none;font:500 .95rem/normal var(--font);color:var(--ink);background-color:var(--surface);
  border:0;border-radius:999px;min-height:44px;min-width:16rem;padding:.55rem 2.5rem .55rem 1.1rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6259' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:16px 16px;
}
.app-person select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app-inhalt{padding:1rem var(--innen) 3rem;display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;align-content:start;outline:none}
.app-inhalt > *,.zwei-spalten > *{min-width:0}

/* Bausteine */
.flaeche{background:var(--surface);border-radius:var(--rund);padding:clamp(1.15rem,1rem + .6vw,1.6rem)}
.flaeche > h2,.flaeche > h3{font-size:1.25rem;font-weight:500;letter-spacing:-.02em;margin-bottom:.9rem}
.zwei-spalten{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.25rem;align-items:start}
.leise{color:var(--muted);font-size:.9rem;line-height:1.5}
.leer{color:var(--muted);text-align:center;padding:1.5rem 1rem}
.infozeile{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.875rem;color:var(--muted)}
.infozeile span{display:inline-flex;align-items:center;gap:.45rem;background:var(--surface);border-radius:999px;padding:.45rem .9rem}
.infozeile .i{width:16px;height:16px;color:var(--accent)}

/* Fragen: Begrüßung, Themen, Beispielfragen, Verlauf, Eingabe */
.frage-start{display:grid;justify-items:center;gap:.5rem;text-align:center;padding:clamp(.5rem,2vw,1.75rem) 0 .25rem}
.frage-start h2{font-size:clamp(1.875rem,1.2rem + 2vw,3rem);font-weight:500;line-height:1.05;letter-spacing:-.035em}
.frage-start p{color:var(--muted)}
.themen{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.themen button{font:500 .95rem/1 var(--font);color:var(--ink);background:none;border:0;border-radius:999px;min-height:44px;padding:0 1.1rem;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--line);transition:background-color var(--t-hover) ease,box-shadow var(--t-hover) ease} /* taste-skill-ignore: Umriss-Pillen wie im Gerät */
.themen button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);box-shadow:none;font-weight:600}
.fragen-liste{display:grid;justify-items:center;gap:.6rem}
.chip{
  display:inline-flex;align-items:center;gap:.85rem;max-width:100%;min-height:48px;padding:.6rem 1.1rem .6rem 1.35rem;
  font:400 1rem/1.35 var(--font);text-align:left;color:var(--ink);background:var(--surface);border:0;border-radius:999px;cursor:pointer;
  transition:background-color var(--t-hover) ease,box-shadow var(--t-hover) ease,transform var(--t-press) var(--ease-out);
}
.chip .i{width:18px;height:18px;color:var(--accent);transition:transform var(--t-hover) var(--ease-out)}
.chip:active{transform:scale(.98)}
.chip[aria-pressed="true"]{background:var(--mark)}
@media (hover:hover) and (pointer:fine){
  .themen button:not([aria-pressed="true"]):hover{background:var(--surface)}
  .chip:hover{background:var(--mark)}
  .chip:hover .i{transform:translateX(3px)}
}
.app-inhalt.hat-verlauf .frage-start{display:none}

.verlauf{display:grid;gap:1rem;padding-top:.5rem}
.nachricht-frage{
  justify-self:end;max-width:min(36rem,90%);padding:.85rem 1.2rem;border-radius:24px 24px 8px 24px;
  background:var(--accent);color:var(--on-accent);line-height:1.5;
}
.nachricht-antwort{max-width:48rem;padding:1.25rem 1.4rem;border-radius:8px 24px 24px 24px;background:var(--surface);display:grid;gap:.8rem}
.nachricht-antwort p{line-height:1.6}
.nachricht-antwort--nicht{background:none;box-shadow:inset 0 0 0 1px var(--line)} /* taste-skill-ignore: leere Antwort als Umriss */
.nachricht-kopf{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--muted);font-weight:600}
.nachricht-kopf .i{width:16px;height:16px;color:var(--accent)}
.denkt{display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.95rem}
.denkt__punkte{display:inline-flex;gap:4px}
.denkt__punkte i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:puls 1s infinite ease-in-out}
.denkt__punkte i:nth-child(2){animation-delay:.15s}
.denkt__punkte i:nth-child(3){animation-delay:.3s}
@keyframes puls{0%,100%{opacity:.25}50%{opacity:1}}

.zitat{
  display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 .35rem;margin:0 .1rem;vertical-align:.12em;
  border:0;border-radius:999px;background:var(--mark);color:var(--accent);font:600 .75rem/1 var(--font);cursor:pointer;
  transition:background-color var(--t-hover) ease,color var(--t-hover) ease;
}
.zitat:hover{background:var(--accent);color:var(--on-accent)}
.antwort-hinweis{display:grid;grid-template-columns:20px 1fr;gap:.6rem;padding:.8rem 1rem;border-radius:16px;background:var(--hinweis-weich);font-size:.9rem;color:var(--muted);line-height:1.5}
.antwort-hinweis .i{width:18px;height:18px;color:var(--hinweis)}

.fundstellen{display:grid;gap:.5rem;padding-top:.4rem}
.fundstellen__titel{font-size:.8125rem;font-weight:600;color:var(--muted)}
.fundstelle{
  display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;width:100%;
  padding:.6rem .65rem .6rem .6rem;border-radius:18px;background:var(--bg);border:0;
  font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background-color var(--t-hover) ease;
}
.fundstelle:hover{background:var(--mark)}
.fundstelle__nr{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:.8rem;font-weight:600}
.fundstelle__text{display:grid;gap:.05rem;min-width:0}
.fundstelle__text b{font-size:.95rem;font-weight:600}
.fundstelle__text span{font-size:.8125rem;color:var(--muted);line-height:1.35}
.fundstelle__mehr{font-size:.8125rem;font-weight:600;color:var(--accent);white-space:nowrap;padding:.45rem .85rem;border-radius:999px;background:var(--surface)}

.eingabe{position:sticky;bottom:0;padding:1rem 0 1.1rem;background:linear-gradient(to bottom,transparent,var(--bg) 38%);z-index:2} /* taste-skill-ignore: Lichthof und Verlauf nach Entwurf von Alex */
.eingabe__pille{display:flex;align-items:center;gap:.5rem;max-width:48rem;margin-inline:auto;padding:.35rem .35rem .35rem 1.35rem;border-radius:999px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line),0 14px 34px -24px rgba(20,26,22,.45)} /* taste-skill-ignore: schwebendes Eingabefeld */
.eingabe__pille:focus-within{box-shadow:inset 0 0 0 2px var(--accent),0 14px 34px -24px rgba(20,26,22,.45)} /* taste-skill-ignore */
.eingabe input{flex:1;min-width:0;min-height:44px;font:400 1.0625rem/normal var(--font);color:var(--ink);background:none;border:0;outline:0;padding:0}
.eingabe input::placeholder{color:var(--muted)}
.eingabe__senden{display:grid;place-items:center;width:46px;height:46px;flex:none;border:0;border-radius:50%;background:var(--accent);color:var(--on-accent);cursor:pointer;transition:transform var(--t-press) var(--ease-out)}
.eingabe__senden:active{transform:scale(.94)}
.eingabe__senden svg{width:20px;height:20px}

/* Reiter als Segmentschalter */
.reiter{display:inline-flex;justify-self:start;gap:.25rem;padding:.3rem;border-radius:999px;background:var(--surface);max-width:100%;overflow-x:auto;scrollbar-width:none}
.reiter::-webkit-scrollbar{display:none}
.reiter button{font:600 .9375rem/1 var(--font);color:var(--muted);background:none;border:0;border-radius:999px;min-height:44px;padding:0 1.15rem;cursor:pointer;white-space:nowrap;transition:background-color var(--t-hover) ease,color var(--t-hover) ease}
.reiter button[aria-selected="true"]{background:var(--accent);color:var(--on-accent)}

.liste{display:grid;gap:.75rem}
.liste-eintrag{display:grid;gap:.4rem;padding:1.1rem 1.25rem;border-radius:20px;background:var(--surface)}
.flaeche .liste-eintrag{background:var(--bg)}
.flaeche .liste-eintrag .knopf--leise{background:var(--surface)}
.flaeche .liste-eintrag .knopf--leise:hover{background:var(--surface-2)}
.liste-eintrag h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em}
.liste-eintrag p{color:var(--muted);line-height:1.55}
.quelle-karte{grid-template-columns:1fr auto;gap:.4rem 1rem;align-items:center}
.quelle-karte .knopf-reihe{gap:.5rem}

/* Brief */
.brief{background:var(--surface);border-radius:26px;padding:clamp(1.35rem,3vw,2.5rem);display:grid;gap:.95rem;max-width:46rem;box-shadow:0 24px 50px -36px rgba(20,26,22,.4)} /* taste-skill-ignore: Tiefe nach Entwurf von Alex (Tresor, Gerät, Live-Punkt) */
.brief__betreff{font-weight:600;font-size:1.125rem;letter-spacing:-.01em}
.brief p{line-height:1.65}
.status{display:inline-flex;align-items:center;gap:.4rem;justify-self:start;padding:.35rem .8rem;border-radius:999px;font-size:.8125rem;font-weight:600;background:var(--hinweis-weich);color:var(--hinweis)}
.status .i{width:16px;height:16px}
.status--ok{background:var(--mark);color:var(--accent)}
.einstellung{display:grid;gap:.35rem;padding:.8rem 0}
.einstellung + .einstellung{box-shadow:0 -1px 0 var(--line)} /* taste-skill-ignore: Trennung der Einstellungen */
.einstellung dt{font-size:.8125rem;font-weight:600;color:var(--muted)}
.einstellung dd{margin:0;color:var(--muted);line-height:1.5}
.anweisung{font-family:var(--mono);font-size:.84rem;background:var(--bg);padding:.8rem .95rem;border-radius:var(--rund-klein);color:var(--ink)} /* taste-skill-ignore: Anweisung des Workspaces ist Konfigurationstext */

/* Audio und Abschrift */
.spieler{display:grid;gap:.8rem}
.spieler audio{width:100%;border-radius:999px}
.abschrift{display:grid;gap:.2rem;max-height:30rem;overflow-y:auto;padding-right:.25rem}
.abschnitt{
  display:grid;grid-template-columns:3.4rem 1fr;gap:.75rem;align-items:start;text-align:left;
  font:inherit;color:inherit;background:none;border:0;border-radius:var(--rund-klein);padding:.65rem .7rem;cursor:pointer;
  transition:background-color var(--t-hover) ease;
}
.abschnitt:hover{background:var(--bg)}
.abschnitt.ist-aktiv{background:var(--mark)}
.abschnitt--still{cursor:default}
.abschnitt--still:hover{background:none}
.abschnitt__zeit{font-variant-numeric:tabular-nums;font-size:.8125rem;color:var(--muted);padding-top:.15rem}
.abschnitt__wer{display:block;font-size:.8rem;font-weight:600;color:var(--accent);margin-bottom:.1rem}
.abschnitt__text{line-height:1.55}
.aufgaben{display:grid;gap:.6rem}
.aufgaben li{display:grid;grid-template-columns:20px 1fr;gap:.65rem;align-items:start;line-height:1.45}
.aufgaben .i{width:18px;height:18px;color:var(--accent);margin-top:.1rem}
.aufgaben small{display:block;color:var(--muted);font-size:.8125rem}

/* Schritte (Hörfassung) */
.schrittleiste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;counter-reset:s}
.schrittleiste li{
  counter-increment:s;display:flex;align-items:center;gap:.55rem;min-height:48px;padding:.4rem .9rem .4rem .45rem;border-radius:999px;
  background:var(--surface);font-size:.9rem;color:var(--muted);line-height:1.25;
}
.schrittleiste li::before{content:counter(s);display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;flex:none;background:var(--bg);font-weight:600;font-size:.8rem}
.schrittleiste li.ist-fertig{color:var(--ink)}
.schrittleiste li.ist-fertig::before{content:"";background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7'/%3E%3C/svg%3E") center / 15px no-repeat}
.schrittleiste li.ist-dran{color:var(--ink);box-shadow:inset 0 0 0 2px var(--accent)} /* taste-skill-ignore: aktueller Schritt */
.schrittleiste li.ist-dran::before{background:var(--mark);color:var(--accent)}
.freigabe{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* Rechte */
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left}
.ja{color:var(--accent)!important;font-weight:600}
.nein{color:var(--muted)}
.personen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.person{
  display:grid;gap:.3rem;text-align:left;font:inherit;color:inherit;cursor:pointer;
  padding:1.1rem 1.25rem;border-radius:var(--rund);background:var(--surface);border:0;
  transition:background-color var(--t-hover) ease,box-shadow var(--t-hover) ease,transform var(--t-press) var(--ease-out);
}
.person:active{transform:scale(.985)}
.person:hover{background:var(--mark)}
.person[aria-pressed="true"]{background:var(--mark);box-shadow:inset 0 0 0 2px var(--accent)} /* taste-skill-ignore: gewählte Person */
.person b{font-size:1.125rem;font-weight:600;letter-spacing:-.01em}
.person span{font-size:.875rem;color:var(--muted)}
.person small{font-size:.78rem;color:var(--accent);font-weight:600}

/* Tabellen in der Arbeitsfläche */
.app .tabelle-huelle{background:var(--bg);border-radius:18px;padding:.25rem 1.15rem}
.app .tabelle{font-size:.95rem;min-width:520px}
.app .tabelle th,.app .tabelle td{padding:.75rem .75rem .75rem 0}

/* Sicherheit */
.kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.kachel{display:grid;gap:.4rem;align-content:start;padding:1.2rem 1.3rem;border-radius:var(--rund);background:var(--surface)}
.kachel .i{width:22px;height:22px;color:var(--accent)}
.kachel .kachel__wert{font-family:var(--font);font-weight:500;font-size:2.5rem;line-height:1.05;letter-spacing:-.04em;color:var(--ink)}
.kachel h3{font-size:1rem;font-weight:600}
.kachel p{font-size:.875rem;color:var(--muted);line-height:1.45}
.ist-neu td{animation:aufleuchten 2.4s ease-out}
@keyframes aufleuchten{from{background:var(--mark)}to{background:transparent}}

/* Kein Zugriff */
.gesperrt{display:grid;justify-items:center;text-align:center;gap:.8rem;padding:3rem 1rem}
.gesperrt .i{width:36px;height:36px;color:var(--muted)}
.gesperrt h2{font-size:1.5rem;font-weight:500;letter-spacing:-.02em}

/* Schublade mit Originaltext */
.schublade{
  margin:0 0 0 auto;height:100svh;max-height:100svh;width:min(40rem,100vw);padding:0;border:0;border-radius:28px 0 0 28px;
  background:var(--bg);color:var(--ink);box-shadow:-30px 0 60px -30px rgba(0,0,0,.45);display:none;flex-direction:column;overflow:hidden; /* taste-skill-ignore: Tiefe nach Entwurf von Alex (Tresor, Gerät, Live-Punkt) */
}
.schublade[open]{display:flex;animation:hereinschieben .32s var(--kurve)}
.schublade::backdrop{background:rgba(10,17,12,.45)}
@keyframes hereinschieben{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.schublade__kopf{display:flex;justify-content:space-between;gap:1rem;padding:1.5rem 1.6rem 1rem}
.schublade__art{font-size:.8125rem;font-weight:600;color:var(--accent)}
.schublade h2{font-family:var(--font);font-weight:500;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);letter-spacing:-.03em;line-height:1.1;margin:.25rem 0 .4rem}
.schublade__meta{font-size:.875rem;color:var(--muted);line-height:1.45}
.schublade__zu{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;border:0;background:var(--surface);color:var(--ink);cursor:pointer}
.schublade__zu:hover{background:var(--surface-2)}
.schublade__zu svg{width:18px;height:18px}
.schublade__text{flex:1;overflow-y:auto;margin:0 1rem;padding:1.2rem 1.25rem;border-radius:var(--rund);background:var(--surface);display:grid;gap:1rem;align-content:start}
.originaltext{white-space:pre-line;line-height:1.7;font-size:.975rem;color:var(--muted)}
.originaltext mark{background:color-mix(in srgb,#f2c94c 55%,transparent);color:var(--ink);padding:0 .1em;border-radius:4px}
.schublade__fuss{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;padding:1rem 1.6rem 1.4rem}
.schublade__fuss .leise{flex-basis:100%}
.zinstabelle{width:100%;border-collapse:collapse;font-size:.9rem}
.zinstabelle th,.zinstabelle td{padding:.45rem .6rem;border-bottom:1px solid var(--line);text-align:left}
.zinstabelle td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

/* Kurzmeldung */
.toast{
  position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,1rem);opacity:0;pointer-events:none;
  padding:.8rem 1.25rem;border-radius:999px;background:var(--rahmen);color:var(--rahmen-tinte);font-size:.9375rem;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.5);transition:opacity .25s,transform .25s var(--kurve);z-index:60;max-width:calc(100vw - 2rem);text-align:center; /* taste-skill-ignore: Tiefe nach Entwurf von Alex (Tresor, Gerät, Live-Punkt) */
}
.toast.ist-sichtbar{opacity:1;transform:translate(-50%,0)}

/* Eingebettet auf der Startseite: kein Band, schmalere Leiste */
.ist-eingebettet{--band-h:0px}
.ist-eingebettet .app-band{display:none}
.ist-eingebettet .app{grid-template-columns:224px minmax(0,1fr)}
.ist-eingebettet .app-basis{display:none}
.ist-eingebettet .app-seite{padding-top:.9rem}
.ist-eingebettet .app-haupt{margin:8px 8px 8px 0;min-height:calc(100vh - 16px)}

/* Breiten */
@media (max-width:1180px){
  .kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zwei-spalten{grid-template-columns:1fr}
}
@media (max-width:860px){
  .app,.ist-eingebettet .app{grid-template-columns:minmax(0,1fr)}
  .app-seite,.app-nav{min-width:0}
  .app-seite{position:static;height:auto;overflow:visible;gap:.75rem;padding:.6rem .6rem .75rem}
  .app-nav{flex-direction:row;gap:.35rem;overflow-x:auto;scrollbar-width:none;margin-inline:-.6rem;padding-inline:.6rem}
  .app-nav::-webkit-scrollbar{display:none}
  .app-nav__gruppe{flex-direction:row;gap:.35rem}
  .app-nav__titel{display:none}
  .app-nav a{flex:none;white-space:nowrap;background:rgba(236,235,225,.07)}
  .app-status{margin-top:0}
  .app-basis{display:none}
  .app-haupt,.ist-eingebettet .app-haupt{margin:0 8px 8px;min-height:0}
  .app-kopf{align-items:flex-start}
  .app-person{width:100%}
  .app-person select{width:100%;min-width:0}
  .personen{grid-template-columns:1fr}
  .schrittleiste{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .app-band{font-size:.8125rem}
  .kacheln{grid-template-columns:1fr}
  .themen{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;margin-inline:calc(var(--innen) * -1);padding-inline:var(--innen)}
  .themen::-webkit-scrollbar{display:none}
  .themen button{flex:none;white-space:nowrap}
  .fragen-liste{justify-items:stretch}
  .chip{justify-content:space-between;font-size:.95rem;border-radius:22px}
  .fundstelle{grid-template-columns:auto 1fr;border-radius:18px}
  .fundstelle__mehr{display:none}
  .quelle-karte{grid-template-columns:1fr}
  .schublade{border-radius:24px 24px 0 0;height:88vh;max-height:88vh;margin:auto 0 0;width:100vw}
}
@media (prefers-reduced-motion:reduce){
  .app-nav__neu,.schublade[open],.ist-neu td,.denkt__punkte i{animation:none}
  .toast{transition:none}
}
.app-status b{font-weight:500;color:var(--rahmen-tinte)}
@media (max-width:860px){.app-status{grid-template-columns:8px auto 1fr;column-gap:.6rem}.app-status__punkt{grid-row:auto}}

/* Eingebettet und mittelbreit (Fenster auf der Startseite): Seitenleiste bleibt, nur schmaler */
@media (min-width:680px) and (max-width:860px){
  .ist-eingebettet .app{grid-template-columns:214px minmax(0,1fr)}
  .ist-eingebettet .app-seite{position:sticky;top:0;height:100svh;overflow-y:auto;gap:1.25rem;padding:.9rem .55rem 1rem}
  .ist-eingebettet .app-nav{flex-direction:column;gap:1rem;overflow:visible;margin:0;padding:0}
  .ist-eingebettet .app-nav__gruppe{flex-direction:column;gap:.1rem}
  .ist-eingebettet .app-nav__titel{display:block;padding:0 .75rem}
  .ist-eingebettet .app-nav a{flex:initial;white-space:normal;background:none;font-size:.875rem;padding:.45rem .75rem}
  .ist-eingebettet .app-nav a[aria-current="page"]{background:var(--night-accent)}
  .ist-eingebettet .app-status{margin-top:auto;grid-template-columns:8px 1fr;font-size:.75rem}
  .ist-eingebettet .app-status__punkt{grid-row:1 / span 2}
  .ist-eingebettet .app-haupt{margin:8px 8px 8px 0;min-height:calc(100vh - 16px)}
  .ist-eingebettet .app-person select{min-width:0}
}