.fach-vorschau{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--card,var(--paper));color:var(--ink);overflow:hidden;}
.fach-vorschau[open]{display:flex;flex-direction:column;}
.fach-vorschau::backdrop{background:var(--card,var(--paper));}
.fach-vorschau header{display:flex;align-items:center;gap:var(--s-3);flex:none;padding:var(--s-3);padding-top:max(var(--s-3),env(safe-area-inset-top));border-bottom:1px solid var(--line);}
.fach-vorschau button{font:inherit;color:inherit;background:var(--surface-subtle);border:1px solid var(--line);border-radius:var(--r-control);padding:var(--s-2) var(--s-3);cursor:pointer;}
.fach-vorschau button:focus-visible{outline:2px solid var(--flaeche-akzent,var(--brand));outline-offset:2px;}
.fach-vorschau strong{font-size:var(--fs-sm);}
.fach-vorschau p{margin:0;padding:var(--s-3);font-size:var(--fs-sm);}
.fach-vorschau iframe{flex:1;min-height:0;width:100%;border:0;background:var(--card,var(--paper));padding-bottom:env(safe-area-inset-bottom);}

@media(max-width:420px){.fach-vorschau strong{display:none;}.fach-vorschau button{min-height:44px;white-space:nowrap;}}

/* Der Weg steht vor dem Inhalt; die Suche belegt nur geöffnet eine Zeile. */
.fach-kopf{padding:12px 0 8px;border-bottom:1px solid var(--line);}
.fach-kopf-zeile{display:flex;align-items:center;gap:16px;}
.fach-kopf .crumbs{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;font-size:18px;line-height:1.6;color:var(--muted);}
.fach-kopf .crumbs a{border-radius:4px;overflow-wrap:anywhere;}
.fach-kopf .crumbs a:hover{color:var(--brand);text-decoration:underline;}
.fach-kopf .crumbs a:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
.fach-kopf .crumbs b{font-weight:700;color:var(--ink);overflow-wrap:anywhere;}
.fach-kopf .crumbs [data-lucide]{width:16px;height:16px;flex:none;}
.fach-aktionen{display:flex;align-items:center;gap:var(--s-1);flex:none;align-self:flex-start;}
.fach-aktionen .ti-tl-k{width:36px;height:36px;}
.fach-aktionen [data-lucide]{width:18px;height:18px;}
.fach-aktionen .ti-tl-k svg{width:18px;height:18px;}
.fach-aktionen .ti-teilen{margin:0;min-height:36px;}
.fach-suche{display:flex;align-items:center;gap:8px;width:min(100%,560px);margin:10px 0 0 auto;padding:4px 8px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--card);}
.fach-suche[hidden],.fach-suche button[hidden]{display:none;}
.fach-suche:focus-within{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft);}
.fach-suche > [data-lucide]{width:18px;height:18px;flex:none;color:var(--muted);}
.fach-suche input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;}
.fach-suche input::-webkit-search-cancel-button{display:none;}
.fach-suche button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;flex:none;border:0;border-radius:var(--r-control);background:transparent;color:var(--muted);cursor:pointer;}
.fach-suche button:hover{background:var(--paper);color:var(--ink);}
.fach-suche button:focus-visible{outline:2px solid var(--brand);}
.fach-suche button [data-lucide]{width:18px;height:18px;}
@media(max-width:640px){
  .fach-kopf-zeile{flex-wrap:wrap;gap:6px;}
  .fach-kopf .crumbs{flex-basis:100%;font-size:16px;gap:4px 7px;}
  .fach-aktionen{margin-left:auto;}
  .fach-aktionen > button,.fach-aktionen .ti-tl-k{width:40px;height:40px;}
  .fach-suche button{height:40px;}
}

/* GLAS MIT SANFTER TIEFE IM ARBEITSPLATZ (v3.12.0). Eda Cansu 15.10.2026: die
   Knöpfe der Fächer wie die übrigen Bildschirme („aynı şeyi … fächer
   içinde yap") – index.css, Abschnitt „DIE SAMMLUNG IM STIL DER LEISTE".
   Nur `body.embed`: die öffentliche Seite (Suchmaschinen, Besucher) behält
   ihr Gesicht; die Knöpfe sind Bedienung, kein Inhalt – der eine Zeichner
   des Inhalts (teile/thema-inhalt.html) bleibt unberührt. Diese Seite kennt
   die Glas-Variablen der App nicht; die Rollen kommen aus ihren Farben:
   erhaben (Licht oben links, Schatten unten rechts), offen eingelassen. */
body.embed{--fn-licht:color-mix(in srgb,var(--card) 74%,transparent);
  --fn-tief:color-mix(in srgb,var(--ink) 11%,transparent);
  --fn-kante:color-mix(in srgb,var(--brand) 14%,color-mix(in srgb,var(--ink) 7%,transparent));
  --fn-glas:linear-gradient(180deg,var(--fn-licht),transparent 60%),color-mix(in srgb,var(--brand) 3%,var(--card));
  --fn-hoch:inset 0 1px 0 var(--fn-licht),-2px -2px 5px var(--fn-licht),2px 3px 8px -3px var(--fn-tief);
  --fn-hoch-mehr:inset 0 1px 0 var(--fn-licht),-3px -3px 7px var(--fn-licht),3px 6px 14px -5px var(--fn-tief);
  --fn-tief-innen:inset 2px 2px 5px var(--fn-tief),inset -2px -2px 5px var(--fn-licht);}
body.embed .fach-aktionen .ti-tl-k,body.embed .tr-p{border:1px solid var(--fn-kante);border-radius:50%;
  background:var(--fn-glas);color:var(--ink);box-shadow:var(--fn-hoch);
  transition:box-shadow .2s ease,transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s ease,color .15s ease;}
body.embed .fach-aktionen .ti-tl-k:hover,body.embed .tr-p:hover:not(:disabled){transform:translateY(-1px);
  background:var(--fn-glas);color:var(--brand);box-shadow:var(--fn-hoch-mehr);
  border-color:color-mix(in srgb,var(--brand) 30%,color-mix(in srgb,var(--ink) 7%,transparent));}
body.embed .fach-aktionen .ti-tl-k:is(:active,[aria-expanded="true"]),body.embed .tr-p:active:not(:disabled){transform:none;
  background:color-mix(in srgb,var(--brand) 7%,var(--card));box-shadow:var(--fn-tief-innen);}
body.embed .tr-p:disabled{box-shadow:none;}
body.embed .fach-suche{border:1px solid var(--fn-kante);border-radius:999px;
  background:color-mix(in srgb,var(--brand) 6%,var(--card));box-shadow:var(--fn-tief-innen);}
body.embed .fach-suche:focus-within{border-color:color-mix(in srgb,var(--brand) 40%,transparent);box-shadow:var(--fn-tief-innen);}
body.embed .fach-suche button{border-radius:50%;}
@media (prefers-reduced-motion:reduce){body.embed .fach-aktionen .ti-tl-k,body.embed .tr-p{transition:none;}}

/* ORDNUNG IM ARBEITSPLATZ (v3.13.0). Eda Cansu 15.10.2026: „fächer içindeki
   fachların içleri çok düzensiz … yukarıda biraz fazla boşluk … text
   boyutlarını küçült". Wieder nur `body.embed` – die öffentliche Seite
   bleibt, wie Suchmaschinen sie kennen.
   1. Oben weniger Luft: der Weg beginnt an der Panelkante.
   2. Eine Schriftstufe kleiner: die Thema-Seite liest ihre Größen aus den
      Tokens (thema-inhalt.css) – hier eine Stufe tiefer gesetzt; die
      Fach- und Teilgebietsseite (fach.html) hat feste Größen und bekommt
      sie einzeln.
   3. Ein Stoff für jede Karte: 16-px-Rundung, feine Kante, Glas mit sanfter
      Tiefe (--fn-*, oben). Die farbige Kante der „Neu bei"-Karten und der
      Farbton beim Zeigen einer Teilgebiet-Kachel bleiben – sie tragen das
      Teilgebiet. */
body.embed{--fs-2xl:24px;--fs-xl:20px;--fs-lg:16px;--fs-base:14.5px;--fs-md:14px;}
body.embed main{padding-top:0;}
body.embed .fach-kopf{padding:0 0 8px;}
body.embed .fach-kopf .crumbs{font-size:15px;line-height:1.5;gap:4px 8px;}
body.embed .fach-kopf .crumbs [data-lucide],body.embed .fach-kopf .crumbs svg{width:14px;height:14px;}
body.embed h2.sec{font-size:16px;margin:18px 0 10px;}
body.embed .tg-hero{padding:16px 20px;gap:16px;margin-top:10px;align-items:center;}
body.embed .tg-hero .big{width:46px;height:46px;border-radius:14px;}
body.embed .tg-hero .big [data-lucide],body.embed .tg-hero .big svg{width:24px;height:24px;}
body.embed .tg-hero h1{font-size:20px;margin:0 0 2px;}
body.embed .tg-hero .ut{font-size:13.5px;margin:0 0 6px;}
body.embed .tg-hero p.intro{font-size:13px;line-height:1.6;}
body.embed .tg-layout{gap:14px;margin-top:14px;}
body.embed .tg-side{padding:14px 16px 16px;}
body.embed .tg-side h3{font-size:14px;}
body.embed .stufe-card{padding:16px 20px;margin-bottom:14px;}
body.embed .stufe-card>h2{font-size:17px;}
body.embed .tb-block{padding:12px 0;}
body.embed .tb-block h3{font-size:14px;}
body.embed .tb-kids a{font-size:13px;}
body.embed .tg-grid{gap:12px;}
body.embed .tg-tile{padding:14px 44px 14px 16px;}
body.embed .tg-tile .ic{width:44px;height:44px;border-radius:12px;}
body.embed .tg-tile .ic svg{width:22px;height:22px;}
body.embed .buch-t{font-size:14px;}
body.embed .ti-titel{margin-bottom:8px;}
body.embed .ti-sect{padding:18px 20px;margin-top:14px;}
body.embed .ti-fragen{border-radius:16px;}
body.embed :is(.tg-tile,.rg-kachel,.tg-hero,.tg-side,.stufe-card,.ti-sect,.ti-vw){border:1px solid var(--fn-kante);
  border-radius:16px;background:var(--fn-glas);box-shadow:var(--fn-hoch);}
body.embed .buch{border-top-color:var(--fn-kante);border-right-color:var(--fn-kante);border-bottom-color:var(--fn-kante);
  border-radius:16px;background:var(--fn-glas);box-shadow:var(--fn-hoch);}
body.embed :is(.tg-tile,.buch,.ti-vw):hover{box-shadow:var(--fn-hoch-mehr);}
body.embed .tg-tile:hover{background:var(--tgbg,var(--brand-soft));border-color:var(--tgc,var(--brand));}
body.embed .ti-vw:hover{border-color:color-mix(in srgb,var(--brand) 40%,transparent);}