/* Gemeinsames Grundgerüst der Glossar-Seiten.
   Gleiche Formensprache wie die Übersicht: Google-Design-Look mit cremigem
   Papier, extra-fetter breiter Grotesk und Outline-Pillen.
   Keine Webfonts, keine Libraries – die Seiten sollen sofort stehen. */

:root{
  color-scheme: light dark;
  /* Google-Design-Look (design.google): cremiges Papier, warmes Schwarz,
     flache Flächen ohne Schatten, kräftige Outline-Pillen. */
  --papier:#fdfdf5;
  --flaeche:#f1f0e6;
  --flaeche-tief:#e6e4d8;
  --linie:#dddbcf;
  --linie-stark:#b9b6a9;
  --tinte:#10120e;
  --tinte-weich:#5f6368;
  --tinte-zart:#8f918a;
  --akzent:#146c2e;
  --akzent-hell:#c4eed0;
  --signal:#b3261e;
  --warn:#7a5900;
  --radius-gross:28px;
  --radius:16px;
  --pille:100px;
  --kontur:2px;
  /* Bleiben definiert, damit Inline-Stile der Seiten nicht brechen – aber flach. */
  --schatten:none;
  --schatten-hover:none;
  --glas:var(--papier);
  --glas-rand:var(--linie);
  --font:"Roboto Flex", "Google Sans Text", -apple-system, "SF Pro Text", system-ui, "Helvetica Neue", sans-serif;
  --font-mono:"Roboto Mono", "SF Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
    --papier:#12110c;
    --flaeche:#1d1c16;
    --flaeche-tief:#32302a;
    --linie:#32302a;
    --linie-stark:#4a473f;
    --tinte:#fdfdf5;
    --tinte-weich:#b3b0a5;
    --tinte-zart:#7d7a70;
    --akzent:#6dd58c;
    --akzent-hell:#0f3a1c;
    --signal:#ffb4ab;
    --warn:#f2c94c;
  } }
  :root[data-theme="dark"]{
    --papier:#12110c;
    --flaeche:#1d1c16;
    --flaeche-tief:#32302a;
    --linie:#32302a;
    --linie-stark:#4a473f;
    --tinte:#fdfdf5;
    --tinte-weich:#b3b0a5;
    --tinte-zart:#7d7a70;
    --akzent:#6dd58c;
    --akzent-hell:#0f3a1c;
    --signal:#ffb4ab;
    --warn:#f2c94c;
  }

*{box-sizing:border-box;}
html{scrollbar-gutter:stable;-webkit-font-smoothing:antialiased;}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--font);font-size:16px;line-height:1.55;letter-spacing:-.011em;
  font-optical-sizing:auto;text-rendering:optimizeLegibility;
}
a{color:inherit;}
.seite{max-width:940px;margin:0 auto;padding:0 clamp(20px,5vw,48px) 96px;}

/* ============================================================ Brotkrumen */
.krumen{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:12px clamp(20px,5vw,48px);margin:0 calc(-1 * clamp(20px,5vw,48px)) clamp(36px,6vw,60px);
  /* Echtes Glas: heller oberer Rand fängt das Licht, Inhalt scrollt darunter. */
  background:var(--glas);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--glas-rand);
  box-shadow:0 1px 0 rgb(0 0 0 / .03);
  font-size:.8125rem;
}
.krumen a{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--tinte-weich);
  background:var(--flaeche);border:1px solid transparent;border-radius:var(--pille);
  padding:8px 15px;font-weight:500;
  transition:color 160ms ease,border-color 160ms ease,background 160ms ease;
}
.krumen a:hover{color:var(--tinte);background:var(--papier);border-color:var(--linie-stark);}
.krumen__teiler{color:var(--tinte-zart);}
.krumen__hier{font-weight:600;padding:8px 4px;}
.krumen__quelle{margin-left:auto;color:var(--tinte-zart);}
.krumen__quelle code{font-family:var(--font-mono);font-size:.75rem;}
@media (max-width:640px){ .krumen__quelle{display:none;} }

/* ============================================================= Typografie */
/* Tracking size-spezifisch: grosse Display-Typo zieht negativ zusammen,
   Fliesstext bleibt nahe null. */
h1{
  font-size:clamp(2.25rem,6vw,3.75rem);font-weight:600;line-height:1.04;
  letter-spacing:-.028em;margin:0 0 18px;text-wrap:balance;font-optical-sizing:auto;
}
h2{
  font-size:clamp(1.375rem,3vw,1.875rem);font-weight:600;line-height:1.12;
  letter-spacing:-.022em;margin:clamp(48px,7vw,76px) 0 14px;text-wrap:balance;
}
h3{font-size:1rem;font-weight:600;letter-spacing:-.01em;margin:26px 0 6px;}
p{font-size:1rem;line-height:1.6;max-width:70ch;margin:0 0 14px;}
.lead{font-size:clamp(1.0625rem,2vw,1.25rem);color:var(--tinte-weich);max-width:60ch;letter-spacing:-.014em;}
em{font-style:normal;color:var(--tinte);}
var{font-style:italic;font-family:var(--font-mono);font-style:normal;}

code{
  font-family:var(--font-mono);font-size:.85em;background:var(--flaeche);
  border-radius:6px;padding:2px 6px;
}
pre{
  margin:0;padding:18px 20px;overflow-x:auto;border-radius:14px;
  background:var(--flaeche-tief);
  font-family:var(--font-mono);font-size:.8125rem;line-height:1.7;color:var(--tinte);
}
pre code{background:none;padding:0;}
pre .komm{color:var(--tinte-zart);}

/* ================================================================ Stufen */
.stufen{display:grid;grid-template-columns:1fr;gap:12px;margin:28px 0 8px;}
@media (min-width:820px){ .stufen{grid-template-columns:repeat(3,1fr);} }
.stufe{
  background:var(--papier);border:1px solid var(--linie);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--schatten);
}
.stufe h3{margin:0 0 8px;font-size:.9375rem;}
.stufe p{font-size:.9375rem;color:var(--tinte-weich);margin:0;}
.kann{
  display:inline-block;margin-top:12px;font-size:.75rem;font-weight:600;
  border-radius:var(--pille);padding:4px 12px;background:var(--flaeche);color:var(--tinte-weich);
}
.kann--ja{background:var(--akzent-hell);color:var(--akzent-text);}
.kann--nein{background:color-mix(in srgb, var(--signal) 12%, transparent);color:var(--signal);}

/* ================================================================== Demo */
.demo{
  margin:28px 0 8px;padding:clamp(18px,2.6vw,28px);
  background:var(--flaeche);border-radius:var(--radius-gross);
}
.demo__kopf{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  margin-bottom:20px;
}
.demo__hinweis{font-size:.875rem;color:var(--tinte-weich);margin:0;max-width:54ch;}
.knopf{
  font:inherit;font-size:.8125rem;font-weight:500;color:var(--tinte-weich);
  background:var(--papier);border:1px solid var(--linie);border-radius:var(--pille);
  padding:9px 18px;cursor:pointer;
  transition:color 150ms ease,background 150ms ease,border-color 150ms ease;
}
.knopf:hover{color:var(--tinte);border-color:var(--linie-stark);}
.knopf.aktiv{background:var(--tinte);color:var(--papier);border-color:var(--tinte);}
.regler{display:flex;flex-direction:column;gap:8px;font-size:.8125rem;color:var(--tinte-weich);}
.regler label{font-weight:600;color:var(--tinte);}
.regler input[type=range]{width:min(280px,60vw);accent-color:var(--akzent);}

.felder{display:grid;grid-template-columns:1fr;gap:12px;}
@media (min-width:760px){
  .felder{grid-template-columns:repeat(3,minmax(0,1fr));}
  .felder--zwei{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.feld{background:var(--papier);border:1px solid var(--linie);border-radius:var(--radius);padding:18px;box-shadow:var(--schatten);}
.feld__titel{font-size:.8125rem;font-weight:600;color:var(--tinte);margin:0 0 4px;letter-spacing:-.01em;}
.feld__zeile{font-family:var(--font-mono);font-size:.75rem;color:var(--tinte-zart);margin:0 0 14px;}
.messwert{font-family:var(--font-mono);font-size:.75rem;color:var(--tinte-weich);margin:12px 0 0;min-height:1.2em;}

/* =============================================================== Tabellen */
.tabelle-huelle{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:.9375rem;margin:18px 0 4px;}
th,td{text-align:left;padding:13px 20px 13px 0;border-bottom:1px solid var(--linie);vertical-align:top;}
tr:last-child td{border-bottom:0;}
th{font-size:.75rem;color:var(--tinte-zart);font-weight:600;}

/* ============================================================== Merksatz */
.merk{
  background:var(--flaeche);border-radius:var(--radius);
  padding:18px 22px;margin:22px 0;
}
.merk p{margin:0;color:var(--tinte-weich);font-size:.9375rem;max-width:none;}
.merk strong{color:var(--tinte);font-weight:600;}

/* ================================================================ Ausklapper */
/* Für Vertiefung, die nicht jeder lesen muss: Code, Randfälle, Details.
   Native <details> – kein JS, kein overflow-Problem. */
.klapp{
  border:1px solid var(--linie);border-radius:var(--radius);
  background:var(--papier);margin:12px 0;overflow:hidden;box-shadow:var(--schatten);
  transition:box-shadow 220ms ease;
}
.klapp[open]{box-shadow:var(--schatten-hover);}
.klapp+.klapp{margin-top:10px;}
.klapp>summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:12px;
  padding:15px 20px;font-size:.9375rem;font-weight:600;color:var(--tinte);
  transition:background 150ms ease;
}
.klapp>summary::-webkit-details-marker{display:none;}
.klapp>summary:hover{background:var(--flaeche);}
.klapp>summary .pfeil{
  margin-left:auto;flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--flaeche);display:grid;place-items:center;color:var(--tinte-weich);
  font-size:.75rem;transition:transform 200ms cubic-bezier(.2,.9,.3,1),background 150ms ease;
}
.klapp[open]>summary .pfeil{transform:rotate(90deg);background:var(--akzent-hell);color:var(--akzent);}
.klapp>summary .vorschau{
  font-weight:400;color:var(--tinte-zart);font-size:.8125rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.klapp__inhalt{padding:2px 20px 18px;}
.klapp__inhalt>*:first-child{margin-top:0;}
.klapp__inhalt>*:last-child{margin-bottom:0;}
.klapp__inhalt pre{margin:6px 0;}
@media (prefers-reduced-motion: reduce){ .klapp>summary .pfeil{transition:none;} }

/* ============================================================== Info-Symbol */
/* Kurze Begriffserklärung inline, ohne den Lesefluss zu unterbrechen.
   Erscheint bei Hover und Tastaturfokus. */
.info{
  position:relative;display:inline-grid;place-items:center;
  width:16px;height:16px;margin:0 1px;border-radius:50%;vertical-align:baseline;
  background:var(--flaeche);color:var(--tinte-weich);
  font-family:var(--font);font-size:11px;font-weight:700;font-style:normal;
  cursor:help;transition:background 150ms ease,color 150ms ease;
}
.info:hover,.info:focus-visible{background:var(--akzent-hell);color:var(--akzent);outline:none;}
.info::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  width:max-content;max-width:min(260px,72vw);
  background:var(--tinte);color:var(--papier);
  font-size:.8125rem;font-weight:400;line-height:1.45;letter-spacing:-.005em;
  text-align:left;white-space:normal;
  padding:10px 13px;border-radius:10px;
  opacity:0;pointer-events:none;transition:opacity 160ms ease,transform 160ms ease;
  z-index:30;box-shadow:0 6px 20px rgb(0 0 0 / .18);
}
.info::before{
  content:"";position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--tinte);
  opacity:0;pointer-events:none;transition:opacity 160ms ease;z-index:30;
}
.info:hover::after,.info:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0);}
.info:hover::before,.info:focus-visible::before{opacity:1;}

/* ================================================================= Fusszeile */
.weiter{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  border-top:1px solid var(--linie);margin-top:clamp(48px,7vw,72px);padding-top:24px;
}
.weiter a{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:.875rem;font-weight:500;
  background:var(--flaeche);border-radius:var(--pille);padding:9px 18px;color:var(--tinte-weich);
  transition:color 150ms ease,background 150ms ease;
}
.weiter a:hover{color:var(--tinte);background:var(--flaeche-tief);}

/* ============================================== Barrierefreiheit (Apple) */
/* Weniger Transparenz: Glas wird solide statt frostig. */
@media (prefers-reduced-transparency: reduce){
  .krumen{background:var(--papier);backdrop-filter:none;-webkit-backdrop-filter:none;}
}
/* Mehr Kontrast: klare Ränder statt weicher Schatten. */
@media (prefers-contrast: more){
  .stufe,.feld,.klapp{border-color:var(--linie-stark);box-shadow:none;}
}
/* Weniger Bewegung: keine Ausklapp-Rotation, keine Tooltip-Fahrt. */
@media (prefers-reduced-motion: reduce){
  .klapp>summary .pfeil,.info::after,.info::before,.klapp{transition:none;}
}

/* ======================================== Google-Design-Schicht (design.google)
   Überschreibt die Apple-Anteile oben: kein Glas, keine Schatten, fette breite
   Display-Typo, Pillen mit 2px-Kontur. */
.krumen{background:var(--papier);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-bottom:1px solid var(--linie);}
.krumen a{background:transparent;border:var(--kontur) solid var(--tinte);color:var(--tinte);padding:6px 16px;}
.krumen a:hover{background:var(--tinte);color:var(--papier);border-color:var(--tinte);}
.krumen__hier{font-weight:800;}

h1,h2{font-weight:800;font-stretch:120%;font-variation-settings:"wdth" 120;letter-spacing:-.015em;}
h1{font-size:clamp(2.5rem,6.4vw,4.5rem);line-height:1.02;}
h2{font-size:clamp(1.625rem,3.4vw,2.25rem);line-height:1.08;}
h3{font-weight:800;font-stretch:112%;letter-spacing:0;}
body{line-height:1.6;letter-spacing:0;}
.lead{letter-spacing:0;}

.stufe,.feld{box-shadow:none;border:1px solid var(--linie);}
.stufe{border:0;border-top:var(--kontur) solid var(--tinte);border-radius:0;background:transparent;padding:18px 0 8px;}
.kann{border:var(--kontur) solid currentColor;background:transparent;}
.kann--ja{background:transparent;}
.kann--nein{background:transparent;}

.demo{border-radius:var(--radius-gross);}
.knopf{background:transparent;color:var(--tinte);border:var(--kontur) solid var(--tinte);padding:7px 18px;}
.knopf:hover{background:var(--flaeche-tief);border-color:var(--tinte);}
.knopf.aktiv{background:var(--tinte);color:var(--papier);}

.merk{border-left:4px solid var(--akzent);border-radius:0 var(--radius) var(--radius) 0;}
.merk strong{font-weight:800;}

.klapp{box-shadow:none;border:0;border-top:var(--kontur) solid var(--tinte);border-radius:0;background:transparent;margin:0;}
.klapp[open]{box-shadow:none;}
.klapp+.klapp{margin-top:0;}
.klapp:last-of-type{border-bottom:1px solid var(--linie);}
.klapp>summary{padding:16px 0;font-weight:800;}
.klapp>summary:hover{background:transparent;text-decoration:underline;text-underline-offset:4px;}
.klapp>summary .pfeil{width:28px;height:28px;background:transparent;border:var(--kontur) solid var(--tinte);color:var(--tinte);}
.klapp[open]>summary .pfeil{background:var(--tinte);color:var(--papier);}
.klapp__inhalt{padding:0 0 20px;}

.info::after{border-radius:12px;box-shadow:none;}

.weiter{border-top:var(--kontur) solid var(--tinte);}
.weiter a{background:transparent;border:var(--kontur) solid var(--tinte);color:var(--tinte);padding:7px 18px;}
.weiter a:hover{background:var(--tinte);color:var(--papier);}

/* ================================================ Plakativ (weniger ist mehr)
   Titel und Lead stehen auf einem dunklen Band über die volle Breite – wie der
   Hero der Übersicht. Kleinkram tritt zurück. */
html{overflow-x:clip;}
.seite > h1,.seite > h1 + .lead{position:relative;isolation:isolate;color:#fdfdf5;}
.seite > h1::before,.seite > h1 + .lead::before{
  content:"";position:absolute;inset:0 -100vmax;background:#12110c;z-index:-1;
}
.krumen{margin-bottom:0;}
.seite > h1{
  font-size:clamp(3rem,8vw,6.5rem);line-height:.95;letter-spacing:-.03em;
  margin:0;padding:clamp(56px,9vw,112px) 0 clamp(20px,3vw,32px);max-width:none;
}
.seite > h1 + .lead{
  margin:0 0 clamp(56px,8vw,96px);padding:0 0 clamp(56px,8vw,96px);
  max-width:none;font-size:clamp(1.125rem,2vw,1.375rem);line-height:1.5;color:#c9c6bb;
}
.seite > h1 + .lead code{background:#32302a;color:#fdfdf5;}
.seite > h1 + .lead em{color:#fdfdf5;}
.seite > h1 + .lead .info{background:#32302a;color:#fdfdf5;}
.seite > h1 + .lead .info::after{background:#fdfdf5;color:#10120e;}
.seite > h1 + .lead .info::before{border-top-color:#fdfdf5;}

.krumen__quelle{display:none;}
.klapp>summary .vorschau{display:none;}

h2{font-size:clamp(2rem,4.6vw,3.25rem);line-height:1.02;margin:clamp(72px,10vw,120px) 0 18px;}
h3{font-size:1.1875rem;}
p{font-size:1.0625rem;}
.stufe h3{font-size:1.1875rem;margin-bottom:10px;}
.stufe p{font-size:1rem;}
.demo{margin-top:32px;}
/* Nähte schliessen: Lead-Band überlappt das Titel-Band minimal, die Leiste
   braucht über dem Band keine eigene Linie. */
.seite > h1 + .lead::before{inset:-2px -100vmax 0;}
.krumen{border-bottom:0;}
/* Lange deutsche Wörter im Plakat-Titel trennen statt über den Rand laufen. */
.seite > h1{hyphens:auto;overflow-wrap:break-word;font-size:clamp(2.5rem,8vw,6.5rem);}

/* ================================================ Hell / Dunkel per Schalter */
:root[data-theme="light"]{color-scheme:light;}
:root[data-theme="dark"]{color-scheme:dark;}
.thema-knopf{
  flex:none;width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;padding:0;
  background:transparent;color:var(--tinte);border:2px solid var(--tinte);
  transition:background 200ms ease,color 200ms ease,transform 300ms cubic-bezier(.3,1.6,.5,1);
}
.thema-knopf:hover{background:var(--tinte);color:var(--papier);}
.thema-knopf:active{transform:scale(.9);}
.thema-knopf:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;}
.thema-knopf svg{width:22px;height:22px;display:block;transition:transform 560ms cubic-bezier(.2,.9,.3,1);}
.thema-knopf[data-modus="dark"] svg{transform:rotate(180deg);}
/* Kreis-Überblendung: alte Ansicht bleibt stehen, neue wächst vom Knopf aus. */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal;}
::view-transition-new(root){z-index:2;}
@media (prefers-reduced-motion: reduce){
  .thema-knopf,.thema-knopf svg{transition:none;}
}

/* ================================================ Detail-Motion (Detailseiten) */
.krumen .thema-knopf{margin-left:auto;width:38px;height:38px;}
:root{interpolate-size:allow-keywords;}
@media (prefers-reduced-motion: no-preference){
  .seite > h1{animation:plakat 900ms cubic-bezier(.2,.9,.3,1) both;}
  .seite > h1 + .lead{animation:auf 700ms 180ms cubic-bezier(.2,.9,.3,1) both;}
  @keyframes plakat{
    /* Oben -100vh: das dunkle Band (h1::before) reicht bis unter die Kopfleiste
       und darf dort nicht abgeschnitten werden. */
    from{clip-path:inset(-100vh -100vmax 100% -100vmax);transform:translateY(40px);}
    to{clip-path:inset(-100vh -100vmax -30% -100vmax);transform:none;}
  }
  @keyframes auf{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
  /* Zwischentitel, Stufen und Demos tauchen beim Scrollen auf. */
  @supports (animation-timeline: view()){
    .seite > h2,.stufe,.demo,.feld,.merk{
      animation:rein linear both;animation-timeline:view();animation-range:entry 0% entry 70%;
    }
    @keyframes rein{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:none;}}
  }
  /* Ausklapper öffnen weich statt zu springen (wo der Browser es kann). */
  .klapp::details-content{
    block-size:0;overflow:hidden;
    transition:block-size 420ms cubic-bezier(.2,.9,.3,1),content-visibility 420ms allow-discrete;
  }
  .klapp[open]::details-content{block-size:auto;}
  .klapp>summary .pfeil{transition:transform 360ms cubic-bezier(.3,1.6,.5,1),background 150ms ease,color 150ms ease;}
  /* Knöpfe und Pillen federn beim Drücken. */
  .knopf,.krumen a,.weiter a{transition:background 150ms ease,color 150ms ease,transform 260ms cubic-bezier(.3,1.6,.5,1);}
  .knopf:active,.krumen a:active,.weiter a:active{transform:scale(.94);}
}

/* Mond/Sonne: je Modus ist eines sichtbar, Wechsel mit Drehung. */
.thema-knopf svg{transform:none !important;overflow:visible;}
.thema-mond,.thema-sonne{transform-origin:12px 12px;transition:opacity 300ms ease,transform 560ms cubic-bezier(.3,1.4,.5,1);}
.thema-knopf[data-modus="light"] .thema-sonne{opacity:0;transform:rotate(-90deg) scale(.4);}
.thema-knopf[data-modus="dark"] .thema-mond{opacity:0;transform:rotate(90deg) scale(.4);}
@media (prefers-reduced-motion: reduce){ .thema-mond,.thema-sonne{transition:none;} }

/* ================================================ Blur-Verlauf der Kopfleiste
   Acht Ebenen, oben stark verwischt, nach unten auslaufend. Leichter Farbschleier
   im oberen Teil hält Schrift in der Leiste lesbar. */
.blurkante{position:fixed;top:0;left:0;right:0;height:var(--kante-hoehe,140px);z-index:19;pointer-events:none;}
.blurkante::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--kante-schleier,color-mix(in srgb,var(--papier) 72%,transparent)) 0%,color-mix(in srgb,var(--papier) 30%,transparent) 45%,transparent 100%);
}
.blurkante>div{position:absolute;inset:0;}
.blurkante>div:nth-child(1){-webkit-backdrop-filter:blur(0.5px);backdrop-filter:blur(0.5px);-webkit-mask-image:linear-gradient(to top,transparent 0.0%, #000 12.5%, #000 25.0%, transparent 37.5%);mask-image:linear-gradient(to top,transparent 0.0%, #000 12.5%, #000 25.0%, transparent 37.5%);}
.blurkante>div:nth-child(2){-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);-webkit-mask-image:linear-gradient(to top,transparent 12.5%, #000 25.0%, #000 37.5%, transparent 50.0%);mask-image:linear-gradient(to top,transparent 12.5%, #000 25.0%, #000 37.5%, transparent 50.0%);}
.blurkante>div:nth-child(3){-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-mask-image:linear-gradient(to top,transparent 25.0%, #000 37.5%, #000 50.0%, transparent 62.5%);mask-image:linear-gradient(to top,transparent 25.0%, #000 37.5%, #000 50.0%, transparent 62.5%);}
.blurkante>div:nth-child(4){-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);-webkit-mask-image:linear-gradient(to top,transparent 37.5%, #000 50.0%, #000 62.5%, transparent 75.0%);mask-image:linear-gradient(to top,transparent 37.5%, #000 50.0%, #000 62.5%, transparent 75.0%);}
.blurkante>div:nth-child(5){-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-mask-image:linear-gradient(to top,transparent 50.0%, #000 62.5%, #000 75.0%, transparent 87.5%);mask-image:linear-gradient(to top,transparent 50.0%, #000 62.5%, #000 75.0%, transparent 87.5%);}
.blurkante>div:nth-child(6){-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);-webkit-mask-image:linear-gradient(to top,transparent 62.5%, #000 75.0%, #000 87.5%, transparent 100.0%);mask-image:linear-gradient(to top,transparent 62.5%, #000 75.0%, #000 87.5%, transparent 100.0%);}
.blurkante>div:nth-child(7){-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);-webkit-mask-image:linear-gradient(to top,transparent 75.0%, #000 87.5%);mask-image:linear-gradient(to top,transparent 75.0%, #000 87.5%);}
.blurkante>div:nth-child(8){-webkit-backdrop-filter:blur(64px);backdrop-filter:blur(64px);-webkit-mask-image:linear-gradient(to top,transparent 87.5%, #000 100.0%);mask-image:linear-gradient(to top,transparent 87.5%, #000 100.0%);}
@media (prefers-reduced-transparency: reduce){
  .blurkante>div{-webkit-backdrop-filter:none;backdrop-filter:none;}
  .blurkante::after{background:linear-gradient(to bottom,var(--papier) 55%,transparent);}
}

.krumen{background:transparent;}

/* ================================================ Feinere Linien, grössere Pfeile */
.klapp,.stufe,.weiter{border-top-width:1px;border-top-color:var(--linie-stark);}
.klapp:last-of-type{border-bottom-color:var(--linie-stark);}
.klapp>summary{padding:20px 0;}
.klapp>summary .pfeil{
  width:40px;height:40px;border-width:1.5px;font-size:1.375rem;line-height:1;
  padding-bottom:2px;
}
/* Chevron als gezeichnete Linie statt Schriftzeichen – gleichmässige Strichstärke. */
.klapp>summary .pfeil{font-size:0;color:var(--tinte);padding:0;}
.klapp>summary .pfeil::before{
  content:"";width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.klapp[open]>summary .pfeil{transform:rotate(180deg);color:var(--papier);}

/* ================================================ Zeiger als Pfeil-Button */
.zeiger{
  position:fixed;left:0;top:0;z-index:50;pointer-events:none;
  width:88px;height:88px;border-radius:50%;
  background:var(--tinte);color:var(--papier);
  display:grid;place-items:center;
  transform:scale(0);will-change:transform;
}
.zeiger svg{width:30px;height:30px;display:block;}
.mit-zeiger .eintrag,.mit-zeiger .klapp>summary{cursor:none;}
/* Bei Maus-Bedienung übernimmt der Zeiger die Rolle des Kreis-Pfeils. */
.mit-zeiger .klapp>summary .pfeil{display:none;}
@media (forced-colors: active){
  .zeiger{display:none;}
  .mit-zeiger .eintrag,.mit-zeiger .klapp>summary{cursor:pointer;}
  .mit-zeiger .klapp>summary .pfeil{display:grid;}
}
/* Gezeichneter Pfeil nach links (Brotkrumen, Zurück-Link) statt Schriftzeichen. */
.krumen__pfeil,.weiter .zurueck-pfeil{
  display:inline-block;width:14px;height:14px;font-size:0;vertical-align:-2px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8H3.5M7.5 3.5 3 8l4.5 4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8H3.5M7.5 3.5 3 8l4.5 4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Gezeichneter Pfeil nach rechts für die einzelne Verweis-Karte. */
.pfeilchen{
  display:inline-block;width:16px;height:16px;font-size:0;vertical-align:-2px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ================================================ Zeiger als Pille (Morph) */
.zeiger svg{transition:opacity 160ms ease;}
.zeiger.pille{background:#fff;mix-blend-mode:difference;}
.zeiger.pille svg{opacity:0;}
.mit-zeiger .krumen a,.mit-zeiger .weiter a,.mit-zeiger .thema-knopf,.mit-zeiger .verwandt a{cursor:none;}

/* ================================================ Brotkrumen: ruhiger Text statt Pillen */
.krumen{gap:2px;font-size:.9375rem;}
.krumen a{border:0;background:transparent;padding:8px 12px;border-radius:100px;font-weight:500;color:var(--tinte);}
.krumen a:first-child{margin-left:-12px;}
.krumen a:hover{background:transparent;color:var(--tinte);}
.krumen__teiler{color:var(--linie-stark);}
.krumen__hier{font-weight:800;padding:8px 12px;}
.krumen .thema-knopf{border-width:1.5px;}
/* Ohne Maus-Zeiger (Touch) ein dezenter Hover als Ersatz. */
:root:not(.mit-zeiger) .krumen a:hover{background:var(--flaeche-tief);}
.weiter a{border:0;background:transparent;padding:8px 14px;}
.weiter a:first-child{margin-left:-14px;}
:root:not(.mit-zeiger) .weiter a:hover{background:var(--flaeche-tief);color:var(--tinte);}

/* ================================================ Verwandte Begriffe mit Vorschau */
.vw-raster{display:grid;gap:clamp(24px,3vw,32px);margin:28px 0 16px;}
@media (min-width:640px){ .vw-raster{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:900px){ .vw-raster{grid-template-columns:repeat(3,minmax(0,1fr));} }
.vw-karte{display:block;text-decoration:none;color:var(--tinte);}
.vw-kachel{position:relative;background:var(--kachel,#c2e7ff);margin-bottom:14px;transition:border-radius 420ms cubic-bezier(.2,.9,.3,1);}
.vw-karte:hover .vw-kachel{border-radius:20px;}
.vw-kachel .motiv{display:block;width:100%;height:auto;aspect-ratio:16/10;}
.vw-kachel .motiv .strich{fill:none;stroke:#10120e;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;}
.vw-kachel .motiv .strich--weich{stroke:var(--kachel-tief,#0b57d0);stroke-width:4;}
.vw-kachel .motiv .zart{fill:none;stroke:rgb(16 18 14 / .28);stroke-width:1.4;stroke-linecap:round;}
.vw-kachel .motiv .flaeche{fill:rgb(16 18 14 / .3);}
.vw-kachel .motiv .flaeche--akzent{fill:var(--kachel-tief,#0b57d0);}
.vw-kachel .motiv .schrift{display:none;}
.vw-kachel .tech-badge{position:absolute;top:12px;left:12px;width:32px;height:32px;display:grid;place-items:center;}
.vw-kachel .tech-badge svg{width:32px;height:32px;display:block;}
.vw-karte h3{font-size:1.1875rem;font-weight:800;font-stretch:112%;line-height:1.15;margin:0 0 6px;}
.vw-karte p{font-size:.9375rem;color:var(--tinte-weich);margin:0;}
.vw-karte:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;}
.mit-zeiger .vw-karte{cursor:none;}
@media (prefers-reduced-motion: reduce){ .vw-kachel{transition:none;} }

/* ================================================ Ausklapper: grössere Titel */
.klapp>summary{
  font-size:clamp(1.25rem,2.2vw,1.625rem);font-weight:800;font-stretch:112%;
  letter-spacing:-.01em;line-height:1.2;padding:24px 0;
}
/* Fokusrahmen nur bei Tastatur, nicht nach Mausklick. */
.klapp>summary:focus{outline:none;}
.klapp>summary:focus-visible{outline:2px solid var(--akzent);outline-offset:4px;border-radius:6px;}

/* ================================================ Nur Mobil / Nur Desktop (Detailseite) */
.geraet-hinweis{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 0;font-size:1rem;color:#c9c6bb;}
.geraet-hinweis span{padding:5px 14px;border-radius:100px;background:#fdfdf5;color:#10120e;font-size:.8125rem;font-weight:700;}

/* Hell/Dunkel-Wechsel: alte Ansicht bleibt stehen, neue blendet weich darüber. */
::view-transition-old(root){animation:none;}
html.thema-wechsel::view-transition-new(root){animation:thema-ein 500ms cubic-bezier(.4,0,.2,1) both;}
@keyframes thema-ein{from{opacity:0;}to{opacity:1;}}

/* ================================================ Eigene Erkenntnisse angewendet
   Was die Glossar-Einträge lehren, gilt auch für diese Seite. */
/* text-wrap: balance und pretty – Titel ausgeglichen, keine Hurenkinder. */
h1,h2,h3,.kategorie-titel{text-wrap:balance;}
p,li,.lead{text-wrap:pretty;}
/* Optischer Randausgleich – Anführungszeichen hängen in den Rand. */
p,.lead,blockquote{hanging-punctuation:first allow-end;}
/* Optical Sizing – die Schrift passt Strichstärken an die Grösse an. */
body{font-optical-sizing:auto;}
/* Fokus sichtbar, aber schön – eigener Ring nur bei Tastaturbedienung. */
a:focus{outline:none;}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--akzent);outline-offset:4px;border-radius:6px;
}
.eintrag:focus-visible,.vw-karte:focus-visible{outline-offset:8px;border-radius:12px;}
/* Forced Colors – Flächen verschwinden, darum Konturen in Systemfarben. */
@media (forced-colors: active){
  .kachel,.vw-kachel,.motiv{border:1px solid CanvasText;}
  .favorit,.geraet,.geraet-hinweis span{border:1px solid CanvasText;forced-color-adjust:none;background:Canvas;color:CanvasText;}
  .tech-badge{forced-color-adjust:none;}
  .blurkante{display:none;}
}

/* Zeilenlänge – auch die Einleitung im Titelband bleibt unter ~65 Zeichen. */
.seite > h1 + .lead{max-width:32em;}
/* Anker-Offset unter der klebenden Brotkrumen-Leiste. */
.seite h2,.seite h3,.seite > [id]{scroll-margin-top:96px;}
/* Touch-Target – Info-Symbol bleibt klein, die Trefferfläche wird 24 px. */
.info{box-sizing:content-box;border:4px solid transparent;background-clip:padding-box;margin:0 -2px;}
/* Silbentrennung in schmalen Spalten. */
.stufe p,.vw-karte p,.vw-karte h3,.merk p{hyphens:auto;}

/* ================================================ Merksatz und Felder: flach, farbig, ohne Konturen
   Merksatz in der Kachelfarbe des Eintrags statt grauem Kasten mit Streifen. */
.merk{
  border:0;border-radius:24px;padding:24px 28px;
  background:color-mix(in srgb, var(--kachel, #c2e7ff) 55%, var(--papier));
}
.merk p{color:var(--tinte);}
.merk strong{color:var(--tinte);}
:root[data-theme="dark"] .merk{background:color-mix(in srgb, var(--kachel, #c2e7ff) 14%, var(--papier));}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .merk{background:color-mix(in srgb, var(--kachel, #c2e7ff) 14%, var(--papier));}
}
.feld{border:0;box-shadow:none;background:var(--papier);border-radius:20px;}
.demo{border:0;}
@media (forced-colors: active){ .merk,.feld{border:1px solid CanvasText;} }

/* Kein seitliches Verschieben auf dem Handy: clip auf html sperrt das Seitenfenster
   nicht – hidden wird aufs Seitenfenster übertragen. Die Bänder reichen per
   Pseudo-Element über den Rand und bleiben so abgeschnitten. */
html{overflow-x:hidden;}
body{overflow-x:clip;}

/* ================================================ Kopfleiste über dem Titelband
   Das dunkle Band reicht bis unter die Kopfleiste. Solange es hinter der Leiste
   liegt (Klasse kopf-dunkel, gesetzt von thema.js), werden Leiste, Knopf und
   Blur-Schleier dunkel statt papierhell – sonst lag im hellen Modus ein heller
   Streifen über dem dunklen Band. */
.seite > h1::before{inset:-100vh -100vmax 0;}
html.kopf-dunkel .krumen,html.kopf-dunkel .krumen__hier{color:#fdfdf5;}
html.kopf-dunkel .krumen__teiler{color:#7d7a70;}
html.kopf-dunkel .krumen a{color:#fdfdf5;border-color:#fdfdf5;}
html.kopf-dunkel .krumen a:hover{background:#fdfdf5;color:#12110c;border-color:#fdfdf5;}
html.kopf-dunkel .thema-knopf{color:#fdfdf5;border-color:#fdfdf5;}
html.kopf-dunkel .thema-knopf:hover{background:#fdfdf5;color:#12110c;}
html.kopf-dunkel .blurkante::after{background:linear-gradient(to bottom,rgb(18 17 12 / .72) 0%,rgb(18 17 12 / .3) 45%,transparent 100%);}
.krumen a,.krumen__teiler,.krumen__hier,.thema-knopf{transition:color 200ms ease,border-color 200ms ease,background 200ms ease,transform 300ms cubic-bezier(.3,1.6,.5,1);}

/* ================================================ Regler
   Flach und ohne Kontur: feine Spur, gefüllter Teil in Akzentfarbe (--wert
   setzt thema.js), runder Knopf ohne Rand. */
input[type=range]{-webkit-appearance:none;appearance:none;height:24px;margin:0;background:transparent;cursor:pointer;--wert:50%;}
input[type=range]::-webkit-slider-runnable-track{height:6px;border:0;border-radius:999px;background:linear-gradient(to right,var(--akzent) var(--wert),color-mix(in srgb,var(--tinte) 12%,transparent) var(--wert));}
input[type=range]::-moz-range-track{height:6px;border:0;border-radius:999px;background:color-mix(in srgb,var(--tinte) 12%,transparent);}
input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--akzent);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-7px;border:0;border-radius:50%;background:var(--akzent);box-shadow:0 1px 4px rgb(0 0 0 / .18);transition:scale 180ms cubic-bezier(.3,1.6,.5,1);}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--akzent);box-shadow:0 1px 4px rgb(0 0 0 / .18);transition:scale 180ms cubic-bezier(.3,1.6,.5,1);}
input[type=range]:hover::-webkit-slider-thumb{scale:1.1;}
input[type=range]:active::-webkit-slider-thumb{scale:1.25;}
input[type=range]:hover::-moz-range-thumb{scale:1.1;}
input[type=range]:active::-moz-range-thumb{scale:1.25;}
input[type=range]:focus{outline:none;}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--akzent) 30%,transparent);}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--akzent) 30%,transparent);}
@media (prefers-reduced-motion: reduce){ input[type=range]::-webkit-slider-thumb,input[type=range]::-moz-range-thumb{transition:none;} }

/* ================================================ Brotkrumen: Chevron statt Schrägstrich */
.krumen__teiler{
  display:inline-block;width:12px;height:12px;font-size:0;flex:none;
  background:var(--linie-stark);opacity:1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5 8 6l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5 8 6l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (forced-colors: active){ .krumen__teiler{background:CanvasText;} }

/* Chevron der Ausklapper bleibt auch mit Maus-Zeiger sichtbar. */
.mit-zeiger .klapp>summary .pfeil{display:grid;}

/* ================================================ Navigation (Menü-Knopf + Übersicht) */
.nav-knopf{
  flex:none;width:42px;height:42px;border-radius:50%;cursor:pointer;padding:0;
  display:grid;place-items:center;background:transparent;color:var(--tinte);border:2px solid var(--tinte);
  transition:background 200ms ease,color 200ms ease,transform 300ms cubic-bezier(.3,1.6,.5,1);
}
.nav-knopf:hover,.nav-knopf[aria-expanded="true"]{background:var(--tinte);color:var(--papier);}
.nav-knopf:active{transform:scale(.9);}
.nav-knopf svg{width:18px;height:18px;display:block;}
.krumen .nav-knopf{margin-left:auto;width:38px;height:38px;border-width:1.5px;}
.krumen .nav-knopf + .thema-knopf{margin-left:8px;}
.kopf-schalter{display:flex;gap:8px;}
.kopf-schalter .nav-knopf{background:var(--papier);color:var(--tinte);border-color:var(--papier);}
.kopf-schalter .nav-knopf:hover{background:var(--tinte);color:var(--papier);border-color:var(--tinte);}
html.nav-offen{overflow:hidden;}
.nav-overlay{
  position:fixed;inset:0;z-index:60;overflow:auto;overscroll-behavior:contain;
  background:color-mix(in srgb, var(--papier) 86%, transparent);
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  opacity:0;transition:opacity 220ms ease;
}
.nav-overlay.an{opacity:1;}
.nav-rahmen{max-width:1280px;margin:0 auto;padding:clamp(20px,3vw,32px) clamp(20px,4vw,40px) 80px;
  transform:translateY(14px) scale(.985);transition:transform 380ms cubic-bezier(.2,.9,.3,1);}
.nav-overlay.an .nav-rahmen{transform:none;}
.nav-kopf{display:flex;align-items:center;gap:14px;position:sticky;top:0;padding:8px 0 14px;z-index:2;
  background:linear-gradient(var(--papier) 70%, transparent);}
.nav-start{font-weight:800;font-stretch:120%;font-size:1.25rem;text-decoration:none;color:var(--tinte);white-space:nowrap;}
.nav-suche{
  flex:1;min-width:0;font:inherit;font-size:1.125rem;padding:14px 22px;border-radius:100px;
  border:0;background:var(--flaeche-tief);color:var(--tinte);
}
.nav-suche:focus{outline:none;box-shadow:0 0 0 3px var(--akzent);}
.nav-zu{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--tinte);color:var(--papier);display:grid;place-items:center;cursor:pointer;}
.nav-zu svg{width:22px;height:22px;}
.nav-chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 22px;scrollbar-width:none;}
.nav-chips::-webkit-scrollbar{display:none;}
.nav-chip{
  flex:none;font:inherit;font-size:.875rem;font-weight:700;padding:9px 18px;border-radius:100px;cursor:pointer;
  border:0;color:#10120e;background:var(--chip,#e6e4d8);
  transition:transform 260ms cubic-bezier(.3,1.6,.5,1),box-shadow 160ms ease;
}
.nav-chip[data-kat=""]{--chip:var(--flaeche-tief);color:var(--tinte);}
.nav-chip:active{transform:scale(.94);}
.nav-chip.aktiv{box-shadow:0 0 0 2px var(--papier),0 0 0 4px var(--tinte);}
.nav-gruppe{margin:0 0 34px;}
.nav-gruppe-titel{
  display:inline-flex;align-items:baseline;gap:10px;margin:0 0 14px;padding:8px 18px;border-radius:100px;
  font-size:clamp(1.125rem,2vw,1.375rem);font-weight:800;font-stretch:115%;color:#10120e;background:var(--chip,#e6e4d8);
}
.nav-zahl{font-family:var(--font-mono);font-size:.8125rem;font-weight:400;opacity:.7;}
.nav-raster{display:grid;gap:4px 24px;}
@media (min-width:720px){ .nav-raster{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:1100px){ .nav-raster{grid-template-columns:repeat(3,minmax(0,1fr));} }
.nav-eintrag{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:14px;text-decoration:none;color:var(--tinte);
  transition:background 160ms ease;}
.nav-eintrag:hover,.nav-eintrag:focus-visible{background:var(--flaeche-tief);}
.nav-eintrag[aria-current="page"]{background:var(--flaeche-tief);}
.nav-punkt{flex:none;width:14px;height:14px;border-radius:5px;margin-top:4px;}
.nav-text{min-width:0;display:flex;flex-direction:column;}
.nav-titel{font-weight:800;font-size:1rem;line-height:1.3;}
.nav-stern{margin-left:6px;color:#b98900;font-size:.8125rem;}
.nav-claim{font-size:.8125rem;color:var(--tinte-weich);line-height:1.4;}
.nav-geraet{margin-left:auto;flex:none;font-size:.6875rem;font-weight:700;padding:3px 9px;border-radius:100px;background:var(--tinte);color:var(--papier);}
.nav-leer{color:var(--tinte-weich);font-size:1.125rem;}
@media (prefers-reduced-motion: reduce){ .nav-overlay,.nav-rahmen{transition:none;transform:none;} }
@media (forced-colors: active){ .nav-overlay{background:Canvas;} .nav-chip,.nav-gruppe-titel{border:1px solid CanvasText;} }

.nav-stil{flex:none;font-size:.875rem;font-weight:700;text-decoration:none;color:var(--tinte);padding:10px 16px;border-radius:100px;background:var(--flaeche-tief);}
.nav-stil:hover{background:var(--tinte);color:var(--papier);}
@media (max-width:560px){ .nav-start,.nav-stil{display:none;} }

/* ================================================ Akzent: kräftiges Pastell-Orange */
:root{--akzent:#ff9a4d;--akzent-hell:#ffe0c4;--akzent-text:#b3540f;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--akzent:#ffae6b;--akzent-hell:#4a2b12;--akzent-text:#ffc596;} }
:root[data-theme="dark"]{--akzent:#ffae6b;--akzent-hell:#4a2b12;--akzent-text:#ffc596;}
.kann--ja{color:var(--akzent-text);border-color:var(--akzent);}

/* ================================================ Plakative Bedienelemente in allen Demos */
.knopf{
  font-size:1rem;font-weight:700;padding:11px 22px;min-height:46px;border-radius:100px;
  border:2px solid var(--tinte);background:transparent;color:var(--tinte);
}
.knopf:hover{background:var(--flaeche-tief);}
.knopf.aktiv,.knopf[aria-pressed="true"]{background:var(--akzent);border-color:var(--akzent);color:#10120e;}
.demo label,.regler label{font-size:1rem;font-weight:800;color:var(--tinte);}
.regler{font-size:.9375rem;gap:10px;}
.demo__hinweis{font-size:1.0625rem;color:var(--tinte);}
.messwert{font-size:.9375rem;color:var(--tinte);}
.messwert b,.messwert strong{font-size:1.125rem;}
/* Grosse Regler: dicke Spur, grosser Griff in Akzentfarbe. */
.seite input[type="range"]{
  -webkit-appearance:none;appearance:none;width:min(340px,100%);height:32px;background:transparent;cursor:pointer;margin:0;
}
.seite input[type="range"]::-webkit-slider-runnable-track{height:10px;border-radius:100px;background:linear-gradient(to right,var(--akzent) var(--wert,50%),var(--flaeche-tief) var(--wert,50%));}
.seite input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:30px;height:30px;margin-top:-10px;border-radius:50%;
  background:var(--akzent);border:4px solid var(--papier);box-shadow:0 2px 8px rgb(0 0 0 / .22);
  transition:transform 200ms cubic-bezier(.3,1.6,.5,1);
}
.seite input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.15);}
.seite input[type="range"]::-moz-range-track{height:10px;border-radius:100px;background:var(--flaeche-tief);}
.seite input[type="range"]::-moz-range-progress{height:10px;border-radius:100px;background:var(--akzent);}
.seite input[type="range"]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--akzent);border:4px solid var(--papier);box-shadow:0 2px 8px rgb(0 0 0 / .22);}
.seite input[type="range"]:focus-visible{outline:2px solid var(--akzent);outline-offset:4px;border-radius:100px;}
.seite select{font:inherit;font-size:1rem;font-weight:700;padding:10px 16px;border-radius:14px;border:2px solid var(--tinte);background:var(--papier);color:var(--tinte);}
.seite input[type="checkbox"],.seite input[type="radio"]{accent-color:var(--akzent);width:20px;height:20px;}
@media (prefers-reduced-motion: reduce){ .seite input[type="range"]::-webkit-slider-thumb{transition:none;} }
/* Regler brauchen Länge, sonst lässt sich nicht fein einstellen. */
.regler{flex:1 1 220px;min-width:min(220px,100%);}
.regler input[type="range"]{width:100%;}

/* ================================================ Ausklapper-Pfeil: zentriert, gefüllt, kräftig */
.klapp>summary .pfeil{
  display:block;position:relative;flex:none;width:44px;height:44px;padding:0;
  border:0;border-radius:50%;background:var(--flaeche-tief);color:var(--tinte);
  font-size:0;line-height:0;overflow:hidden;
  transition:background 200ms ease,color 200ms ease,transform 360ms cubic-bezier(.3,1.6,.5,1);
}
.klapp>summary .pfeil::before{
  content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.klapp>summary:hover .pfeil{background:var(--tinte);color:var(--papier);}
.klapp[open]>summary .pfeil{background:var(--akzent);color:#10120e;transform:rotate(180deg);}
@media (forced-colors: active){ .klapp>summary .pfeil{border:1px solid CanvasText;} .klapp>summary .pfeil::before{background:CanvasText;} }

/* ================================================ Kopfleiste (schwebende Insel, auffällig) */
.nav-leiste{position:fixed;top:0;left:0;right:0;z-index:45;padding:12px clamp(12px,3vw,24px);pointer-events:none;}
.nav-insel{
  pointer-events:auto;max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:12px;
  padding:8px 8px 8px 22px;border-radius:100px;
  background:var(--tinte);color:var(--papier);
  box-shadow:0 10px 30px rgb(0 0 0 / .22),0 2px 6px rgb(0 0 0 / .12);
}
.nav-marke{flex:none;font-weight:800;font-stretch:120%;font-size:1.0625rem;letter-spacing:-.01em;text-decoration:none;color:var(--papier);}
.nav-leiste-chips{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);}
.nav-leiste-chips::-webkit-scrollbar{display:none;}
.nav-leiste-chip{
  flex:none;font:inherit;font-size:.8125rem;font-weight:800;padding:8px 14px;border-radius:100px;border:0;cursor:pointer;
  background:var(--chip);color:#10120e;transition:transform 260ms cubic-bezier(.3,1.6,.5,1),filter 160ms ease;
}
.nav-leiste-chip:hover{filter:brightness(1.06);transform:translateY(-1px);}
.nav-leiste-chip:active{transform:scale(.94);}
.nav-insel .nav-knopf{
  flex:none;width:auto;height:44px;padding:0 18px 0 14px;gap:8px;display:inline-flex;align-items:center;
  border:0;border-radius:100px;background:var(--akzent);color:#10120e;font:inherit;font-size:.9375rem;font-weight:800;
}
.nav-insel .nav-knopf:hover{background:var(--akzent);filter:brightness(1.08);color:#10120e;}
.nav-insel .nav-knopf svg{width:20px;height:20px;}
@media (max-width:640px){ .nav-marke{font-size:.9375rem;} .nav-knopf-text{display:none;} .nav-insel .nav-knopf{padding:0 12px;} }
/* Platz für die Insel schaffen, Brotkrumen kleben nicht mehr darunter. */
.mit-leiste .krumen{position:relative;top:auto;margin-top:84px;}
.mit-leiste .blurkante{height:110px;}
/* Hell/Dunkel sitzt jetzt im Kopf der Übersicht. */
.nav-kopf .thema-knopf{flex:none;width:48px;height:48px;border:0;background:var(--flaeche-tief);color:var(--tinte);}
.nav-kopf .thema-knopf:hover{background:var(--tinte);color:var(--papier);}
@media (forced-colors: active){ .nav-insel{border:1px solid CanvasText;} }

/* ================================================ Kopfleiste: weisses Liquid Glass */
/* Brechung (SVG-Filter) und Lichtkante (--nav-glanz) berechnet nav.js aus derselben
   Pillenform wie die Glossar-Demo «Liquid Glass». Die Insel bleibt deshalb eine
   echte Kapsel (corner-shape: round), sonst passen Karte und Form nicht zusammen. */
.nav-insel{
  position:relative;isolation:isolate;corner-shape:round;
  background:rgb(255 255 255 / .42);color:#10120e;
  -webkit-backdrop-filter:blur(12px) saturate(190%);backdrop-filter:blur(12px) saturate(190%);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / .9),
    inset 0 -8px 16px -10px rgb(0 0 0 / .10),
    0 16px 36px rgb(0 0 0 / .14),
    0 2px 6px rgb(0 0 0 / .07);
}
/* Weicher Glanz auf der oberen Hälfte der gewölbten Fläche. */
.nav-insel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;corner-shape:round;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgb(255 255 255 / .5) 0%,rgb(255 255 255 / .1) 42%,rgb(255 255 255 / 0) 62%);
}
/* Gezeichnete Lichtkante: hell oben links, schwächer unten rechts. */
.nav-insel::after{
  content:"";position:absolute;inset:0;border-radius:inherit;corner-shape:round;pointer-events:none;z-index:2;
  background:var(--nav-glanz, none) center/100% 100% no-repeat;
}
html.glas-brechung .nav-insel{
  background:rgb(255 255 255 / .34);
  -webkit-backdrop-filter:url(#nav-glas) blur(2.5px) saturate(190%) brightness(1.05);
          backdrop-filter:url(#nav-glas) blur(2.5px) saturate(190%) brightness(1.05);
}
:root[data-theme="dark"] .nav-insel, :root[data-theme="dark"].glas-brechung .nav-insel{background:rgb(255 255 255 / .88);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .nav-insel, :root:not([data-theme="light"]).glas-brechung .nav-insel{background:rgb(255 255 255 / .88);} }
.nav-marke{color:#10120e;}
@media (prefers-reduced-transparency: reduce){ .nav-insel, html.glas-brechung .nav-insel{background:#fdfdf5;backdrop-filter:none;-webkit-backdrop-filter:none;} .nav-insel::after{display:none;} }
/* Über dunklem Kopfbereich (Klasse kopf-dunkel von thema.js) bleibt die Insel klar weiss. */
html.kopf-dunkel .nav-insel, html.kopf-dunkel.glas-brechung .nav-insel{background:rgb(255 255 255 / .86);}
/* Blur-Verlauf etwas höher. */
.blurkante{height:180px;}
.mit-leiste .blurkante{height:170px;}

/* ================================================ Leichte Squircles statt Kreisbogen-Ecken
   corner-shape (Chromium 139+): superellipse(1) = Kreisbogen, 2 = Squircle.
   1.5 ist bewusst leicht. Andere Browser zeigen normale runde Ecken.
   Pillen und Kreise markiert thema.js mit .ecke-rund – sie bleiben echte Kapseln. */
:where(*, *::before, *::after){corner-shape:superellipse(1.5);}
.ecke-rund, .ecke-rund::before, .ecke-rund::after{corner-shape:round;}
/* Liquid-Glass-Linsen: Brechungskarte ist für die echte Kapsel berechnet. */
[class^="lg-"], [class*=" lg-"]{corner-shape:round;}

/* ================================================ Info-Symbol: grösser, gezeichnetes i
   Das Schriftzeichen «i» bleibt für Screenreader im Text, sichtbar ist ein gezeichnetes
   i (Punkt + abgerundeter Strich). Bei Maus übernimmt der Zeiger (thema.js, Modus info). */
.info{
  width:22px;height:22px;margin:0 -1px;vertical-align:-6px;
  color:transparent;font-size:12px;cursor:pointer;
  --info-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='2.7' r='1.45' fill='%23b3540f'/%3E%3Crect x='4.85' y='5' width='2.3' height='5.8' rx='1.15' fill='%23b3540f'/%3E%3C/svg%3E");
  background:var(--akzent-hell) var(--info-i) center/13px 13px no-repeat;
  background-clip:padding-box;
  transition:background-color 160ms ease,transform 280ms cubic-bezier(.3,1.6,.5,1);
}
.info:hover,.info:focus-visible{
  --info-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='2.7' r='1.45' fill='%2310120e'/%3E%3Crect x='4.85' y='5' width='2.3' height='5.8' rx='1.15' fill='%2310120e'/%3E%3C/svg%3E");
  background-color:var(--akzent);color:transparent;
}
.info:active{transform:scale(.9);}
.info::after{font-size:.9375rem;max-width:min(300px,78vw);padding:12px 15px;border-radius:14px;}
:root[data-theme="dark"] .info:not(:hover):not(:focus-visible){--info-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='2.7' r='1.45' fill='%23ffc596'/%3E%3Crect x='4.85' y='5' width='2.3' height='5.8' rx='1.15' fill='%23ffc596'/%3E%3C/svg%3E");}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .info:not(:hover):not(:focus-visible){--info-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='2.7' r='1.45' fill='%23ffc596'/%3E%3Crect x='4.85' y='5' width='2.3' height='5.8' rx='1.15' fill='%23ffc596'/%3E%3C/svg%3E");} }
.seite > h1 + .lead .info:not(:hover):not(:focus-visible){background-color:#3a362c;--info-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='2.7' r='1.45' fill='%23fdfdf5'/%3E%3Crect x='4.85' y='5' width='2.3' height='5.8' rx='1.15' fill='%23fdfdf5'/%3E%3C/svg%3E");}
.mit-zeiger .info{cursor:none;}
.mit-zeiger .info:hover{background-color:var(--akzent-hell);--info-i:none;}
:root[data-theme="dark"].mit-zeiger .info:hover{background-color:#4a2b12;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]).mit-zeiger .info:hover{background-color:#4a2b12;} }
/* Zeiger als Info-Button */
.zeiger.z-info{background:var(--akzent);color:#10120e;box-shadow:0 6px 18px rgb(0 0 0 / .18);}
@media (forced-colors: active){ .info{background:Canvas;color:CanvasText;border:1px solid CanvasText;} .mit-zeiger .info{cursor:pointer;} }

/* Breite Tabellen in Ausklappern: seitlich wischen statt abschneiden (.klapp hat overflow:hidden). */
.klapp__inhalt{overflow-x:auto;}

/* Deaktivierte Knöpfe sichtbar abgesetzt. */
.knopf:disabled,.knopf[aria-disabled="true"]{opacity:.42;cursor:not-allowed;filter:saturate(.4);}
/* Regler: Mindestbreite statt flex-basis – in einer Spalte (flex-direction:column) würde die
   Basis sonst zur Höhe und liesse rund 200 px Leerraum. */
.regler{flex:1 1 auto;min-width:min(220px,100%);}
/* Klebende Elemente in Seiten: unter der schwebenden Kopfleiste (rund 72 px hoch) ansetzen. */
:root{--kopf-frei:84px;}

/* Messwerte mindestens 1rem. */
.messwert{font-size:1rem;}

/* Demos nur einblenden, nicht verschieben – sonst rutschen Ziehpunkte beim Einscrollen
   unter dem Zeiger weg. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .seite .demo{animation-name:rein-blende;}
    @keyframes rein-blende{from{opacity:0;}to{opacity:1;}}
  }
}

/* Mit Maus-Zeiger (thema.js) übernimmt allein der invertierende Zeiger den Hover.
   Ein eigener heller Hover-Hintergrund der Brotkrumen im dunklen Titelband ergab
   sonst beim Hinein- und Hinausfahren einen weissen Blitzer. */
html.kopf-dunkel.mit-zeiger .krumen a:hover{background:transparent;color:#fdfdf5;border-color:transparent;}
html.kopf-dunkel.mit-zeiger .thema-knopf:hover{background:transparent;color:#fdfdf5;}

/* hidden gilt immer – auch wenn ein Seitenstil display:flex/grid setzt. */
[hidden]{display:none !important;}
/* Kontrastmodus: gedrückte Knöpfe sichtbar unterscheiden. */
@media (forced-colors: active){ .knopf.aktiv,.knopf[aria-pressed="true"]{background:Highlight;color:HighlightText;forced-color-adjust:none;} }

/* Mindestgrösse 1rem für Beschriftungen und Messwerte in Demos. */
.feld__titel,.feld__zeile,.regler{font-size:1rem;}

/* Übersicht (Overlay): Kopfzeilen-Verlauf über die volle Breite statt harter Kante am
   Inhaltsrand; die Chip-Zeile bekommt seitlich Luft, damit der Ring des aktiven Chips
   nicht abgeschnitten wird. */
.nav-overlay{overflow-x:hidden;}
.nav-kopf{background:none;isolation:isolate;}
.nav-kopf::before{content:"";position:absolute;top:calc(-1 * clamp(20px,3vw,32px));bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;
  background:linear-gradient(var(--papier) 72%, color-mix(in srgb, var(--papier) 0%, transparent));pointer-events:none;}
.nav-chips{padding:6px 8px 22px;margin:0 -8px;}
/* Das Overlay deckt auch die reservierte Scrollbar-Rinne (scrollbar-gutter:stable) ab. */
.nav-overlay{width:100vw;}
/* Chip-Zeile läuft rechts weich aus statt hart abzubrechen (Hinweis: seitlich wischbar). */
.nav-chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);}

/* Titelband steht still, nur die Schrift fliegt herein. Das Band hängt an h1::before und
   .lead::before; beide laufen die Gegenbewegung ihres Elements mit (gleiche Dauer, gleiche
   Kurve), dadurch heben sich die Verschiebungen exakt auf. Statt Deckkraft (die das Band
   mit ausblenden würde) blendet die Schriftfarbe ein. */
@media (prefers-reduced-motion: no-preference){
  .seite > h1{animation:plakat-schrift 900ms cubic-bezier(.2,.9,.3,1) both;}
  .seite > h1::before{animation:plakat-band 900ms cubic-bezier(.2,.9,.3,1) both;}
  .seite > h1 + .lead{animation:lead-schrift 700ms 180ms cubic-bezier(.2,.9,.3,1) both;}
  .seite > h1 + .lead::before{animation:lead-band 700ms 180ms cubic-bezier(.2,.9,.3,1) both;}
  @keyframes plakat-schrift{from{color:transparent;transform:translateY(40px);}to{transform:none;}}
  @keyframes plakat-band{from{transform:translateY(-40px);}to{transform:none;}}
  @keyframes lead-schrift{from{color:transparent;transform:translateY(20px);}to{transform:none;}}
  @keyframes lead-band{from{transform:translateY(-20px);}to{transform:none;}}
}

/* Navigation überall nur als runder Menü-Knopf oben rechts (weisses Liquid Glass).
   Marke und Themen-Pillen entfallen; Kategorien, Suche und Hell/Dunkel liegen im Menü. */
/* Gleicher Rahmen wie das geöffnete Menü (.nav-rahmen: max. 1280 px, gleiche Innenabstände),
   damit der Menü-Knopf genau dort sitzt, wo das X erscheint. Mitte des X: Rahmen oben +
   8 px Kopfabstand + halbe Zeilenhöhe (Suchfeld 56 px); Insel 64 px hoch bzw. 60 px am Handy. */
.nav-leiste{display:flex;justify-content:flex-end;left:0;right:auto;width:100vw;
  padding:calc(clamp(20px,3vw,32px) + 8px) calc(max(0px, (100vw - 1280px) / 2) + clamp(20px,4vw,40px) - 4px) 0 0;}
@media (max-width:640px){ .nav-leiste{padding:calc(clamp(20px,3vw,32px) + 10px) calc(clamp(20px,4vw,40px) - 2px) 0 0;} }
.nav-insel{margin:0;padding:6px;gap:0;width:auto;max-width:none;}
.nav-marke,.nav-leiste-chips,.nav-insel .nav-knopf-text,.nav-insel .nav-knopf .nav-icon-suche{display:none;}
.nav-insel .nav-knopf{width:52px;height:52px;padding:0;justify-content:center;}
.nav-insel .nav-knopf svg{width:24px;height:24px;}
.nav-insel .nav-knopf .nav-icon-menue{display:block;}
@media (max-width:640px){ .nav-insel .nav-knopf{width:48px;height:48px;} }

/* Mit Maus-Zeiger übernimmt allein der invertierende Zeiger den Hover – auch bei
   «Weiter»-Links und kleinen Verwandt-Links. Sonst: dunkler Hover-Hintergrund plus
   Invertierung = heller Kern mit dunklem Rand. */
.mit-zeiger .weiter a:hover,.mit-zeiger .verwandt a:not(.vw-karte):hover,.mit-zeiger .krumen a:hover{background:transparent;border-color:transparent;color:var(--tinte);}
html.kopf-dunkel.mit-zeiger .krumen a:hover{color:#fdfdf5;}

/* Klick auf leere Fläche (thema.js): Ring in Akzentfarbe, öffnet sich weich und verblasst. */
.klick-welle{position:fixed;z-index:44;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;pointer-events:none;
  border:2px solid var(--akzent);background:color-mix(in srgb,var(--akzent) 18%,transparent);
  animation:klick-welle 560ms cubic-bezier(.2,.9,.3,1) forwards;}
@keyframes klick-welle{from{transform:scale(.2);opacity:.9;}to{transform:scale(1);opacity:0;}}

/* Menü: Kategorien brechen um (statt seitlich abgeschnitten), mit Symbol. */
.nav-chips{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none;gap:10px;padding:6px 0 0;margin:0 0 clamp(36px,5vw,56px);}
.nav-chip{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;padding:10px 18px 10px 14px;}
.nav-chip-symbol{width:18px;height:18px;flex:none;}
@media (max-width:640px){ .nav-chips{gap:8px;} .nav-chip{font-size:.875rem;padding:8px 14px 8px 11px;gap:6px;} .nav-chip-symbol{width:16px;height:16px;} }
.nav-chip-kurz{display:none;}
@media (max-width:640px){ .nav-chip-kurz{display:inline;} .nav-chip-kurz + .nav-chip-lang,.nav-chip-lang:has(+ .nav-chip-kurz){display:none;} }

/* Burger und X sind ein Element: Der Menü-Knopf bleibt über dem geöffneten Menü (an der
   Stelle des X), die drei Striche morphen zum X, die Fläche wechselt auf Tinte. */
html.nav-offen .nav-leiste{z-index:61;}
.nav-zu{visibility:hidden;}
.nav-insel .nav-knopf{transition:background-color 260ms ease,color 260ms ease,transform 260ms cubic-bezier(.3,1.6,.5,1);}
html.nav-offen .nav-insel .nav-knopf,html.nav-offen .nav-insel .nav-knopf:hover{background:var(--tinte);color:var(--papier);}
.nav-icon-menue path{transform-box:fill-box;transform-origin:center;transition:transform 420ms cubic-bezier(.3,1.35,.5,1),opacity 180ms ease;}
html.nav-offen .nav-icon-menue .l1{transform:translateY(5px) rotate(45deg);}
html.nav-offen .nav-icon-menue .l2{transform:scaleX(0);opacity:0;}
html.nav-offen .nav-icon-menue .l3{transform:translateY(-5px) rotate(-45deg);}
@media (prefers-reduced-motion: reduce){ .nav-icon-menue path,.nav-insel .nav-knopf{transition:none;} }

/* Menü-Knopf ohne Glas-Insel: nur der Kreis mit Schatten, grösseres Symbol. */
.nav-insel,html.glas-brechung .nav-insel,:root[data-theme="dark"] .nav-insel,html.kopf-dunkel .nav-insel{
  padding:0;background:none !important;box-shadow:none;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
.nav-insel::before,.nav-insel::after{display:none;}
/* Flach wie die übrigen runden Knöpfe der Seite (X, Hell/Dunkel, Ausklapper): 48 px, kein Schatten. */
.nav-insel .nav-knopf,.nav-insel .nav-knopf:hover{width:56px;height:56px;box-shadow:none;filter:none;}
.nav-insel .nav-knopf svg{width:28px;height:28px;}
@media (max-width:640px){ .nav-insel .nav-knopf,.nav-insel .nav-knopf:hover{width:52px;height:52px;} }
/* Hover wie bei den übrigen runden Knöpfen (Ausklapper): Fläche Tinte, Symbol hell.
   Offen (X) umgekehrt: Fläche Akzent. Der Maus-Zeiger bleibt hier normal. */
.mit-zeiger .nav-insel .nav-knopf{cursor:pointer;}
.nav-insel .nav-knopf:hover{background:var(--tinte);color:var(--papier);}
html.nav-offen .nav-insel .nav-knopf:hover{background:var(--akzent);color:#10120e;}
.nav-insel .nav-knopf:active{transform:scale(.93);}
/* Kategorien im Menü: Hover dunkelt die Fläche leicht ab, Druck federt. */
.nav-chip{transition:background-color 160ms ease,transform 260ms cubic-bezier(.3,1.6,.5,1),box-shadow 160ms ease;}
.nav-chip:hover{background:color-mix(in srgb,var(--chip,#e6e4d8) 80%,#10120e);}
.nav-chip[data-kat=""]:hover{background:color-mix(in srgb,var(--flaeche-tief) 80%,var(--tinte));}

/* Hover über dunklem Kopfbereich (Hero, Titelband): hell statt Tinte, sonst verschwindet der Knopf. */
html.kopf-dunkel:not(.nav-offen) .nav-insel .nav-knopf:hover{background:#fdfdf5;color:#10120e;}

/* Squircle-Ecken nicht in Demos: Chrome ignoriert in einem abgerundeten Kasten mit
   overflow:hidden und corner-shape:superellipse die Masken von backdrop-filter-Ebenen
   darin (harte Kante statt Verlauf, belegt am Eintrag «Progressiver Blur-Verlauf»). */
.demo,.demo :where(*),.demo :where(*)::before,.demo :where(*)::after{corner-shape:round;}