:root {
  
  --grund: var(--color-canvas);
  --flaeche: var(--color-surface);
  --text: var(--color-ink);
  --text-leise: var(--color-ink-muted);
  --akzent: var(--color-primary);
  --auf-akzent: var(--color-on-primary);
  --linie: var(--color-rule);
  --feldrand: var(--color-line);
  --fokus: var(--color-focus);

  
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ruhig: cubic-bezier(0.45, 0.05, 0.2, 1);
  --ease-wechsel: cubic-bezier(0.65, 0, 0.35, 1);
  --dauer-kurz: var(--motion-duration-fast);

  
  --inhalt-max: 87.5rem;
  --lesemass: 65ch;
  --rand: clamp(1rem, 0.5rem + 2.5vw, 2.75rem);
  --abstand-sektion: clamp(4.5rem, 2.5rem + 7vw, 9.5rem);
  --kopf-hoehe: 4rem;

  
  --fs-marke: clamp(4rem, 1.6rem + 10.5vw, 10.5rem);
  --fs-kategorie: clamp(1.3rem, 0.95rem + 1.7vw, 2.45rem);
  --fs-wort: clamp(3.4rem, 1.4rem + 8vw, 8.5rem);
  --fs-gross: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --fs-zahl: clamp(4.5rem, 2.5rem + 8vw, 9rem);

  
  --z-grund: 0;
  --z-buehne: 1;
  --z-inhalt: 2;
  --z-blase: 60;
  --z-kopf: 100;
  --z-sprung: 300;
  --z-korn: 400;

  
  --schleier-nacht: rgba(18, 16, 13, 0.72);
  --licht-warm: rgba(232, 200, 104, 0.42);
  --licht-weich: rgba(245, 230, 184, 0.55);
  --schatten-text-nacht: 0 1px 24px rgba(18, 16, 13, 0.9);
  
  --nacht-kern: #2a2015;
  --nacht-glut: #241b11;
  --rahmen-hell: #2c2a26;
  --rahmen-dunkel: #121110;
  --morgen-hell: #fffaf0;
  --gold-hauch: rgba(212, 168, 67, 0.25);
  --gold-kante: rgba(212, 168, 67, 0.45);
  --glanz-warm: rgba(232, 200, 104, 0.35);
  --marke-gewicht: 700;
  --marke-laufweite: -0.045em;
}


*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-canvas);
  color: var(--color-ink);
  scroll-padding-top: calc(var(--kopf-hoehe) + var(--space-md));
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html.mit-lenis { scroll-behavior: auto; }
body {
  margin: 0;
  font-family: var(--font-body-family);
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight);
  line-height: var(--font-body-line-height);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  overflow-x: clip;
}

:where(p, li, dd, dt, h1, h2, h3, h4, figcaption, blockquote, label) { overflow-wrap: break-word; }
:where(p, li, dd, figcaption) { hyphens: auto; }
:where(.claim, .fuss-claim, .station-claim, .tag-claim, .nach-text, .auftakt-litanei, .auftakt-text, .hero-unter, .seitenkopf-einleitung) { hyphens: manual; }
:where(p, li, dd, figcaption) { hyphenate-limit-chars: 10 4 4; }
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-heading-family); font-weight: var(--font-heading-weight); line-height: var(--font-heading-line-height); letter-spacing: var(--font-heading-letter-spacing); text-wrap: balance; }
h2 { font-size: var(--font-heading-size); }
h3 { font-size: var(--fs-gross); line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0 0 var(--space-md); text-wrap: pretty; }
p:last-child { margin-block-end: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--comp-link-text-color); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@media (hover: hover) {
  a:hover { color: var(--comp-link-hover-text-color); text-decoration-thickness: 2px; }
}
a:active { color: var(--comp-link-active-text-color); }
:focus-visible {
  outline: var(--comp-link-focus-outline-width) solid var(--comp-link-focus-outline-color);
  outline-offset: var(--comp-link-focus-outline-offset);
  border-radius: 4px;
}
strong { font-weight: 680; }
em { font-style: italic; }
table { border-collapse: collapse; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.klein { font-size: var(--font-small-size); color: var(--color-ink-muted); }
.claim, .litanei {
  font-family: var(--font-claim-family);
  font-style: italic;
  font-weight: var(--font-claim-weight);
  letter-spacing: var(--font-claim-letter-spacing);
}
.litanei { font-size: var(--font-claim-size); line-height: var(--font-claim-line-height); color: var(--color-gold-text); }
::selection { background: var(--color-gold-hell); color: var(--color-ink); }


.sprunglink {
  position: absolute; inset-inline-start: var(--space-md); inset-block-start: var(--space-sm);
  z-index: var(--z-sprung);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary); color: var(--color-on-primary);
  border-radius: var(--radius-pill);
  transform: translateY(-160%);
}
.sprunglink:focus { transform: translateY(0); color: var(--color-on-primary); }


.korn {
  position: fixed; inset: 0; z-index: var(--z-korn); pointer-events: none;
  background-image: url("/assets/img/korn.371107f6.png");
  background-size: 128px 128px;
  opacity: 0.05;
}
@media (min-width: 1024px) {
  .korn { opacity: 0.06; }
}


.knopf-primaer, .knopf-ruhig, .knopf-nacht {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: var(--comp-button-primary-height);
  padding: var(--comp-button-primary-padding);
  border-radius: var(--comp-button-primary-rounded);
  font-family: var(--comp-button-primary-font-family);
  font-size: var(--comp-button-primary-font-size);
  font-weight: var(--comp-button-primary-font-weight);
  line-height: var(--comp-button-primary-line-height);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--dauer-kurz) var(--ease-out), background-color var(--dauer-kurz) var(--ease-out), border-color var(--dauer-kurz) var(--ease-out);
}
.knopf-primaer { background: var(--comp-button-primary-background-color); color: var(--comp-button-primary-text-color); }
.knopf-primaer:focus-visible { outline: var(--comp-button-primary-focus-outline-width) solid var(--comp-button-primary-focus-outline-color); outline-offset: var(--comp-button-primary-focus-outline-offset); border-radius: var(--radius-pill); }
.knopf-ruhig { background: var(--comp-button-ruhig-background-color); color: var(--comp-button-ruhig-text-color); border-color: var(--comp-button-ruhig-border-color); }
.knopf-ruhig:focus-visible { outline: var(--comp-button-ruhig-focus-outline-width) solid var(--comp-button-ruhig-focus-outline-color); outline-offset: var(--comp-button-ruhig-focus-outline-offset); border-radius: var(--radius-pill); }
.knopf-nacht { background: var(--comp-button-nacht-background-color); color: var(--comp-button-nacht-text-color); }
@media (hover: hover) {
  .knopf-primaer:hover { background: var(--comp-button-primary-hover-background-color); color: var(--comp-button-primary-text-color); }
  .knopf-ruhig:hover { border-color: var(--comp-button-ruhig-hover-border-color); color: var(--comp-button-ruhig-text-color); }
  .knopf-nacht:hover { background: var(--comp-button-nacht-hover-background-color); color: var(--comp-button-nacht-text-color); }
}
.knopf-primaer:active { background: var(--comp-button-primary-active-background-color); transform: translateY(1px) scale(0.98); }
.knopf-ruhig:active { background: var(--comp-button-ruhig-active-background-color); transform: translateY(1px) scale(0.98); }
.knopf-primaer[disabled], .knopf-primaer[aria-disabled="true"] { background: var(--comp-button-primary-disabled-background-color); color: var(--comp-button-primary-disabled-text-color); cursor: not-allowed; }
.knopf-ruhig[disabled], .knopf-ruhig[aria-disabled="true"] { background: var(--comp-button-ruhig-disabled-background-color); color: var(--comp-button-ruhig-disabled-text-color); cursor: not-allowed; }
.knopf-klein { min-height: 44px; padding-inline: var(--space-md); font-size: var(--font-small-size); }
.knopf-rund {
  display: inline-grid; place-items: center; inline-size: 48px; block-size: 48px;
  border-radius: 50%; border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink); cursor: pointer;
  transition: transform var(--dauer-kurz) var(--ease-out), border-color var(--dauer-kurz) var(--ease-out);
}
@media (hover: hover) { .knopf-rund:hover { border-color: var(--color-primary); } }
.knopf-rund:active { transform: scale(0.95); }
.knopf-rund:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 50%; }
@media (min-width: 1024px) {
  .knopf-primaer, .knopf-ruhig, .knopf-nacht { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .knopf-primaer, .knopf-ruhig, .knopf-nacht, .knopf-rund { transition-property: background-color, border-color; }
  .knopf-primaer:active, .knopf-ruhig:active, .knopf-rund:active { transform: none; }
}
.icon { inline-size: 1.25em; block-size: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }


.store-badge {
  display: inline-block; padding: 10px; margin: -10px;
  border-radius: 12px;
  transition: transform var(--dauer-kurz) var(--ease-out);
}
.store-badge img { block-size: 48px; inline-size: auto; }
.badge-hero img { block-size: 52px; }
.store-badge:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 14px; }
@media (hover: hover) { .store-badge:hover { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .store-badge { transition: none; } .store-badge:hover { transform: none; } }

.chip-bald {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 40px;
  padding: 0.4em 1em; margin: 0;
  border: 1px dashed var(--color-line); border-radius: var(--radius-pill);
  font-size: var(--font-small-size); font-weight: 560; color: var(--color-ink-muted);
}


.sterne { display: inline-flex; gap: 2px; vertical-align: middle; }
.stern { inline-size: 1.05em; block-size: 1.05em; }
.stern-gross { inline-size: 1.6em; block-size: 1.6em; }
.stern-leer { fill: var(--color-rule); }
.stern-voll { fill: var(--color-gold-dunkel); }
.stern-anteil-0 { clip-path: inset(0 100% 0 0); }
.stern-anteil-1 { clip-path: inset(0 90% 0 0); }
.stern-anteil-2 { clip-path: inset(0 80% 0 0); }
.stern-anteil-3 { clip-path: inset(0 70% 0 0); }
.stern-anteil-4 { clip-path: inset(0 60% 0 0); }
.stern-anteil-5 { clip-path: inset(0 50% 0 0); }
.stern-anteil-6 { clip-path: inset(0 40% 0 0); }
.stern-anteil-7 { clip-path: inset(0 30% 0 0); }
.stern-anteil-8 { clip-path: inset(0 20% 0 0); }
.stern-anteil-9 { clip-path: inset(0 10% 0 0); }
.stern-anteil-10 { clip-path: none; }


.siegel-zeile {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5em;
  min-height: 44px;
  color: var(--color-ink); text-decoration: none; font-size: var(--font-small-size); font-weight: 560;
}
.siegel-zeile .siegel-text { text-decoration: underline; text-decoration-color: var(--color-gold); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
@media (hover: hover) { .siegel-zeile:hover { color: var(--color-ink); } .siegel-zeile:hover .siegel-text { text-decoration-color: var(--color-primary); } }
.siegel-gross .siegel-text, .siegel-klein .siegel-text { margin: var(--space-sm) 0 0; font-weight: 600; }
.siegel-stand { margin: var(--space-xs) 0 0; font-size: var(--font-small-size); color: var(--color-ink-muted); }


.kopf {
  position: sticky; inset-block-start: 0; z-index: var(--z-kopf);
  background: var(--color-canvas);
  border-block-end: 1px solid transparent;
  transition: background-color var(--motion-duration-base) var(--ease-ruhig), border-color var(--motion-duration-base) var(--ease-ruhig);
}
.kopf.ist-gescrollt { border-block-end-color: var(--color-rule); }
.kopf-innen {
  display: flex; align-items: center; gap: var(--space-md);
  inline-size: min(100% - 2 * var(--rand), var(--inhalt-max)); margin-inline: auto;
  min-block-size: var(--kopf-hoehe);
}
.kopf-marke { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--color-ink); min-block-size: 44px; margin-inline-end: auto; }
.kopf-logo { inline-size: 36px; block-size: 36px; }
.kopf-wort { font-weight: 680; font-size: 1.2rem; letter-spacing: -0.02em; white-space: nowrap; hyphens: manual; }
.kopf-nav { display: none; }
.nav-liste { list-style: none; display: flex; gap: var(--space-xs); }
.nav-liste a {
  display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 0.75rem;
  color: var(--color-ink); text-decoration: none; font-weight: 520; border-radius: var(--radius-pill);
}
.nav-liste a[aria-current="page"] { font-weight: 680; text-decoration: underline; text-decoration-color: var(--color-primary); text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
.kopf.auf-nacht .nav-liste a[aria-current="page"] { text-decoration-color: var(--color-oliv-hell); }
@media (hover: hover) { .nav-liste a:hover { color: var(--color-primary); } }
.knopf-kopf { min-height: 44px; padding: 0.55rem 1.1rem; font-size: 0.95rem; }
.kopf-menue {
  display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px;
  border: 1px solid var(--color-line); border-radius: 50%; background: transparent; cursor: pointer;
}
.kopf-menue:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 50%; }
.kopf-menue-linien, .kopf-menue-linien::before, .kopf-menue-linien::after {
  display: block; inline-size: 18px; block-size: 2px; background: currentColor; border-radius: 2px; content: "";
  transition: transform var(--dauer-kurz) var(--ease-out), opacity var(--dauer-kurz) var(--ease-out);
}
.kopf-menue-linien { position: relative; }
.kopf-menue-linien::before { position: absolute; transform: translateY(-6px); }
.kopf-menue-linien::after { position: absolute; transform: translateY(6px); }
.kopf-menue[aria-expanded="true"] .kopf-menue-linien { background: transparent; }
.kopf-menue[aria-expanded="true"] .kopf-menue-linien::before { transform: rotate(45deg); }
.kopf-menue[aria-expanded="true"] .kopf-menue-linien::after { transform: rotate(-45deg); }

html:not(.menue-bereit) .kopf-innen { flex-wrap: wrap; }
html:not(.menue-bereit) .kopf-nav { display: block; order: 5; inline-size: 100%; }
html:not(.menue-bereit) .nav-liste { flex-wrap: wrap; }

html.menue-bereit .kopf-nav.ist-offen {
  display: block; position: absolute; inset-inline: 0; inset-block-start: 100%;
  max-block-size: calc(100svh - var(--kopf-hoehe)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--color-canvas); border-block-end: 1px solid var(--color-rule);
  padding: var(--space-md) var(--rand) var(--space-lg);
  box-shadow: var(--shadow-card);
}
html.menue-bereit .kopf-nav.ist-offen .nav-liste { flex-direction: column; }
html.menue-bereit .kopf-nav.ist-offen .nav-liste a { font-size: 1.25rem; min-block-size: 52px; }
.sprachen ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
html.menue-bereit .kopf-nav.ist-offen .sprachen { margin-block-start: var(--space-md); padding-block-start: var(--space-sm); border-block-start: 1px solid var(--color-rule); }
.sprachen a { display: inline-flex; min-block-size: 44px; align-items: center; padding-inline: 0.5rem; font-size: var(--font-small-size); }
@media (max-width: 479px) {
  .knopf-kopf { padding-inline: 0.85rem; font-size: 0.9rem; }
  .kopf-wort { font-size: 1.05rem; }
}
@media (min-width: 1024px) {
  :root { --kopf-hoehe: 4.5rem; }
  .kopf-nav, html.menue-bereit .kopf-nav { display: flex; align-items: center; flex: 1; position: static; padding: 0; box-shadow: none; border: 0; background: transparent; }
  .kopf-nav .sprachen { margin-inline: auto var(--space-md); }
  html.menue-bereit .kopf-nav.ist-offen { position: static; max-block-size: none; overflow: visible; padding: 0; box-shadow: none; border: 0; background: transparent; }
  html.menue-bereit .kopf-nav.ist-offen .nav-liste { flex-direction: row; }
  html.menue-bereit .kopf-nav.ist-offen .nav-liste a { font-size: inherit; min-block-size: 44px; }
  .kopf-menue { display: none !important; }
  .kopf-marke { margin-inline-end: var(--space-lg); }
}

.kopf.auf-nacht { background: rgba(18, 16, 13, 0.82); border-block-end-color: var(--gold-hauch); }
.kopf.auf-nacht .kopf-marke, .kopf.auf-nacht .nav-liste a, .kopf.auf-nacht .kopf-menue { color: var(--color-on-nacht); }
.kopf.auf-nacht .kopf-menue { border-color: rgba(251, 246, 236, 0.45); }
.kopf.auf-nacht :focus-visible { outline-color: var(--color-focus-nacht); }
.kopf.auf-nacht .sprachen a { color: var(--color-on-nacht); }
.kopf.auf-nacht .knopf-kopf { background: var(--color-oliv-hell); color: var(--color-nacht); }
html.menue-bereit .kopf.auf-nacht .kopf-nav.ist-offen { background: var(--color-nacht); border-block-end-color: var(--gold-hauch); }


.hero { position: relative; overflow: clip; }
.hero-innen {
  inline-size: min(100% - 2 * var(--rand), var(--inhalt-max)); margin-inline: auto;
  display: grid; grid-template-columns: 1fr;
  padding-block: var(--space-lg) 0;
  min-block-size: calc(100svh - var(--kopf-hoehe));
}
.hero-text { position: relative; z-index: var(--z-inhalt); align-self: start; }
.hero-titel { margin: 0 0 var(--space-md); line-height: 0.92; }
.hero-marke {
  display: block;
  font-size: var(--fs-marke); font-weight: var(--marke-gewicht); letter-spacing: var(--marke-laufweite); line-height: 0.88;
  padding-block: 0.06em 0.04em;
}
.hero-kategorie {
  display: block; margin-block-start: 0.35em;
  font-size: var(--fs-kategorie); font-weight: 560; letter-spacing: -0.015em; line-height: 1.1;
  color: var(--color-primary);
}
.hero-unter { max-inline-size: 34ch; font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem); line-height: 1.5; color: var(--color-ink); margin-block-end: var(--space-lg); }
.hero-unter .claim { display: block; font-size: 1.22em; line-height: 1.25; color: var(--color-ink); margin-block-end: 0.6em; }
.hero-laden { margin-block-end: var(--space-md); }
.hero-siegel { margin: 0; }
.hero-buehne {
  position: relative; justify-self: end;
  inline-size: min(88vw, 30rem); aspect-ratio: 1;
  margin-block-start: var(--space-lg); margin-inline-end: calc(-0.18 * min(88vw, 30rem));
}
.portal {
  position: absolute; inset: 7%;
  border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 46%, var(--nacht-kern) 0%, var(--color-nacht) 62%);
  box-shadow: 0 30px 80px rgba(40, 30, 8, 0.25), inset 0 0 0 1px var(--gold-kante);
  isolation: isolate;
}
.portal-video, .portal-still, .portal .portal-still img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.portal picture { position: absolute; inset: 0; }
.portal::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 60px 20px rgba(18, 16, 13, 0.8);
}
.ring { overflow: visible; fill: none; stroke-linecap: round; }
.ring-ruhig { stroke: var(--color-gold); opacity: 0.32; }
.ring-licht { stroke: var(--color-gold-schimmer); opacity: 0; }
.ring-hero { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.hero-licht {
  position: absolute; inset: -30%; z-index: var(--z-grund); pointer-events: none;
  background: radial-gradient(closest-side, var(--licht-weich), rgba(245, 230, 184, 0) 70%);
  opacity: 0.85;
}
.geraet-hero {
  position: absolute; inset-inline-start: -14%; inset-block-end: -2%;
  inline-size: 46%; z-index: var(--z-inhalt); margin: 0;
}
@media (min-width: 768px) {
  .hero-buehne { inline-size: min(72vw, 34rem); margin-inline-end: 0; }
  .geraet-hero { inline-size: 36%; inset-block-end: 4%; }
}
@media (min-width: 1024px) {
  .hero-innen {
    grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); align-items: center; column-gap: var(--space-2xl);
    padding-block: var(--space-2xl) var(--space-3xl);
  }
  .hero-text { align-self: center; }
  .hero-buehne { inline-size: 100%; max-inline-size: 38rem; margin: 0; justify-self: center; }
  .geraet-hero { inset-inline-start: -16%; inset-block-end: -4%; inline-size: 38%; }
}

@media (max-width: 767px) {
  
  .hero-innen { block-size: calc(100svh - var(--kopf-hoehe)); min-block-size: 30rem; grid-template-rows: auto minmax(0, 1fr); padding-block-end: var(--space-md); }
  .hero-buehne { inline-size: auto; block-size: 100%; max-block-size: 78vw; max-inline-size: 78vw; min-block-size: 9rem; aspect-ratio: 1; align-self: center; margin-block-start: var(--space-sm); margin-inline-end: -4vw; }
  .hero-unter { margin-block-end: var(--space-md); }
}
@media (max-width: 767px) and (max-height: 700px) {
  :root { --fs-marke: clamp(3.4rem, 1.2rem + 10vw, 4.2rem); }
  .hero-innen { padding-block-start: var(--space-md); }
  .hero-titel { margin-block-end: var(--space-sm); }
  .hero-unter { font-size: 0.98rem; }
}


.pause-schalter {
  position: absolute; inset-inline-end: var(--rand); inset-block-start: var(--space-md); z-index: var(--z-kopf);
  min-block-size: 44px; padding: 0.5rem 1rem; border-radius: var(--radius-pill);
  background: var(--color-nacht); color: var(--color-on-nacht); border: 1px solid var(--color-gold); cursor: pointer;
}
.pause-schalter:not(:focus-visible) {
  inline-size: 1px; block-size: 1px; min-block-size: 0; padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.pause-schalter:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }


.geraet { margin: 0; }
.geraet-rahmen {
  position: relative;
  padding: 3.2%;
  border-radius: 13% / 6.2%;
  background: linear-gradient(160deg, var(--rahmen-hell), var(--rahmen-dunkel) 60%, var(--rahmen-hell));
  box-shadow: var(--shadow-geraet), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.geraet-schirm { position: relative; overflow: hidden; border-radius: 10.5% / 5%; background: var(--color-creme); }
.geraet-bild, .geraet-schirm img { inline-size: 100%; block-size: auto; }

.geraet.ist-ausschnitt .geraet-rahmen { padding: 0; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-hoch), 0 0 0 1px var(--gold-kante); }
.geraet.ist-ausschnitt .geraet-schirm { border-radius: var(--radius-lg); }


.band { padding-block: var(--abstand-sektion); position: relative; }
.band-innen { inline-size: min(100% - 2 * var(--rand), var(--inhalt-max)); margin-inline: auto; position: relative; }
.abschnitt-titel { max-inline-size: 20ch; margin-block-end: var(--space-lg); }
.band-mehr { margin-block-start: var(--space-xl); font-weight: 600; }
.band-mehr a, .kids-mehr a, .hub-andere a { display: inline-flex; align-items: center; min-block-size: 44px; }
.zeile-mask { padding-block: 0.15em; margin-block: -0.15em; }


.stimmen { background: var(--color-creme); border-block: 1px solid var(--color-rule); }
.stimmen-innen {
  inline-size: min(100% - 2 * var(--rand), var(--inhalt-max)); margin-inline: auto;
  display: grid; gap: var(--space-xl); padding-block: var(--space-3xl);
}
.stimmen-zahl { font-size: var(--fs-zahl); font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; margin: 0; color: var(--color-ink); }
@media (max-width: 1023px) {
  .stimmen-innen { gap: var(--space-lg); padding-block: var(--space-2xl); grid-template-columns: minmax(0, 1fr); }
  .stimmen-innen > * { min-inline-size: 0; }
  .stimmen-siegel { display: flex; align-items: center; gap: var(--space-md); }
  .stimmen .stimmen-zahl, .stimmen .stimmen-siegel { display: none; }
  .stimmen .siegel-stand { display: none; }
  .themen-leiste { align-items: start; grid-auto-flow: column; grid-auto-columns: min(78vw, 20rem); gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-block-end: var(--space-sm); }
  .themen-leiste .thema { scroll-snap-align: start; border: 1px solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-md); background: var(--color-canvas); }
  .themen-leiste .thema:last-child { border-block-end: 1px solid var(--color-rule); }
  .themen-leiste:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
}
.stimmen-titel { font-size: var(--fs-gross); margin-block-end: var(--space-md); }
.themen-liste { list-style: none; display: grid; }
.thema { padding-block: var(--space-md); border-block-start: 1px solid var(--color-rule); }
.thema:last-child { border-block-end: 1px solid var(--color-rule); }
.thema-titel { font-family: var(--font-claim-family); font-style: italic; font-weight: 460; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); margin-block-end: var(--space-xs); }
.thema p { margin: 0; }
.thema-rueckhalt { margin-block-start: var(--space-xs) !important; font-size: var(--font-small-size); color: var(--color-gold-text); font-weight: 560; }
.stimmen-laender { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin: var(--space-sm) 0 0; padding: 0; font-size: var(--font-small-size); color: var(--color-ink-muted); }
.stimmen-store { margin: var(--space-xs) 0 0; font-size: var(--font-small-size); }
.stimmen-quelle a, .stimmen-store a, .siegel-text a, .hub-siegel a, .fuss-siegel a, .fuss-marken a { display: inline-flex; align-items: center; min-block-size: 44px; }
.stimmen-quelle { margin-block-start: var(--space-md); font-size: var(--font-small-size); color: var(--color-ink-muted); }
@media (min-width: 1024px) {
  .stimmen-innen { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; gap: var(--space-4xl); }
  .themen-alle { grid-template-columns: 1fr 1fr; column-gap: var(--space-2xl); }
}


.auftakt { position: relative; overflow: clip; padding-block: var(--abstand-sektion) calc(min(78vw, 30rem) / 2 + var(--space-2xl)); text-align: center; background: var(--color-canvas); color: var(--color-ink); }
.auftakt-innen { position: relative; z-index: var(--z-grund); }
.auftakt-scheibe {
  position: absolute; z-index: var(--z-buehne); inset-inline-start: 50%; inset-block-end: 0;
  inline-size: min(78vw, 30rem); aspect-ratio: 1; margin-inline-start: calc(min(78vw, 30rem) / -2); margin-block-end: calc(min(78vw, 30rem) / -2);
  border-radius: 50%; background: var(--color-nacht);
  box-shadow: 0 0 0 1px var(--gold-kante);
}
.auftakt-innen { inline-size: min(100% - 2 * var(--rand), 54rem); margin-inline: auto; }
.auftakt-titel { font-size: clamp(2.5rem, 1.4rem + 5.2vw, 6rem); letter-spacing: -0.035em; line-height: 0.98; margin-block-end: var(--space-lg); text-wrap: balance; }
.auftakt-litanei { margin-block-end: var(--space-md); }
.auftakt-text { max-inline-size: 44ch; margin-inline: auto; color: var(--color-ink-muted); }


.geschichte { position: relative; color: var(--color-on-nacht); overflow-x: clip; }
.buehne { position: relative; padding-block: var(--space-3xl); background: var(--color-nacht); }
.buehne-nacht { display: none; }
.buehne-sterne { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; }
.buehne-licht {
  position: absolute; inset: -38%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 200, 104, 0.42), rgba(212, 168, 67, 0.12) 45%, rgba(212, 168, 67, 0) 72%);
  opacity: 0.35;
}
.buehne-staub { display: block; position: absolute; inset: 0; pointer-events: none; opacity: 0.4; background-image: radial-gradient(1.5px 1.5px at 12% 18%, rgba(245, 230, 184, 0.9), transparent 60%), radial-gradient(1px 1px at 37% 64%, rgba(245, 230, 184, 0.7), transparent 60%), radial-gradient(1.5px 1.5px at 71% 32%, rgba(232, 200, 104, 0.8), transparent 60%), radial-gradient(1px 1px at 86% 78%, rgba(245, 230, 184, 0.6), transparent 60%), radial-gradient(2px 2px at 55% 12%, rgba(232, 200, 104, 0.5), transparent 60%), radial-gradient(1px 1px at 22% 88%, rgba(245, 230, 184, 0.6), transparent 60%); background-size: 340px 340px; }
.geschichte[data-modus="pin"] .buehne-staub {
  display: block; position: absolute; inset: -20% 0; pointer-events: none; opacity: 0.55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(245, 230, 184, 0.9), transparent 60%),
    radial-gradient(1px 1px at 37% 64%, rgba(245, 230, 184, 0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 71% 32%, rgba(232, 200, 104, 0.8), transparent 60%),
    radial-gradient(1px 1px at 86% 78%, rgba(245, 230, 184, 0.6), transparent 60%),
    radial-gradient(2px 2px at 55% 12%, rgba(232, 200, 104, 0.5), transparent 60%),
    radial-gradient(1px 1px at 22% 88%, rgba(245, 230, 184, 0.6), transparent 60%);
  background-size: 340px 340px;
}
.geschichte.mit-webgl .buehne-staub { display: none; }
.buehne-mitte { position: relative; z-index: var(--z-inhalt); inline-size: min(72vw, 26rem); aspect-ratio: 1; margin: 0 auto var(--space-3xl); }
.buehne-mitte .ring-buehne { position: absolute; inset: -4%; inline-size: 108%; block-size: 108%; }
.geschichte:not([data-modus="pin"]) .ring-buehne .ring-licht { opacity: 0; }

@media (max-width: 767px) {
  .geschichte:not([data-modus="pin"]) .buehne-mitte picture:has(.buehne-symbol) { display: none; }
}
.geschichte:not([data-modus="pin"]) .buehne-symbol { inset: auto 0 2% auto; inline-size: 22%; block-size: 22%; box-shadow: 0 0 0 3px var(--color-nacht), 0 0 36px var(--glanz-warm); }
.stationen { list-style: none; position: relative; z-index: var(--z-inhalt); inline-size: min(100% - 2 * var(--rand), var(--inhalt-max)); margin-inline: auto; display: grid; gap: var(--space-4xl); }
.station { display: grid; gap: var(--space-lg); align-items: center; }
.station-nr { font-family: var(--font-claim-family); font-style: italic; font-size: 1.15rem; color: var(--color-gold); margin-block-end: var(--space-xs); }
.station-wort { font-size: min(var(--fs-wort), 17vw); overflow-wrap: anywhere; font-weight: 680; letter-spacing: -0.045em; line-height: 0.92; color: var(--color-gold-schimmer); padding-block: 0.06em; margin-block-end: var(--space-md); }
.station-satz { font-size: var(--fs-gross); line-height: 1.4; max-inline-size: 28ch; color: var(--color-on-nacht); }
.station-claim { font-family: var(--font-claim-family); font-style: italic; font-size: clamp(2.4rem, 1.4rem + 4vw, 4.8rem); line-height: 1.05; color: var(--color-gold-hell); margin-block-end: var(--space-md); text-wrap: balance; }
.station { position: relative; }
.station-medien { position: relative; inline-size: min(84vw, 26rem); justify-self: center; }
.station-feld { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.station-feld .ring-station { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.station-feld::before {
  content: ""; position: absolute; inset: 6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--glanz-warm), rgba(212, 168, 67, 0) 70%);
}
.ring-station .ring-licht { opacity: 0; }
.ring-station .ring-licht.ist-an { opacity: 1; }
.station-feld picture { inline-size: 78%; }
.station-laterne { inline-size: 100%; }
.station-symbol { inline-size: 100%; border-radius: 22%; box-shadow: 0 0 80px var(--glanz-warm); }
.station-feld picture:has(.station-symbol) { inline-size: 52%; }
.station-plate {
  position: absolute; inset-inline-end: -4%; inset-block-start: -2%; inline-size: 38%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px var(--gold-kante), 0 16px 40px rgba(0, 0, 0, 0.5);
}
.station-plate video, .station-plate img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.station-geraet { inline-size: min(34vw, 10rem); justify-self: start; margin-block-start: calc(-1 * var(--space-3xl)); position: relative; }
.station-geraet:has(.ist-ausschnitt) { inline-size: min(52vw, 15rem); }
.station:nth-child(even) .station-plate { inset-inline-end: auto; inset-inline-start: -4%; }
.station:nth-child(even) .station-geraet { justify-self: end; }

@media (min-width: 1024px) {
  .station { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2fr); }
  .geschichte:not([data-modus="pin"]) .station-wort { font-size: min(var(--fs-wort), 7.2vw); }
  .station-geraet { margin: 0; align-self: end; }
}


.geschichte[data-modus="pin"] .buehne { block-size: 100svh; padding: 0; overflow: clip; background: transparent; }
.geschichte[data-modus="pin"] .auftakt { position: absolute; inset: 0 0 auto; z-index: var(--z-inhalt); padding-block: calc(var(--kopf-hoehe) + var(--space-lg)) 0; background: transparent; pointer-events: none; }
.geschichte[data-modus="pin"] .auftakt-scheibe, .geschichte[data-modus="pin"] ~ .nach-geschichte .nach-scheibe { display: none; }
.geschichte[data-modus="pin"] ~ .nach-geschichte { padding-block-start: var(--space-2xl); }
.geschichte[data-modus="pin"] .auftakt-titel { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.8rem); }
.geschichte[data-modus="pin"] .buehne-nacht {
  display: block; position: absolute; inset-inline-start: 50%; inset-block-start: 50%;
  inline-size: 150vmax; block-size: 150vmax; margin-inline-start: -75vmax; margin-block-start: -75vmax;
  border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--nacht-glut) 0%, var(--color-nacht) 55%);
  will-change: transform;
}
.geschichte[data-modus="pin"] .buehne-mitte {
  display: block; position: absolute; z-index: var(--z-buehne);
  inset-inline-start: 50%; inset-block-start: 30%;
  inline-size: min(78vw, 46svh); aspect-ratio: 1; margin-inline-start: calc(min(78vw, 46svh) / -2); margin-block-start: calc(min(78vw, 46svh) / -2);
}
.geschichte[data-modus="pin"] .ring-buehne { position: absolute; inset: -6%; inline-size: 112%; block-size: 112%; }
.buehne-laterne { position: absolute; inset: 0; }
.buehne-laterne picture, .laterne-still, .laterne-seq { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; }
.buehne-symbol { position: absolute; inset: 28%; inline-size: 44%; block-size: 44%; border-radius: 22%; }
.geschichte[data-modus="pin"] .buehne-symbol { opacity: 0; }
.buehne-laterne picture:has(.buehne-symbol) { inset: 0; }
.geschichte[data-modus="pin"] .stationen { position: absolute; inset: 0; inline-size: 100%; display: block; }
.geschichte[data-modus="pin"] .station {
  position: absolute; inset-inline: var(--rand); inset-block-end: var(--space-2xl);
  display: block; opacity: 0;
}
.geschichte[data-modus="pin"] .station-medien { display: none; }
.geschichte[data-modus="pin"] .station-geraet { margin-block-start: var(--space-lg); inline-size: min(clamp(8.5rem, 11vw, 12rem), 17svh); }
.geschichte[data-modus="pin"] .station-geraet .ist-ausschnitt { inline-size: min(clamp(11rem, 16vw, 16rem), 30svh); }
.geschichte[data-modus="pin"] .station-wort { font-size: clamp(3rem, 5.4vw, 6.5rem); text-shadow: var(--schatten-text-nacht); overflow-wrap: anywhere; hyphens: auto; }
.geschichte[data-modus="pin"] .station-satz { text-shadow: var(--schatten-text-nacht); }
@media (min-width: 1024px) {
  .geschichte[data-modus="pin"] .buehne-mitte {
    inline-size: min(44vw, 74svh); inset-inline-start: 66%; inset-block-start: 50%;
    margin-inline-start: calc(min(44vw, 74svh) / -2); margin-block-start: calc(min(44vw, 74svh) / -2);
  }
  .geschichte[data-modus="pin"] .station { inset-inline-start: max(var(--rand), (100vw - var(--inhalt-max)) / 2); inset-inline-end: auto; inset-block: 0; display: flex; flex-direction: column; justify-content: flex-start; padding-block-start: 24svh; max-inline-size: 38vw; }
}
.plates { display: none; }
.geschichte[data-modus="pin"] .plates { display: block; position: absolute; z-index: var(--z-inhalt); inset: 0; pointer-events: none; }
.plate {
  position: absolute; aspect-ratio: 1; border-radius: 50%; overflow: hidden; opacity: 0;
  inline-size: min(34vw, 15rem); inset-inline-end: var(--rand); inset-block-start: calc(var(--kopf-hoehe) + var(--space-md));
  box-shadow: 0 0 0 1px var(--gold-kante), 0 0 0 10px var(--color-nacht), 0 20px 60px rgba(0, 0, 0, 0.5);
}
.plate video, .plate img { inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .plate { inline-size: min(18vw, 17rem, 30svh); inset-inline-end: auto; inset-inline-start: 39%; inset-block-start: auto; inset-block-end: 10svh; }
}


.nach-geschichte { position: relative; overflow: clip; background: var(--color-canvas); color: var(--color-ink); text-align: center; padding-block: calc(min(60vw, 22rem) + var(--space-3xl) + var(--space-xl)) var(--space-2xl); }
.nach-scheibe {
  position: absolute; inset-inline-start: 50%; inset-block-start: var(--space-3xl); inline-size: min(60vw, 22rem); aspect-ratio: 1;
  margin-inline-start: calc(min(60vw, 22rem) / -2);
  border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--nacht-glut), var(--color-nacht) 60%);
  display: grid; place-items: center; pointer-events: none;
}
.nach-innen { position: relative; z-index: var(--z-inhalt); }
.nach-scheibe .ring-nach { position: absolute; inset: 8%; inline-size: 84%; block-size: 84%; }
.nach-scheibe picture { inline-size: 40%; position: relative; }
.nach-symbol { border-radius: 22%; box-shadow: 0 0 50px var(--glanz-warm); }
.nach-innen { inline-size: min(100% - 2 * var(--rand), 40rem); margin-inline: auto; display: grid; justify-items: center; gap: var(--space-lg); }
.nach-text { font-family: var(--font-claim-family); font-style: italic; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.8rem); line-height: 1.2; color: var(--color-gold-text); margin: 0; max-inline-size: 22ch; }
.nach-geschichte .badge-nacht img { block-size: 56px; }


.band-tag { background: linear-gradient(180deg, var(--color-canvas), var(--color-creme)); }
.tag-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
.tag-claim { font-size: var(--font-claim-size); color: var(--color-gold-text); margin-block-start: var(--space-lg); }
.tag-app {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm);
  padding: var(--space-md); border-radius: var(--radius-lg);
  background: var(--color-creme); border: 1px solid var(--color-rule);
}
.tag-marke { justify-self: start; margin: 0 0 var(--space-xs); padding: 0.25em 0.8em; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-line); font-size: var(--font-small-size); font-weight: 600; color: var(--color-ink-muted); }
.tag-karte { background: var(--comp-card-background-color); color: var(--comp-card-text-color); border-radius: var(--radius-md); padding: var(--space-md) var(--space-md); box-shadow: var(--comp-card-shadow); }
.tag-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-md); }
.tag-kopf > * { min-inline-size: 0; }
.tag-karte-titel { display: flex; align-items: center; gap: 0.45em; font-size: 1.05rem; font-weight: 640; margin-block-end: var(--space-sm); }
.tag-karte-titel .icon { color: var(--color-oliv); }
.tag-prozent { margin: 0; font-size: 2rem; font-weight: 700; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.tag-balken { block-size: 10px; border-radius: var(--radius-pill); background: var(--color-oliv-sanft); overflow: hidden; }
.tag-balken span { display: block; block-size: 100%; inline-size: 100%; background: var(--color-oliv); border-radius: inherit; transform-origin: left center; transform: scaleX(var(--anteil, 0)); transition: transform var(--motion-duration-slow) var(--ease-out); }
.tag-liste { list-style: none; display: grid; gap: var(--space-xs); }
.tag-haken { display: flex; align-items: center; gap: 0.75em; min-block-size: 44px; cursor: pointer; }
.tag-haken input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.tag-kasten { display: inline-grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; border: 2px solid var(--color-line); color: transparent; flex: none; transition: background-color var(--dauer-kurz) var(--ease-out), border-color var(--dauer-kurz) var(--ease-out); }
.tag-kasten .icon { inline-size: 16px; block-size: 16px; stroke-width: 2.6; }
.tag-haken input:checked + .tag-kasten { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.tag-haken input:checked ~ span:last-child { color: var(--color-ink-muted); text-decoration: line-through; text-decoration-color: var(--color-oliv); }
.tag-haken input:focus-visible + .tag-kasten { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.tag-wasser-steuer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.tag-rund { display: inline-grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 50%; border: 1px solid var(--color-line); background: var(--color-canvas); cursor: pointer; color: var(--color-ink); }
.tag-rund:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 50%; }
.tag-rund:active { transform: scale(0.94); }
@media (hover: hover) { .tag-rund:hover { border-color: var(--color-primary); color: var(--color-primary); } }
.tag-rund { transition: transform var(--dauer-kurz) var(--ease-out), border-color var(--dauer-kurz) var(--ease-out); }
.tag-wasser-wert { margin: 0; font-size: 1.15rem; font-weight: 640; font-variant-numeric: tabular-nums; }
.tag-hinweis { margin: var(--space-xs) 0 0; font-size: var(--font-small-size); color: var(--color-ink-muted); }
.tag-echt { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: start; }
.tag-echt .geraet { inline-size: 100%; }
.geraet-tag-2 { margin-block-start: var(--space-2xl); }
.tag-echt-text { grid-column: 1 / -1; font-size: var(--font-small-size); color: var(--color-ink-muted); }
@media (min-width: 1024px) {
  .tag-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); align-items: start; gap: var(--space-2xl); }
  .tag-app { margin-block-start: var(--space-3xl); }
}


.ablauf-kopf { max-inline-size: 40rem; }
.ablauf-liste { list-style: none; display: grid; gap: 0; counter-reset: none; margin-block-start: var(--space-xl); }
.ablauf-schritt { position: relative; padding: var(--space-md) 0 var(--space-md) 3.5rem; border-inline-start: 1px solid var(--color-gold); margin-inline-start: 1.1rem; }
.ablauf-nr { position: absolute; inset-inline-start: -1.1rem; inset-block-start: var(--space-md); display: grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem; border-radius: 50%; background: var(--color-canvas); border: 1px solid var(--color-gold); font-weight: 680; color: var(--color-gold-text); }
.ablauf-titel { font-size: 1.2rem; margin-block-end: var(--space-xs); }
.ablauf-schritt p { margin: 0; color: var(--color-ink-muted); }
@media (min-width: 1024px) {
  .ablauf-liste { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-md); }
  .ablauf-schritt { border-inline-start: 0; border-block-start: 1px solid var(--color-gold); margin: 0; padding: var(--space-xl) var(--space-sm) 0 0; }
  .ablauf-nr { inset-inline-start: 0; inset-block-start: -1.1rem; }
}


.band-mindset { background: var(--color-oliv-sanft); }
.mindset-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
.mindset-text .litanei { margin-block-start: var(--space-lg); color: var(--color-primary); }
.mindset-wege { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); }
.weg-karte {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--space-md); align-items: center;
  padding-block: var(--space-lg); border-block-start: 1px solid var(--color-line); color: var(--color-ink); text-decoration: none;
}
.mindset-weg:last-child .weg-karte { border-block-end: 1px solid var(--color-line); }
.weg-nr { grid-row: 1 / 3; font-family: var(--font-claim-family); font-style: italic; font-size: 2rem; color: var(--color-gold-text); }
.weg-titel { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.9rem); font-weight: 640; letter-spacing: -0.015em; }
.weg-text { grid-column: 2; color: var(--color-ink-muted); }
.weg-pfeil { grid-row: 1 / 3; grid-column: 3; display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 50%; border: 1px solid var(--color-line); transition: transform var(--dauer-kurz) var(--ease-out), background-color var(--dauer-kurz) var(--ease-out); }
@media (hover: hover) {
  .weg-karte:hover { color: var(--color-ink); }
  .weg-karte:hover .weg-pfeil { transform: translateX(4px); background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
}
.weg-karte:focus-visible { outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .weg-karte:hover .weg-pfeil { transform: none; } }
@media (min-width: 1024px) {
  .mindset-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-4xl); align-items: start; }
}


.band-kids { background: radial-gradient(120% 90% at 20% 10%, var(--morgen-hell) 0%, var(--color-creme) 55%, var(--color-oliv-sanft) 100%); }
.kids-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.kids-bild { position: relative; justify-self: center; inline-size: min(84vw, 30rem, 100%); }
.kids-symbol { border-radius: 50%; overflow: hidden; box-shadow: 0 30px 80px rgba(85, 107, 47, 0.25); aspect-ratio: 1; }
.kids-symbol-bild, .kids-symbol video { inline-size: 100%; block-size: 100%; object-fit: cover; }
.geraet-kids { position: absolute; inset-inline-end: -8%; inset-block-end: -10%; inline-size: 36%; }
.kids-punkte { list-style: none; display: grid; gap: var(--space-sm); margin-block: var(--space-lg); }
.kids-punkte li { display: flex; gap: 0.6em; align-items: flex-start; }
.kids-punkte .icon { color: var(--color-oliv); margin-block-start: 0.2em; }
.kids-laden { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-block: var(--space-lg) var(--space-md); }
.kids-bewertung { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; font-size: var(--font-small-size); color: var(--color-ink-muted); }
.kids-mehr { font-weight: 600; }
@media (min-width: 1024px) {
  .kids-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-4xl); }
}


.neu-liste { display: grid; gap: var(--space-xl); }
.neu-eintrag { padding-block-start: var(--space-md); border-block-start: 2px solid var(--color-gold); }
.neu-datum { font-size: var(--font-small-size); color: var(--color-ink-muted); font-weight: 560; margin-block-end: var(--space-xs); }
.neu-titel { font-size: var(--fs-gross); margin-block-end: var(--space-sm); }
.neu-titel a { color: var(--color-ink); text-decoration: none; }
@media (hover: hover) { .neu-titel a:hover { color: var(--color-primary); text-decoration: underline; } }
@media (min-width: 1024px) {
  .neu-liste { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); }
}


.hub { padding-block: var(--abstand-sektion); background: var(--color-creme-gold); position: relative; overflow: clip; }
.hub::before {
  content: ""; position: absolute; inline-size: 60vmax; aspect-ratio: 1; border-radius: 50%;
  inset-inline-end: -22vmax; inset-block-start: -18vmax;
  background: radial-gradient(circle, var(--glanz-warm), rgba(232, 200, 104, 0) 65%);
  pointer-events: none;
}
.hub-innen { position: relative; inline-size: min(100% - 2 * var(--rand), var(--inhalt-max)); margin-inline: auto; display: grid; gap: var(--space-xl); }
.hub-titel { font-size: clamp(2rem, 1.3rem + 3vw, 4rem); letter-spacing: -0.03em; line-height: 1; max-inline-size: 16ch; margin-block-end: var(--space-md); }
.hub-text { font-size: var(--fs-gross); max-inline-size: 36ch; }
.hub-preis { font-weight: 640; color: var(--color-primary); }
.hub-wege { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: flex-start; }
.hub-weg { display: grid; gap: var(--space-xs); justify-items: start; }
.hub-geraete, .hub-android-text { margin: 0; font-size: var(--font-small-size); color: var(--color-ink-muted); max-inline-size: 32ch; }
.hub-qr { display: none; }
.qr { margin: 0; display: grid; gap: var(--space-sm); justify-items: center; padding: var(--space-md); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); inline-size: max-content; }
.qr img { inline-size: 132px; block-size: 132px; image-rendering: pixelated; }
.qr figcaption { font-size: var(--font-small-size); color: var(--color-ink-muted); }
.hub-andere { margin: 0; color: var(--color-ink-muted); }
.hub-andere a { font-weight: 600; }
@media (min-width: 1024px) {
  .hub-innen { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr) minmax(0, 3fr); grid-template-areas: "kopf qr siegel" "wege qr siegel" "andere andere andere"; align-items: start; column-gap: var(--space-2xl); }
  .hub-kopf { grid-area: kopf; }
  .hub-wege { grid-area: wege; }
  .hub-qr { display: block; grid-area: qr; }
  .hub-siegel { grid-area: siegel; padding-block-start: var(--space-md); }
  .hub-andere { grid-area: andere; padding-block-start: var(--space-lg); border-block-start: 1px solid var(--color-line); }
}

.hub-wege.android-zuerst .hub-android { order: -1; }


.band-lesen { background: var(--color-canvas); }
.lesen-raster { display: grid; gap: var(--space-2xl); }
.lesen-kopf p { max-inline-size: var(--lesemass); }
@media (min-width: 1024px) { .lesen-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-4xl); align-items: start; } }
.lesen { inline-size: min(100% - 2 * var(--rand), 46rem); margin-inline: auto; padding-block: var(--space-3xl); }
.lese-abschnitt + .lese-abschnitt { margin-block-start: var(--space-3xl); }
.lese-abschnitt h2 { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem); margin-block-end: var(--space-md); }
.lese-abschnitt h3 { margin-block: var(--space-lg) var(--space-sm); }
.lese-abschnitt p, .lese-abschnitt li { max-inline-size: var(--lesemass); }
.lese-abschnitt ul { list-style: none; display: grid; gap: var(--space-sm); margin-block-start: var(--space-md); }
.lese-abschnitt li { position: relative; padding-inline-start: 1.5em; }
.lese-abschnitt li::before { content: ""; position: absolute; inset-inline-start: 0.2em; inset-block-start: 0.62em; inline-size: 0.45em; block-size: 0.45em; border-radius: 50%; background: var(--color-oliv); }
.fragen { display: grid; }
.frage { border-block-start: 1px solid var(--color-line); }
.frage:last-child { border-block-end: 1px solid var(--color-line); }
.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  min-block-size: 56px; padding-block: var(--space-md); cursor: pointer; list-style: none; font-weight: 600; font-size: 1.1rem;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary:focus-visible { outline-offset: 2px; }
.frage-zeichen { position: relative; inline-size: 20px; block-size: 20px; flex: none; }
.frage-zeichen::before, .frage-zeichen::after { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: 9px; inline-size: 16px; block-size: 2px; background: var(--color-primary); border-radius: 2px; transition: transform var(--dauer-kurz) var(--ease-out); }
.frage-zeichen::after { transform: rotate(90deg); }
.frage[open] .frage-zeichen::after { transform: rotate(0deg); }
.frage-antwort { padding-block-end: var(--space-md); color: var(--color-ink); max-inline-size: var(--lesemass); }


.krumen { inline-size: min(100% - 2 * var(--rand), var(--inhalt-max)); margin-inline: auto; padding-block-start: var(--space-md); font-size: var(--font-small-size); }
.krumen ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; }
.krumen li { display: inline-flex; align-items: center; }
.krumen li + li::before { content: "/"; margin-inline-end: 0.4em; color: var(--color-ink-muted); }
.krumen a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--color-ink-muted); }
.krumen [aria-current] { color: var(--color-ink); font-weight: 560; }
.seitenkopf { position: relative; overflow: clip; padding-block: var(--space-2xl) var(--space-3xl); }
.seitenkopf-innen { position: relative; z-index: var(--z-inhalt); inline-size: min(100% - 2 * var(--rand), var(--inhalt-max)); margin-inline: auto; }
.seitenkopf-titel { font-size: clamp(2.4rem, 1.3rem + 5vw, 6rem); letter-spacing: -0.04em; line-height: 0.98; max-inline-size: 16ch; margin-block-end: var(--space-lg); padding-block: 0.05em; }
.seitenkopf-einleitung { max-inline-size: 44rem; font-size: var(--fs-gross); line-height: 1.45; color: var(--color-ink); }
.seitenkopf-ring { display: none; }
.seitenkopf-emblem { position: relative; inline-size: 8.5rem; aspect-ratio: 1; margin: var(--space-lg) 0 0 var(--rand); border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--nacht-kern), var(--color-nacht) 62%); display: grid; place-items: center; }
.seitenkopf-emblem .ring-emblem { position: absolute; inset: -9%; inline-size: 118%; block-size: 118%; }
.seitenkopf-emblem picture { inline-size: 70%; }
@media (min-width: 1024px) {
  .seitenkopf-emblem { position: absolute; inline-size: min(22vw, 17rem); margin: 0; inset-inline-end: max(var(--rand), (100vw - var(--inhalt-max)) / 2 + var(--rand)); inset-block-start: 50%; transform: translateY(-50%); }
}
.seitenkopf-kids { background: linear-gradient(180deg, var(--color-oliv-sanft), var(--color-canvas)); }
.seitenkopf.mit-bild { overflow: visible; display: grid; gap: var(--space-lg); inline-size: min(100% - 2 * var(--rand), var(--inhalt-max)); margin-inline: auto;
  grid-template-areas: "titel" "bild" "text"; }
.seitenkopf.mit-bild .seitenkopf-innen { display: contents; }
.seitenkopf.mit-bild .seitenkopf-titel { grid-area: titel; margin-block-end: 0; }
.seitenkopf.mit-bild .seitenkopf-einleitung { grid-area: text; }
.seitenkopf.mit-bild .seitenkopf-bild { grid-area: bild; }
.seitenkopf-bild { position: relative; justify-self: center; inline-size: min(86vw, 30rem, 100%); aspect-ratio: 1; }
.seitenkopf-bild .ring-kopf { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.seitenkopf-bild .ring-ruhig { opacity: 0.4; }
.geraet-kopf-1 { position: absolute; inline-size: 42%; inset-inline-start: 18%; inset-block-start: 10%; z-index: var(--z-inhalt); }
.geraet-kopf-2 { position: absolute; inline-size: 38%; inset-inline-end: 12%; inset-block-start: 24%; }
@media (min-width: 1024px) {
  .seitenkopf.mit-bild { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "titel bild" "text bild"; align-items: end; column-gap: var(--space-3xl); }
  .seitenkopf.mit-bild .seitenkopf-einleitung { align-self: start; }
}
.fehler-code { font-size: var(--fs-zahl); font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; color: var(--color-gold-text); margin: 0 0 var(--space-md); }
.fehler-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin-block-start: var(--space-lg); font-weight: 600; }
.fehler-links a { display: inline-flex; min-block-size: 44px; align-items: center; }


.bereiche { inline-size: min(100% - 2 * var(--rand), var(--inhalt-max)); margin-inline: auto; display: grid; gap: var(--abstand-sektion); padding-block: var(--space-2xl) var(--abstand-sektion); }
.bereich { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.bereich-titel { display: flex; align-items: center; gap: 0.45em; }
.bereich-icon { display: inline-grid; place-items: center; inline-size: 1.4em; block-size: 1.4em; flex: none; border-radius: 50%; background: var(--color-nacht); color: var(--color-gold-schimmer); }
.bereich-icon .icon { inline-size: 62%; block-size: 62%; }
.bereich-plate { position: relative; border-radius: 50%; overflow: hidden; aspect-ratio: 1; box-shadow: 0 0 0 1px var(--gold-kante), var(--shadow-hoch); }
.bereich-plate img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.bereich h2 { margin-block: var(--space-sm) var(--space-md); }
.bereich-funktionen { list-style: none; display: grid; gap: var(--space-xs); margin-block-start: var(--space-md); }
.bereich-funktionen li { padding: 0.55em 0; border-block-start: 1px solid var(--color-rule); }
.bereich-bild { justify-self: center; inline-size: min(64vw, 18rem); }
.bereich-zeichen { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--color-nacht); color: var(--color-gold-schimmer); box-shadow: inset 0 0 0 1px var(--gold-kante); }
.bereich-zeichen .icon { inline-size: 40%; block-size: 40%; stroke-width: 1.1; }
@media (min-width: 1024px) {
  .bereich { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-4xl); }
  .bereich-1 .bereich-text { order: 2; }
}
.split-geraet { display: grid; gap: var(--space-2xl); align-items: center; }
.split-text p { max-inline-size: var(--lesemass); }
.split-bild { justify-self: center; inline-size: min(64vw, 18rem); }
.band-ramadan { background: var(--color-nacht); color: var(--color-on-nacht); }
.band-ramadan a { color: var(--color-oliv-hell); }
.band-coach { background: var(--color-creme); }
.band-schritte { background: var(--color-creme); }
@media (min-width: 1024px) { .split-geraet { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-4xl); } }


.schritte { list-style: none; display: grid; gap: var(--space-2xl); margin-block-start: var(--space-xl); }
.schritt { display: grid; gap: var(--space-lg); align-items: center; padding-block-start: var(--space-lg); border-block-start: 1px solid var(--color-gold); }
.schritt-nr { font-size: var(--font-small-size); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-gold-text); margin-block-end: var(--space-xs); }
.schritt-titel { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); margin-block-end: var(--space-sm); }
.schritt-lang { color: var(--color-ink-muted); }
.schritt-bild { justify-self: center; inline-size: min(52vw, 14rem); }
@media (min-width: 1024px) { .schritt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.stepper[data-aktiv] .schritt { display: none; }
.stepper[data-aktiv] .schritt[data-sichtbar] { display: grid; border-block-start: 0; }
.stepper-tabs { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin-block-start: var(--space-xl); }
@media (min-width: 640px) { .stepper-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stepper-tab {
  display: flex; align-items: center; justify-content: center; text-align: center; text-wrap: balance; gap: 0.5em; min-block-size: 44px; padding: 0.4em 1em; border-radius: var(--radius-pill);
  border: 1px solid var(--color-line); background: var(--color-surface); cursor: pointer; font-weight: 560;
}
.stepper-tab[aria-selected="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.stepper-tab:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-pill); }


.galerie-fenster { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; padding-block: var(--space-md) var(--space-lg); }
.galerie-fenster:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.galerie-spur { list-style: none; display: flex; gap: var(--space-lg); inline-size: max-content; }
.galerie-folie { flex: none; inline-size: min(62vw, 15rem); scroll-snap-align: start; }
.galerie-text { margin-block-start: var(--space-md); font-size: var(--font-small-size); color: var(--color-ink-muted); }
.galerie-steuerung { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.galerie-hinweis { margin: 0; font-size: var(--font-small-size); color: var(--color-ink-muted); }
.galerie-knoepfe { display: flex; gap: var(--space-sm); }
@media (prefers-reduced-motion: no-preference) { .galerie-fenster { scroll-behavior: smooth; } }
.kids-oben { padding-block-start: var(--space-2xl); }


.band-kundentext { background: var(--color-nacht); color: var(--color-on-nacht); }
.kundentext-raster { display: grid; gap: var(--space-lg); }
.kundentext-litanei { color: var(--color-gold-schimmer); font-size: clamp(1.5rem, 1.1rem + 2vw, 2.8rem); max-inline-size: 22ch; }
.kundentext-text p { max-inline-size: var(--lesemass); font-size: 1.1rem; }
@media (min-width: 1024px) { .kundentext-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--space-4xl); } .kundentext-text { grid-row: 1 / 3; grid-column: 2; } }
.anvertraute-liste { list-style: none; display: grid; gap: var(--space-lg); margin-block-start: var(--space-xl); }
.anvertraut { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-md); align-items: start; padding-block: var(--space-md); border-block-start: 1px solid var(--color-rule); }
.anvertraut-bild { grid-row: 1 / 3; inline-size: 4.5rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--gold-kante); }
.anvertraut-bild img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.anvertraut-icon { grid-row: 1 / 3; display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--color-nacht); color: var(--color-gold-schimmer); }
.anvertraut h3 { font-size: 1.4rem; }
.anvertraut p { margin: var(--space-xs) 0 0; color: var(--color-ink-muted); }
@media (min-width: 1024px) { .anvertraute-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); } .anvertraut:first-child { grid-column: 1 / -1; } }


.band-test { background: var(--color-creme); }
.test-raster { max-inline-size: 48rem; }
.test-hinweis { color: var(--color-ink-muted); }
.test-fortschritt { block-size: 6px; background: var(--color-creme-gold); border-radius: var(--radius-pill); overflow: hidden; margin-block-end: var(--space-lg); }
.test-fortschritt span { display: block; block-size: 100%; inline-size: 100%; background: var(--color-oliv); transform-origin: left center; transform: scaleX(var(--anteil, 0)); transition: transform var(--motion-duration-base) var(--ease-out); }
.test-frage, .situation { border: 0; margin: 0 0 var(--space-xl); padding: 0; min-inline-size: 0; }
.test-legende { display: grid; gap: var(--space-xs); margin-block-end: var(--space-md); padding: 0; }
.test-nr { font-size: var(--font-small-size); font-weight: 600; color: var(--color-gold-text); letter-spacing: 0.04em; }
.test-text { font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem); font-weight: 640; letter-spacing: -0.015em; line-height: 1.2; }
.wahl-gruppe { display: grid; gap: var(--space-sm); }
.wahl { position: relative; display: block; cursor: pointer; }
.wahl input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.wahl > span {
  display: flex; align-items: center; gap: 0.6em; min-block-size: var(--comp-chip-wahl-min-height);
  padding: var(--comp-chip-wahl-padding); border-radius: var(--comp-chip-wahl-rounded);
  background: var(--comp-chip-wahl-background-color); color: var(--comp-chip-wahl-text-color);
  border: var(--comp-chip-wahl-border-width) solid var(--comp-chip-wahl-border-color);
  transition: border-color var(--dauer-kurz) var(--ease-out), background-color var(--dauer-kurz) var(--ease-out);
}
@media (hover: hover) { .wahl:hover > span { border-color: var(--comp-chip-wahl-hover-border-color); } }
.wahl input:checked + span { background: var(--comp-chip-wahl-active-background-color); border-color: var(--comp-chip-wahl-active-border-color); box-shadow: inset 0 0 0 1px var(--comp-chip-wahl-active-border-color); font-weight: 600; }
.wahl input:focus-visible + span { outline: var(--comp-chip-wahl-focus-outline-width) solid var(--comp-chip-wahl-focus-outline-color); outline-offset: var(--comp-chip-wahl-focus-outline-offset); }
.wahl-buchstabe { display: inline-grid; place-items: center; inline-size: 1.8em; block-size: 1.8em; border-radius: 50%; background: var(--color-creme-gold); font-weight: 700; flex: none; }
.wahl-klein > span { min-block-size: 44px; padding: 0.6em 1em; }
.warum { margin-block-start: var(--space-lg); padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-surface); }
.warum-frage { font-weight: 640; }
.feld-label { display: block; margin-block: var(--space-md) var(--space-xs); font-weight: 560; }
.feld {
  inline-size: 100%; min-block-size: var(--comp-input-height); padding: var(--comp-input-padding);
  border-radius: var(--comp-input-rounded); border: 1px solid var(--comp-input-border-color);
  background: var(--comp-input-background-color); color: var(--comp-input-text-color); font: inherit; resize: vertical;
}
@media (hover: hover) { .feld:hover { border-color: var(--comp-input-hover-border-color); } }
.feld:focus-visible { border-color: var(--comp-input-focus-border-color); outline: var(--comp-input-focus-outline-width) solid var(--comp-input-focus-outline-color); outline-offset: var(--comp-input-focus-outline-offset); }
.feld-hilfe { margin-block-start: var(--space-xs); font-size: var(--font-small-size); color: var(--color-ink-muted); }
.gedanken { margin-block-start: var(--space-md); display: grid; gap: var(--space-xs); }
.gedanke summary { cursor: pointer; min-block-size: 44px; display: flex; align-items: center; font-weight: 560; color: var(--color-primary); }
.gedanke p { margin: 0 0 var(--space-sm); padding-inline-start: var(--space-md); border-inline-start: 2px solid var(--color-gold); }
.test-steuerung { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-lg); }
.test-meldung { min-block-size: 1.5em; margin-block-start: var(--space-sm); color: var(--color-primary); font-weight: 560; }

form[data-ablauf] .test-frage:not([data-aktiv]), form[data-ablauf] .situation:not([data-aktiv]) { display: none; }
form[data-ablauf] .warum:not([data-offen]), form[data-ablauf] .gedanken:not([data-offen]) { display: none; }
form[data-ablauf] .gedanke:not([data-gewaehlt]) { display: none; }
.ergebnis { margin-block-start: var(--space-xl); padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-lg); background: var(--color-nacht); color: var(--color-on-nacht); }
.ergebnis:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.ergebnis-marke { font-size: var(--font-small-size); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold); font-weight: 600; }
.ergebnis-titel { font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); color: var(--color-gold-schimmer); letter-spacing: -0.03em; margin-block-end: var(--space-md); }
.ergebnis a { color: var(--color-oliv-hell); }
.ergebnis :focus-visible, .geschichte :focus-visible, .band-ramadan :focus-visible, .band-kundentext :focus-visible, .nach-geschichte .badge-nacht:focus-visible { outline-color: var(--color-focus-nacht); }
.ergebnis-aktionen { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-lg); }
.ergebnis .knopf-primaer { background: var(--color-oliv-hell); color: var(--color-nacht); }
.ergebnis .knopf-ruhig { background: transparent; color: var(--color-on-nacht); border-color: rgba(251, 246, 236, 0.5); }
.ergebnis-meldung { min-block-size: 1.5em; margin-block-start: var(--space-sm); color: var(--color-gold-hell); }
.ergebnis h4, .typ h4 { font-size: 1.05rem; margin-block: var(--space-md) var(--space-xs); }
.ergebnis ul, .typ ul { list-style: none; display: grid; gap: var(--space-xs); }
.ergebnis li, .typ li li { padding-inline-start: 1.3em; position: relative; }
.ergebnis li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.6em; inline-size: 0.5em; block-size: 0.5em; border-radius: 50%; background: var(--color-oliv-hell); }
.typen-liste { list-style: none; display: grid; gap: var(--space-xl); margin-block-start: var(--space-xl); }
.typ { padding-block: var(--space-lg); border-block-start: 1px solid var(--color-gold); }
@media (min-width: 1024px) { .typ { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--space-2xl); align-content: start; } .typ > h3 { grid-column: 1; grid-row: 1 / span 12; } .typ > :not(h3) { grid-column: 2; } }
.typ h3 { font-family: var(--font-claim-family); font-style: italic; font-weight: 460; font-size: 1.8rem; margin-block-end: var(--space-sm); }
.typ li li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.6em; inline-size: 0.5em; block-size: 0.5em; border-radius: 50%; background: var(--color-oliv); }



.siegel-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
@media (min-width: 1024px) { .siegel-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-4xl); } }
.tabelle { inline-size: 100%; margin-block: var(--space-lg); font-variant-numeric: tabular-nums; }
.tabelle caption { text-align: start; font-size: var(--font-small-size); color: var(--color-ink-muted); padding-block-end: var(--space-sm); }
.tabelle th, .tabelle td { text-align: start; padding: 0.7em 0.4em; border-block-end: 1px solid var(--color-rule); hyphens: auto; overflow-wrap: anywhere; }
.tabelle tfoot th, .tabelle tfoot td { font-weight: 700; border-block-end: 0; border-block-start: 2px solid var(--color-gold); }
.band-themen { background: var(--color-creme); }
.band-eigene { background: var(--color-oliv-sanft); }
.zitat { margin: 0; padding: var(--space-md); border-inline-start: 3px solid var(--color-gold); background: var(--color-surface); }


.artikel-liste { display: grid; gap: var(--space-3xl); max-inline-size: 46rem; }
.artikel { padding-block-start: var(--space-lg); border-block-start: 2px solid var(--color-gold); }
.artikel h2 { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem); margin-block-end: var(--space-md); }
.artikel p { max-inline-size: var(--lesemass); }
.artikel-quelle { font-size: var(--font-small-size); color: var(--color-ink-muted); }


.kontakt-wege { list-style: none; display: grid; gap: var(--space-lg); }
.kontakt-wege li { padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.kontakt-wege li > p:last-child:has(a) { margin-block-start: auto; padding-block-start: var(--space-sm); }
.kontakt-wege h3 { margin-block-end: var(--space-sm); }
@media (min-width: 768px) { .kontakt-wege { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kontakt-wege { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


.produkte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 640px) { .produkte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.produkt { display: grid; align-content: start; gap: var(--space-xs); }
.produkt h3 { margin: var(--space-sm) 0 0; font-size: 1.15rem; }
.produkt p { margin: 0; }
.produkt .knopf-ruhig { justify-self: start; margin-block-start: var(--space-sm); }
.produkt-bild { margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.produkt-bild img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.produkt-preis { font-weight: 650; color: var(--color-gold-text); }
.shop-vorschau-hinweis { inline-size: min(100% - 2 * var(--rand), var(--inhalt-max)); margin: 0 auto; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--color-creme); border: 1px solid var(--color-gold); font-size: var(--font-small-size); }
@media (min-width: 1024px) { .shop-raster { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--space-2xl); align-items: start; } .shop-raster > h2 { grid-column: 1 / -1; } .shop-raster .korb { margin-block-start: 0; position: sticky; inset-block-start: calc(var(--kopf-hoehe) + var(--space-md)); } }
.produkt { padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); }
.korb { margin-block-start: var(--space-2xl); padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-creme); }


.chatblase {
  position: fixed; z-index: var(--z-blase);
  inset-inline-end: max(var(--space-md), env(safe-area-inset-right));
  inset-block-end: max(var(--space-md), env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 0.5em; min-block-size: 52px; padding: 0.4em 1.1em 0.4em 0.5em;
  border-radius: var(--radius-pill); background: var(--color-nacht); color: var(--color-on-nacht); text-decoration: none;
  box-shadow: 0 14px 40px rgba(18, 16, 13, 0.35), inset 0 0 0 1px var(--gold-kante);
  font-weight: 600;
  transition: transform var(--motion-duration-base) var(--ease-out), opacity var(--motion-duration-base) var(--ease-out);
}
.chatblase-symbol { inline-size: 40px; block-size: 40px; padding: 9px; border-radius: 50%; background: var(--color-oliv-hell); fill: var(--color-nacht); }
@media (hover: hover) { .chatblase:hover { color: var(--color-on-nacht); transform: translateY(-2px); } }
.chatblase:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-pill); }

@media (prefers-reduced-motion: no-preference) {
  html.js .chatblase.ist-verzoegert { opacity: 0; transform: translateY(16px); pointer-events: none; }
}
html.js .chatblase.ist-verdeckt { opacity: 0; pointer-events: none; }
html.js .chatblase:focus-visible { opacity: 1; transform: none; pointer-events: auto; }

@media (max-width: 479px) {
  .chatblase { padding: 0.35em; }
  .chatblase-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .chatblase { transition: opacity var(--motion-duration-base) linear; } }

.fuss { padding-block-end: calc(var(--space-3xl) + 52px); }


.fuss { background: var(--color-nacht); color: var(--color-on-nacht-muted); padding-block-start: var(--space-3xl); }
.fuss a { color: var(--color-on-nacht); }
.fuss :focus-visible { outline-color: var(--color-focus-nacht); }
.fuss-innen { inline-size: min(100% - 2 * var(--rand), var(--inhalt-max)); margin-inline: auto; display: grid; gap: var(--space-2xl); }
.fuss-marke img { margin-block-end: var(--space-md); }
.fuss-claim { font-family: var(--font-claim-family); font-style: italic; font-size: 1.35rem; color: var(--color-gold-hell); max-inline-size: 24ch; }
.fuss-siegel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; font-size: var(--font-small-size); }
.fuss-siegel .stern-leer { fill: rgba(251, 246, 236, 0.2); }
.fuss-siegel .stern-voll { fill: var(--color-gold); }
.fuss-titel { font-size: var(--font-small-size); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold); margin-block-end: var(--space-sm); }
.fuss-spalte ul { list-style: none; display: grid; gap: 0; }
.fuss-spalte a { display: inline-flex; align-items: center; min-block-size: 44px; text-decoration: none; }
@media (hover: hover) { .fuss-spalte a:hover { color: var(--color-gold-schimmer); text-decoration: underline; } }
.fuss-marken { grid-column: 1 / -1; font-size: var(--font-small-size); padding-block-start: var(--space-lg); border-block-start: 1px solid var(--gold-hauch); }
@media (min-width: 768px) { .fuss-innen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fuss-innen { grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); } }


@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal]:not([data-gezeigt]) { opacity: 0; }
  html.js [data-zeilen]:not([data-gezeigt]) { opacity: 0; }
  html.js [data-hero-zeile]:not([data-gezeigt]), html.js [data-hero-folge]:not([data-gezeigt]) { opacity: 0; }
}


@media print {
  .kopf, .chatblase, .korn, .hub-qr, .pause-schalter { display: none !important; }
  .geschichte, .fuss, .band-ramadan, .band-kundentext, .ergebnis { background: none !important; color: var(--color-ink) !important; }
}
.kopf-marke-oben { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px; block-size: 1px; pointer-events: none; }

.test-ohne-js { color: var(--color-ink-muted); }
[data-typtest][data-ablauf] .test-ohne-js { display: none; }
[data-typtest]:not([data-ablauf]) [data-test-auswerten] { display: none; }
.warum-gruppe { border: 0; margin: 0; padding: 0; min-inline-size: 0; }

@media (min-width: 1024px) and (max-height: 760px) {
  .geschichte[data-modus="pin"] .station { padding-block-start: calc(var(--kopf-hoehe) + var(--space-xl)); }
}

@media (prefers-reduced-motion: reduce) {
  .nach-scheibe { display: none; }
  .nach-geschichte { padding-block-start: var(--space-2xl); }
}
.kopf.auf-nacht .nav-liste a { transition: color 0.2s var(--ease-out); }
@media (hover: hover) { .kopf.auf-nacht .nav-liste a:hover, .kopf.auf-nacht .sprachen a:hover { color: var(--color-oliv-hell); } }

.bereich-plate .pause-schalter { inset-inline-end: auto; inset-inline-start: 50%; inset-block-start: 50%; transform: translate(-50%, -50%); }

a.knopf-primaer:active { color: var(--comp-button-primary-text-color, var(--color-on-primary)); }
a.knopf-ruhig:active { color: inherit; }
a.chatblase:active { color: var(--color-on-nacht); }


.band-abo { background: var(--color-creme); }
.abo-einleitung { max-inline-size: 52ch; margin-block-end: var(--space-xl); }
.abo-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
@media (min-width: 768px) { .abo-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.abo { padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); display: grid; align-content: start; gap: var(--space-xs); }
.abo:last-child { background: var(--color-nacht); color: var(--color-on-nacht); box-shadow: 0 0 0 1px var(--gold-kante), var(--shadow-card); }
.abo-name { margin: 0; font-size: 1.15rem; font-weight: 650; }
.abo-preis { margin: 0; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; color: var(--color-gold-text); }
.abo:last-child .abo-preis { color: var(--color-gold-hell); }
.abo-zusatz { margin: 0; font-size: var(--font-small-size); color: var(--color-ink-muted); }
.abo:last-child .abo-zusatz { color: var(--color-on-nacht-muted); }
.abo-punkte { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: var(--space-xs); }
.abo-punkte li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs); align-items: start; }
.abo-punkte .icon { inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: 0.2em; color: var(--color-primary); }
.abo:last-child .abo-punkte .icon { color: var(--color-oliv-hell); }
.abo-quelle { margin-block-start: var(--space-lg); font-size: var(--font-small-size); color: var(--color-ink-muted); max-inline-size: 70ch; }


.team-bild { margin: 0; }
.team-bild-flaeche { aspect-ratio: 16 / 9; max-inline-size: 48rem; border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 45%, var(--nacht-kern), var(--color-nacht) 70%); display: grid; place-items: center; align-content: center; gap: var(--space-md); color: var(--color-on-nacht-muted); box-shadow: 0 0 0 1px var(--gold-kante); }
.team-bild-emblem { position: relative; inline-size: min(28vw, 9rem); aspect-ratio: 1; display: grid; place-items: center; }
.team-bild-emblem .ring-emblem { position: absolute; inset: -9%; inline-size: 118%; block-size: 118%; }
.team-bild-emblem picture { inline-size: 70%; }
.team-bild-hinweis { margin: 0; font-family: var(--font-claim-family); font-style: italic; font-size: 1.25rem; color: var(--color-gold-hell); }
.team-bild-text { margin: 0; font-size: 0.75rem; letter-spacing: 0.04em; opacity: 0.7; }
.team-bild-echt { max-inline-size: 25rem; }

.band-team .band-innen { --team-links: max(var(--rand), (100% - 46rem) / 2); margin-inline: var(--team-links) auto; inline-size: min(62rem, 100% - var(--team-links) - var(--rand)); }
.team-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
@media (min-width: 1024px) { .team-raster { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--space-2xl); } }
.team-text { max-inline-size: 60ch; }
.team-einleitung { hyphens: manual; margin: 0 0 var(--space-lg); }
.team-zitat-titel { font-family: var(--font-claim-family); font-style: italic; font-weight: 460; font-size: 1.6rem; margin: 0 0 var(--space-sm); }
.team-zitat { hyphens: manual; max-inline-size: 58ch; font-size: var(--fs-gross); line-height: 1.55; margin: 0; padding-inline-start: var(--space-md); border-inline-start: 2px solid var(--color-gold); }
.team-zitat p { margin: 0 0 var(--space-sm); hyphens: manual; }
.team-zitat strong { font-weight: 600; }
.team-begriffe { hyphens: manual; margin-block-start: var(--space-md); font-size: var(--font-small-size); color: var(--color-ink-muted); }
.team-foto { inline-size: 100%; aspect-ratio: 569 / 772; object-fit: cover; object-position: 50% 0%; border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--gold-kante); }
.team-bild-unterschrift { margin-block-start: var(--space-sm); font-family: var(--font-claim-family); font-style: italic; font-size: 1.15rem; color: var(--color-ink-muted); }
@media (min-width: 1024px) { .team-foto { aspect-ratio: 569 / 772; } .team-raster .team-bild-flaeche { aspect-ratio: 569 / 772; } }
.fuss-sozial { margin: var(--space-xs) 0 0; }
.fuss-sozial a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--color-on-nacht); }


.profil { margin-block: var(--space-lg); }
.profil-titel { margin: 0; font-size: 1.1rem; }
.profil-text { margin: var(--space-xs) 0 var(--space-md); color: var(--color-on-nacht-muted); font-size: var(--font-small-size); }
.profil-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.profil-zeile { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 3.2rem; gap: var(--space-sm); align-items: center; }
.profil-name { font-size: var(--font-small-size); }
.profil-zeile.ist-haupt .profil-name { font-weight: 700; color: var(--color-gold-hell); }
.profil-balken { block-size: 8px; border-radius: var(--radius-pill); background: rgba(251, 246, 236, 0.14); overflow: hidden; }
.profil-balken span { display: block; block-size: 100%; inline-size: 100%; transform-origin: left center; transform: scaleX(var(--anteil, 0)); background: var(--color-gold); border-radius: inherit; }
.profil-zeile.ist-haupt .profil-balken span { background: var(--color-gold-hell); }
.profil-zahl { text-align: end; font-variant-numeric: tabular-nums; font-size: var(--font-small-size); }
.typ-staerken { margin: 0 0 var(--space-sm); }

.korb h2 { font-size: 1.3rem; margin: 0 0 var(--space-sm); }
.abo-laden { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-block-start: var(--space-xl); }
.abo-laden-text { margin: 0; font-size: var(--font-small-size); color: var(--color-ink-muted); }
@media (min-width: 1200px) { .abo-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


.band-funktionen { background: var(--color-canvas); }
.fkt-einleitung { max-inline-size: 52ch; color: var(--color-ink-muted); margin-block-end: var(--space-xl); }
.fkt-buehne { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.fkt-titel { font-size: 1.15rem; font-weight: 650; margin: 0; }
.fkt-text { margin: 0.3rem 0 0; color: var(--color-ink-muted); max-inline-size: 42ch; }
.fkt-stufe { display: inline-block; white-space: nowrap; margin: 0 0 var(--space-xs); padding: 0.15em 0.7em; border-radius: var(--radius-pill); border: 1px solid var(--color-line); font-size: var(--font-small-size); font-weight: 600; color: var(--color-primary-strong); }
.fkt-geld { margin: 0; padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-creme); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-content: space-between; }
.fkt-geld-feld { display: grid; place-items: center; padding-block: var(--space-md); background: radial-gradient(closest-side, var(--glanz-warm), rgba(212, 168, 67, 0) 100%); }
.fkt-geld-bild { inline-size: min(9rem, 267px); filter: drop-shadow(0 14px 24px rgba(60, 44, 10, 0.18)); }
.fkt-hinweis { margin: 0; padding: var(--space-lg); border-radius: var(--radius-lg); border: 1px solid var(--color-line); display: grid; gap: var(--space-md); align-content: start; }
.fkt-mitteilung-bild { inline-size: 100%; filter: drop-shadow(0 10px 22px rgba(20, 16, 8, 0.18)); }
.fkt-widget { margin: var(--space-sm) 0 0; display: grid; gap: var(--space-xs); }
.fkt-widget-feld { justify-self: start; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 0 0 1px var(--gold-kante); line-height: 0; }
.fkt-widget-bild { inline-size: 100%; }
.fkt-widget figcaption { font-size: var(--font-small-size); color: var(--color-ink-muted); }
.fkt-widget-titel { font-weight: 600; color: var(--color-ink); }

.atem { position: relative; padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-nacht); color: var(--color-on-nacht); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); align-items: center; overflow: hidden; }
.atem .fkt-text { color: var(--color-on-nacht-muted); }
.atem .fkt-stufe { color: var(--color-gold-hell); border-color: var(--gold-kante); }
.atem .knopf-ruhig { margin-block-start: var(--space-md); }
.atem :focus-visible { outline-color: var(--color-focus-nacht); }
.atem-text { padding-inline-end: 5rem; }
.atem-feld { position: absolute; inset-block-start: var(--space-md); inset-inline-end: var(--space-md); inline-size: 5rem; aspect-ratio: 1; display: grid; place-items: center; }
.atem-kreis { inline-size: 45%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--color-gold-hell), var(--color-gold) 60%, rgba(212, 168, 67, 0) 72%); box-shadow: 0 0 40px var(--glanz-warm); transform: scale(1); transition: transform 4s var(--ease-ruhig); }
.atem[data-phase="0"] .atem-kreis { transform: scale(2); }
.atem[data-phase="1"] .atem-kreis { transform: scale(2); }
.atem[data-phase="2"] .atem-kreis { transform: scale(1); }
.atem-phase { grid-column: 1 / -1; margin: 0; min-block-size: 1.5em; font-family: var(--font-claim-family); font-style: italic; font-size: 1.3rem; color: var(--color-gold-hell); }
@media (prefers-reduced-motion: reduce) { .atem-kreis { transition: none; } .atem[data-phase] .atem-kreis { transform: scale(1.5); } }
.fkt-auch { margin-block-start: var(--space-xl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.fkt-auch-titel { margin: 0; font-size: var(--font-small-size); font-weight: 650; color: var(--color-ink-muted); }
.fkt-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.fkt-chip { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.4em 0.85em 0.4em 0.6em; border-radius: var(--radius-pill); border: 1px solid var(--color-line); font-size: var(--font-small-size); }
.fkt-chip .icon { inline-size: 1.1rem; block-size: 1.1rem; color: var(--color-primary-strong); flex: none; }
.fkt-chip small { font-size: inherit; color: var(--color-ink-muted); padding-inline-start: 0.5em; border-inline-start: 1px solid var(--color-line); white-space: nowrap; }
.fkt-quelle { margin-block-start: var(--space-lg); font-size: var(--font-small-size); color: var(--color-ink-muted); }
.fkt-quelle a { padding-block: 0.75em; }
@media (min-width: 640px) {
  .atem { grid-template-columns: minmax(0, 1fr) auto; }
  .atem-text { padding-inline-end: 0; }
  .atem-feld { position: static; inline-size: 7.5rem; }
}
@media (min-width: 768px) {
  .fkt-buehne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "geld hinweis" "atem atem"; gap: var(--space-lg); }
  .fkt-geld { grid-area: geld; }
  .fkt-hinweis { grid-area: hinweis; }
  .atem { grid-area: atem; }
}
@media (min-width: 1024px) {
  .fkt-buehne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "geld hinweis" "atem hinweis"; }
  .fkt-geld { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .fkt-geld-feld { padding: var(--space-md); }
}

.fkt-geld-bild { inline-size: min(9rem, 267px); } .fkt-mitteilung-bild { max-inline-size: 1084px; } .fkt-widget-bild { max-inline-size: 460px; } .anleitung-film { inline-size: min(20rem, 570px); }
@media (min-resolution: 1.01dppx) { .fkt-geld-bild { inline-size: min(9rem, 216px); } .fkt-mitteilung-bild { max-inline-size: 876px; } .fkt-widget-bild { max-inline-size: 372px; } .anleitung-film { inline-size: min(20rem, 460px); } }
@media (min-resolution: 1.25dppx) { .fkt-geld-bild { inline-size: min(9rem, 180px); } .fkt-mitteilung-bild { max-inline-size: 730px; } .fkt-widget-bild { max-inline-size: 310px; } .anleitung-film { inline-size: min(20rem, 384px); } }
@media (min-resolution: 1.5dppx) { .fkt-geld-bild { inline-size: min(9rem, 178px); } .fkt-mitteilung-bild { max-inline-size: 725px; } .fkt-widget-bild { max-inline-size: 307px; } .anleitung-film { inline-size: min(20rem, 381px); } }
@media (min-resolution: 1.51dppx) { .fkt-geld-bild { inline-size: min(9rem, 154px); } .fkt-mitteilung-bild { max-inline-size: 625px; } .fkt-widget-bild { max-inline-size: 265px; } .anleitung-film { inline-size: min(20rem, 329px); } }
@media (min-resolution: 1.75dppx) { .fkt-geld-bild { inline-size: min(9rem, 135px); } .fkt-mitteilung-bild { max-inline-size: 547px; } .fkt-widget-bild { max-inline-size: 232px; } .anleitung-film { inline-size: min(20rem, 288px); } }
@media (min-resolution: 2dppx) { .fkt-geld-bild { inline-size: min(9rem, 134px); } .fkt-mitteilung-bild { max-inline-size: 544px; } .fkt-widget-bild { max-inline-size: 231px; } .anleitung-film { inline-size: min(20rem, 286px); } }
@media (min-resolution: 2.01dppx) { .fkt-geld-bild { inline-size: min(9rem, 120px); } .fkt-mitteilung-bild { max-inline-size: 486px; } .fkt-widget-bild { max-inline-size: 206px; } .anleitung-film { inline-size: min(20rem, 256px); } }
@media (min-resolution: 2.25dppx) { .fkt-geld-bild { inline-size: min(9rem, 108px); } .fkt-mitteilung-bild { max-inline-size: 438px; } .fkt-widget-bild { max-inline-size: 186px; } .anleitung-film { inline-size: min(20rem, 230px); } }
@media (min-resolution: 2.5dppx) { .fkt-geld-bild { inline-size: min(9rem, 102px); } .fkt-mitteilung-bild { max-inline-size: 417px; } .fkt-widget-bild { max-inline-size: 177px; } .anleitung-film { inline-size: min(20rem, 219px); } }
@media (min-resolution: 2.625dppx) { .fkt-geld-bild { inline-size: min(9rem, 102px); } .fkt-mitteilung-bild { max-inline-size: 414px; } .fkt-widget-bild { max-inline-size: 176px; } .anleitung-film { inline-size: min(20rem, 218px); } }
@media (min-resolution: 2.64dppx) { .fkt-geld-bild { inline-size: min(9rem, 98px); } .fkt-mitteilung-bild { max-inline-size: 398px; } .fkt-widget-bild { max-inline-size: 169px; } .anleitung-film { inline-size: min(20rem, 209px); } }
@media (min-resolution: 2.75dppx) { .fkt-geld-bild { inline-size: min(9rem, 90px); } .fkt-mitteilung-bild { max-inline-size: 365px; } .fkt-widget-bild { max-inline-size: 155px; } .anleitung-film { inline-size: min(20rem, 192px); } }
@media (min-resolution: 3dppx) { .fkt-geld-bild { inline-size: min(9rem, 89px); } .fkt-mitteilung-bild { max-inline-size: 363px; } .fkt-widget-bild { max-inline-size: 154px; } .anleitung-film { inline-size: min(20rem, 191px); } }
@media (min-resolution: 3.01dppx) { .fkt-geld-bild { inline-size: min(9rem, 77px); } .fkt-mitteilung-bild { max-inline-size: 312px; } .fkt-widget-bild { max-inline-size: 132px; } .anleitung-film { inline-size: min(20rem, 164px); } }
@media (min-resolution: 3.5dppx) { .fkt-geld-bild { inline-size: min(9rem, 67px); } .fkt-mitteilung-bild { max-inline-size: 273px; } .fkt-widget-bild { max-inline-size: 116px; } .anleitung-film { inline-size: min(20rem, 144px); } }
@media (min-resolution: 4dppx) { .fkt-geld-bild { inline-size: min(9rem, 54px); } .fkt-mitteilung-bild { max-inline-size: 219px; } .fkt-widget-bild { max-inline-size: 93px; } .anleitung-film { inline-size: min(20rem, 115px); } }
@media (min-resolution: 5dppx) { .fkt-geld-bild { inline-size: min(9rem, 33px); } .fkt-mitteilung-bild { max-inline-size: 136px; } .fkt-widget-bild { max-inline-size: 58px; } .anleitung-film { inline-size: min(20rem, 72px); } }


.shop-bald { background: var(--color-nacht); color: var(--color-on-nacht); padding-block: var(--space-2xl); }
.shop-bald .band-innen { display: grid; gap: var(--space-sm); justify-items: start; }
.shop-bald p { margin: 0; color: var(--color-on-nacht-muted); max-inline-size: 52ch; }
.shop-bald-marke { padding: 0.2em 0.9em; border-radius: var(--radius-pill); border: 1px solid var(--gold-kante); color: var(--color-gold-hell) !important; font-weight: 600; font-size: var(--font-small-size); }
.shop-bald-titel { margin: 0; color: var(--color-on-nacht); font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); }
.shop-bald :focus-visible { outline-color: var(--color-focus-nacht); }

@media (min-width: 1024px) { .shop-raster:not(:has(.korb)) { grid-template-columns: minmax(0, 1fr); } }


.anleitung-raster { display: grid; gap: var(--space-2xl); }
.anleitung-video { margin: 0; justify-self: center; display: grid; gap: var(--space-sm); justify-items: center; text-align: center; }
.anleitung-geraet { padding: 0.6rem; border-radius: 2rem; background: var(--color-nacht); box-shadow: 0 0 0 1px var(--gold-kante), var(--shadow-card); line-height: 0; }
.anleitung-film { display: block; aspect-ratio: 576 / 1024; border-radius: 1.5rem; background: var(--color-nacht); }
.anleitung-video figcaption { max-inline-size: 22rem; font-size: var(--font-small-size); color: var(--color-ink-muted); }
.anleitung-video figcaption p { margin: 0 0 var(--space-xs); }
.anleitung-quelle { font-style: italic; }
.anleitung-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.anleitung-schritt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-lg); border: 1px solid var(--color-line); transition: background-color 0.4s var(--ease-ruhig), border-color 0.4s var(--ease-ruhig); }
.anleitung-schritt.ist-aktiv { background: var(--color-creme); border-color: var(--color-gold); }
.anleitung-nr { font-family: var(--font-claim-family); font-style: italic; font-size: 2.6rem; line-height: 1; color: var(--color-gold-text); min-inline-size: 1.4ch; }
.anleitung-titel { font-size: var(--fs-gross); margin: 0 0 var(--space-xs); }
.anleitung-inhalt p { margin: 0 0 var(--space-sm); max-inline-size: 60ch; }
.anleitung-schluss { margin: var(--space-xl) 0 var(--space-sm); font-family: var(--font-claim-family); font-style: italic; font-size: var(--fs-gross); color: var(--color-ink); }
.anleitung-begriffe { margin: 0; font-size: var(--font-small-size); color: var(--color-ink-muted); }
@media (min-width: 1024px) {
  .anleitung-raster { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--space-3xl); align-items: start; }
  .anleitung-video { position: sticky; inset-block-start: calc(var(--kopf-hoehe) + var(--space-lg)); }
}
@media (prefers-reduced-motion: reduce) { .anleitung-schritt { transition: none; } }



.team-uebersetzung { max-inline-size: 58ch; margin-block-start: var(--space-md); padding-inline-start: var(--space-md); border-inline-start: 1px solid var(--color-rule); }
.team-uebersetzung p { margin: 0 0 var(--space-sm); hyphens: manual; }
.team-uebersetzung-titel { font-size: var(--font-small-size); color: var(--color-ink-muted); }
.fehler-andere { margin-block-start: var(--space-lg); font-size: var(--font-small-size); }
.fehler-andere p { margin: 0 0 var(--space-xs); }
.fehler-andere a { display: inline-flex; min-block-size: 44px; align-items: center; }


.sprache-kurz { display: none; }
.fuss-sprachen { grid-column: 1 / -1; }
.fuss-sprachen a { color: inherit; text-decoration: none; }
.fuss-sprachen a[aria-current="true"], .sprachen a[aria-current="true"] { font-weight: 680; text-decoration: underline; text-underline-offset: 0.35em; }
@media (min-width: 1024px) and (max-width: 1279px) { .kopf-nav .sprachen { display: none; } }
@media (min-width: 1280px) {
  .kopf-nav .sprache-kurz { display: inline; letter-spacing: 0.04em; }
  .kopf-nav .sprache-name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}