@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(schrift/nunito-sans-a0f2b136.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(schrift/nunito-sans-a0f2b136.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(schrift/nunito-sans-a0f2b136.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(schrift/nunito-sans-a0f2b136.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(schrift/nunito-sans-a0f2b136.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
   TFCZ · marke.css
   Erzeugt mit PixelLens am 2026-10-19, Paket 1.15.4-1, System 1.15.4.
   Lizenz GT-TFCZ-1A764C für TFCZ, siehe LIZENZ.md.
   Nicht von Hand ändern. Markenwerte stehen in marke.json,
   eigene Anpassungen in eigenes.css.
   ============================================================ */

/* ---- tokens/core.css ---- */

:root{
  
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: clamp(2.5rem, 6vw, 4rem);
  --space-4xl: clamp(3rem, 8vw, 6rem);
  --space-5xl: clamp(3.5rem, 10vw, 8rem);

  
  --r-xs: 6px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 8px;
  --r-xl: 8px;
  --r-pill: 999px;

  
  --font-display: 'Bricolage Grotesque', 'Bricolage Ersatz', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-ui: 'Bricolage Grotesque', 'Bricolage Ersatz', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-data: 'Bricolage Grotesque', 'Bricolage Ersatz', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  
  --text-2xs: 0.71875rem;
  --text-xs: 0.78125rem;
  --text-sm: 0.84375rem;
  --text-md: 0.96875rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.3125rem;
  --text-2xl: clamp(1.5rem, 3.2vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 4.6vw, 2.625rem);
  --text-4xl: clamp(2.375rem, 6.4vw, 3.875rem);
  --text-5xl: clamp(2.875rem, 8.8vw, 6rem);

  
  --leading-tight: 1.04;
  --leading-snug: 1.28;
  --leading-normal: 1.62;

  
  --tracking-tight: -0.035em;
  --tracking-snug: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;

  
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-knopf: var(--fw-semibold);

  
  --t-sofort: 80ms;
  --t-fast: 150ms;
  --t-base: 240ms;
  --t-slow: 480ms;
  --t-lang: 1200ms;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --ease-ankunft: cubic-bezier(.3,1.3,.5,1);

  
  --surface-state: color-mix(in oklab, var(--ink) 15%, transparent);
  --treffer: color-mix(in oklab, var(--accent) 34%, transparent);
  --papier: Canvas;

  
  --accent-2: var(--accent);
  --accent-2-lift: var(--accent-lift);
  --accent-2-ink: var(--accent-ink);
  --accent-2-hover: var(--accent-hover);

  
  --wrap: 73.75rem;
  --wrap-text: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --ctl-h-sm: 2.25rem;
  --ctl-h: 2.75rem;
  --ctl-h-lg: 3.25rem;
  --tap-min: 44px;
  --border-w: 1px;
  --border-w-stark: 2px;
  --icon: 1.125rem;
  --icon-sm: 0.875rem;
  --menu-w: 14rem;
  --leiste-w: 13rem;
  --panel-w: 18.75rem;
  --row-h: 2rem;
  --label-w: 7.75rem;
  --dock-w: min(38rem, 42vw);
  --textbox-h: 14rem;
  --kal-stunde: 3rem;
  --wertkante: calc(var(--space-sm) + var(--border-w));
  --section-y: clamp(3rem, 8vw, 6rem);

  
  --z-unter: -1;
  --z-ueber: 1;
  --z-klebend: 2;
  --z-klebend-zeile: 4;
  --z-klebend-kopf: 6;
  --z-klebend-ecke: 7;
  --z-griff: 8;
  --z-deckt: 9;
  --z-leiste: 20;
  --z-blatt: 30;
  --z-schwebend: 40;
  --z-zuruf: 50;
  --z-aufgeklappt: 60;
  --z-ziehen: 90;

  
  --bp-sm: 560px;
  --bp-md: 720px;
  --bp-lg: 900px;
  --bp-xl: 1024px;
}

[data-modus-fest]{
  --surface-state: color-mix(in oklab, var(--ink) 15%, transparent);
  --treffer: color-mix(in oklab, var(--accent) 34%, transparent);
  --papier: Canvas;
  --accent-2: var(--accent);
  --accent-2-lift: var(--accent-lift);
  --accent-2-ink: var(--accent-ink);
  --accent-2-hover: var(--accent-hover);
}

/* ---- system/base.css ---- */


:root { color-scheme: dark; }

:root[data-mode="light"] { color-scheme: light; }
:root[data-mode="dark"] { color-scheme: dark; }

[data-modus-fest] { color: var(--ink); }
[data-modus-fest="hell"] { color-scheme: light; }
[data-modus-fest="dunkel"] { color-scheme: dark; }

@font-face {
  font-family: 'Bricolage Ersatz';
  src: local('Arial'), local('ArialMT'), local('Arimo'), local('Liberation Sans');
  size-adjust: 92%;
  ascent-override: 101%;
  descent-override: 29%;
  line-gap-override: 0%;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  
  font-optical-sizing: auto;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h3, h4 { font-weight: var(--fw-bold); }

em, .t-em { font-style: normal; font-weight: var(--fw-semibold); color: var(--ink); }
strong { font-weight: var(--fw-bold); }

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--text-lg); letter-spacing: var(--tracking-normal); }

p { margin: 0; max-width: var(--wrap-text); text-wrap: pretty; }
p + p { margin-top: var(--space-md); }

.t-lead    { font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--ink); }
.t-muted   { color: var(--ink-muted); }
.t-faint   { color: var(--ink-faint); font-size: var(--text-sm); }

.t-fail    { color: var(--state-fail); }

.ueberzeile { font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-muted); }

.t-data {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-normal);
}

a { color: inherit; text-decoration-thickness: var(--border-w); text-underline-offset: 0.2em; }

mark { background-color: var(--treffer); color: inherit; border-radius: var(--r-xs); }
::highlight(suchtreffer) { background-color: var(--treffer); color: inherit; }
a:hover { text-decoration-color: var(--accent); }

:where(button,
       summary,
       [role="button"],
       [role="tab"],
       [role="option"],
       .btn,
       .taste,
       label:has(> input[type="checkbox"]),
       label:has(> input[type="radio"])) {
  user-select: none;
  -webkit-user-select: none;
}

:is(button, a, summary, label):has(> svg):has(> :not(svg)) {
  gap: var(--space-2xs);
}

input[type="number"] {
  appearance: textfield;          
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button {
  -webkit-appearance: none;
  appearance: none;
}

input, progress, meter { accent-color: var(--accent); }

:where(label:has(> input[type="radio"]),
       label:has(> input[type="checkbox"])) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}
:where(label:has(> input[type="radio"]),
       label:has(> input[type="checkbox"])) > input { flex: none; }

:focus-visible {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(var(--border-w) * -2);
  
}
:focus:not(:focus-visible) { outline: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  
  padding-inline: var(--gutter);
}

.stack > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-xl); }

.eine-zeile {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-md);
}
.eine-zeile > * { min-width: 0; }
.eine-zeile__gibt-nach { flex: 0 1 auto; min-width: 0; }

@media (max-width: 559px) {
  .eine-zeile__weicht { display: none; }
}

.kasten {
  background: var(--surface-raised);
  border-radius: var(--r-md);
  padding: var(--space-md);
}
.kasten--band {
  background: none;
  border-radius: 0;
  border-block: var(--border-w-stark) solid var(--ink);
  padding-inline: 0;
}
.kasten--kante {
  background: none;
  border: var(--border-w-stark) solid var(--ink);
}

.btn {
  font-family: var(--font-ui);
  
  font-size: var(--text-md);
  
  font-weight: var(--fw-knopf);
  min-height: var(--ctl-h);
  
  padding-inline: var(--space-lg);
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  
  gap: var(--space-xs);
  cursor: pointer;
  
  text-decoration: none;
  background: linear-gradient(to bottom, var(--accent-lift) 0%, var(--accent) 100%);
  color: var(--accent-ink);
  border: var(--border-w) solid var(--accent);
  
  transition:
    background var(--t-sofort) var(--ease),
    border-color var(--t-sofort) var(--ease),
    color var(--t-sofort) var(--ease),
    transform var(--t-sofort) var(--ease);
}

.btn:active { transform: scale(.97); }
.btn:is(:disabled, [aria-disabled="true"]):active { transform: none; }

.btn:hover:where(:not(:disabled, [aria-disabled="true"])) {
  background: linear-gradient(to bottom, var(--accent) 0%, var(--accent-hover) 100%);
  border-color: var(--accent-hover);
}

.btn--ziel {
  background: linear-gradient(to bottom, var(--accent-2-lift) 0%, var(--accent-2) 100%);
  color: var(--accent-2-ink);
  border-color: var(--accent-2);
}
.btn--ziel:hover:where(:not(:disabled, [aria-disabled="true"])) {
  background: linear-gradient(to bottom, var(--accent-2) 0%, var(--accent-2-hover) 100%);
  border-color: var(--accent-2-hover);
}

.btn--zwei {
  background: none;
  color: var(--accent);
}

.btn--zwei:hover:where(:not(:disabled, [aria-disabled="true"])) {
  background-color: var(--accent-soft);
  background-image: linear-gradient(var(--surface-state), var(--surface-state));
  color: var(--ink);
  border-color: var(--accent);
}

.btn--symbol {
  width: var(--ctl-h-sm);
  height: var(--ctl-h-sm);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0;
  display: grid;
  place-items: center;
  
  background: none;
  color: var(--ink-muted);
  border-color: var(--border-subtle);
}
.btn--symbol:hover:where(:not(:disabled, [aria-disabled="true"])) { background: var(--surface-state); color: var(--ink); border-color: var(--border-strong); }
.btn--symbol > svg { width: var(--icon-sm); height: var(--icon-sm); }

.btn--symbol.btn--auf-bild { background: var(--surface-raised); color: var(--ink); border-color: var(--border-strong); }
.btn--symbol.btn--auf-bild > svg { width: var(--icon); height: var(--icon); }
.btn--symbol.btn--zwei { color: var(--accent); border-color: var(--accent); background: var(--surface-base); }
.btn--symbol.btn--zwei:hover:where(:not(:disabled, [aria-disabled="true"])) { background-color: var(--accent-soft);
  background-image: linear-gradient(var(--surface-state), var(--surface-state)); color: var(--ink); }

.btn--still {
  background: none;
  color: var(--ink-muted);
  border-color: transparent;
  
  text-decoration: underline;
  text-decoration-thickness: var(--border-w);
  text-underline-offset: 0.25em;
  text-decoration-color: var(--border-strong);
}
.btn--still:hover:where(:not(:disabled, [aria-disabled="true"])) {
  background: var(--surface-state);
  color: var(--ink);
  border-color: transparent;
  text-decoration-color: currentColor;
}

.btn--still.btn--symbol { text-decoration: none; }

.btn.t-fail, .btn.t-fail:hover { color: var(--state-fail); }

.btn--gefahr {
  background: none;
  color: var(--state-fail);
  border-color: var(--state-fail);
}
.btn--gefahr:hover:where(:not(:disabled, [aria-disabled="true"])) { background: var(--state-fail); color: var(--surface-base); border-color: var(--state-fail); }

.btn--klein { font-size: var(--text-xs); min-height: var(--ctl-h-sm); padding-inline: var(--space-sm); }

.btn--gross { font-size: var(--text-lg); min-height: var(--ctl-h-lg); padding-inline: var(--space-xl); }

.btn--voll { width: 100%; }

.btn[disabled] { opacity: .45; cursor: not-allowed; }

.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] > .btn__ring {
  width: var(--icon-sm);
  height: var(--icon-sm);
  border: var(--border-w-stark) solid currentColor;
  border-top-color: transparent;
  border-radius: var(--r-pill);
  animation: btn-dreht var(--t-slow) linear infinite;
}
@keyframes btn-dreht { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  
  .btn[aria-busy="true"] > .btn__ring { animation: none; border-top-color: currentColor; }
}

.akzentflaeche {
  background: var(--accent-soft);
  border: var(--border-w) solid var(--accent);
  border-radius: var(--r-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--ink);
}

.ist-pass { color: var(--state-pass); }
.ist-fail { color: var(--state-fail); }
.ist-warn { color: var(--state-warn); }

.symbol { width: var(--icon); height: var(--icon); flex: none; vertical-align: middle; }
.symbol--klein { width: var(--icon-sm); height: var(--icon-sm); }

.visually-hidden {
  position: absolute;
  width: var(--border-w); height: var(--border-w);
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

table.visually-hidden { table-layout: fixed; }

:where(body *)::-webkit-scrollbar { width: var(--space-xs); height: var(--space-xs); }
:where(body *)::-webkit-scrollbar-track { background: var(--surface-state); border-radius: var(--r-pill); }
:where(body *)::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); }
:where(body *)::-webkit-scrollbar-corner { background: transparent; }

.wortwechsel { display: inline-grid; place-items: center; }
.wortwechsel > * { grid-area: 1 / 1; }
button:not(:disabled) > .wortwechsel > .wortwechsel__nachher,
button:disabled > .wortwechsel > .wortwechsel__vorher { visibility: hidden; }

.abschnitt { padding-block: var(--section-y); }

.abschnitt--flaeche { background: var(--surface-raised); }
.abschnitt--flaeche > * { --surface-raised: var(--surface-base); }
.auftakt {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 900px) {
  .auftakt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); }
}

@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  :is([aria-selected="true"], [aria-pressed="true"], [aria-checked="true"],
      [aria-current]:not([aria-current="false"]), [data-an], :checked + label) {
    outline: var(--border-w) solid Highlight;
    outline-offset: calc(var(--border-w) * -1);
  }
  .btn, .btn--still, .btn--symbol { border-color: ButtonText; }
  .btn:is(:disabled, [aria-disabled="true"]) { border-color: GrayText; color: GrayText; }
}

/* ---- system/motion.css ---- */


.m-sofort { transition-duration: var(--t-sofort); transition-timing-function: var(--ease); }
.m-fast { transition-duration: var(--t-fast); transition-timing-function: var(--ease); }
.m-base { transition-duration: var(--t-base); transition-timing-function: var(--ease); }
.m-slow { transition-duration: var(--t-slow); transition-timing-function: var(--ease); }

.m-colors    { transition-property: background-color, border-color, color, box-shadow; }
.m-transform { transition-property: transform; }
.m-all       { transition-property: background-color, border-color, color, box-shadow, transform, opacity; }

@keyframes auftritt {
  from { opacity: 0; transform: translateY(var(--space-sm)); }
  to   { opacity: 1; transform: none; }
}
.m-auftritt {
  animation: auftritt var(--t-slow) var(--ease) both;
}

@supports (animation-timeline: view()) {
  .m-auftritt {
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

.m-staffel { --staffel-versatz: 6%; }

@supports (animation-range: entry calc(0% + (sibling-index() - 1) * 6%)) {
  .m-staffel { view-timeline-name: --m-staffel; }
  .m-staffel > * {
    animation: auftritt linear both;
    animation-timeline: --m-staffel;
    
    animation-range:
      entry calc((sibling-index() - 1) * var(--staffel-versatz))
      entry calc(45% + (sibling-index() - 1) * var(--staffel-versatz));
  }
}

@media (prefers-reduced-motion: reduce) {
  
  .m-staffel > * { animation: none; }
}

@keyframes bewegung-einblenden { from { opacity: 0; } }
.bewegung-staffel {
  animation: bewegung-einblenden var(--t-base) var(--ease) both;
  animation-delay: calc(var(--bewegung-i, 0) * var(--t-sofort) / 4);
}

@keyframes bewegung-puls {
  from { background-color: color-mix(in oklab, var(--puls) 22%, transparent); }
  to   { background-color: transparent; }
}
.bewegung-puls { --puls: var(--state-pass); animation: bewegung-puls var(--t-lang) var(--ease); border-radius: var(--r-xs); }
.bewegung-puls[data-puls-zustand="fail"] { --puls: var(--state-fail); }

@keyframes bewegung-differenz {
  0%   { opacity: 0; transform: translateY(var(--space-2xs)); }
  15%, 75% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
.bewegung-differenz {
  display: inline-block;
  margin-inline-start: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--state-pass);
  animation: bewegung-differenz calc(var(--t-lang) * 2) var(--ease) forwards;
}
.bewegung-differenz[data-zustand="fail"] { color: var(--state-fail); }

@keyframes bewegung-schuetteln {
  0%, 100% { transform: none; }
  20% { transform: translateX(calc(var(--space-2xs) * -1.5)); }
  40% { transform: translateX(var(--space-2xs)); }
  60% { transform: translateX(calc(var(--space-2xs) * -.75)); }
  80% { transform: translateX(calc(var(--space-2xs) * .5)); }
}
.bewegung-schuetteln { animation: bewegung-schuetteln var(--t-slow) var(--ease); }

.bewegung-konfetti {
  position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; pointer-events: none; overflow: visible;
}

[data-kopieren] .kopiert-zeichen { display: none; }
[data-kopieren][data-kopiert] .kopiert-zeichen { display: inline-block; animation: auftritt var(--t-fast) var(--ease); }
[data-kopieren][data-kopiert] .kopieren-zeichen { display: none; }

:is(.seitenblatt, dialog.angedockt)[open] {
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
  @starting-style { transform: translateX(var(--space-2xl)); opacity: 0; }
}

:is(.fenster, .rueckfrage, .suchfenster)[open] {
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  @starting-style { transform: scale(.98); opacity: 0; }
}
:is(.fenster, .rueckfrage, .seitenblatt, .suchfenster)[open]::backdrop {
  transition: opacity var(--t-fast) var(--ease);
  @starting-style { opacity: 0; }
}

:is(.tabmenue, .aufsatz):popover-open {
  transform-origin: top left;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  @starting-style { transform: scale(.96); opacity: 0; }
}

.zuruf:popover-open {
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
  @starting-style { transform: translateY(var(--space-sm)); opacity: 0; }
}

.btn[data-besetzt] { position: relative; -webkit-text-fill-color: transparent; }
.btn[data-besetzt] > :not(.btn__ring) { visibility: hidden; }
.btn[data-besetzt] > .btn__ring { position: absolute; inset: 0; margin: auto; }

.bewegung-ankunft { animation: bewegung-ankunft var(--t-base) var(--ease-ankunft); }
@keyframes bewegung-ankunft { from { transform: scale(.86); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes bewegung-gelandet { 0%, 70% { outline-color: var(--accent); } 100% { outline-color: transparent; } }
@keyframes bewegung-gelandet-zelle { 0%, 70% { box-shadow: inset 0 var(--border-w-stark) 0 var(--accent), inset 0 calc(-1 * var(--border-w-stark)) 0 var(--accent); } 100% { box-shadow: none; } }
[data-gelandet]:not(tr) { outline: var(--border-w-stark) solid var(--accent); outline-offset: calc(-1 * var(--border-w-stark)); border-radius: var(--r-sm);
  animation: bewegung-gelandet calc(var(--t-lang) + var(--t-slow)) var(--ease) forwards; }
.karte[data-gelandet] { outline: 0; animation: none; }
.karte[data-gelandet] > .karte__innen { outline: var(--border-w-stark) solid var(--accent); outline-offset: calc(-1 * var(--border-w-stark)); animation: bewegung-gelandet calc(var(--t-lang) + var(--t-slow)) var(--ease) forwards; }
tr[data-gelandet] > td { animation: bewegung-gelandet-zelle calc(var(--t-lang) + var(--t-slow)) var(--ease) forwards; }
@media (prefers-reduced-motion: reduce) { [data-gelandet], [data-gelandet] > * { animation-duration: 1ms; } }

@supports (animation-timeline: view()) {
  .klebe-zeit { view-timeline: --klebe block; }
  .klebt-zeit {
    animation: bewegung-klebt linear both;
    animation-timeline: --klebe;
    animation-range: cover calc(var(--sicht-h, 100vh) - var(--klebe-oben, 0px) + var(--kopf-von, 0px)) cover calc(var(--sicht-h, 100vh) - var(--klebe-oben, 0px) + var(--kopf-von, 0px) + var(--kopf-weg, 0px));
  }
}
@keyframes bewegung-klebt { from { translate: 0 0; } to { translate: 0 var(--kopf-weg, 0px); } }

/* ---- system/bausteine.css ---- */


.marke {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--r-xs);
  color: var(--ink);
  background: var(--accent-soft);
  border: var(--border-w) solid var(--accent);
}
.marke::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  flex: none;
}
.marke--pass { color: var(--state-pass); border-color: var(--state-pass); background: none; }
.marke--pass::before { background: var(--state-pass); }
.marke--fail { color: var(--state-fail); border-color: var(--state-fail); background: none; }
.marke--fail::before { background: var(--state-fail); }
.marke--warn { color: var(--state-warn); border-color: var(--state-warn); background: none; }
.marke--warn::before { background: var(--state-warn); }

.marke--wert {
  padding: 0;
  color: var(--ink);
  background: none;
  border-color: transparent;
  font-weight: var(--fw-regular);
}
.marke--wert::before { display: none; }

.marke--zustand {
  gap: var(--space-3xs);
  color: var(--ink);
  background: none;
  border-color: var(--border-subtle);
}
.marke--zustand::before { display: none; }
.marke--zustand > .symbol { flex: none; color: var(--ink-muted); }
.marke--zustand[data-ton-zustand="pass"] > .symbol { color: var(--state-pass); }
.marke--zustand[data-ton-zustand="warn"] > .symbol { color: var(--state-warn); }
.marke--zustand[data-ton-zustand="fail"] > .symbol { color: var(--state-fail); }
.marke--zustand[data-ton-zustand="akzent"] > .symbol { color: var(--accent); }

.marke--hinweis:is(.marke--pass, .marke--fail, .marke--warn) { background: var(--surface-base); }

:root[data-marken="punkt"] .marke--hinweis {
  gap: 0;
  padding: 0;
  font-size: 0;
  background: none;
  border: 0;
  vertical-align: middle;
}

.taste {
  display: inline-block;
  min-width: var(--space-lg);
  text-align: center;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  background: var(--surface-overlay);
  border: var(--border-w-stark) solid var(--border-strong);
  border-bottom-width: 3px;
  border-radius: var(--r-xs);
  padding: var(--space-3xs) var(--space-2xs);
}

.initialen {
  display: inline-grid;
  place-items: center;
  width: var(--space-lg);
  height: var(--space-lg);
  flex: none;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: var(--border-w) solid var(--accent);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  
  user-select: none;
}

.trenner {
  border: 0;
  height: 1px;
  width: 100%;
  background: var(--border-subtle);
  margin-block: var(--space-2xs);
}
.trenner--hoch {
  width: 1px;
  height: 1em;
  margin-block: 0;
  
  margin-inline: var(--space-sm);
  display: inline-block;
  vertical-align: middle;
}

.trenner-titel { display: flex; align-items: center; gap: var(--space-sm); }
.trenner-titel > :is(h2, h3, h4) { flex: none; margin: 0; font-size: var(--text-lg); font-weight: var(--fw-medium); }
.trenner-titel > .trenner { flex: 1; width: auto; margin-block: 0; }

.verhaeltnis {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-overlay);
}
.verhaeltnis > img { width: 100%; height: 100%; object-fit: cover; }

.verhaeltnis:empty,
.verhaeltnis:has(> img:not([src])),
.verhaeltnis:not(:has(> img, > picture, > svg, > video)) {
  background: none;
  border: var(--border-w) dashed var(--border-strong);
}
.verhaeltnis:empty::after,
.verhaeltnis:has(> img:not([src])) ::after,
.verhaeltnis:not(:has(> img, > picture, > svg, > video))::after {
  content: 'Foto folgt';
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--ink-faint);
  font-size: var(--text-sm);
}
.verhaeltnis--quadrat { aspect-ratio: 1 / 1; }
.verhaeltnis--hoch { aspect-ratio: 4 / 5; }

.platzhalter {
  display: block;
  height: var(--space-sm);
  border-radius: var(--r-xs);
  background: linear-gradient(90deg,
    var(--surface-overlay) 25%,
    color-mix(in oklab, var(--surface-overlay), var(--ink) 7%) 50%,
    var(--surface-overlay) 75%);
  background-size: 200% 100%;
  animation: platzhalterWelle var(--t-lang) ease infinite;
}
.platzhalter--rund { width: var(--space-2xl); height: var(--space-2xl); border-radius: var(--r-pill); }

.platzhalter--titel { width: min(20rem, 60%); height: var(--space-xl); }
@keyframes platzhalterWelle {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.ladering {
  display: inline-block;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
  border: var(--border-w-stark) solid var(--border-strong);
  border-block-start-color: var(--accent);
  border-radius: var(--r-pill);
  animation: ladering var(--t-lang) linear infinite;
}
.ladering--klein { width: 1em; height: 1em; }
@keyframes ladering { to { rotate: 1turn; } }

.feld { display: flex; flex-direction: column; gap: var(--space-2xs); }
.feld > .hinweis { font-size: var(--text-2xs); color: var(--ink-faint); }

.feld__eingabe {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2xs);
}
.feld__eingabe > label {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--ink);
}

:where(input, textarea)::placeholder {
  color: color-mix(in oklab, var(--ink-faint) 40%, transparent);
  opacity: 1;
}

.feld__eingabe--eng { display: block; }
.feld__eingabe--eng > label {
  position: absolute;
  inset-inline-start: var(--space-sm);
  top: 50%;
  translate: 0 -50%;
  pointer-events: none;
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  color: var(--ink-faint);
  transition: opacity var(--t-fast) var(--ease);
}

.feld__eingabe--eng > textarea + label { top: var(--space-2xs); translate: 0 0; }

.feld__eingabe--eng > :is(input, textarea):focus + label,
.feld__eingabe--eng > :is(input, textarea):not(:placeholder-shown) + label {
  opacity: 0;
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .feld__eingabe--eng > label { transition: none; }
}

.feld input, .feld textarea, .feld select {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  width: 100%;
  min-height: var(--ctl-h);
  padding: var(--space-2xs) var(--space-sm);
  color: var(--ink);
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-sm);
}
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible {
  border-color: var(--accent);
}

.feld--leerbar .feld__eingabe { position: relative; }
.feld--leerbar :is(input, textarea) {
  padding-inline-end: calc(var(--space-sm) + var(--icon) + var(--space-2xs));
}

.feld__leeren {
  position: absolute;
  inset-inline-end: var(--border-w);
  inset-block-end: var(--border-w);
  display: grid;
  place-items: center;
  width: var(--ctl-h);
  height: calc(var(--ctl-h) - 2 * var(--border-w));
  padding: 0;
  color: var(--ink-faint);
  background: none;
  border: 0;
  border-radius: var(--r-xs);
  visibility: hidden;
  cursor: pointer;
}

.feld--leerbar .feld__eingabe:has(:is(input, textarea):not(:placeholder-shown, :disabled, [readonly])) .feld__leeren {
  visibility: visible;
}

.feld__leeren--oben { inset-block-end: auto; }
.feld__leeren { transition: color var(--t-sofort) var(--ease); }
.feld__leeren:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .platzhalter { animation: none; }
  
  .ladering { animation: none; border-color: var(--ink-faint); }
}

.zustaende { display: grid; gap: var(--space-md); width: 100%; }

.zustaende--spalten { grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); }

.zustaende--weit { grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); column-gap: var(--space-2xl); }

.zustaende--getrennt { gap: var(--space-2xl); }
.zustaende--getrennt > .zustaende__fall {
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
}
.zustaende--getrennt > .zustaende__fall > .zustaende__marke {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

.zustaende__fall { display: grid; gap: var(--space-2xs); align-content: start; }
.zustaende__marke {
  font-size: var(--text-2xs);
  color: var(--ink-faint);
}

.marke[data-ton="1"] { --ton: var(--ton-1); }
.marke[data-ton="2"] { --ton: var(--ton-2); }
.marke[data-ton="3"] { --ton: var(--ton-3); }
.marke[data-ton="4"] { --ton: var(--ton-4); }
.marke[data-ton="5"] { --ton: var(--ton-5); }
.marke[data-ton="6"] { --ton: var(--ton-6); }
.marke[data-ton] { color: var(--ton); border-color: color-mix(in oklab, var(--ton) 55%, transparent); background: color-mix(in oklab, var(--ton) 7%, transparent); }
.marke[data-ton]::before { background: var(--ton); }
.marke--pass.marke--voll { background: color-mix(in oklab, var(--state-pass) 12%, transparent); }

.text-bild, .schritte, .bildgruppe-drei, .bildgruppe-vier,
.fallbeispiele, .beitraege-autor, .beitraege-kante {
  container-type: inline-size;
  padding-block: var(--space-xl);
}

.text-bild__titel, .schritte__titel, .bildgruppe-drei__titel, .bildgruppe-vier__titel,
.fallbeispiele__titel, .beitraege-autor__titel, .beitraege-kante__titel {
  margin: 0;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.text-bild p, .schritte p, .bildgruppe-drei p, .bildgruppe-vier p,
.fallbeispiele p, .beitraege-autor p, .beitraege-kante p { margin: 0; max-width: var(--wrap-text); }

.text-bild figure, .schritte figure, .bildgruppe-drei figure, .bildgruppe-vier figure,
.fallbeispiele figure, .beitraege-autor figure { margin: 0; }

:where(.schritte ol, .bildgruppe-vier ul, .fallbeispiele ul) { margin: 0; padding: 0; list-style: none; }

.text-bild__bild, .schritte__bild, .bildgruppe-drei__bild, .bildgruppe-vier__bild,
.fallbeispiele__bild, .beitraege-autor__bild {
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-overlay);
}
.text-bild__bild img, .schritte__bild img, .bildgruppe-drei__bild img, .bildgruppe-vier__bild img,
.fallbeispiele__bild img, .beitraege-autor__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bildgruppe-drei__kopf, .bildgruppe-vier__kopf, .fallbeispiele__kopf, .beitraege-autor__kopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}
.bildgruppe-drei__kopf p, .bildgruppe-vier__kopf p,
.fallbeispiele__kopf p, .beitraege-autor__kopf p { color: var(--ink-muted); font-size: var(--text-md); }

.text-bild__link, .bildgruppe-drei__link, .beitraege-kante__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: var(--fw-semibold);
  color: var(--accent);
  text-decoration: none;
}
.text-bild__link .symbol, .bildgruppe-drei__link .symbol, .beitraege-kante__link .symbol {
  transition: transform var(--t-fast) var(--ease);
}
.text-bild__link:hover .symbol, .bildgruppe-drei__link:hover .symbol,
.beitraege-kante__link:hover .symbol { transform: translateX(var(--space-3xs)); }

.text-bild__innen { display: grid; gap: var(--space-xl); align-items: center; }
.text-bild__bild, .text-bild--gespiegelt .text-bild__bild { aspect-ratio: auto; }
.text-bild__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.text-bild__text > p:not(.ueberzeile) { color: var(--ink-muted); font-size: var(--text-md); }
.text-bild__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-xs); }
@container (min-width: 48rem) {
  .text-bild__innen { grid-template-columns: 1fr 1fr; gap: var(--space-4xl); }
  
  .text-bild--gespiegelt .text-bild__innen { grid-template-areas: "bild text"; }
  .text-bild--gespiegelt .text-bild__text { grid-area: text; }
  .text-bild--gespiegelt .text-bild__bild { grid-area: bild; }
}

.schritte__raster { display: grid; gap: var(--space-xl); align-items: center; }
.schritte__bild { aspect-ratio: auto; align-self: center; }

.text-bild__bild img, .schritte__bild img { height: auto; }
.schritte__text { min-width: 0; }
.schritte__text > .ueberzeile { margin-bottom: var(--space-sm); }
.schritte__liste { counter-reset: schritt; margin-top: var(--space-md); }
.schritte__liste li {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: var(--space-2xl) 1fr;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-top: var(--border-w) solid var(--border-subtle);
}
.schritte__liste li:last-child { border-bottom: var(--border-w) solid var(--border-subtle); }
.schritte__liste li::before {
  content: counter(schritt, decimal-leading-zero);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.schritte__liste b { display: block; font-size: var(--text-lg); color: var(--ink); margin-bottom: var(--space-3xs); }
.schritte__liste span { display: block; color: var(--ink-muted); }
@container (min-width: 48rem) {
  .schritte__raster { grid-template-columns: 1.1fr 1fr; gap: var(--space-4xl); }
}

.bildgruppe-drei__raster { display: grid; gap: var(--space-lg); }
.bildgruppe-drei__bild { aspect-ratio: 3 / 2; }
.bildgruppe-drei__haupt figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); margin-top: var(--space-md); }
.bildgruppe-drei__haupt h3 { margin: 0; font-size: var(--text-xl); }
.bildgruppe-drei__haupt figcaption p { color: var(--ink-muted); }
.bildgruppe-drei__neben figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--ink-muted); }
@container (min-width: 48rem) {
  .bildgruppe-drei__raster { grid-template-columns: 3fr 2fr; grid-template-rows: auto auto; align-items: start; }
  .bildgruppe-drei__haupt { grid-row: span 2; }
}

.bildgruppe-vier__raster { display: grid; gap: var(--space-sm); grid-template-columns: 1fr 1fr; }
.bildgruppe-vier__raster .bildgruppe-vier__bild { aspect-ratio: 4 / 5; }
.bildgruppe-vier__raster .bildgruppe-vier__breit { grid-column: span 2; aspect-ratio: 16 / 9; }
.bildgruppe-vier__leistungen { display: grid; gap: var(--space-lg); margin-top: var(--space-2xl); }
.bildgruppe-vier__leistungen li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: start; }
.bildgruppe-vier__leistungen .symbol { width: var(--space-lg); height: var(--space-lg); color: var(--ink); margin-top: var(--space-3xs); }
.bildgruppe-vier__leistungen b { display: block; color: var(--ink); }
.bildgruppe-vier__leistungen span span { display: block; font-size: var(--text-sm); color: var(--ink-muted); }
@container (min-width: 36rem) { .bildgruppe-vier__leistungen { grid-template-columns: 1fr 1fr; } }
@container (min-width: 48rem) {
  .bildgruppe-vier__raster {
    grid-template-columns: 1fr 1.5fr 1fr;
    grid-template-areas: "a b c" "a d c";
    aspect-ratio: 2 / 1;
    gap: var(--space-md);
  }
  .bildgruppe-vier__raster .bildgruppe-vier__bild { aspect-ratio: auto; }
  .bildgruppe-vier__raster .bildgruppe-vier__breit { aspect-ratio: auto; grid-column: auto; }
  .bildgruppe-vier__a { grid-area: a; }
  .bildgruppe-vier__b { grid-area: b; }
  .bildgruppe-vier__c { grid-area: c; }
  .bildgruppe-vier__d { grid-area: d; }
}
@container (min-width: 64rem) { .bildgruppe-vier__leistungen { grid-template-columns: repeat(4, 1fr); } }

.fallbeispiele__raster { display: grid; gap: var(--space-xl); }
.fallbeispiele__bild { aspect-ratio: 3 / 2; }
.fallbeispiele__bild--oben img { object-position: center 20%; }
.fallbeispiele__haupt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.fallbeispiele__haupt .fallbeispiele__bild { align-self: stretch; }
.fallbeispiele__haupt h3 { margin: 0; font-size: var(--text-xl); text-wrap: balance; }
.fallbeispiele__haupt p { color: var(--ink-muted); }
.fallbeispiele__zahl { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-xs); color: var(--ink-muted); }
.fallbeispiele__zahl b { font-size: var(--text-5xl); line-height: 1; color: var(--ink); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.fallbeispiele__haupt .fallbeispiele__zahl { color: var(--ink-muted); }
.fallbeispiele__neben { display: grid; gap: var(--space-xl); }
.fallbeispiele__neben li { display: grid; justify-items: start; gap: var(--space-sm); }
.fallbeispiele__neben li .fallbeispiele__bild { justify-self: stretch; }
.fallbeispiele__neben h3 { margin: 0; font-size: var(--text-lg); text-wrap: balance; }
.fallbeispiele__neben .fallbeispiele__zahl b { font-size: var(--text-2xl); }
@container (min-width: 48rem) {
  .fallbeispiele__raster { grid-template-columns: 3fr 2fr; gap: var(--space-2xl); align-items: start; }
}

.beitraege-autor__liste { display: grid; gap: var(--space-2xl); }
.beitraege-autor__neben { display: grid; gap: var(--space-xl); }
.beitraege-autor__beitrag { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.beitraege-autor__beitrag .beitraege-autor__bild { align-self: stretch; aspect-ratio: 3 / 2; }
.beitraege-autor__bild img { object-position: center 20%; }
.beitraege-autor__bild--unten img { object-position: center 75%; }
.beitraege-autor__beitrag h3 { margin: 0; font-size: var(--text-xl); text-wrap: balance; }
.beitraege-autor__beitrag p { color: var(--ink-muted); }
.beitraege-autor__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.beitraege-autor__autor { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-xs); }
.beitraege-autor__autor b { display: block; color: var(--ink); font-size: var(--text-sm); }
.beitraege-autor__autor small { display: block; color: var(--ink-faint); font-size: var(--text-2xs); }
.beitraege-autor__aktion { display: flex; justify-content: center; margin-top: var(--space-2xl); }
@container (min-width: 48rem) {
  .beitraege-autor__neben { grid-template-columns: 1fr 1fr; }
  .beitraege-autor__beitrag--haupt { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
  .beitraege-autor__beitrag--haupt .beitraege-autor__bild { aspect-ratio: 4 / 3; }
  .beitraege-autor__beitrag--haupt h3 { font-size: var(--text-2xl); }
}

.beitraege-kante__kopfzeile { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xl); }
.beitraege-kante__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.beitraege-kante__raster { display: grid; gap: var(--space-md); }
.beitraege-kante__marken { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.beitraege-kante .inhaltskarte { width: 100%; gap: var(--space-sm); }
.beitraege-kante .inhaltskarte h3 { margin: 0; font-size: var(--text-lg); }
.beitraege-kante .inhaltskarte p { max-width: none; }
.beitraege-kante .inhaltskarte__mehr { margin-top: auto; }
@container (min-width: 48rem) {
  .beitraege-kante__raster { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
  .beitraege-kante__haupt { grid-row: span 2; padding: var(--space-xl); }
  .beitraege-kante .beitraege-kante__haupt h3 { font-size: var(--text-2xl); }
  .beitraege-kante .beitraege-kante__haupt p { font-size: var(--text-md); }
}

.hinweisband.meldung {
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-xs) calc(var(--gutter) + var(--ctl-h-sm));
  border-radius: 0;
  background: var(--surface-raised);
  border-block-end: var(--border-w) solid var(--border-subtle);
  position: relative;
  flex-wrap: wrap;
  text-align: center;
}
.hinweisband[hidden] { display: none; }
.hinweisband > .symbol { margin-top: 0; }
.hinweisband__text { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--space-3xs) var(--space-xs); }
.hinweisband__text b, .hinweisband__text p { display: inline; margin: 0; }
.hinweisband__schliessen { position: absolute; inset-block-start: 50%; inset-inline-end: var(--space-xs); translate: 0 -50%; }

@media (prefers-reduced-motion: reduce) {
  .text-bild__link .symbol, .bildgruppe-drei__link .symbol, .beitraege-kante__link .symbol { transition: none; }
  .text-bild__link:hover .symbol, .bildgruppe-drei__link:hover .symbol,
  .beitraege-kante__link:hover .symbol { transform: none; }
}

.beitraege-autor { inline-size: 100%; }
.beitraege-kante { inline-size: 100%; }
.bildgruppe-drei { inline-size: 100%; }
.bildgruppe-vier { inline-size: 100%; }
.fallbeispiele { inline-size: 100%; }
.hinweisband { inline-size: 100%; }
.schritte { inline-size: 100%; }
.text-bild { inline-size: 100%; }

.aufruf-bilder { container-type: inline-size; inline-size: 100%; padding-block: var(--space-xl); }
.aufruf-bilder :is(h2, p) { margin: 0; }
.aufruf-bilder__raster { display: grid; gap: var(--space-md); }
.aufruf-bilder__text {
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-lg);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
}
.aufruf-bilder__titel { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); max-width: 20ch; text-wrap: balance; }
.aufruf-bilder__lead { color: var(--ink-muted); max-width: var(--wrap-text); }
.aufruf-bilder__bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.aufruf-bilder__bilder .verhaeltnis { aspect-ratio: 3 / 4; }
@container (min-width: 48rem) {
  .aufruf-bilder__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aufruf-bilder__text { padding: var(--space-3xl) var(--space-2xl); }
  
  .aufruf-bilder__bilder .verhaeltnis { aspect-ratio: auto; min-height: 26rem; }
}

.schritte-reihe { container-type: inline-size; inline-size: 100%; padding-block: var(--space-xl); }
.schritte-reihe :is(h2, p, ol) { margin: 0; }
.schritte-reihe__kopf { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-2xl); }
.schritte-reihe__titel { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.schritte-reihe__lead { color: var(--ink-muted); max-width: var(--wrap-text); }
.schritte-reihe__liste {
  --schritte-reihe-kreis: var(--space-2xl);
  --schritte-reihe-luecke: var(--space-xl);
  counter-reset: schritt;
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--schritte-reihe-luecke);
}
.schritte-reihe__schritt {
  counter-increment: schritt;
  position: relative;
  display: grid;
  grid-template-columns: var(--schritte-reihe-kreis) minmax(0, 1fr);
  column-gap: var(--space-md);
  align-items: start;
}
.schritte-reihe__schritt::before {
  content: counter(schritt);
  display: grid;
  place-items: center;
  inline-size: var(--schritte-reihe-kreis);
  block-size: var(--schritte-reihe-kreis);
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface-base);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.schritte-reihe__schritt:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inline-size: calc(var(--schritte-reihe-kreis) / 2);
  inset-block-start: calc(var(--schritte-reihe-kreis) + var(--space-2xs));
  inset-block-end: calc(var(--space-2xs) - var(--schritte-reihe-luecke));
  
  border-inline-end: var(--border-w) dashed var(--border-strong);
}
.schritte-reihe__name { display: block; font-size: var(--text-lg); color: var(--ink); margin-bottom: var(--space-3xs); }
.schritte-reihe__text { display: block; color: var(--ink-muted); }
@container (min-width: 44rem) {
  .schritte-reihe__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .schritte-reihe__schritt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  
  .schritte-reihe__schritt:not(:last-child)::after {
    inset-inline-start: calc(var(--schritte-reihe-kreis) + var(--space-xs));
    inset-block-start: calc(var(--schritte-reihe-kreis) / 2);
    inset-block-end: auto;
    inline-size: calc(100% + var(--schritte-reihe-luecke) - var(--schritte-reihe-kreis) - var(--space-xs) * 2);
    border-inline-end: 0;
    border-block-start: var(--border-w) dashed var(--border-strong);
  }
}

.titel-punkte { container-type: inline-size; inline-size: 100%; display: flex; flex-wrap: wrap; align-items: start; gap: var(--space-2xl) var(--space-4xl); }
.titel-punkte > * { flex: 1 1 100%; min-width: 0; }
.titel-punkte :is(h2, h3, p, ol) { margin: 0; }
.titel-punkte__kopf { display: grid; gap: var(--space-md); align-content: start; }
.titel-punkte__titel { font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.titel-punkte__lead { color: var(--ink-muted); font-size: var(--text-lg); max-width: var(--wrap-text); }
.titel-punkte__liste { list-style: none; padding: 0; counter-reset: punkt; display: grid; }
.titel-punkte__liste > li {
  counter-increment: punkt;
  display: grid;
  grid-template-columns: var(--space-3xl) minmax(0, 1fr);
  column-gap: var(--space-md);
  row-gap: var(--space-2xs);
  padding-block: var(--space-lg);
  border-block-start: var(--border-w) solid var(--border-subtle);
}
.titel-punkte__liste > li::before {
  content: counter(punkt, decimal-leading-zero);
  grid-row: span 2;
  font-size: var(--text-3xl);
  font-weight: var(--fw-regular);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.titel-punkte__liste h3 { font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--ink); }
.titel-punkte__liste p { color: var(--ink-muted); max-width: var(--wrap-text); }
@container (min-width: 56rem) {
  .titel-punkte__kopf { flex: 5 1 0; }
  .titel-punkte__liste { flex: 7 1 0; }
  .titel-punkte__kopf { position: sticky; inset-block-start: calc(var(--haft-oben, 0px) + var(--space-2xl)); }
}

.reiter { display: grid; gap: var(--space-md); width: 100%; }
.reiter__leiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  border-bottom: var(--border-w) solid var(--border-subtle);
}
.reiter__wahl {
  display: inline-flex;
  cursor: pointer;
}
.reiter__wahl > span {
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  
  border-bottom: var(--border-w-stark) solid transparent;
  margin-bottom: calc(var(--border-w) * -1);
}
.reiter__wahl:hover > span { color: var(--ink); }
.reiter__wahl:has(:checked) > span {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.reiter__wahl:has(:focus-visible) > span {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(var(--border-w) * -2);
}

.reiter__blatt { display: none; }
.reiter:has([value="uebersicht"]:checked) .reiter__blatt[data-fuer="uebersicht"],
.reiter:has([value="ablauf"]:checked)     .reiter__blatt[data-fuer="ablauf"],
.reiter:has([value="aufwand"]:checked)    .reiter__blatt[data-fuer="aufwand"] {
  display: block;
}

.reiter__blatt[data-aktiv] { display: grid; gap: var(--space-lg); min-width: 0; }

.reiter--klar .reiter__leiste {
  width: fit-content;
  max-width: 100%;
  gap: var(--border-w-stark);
  padding: var(--border-w-stark);
  background: var(--surface-state);
  border: 0;
  border-radius: var(--r-md);
}
.reiter--klar .reiter__wahl > span {
  display: inline-flex;
  align-items: center;
  
  gap: var(--space-xs);
  margin: 0;
  font-weight: var(--fw-medium);
  
  color: var(--ink);
  border: var(--border-w) solid transparent;
  border-radius: var(--r-sm);
}
.reiter--klar .reiter__wahl > span > .symbol { flex: none; }
.reiter--klar .reiter__wahl:hover > span { color: var(--ink); background: color-mix(in oklab, var(--surface-raised) 55%, transparent); }
.reiter--klar .reiter__wahl:has(:checked) > span {
  color: var(--ink);
  background: var(--surface-raised);
  border-color: var(--border-subtle);
}

.reiter__zahl {
  padding: 0 var(--space-2xs);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  
  color: var(--ink);
  background: var(--surface-state);
  border-radius: var(--r-xs);
}
.reiter--klar .reiter__wahl:has(:checked) .reiter__zahl { color: var(--ink); background: var(--accent-soft); }

.aufklapp-gruppe { display: grid; gap: var(--space-2xs); width: 100%; }

.aufklapp {
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-sm);
  
  overflow: clip;
}
.aufklapp > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--ctl-h);
  padding: var(--space-2xs) var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  
  border-bottom: var(--border-w) solid transparent;
}
.aufklapp > summary::-webkit-details-marker { display: none; }

.aufklapp > summary .symbol--pfeil {
  flex: none;
  color: var(--ink-muted);
  transition: rotate var(--t-fast) var(--ease);
}
.aufklapp[open] > summary .symbol--pfeil { rotate: 180deg; }

.aufklapp--band { background: none; border: 0; border-radius: 0; border-top: var(--border-w) solid var(--border-subtle); }
.aufklapp--band:first-child { border-top: 0; }
.aufklapp--band > summary { padding: var(--space-xs) 0; margin: 0; background: none; border-radius: 0;
  font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-muted); }
.aufklapp--band > summary:hover { background: none; color: var(--ink); }
.aufklapp--band[open] > summary { border-bottom-color: transparent; }
.aufklapp--band > :not(summary) { padding: 0 0 var(--space-sm); }
.aufklapp > summary:hover { background: var(--surface-state); }

.aufklapp[open] > summary { border-bottom-color: var(--border-subtle); }
.aufklapp > :not(summary) {
  margin: 0;
  padding: var(--space-sm) var(--space-md) var(--space-md);
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .aufklapp > summary .symbol--pfeil { transition: none; }
}

.reiter-merkmale { container-type: inline-size; container-name: reiter; inline-size: 100%; }
.reiter-merkmale .reiter { gap: var(--space-lg); }
.reiter-merkmale .reiter__leiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-xs);
  border: 0;
  
  align-items: stretch;
}
.reiter-merkmale .reiter__wahl > span { align-content: start; }
.reiter-merkmale .reiter__wahl { display: flex; align-items: stretch; }
.reiter-merkmale .reiter__wahl > span {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-3xs) var(--space-xs);
  width: 100%;
  margin: 0;
  padding: var(--space-sm);
  background: var(--surface-base);
  
  border: var(--border-w-stark) solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--ink);
}
.reiter-merkmale .reiter__wahl > span > .symbol { grid-row: span 2; margin-block-start: var(--space-3xs); color: var(--ink-muted); }
.reiter-merkmale .reiter__wahl > span > b { font-size: var(--text-sm); }
.reiter-merkmale .reiter__wahl > span > small { font-size: var(--text-xs); color: var(--ink-muted); line-height: var(--leading-snug); }
.reiter-merkmale .reiter__wahl:hover > span { border-color: var(--border-strong); }
.reiter-merkmale .reiter__wahl:has(:checked) > span {
  background: var(--surface-raised);
  border-color: var(--accent);
}
.reiter-merkmale .reiter__wahl:has(:checked) > span > .symbol { color: var(--accent); }
.reiter-merkmale .reiter__wahl:has(:focus-visible) > span { outline-offset: calc(var(--border-w) * -2); }
.reiter-merkmale .reiter__blatt[data-aktiv] { grid-template-columns: 1fr; gap: var(--space-lg); align-items: center; }

.reiter-merkmale__text { display: grid; gap: var(--space-sm); align-content: start; }
.reiter-merkmale__titel { font-size: var(--text-xl); font-weight: var(--fw-semibold); line-height: var(--leading-tight); text-wrap: balance; }
.reiter-merkmale__text p { color: var(--ink-muted); }
.reiter-merkmale__punkte { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); color: var(--ink-muted); font-size: var(--text-sm); }
.reiter-merkmale__punkte li { padding-block-end: var(--space-2xs); border-block-end: var(--border-w) solid var(--border-subtle); }

.reiter-merkmale__bild {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  margin: 0;
  aspect-ratio: 16 / 10;
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--ink-faint);
  font-size: var(--text-xs);
}
.reiter-merkmale__bild .symbol { width: var(--space-xl); height: var(--space-xl); }

.reiter-merkmale__bild:has(> .browserrahmen, > .telefonrahmen, > img) { aspect-ratio: auto; background: none; border: 0; padding: 0; }
.reiter-merkmale__bild > img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }

@container reiter (max-width: 40rem) {
  .reiter-merkmale .reiter__wahl > span > small { display: none; }
  .reiter-merkmale .reiter__wahl > span { grid-template-columns: auto 1fr; align-items: center; }
  .reiter-merkmale .reiter__wahl > span > .symbol { grid-row: auto; margin-block-start: 0; }
}
@container reiter (min-width: 52rem) {
  .reiter-merkmale .reiter__blatt[data-aktiv] { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); }
}

.bildmuster {
  margin: 0;
}
.bildmuster > img,
.bildmuster > svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
}
.bildmuster > img {
  object-fit: cover;
}
.bildmuster > svg {
  background: var(--bildmuster-grund, var(--surface-base));
}
.bildmuster > figcaption {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.bildmuster__grund { fill: var(--bildmuster-grund, var(--surface-base)); }
.bildmuster__linie { fill: none; stroke: var(--bildmuster-grund, var(--surface-base)); }
.bildmuster__kante { fill: none; stroke: var(--accent); }
.bildmuster__koerper { fill: var(--accent); }
.bildmuster__griff { fill: var(--bildmuster-grund, var(--surface-base)); stroke: var(--accent); }
.bildmuster__schrift {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 75%;
}

@keyframes bildmuster-lamelle {
  from { transform: translateY(-34px); }
  to { transform: translateY(34px); }
}
.bildmuster__lamelle {
  animation: bildmuster-lamelle calc(var(--t-lang) * 2.7) var(--ease-in-out) infinite alternate;
}
.bildmuster--steht .bildmuster__lamelle {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .bildmuster__lamelle { animation: none; }
}

.nachricht {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}
.nachricht__kopf {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin-bottom: var(--space-3xs);
}
.nachricht__kopf > b { color: var(--ink); }

.nachricht__zeit {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xs);
  color: var(--ink-faint);
}
.nachricht p {
  margin: 0;
  max-width: var(--wrap-text);
  font-size: var(--text-sm);
  color: var(--ink);
}

.sprechblasen {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: min(25rem, 100%);
}
.sprechblase {
  position: relative;
  
  margin: 0;
  max-width: 78%;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--ink);
  
  border-radius: var(--r-md);
  border: var(--border-w) solid transparent;
}

.sprechblase--sie {
  align-self: flex-start;
  background: var(--surface-raised);
  border-bottom-left-radius: var(--r-xs);
}

.sprechblase--ich {
  align-self: flex-end;
  background: var(--accent-soft);
  border-color: var(--accent);
  border-bottom-right-radius: var(--r-xs);
}

.sprechblase__reaktion {
  position: absolute;
  inset-inline-end: var(--space-xs);
  bottom: calc(-1 * var(--space-sm));
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 0 var(--space-2xs);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-muted);
  background: var(--surface-overlay);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-sm);
}
.sprechblase__reaktion > .symbol { width: var(--icon-sm); height: var(--icon-sm); }
.sprechblasen .sprechblase:has(.sprechblase__reaktion) { margin-bottom: var(--space-sm); }

.verlaufsmarke {
  
  margin: 0;
  max-width: none;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.verlaufsmarke::before,
.verlaufsmarke::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.systemnotiz {
  display: flex;
  width: fit-content;
  margin: var(--space-sm) auto 0;
  align-items: center;
  gap: var(--space-xs);
  max-width: 100%;
  padding: var(--space-3xs) var(--space-sm);
  border-radius: var(--r-md);
  background: var(--surface-overlay);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}
.systemnotiz > .symbol { flex: none; width: var(--icon-sm); height: var(--icon-sm); }

.verlauf {
  position: relative;
  width: min(28rem, 100%);
  
  timeline-scope: --verlauf;
}
.verlauf__liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  height: 17rem;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: var(--space-sm);
  background: var(--surface-raised);
  border-radius: var(--r-md);
  scroll-timeline: --verlauf block;
}

.verlauf__sprung {
  position: absolute;
  inset-inline-start: 50%;
  bottom: var(--space-sm);
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--ctl-h-sm);
  padding-inline: var(--space-sm);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  text-decoration: none;
  color: var(--accent-ink);
  background: var(--accent);
  border: var(--border-w) solid var(--accent);
  border-radius: var(--r-sm);
}
.verlauf__sprung:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.verlauf__sprung > .symbol { width: var(--icon-sm); height: var(--icon-sm); }

.verlauf__sprung { display: none; }

@supports (animation-timeline: scroll()) {
  .verlauf__sprung {
    display: inline-flex;
    animation: verlaufSprung steps(1) both;
    animation-timeline: --verlauf;
  }
  
  @keyframes verlaufSprung {
    0%, 90% { opacity: 1; visibility: visible; }
    91%, 100% { opacity: 0; visibility: hidden; }
  }
}

@media (prefers-reduced-motion: reduce) {
  
  .verlauf__sprung {
    display: inline-flex;
    animation: none;
    opacity: 1;
    visibility: visible;
  }
}

.eigenschaften {
  --kompakt-label: var(--label-w-eigen, var(--label-w));
  
  display: grid;
  gap: var(--space-2xs);
  container-type: inline-size;
  min-width: 0;
}
.eigenschaften dl { margin: 0; display: grid; gap: var(--space-3xs); }
.eigenschaft {
  display: grid;
  grid-template-columns: var(--kompakt-label) minmax(0, 1fr);
  column-gap: var(--space-xs);
  
  align-items: center;
  min-height: var(--ctl-h-sm);
  padding-block: var(--space-3xs);
  font-size: var(--text-sm);
}
.eigenschaft dt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--ink-muted);
}

.eigenschaft dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  padding-inline: var(--wertkante) 0;
}

.eigenschaften:not([data-alle-felder]) .eigenschaft[data-leer] { display: none; }
.felder-schalter { justify-self: start; margin-top: var(--space-2xs); }

.felder-schalter:is([data-alle-felder="immer"] *) { display: none; }

@container (max-width: 26rem) {
  .eigenschaft { --kompakt-label: 6.5rem; }
}

.verk .feld__eingabe { position: relative; }
.verk-sprung {
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--space-2xs);
  display: grid;
  place-items: center;
  inline-size: var(--space-xl);
  padding: 0;
  font: inherit;
  color: var(--ink-muted);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--t-sofort) var(--ease), background var(--t-sofort) var(--ease);
}
.verk-sprung[hidden] { display: none; }
.verk-sprung:hover { color: var(--ink); background: var(--surface-state); }

.verk:has(.verk-sprung:not([hidden])) input { padding-inline-end: calc(var(--space-xl) + var(--space-xs)); }

.marke-sprung {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: text-decoration-color var(--t-sofort) var(--ease);
  
  text-align: start;
}

.eigenschaft dd .marke-sprung, li > .marke-sprung { text-decoration-color: var(--border-strong); }
.marke-sprung:hover,
.eigenschaft dd .marke-sprung:hover { text-decoration-color: currentColor; }

.abschnittskopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}
.abschnittskopf > :is(h2, h3, h4) { margin: 0; font-size: var(--text-md); }
.plus-knopf { gap: var(--space-3xs); color: var(--ink-muted); }
.plus-knopf:hover { color: var(--ink); }

.notiz-lesen {
  display: grid;
  gap: 0;
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
}
.notiz-lesen__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  border-bottom: var(--border-w) solid var(--border-subtle);
}
.notiz-lesen__titel {
  
  margin: 0;
  margin-inline-end: auto;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.notiz-lesen > article {
  height: var(--textbox-h);
  min-height: var(--ctl-h);
  overflow: auto;
  resize: vertical;
  padding: var(--space-xs) var(--space-sm);
  border: 0;
  border-radius: 0;
}

.notiz-lesen > article :is(h2, h3, h4) { margin-top: var(--space-md); }
.notiz-lesen > article > :first-child { margin-top: 0; }

.notiz-teil {
  display: grid;
  gap: 0;
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
  transition: border-color var(--t-sofort) var(--ease);
}

.notiz-teil:focus-within { border-color: var(--border-strong); }
.notiz-teil textarea,
.notiz-teil textarea:focus {
  border-color: transparent;
  background: transparent;
  padding: var(--space-xs) var(--space-sm);
}

.notiz-teil:has(textarea:focus-visible) {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(var(--border-w) * -2);
}
.notiz-teil textarea:focus-visible { outline: none; }

.notiz-teil .feld__eingabe > label:not(.visually-hidden) {
  padding: var(--space-xs) var(--space-sm) 0;
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
}
.notiz-teil__verk,
.notiz-teil > .btn {
  border-top: var(--border-w) solid var(--border-subtle);
  padding: var(--space-3xs) var(--space-sm);
}
.notiz-teil > .btn {
  justify-self: stretch;
  justify-content: start;
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.notiz-teil__verk .feld { --kompakt-label: 6.5rem; margin: 0; }

dialog.angedockt {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--z-blatt);
  margin: 0;
  width: var(--andock-b, var(--dock-w));
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  border-radius: 0;
  border-block: 0;
  border-inline-end: 0;
}
dialog.angedockt > form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-md); }
dialog.angedockt .fenster__inhalt { flex: 1; min-height: 0; max-height: none; overflow-y: auto; overflow-x: clip; }

body:has(> dialog.angedockt[open], :not(.splitansicht) > dialog.angedockt[open]) main {
  margin-inline-end: var(--andock-b, var(--dock-w));
}

.andock-griff { display: none; }
dialog.angedockt .andock-griff {
  display: block;
  position: fixed;
  inset-block: 0;
  inset-inline-end: calc(var(--andock-b, var(--dock-w)) - var(--space-xs));
  width: var(--space-md);
  cursor: col-resize;
  z-index: var(--z-griff);
  touch-action: none;
}
dialog.angedockt .andock-griff::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--space-xs) - var(--border-w));
  width: var(--border-w-stark);
  background: transparent;
  transition: background var(--t-fast) var(--ease);
}
dialog.angedockt .andock-griff:is(:hover, :focus-visible, [data-zieht])::after { background: var(--border-strong); }

@media (max-width: 719px) {
  dialog.angedockt { width: 100vw; }
  body:has(> dialog.angedockt[open], :not(.splitansicht) > dialog.angedockt[open]) main { margin-inline-end: 0; }
  dialog.angedockt .andock-griff { display: none; }
}

.splitansicht {
  
  inline-size: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-sm);
}

.splitansicht__liste {
  flex: 999 1 var(--menu-w);
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--space-xs);
}
.splitansicht > dialog.angedockt {
  position: relative;
  inset: auto;
  z-index: auto;
  flex: 1 1 var(--panel-w);
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: none;
  min-height: var(--textbox-h);
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: var(--r-md);
}

.splitansicht > dialog.angedockt .andock-griff { display: none; }

.splitansicht tr[aria-current="true"] { background: var(--surface-state); }

.splitansicht tr[aria-current="true"] > td { color: var(--ink); }

dialog.angedockt :is(.fenster__kopf, .seitenblatt__kopf) {
  position: sticky;
  top: calc(-1 * var(--space-lg));
  z-index: var(--z-klebend);
  margin-block: calc(-1 * var(--space-xs));
  padding-block: var(--space-xs);
  background: var(--surface-overlay);
}
dialog.angedockt .fenster__fuss {
  position: sticky;
  bottom: calc(-1 * var(--space-lg));
  z-index: var(--z-klebend);
  margin-top: 0;
  padding-block: var(--space-sm);
  background: var(--surface-overlay);
  border-top: var(--border-w) solid var(--border-subtle);
}

:root[data-blatt-voll] dialog.angedockt:not(.splitansicht > dialog) {
  inset: 0;
  margin: auto;
  width: min(60rem, calc(100vw - 2 * var(--space-2xl)));
  height: fit-content;
  max-height: calc(100dvh - 2 * var(--space-2xl));
  overflow-y: auto;
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: var(--r-md);
}
:root[data-blatt-voll] dialog.angedockt:not(.splitansicht > dialog) > form { flex: none; width: 100%; }
:root[data-blatt-voll] dialog.angedockt:not(.splitansicht > dialog) .fenster__inhalt { flex: none; overflow: visible; min-height: auto; }
:root[data-blatt-voll] dialog.angedockt:not(.splitansicht > dialog) .andock-griff { display: none; }
:root[data-blatt-voll] body:has(dialog.angedockt[open]) main { margin-inline-end: 0; }

.eigenschaften-karte {
  display: grid;
  gap: var(--space-3xs);
  min-width: 0;
  padding: var(--space-sm) 0 0;
  border-top: var(--border-w) solid var(--border-subtle);
  container-type: inline-size;
}
.eigenschaften-karte > .felder-schalter { justify-self: start; margin-top: var(--space-3xs); }

.ablage-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs);
  min-width: 0;
  padding: var(--space-sm) 0 0;
  border-top: var(--border-w) solid var(--border-subtle);
}
.ablage-block .dateiablage { width: 100%; }

.aufgabe-meta {
  display: grid;
  grid-template-columns: var(--kompakt-label, var(--label-w)) minmax(0, 1fr);
  column-gap: var(--space-xs);
  row-gap: var(--space-2xs);
  
  margin: 0;
  padding: var(--space-xs) 0;
}
.aufgabe-meta dt { font-size: var(--text-sm); color: var(--ink-muted); }
.aufgabe-meta dd { min-width: 0; margin: 0; padding-inline-start: var(--wertkante); font-size: var(--text-sm); }

:has(> .formular--kompakt .eigenschaften-karte, > .eigenschaften-karte) > .aufgabe-meta { margin-inline: 0; padding: var(--space-xs) 0; }

.zelle-verk {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  max-width: 100%;
  min-width: 0;
  margin-inline-end: var(--space-3xs);
  padding: 0 var(--space-2xs);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-xs);
}

.zelle-sprung {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 0;
  block-size: calc(var(--space-md) + var(--space-2xs));
  overflow: hidden;
  padding: 0;
  font: inherit;
  color: var(--ink-muted);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  opacity: 0;
}
tr:is(:hover, :focus-within) .zelle-sprung,
.zelle-sprung:focus-visible { inline-size: calc(var(--space-md) + var(--space-2xs)); opacity: 1; }
.zelle-sprung:hover { color: var(--ink); background: var(--surface-state); }

@media (hover: none) { .zelle-sprung { inline-size: calc(var(--space-md) + var(--space-2xs)); opacity: 1; } }

.wahlchips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
}
.wahlchip {
  --chip: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  min-height: var(--ctl-h-sm);
  padding-inline: var(--space-xs) var(--space-sm);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface-state);
  border: var(--border-w) solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-sofort) var(--ease), border-color var(--t-sofort) var(--ease);
}
.wahlchip > .symbol { flex: none; color: var(--chip); }
.wahlchip[data-ton-zustand="pass"] { --chip: var(--state-pass); }
.wahlchip[data-ton-zustand="warn"] { --chip: var(--state-warn); }
.wahlchip[data-ton-zustand="fail"] { --chip: var(--state-fail); }
.wahlchip[data-ton-zustand="akzent"] { --chip: var(--accent); }
.wahlchip:hover { border-color: var(--border-subtle); }

.wahlchip[aria-pressed="true"] {
  background: color-mix(in oklab, var(--chip) 16%, var(--surface-base));
  border-color: var(--chip);
}
.wahlchip[aria-pressed="true"][data-ton-zustand=""] { --chip: var(--ink); }
.wahlchip:disabled { opacity: .6; cursor: default; }

.wahlchip--marke { border-radius: var(--r-xs); padding-inline: var(--space-xs) var(--space-2xs); font-size: var(--text-xs); }
.wahlchip--marke > .symbol:last-child { visibility: hidden; color: var(--ink-muted); }
.wahlchip--marke[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.wahlchip--marke[aria-pressed="true"] > .symbol:last-child { visibility: visible; }

.marken-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin: var(--space-xs) 0 0;
  font-size: var(--text-xs);
}

.nach-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs) var(--space-sm);
  font-size: var(--text-sm);
}
.nach-zeile .haken { min-height: 0; padding-block: 0; }
.nach-zeile .t-faint { font-size: var(--text-xs); }

.kal-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0 0 var(--space-xs);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}
.kal-legende__eintrag {
  --ton: var(--border-strong);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.kal-legende__eintrag::before {
  content: "";
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
  background: var(--ton);
  border-radius: var(--r-xs);
}

.kal-raster {
  --tage: 5;
  --kal-spalten: 3.5rem repeat(var(--tage), minmax(7rem, 1fr));
  display: block;
  overflow-x: auto;
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
}
.kal-raster__kopfteil,
.kal-raster__leib,
.kal-raster__fussteil {
  display: grid;
  grid-template-columns: var(--kal-spalten);
  min-width: min-content;
}
.kal-raster__kopfteil,
.kal-raster__fussteil { overflow: hidden; scrollbar-gutter: stable; }

.kal-raster__rolle {
  height: calc(var(--kal-stunde) * 10.5);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-block: var(--border-w) solid var(--border-subtle);
}
:is(.kal-raster__kopfteil, .kal-raster__leib, .kal-raster__fussteil) > :not(:last-child, :has(+ .kal-raster__ecke)) {
  border-inline-end: var(--border-w) solid var(--border-subtle);
}
.kal-raster__kopf { padding: var(--space-xs); font-size: var(--text-sm); border-bottom: var(--border-w) solid var(--border-subtle); }
.kal-raster__ecke:first-child { border-bottom: var(--border-w) solid var(--border-subtle); }
.kal-raster__kopf.ist-heute b { color: var(--accent); }
.kal-raster__ecke--ganz {
  display: flex;
  align-items: center;
  justify-content: end;
  padding-inline-end: var(--space-2xs);
  font-size: var(--text-2xs);
  color: var(--ink-muted);
}

.kal-raster__ganz {
  display: grid;
  align-content: start;
  gap: var(--space-3xs);
  min-height: var(--space-xl);
  padding: var(--space-3xs);
}

.kal-raster__hinweis,
.kal-raster__ecke--hinweis { min-height: var(--space-lg); }
.kal-raster__hinweis { display: flex; align-items: center; justify-content: center; }
.kal-mehr {
  padding: var(--border-w) var(--space-xs);
  font: inherit;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  background: var(--accent-soft);
  border: var(--border-w) solid var(--accent);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.kal-mehr:hover { background-image: linear-gradient(var(--surface-state), var(--surface-state)); }
.kal-raster__zeiten {
  display: grid;
  grid-auto-rows: var(--kal-stunde);
  font-size: var(--text-2xs);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.kal-raster__zeiten span { padding: var(--space-3xs) var(--space-2xs) 0 0; text-align: end; transform: translateY(-.5em); }
.kal-raster__zeiten span:first-child { transform: none; }
.kal-raster__tag {
  position: relative;
  display: grid;
  grid-auto-rows: var(--kal-stunde);
}
.kal-raster__tag.ist-heute { background: color-mix(in oklab, var(--accent) 4%, transparent); }

.kal-raster__slot {
  display: block;
  padding: 0;
  font: inherit;
  background: none;
  border: 0;
  border-top: var(--border-w) solid var(--border-subtle);
  cursor: copy;
}
.kal-raster__slot:first-child { border-top: 0; }
.kal-raster__slot:hover { background: var(--surface-state); }
.kal-raster__slot:focus-visible { outline-offset: calc(var(--border-w-stark) * -1); }

.kal-raster__jetzt {
  position: absolute;
  top: calc(var(--jetzt, 0) * var(--kal-stunde));
  inset-inline: 0;
  z-index: var(--z-ueber);
  border-top: var(--border-w-stark) solid var(--accent);
  pointer-events: none;
}

.kal-kachel {
  --ton: var(--border-strong);
  position: absolute;
  top: calc(var(--anfang, 0) * var(--kal-stunde));
  inset-inline-start: calc(var(--bahn, 0) * 100% / var(--bahnen, 1));
  inline-size: calc(100% / var(--bahnen, 1) - var(--space-3xs));
  block-size: calc(var(--dauer, 1) * var(--kal-stunde) - var(--border-w-stark));
  z-index: var(--z-ueber);
  display: flex;
  flex-direction: column;
  gap: var(--border-w);
  overflow: hidden;
  padding: var(--border-w-stark) var(--space-2xs);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--ink);
  
  background: color-mix(in oklab, var(--ton) 14%, var(--surface-raised));
  border: var(--border-w) solid var(--ton);
  border-radius: var(--r-sm);
}
.kal-kachel[data-ton="1"], .kal-legende__eintrag[data-ton="1"] { --ton: var(--ton-1); }
.kal-kachel[data-ton="2"], .kal-legende__eintrag[data-ton="2"] { --ton: var(--ton-2); }
.kal-kachel[data-ton="3"], .kal-legende__eintrag[data-ton="3"] { --ton: var(--ton-3); }
.kal-kachel[data-ton="4"], .kal-legende__eintrag[data-ton="4"] { --ton: var(--ton-4); }
.kal-kachel[data-ton="5"], .kal-legende__eintrag[data-ton="5"] { --ton: var(--ton-5); }
.kal-kachel[data-ton="6"], .kal-legende__eintrag[data-ton="6"] { --ton: var(--ton-6); }
.kal-kachel a { color: inherit; text-decoration: none; }
.kal-kachel a:hover { text-decoration: underline; }

.kal-kachel > span:not(.marke) { flex: none; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kal-kachel__titel { font-weight: var(--fw-semibold); }
.kal-kachel__zeit,
.kal-kachel__ort { color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.kal-kachel--ganz {
  position: static;
  display: block;
  inline-size: auto;
  block-size: auto;
  font: inherit;
  font-size: var(--text-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: start;
}
button.kal-kachel--ganz { cursor: pointer; }

.kal-kachel--aufgabe { --ton: var(--accent); }
.kal-kachel--hinweis { --ton: var(--state-warn); }

.skriptfenster {
  position: fixed;
  
  inset: var(--space-xl) auto auto var(--space-xl);
  margin: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
  resize: both;
  min-width: 20rem;
  min-height: var(--textbox-h);
  max-width: 100vw;
  max-height: 100dvh;
  color: var(--ink);
  background: var(--surface-overlay);
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: var(--r-md);
}
.skriptfenster:popover-open { display: flex; }

.skriptfenster[data-lage="links"],
.skriptfenster[data-lage="rechts"] { resize: horizontal; border-radius: 0; border-block: 0; }
.skriptfenster__kopf {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--border-w) solid var(--border-subtle);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.skriptfenster[data-zieht] .skriptfenster__kopf { cursor: grabbing; }
.skriptfenster__kopf .t-muted { min-width: 0; overflow: hidden; font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
.skriptfenster__knoepfe { display: flex; align-items: center; gap: var(--space-xs); margin-inline-start: auto; }
.skriptfenster__text {
  flex: 1;
  min-height: 0;
  max-width: none;
  overflow: auto;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-md);
}
.skriptfenster[data-spalten="2"] .skriptfenster__text {
  column-count: 2;
  column-gap: var(--space-xl);
  column-rule: var(--border-w) solid var(--border-subtle);
}

.skriptfenster__text :is(h2, h3, h4) { break-after: avoid; margin-top: var(--space-md); }
.skriptfenster__text > :first-child { margin-top: 0; }
.skriptfenster__hinweis {
  margin: 0;
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-xs);
  border-top: var(--border-w) solid var(--border-subtle);
}

.kom-ausloeser {
  position: fixed;
  
  inset: auto;
  width: auto;
  height: auto;
  max-height: none;
  margin: 0;
  gap: var(--space-3xs);
  border: var(--border-w-stark) solid var(--border-strong);
}
.kom-popup {
  position: fixed;
  
  inset: auto;
  width: min(24rem, calc(100vw - 2 * var(--space-md)));
  height: auto;
  max-height: calc(100dvh - 2 * var(--space-md));
  margin: 0;
  overflow: auto;
  display: none;
  align-content: start;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  color: var(--ink);
  background: var(--surface-overlay);
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: var(--r-md);
}
.kom-popup:popover-open { display: grid; }
.kom-popup__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }

.kom-popup__zitat {
  margin: 0;
  max-height: 6rem;
  overflow: auto;
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--text-sm);
  color: var(--ink);
  background: color-mix(in oklab, var(--state-warn) 22%, transparent);
  border-radius: var(--r-xs);
}
.kom-popup textarea { min-height: 5rem; max-height: 12rem; resize: vertical; }
.kom-popup__fuss { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-xs); }

::highlight(kommentar) { background-color: color-mix(in oklab, var(--state-warn) 22%, transparent); }
::highlight(kommentar-neu) { background-color: color-mix(in oklab, var(--accent) 28%, transparent); }

table:has(> tbody.gruppe) { border-collapse: separate; border-spacing: 0; }
tbody.gruppe > tr > :is(td, th):first-child { border-inline: var(--border-w) solid var(--border-subtle); border-inline-end-width: 0; }
tbody.gruppe > tr > :is(td, th):last-child { border-inline-end: var(--border-w) solid var(--border-subtle); }
tbody.gruppe > tr > :is(td, th):only-child { border-inline-width: var(--border-w); }
tbody.gruppe > tr:last-child > :is(td, th) { border-bottom: var(--border-w) solid var(--border-subtle); }
tbody.gruppe > tr.gruppe__kopf > th {
  padding-block: var(--space-xs) var(--space-3xs);
  font-weight: var(--fw-regular);
  text-align: start;
  text-transform: none;
  letter-spacing: normal;
  background: var(--surface-raised);
  border-top: var(--border-w) solid var(--border-subtle);
  border-bottom: var(--border-w) solid var(--border-subtle);
  border-start-start-radius: var(--r-md);
  border-start-end-radius: var(--r-md);
}
tbody.gruppe > tr:last-child > :is(td, th):first-child { border-end-start-radius: var(--r-md); }
tbody.gruppe > tr:last-child > :is(td, th):last-child { border-end-end-radius: var(--r-md); }
.gruppe__zeile { display: inline-flex; align-items: center; gap: var(--space-md); position: sticky; inset-inline-start: 0; background: var(--surface-base); padding-inline-end: var(--space-xs); }
.gruppe__zeile b { font-weight: var(--fw-semibold); }

.gruppe__schalter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0;
  margin-inline-start: calc(-1 * var(--space-2xs));
  font: inherit;
  color: var(--ink);
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer; font-size: var(--text-md); }
.gruppe__schalter:hover { background: var(--surface-state); }
.gruppe__schalter .gruppe__anzahl { margin-inline-start: var(--space-3xs); }
.gruppe__anzahl,
.gruppe__summe { font-size: var(--text-xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.gruppe__neu {
  display: inline-grid;
  place-items: center;
  inline-size: var(--space-lg);
  block-size: var(--space-lg);
  padding: 0;
  color: var(--ink-faint);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.gruppe__neu:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 7%, transparent); }
tbody.gruppe-abstand td { height: var(--space-md); padding: 0; background: none; border: 0; }

.dok-knoepfe { display: inline-flex; align-items: center; gap: var(--space-3xs); }
.dok-knoepfe .btn { gap: var(--space-3xs); }
.dok-vorschau {
  max-height: 60vh;
  overflow: auto;
  padding: var(--space-xs);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
}
.dok-vorschau :is(img, canvas) { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.dok-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
}
.dok-link > div { display: grid; gap: var(--space-3xs); flex: 1 1 14rem; min-width: 0; }
.dok-link > div span { font-size: var(--text-sm); color: var(--ink-muted); overflow-wrap: anywhere; }

.anhang-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.anhang-liste .anhang { width: 100%; }
.anhang-liste .kachel { position: relative; overflow: hidden; }

.anhang-liste .kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.anhang-liste .anhang__text b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.u-wickel { container-type: inline-size; inline-size: 100%; }
.u-seite { display: grid; align-items: start; gap: var(--space-xl); }
@container (min-width: 60rem) {
  .u-seite { grid-template-columns: minmax(0, 1fr) 21rem; }
  
  .u-rand { position: sticky; top: var(--space-md); padding: 0; border-top: 0; }
}
.u-haupt { display: grid; gap: var(--space-lg); min-width: 0; }
.u-rand {
  display: grid;
  align-content: start;
  gap: var(--space-lg);
  min-width: 0;
  
  padding: var(--space-md) 0 0;
  border-top: var(--border-w) solid var(--border-subtle);
}
.u-block { display: grid; gap: var(--space-xs); min-width: 0; }
.u-block__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.u-block__kopf:only-child { justify-content: flex-end; }
.u-block__titel { margin: 0; font-size: var(--text-md); }

.u-wickel--rollen { block-size: 100%; min-block-size: 0; }

.u-griff { display: none; }

@container (min-width: 40rem) {
  .u-seite--rollen { position: relative; block-size: 100%; min-block-size: 0; grid-template-columns: minmax(0, 1fr) var(--rand-b, 22rem); grid-template-rows: minmax(0, 1fr); gap: 0; }
  
  .u-seite--rollen > .u-haupt { position: relative; block-size: 100%; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-md) var(--space-md) var(--space-xl) 0; }
  .u-seite--rollen > .u-rand { position: relative; top: auto; block-size: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    gap: 0; padding: var(--space-sm) var(--space-md) var(--space-xl); background: var(--surface-raised); }
  .u-griff { display: block; position: absolute; inset-block: 0; inset-inline-end: calc(var(--rand-b, 22rem) - var(--space-xs)); inline-size: var(--space-sm); cursor: col-resize; touch-action: none; z-index: var(--z-griff); }
  .u-griff::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: calc(50% - var(--border-w)); inline-size: var(--border-w-stark); background: transparent; transition: background var(--t-fast) var(--ease); }
  .u-griff:is(:hover, :focus-visible)::after, :root[data-zieht] .u-griff::after { background: var(--border-strong); }
  .u-griff:focus-visible { outline: none; }
  .u-griff:focus-visible::after { background: var(--focus); }
}
:root[data-zieht] { cursor: col-resize; user-select: none; }

.verlauf-spalte { display: grid; align-content: start; gap: var(--space-xs); }
.verlauf-spalte > ul { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.verlauf-spalte > ul > li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-sm); font-size: var(--text-sm); }
.verlauf-spalte time { color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--space-xs); }

.zahl {
  display: grid;
  align-content: start;
  gap: var(--space-3xs);
  padding: var(--space-2xs) 0;
}
.zahl b { font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.zahl span { font-size: var(--text-xs); color: var(--ink-muted); }
.zahl--warn b { color: var(--state-warn); }
.zahl--fail b { color: var(--state-fail); }

button.zahl {
  padding: var(--space-2xs) var(--space-sm);
  font: inherit;
  color: var(--ink);
  text-align: start;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t-sofort) var(--ease), background-color var(--t-sofort) var(--ease);
}
button.zahl:hover { background: var(--surface-state); }

button.zahl:focus-visible { outline: var(--border-w-stark) solid var(--focus); outline-offset: calc(var(--border-w) * -2); }
button.zahl[aria-pressed="true"] { background: var(--surface-state); box-shadow: inset 0 calc(-1 * var(--border-w-stark)) 0 var(--ink); }

button.zahl:is(:hover, [aria-pressed="true"]) span { color: var(--ink); }

dialog[data-ton="1"], :where(.seitenleiste__spalte) a[data-ton="1"] { --ton: var(--ton-1); }
dialog[data-ton="2"], :where(.seitenleiste__spalte) a[data-ton="2"] { --ton: var(--ton-2); }
dialog[data-ton="3"], :where(.seitenleiste__spalte) a[data-ton="3"] { --ton: var(--ton-3); }
dialog[data-ton="4"], :where(.seitenleiste__spalte) a[data-ton="4"] { --ton: var(--ton-4); }
dialog[data-ton="5"], :where(.seitenleiste__spalte) a[data-ton="5"] { --ton: var(--ton-5); }
dialog[data-ton="6"], :where(.seitenleiste__spalte) a[data-ton="6"] { --ton: var(--ton-6); }
dialog[data-ton]:is(.fenster, .seitenblatt) { border-top: calc(var(--border-w-stark) * 2) solid var(--ton); }
:where(.seitenleiste__spalte) a[data-ton] > .symbol { color: var(--ton); }
.blatt-chip {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: calc(var(--space-lg) + var(--space-2xs));
  block-size: calc(var(--space-lg) + var(--space-2xs));
  margin-inline-end: var(--space-2xs);
  color: var(--ton, var(--ink-muted));
  background: color-mix(in oklab, var(--ton, var(--ink)) 14%, var(--surface-base));
  border-radius: var(--r-sm);
}
.blatt-chip > .symbol { width: var(--icon-sm); height: var(--icon-sm); }

.blatt-chip + :is(h2, h3, h4) { margin-inline-end: auto; }

@media (prefers-reduced-motion: reduce) {
  .verk-sprung, .marke-sprung, .notiz-teil, .wahlchip, button.zahl,
  dialog.angedockt .andock-griff::after { transition: none; }
}

.crm {
  --text-2xs: var(--text-sm);
  --text-xs: var(--text-sm);
}
.crm .tabelle th,
.crm .tabelle caption {
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  font-weight: var(--fw-medium);
}

.crm .feld__eingabe > :is(input:not([type="checkbox"]):not([type="radio"]), textarea),
.crm .feld .eingabegruppe,
.crm .eigenauswahl > summary {
  background: transparent;
  border-color: var(--border-subtle);
}
.crm .feld__eingabe > :is(input:not([type="checkbox"]):not([type="radio"]), textarea):hover,
.crm .feld .eingabegruppe:hover,
.crm .eigenauswahl > summary:hover { border-color: var(--border-strong); }
.crm .feld__eingabe > :is(input:not([type="checkbox"]):not([type="radio"]), textarea):focus,
.crm .feld .eingabegruppe:focus-within,
.crm .eigenauswahl[open] > summary { background: transparent; border-color: var(--accent); }

.crm .formular--kompakt .feld :is(input:not([type="checkbox"]):not([type="radio"]):not(.tokenfeld__eingabe), textarea),
.crm .formular--kompakt .eigenauswahl > summary,
.crm .formular--kompakt .tokenfeld { border-color: transparent; }
.crm .formular--kompakt .feld :is(input:not([type="checkbox"]):not([type="radio"]):not(.tokenfeld__eingabe), textarea):hover,
.crm .formular--kompakt .eigenauswahl > summary:hover,
.crm .formular--kompakt .tokenfeld:hover { background: var(--surface-state); border-color: transparent; }

.crm .formular--kompakt .eigenauswahl[open] > summary { background: transparent; border-color: var(--accent); }

.crm .formular--kompakt .feld :is(input:not([type="checkbox"]):not([type="radio"]):not(.tokenfeld__eingabe), textarea):focus,
.crm .formular--kompakt .tokenfeld:focus-within { background: var(--surface-base); border-color: transparent; }

.crm .reiter--klar .reiter__leiste {
  width: 100%;
  gap: var(--space-md);
  padding: 0;
  background: none;
  border-radius: 0;
  border-bottom: var(--border-w) solid var(--border-subtle);
}
.crm .reiter--klar .reiter__wahl > span {
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  color: var(--ink-muted);
  box-shadow: inset 0 calc(-1 * var(--border-w-stark)) 0 transparent;
}
.crm .reiter--klar .reiter__wahl:hover > span { background: none; color: var(--ink); }
.crm .reiter--klar .reiter__wahl:has(:checked) > span {
  background: none;
  color: var(--ink);
  box-shadow: inset 0 calc(-1 * var(--border-w-stark)) 0 var(--ink);
}
.crm .reiter__zahl,
.crm .reiter--klar .reiter__wahl:has(:checked) .reiter__zahl { padding: 0; background: none; color: var(--ink-faint); }

.hinweis-punkt {
  display: inline-block;
  inline-size: var(--space-xs);
  block-size: var(--space-xs);
  margin-inline-start: var(--space-2xs);
  vertical-align: middle;
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: var(--r-pill);
}
.hinweis-punkt--neu { background: var(--state-warn); border-color: var(--state-warn); }

.passung { color: var(--ink); }

.tabelle-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  
  min-block-size: var(--ctl-h);
}

:root[data-leiste-ohne-namen] .tabelle-leiste__name { display: none; }

.tabelle-leiste__links { flex: 1 1 12rem; min-block-size: var(--ctl-h-sm); }

.zellmehr { padding: var(--space-2xs); }
.zellmehr__suche { inline-size: 100%; min-height: var(--ctl-h-sm); padding: 0 var(--space-xs); font: inherit; font-size: var(--text-sm); color: var(--ink);
  background: var(--surface-base); border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-sm); outline: none; }
.zellmehr__suche:focus { border-color: var(--accent); }
.zellmehr__liste { list-style: none; margin: var(--space-2xs) 0 0; padding: 0; max-block-size: 15rem; overflow-y: auto; }
.zellmehr__liste > li { display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-3xs) var(--space-xs); border-radius: var(--r-xs); cursor: pointer; }

.zellmehr__liste > li:hover, .zellmehr__liste > li:focus-visible { background: var(--surface-state); }
.zellmehr__leer { inline-size: var(--space-sm); flex: none; }

.tabmenue__abschnitt { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); padding: var(--space-xs) var(--space-xs) var(--space-3xs);
  font-size: var(--text-xs); color: var(--ink-faint); }
.tabmenue__link { padding: 0; font: inherit; color: var(--accent); background: none; border: 0; cursor: pointer; }
.tabmenue__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tabmenue__zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-3xs) var(--space-xs); font-size: var(--text-sm); }
.tabmenue__liste--lang { max-block-size: min(48rem, calc(100dvh - 12rem)); overflow-y: auto; }

.tabmenue[data-art="filter-erweitert"] { min-inline-size: min(36rem, calc(100vw - 2rem)); }
.fx { display: grid; gap: var(--space-2xs); padding: var(--space-xs); }
.fx-gruppe { display: grid; gap: var(--space-2xs); }
.fx-gruppe--innen { flex: 1; padding: var(--space-xs); background: var(--surface-state); border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-sm); }
.fx-zeile { display: flex; align-items: center; gap: var(--space-2xs); min-width: 0; }
.fx-wo { inline-size: 4rem; flex: none; font-size: var(--text-sm); color: var(--ink-muted); }
.fx-zeile > .fx-knopf:first-child { inline-size: 4rem; }
.fx-knopf { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-3xs); min-width: 0; max-inline-size: 14rem; min-height: var(--ctl-h-sm);
  padding: 0 var(--space-xs); font: inherit; font-size: var(--text-sm); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--surface-base); border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-sm); cursor: pointer; }
.fx-knopf[aria-expanded="true"], .fx-knopf:hover { border-color: var(--border-strong); }
.fx-mehr { display: inline-grid; place-items: center; inline-size: var(--ctl-h-sm); block-size: var(--ctl-h-sm); margin-inline-start: auto; padding: 0; color: var(--ink-faint);
  background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; }
.fx-mehr:hover { color: var(--ink); background: var(--surface-state); }
.fx-liste { margin-inline-start: 4.5rem; border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-sm); }
.fx-neu { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

.filterkopf { display: flex; align-items: center; gap: var(--space-3xs); padding: var(--space-2xs) var(--space-xs); font-size: var(--text-sm); }
.filterkopf__op { display: inline-flex; align-items: center; gap: 2px; padding: 0 var(--space-3xs); font: inherit; font-weight: var(--fw-semibold); color: var(--ink-muted);
  background: none; border: 0; border-radius: var(--r-xs); cursor: pointer; }
.filterkopf__mehr { display: inline-grid; place-items: center; inline-size: var(--ctl-h-sm); block-size: var(--ctl-h-sm); margin-inline-start: auto; padding: 0;
  color: var(--ink-faint); background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; }
:is(.filterkopf__op, .filterkopf__mehr):hover, :is(.filterkopf__op, .filterkopf__mehr)[aria-expanded="true"] { color: var(--ink); background: var(--surface-state); }

.filterregel { display: grid; gap: var(--space-2xs); padding-block: var(--space-2xs); }
.filterregel__ops { display: flex; flex-wrap: wrap; gap: var(--space-3xs); padding-inline: var(--space-xs); }

.sortregel { display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-xs); min-width: 0; }
.sortregel__feld:first-child { flex: 1 1 auto; }
.sortregel__feld:not(:first-child) { flex: none; }
.sortregel__feld > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sortregel__feld > .symbol { flex: none; }

.sortregel__feld { display: inline-flex; align-items: center; gap: var(--space-3xs); min-width: 0; white-space: nowrap; min-height: var(--ctl-h-sm); padding: 0 var(--space-xs); font: inherit; font-size: var(--text-sm);
  color: var(--ink); background: none; border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-sm); cursor: pointer; }
.sortregel__feld:hover, .sortregel__weg:hover { background: var(--surface-state); }
.sortregel__weg { display: inline-grid; place-items: center; inline-size: var(--ctl-h-sm); block-size: var(--ctl-h-sm); margin-inline-start: auto; padding: 0; color: var(--ink-muted);
  background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; }
.tabmenue__liste--kurz { max-block-size: 15rem; overflow-y: auto; }
.tabmenue__eintrag[hidden] { display: none; }

.tabelle-regeln { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
.regel-marke, .regel-neu { display: inline-flex; align-items: center; gap: var(--space-3xs); min-height: var(--ctl-h-sm); padding: 0 var(--space-xs);
  font: inherit; font-size: var(--text-sm); color: var(--ink-muted); background: none; border: var(--border-w) solid transparent; border-radius: var(--r-sm); cursor: pointer; }
.regel-marke { border-color: var(--border-subtle); }
.regel-marke[data-an] { color: var(--state-warn); border-color: color-mix(in oklab, var(--state-warn) 45%, transparent); background: color-mix(in oklab, var(--state-warn) 10%, transparent); }
.regel-marke b { font-weight: var(--fw-semibold); }
:is(.regel-marke, .regel-neu):hover { color: var(--ink); background: var(--surface-state); }
.tabelle-leiste__knopf[data-regeln][aria-expanded="true"] { color: var(--ink); background: var(--surface-state); }

.tabmenue__spalte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3xs); }
.tabmenue__spalte[hidden] { display: none; }
.tabmenue__griff { display: inline-grid; place-items: center; color: var(--ink-faint); cursor: grab; touch-action: none; }

.tabmenue__suche { inline-size: 100%; }
.tabmenue__suche input { inline-size: 100%; }
.tabelle-leiste__links,
.tabelle-leiste__rechts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs); min-width: 0; }
.tabelle-leiste__knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--ctl-h-sm);
  padding: 0 var(--space-xs);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.tabelle-leiste__knopf:hover,
.tabelle-leiste__knopf[aria-expanded="true"] { color: var(--ink); background: var(--surface-state); }

.tabelle-leiste__knopf[data-an] { color: var(--ink); }

.tabelle-leiste__knopf[data-an] > .symbol, .tabelle-leiste__knopf[data-an] .tabelle-leiste__zahl { color: var(--state-warn); }
.tabelle-leiste__zahl { font-variant-numeric: tabular-nums; }
.tabelle-leiste__trenner { inline-size: var(--border-w); block-size: var(--space-md); margin-inline: var(--space-2xs); background: var(--border-subtle); }

.tabelle-suche {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--ctl-h-sm);
  padding-inline: var(--space-xs);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-sm);
  color: var(--ink-faint);
  cursor: text;
}
.tabelle-suche:hover { border-color: var(--border-strong); }
.tabelle-suche:focus-within { border-color: var(--accent); color: var(--ink); }

.tabelle-suche:has(input:focus-visible) { outline: var(--border-w-stark) solid var(--focus); outline-offset: calc(var(--border-w) * -2); }

.tabelle-suche[data-aktiv] { border-color: var(--state-warn); color: var(--ink); }
.tabelle-suche input::-webkit-search-cancel-button { appearance: none; }
.tabelle-suche__weg { display: inline-grid; place-items: center; flex: none; inline-size: var(--space-md); block-size: var(--space-md); padding: 0; border: 0; border-radius: var(--r-xs); background: none; color: var(--ink-faint); cursor: pointer; }
.tabelle-suche__weg:hover { background: var(--surface-state); color: var(--ink); }
.tabelle-suche input {
  inline-size: 10rem;
  min-width: 0;
  padding: 0;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink);
  background: none;
  border: 0;
  outline: none;
  transition: inline-size var(--t-fast) var(--ease);
}
.tabelle-suche input:focus,
.tabelle-suche input:not(:placeholder-shown) { inline-size: 14rem; }

@media (max-width: 559px) { .tabelle-suche, .tabelle-suche input, .tabelle-suche input:focus { inline-size: 100%; } .tabelle-leiste__rechts { inline-size: 100%; } }

.tabmenue {
  position: fixed;
  inset: auto;
  margin: 0;
  inline-size: min(26rem, calc(100vw - 2 * var(--gutter)));
  max-block-size: min(32rem, calc(100dvh - 2 * var(--space-lg)));
  overflow: auto;
  padding: var(--space-sm);
  color: var(--ink);
  background: var(--surface-overlay);
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: var(--r-md);
}
.tabmenue:popover-open { display: grid; gap: var(--space-xs); align-content: start; }

.tabmenue :is(.eigenauswahl__liste, .suchauswahl__liste) { position: static; max-height: none; margin-block-start: var(--space-2xs); }

.tabmenue--im-fluss { position: static; display: grid; gap: var(--space-xs); align-content: start; max-inline-size: 100%; }
.tabmenue[data-art="spalte"],
.tabmenue[data-art="sortieren"],
.tabmenue[data-art="unter"] { inline-size: min(18rem, calc(100vw - 2 * var(--gutter))); }
.tabmenue__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-inline: var(--space-2xs); }
.tabmenue__kopf b { font-size: var(--text-md); }
.tabmenue__titel { display: flex; justify-content: space-between; margin: var(--space-xs) var(--space-2xs) 0; font-size: var(--text-sm); color: var(--ink-muted); }
.tabmenue__hinweis { margin: 0 var(--space-2xs); font-size: var(--text-xs); color: var(--ink-faint); }
.tabmenue__liste { display: grid; gap: 0; }
.tabmenue__eintrag {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  inline-size: 100%;
  min-height: var(--ctl-h-sm);
  padding: var(--space-2xs) var(--space-xs);
  font: inherit;
  font-size: var(--text-sm);
  text-align: start;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.tabmenue__eintrag:hover,
.tabmenue__eintrag:focus-visible { background: var(--surface-state); }
.tabmenue__eintrag .symbol { color: var(--ink-faint); flex: none; }
.tabmenue__rechts { margin-inline-start: auto; display: inline-flex; align-items: center; gap: var(--space-3xs); font-size: var(--text-xs); font-weight: var(--fw-regular); color: var(--ink-muted); }
.tabmenue__regeln { display: grid; gap: var(--space-2xs); }
.tabmenue__regel { display: grid; grid-template-columns: minmax(5rem, auto) minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs); }
.tabmenue__regel:has(> .feld:only-child) { grid-template-columns: minmax(0, 1fr); }
.tabmenue__regel .feld { margin: 0; }
.tabmenue__regel .feld__fehler { display: none; }

.tabmenue .wahlchips { padding-inline: var(--space-2xs); }
.tabmenue .menue__trenner { margin-block: var(--space-2xs); }

.spaltenkopf { display: flex; align-items: center; gap: var(--space-3xs); inline-size: 100%; min-width: 0; }
.spaltenkopf__name { display: inline-flex; align-items: center; gap: var(--space-3xs); flex: 0 1 auto; min-width: 0; cursor: default; }
.spaltenkopf__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

th[aria-sort] .spaltenkopf__name { color: var(--ink); }
.spaltenkopf__sort, .spaltenkopf__menue {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--space-lg);
  block-size: var(--space-lg);
  padding: 0;
  color: var(--ink-faint);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}

.spaltenkopf__sort:not([data-an]), .spaltenkopf__menue:not([aria-expanded="true"]) { display: none; }
th:is(:hover, :focus-within) :is(.spaltenkopf__sort, .spaltenkopf__menue) { display: inline-grid; }
.spaltenkopf__sort { opacity: .55; }
.spaltenkopf__sort[data-an] { opacity: 1; color: var(--state-warn); }
.spaltenkopf__menue { opacity: 0; }
th:is(:hover, :focus-within) .spaltenkopf__menue,
.spaltenkopf__menue[aria-expanded="true"] { opacity: 1; }
th:is(:hover, :focus-within) .spaltenkopf__sort { opacity: 1; }
:is(.spaltenkopf__sort, .spaltenkopf__menue):hover { color: var(--ink); background: var(--surface-state); }
@media (hover: none) { .spaltenkopf__menue { opacity: 1; display: inline-grid; } }

.spaltenkopf__menue { margin-inline-start: auto; }

.zelle-titel { display: flex; align-items: center; gap: var(--space-3xs); min-width: 0; }
.zelle-titel__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.zelle-titel__text:not([data-titel-edit]) { cursor: pointer; }
.zelle-titel__text .zelle-eingabe { inline-size: 100%; }

.zelle-eingabe {
  inline-size: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-xs);
  padding: var(--space-3xs) var(--space-2xs);
}

#zellwahl { position: fixed; inset: auto; margin: 0; z-index: var(--z-aufgeklappt); inline-size: max-content; max-inline-size: min(24rem, calc(100vw - 16px)); max-height: calc(100dvh - 16px); }
.zellwahl [aria-selected="true"] { background: var(--surface-state); }
.zell-datum { position: fixed; z-index: var(--z-aufgeklappt); inline-size: 15rem; margin: 0; }

.feld.zell-datum:has(.datumsfeld__blatt:not([hidden])) { position: fixed; }
.zell-datum .feld__eingabe input { padding-block: var(--space-3xs); }

.zeile-griff { position: absolute; inset-block: 0; inset-inline-end: 100%; display: grid; place-items: center; inline-size: var(--space-lg); color: var(--ink-faint); cursor: grab; opacity: 0; }
.zeile-griff:hover { color: var(--ink); }
.zeile-aktionen { display: inline-flex; flex: none; align-items: center; gap: var(--space-3xs); }
.zeile-oeffnen {
  display: inline-grid;
  place-items: center;
  inline-size: var(--space-lg);
  block-size: var(--space-lg);
  padding: 0;
  color: var(--ink-faint);
  background: none;
  border: var(--border-w) solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  opacity: 0;
}
tr:is(:hover, :focus-within) :is(.zeile-griff, .zeile-oeffnen, .zelle-plus),
tr.ist-offen .zeile-oeffnen { opacity: 1; }

tr.ist-offen > td, .karte.ist-offen { background: var(--surface-state); }
tr.ist-offen > td { color: var(--ink); }
.zeile-oeffnen:hover { color: var(--ink); border-color: var(--border-subtle); background: var(--surface-base); }
@media (hover: none) { .zeile-oeffnen { opacity: 1; } }

.zelle-plus { display: inline-grid; place-items: center; inline-size: var(--space-lg); block-size: var(--space-lg); color: var(--ink-faint); border: var(--border-w) dashed var(--border-strong); border-radius: var(--r-sm); cursor: pointer; opacity: 0; }

td:has(> .zelle-plus) { cursor: pointer; }
td:hover > .zelle-plus { color: var(--ink); }

.zelle-mit-leeren { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xs); min-width: 0; }
.zelle-leeren {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--space-md);
  block-size: var(--space-md);
  padding: 0;
  color: var(--ink-faint);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  opacity: 0;
}
td:is(:hover, :focus-within) > .zelle-mit-leeren .zelle-leeren { opacity: 1; }
.zelle-leeren:hover { color: var(--ink); background: var(--surface-state); }
.crm tbody td[data-zelle]:empty::after {
  content: "+";
  float: inline-end;
  color: var(--ink-faint);
  opacity: 0;
}
.crm tbody td[data-zelle]:empty:hover::after { opacity: 1; }
.crm tbody td[data-zelle]:hover { box-shadow: inset 0 0 0 var(--border-w) var(--border-subtle); }

.zellverk {
  position: fixed;
  z-index: var(--z-aufgeklappt);
  padding: var(--space-xs);
  background: var(--surface-overlay);
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: var(--r-md);
}
.zellverk .feld { margin: 0; }

.kom-zeile { display: grid; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-xs); border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-md); }
.kom-zeile:is(:hover, :focus-within) { border-color: var(--border-strong); }
.kom-zeile .kom-fuss { align-items: center; padding-block-end: var(--space-2xs); }
.kom-fuss__knoepfe { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.kom-zeile:not([data-offen]) [data-kom-verwerfen] { display: none; }
.kom-senden { border-radius: var(--r-sm); min-width: var(--ctl-h-sm); min-height: var(--ctl-h-sm); width: var(--ctl-h-sm); height: var(--ctl-h-sm); }
.kom-senden:not([disabled]) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.kom-zeile .feld { margin: 0; }
.kom-zeile .feld__fehler { display: none; }
.kom-zeile .feld__eingabe > label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.kom-zeile .feld textarea,
.kom-zeile .feld textarea:is(:hover, :focus) {
  min-height: 0;
  block-size: auto;
  padding: var(--space-2xs) 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  resize: none;
  field-sizing: content;
}
.kom-fuss { display: none; align-items: center; justify-content: space-between; gap: var(--space-3xs); }
.kom-zeile:is(:focus-within, [data-offen]) .kom-fuss { display: flex; }
.kom-zeile:is(:focus-within, [data-offen]) .feld textarea { min-height: 5rem; }
.kommentarliste li { align-items: start; }
.kommentar { display: grid; gap: var(--space-3xs); min-width: 0; }
.kommentar .seite-text > :first-child { margin-top: 0; }
.kommentar > .verweis { justify-self: start; }

.verweis { padding: 0; font: inherit; color: inherit; text-align: start; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border-strong); }
.verweis:hover { text-decoration-color: currentColor; }

.blatt-teil { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); min-width: 0; }
.blatt-teil__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.blatt-teil__kopf h4 { margin: 0; font-size: var(--text-md); }
.blatt-teile { display: grid; gap: var(--space-lg); margin-top: var(--space-md); }

.blatt-art { flex: 0 1 auto; min-width: 0; margin: 0 auto 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink-muted); }

.aend-block { border-top: var(--border-w) solid var(--border-subtle); padding-top: var(--space-xs); }
.aend-block > summary { cursor: pointer; font-size: var(--text-sm); color: var(--ink-muted); padding: var(--space-2xs) 0; }
.aend-liste { list-style: none; margin: 0; padding: var(--space-xs) 0 0; display: grid; }

.aend-zeile { display: flex; flex-wrap: wrap; gap: 0 var(--space-sm); padding: var(--space-2xs) 0; border-bottom: var(--border-w) solid var(--border-subtle); font-size: var(--text-sm); align-items: baseline; }
.aend-zeile > time { flex: 0 0 9.5rem; color: var(--ink-muted); }
.aend-zeile > span { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.blatt-kopf__links { display: inline-flex; align-items: center; gap: var(--space-xs); }

.verk-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.verk-liste li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding: var(--space-2xs) 0; border-bottom: var(--border-w) solid var(--border-subtle); font-size: var(--text-sm); }
.verk-liste li > span { display: inline-flex; align-items: center; gap: var(--space-2xs); flex: none; }
.verk-liste .verweis { text-align: start; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blatt-verk__liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
.blatt-verk__neu { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-xs); }
.blatt-verk__neu > .feld { flex: 1 1 14rem; }

.unterliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
.unterliste > li { display: grid; gap: 0; border-block-end: var(--border-w) solid var(--border-subtle); }
.unterliste.blatt-unter { padding-inline-start: var(--space-xl); }
.unterliste.blatt-unter > li:last-child { border-block-end: 0; }
.blatt-aufgabe__zeile { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); min-width: 0; padding-block: var(--space-3xs); }

.aufgabe-titel { display: inline-flex; align-items: center; gap: var(--space-lg); min-width: 0; }
.aufgabe-titel { max-width: 100%; }

.aufgabe-titel .verweis, .aufgabe-titel > span:not(.marke) { text-align: start; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.erledigt-knopf {
  display: inline-grid; place-items: center; flex: none; padding: 0; cursor: pointer;
  inline-size: 1em; block-size: 1em;
  background: var(--surface-overlay);
  border: var(--border-w) solid var(--border-strong);
  border-radius: calc(var(--r-xs) / 2);
}
.erledigt-knopf > svg { display: none; }
.erledigt-knopf::after {
  content: ""; inline-size: .8em; block-size: .8em; background: var(--accent-ink);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--t-slow) var(--ease);
}
.erledigt-knopf:hover { border-color: var(--ink); }
.erledigt-knopf[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.erledigt-knopf[aria-pressed="true"]::after { clip-path: inset(0); }
@media (prefers-reduced-motion: reduce) { .erledigt-knopf::after { transition: none; } }
.unter-rechts { display: inline-flex; align-items: center; gap: var(--space-lg); flex: none; }

.unter-stand { display: inline-flex; padding: 0; font: inherit; background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; }
.unter-stand .marke { font-size: var(--text-2xs); }
li:not(:hover, :focus-within) > .blatt-aufgabe__zeile .unter-stand--still { opacity: 0; }
@media (hover: none) { li > .blatt-aufgabe__zeile .unter-stand--still { opacity: 1; } }

.aufgabe-titel > .blatt-klapp { inline-size: max-content; min-inline-size: 0; }

.blatt-aufgabe__zeile .aufgabe-titel { position: relative; }
.blatt-klapp { display: inline-flex; align-items: center; gap: var(--space-3xs); flex: none; padding: 0 var(--space-2xs); border: 0; border-radius: var(--r-sm); font: inherit; font-size: var(--text-xs); color: var(--ink); background: var(--surface-state); cursor: pointer; }
.blatt-klapp > svg { transition: rotate var(--t-fast) var(--ease); }
.blatt-klapp[aria-expanded="true"] > svg { rotate: 180deg; }
.blatt-wert { display: inline-grid; place-items: center; min-width: var(--space-lg); min-height: var(--space-lg); padding: 0; border: 0; border-radius: var(--r-sm); font: inherit; color: var(--ink-faint); background: none; cursor: pointer; }
.blatt-wert:hover { background: var(--surface-state); color: var(--ink); }
.blatt-wert--leer > .symbol { border: var(--border-w) dashed var(--border-strong); border-radius: var(--r-pill); padding: var(--space-3xs); box-sizing: content-box; }
li:not(:hover, :focus-within) > .blatt-aufgabe__zeile .blatt-wert--leer { opacity: 0; }
@media (hover: none) { li > .blatt-aufgabe__zeile .blatt-wert--leer { opacity: 1; } }
.blatt-neu { display: flex; align-items: center; gap: var(--space-sm); padding-block: var(--space-2xs); border-block-end: var(--border-w) solid var(--border-subtle); }
.blatt-neu__eingabe { flex: 1; min-width: 0; padding: var(--space-2xs) 0; font: inherit; font-size: var(--text-sm); color: var(--ink); background: none; border: 0; }
@media (prefers-reduced-motion: reduce) { .blatt-klapp > svg { transition: none; } }

.unter-neu { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-xs); align-items: center; }
.unter-neu .feld { margin: 0; }
.unter-neu .feld__fehler:empty { display: none; }

.unter-neu .datumsfeld { align-items: center; gap: var(--space-2xs); }
.unter-neu .datumsfeld > .feld__eingabe { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.unter-neu .datumsfeld__knopf {
  position: static;
  inline-size: var(--ctl-h-sm);
  block-size: var(--ctl-h-sm);
  border: var(--border-w) dashed var(--border-strong);
  border-radius: var(--r-sm);
}
.unter-neu .datumsfeld__knopf:hover { border-style: solid; }
.unter-neu .datumsfeld__blatt { inset-inline-end: 0; }

.tabmenue__eintrag--aus { color: var(--ink-faint); }

.zelle-verk__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: start;
  background: none;
  border: 0;
  cursor: pointer;
}
.zelle-verk__text:hover { text-decoration: underline; text-underline-offset: 2px; }
.zelle-mit-sprung { display: flex; align-items: center; gap: var(--space-2xs); min-width: 0; }
.zelle-mit-sprung__inhalt { flex: 1; min-width: 0; overflow: hidden; }
.zelle-mit-sprung > .zelle-sprung { margin-inline-start: auto; }

.zelle-link { display: inline-grid; place-items: center; inline-size: var(--space-xl); block-size: var(--space-xl); color: var(--ink-muted); border-radius: var(--r-sm); transition: color var(--t-sofort) var(--ease), background var(--t-sofort) var(--ease); }
.zelle-link:hover { color: var(--ink); background: var(--surface-state); }

button.zelle-link { margin: 0; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
button.zelle-link:hover { background: var(--surface-state); }
.zelle-links { display: inline-flex; gap: var(--space-3xs); vertical-align: middle; }

.ansichten { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs); border-bottom: var(--border-w) solid var(--border-subtle); margin-block-end: var(--space-xs); }
.ansichten__liste { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs); }
.ansichten__reiter { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-xs); border: 0; background: none; color: var(--ink-muted); font: inherit; font-size: var(--text-sm); cursor: pointer; border-radius: var(--r-sm) var(--r-sm) 0 0; margin-block-end: calc(-1 * var(--border-w)); border-bottom: 2px solid transparent; }
.ansichten__reiter:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 5%, transparent); }
.ansichten__reiter[aria-selected="true"] { color: var(--ink); position: relative; }

.ansichten__strich { position: absolute; inset: auto 0 -2px 0; height: 2px; background: var(--ink); pointer-events: none; }
.ansichten__neu { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; background: none; color: var(--ink-faint); cursor: pointer; border-radius: var(--r-sm); }
.ansichten__neu:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 5%, transparent); }
.datenblatt { display: grid; gap: var(--space-sm); min-width: 0; }

.datenblatt .anzahl { margin: 0; font-size: var(--text-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.summenzeile td { font-size: var(--text-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums;
  border-block-start: var(--border-w) solid var(--border-subtle); border-block-end: 0; font-weight: var(--fw-regular); }

.knapp { white-space: nowrap; }

.karte__titel { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.karte__eigenschaften { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-xs); font-size: var(--text-xs); color: var(--ink-muted); align-items: center; }
.karte__vorschau { font-size: var(--text-sm); color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.karte--kachel { align-content: start; min-height: 7rem; cursor: pointer; }
.karte--kachel .karte__eigenschaften { display: grid; gap: var(--space-3xs); }
.karte--kachel .karte__eig { display: grid; grid-template-columns: minmax(6rem, auto) 1fr; gap: var(--space-xs); align-items: center; }
.karte__name { display: inline-flex; align-items: center; gap: var(--space-3xs); color: var(--ink-faint); }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-sm); }
.kacheln__gruppe { display: grid; gap: var(--space-xs); margin-block-end: var(--space-md); }
.kacheln__titel { font-size: var(--text-sm); margin: 0; }
.board__neu { justify-self: start; }

.karte--fliegt { position: fixed; z-index: var(--z-ziehen); margin: 0; pointer-events: none; transform: rotate(2deg); transform-origin: 30% 50%; border-color: var(--border-strong); opacity: .95; }
:root[data-zieht-karte], :root[data-zieht-karte] * { cursor: grabbing; user-select: none; }
.board--db .karte { touch-action: none; cursor: grab; }

.board__titel { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: var(--r-sm); }
.board__titel:hover { text-decoration: underline; text-underline-offset: 3px; }
.ton-raster { display: flex; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-xs); }
.ton-wahl { inline-size: 1.5rem; block-size: 1.5rem; border-radius: var(--r-pill); border: var(--border-w) solid var(--border-strong); background: var(--surface-base); cursor: pointer; }

.ton-wahl[data-ton="1"] { --ton: var(--ton-1); } .ton-wahl[data-ton="2"] { --ton: var(--ton-2); } .ton-wahl[data-ton="3"] { --ton: var(--ton-3); }
.ton-wahl[data-ton="4"] { --ton: var(--ton-4); } .ton-wahl[data-ton="5"] { --ton: var(--ton-5); } .ton-wahl[data-ton="6"] { --ton: var(--ton-6); }
.ton-wahl[data-ton] { background: var(--ton); border-color: var(--ton); }
.ton-wahl[aria-checked="true"] { box-shadow: 0 0 0 var(--border-w-stark) var(--surface-overlay), 0 0 0 calc(var(--border-w-stark) * 2) var(--ink); }
.board__spalte[data-ziel] { outline: 2px dashed var(--border-strong); outline-offset: -2px; }
.wird-gezogen { opacity: .5; }

.beschreibung { margin: var(--space-3xs) 0 0; color: var(--ink-muted); outline: none; min-height: 1.4em; max-width: 60ch; border-radius: var(--r-sm); }
.beschreibung:empty::before { content: attr(data-platzhalter); color: var(--ink-faint); }

.beschreibung-zeile { display: flex; align-items: baseline; gap: var(--space-xs); min-width: 0; max-width: 60ch; }
.beschreibung-zeile > .beschreibung { flex: 1; min-width: 0; max-width: none; }
.beschreibung-zeile:not([data-offen]) > .beschreibung:not(:focus) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beschreibung__mehr { flex: none; padding: 0; border: 0; background: none; font: inherit; font-size: var(--text-sm); color: var(--ink-muted);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.beschreibung__mehr:hover { color: var(--ink); }
.beschreibung-zeile:has(> .beschreibung:focus) > .beschreibung__mehr { display: none; }
.beschreibung:hover, .beschreibung:focus { background: color-mix(in oklab, var(--ink) 4%, transparent); }

.spalte-neu { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; background: none; color: var(--ink-faint); cursor: pointer; border-radius: var(--r-sm); }
.spalte-neu:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); }

.tabmenue__kopf--spalte { gap: var(--space-2xs); }
.tabmenue__symbol { display: inline-grid; place-items: center; flex: none; inline-size: var(--ctl-h-sm); block-size: var(--ctl-h-sm); padding: 0;
  border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-sm); background: none; color: var(--ink-muted); cursor: pointer; }
.tabmenue__symbol:hover { background: var(--surface-state); color: var(--ink); }
.tabmenue__name { flex: 1; min-width: 0; min-height: var(--ctl-h-sm); padding: 0 var(--space-xs); font: inherit; font-weight: var(--fw-semibold); color: var(--ink);
  background: var(--surface-base); border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-sm); }
.tabmenue__name:focus { outline: none; border-color: var(--accent); }
.tabmenue__liste--zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.summenzeile__name { color: var(--ink-faint); font-size: var(--text-xs); margin-inline-end: var(--space-3xs); }

.summenzeile__wahl { appearance: none; display: block; inline-size: 100%; min-block-size: 1lh; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: inherit; cursor: pointer; border-radius: var(--r-xs); }
.summenzeile__wahl:hover, .summenzeile__wahl[aria-expanded="true"] { color: var(--ink); background: var(--surface-state); }
.summenzeile__leer { opacity: 0; }
.summenzeile__wahl:is(:hover, :focus-visible, [aria-expanded="true"]) .summenzeile__leer { opacity: 1; }

.tabmenue__kopf--symbol { gap: var(--space-2xs); }
.tabmenue__kopf--symbol > b { flex: 1; }
.symbolwahl__weg { padding: 0 var(--space-xs); min-height: var(--ctl-h-sm); font: inherit; font-size: var(--text-sm); color: var(--ink-muted); background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; }
.symbolwahl__weg:hover { color: var(--ink); background: var(--surface-state); }
.symbolwahl__titel { grid-column: 1 / -1; margin: var(--space-2xs) 0 0; font-size: var(--text-xs); color: var(--ink-faint); }

.symbolwahl { display: grid; gap: var(--space-2xs); }
.symbolwahl .icon-raster { max-block-size: 16rem; overflow-y: auto; }
.symbol[data-ton="1"] { color: var(--ton-1); }
.symbol[data-ton="2"] { color: var(--ton-2); }
.symbol[data-ton="3"] { color: var(--ton-3); }
.symbol[data-ton="4"] { color: var(--ton-4); }
.symbol[data-ton="5"] { color: var(--ton-5); }
.symbol[data-ton="6"] { color: var(--ton-6); }
.icon-raster { display: grid; grid-template-columns: repeat(8, 2rem); gap: 2px; padding: var(--space-2xs) var(--space-xs); }
.icon-raster__wahl { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; background: none; color: var(--ink-muted); border-radius: var(--r-sm); cursor: pointer; }
.icon-raster__wahl:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); color: var(--ink); }
.icon-raster__wahl[aria-checked="true"] { background: color-mix(in oklab, var(--ink) 12%, transparent); color: var(--ink); }
.tabmenue__eintrag > span > .symbol { display: inline-block; vertical-align: -3px; margin-inline-end: var(--space-2xs); }
.tabmenue__fuss { display: flex; justify-content: flex-end; gap: var(--space-xs); padding: var(--space-xs); border-top: var(--border-w) solid var(--border-subtle); }

.dokumentseite { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-md) var(--space-2xl); }
.dokumentseite__leiste { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.dokumentseite .seite-titel { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.15; border: 0; background: none; padding: 0; margin-block: var(--space-sm) var(--space-2xs); width: 100%; color: var(--ink); outline: none; box-shadow: none; }

.dokumentseite .seite-titel { border-radius: var(--r-sm); cursor: text; }
.dokumentseite .seite-titel:hover { background: var(--surface-state); }
.dokumentseite .seite-titel:focus-visible { outline: var(--border-w-stark) solid var(--focus); outline-offset: calc(var(--border-w) * -2); }
.dokumentseite .seite-titel::placeholder { color: var(--ink-faint); }

.seite-eingabe { min-height: 28rem; resize: vertical; line-height: 1.6; tab-size: 2; }
.notion-eig { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: center; gap: var(--space-xs); font-size: var(--text-sm); padding-block-end: var(--space-xs); border-bottom: var(--border-w) solid var(--border-subtle); }
.notion-eig__name { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--ink-faint); }
.notion-eig__wert { border: 0; background: none; font: inherit; color: var(--ink); padding: var(--space-3xs) var(--space-2xs); border-radius: var(--r-sm); }
.notion-eig__wert:hover, .notion-eig__wert:focus { background: color-mix(in oklab, var(--ink) 5%, transparent); }
.dokumentseite .dokumentseite__text .feld__eingabe, .dokumentseite .dokumentseite__text .fe, .dokumentseite .dokumentseite__text .seite-eingabe { border: 0 !important; background: none !important; box-shadow: none !important; outline: none; }
.dokumentseite .dokumentseite__text .feld__eingabe { padding: 0; }
.dokumentseite .dokumentseite__text .fe { padding-inline: 0; min-height: 50vh; font-size: var(--text-md); line-height: 1.65; }
.dokumentseite .dokumentseite__text .hinweis { color: var(--ink-faint); font-size: var(--text-xs); }
.dokumentseite__rand { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-md); padding-block-start: var(--space-md); border-top: var(--border-w) solid var(--border-subtle); }
.leiste-korb { margin-top: auto; }
.leiste-korb + .leiste-unten + .leiste-fuss, .leiste-korb + .leiste-fuss { margin-top: 0; }

.ne-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-height: var(--space-lg); }

.ne-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--space-lg) var(--space-xl); align-items: start; }
.ne-block { display: grid; gap: 2px; align-content: start; }
.ne-zeile { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-3xs) var(--space-xs); border-radius: var(--r-sm); }
.ne-zeile:hover { background: color-mix(in oklab, var(--ink) 4%, transparent); }
.ne-zeile[data-ziel="vor"] { box-shadow: inset 0 2px 0 var(--ink); } .ne-zeile[data-ziel="nach"] { box-shadow: inset 0 -2px 0 var(--ink); }
.ne-gruppe { margin-block-start: 0; background: color-mix(in oklab, var(--ink) 6%, transparent); border-block-start: var(--border-w) solid var(--border-strong); border-radius: 0; }
.ne-gruppe:hover { background: color-mix(in oklab, var(--ink) 9%, transparent); }
.ne-klapp { display: inline-grid; place-items: center; inline-size: var(--space-lg); block-size: var(--space-lg); padding: 0; border: 0; background: none; color: var(--ink-muted); cursor: pointer; border-radius: var(--r-sm); }
.ne-klapp:hover { color: var(--ink); }
.ne-gruppe .ne-name { font-weight: 600; font-size: var(--text-md); text-transform: none; }
.ne-griff { cursor: grab; color: var(--ink-faint); display: inline-flex; }
.ne-name { flex: 1; min-width: 0; border: var(--border-w) solid transparent; background: none; color: var(--ink); font: inherit; padding: var(--space-3xs) var(--space-2xs); border-radius: var(--r-sm); }
.ne-name:hover, .ne-name:focus { border-color: var(--border-subtle); background: var(--surface-base); }
.ne-zeile--aus .ne-name, .ne-zeile--aus > .symbol { opacity: .45; }

.fav-liste { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--border-w) solid var(--border-subtle); }
.fav-zeile { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-2xs) var(--space-xs); border-bottom: var(--border-w) solid var(--border-subtle); min-width: 0; }
.fav-zeile > :first-child { display: flex; align-items: center; gap: var(--space-xs); flex: 1; min-width: 0; text-align: start; color: var(--ink); text-decoration: none; }
.fav-zeile > :first-child > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-zeile { flex-wrap: wrap; }

.fav-zeile > :last-child:not(:first-child) { flex-shrink: 1; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-zeile small { margin-inline-start: auto; }
.fav-zeile:hover { background: color-mix(in oklab, var(--ink) 4%, var(--surface-base)); }
.fav-zeile--weg { color: var(--ink-faint); }
.korb-knoepfe { display: flex; gap: var(--space-2xs); flex-shrink: 0; }

.board__spalte { display: grid; gap: var(--space-xs); align-content: start; min-height: 8rem; padding: var(--space-sm);
  background: color-mix(in oklab, var(--ink) 4%, transparent); border-radius: var(--r-md); border: var(--border-w) solid transparent; }
.board__spalte[data-ziel] { border-color: var(--accent); }
.board__kopf { display: flex; justify-content: space-between; font-size: var(--text-sm); font-weight: var(--fw-semibold); padding-inline: var(--space-2xs); }
.karte { display: grid; gap: var(--space-2xs); padding: var(--space-sm); background: var(--surface-raised); border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-sm); cursor: grab; text-align: start; font: inherit; color: inherit; width: 100%; }
.karte__fuss { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; font-size: var(--text-xs); color: var(--ink-faint); }

.griff { position: absolute; inset-block: 0; inset-inline-end: -4px; width: 9px; cursor: col-resize; touch-action: none; z-index: var(--z-griff); }
.griff::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 3px; width: 2px; background: transparent; transition: background var(--t-fast) var(--ease); }
.griff:hover::after, :root[data-zieht] .griff:active::after { background: var(--border-strong); }
.board { display: grid; gap: var(--space-md); }

@media (min-width: 900px) { .board { grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); overflow-x: auto; align-items: start; } }

.kopfleiste { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-height: 2rem; margin-block-end: calc(-1 * var(--space-sm)); }
.kopfleiste__links, .kopfleiste__rechts { display: flex; align-items: center; gap: var(--space-3xs); min-width: 0; }
.kopfleiste__links .pfad { margin-inline-start: var(--space-xs); }

.kopfleiste__links { flex: 1 1 auto; }
.kopfleiste__rechts { flex: none; }
.kopfleiste__links .pfad { min-width: 0; flex-wrap: nowrap; }
.kopfleiste__links .pfad > * { flex: none; }
.kopfleiste__links .pfad > [aria-current] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopfleiste__knopf { color: var(--ink-muted); border-color: transparent; background: transparent; }
.kopfleiste__knopf:not(:disabled):hover { background: color-mix(in oklab, var(--ink) 7%, transparent); color: var(--ink); }
.kopfleiste__knopf:disabled { opacity: .35; cursor: default; }
.stern--an { color: var(--ink); }
.stern--an svg { fill: currentColor; }
.fenster-stern { margin-inline-start: auto; }

.eig-block { display: grid; gap: var(--space-xs); padding-block-start: var(--space-sm); border-block-start: var(--border-w) solid var(--border-subtle); }

.frage-folgen { margin: 0; padding-inline-start: var(--space-md); display: grid; gap: var(--space-2xs); }

.tabmenue__klapp { display: flex; align-items: center; gap: var(--space-2xs); inline-size: 100%; padding: var(--space-2xs) var(--space-xs); border: 0; background: none; color: var(--ink-muted); font: inherit; text-align: start; cursor: pointer; border-radius: var(--r-sm); }
.tabmenue__klapp:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 5%, transparent); }

.kopier-wickel { display: inline-flex; align-items: center; gap: var(--space-3xs); }
.kopieren { display: inline-grid; place-items: center; width: var(--space-lg); height: var(--space-lg); padding: 0; border: 0; border-radius: var(--r-xs);
  background: none; color: var(--ink-faint); cursor: pointer; opacity: 0; transition: opacity var(--t-sofort) var(--ease), color var(--t-sofort) var(--ease); }
.kopier-wickel:is(:hover, :focus-within) .kopieren, .kopieren[data-kopiert] { opacity: 1; }
.kopieren:hover { color: var(--ink); background: var(--surface-state); }
.kopieren[data-kopiert] { color: var(--state-pass); }
@media (hover: none) { .kopieren { opacity: 1; } }

.zieh-bild { position: fixed; inset: auto; margin: 0; pointer-events: none; overflow: visible; color: var(--ink);
  background: var(--surface-overlay); border: var(--border-w) solid var(--border-strong); border-radius: var(--r-sm); transform-origin: 30% 50%; }
.zieh-bild--kippt { transform: rotate(2deg); }
.zieh-bild--zeile { padding: 0; overflow: hidden; }
.zieh-bild--zeile table { background: var(--surface-overlay); }
.zieh-bild--zeile td { background: var(--surface-overlay); }
th.zieh-bild { display: flex; align-items: center; }

:is(.board--db, .kacheln) .karte { --karte-h: 7.5rem; position: relative; height: var(--karte-h); padding: 0; background: none; border: 0; }
.kacheln .karte { --karte-h: 10rem; }

.karte__innen { position: absolute; inset: 0 0 auto 0; height: var(--karte-h); overflow: clip; display: flex; flex-direction: column; gap: var(--space-2xs);
  padding: var(--space-sm); background: var(--surface-raised); border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-sm); }

.karte__innen .karte__titel { display: block; inline-size: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: none; }

.karte__innen > * { flex-shrink: 0; min-block-size: auto; }
.karte .karte__eigenschaften .marke { padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.karte .karte__eigenschaften .marke::before { display: none; }

:root:not([data-zieht-karte]) .karte:is(:hover, :focus-visible) > .karte__innen { border-color: var(--border-strong); }
.karte.zieh-bild { background: none; border: 0; }
.karte.zieh-bild > .karte__innen { background: var(--surface-overlay); border-color: var(--border-strong); }
.karte.ist-erledigt .karte__titel, tr.ist-erledigt .zelle-titel__text { color: var(--ink-faint); text-decoration: line-through; }

.board--db .board__kopf { position: relative; z-index: var(--z-klebend-kopf); background: color-mix(in oklab, var(--ink) 4%, var(--surface-base)); }
.board--db .board__kopf { border-block-end: var(--border-w) solid var(--border-subtle); }
.kacheln__titel { position: relative; z-index: var(--z-klebend-kopf); background: var(--surface-base); }

.tabmenue__regel--zeile { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
.tabmenue__werte { padding-inline-start: var(--space-lg); }
.tabmenue__regel--zeile .tabmenue__eintrag b { font-weight: var(--fw-semibold); }

.tabelle-suche__nur { display: inline-flex; align-items: center; gap: var(--space-3xs); flex: none; padding: 0 var(--space-2xs); border: 0; border-radius: var(--r-xs);
  background: none; color: var(--ink-muted); font: inherit; font-size: var(--text-xs); cursor: pointer; white-space: nowrap; }
.tabelle-suche__nur:hover, .tabelle-suche__nur[data-an] { background: var(--surface-state); color: var(--ink); }

[data-ruhig] { align-content: start; }

.massen__zahl { font-size: var(--text-sm); color: var(--ink-muted); font-variant-numeric: tabular-nums; margin-inline-end: var(--space-2xs); }
.tabelle-leiste .massen { display: flex; align-items: center; gap: var(--space-3xs); padding: 0; border: 0; background: none; }

.name-am-ort { font: inherit; color: var(--ink); inline-size: 100%; min-inline-size: 6rem; padding: 0 var(--space-3xs); margin: 0;
  border: var(--border-w) solid var(--border-strong); border-radius: var(--r-xs); background: var(--surface-raised); outline: none; }

[data-benennt] { overflow: visible !important; z-index: var(--z-deckt) !important; }
[data-benennt] .spaltenkopf__name, [data-benennt] .spaltenkopf__text { overflow: visible; }
[data-benennt] .name-am-ort { position: relative; z-index: var(--z-ueber); }

.ansicht-temp { font-size: var(--text-xs); color: var(--state-warn); margin-inline-end: var(--space-2xs); }

.tabmenue__wahlreihe { display: flex; gap: var(--space-3xs); padding-inline: var(--space-2xs); }
.tabmenue__wahl { inline-size: var(--space-xl); block-size: var(--space-xl); border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-xs);
  background: none; color: var(--ink-muted); font: inherit; font-size: var(--text-sm); cursor: pointer; font-variant-numeric: tabular-nums; }
.tabmenue__wahl[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.ansichten__rechts { margin-inline-start: auto; padding-block-end: var(--space-2xs); }

.bento { container-type: inline-size; }
.bento__raster { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); align-items: start; }
@container (min-width: 40rem) { .bento__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento__kachel[data-groesse="m"] { grid-column: span 2; } }
@container (min-width: 64rem) { .bento__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.bento__kachel[data-groesse="l"] { grid-column: 1 / -1; }
.bento__kachel { position: relative; min-width: 0; padding: var(--space-md); background: var(--surface-raised); border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-md); }
.bento__inhalt { min-width: 0; display: grid; gap: var(--space-sm); }
.bento__inhalt > :is(.widget, section) { border: 0; padding: 0; background: none; }
.bento__werkzeug { position: absolute; inset-block-start: var(--space-2xs); inset-inline-end: var(--space-2xs); display: flex; gap: var(--space-3xs); opacity: 0; transition: opacity var(--t-fast) var(--ease); z-index: var(--z-griff); }
.bento__kachel:is(:hover, :focus-within) .bento__werkzeug { opacity: 1; }
.bento__griff, .bento__menue { display: inline-grid; place-items: center; inline-size: var(--space-lg); block-size: var(--space-lg); border: 0; border-radius: var(--r-xs); background: var(--surface-raised); color: var(--ink-muted); }
.bento__griff { cursor: grab; touch-action: none; }
.bento__menue { cursor: pointer; }
.bento__menue:hover, .bento__griff:hover { background: var(--surface-state); color: var(--ink); }
@media (hover: none) { .bento__werkzeug { opacity: 1; } }

.bento__plus { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); min-block-size: 6rem; padding: var(--space-md);
  font: inherit; color: var(--ink-faint); background: none; border: var(--border-w) dashed var(--border-strong); border-radius: var(--r-md); cursor: pointer; }
.bento__plus:hover { color: var(--ink); background: var(--surface-state); }

.bento__breite { position: absolute; inset-block: var(--space-md); inset-inline-end: calc(-1 * var(--space-2xs)); inline-size: var(--space-xs); cursor: ew-resize; touch-action: none; z-index: var(--z-griff); }
.bento__breite::after { content: ""; position: absolute; inset-block: 30%; inset-inline-start: 50%; inline-size: var(--border-w-stark); border-radius: var(--r-xs); background: var(--border-strong); opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.bento__kachel:hover > .bento__breite::after, :root[data-bento-zieht] .bento__breite::after { opacity: 1; }
:root[data-bento-zieht], :root[data-bento-zieht] * { cursor: ew-resize; user-select: none; }

.pruefliste { display: grid; gap: var(--space-xs); padding: var(--space-sm); }
.pruefliste__summe { margin: 0; color: var(--ink-faint); font-size: var(--text-sm); }
.pruefliste__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); }
.pruefliste__zeile { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-xs); align-items: start; font-size: var(--text-sm); line-height: var(--leading-snug); }
.pruefliste__zeile > .marke { min-width: calc(var(--label-w) * 0.75); }
.pruefliste__text { display: grid; gap: var(--space-3xs); min-width: 0; overflow-wrap: anywhere; }
.pruefliste__text > span { color: var(--ink-muted); }
.pruefliste__notiz { margin: 0; color: var(--ink-faint); font-size: var(--text-sm); }

.blatt-titel {
  width: 100%; margin: 0; padding: var(--space-3xs) var(--space-2xs);
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-semibold);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--ink);
  background: transparent; border: var(--border-w) solid transparent; border-radius: var(--r-sm);
  transition: background var(--t-sofort) var(--ease), border-color var(--t-sofort) var(--ease);
}
.blatt-titel:hover { background: var(--surface-state); }
.blatt-titel:focus { background: var(--surface-base); border-color: var(--border-strong); }
.blatt-titel[readonly]:is(:hover, :focus) { background: transparent; border-color: transparent; }
.blatt-unter { display: flex; align-items: center; gap: var(--space-2xs); margin: calc(-1 * var(--space-sm)) 0 0; padding-inline: var(--space-2xs); font-size: var(--text-sm); color: var(--ink-muted); }
.blatt-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-sm); border-top: var(--border-w) solid var(--border-subtle); }
.blatt-fuss p { margin: 0; font-size: var(--text-xs); color: var(--ink-faint); }
.blatt-fuss .btn { gap: var(--space-3xs); }
.blatt-nurlesen { display: flex; align-items: center; gap: var(--space-2xs); margin: 0; font-size: var(--text-xs); color: var(--ink-muted); }

.gruppe__anzahl { color: var(--ink-faint); }
.gruppe__kopf th { text-align: start; background: var(--surface-base); }
.gruppe:has(> tr:only-child) .gruppe__kopf th { padding-block: var(--space-2xs); }

.karte__eig { display: inline-flex; align-items: center; }

.board__spalte[data-ton="1"] { --ton: var(--ton-1); }
.board__spalte[data-ton="2"] { --ton: var(--ton-2); }
.board__spalte[data-ton="3"] { --ton: var(--ton-3); }
.board__spalte[data-ton="4"] { --ton: var(--ton-4); }
.board__spalte[data-ton="5"] { --ton: var(--ton-5); }
.board__spalte[data-ton="6"] { --ton: var(--ton-6); }
.board__spalte[data-ton] { background: color-mix(in oklab, var(--ton) 14%, var(--surface-base)); border-color: color-mix(in oklab, var(--ton) 40%, transparent); }
.board__spalte[data-ton] .board__titel { color: var(--ton); }

.blatt-teil__kopf :is(h2, h4) { margin: 0; font-size: var(--text-lg); display: flex; align-items: center; gap: var(--space-xs); }

.tabelle-mehr { display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-xs) 0 0; font-size: var(--text-xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.kachel {
  width: var(--space-2xl);
  height: var(--space-2xl);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--ink);
  background: var(--accent-soft);
  border: var(--border-w) solid var(--accent);
}

.inhaltskarte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  width: min(21rem, 100%);
  padding: var(--space-md);
  background: var(--surface-raised);
  border-radius: var(--r-md);
}
.inhaltskarte h4 { font-size: var(--text-lg); }
.inhaltskarte p {
  margin: 0;
  max-width: none;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.inhaltskarte__mehr {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--accent);
  text-decoration: none;
}
.inhaltskarte__mehr .symbol {
  transition: transform var(--t-fast) var(--ease);
}
.inhaltskarte__mehr:hover .symbol { transform: translateX(var(--space-3xs)); }
.inhaltskarte--kante {
  background: none;
  border: var(--border-w) solid var(--border-subtle);
}

.zeile {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: min(25rem, 100%);
  padding: var(--space-sm);
  background: var(--surface-raised);
  border-radius: var(--r-md);
}

.zeile__text { flex: 1; min-width: 0; }
.zeile__text b { display: block; font-size: var(--text-sm); color: var(--ink); }
.zeile__text p {
  margin: 0;
  max-width: none;
  font-size: var(--text-2xs);
  color: var(--ink-muted);
}
.zeile--leise {
  background: none;
  border: var(--border-w) solid var(--border-subtle);
}

.profilbild {
  display: inline-grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  width: var(--space-2xl);
  height: var(--space-2xl);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: var(--border-w) solid var(--accent);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-normal);
}
.profilbild > img { width: 100%; height: 100%; object-fit: cover; }
.profilbild--klein { width: var(--space-xl); height: var(--space-xl); font-size: var(--text-2xs); }
.profilbild--gross { width: var(--space-3xl); height: var(--space-3xl); font-size: var(--text-xl); }

.leerzustand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
  width: min(25rem, 100%);
  padding: var(--space-xl) var(--space-lg);
  border: var(--border-w-stark) dashed var(--border-subtle);
  border-radius: var(--r-md);
}
.leerzustand > .symbol {
  width: var(--space-xl);
  height: var(--space-xl);
  color: var(--ink-faint);
}
.leerzustand h4 { font-size: var(--text-lg); }
.leerzustand p {
  margin: 0;
  max-width: none;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.leerzustand .btn { margin-top: var(--space-2xs); }

.leerzustand--wege { width: min(32rem, 100%); gap: var(--space-sm); padding: var(--space-xl); }
.leerzustand--wege .btn { align-self: stretch; margin-top: var(--space-xs); }
.leerzustand__wege {
  list-style: none;
  margin: var(--space-2xs) 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: start;
  border-block: var(--border-w) solid var(--border-subtle);
}
.leerzustand__wege li + li { border-top: var(--border-w) solid var(--border-subtle); }
.leerzustand__weg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-2xs);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
.leerzustand__weg:hover { background: var(--surface-raised); }
.leerzustand__weg:focus-visible { outline: var(--border-w-stark) solid var(--focus); outline-offset: calc(var(--border-w) * -2); }
.leerzustand__weg-text { display: flex; flex-direction: column; gap: var(--space-3xs); }
.leerzustand__weg-text strong { font-weight: var(--fw-medium); }
.leerzustand__weg-text small { font-size: var(--text-xs); color: var(--ink-muted); }
.leerzustand__weg .symbol { flex: none; width: var(--icon); height: var(--icon); color: var(--ink-faint); }
@media (prefers-reduced-motion: reduce) {
  .leerzustand__weg { transition: none; }
}

.meldung {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  width: min(25rem, 100%);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-raised);
  border-radius: var(--r-md);
}

.meldung > .symbol { flex: none; margin-top: 2px; color: var(--ink-muted); }
.meldung b { display: block; font-size: var(--text-sm); color: var(--ink); }
.meldung p {
  margin: var(--space-3xs) 0 0;
  max-width: none;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.meldung--warn > .symbol { color: var(--state-warn); }
.meldung--fail > .symbol { color: var(--state-fail); }
.meldung--pass > .symbol { color: var(--state-pass); }

.fortschritt { width: min(25rem, 100%); }
.fortschritt__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-muted);
}
.fortschritt__kopf b {
  color: var(--ink);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.fortschritt progress {
  display: block;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--space-xs);
  border: 0;
  
  border-radius: calc(var(--r-xs) / 3);
  overflow: hidden;
  
  background: var(--surface-state);
}
.fortschritt progress::-webkit-progress-bar { background: var(--surface-state); }
.fortschritt progress::-webkit-progress-value { background: var(--accent); }
.fortschritt progress::-moz-progress-bar { background: var(--accent); }
.fortschritt--schmal progress { height: var(--space-2xs); }
.fortschritt--fertig progress::-webkit-progress-value { background: var(--state-pass); }
.fortschritt--fertig progress::-moz-progress-bar { background: var(--state-pass); }

.tabelle__rahmen {
  
  position: relative;
  width: 100%;
  
  container-type: inline-size;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  
  scrollbar-gutter: stable; overflow-y: hidden; padding-bottom: var(--space-sm); }

.tabelle__rahmen .tabelle { width: 100%; min-width: 20rem; }

.tabelle__sortieren {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  font: inherit; color: inherit; background: none; border: 0;
  padding: 0; cursor: pointer;
}
.tabelle__sortieren:hover { color: var(--accent); }
.tabelle th[aria-sort] .tabelle__sortieren { color: var(--accent); }

@container (max-width: 26rem) {
  .tabelle__rahmen .tabelle:not(.tabelle--rollen) { min-width: 0; }
  .tabelle:not(.tabelle--rollen) thead {
    
    display: block;
    position: absolute; width: 1px; height: 1px;
    margin: -1px; overflow: hidden; clip-path: inset(50%);
  }
  .tabelle:not(.tabelle--rollen) tbody tr {
    display: block;
    padding: var(--space-xs) 0;
    border-bottom: var(--border-w) solid var(--border-subtle);
  }
  .tabelle:not(.tabelle--rollen) tbody tr:last-child { border-bottom: 0; }
  .tabelle:not(.tabelle--rollen) tbody td {
    display: grid;
    
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--space-xs);
    border: 0;
    padding: var(--space-3xs) var(--space-xs);
    text-align: start;
    
    overflow-wrap: break-word;
  }
  .tabelle:not(.tabelle--rollen) tbody td.tabelle__zahl { text-align: start; }
  .tabelle:not(.tabelle--rollen) tbody td[data-label]::before {
    content: attr(data-label);
    color: var(--ink-muted);
    font-size: var(--text-2xs);
  }
  
  .tabelle:not(.tabelle--rollen) tbody td:not([data-label]) { grid-template-columns: 1fr; }

  
  @container (max-width: 20rem) {
    .tabelle:not(.tabelle--rollen) tbody td { grid-template-columns: 1fr; gap: 0; }
  }

  
  .tabelle:not(.tabelle--rollen) tbody td > * { justify-self: start; }
  
  .tabelle:not(.tabelle--rollen).tabelle--dicht .initialen { width: var(--space-lg); height: var(--space-lg); }
}

.tabelle {
  width: min(32rem, 100%);
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.tabelle caption {
  text-align: start;
  padding-bottom: var(--space-xs);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  color: var(--ink-faint);
}
.tabelle th {
  text-align: start;
  white-space: nowrap;
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: var(--border-w) solid var(--border-strong);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tabelle td {
  vertical-align: top;
  padding: var(--space-xs);
  border-bottom: var(--border-w) solid var(--border-subtle);
  color: var(--ink-muted);
}
.tabelle tbody td:first-child { color: var(--ink); font-weight: var(--fw-semibold); }
.tabelle__zahl {
  text-align: end;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.tabelle__kennung {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--ink-faint);
}

.tabelle--kompakt td { padding: var(--space-2xs) var(--space-xs); }

.dokumentbuehne { display: grid; gap: var(--space-sm); min-width: 0; }
.dokumentbuehne__rahmen { overflow-x: auto; overflow-y: hidden; min-width: 0; padding-block-end: var(--space-2xs); }
.dokumentbuehne__skala { margin-inline: auto; }
.dokumentbuehne__skala > * { transform-origin: 0 0; }
.dokumentbuehne__zoom {
  position: sticky;
  inset-block-end: var(--space-2xs);
  z-index: var(--z-klebend);
  justify-self: end;
  padding: 0;
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
}
.dokumentbuehne__zoom .btn {
  min-height: calc(var(--ctl-h-sm) * 0.8);
  padding-inline: var(--space-xs);
  font-size: var(--text-2xs);
  color: var(--ink-muted);
  background: none;
  border-color: transparent;
}
.dokumentbuehne__zoom .btn:hover { color: var(--ink); background: var(--surface-state); }
.dokumentbuehne__zoom .btn[aria-pressed="true"] { color: var(--ink); }

.dokumentbuehne__blatt { box-sizing: border-box; inline-size: 210mm; min-block-size: 297mm; padding: 20mm; color: var(--ink); background: var(--surface-raised); border: var(--border-w) solid var(--border-subtle); }
.dokumentbuehne__prozent { min-width: calc(var(--ctl-h-sm) * 1.75); justify-content: center; font-variant-numeric: tabular-nums; }

.dokumentbuehne__stapel { display: grid; gap: var(--space-xl); justify-items: start; width: max-content; }

.dokumentbuehne__leiste { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.dokumentbuehne__leiste:not(:has([data-dokumentbuehne-hinweis]:not([hidden]))) { display: none; }

[data-a4] { position: relative; }
[data-a4][data-zu-lang]::after { content: ""; position: absolute; inset-inline: 0; top: 297mm; border-top: var(--border-w-stark) dashed var(--state-warn); }

@page dokument { size: A4; margin: 0; }
.druckkopie { display: none; }
@media print {
  :root[data-druckkopie], :root[data-druckkopie] body { background: none !important; margin: 0; padding: 0; }
  :root[data-druckkopie] body > :not(.druckkopie) { display: none !important; }
  :root[data-druckkopie] .druckkopie { display: block; page: dokument; }
  .druckkopie > * { box-sizing: border-box; transform: none !important; margin: 0; border: 0; border-radius: 0; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .druckkopie > [data-a4] { width: 210mm; height: 296mm; min-height: 0; overflow: hidden; break-after: page; break-inside: avoid; }
  .druckkopie > [data-a4]:last-child { break-after: auto; }
  .druckkopie > [data-a4]::after { display: none; }
}

@media (max-width: 720px) { .dokumentbuehne__zoom { inset-block-end: calc(var(--space-2xl) + var(--space-lg)); } }
@media print { .dokumentbuehne__zoom { display: none; } .dokumentbuehne__skala > * { transform: none !important; } .dokumentbuehne__skala { width: auto !important; height: auto !important; } }

.veraenderung {
  margin-inline-start: var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink-faint);
}
.veraenderung[data-zustand="pass"] { color: var(--state-pass); }
.veraenderung[data-zustand="fail"] { color: var(--state-fail); }
.veraenderung[data-zustand="gleich"] { font-weight: var(--fw-regular); }

.tabelle--dicht {
  font-size: var(--text-md);
  letter-spacing: var(--tracking-snug); --row-h: 2.2rem; }
.tabelle--dicht th,
.tabelle--dicht td {
  height: var(--row-h);
  padding-block: 0;
  vertical-align: middle;
  white-space: nowrap;
}

.tabelle--dicht .tabelle__text {
  
  width: 100%;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tabelle--dicht .initialen { width: var(--space-md); height: var(--space-md); }

@media (pointer: coarse) {
  .tabelle--dicht th,
  .tabelle--dicht td {
    height: auto;
    padding: var(--space-2xs) var(--space-xs);
    white-space: normal;
  }
  .tabelle--dicht .tabelle__text { max-width: none; overflow: visible; }
}

.datentabelle th a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--ink-faint);
  text-decoration: none;
}
.datentabelle th a:hover { color: var(--ink); }
.datentabelle th a .symbol { opacity: .5; }
.datentabelle th[aria-sort] a { color: var(--ink); }
.datentabelle th[aria-sort] a .symbol { opacity: 1; color: var(--accent); }
.datentabelle th:first-child,
.datentabelle td:first-child { width: var(--ctl-h-sm); }
.datentabelle input[type="checkbox"] {
  width: var(--icon);
  height: var(--icon);
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.datentabelle tbody tr:has(input[type="checkbox"]:checked) td {
  background: var(--accent-soft);
  color: var(--ink);
}

.kalender {
  width: fit-content;
  max-width: 100%;
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--space-md);
}
.kalender__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-bottom: var(--space-2xs);
}
.kalender__kopf a {
  width: var(--ctl-h-sm);
  height: var(--ctl-h-sm);
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  border-radius: var(--r-sm);
  text-decoration: none;
}
.kalender__kopf a:hover { color: var(--ink); background: var(--surface-state); }
.kalender__kopf b { font-size: var(--text-sm); color: var(--ink); }
.kalender table { width: 100%; border-collapse: collapse; }
.kalender caption {
  padding-bottom: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--ink);
}
.kalender th {
  padding-block: var(--space-3xs);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-faint);
}
.kalender td { padding: 0; }
.kalender td button {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition-property: background-color, color;
  transition-duration: var(--t-fast);
  transition-timing-function: var(--ease);
}
.kalender td button:hover:not([disabled]) { background: var(--surface-state); }
.kalender td button[disabled] { color: var(--ink-faint); cursor: default; }

.kalender td button[aria-current="date"] { color: var(--accent); font-weight: var(--fw-bold); }
.kalender td button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: var(--fw-bold);
}

.kalender__termin::after {
  content: "";
  position: absolute;
  bottom: var(--space-3xs);
  width: var(--space-2xs);
  height: var(--space-2xs);
  border-radius: var(--r-pill);
  background: var(--accent);
}

.bilderfolge {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: min(25rem, 100%);
}

.bilderfolge__bahn {
  
  position: relative;
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 11%;
  
  scroll-behavior: smooth;
  padding-bottom: var(--space-2xs);
}
.bilderfolge__bild {
  flex: 0 0 78%;
  scroll-snap-align: center;
  margin: 0;
}

.bilderfolge__bild img {
  opacity: .45;
  transition: opacity var(--t-base) var(--ease);
}
.bilderfolge__bild[data-aktiv] img { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bilderfolge__bild img { transition: none; }
  .bilderfolge__bahn { scroll-behavior: auto; }
}
.bilderfolge__bild figcaption {
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.bilderfolge__steuer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.bilderfolge__punkte {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-width: 0;
  align-items: center;
  gap: var(--space-2xs);
}

.bilderfolge__punkt {
  width: var(--ctl-h-sm);
  height: var(--ctl-h-sm);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.bilderfolge__punkt::before {
  content: "";
  width: var(--space-xs);
  height: var(--space-xs);
  border-radius: var(--r-pill);
  background: none;
  border: var(--border-w-stark) solid var(--border-strong);
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.bilderfolge__punkt:hover::before { border-color: var(--ink); }
.bilderfolge__punkt[aria-current]::before {
  background: var(--accent);
  border-color: var(--accent);
}

.rollflaeche {
  width: min(20rem, 100%);
  height: 12rem;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  background: var(--surface-raised);
  border-radius: var(--r-md);
  
  scrollbar-gutter: stable;
}
.rollflaeche__zeile {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--border-w) solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--ink);
}
.rollflaeche__zeile:last-child { border-bottom: 0; }
.rollflaeche__zeile span:last-child {
  color: var(--ink-muted);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.teiler {
  display: flex;
  width: min(25rem, 100%);
  height: 9rem;
  overflow: hidden;
  background: var(--surface-raised);
  border-radius: var(--r-md);
}
.teiler__links {
  flex: 0 0 var(--teil, 50%);
  display: grid;
  place-items: center;
  min-width: var(--space-3xl);
}
.teiler__rechts {
  flex: 1;
  display: grid;
  place-items: center;
  min-width: var(--space-3xl);
}
.teiler b { font-size: var(--text-sm); color: var(--ink); }
.teiler__griff {
  width: var(--space-sm);
  flex: none;
  display: grid;
  place-items: center;
  cursor: col-resize;
  touch-action: none;
  
  background: none;
}

.teiler__griff::before {
  content: "";
  width: var(--border-w-stark);
  align-self: stretch;
  background: var(--border-subtle);
  transition: background var(--t-fast) var(--ease);
}
.teiler__griff:hover::before { background: var(--border-strong); }
.teiler__griff:focus-visible::before { background: var(--focus); }

.teiler__griff { position: relative; }
.teiler__griff::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  width: var(--space-xs);
  height: var(--space-md);
  border-radius: var(--r-xs);
  background: radial-gradient(circle, var(--ink-muted) 1px, transparent 1.4px) 0 0 / 4px 5.33px var(--surface-raised);
  outline: var(--border-w) solid var(--border-subtle);
}

.anhang {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: min(25rem, 100%);
  padding: var(--space-sm);
  background: var(--surface-raised);
  border-radius: var(--r-md);
}
.anhang__text { flex: 1; min-width: 0; }
.anhang__text b {
  display: block;
  font-size: var(--text-sm);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.anhang__text p {
  margin: 0;
  max-width: none;
  font-size: var(--text-2xs);
  color: var(--ink-muted);
}
.anhang__text .fortschritt { margin-top: var(--space-2xs); width: 100%; }

.anhang__aktion {
  flex: none;
  transition-property: background-color, border-color, color;
  transition-duration: var(--t-fast);
  transition-timing-function: var(--ease);
}
.anhang__aktion:hover { color: var(--ink); border-color: var(--border-strong); }
.anhang__aktion--gefahr:hover { color: var(--state-fail); border-color: var(--state-fail); }

@media (prefers-reduced-motion: reduce) {
  .inhaltskarte__mehr .symbol,
  .kalender td button,
  .anhang__aktion { transition: none; }
  .inhaltskarte__mehr:hover .symbol { transform: none; }
  .bilderfolge__bahn { scroll-behavior: auto; }
}

.rollzahl {
  display: inline-flex;
  align-items: baseline;
  
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-extrabold);
}
.rollzahl__stelle {
  display: inline-block;
  width: 1ch;
  
  height: 1em;
  height: 1lh;
  overflow: hidden;
}
.rollzahl__band {
  display: block;
  translate: 0 calc(var(--d, 0) * -1lh);
  
  transition: translate var(--t-slow) var(--ease);
}
.rollzahl__band > span {
  display: block;
  height: 1em;
  height: 1lh;
}

.rollzahl { font-size: var(--text-3xl); }
.rollzahl__vor,
.rollzahl__nach { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink-muted); }
.rollzahl__vor { margin-inline-end: var(--space-2xs); }
.rollzahl__nach { margin-inline-start: var(--space-2xs); }

.rollzahl__stelle[data-d="0"] { --d: 0; }
.rollzahl__stelle[data-d="1"] { --d: 1; }
.rollzahl__stelle[data-d="2"] { --d: 2; }
.rollzahl__stelle[data-d="3"] { --d: 3; }
.rollzahl__stelle[data-d="4"] { --d: 4; }
.rollzahl__stelle[data-d="5"] { --d: 5; }
.rollzahl__stelle[data-d="6"] { --d: 6; }
.rollzahl__stelle[data-d="7"] { --d: 7; }
.rollzahl__stelle[data-d="8"] { --d: 8; }
.rollzahl__stelle[data-d="9"] { --d: 9; }

.rollwahl:has(input:checked) .rollzahl__stelle[data-alt="0"] { --d: 0; }
.rollwahl:has(input:checked) .rollzahl__stelle[data-alt="1"] { --d: 1; }
.rollwahl:has(input:checked) .rollzahl__stelle[data-alt="2"] { --d: 2; }
.rollwahl:has(input:checked) .rollzahl__stelle[data-alt="3"] { --d: 3; }
.rollwahl:has(input:checked) .rollzahl__stelle[data-alt="4"] { --d: 4; }
.rollwahl:has(input:checked) .rollzahl__stelle[data-alt="5"] { --d: 5; }
.rollwahl:has(input:checked) .rollzahl__stelle[data-alt="6"] { --d: 6; }
.rollwahl:has(input:checked) .rollzahl__stelle[data-alt="7"] { --d: 7; }
.rollwahl:has(input:checked) .rollzahl__stelle[data-alt="8"] { --d: 8; }
.rollwahl:has(input:checked) .rollzahl__stelle[data-alt="9"] { --d: 9; }

.rollwahl:has(input:checked) .rollzahl__klartext--aus,
.rollwahl:not(:has(input:checked)) .rollzahl__klartext--an { display: none; }

.rollwahl { display: grid; gap: var(--space-sm); justify-items: start; }

@media (prefers-reduced-motion: reduce) {
  
  .rollzahl__band { transition: none; }
}

.bildvergleich {
  position: relative;
  
  --pos: 50%;
  margin: 0;
}
.bildvergleich__nachher {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--pos));
}

.bildvergleich__kante {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: var(--border-w-stark);
  translate: calc(var(--border-w-stark) / -2) 0;
  background: var(--surface-raised);
  
  outline: var(--border-w) solid var(--border-strong);
  pointer-events: none;
}

.bildvergleich__kante::before,
.bildvergleich__kante::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
}
.bildvergleich__kante::before {
  width: var(--ctl-h-sm);
  height: var(--ctl-h-sm);
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  
  outline: var(--border-w) solid var(--border-strong);
}
.bildvergleich__kante::after {
  width: var(--icon);
  height: var(--icon);
  background: var(--ink);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 8 4 4-4 4'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='m6 8-4 4 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bildvergleich__regler {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  appearance: none;
  background: none;
  cursor: ew-resize;
}
.bildvergleich__regler::-webkit-slider-thumb {
  appearance: none;
  width: var(--space-2xl);
  height: 100%;
  background: none;
  cursor: ew-resize;
}
.bildvergleich__regler::-moz-range-thumb {
  width: var(--space-2xl);
  height: 100%;
  border: 0;
  background: none;
  cursor: ew-resize;
}

.bildvergleich__regler:focus-visible {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(var(--border-w) * -2);
  border-radius: var(--r-md);
}

.bildvergleich__marke {
  position: absolute;
  bottom: var(--space-sm);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--r-xs);
  
  background: var(--ink);
  color: var(--surface-base);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  pointer-events: none;
}

.bildvergleich__marke--vorher { left: var(--space-sm); }
.bildvergleich__marke--nachher { right: var(--space-sm); }

.bildvergleich__marke--vorher { clip-path: inset(0 var(--schnitt, 0px) 0 0); }
.bildvergleich__marke--nachher { clip-path: inset(0 0 0 var(--schnitt, 0px)); }

.farbkarte {
  width: min(var(--panel-w) * 1.5, 100%);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
}
.farbkarte__reihe {
  display: flex;
  height: var(--space-4xl);
}
.farbkarte__feld {
  flex: 1;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: flex-grow var(--t-fast) var(--ease-in-out);
}
.farbkarte__feld:hover,
.farbkarte__feld:focus-visible { flex-grow: 2.5; }
.farbkarte__feld:focus-visible {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(var(--border-w) * -2);
}

.farbkarte__feld[data-token="surface-base"]    { background: var(--surface-base); }
.farbkarte__feld[data-token="surface-raised"]  { background: var(--surface-raised); }
.farbkarte__feld[data-token="surface-overlay"] { background: var(--surface-overlay); }
.farbkarte__feld[data-token="ink"]             { background: var(--ink); }
.farbkarte__feld[data-token="ink-muted"]       { background: var(--ink-muted); }
.farbkarte__feld[data-token="accent"]          { background: var(--accent); }
.farbkarte__feld[data-token="accent-soft"]     { background: var(--accent-soft); }
.farbkarte__feld[data-token="state-pass"]      { background: var(--state-pass); }
.farbkarte__feld[data-token="state-fail"]      { background: var(--state-fail); }
.farbkarte__feld[data-token="state-warn"]      { background: var(--state-warn); }

.farbkarte__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--ctl-h-sm);
  padding-inline: var(--space-md);
  background: var(--surface-raised);
  border-top: var(--border-w) solid var(--border-subtle);
  font-size: var(--text-2xs);
  color: var(--ink-muted);
}

.farbkarte__name {
  font-family: var(--font-data);
  color: var(--ink);
}

.farbkarte:has(.farbkarte__feld:hover) .farbkarte__name:not([data-offen]),
.farbkarte:has(.farbkarte__feld:focus-visible) .farbkarte__name:not([data-offen]) { font-size: 0; }
.farbkarte:has(.farbkarte__feld:hover) .farbkarte__name:not([data-offen])::after,
.farbkarte:has(.farbkarte__feld:focus-visible) .farbkarte__name:not([data-offen])::after {
  font-size: var(--text-2xs);
}
.farbkarte:has([data-token="surface-base"]:hover) .farbkarte__name:not([data-offen])::after,
.farbkarte:has([data-token="surface-base"]:focus-visible) .farbkarte__name:not([data-offen])::after { content: "--surface-base"; }
.farbkarte:has([data-token="surface-raised"]:hover) .farbkarte__name:not([data-offen])::after,
.farbkarte:has([data-token="surface-raised"]:focus-visible) .farbkarte__name:not([data-offen])::after { content: "--surface-raised"; }
.farbkarte:has([data-token="surface-overlay"]:hover) .farbkarte__name:not([data-offen])::after,
.farbkarte:has([data-token="surface-overlay"]:focus-visible) .farbkarte__name:not([data-offen])::after { content: "--surface-overlay"; }
.farbkarte:has([data-token="ink"]:hover) .farbkarte__name:not([data-offen])::after,
.farbkarte:has([data-token="ink"]:focus-visible) .farbkarte__name:not([data-offen])::after { content: "--ink"; }
.farbkarte:has([data-token="ink-muted"]:hover) .farbkarte__name:not([data-offen])::after,
.farbkarte:has([data-token="ink-muted"]:focus-visible) .farbkarte__name:not([data-offen])::after { content: "--ink-muted"; }
.farbkarte:has([data-token="accent"]:hover) .farbkarte__name:not([data-offen])::after,
.farbkarte:has([data-token="accent"]:focus-visible) .farbkarte__name:not([data-offen])::after { content: "--accent"; }
.farbkarte:has([data-token="accent-soft"]:hover) .farbkarte__name:not([data-offen])::after,
.farbkarte:has([data-token="accent-soft"]:focus-visible) .farbkarte__name:not([data-offen])::after { content: "--accent-soft"; }
.farbkarte:has([data-token="state-pass"]:hover) .farbkarte__name:not([data-offen])::after,
.farbkarte:has([data-token="state-pass"]:focus-visible) .farbkarte__name:not([data-offen])::after { content: "--state-pass"; }
.farbkarte:has([data-token="state-fail"]:hover) .farbkarte__name:not([data-offen])::after,
.farbkarte:has([data-token="state-fail"]:focus-visible) .farbkarte__name:not([data-offen])::after { content: "--state-fail"; }
.farbkarte:has([data-token="state-warn"]:hover) .farbkarte__name:not([data-offen])::after,
.farbkarte:has([data-token="state-warn"]:focus-visible) .farbkarte__name:not([data-offen])::after { content: "--state-warn"; }

@media (prefers-reduced-motion: reduce) {
  
  .farbkarte__feld { transition: none; }
  .farbkarte__feld:hover,
  .farbkarte__feld:focus-visible { flex-grow: 1; }
}

.nichtgefunden {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  max-width: var(--wrap-text);
  margin-inline: auto;
  padding-block: var(--section-y);
}
.nichtgefunden__zahl {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.nichtgefunden__null { width: .60em; height: .73em; }
.nichtgefunden__ring {
  fill: none;
  stroke: currentColor;
  
  stroke-width: 18;
  stroke-linecap: butt;
  
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: nichtgefunden-zeichnen var(--t-lang) var(--ease) forwards;
}
@keyframes nichtgefunden-zeichnen { to { stroke-dashoffset: 0; } }
.nichtgefunden h3 { margin: 0; font-size: var(--text-2xl); }
.nichtgefunden p { margin: 0; max-width: none; color: var(--ink-muted); }
.nichtgefunden .btn { margin-top: var(--space-xs); }

@media (prefers-reduced-motion: reduce) {
  
  .nichtgefunden__ring { animation: none; stroke-dashoffset: 0; }
}

.tabelle__sortieren .feld-symbol { color: var(--ink-faint); margin-inline-end: var(--space-3xs); vertical-align: -2px; }
.tabelle--fest .spalte-rest { padding: 0; }

.tabelle.tabelle--fest { border-collapse: separate; border-spacing: 0; }

.tabelle--fest .zeilenwahl::before { content: ""; position: absolute; inset-block: 0; inset-inline-end: 100%; inline-size: var(--rand-griff, 0px);
  background: var(--surface-base); z-index: var(--z-unter); pointer-events: none; }

.tabelle--fest tbody.gruppe .gruppe__zeile { background: var(--surface-raised); inset-inline-start: calc(var(--space-xs) + var(--border-w)); }
.tabelle--fest tbody.gruppe .gruppe__zeile::before { content: ""; position: absolute; pointer-events: none;
  inset-block: calc(-1 * (var(--space-xs) + var(--border-w))) calc(-1 * (var(--space-3xs) + var(--border-w)));
  inset-inline-end: calc(100% + var(--space-xs) + var(--border-w)); inline-size: var(--rand-griff, 0px); background: var(--surface-base); }

[data-gerollt] > .tabelle--fest tbody.gruppe .gruppe__zeile::before { box-shadow: inset calc(-1 * var(--border-w)) 0 0 var(--border-subtle); }

.tabelle--fest td.umbruch { white-space: normal; overflow-wrap: anywhere; }
.tabelle--fest td.umbruch * { white-space: normal; }

.tabelle--fest { table-layout: fixed; }
.tabelle--fest :is(th, td) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tabelle--fest .gruppe__kopf th, .tabelle--fest tr:has(> td[colspan]) > td { overflow: visible; }
.tabelle--fest tr:has(> td[colspan]) > td > :first-child { position: sticky; inset-inline-start: var(--space-xs); }
.tabelle--fest col.spalte-wahl { width: 2.5rem; }
.tabelle--fest .zeilenwahl { position: sticky; inset-inline-start: 0; z-index: var(--z-klebend); background: var(--surface-base); text-align: center; overflow: visible; }
.tabelle--fest .fest { position: sticky; inset-inline-start: 2.75rem; z-index: var(--z-klebend); background: var(--surface-base); box-shadow: inset calc(-1 * var(--border-w)) 0 0 var(--border-subtle); }
.tabelle--fest .fest:not(.fest-ende) { box-shadow: none; }

.tabelle--fest tr[aria-selected="true"] td { background: color-mix(in oklab, var(--accent) 8%, var(--surface-base)); }

.tabelle__rahmen:has(> .tabelle--fest) { --rand-griff: var(--space-lg); overflow-x: auto; overflow-y: hidden; scrollbar-gutter: auto;
  inline-size: calc(100% + var(--rand-griff)); margin-inline-start: calc(-1 * var(--rand-griff)); padding-inline-start: var(--rand-griff); }
.tabelle__rahmen--passt:has(> .tabelle--fest) { overflow: visible; }

.tabelle--fest .zeilenwahl input { opacity: 0; transition: opacity var(--t-sofort) var(--ease); }

.tabelle tbody tr[data-oeffne] > td { transition: background-color var(--t-sofort) var(--ease); }
.tabelle tbody tr[data-oeffne]:hover > td { background: color-mix(in oklab, var(--ink) 5%, var(--surface-base)); }
.tabelle--fest tr:hover > .zeilenwahl input,
.tabelle--fest .zeilenwahl input:focus-visible,
.tabelle--fest:has(.zeilenwahl input:checked) .zeilenwahl input { opacity: 1; }
.tabelle--fest thead th { position: sticky; background: var(--surface-base); }

.tabelle--fest thead th { z-index: var(--z-klebend-kopf); }
.tabelle--fest thead th:is(.zeilenwahl, .fest) { z-index: var(--z-klebend-ecke); }

.tabelle--fest thead th[data-zieh-spalte]:not(.fest) { cursor: grab; }
.tabelle--fest thead th[data-zieh-ziel="links"] { box-shadow: inset 3px 0 0 var(--accent); }
.tabelle--fest thead th[data-zieh-ziel="rechts"] { box-shadow: inset -3px 0 0 var(--accent); }

.tabelle--fest tbody tr[data-oeffne] td:not(.zeilenwahl, .spalte-rest), .tabelle--fest thead th:not(.zeilenwahl, .spalte-rest) { border-inline-end: var(--border-w) dashed color-mix(in oklab, var(--border-strong) 22%, transparent); }

.tabelle--fest td[data-zelle] { cursor: text; }
.tabelle--fest tbody tr[data-oeffne] td[data-zelle]:hover { box-shadow: inset 0 0 0 var(--border-w) color-mix(in oklab, var(--border-strong) 60%, transparent); }
.tabelle--fest td.fest { cursor: pointer; }

.tabelle--fest td.zelle-fix { cursor: default; }

.tabelle--fest tr[data-ziehbar] td.fest { cursor: grab; }
.tabelle--fest tr.wird-gezogen { opacity: .45; }
.tabelle--fest tr[data-zieh-zeile="oben"] > td { box-shadow: inset 0 2px 0 var(--accent); }
.tabelle--fest tr[data-zieh-zeile="unten"] > td { box-shadow: inset 0 -2px 0 var(--accent); }
.tabelle--fest tr[data-zieh-zeile="in"] > :is(td, th) { box-shadow: inset 0 0 0 2px var(--accent); }

.tabelle--fest tr.gruppe__kopf > th { position: relative; z-index: var(--z-klebend-zeile); }
.tabelle--fest tr.gruppe__kopf > :is(th, td) { background: var(--surface-base); }

.preisstufen {
  --preisstufe-preis: 3.25rem;
  --preisstufe-zeile: calc(var(--space-sm) + var(--space-3xs));
  --preisstufe-zwischen: calc(var(--space-md) + var(--space-2xs));
  display: grid;
  gap: var(--space-lg);
  container-type: inline-size;
}

.preisstufen__takt {
  justify-self: center;
  display: inline-flex;
  gap: var(--space-3xs);
  margin: 0;
  padding: var(--space-3xs);
  min-inline-size: 0;
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
}
.preisstufen__takt label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.25rem;
  padding: 0 var(--space-md);
  border-radius: var(--r-sm);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.preisstufen__takt label:hover { color: var(--ink); }
.preisstufen__takt label:has(input:checked) { background: var(--accent); color: var(--accent-ink); }
.preisstufen__takt label:has(input:focus-visible) { outline: var(--border-w-stark) solid var(--focus); outline-offset: calc(var(--border-w) * -2); }
.preisstufen__chip {
  padding: 0 var(--space-2xs);
  border-radius: var(--r-xs);
  font-size: var(--text-2xs);
  background: var(--accent-soft);
  color: var(--ink);
}
.preisstufen__takt label:has(input:checked) .preisstufen__chip { background: var(--accent-ink); color: var(--accent); }

.preisstufen:has(.preisstufen__takt [value="monatlich"]:checked) .rollzahl__stelle[data-alt="0"] { --d: 0; }
.preisstufen:has(.preisstufen__takt [value="monatlich"]:checked) .rollzahl__stelle[data-alt="1"] { --d: 1; }
.preisstufen:has(.preisstufen__takt [value="monatlich"]:checked) .rollzahl__stelle[data-alt="2"] { --d: 2; }
.preisstufen:has(.preisstufen__takt [value="monatlich"]:checked) .rollzahl__stelle[data-alt="3"] { --d: 3; }
.preisstufen:has(.preisstufen__takt [value="monatlich"]:checked) .rollzahl__stelle[data-alt="4"] { --d: 4; }
.preisstufen:has(.preisstufen__takt [value="monatlich"]:checked) .rollzahl__stelle[data-alt="5"] { --d: 5; }
.preisstufen:has(.preisstufen__takt [value="monatlich"]:checked) .rollzahl__stelle[data-alt="6"] { --d: 6; }
.preisstufen:has(.preisstufen__takt [value="monatlich"]:checked) .rollzahl__stelle[data-alt="7"] { --d: 7; }
.preisstufen:has(.preisstufen__takt [value="monatlich"]:checked) .rollzahl__stelle[data-alt="8"] { --d: 8; }
.preisstufen:has(.preisstufen__takt [value="monatlich"]:checked) .rollzahl__stelle[data-alt="9"] { --d: 9; }

.preisstufen:has(.preisstufen__takt [value="monatlich"]:checked) [data-takt="jaehrlich"],
.preisstufen:not(:has(.preisstufen__takt [value="monatlich"]:checked)) [data-takt="monatlich"] { display: none; }

.preisstufen__reihe {
  display: grid;
  
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--preisstufe-zwischen);
  padding-block-start: var(--space-lg);
}
.preisstufe {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--surface-raised);
  border: var(--border-w-stark) solid var(--border-subtle);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.preisstufe:hover { border-color: var(--border-strong); }

.preisstufe:has(> .btn[aria-pressed="true"]) { border-color: var(--accent); }

@container (min-width: 38.5rem) {
  .preisstufe--empfohlen { translate: 0 calc(-1 * var(--space-md)); }
}

.preisstufe__marke {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% -50%;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--r-xs);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.preisstufe__name {
  margin: 0;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.preisstufe__preis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs);
  margin: 0;
  color: var(--ink);
}
.preisstufe__preis .rollzahl { font-size: var(--preisstufe-preis); letter-spacing: -0.02em; }
.preisstufe__waehrung { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink-muted); }
.preisstufe__einheit { font-size: var(--text-sm); color: var(--ink-muted); }

.preisstufe__vergleich {
  margin: calc(-1 * var(--space-xs)) 0 0;
  font-size: var(--text-2xs);
  color: var(--ink-muted);
}
.preisstufe__vergleich s { text-decoration-thickness: var(--border-w); }

.preisstufe__satz { margin: 0; max-width: none; font-size: var(--text-sm); color: var(--ink-muted); }

.preisstufe__liste {
  display: grid;
  gap: var(--preisstufe-zeile);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}
.preisstufe__liste li { display: flex; gap: var(--space-xs); align-items: flex-start; }
.preisstufe__liste .symbol { flex: none; margin-block-start: 0.15em; color: var(--accent); }

.preisstufe > .btn { position: static; margin-block-start: auto; }
.preisstufe > .btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.preisstufe > .btn[aria-pressed="false"] {
  background: none;
  color: var(--ink);
  border-color: var(--border-strong);
}
.preisstufe:hover > .btn[aria-pressed="false"] { border-color: var(--ink); }

.preisstufen__stand {
  margin: 0;
  max-width: none;
  min-height: 1lh;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  text-align: center;
}
.preisstufen__stand b { color: var(--ink); }

.tabelle--dicht thead th { font-size: var(--text-xs); }
.tabelle tbody tr[data-oeffne] { cursor: pointer; }
.tabelle tbody tr[data-oeffne]:hover td { background: color-mix(in oklab, var(--ink) 5%, var(--surface-base)); }

.tabelle .gruppe__kopf th { padding-block: var(--space-sm) var(--space-3xs); padding-inline-start: var(--space-xs); text-transform: none; letter-spacing: normal; font-weight: var(--fw-regular); border-bottom: var(--border-w) solid var(--border-subtle); }
.tabelle .gruppe__schalter b { font-weight: var(--fw-semibold); }
.tabelle .gruppe__summe { text-transform: none; letter-spacing: normal; }

.tabelle--fest .summenzeile td { border-inline: 0; box-shadow: none; background: var(--surface-base); }
.tabelle--fest .summenzeile:hover td { box-shadow: none; }

.telefonrahmen {
  container-type: inline-size;
  position: relative;
  display: flex;
  width: min(100%, var(--telefonrahmen-b, 20rem));
  margin-inline: auto;
  aspect-ratio: 433 / 882;
  
  min-height: 0;
  
  padding: 0;
  background: var(--surface-overlay);
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: calc(var(--r-xl) * 5);
}

.telefonrahmen::before, .telefonrahmen::after {
  content: "";
  position: absolute;
  inset-block-start: 20%;
  inset-inline-start: 0;
  width: var(--space-3xs);
  background: var(--border-strong);
  border-radius: var(--r-xs);
}
.telefonrahmen::before { inset-inline-start: calc(-1 * var(--space-2xs)); inset-block-start: 20%; height: 14%; }
.telefonrahmen::after { inset-inline-start: auto; inset-inline-end: calc(-1 * var(--space-2xs)); inset-block-start: 32%; height: 11%; }

.telefonrahmen__bildschirm {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  margin: 2.5cqw;
  padding-block-start: 15cqw;
  background: var(--surface-base);
  border-radius: calc(var(--r-xl) * 4);
  overflow: hidden;
}

.telefonrahmen__bildschirm::before {
  content: "";
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline: 0;
  margin-inline: auto;
  width: 28%;
  aspect-ratio: 124 / 37;
  background: var(--ink);
  border-radius: var(--r-pill);
}

.telefonrahmen__bildschirm::after {
  content: "";
  flex: none;
  align-self: center;
  width: 34%;
  height: 0.625cqw;
  margin-block: 1.25cqw 2.5cqw;
  background: var(--ink);
  border-radius: var(--r-pill);
}
.telefonrahmen__status {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  min-height: var(--space-2xl);
  padding: var(--space-sm) var(--space-lg) var(--space-xs);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.telefonrahmen__status-zeichen { display: flex; gap: var(--space-2xs); align-items: center; }
.telefonrahmen__status .symbol { width: var(--space-sm); height: var(--space-sm); }

.telefonrahmen__bild { display: block; flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top; }
.telefonrahmen__inhalt { display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; min-height: 0; padding: var(--space-xs) var(--space-md) var(--space-md); }
.telefonrahmen__leiste {
  display: flex;
  justify-content: space-around;
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border-top: var(--border-w) solid var(--border-subtle);
  color: var(--ink-faint);
}
.telefonrahmen__leiste .ist-aktiv { color: var(--ink); }

.telefonrahmen__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); }
.telefonrahmen__kopf b { font-size: var(--text-lg); }
.telefonrahmen__kopf span { font-size: var(--text-xs); color: var(--ink-muted); }
.telefonrahmen__preis { font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.telefonrahmen__hinweis { margin: 0; font-size: var(--text-xs); color: var(--ink-muted); }

.telefonrahmen .zeile { width: 100%; padding: var(--space-xs); gap: var(--space-xs); }
.telefonrahmen .zeile .kachel { flex: none; }
.telefonrahmen .zeile__text p { font-size: var(--text-xs); }
.telefonrahmen__inhalt .btn { margin-top: auto; width: 100%; justify-content: center; }
@container (max-width: 17rem) {
  .telefonrahmen__status { padding-inline: var(--space-md); }
  .telefonrahmen__inhalt { gap: var(--space-xs); padding-inline: var(--space-xs); }
  .telefonrahmen__leiste { padding-inline: var(--space-xs); }
  .telefonrahmen__kopf span, .telefonrahmen__hinweis, .telefonrahmen .zeile .kachel { display: none; }
}

.laptoprahmen {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, var(--laptoprahmen-b, 44rem));
  margin-inline: auto;
}

.laptoprahmen__deckel {
  position: relative;
  display: flex;
  width: 86%;
  aspect-ratio: 1.53;
  min-height: 0;
  background: var(--surface-overlay);
  border: var(--border-w-stark) solid var(--border-strong);
  border-block-end: 0;
  border-radius: calc(var(--r-xl) * 2) calc(var(--r-xl) * 2) 0 0;
}

.laptoprahmen__deckel::before {
  content: "";
  position: absolute;
  inset-block-start: 1.2cqw;
  inset-inline: 0;
  z-index: var(--z-ueber);
  margin-inline: auto;
  width: 11%;
  height: 2.1cqw;
  background: var(--surface-overlay);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.laptoprahmen__bildschirm {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  margin: 1.2cqw 1.2cqw 0;
  background: var(--surface-base);
  border-radius: var(--r-md) var(--r-md) 0 0;
  overflow: hidden;
}

.laptoprahmen__unterteil {
  position: relative;
  width: 100%;
  height: 2.4cqw;
  background: var(--surface-overlay);
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: var(--r-xs) var(--r-xs) calc(var(--r-xl) * 3) calc(var(--r-xl) * 3) / var(--r-xs) var(--r-xs) 100% 100%;
}
.laptoprahmen__unterteil::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  margin-inline: auto;
  width: 14%;
  height: 45%;
  background: var(--border-subtle);
  border-radius: 0 0 var(--r-md) var(--r-md);
}

.laptoprahmen__bild { display: block; flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top left; }
.laptoprahmen__inhalt { display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; min-height: 0; padding: 4cqw 5cqw; overflow: hidden; }

.laptoprahmen__bildschirm .laptoprahmen__inhalt h2 { font-size: clamp(var(--text-lg), 6cqw, var(--text-3xl)); line-height: 1.05; }
.laptoprahmen__bildschirm .laptoprahmen__inhalt p { font-size: clamp(var(--text-2xs), 2.4cqw, var(--text-md)); }
@container (max-width: 26rem) {
  .laptoprahmen__inhalt { gap: var(--space-2xs); }
  .laptoprahmen__inhalt p:not(.ueberzeile) { display: none; }
  .laptoprahmen__inhalt .btn { min-height: 0; padding: var(--space-3xs) var(--space-xs); font-size: var(--text-2xs); }
}

.browserrahmen {
  container-type: inline-size;
  
  inline-size: 100%;
  min-width: 0;
  background: var(--surface-overlay);
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.browserrahmen__leiste {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  border-bottom: var(--border-w) solid var(--border-subtle);
}
.browserrahmen__punkte { display: flex; gap: var(--space-xs); }
.browserrahmen__punkte i { display: block; width: var(--space-xs); aspect-ratio: 1; background: var(--border-strong); border-radius: var(--r-pill); }
.browserrahmen__adresse {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-width: 0;
  max-width: 28rem;
  width: 100%;
  margin-inline: auto;
  padding: var(--space-3xs) var(--space-sm);
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-xs);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}
.browserrahmen__adresse span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browserrahmen__adresse .symbol, .browserrahmen__neu { flex: none; width: var(--space-sm); height: var(--space-sm); }
.browserrahmen__neu { color: var(--ink-faint); }
.browserrahmen__seite { background: var(--surface-base); display: flex; flex-direction: column; }

.browserrahmen__bild { display: block; width: 100%; height: auto; }

.browserrahmen__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  border-bottom: var(--border-w) solid var(--border-subtle);
  font-size: var(--text-sm);
}
.browserrahmen__kopf b { font-size: var(--text-md); }
.browserrahmen__kopf ul { display: none; margin: 0; padding: 0; list-style: none; gap: var(--space-md); color: var(--ink-muted); }
.browserrahmen__koerper { display: grid; gap: var(--space-md); padding: var(--space-xl) var(--space-lg); }
.browserrahmen__koerper h3 { font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.browserrahmen__koerper p { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); }
.browserrahmen__koerper .btn { justify-self: start; }
.browserrahmen__leistungen { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; align-content: start; }
.browserrahmen__leistungen li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-xs); border-bottom: var(--border-w) solid var(--border-subtle); font-size: var(--text-sm); }
.browserrahmen__leistungen span { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
@container (min-width: 36rem) {
  .browserrahmen__kopf ul { display: flex; }
  .browserrahmen__koerper { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); padding: var(--space-2xl) var(--space-xl); }
}

@container (max-width: 20rem) {
  .browserrahmen__leiste { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs); padding-inline: var(--space-xs); }
  .browserrahmen__neu { display: none; }
  .browserrahmen__kopf { padding-inline: var(--space-sm); }
  .browserrahmen__koerper { padding: var(--space-md) var(--space-sm); }
  .browserrahmen__koerper h3 { font-size: var(--text-lg); overflow-wrap: anywhere; }
}

.lupe { container-type: inline-size; inline-size: 100%; display: grid; gap: var(--space-xs); margin: 0; }
.lupe__flaeche {
  --lupe-d: var(--lupe-groesse, 10rem);
  --lupe-x: 50%;
  --lupe-y: 50%;
  position: relative;
  overflow: hidden;
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-base);
  cursor: crosshair;
  touch-action: pan-y;
  user-select: none;
}
.lupe__glas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--surface-base);
  clip-path: circle(calc(var(--lupe-d) / 2) at var(--lupe-x) var(--lupe-y));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}
.lupe__innen { position: absolute; inset: 0; transform: scale(var(--lupe-zoom, 2.4)); transform-origin: var(--lupe-x) var(--lupe-y); }
.lupe__ring {
  position: absolute;
  inset-inline-start: var(--lupe-x);
  inset-block-start: var(--lupe-y);
  width: var(--lupe-d);
  height: var(--lupe-d);
  margin-inline-start: calc(var(--lupe-d) / -2);
  margin-block-start: calc(var(--lupe-d) / -2);
  border: var(--border-w-stark) solid var(--ink);
  border-radius: var(--r-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}
.lupe__flaeche[data-lupe="an"] .lupe__glas, .lupe__flaeche[data-lupe="an"] .lupe__ring { opacity: 1; }
.lupe__flaeche:focus-visible { outline: var(--border-w-stark) solid var(--accent); outline-offset: calc(var(--border-w) * -2); }
.lupe__hinweis { margin: 0; font-size: var(--text-xs); color: var(--ink-faint); max-width: var(--wrap-text); }
@container (max-width: 33.99rem) { .lupe__flaeche { --lupe-d: min(var(--lupe-groesse, 10rem), 8rem); } }

.lupe__bild { display: block; width: 100%; height: auto; }
.lupe__bild text { font-family: var(--font-ui); fill: var(--ink-muted); }
.lupe__bild .lupe__fett { fill: var(--ink); font-weight: var(--fw-semibold); }
.lupe__bild .lupe__faint { fill: var(--ink-faint); }
.lupe__bild .lupe__linie { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.lupe__bild .lupe__fein { fill: none; stroke: var(--border-strong); stroke-linecap: round; stroke-linejoin: round; }
.lupe__bild .lupe__zart { fill: none; stroke: var(--border-subtle); stroke-linecap: round; stroke-linejoin: round; }
.lupe__bild .lupe__f1 { fill: var(--surface-base); stroke: none; }
.lupe__bild .lupe__f2 { fill: var(--surface-raised); stroke: none; }
.lupe__bild .lupe__f3 { fill: var(--surface-overlay); stroke: none; }

.pixelaufbau { display: grid; gap: var(--space-sm); justify-items: start; }
.pixelaufbau__flaeche { position: relative; width: 100%; border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; background: var(--surface-base); }
.pixelaufbau__bild { display: block; width: 100%; height: auto; }
.pixelaufbau__flaeche.ist-aufbau > .pixelaufbau__bild { opacity: 0; }
.pixelaufbau__stapel { position: absolute; inset: 0; }
.pixelaufbau__zelle { position: absolute; inset: 0; opacity: 0; filter: grayscale(1); transition: opacity var(--t-lang) var(--ease), filter var(--t-lang) var(--ease); }
.pixelaufbau__zelle > svg { display: block; width: 100%; height: 100%; }
.pixelaufbau__flaeche.ist-da .pixelaufbau__zelle { opacity: 1; }
.pixelaufbau__flaeche.ist-farbe .pixelaufbau__zelle { filter: none; }

@media (prefers-reduced-motion: reduce) { 
  .pixelaufbau__stapel { display: none; }
  .pixelaufbau__flaeche.ist-aufbau > .pixelaufbau__bild { opacity: 1; }
  .pixelaufbau__neu { display: none; }
}

.pixelaufbau__bild text { font-family: var(--font-ui); fill: var(--ink-muted); }
.pixelaufbau__bild .pixelaufbau__fett { fill: var(--ink); font-weight: var(--fw-semibold); }
.pixelaufbau__bild .pixelaufbau__faint { fill: var(--ink-faint); }
.pixelaufbau__bild .pixelaufbau__linie { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.pixelaufbau__bild .pixelaufbau__fein { fill: none; stroke: var(--border-strong); stroke-linecap: round; stroke-linejoin: round; }
.pixelaufbau__bild .pixelaufbau__f1 { fill: var(--surface-base); stroke: none; }
.pixelaufbau__bild .pixelaufbau__f2 { fill: var(--surface-raised); stroke: none; }
.pixelaufbau__bild .pixelaufbau__f3 { fill: var(--surface-overlay); stroke: none; }
.pixelaufbau__bild .pixelaufbau__akzent { fill: var(--accent); stroke: none; }
.pixelaufbau__bild .pixelaufbau__gestrichelt { stroke-dasharray: 6 5; }

.terminal { border: var(--border-w) solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-overlay); overflow: hidden; }
.terminal__kopf { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); border-bottom: var(--border-w) solid var(--border-subtle); font-size: var(--text-xs); color: var(--ink-muted); }
.terminal__koerper { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.terminal__zeile { display: flex; align-items: baseline; gap: var(--space-xs); margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.terminal__zeile--befehl { margin-top: var(--space-xs); font-weight: var(--fw-semibold); }
.terminal__zeile--befehl:first-child { margin-top: 0; }
.terminal__zeile--antwort { padding-inline-start: var(--space-md); color: var(--ink-muted); }
.terminal__zeile--fertig { color: var(--ink); }
.terminal__zeile .symbol { flex: none; align-self: center; }
.terminal__prompt { color: var(--ink-faint); user-select: none; }

.terminal__zeile--aus { visibility: hidden; }

.terminal__cursor { display: inline-block; inline-size: 0.6em; block-size: 1em; background: var(--ink); align-self: center; }
.terminal__fuss { padding: var(--space-xs) var(--space-md); border-top: var(--border-w) solid var(--border-subtle); }
@media (prefers-reduced-motion: reduce) { 
  .terminal__fuss { display: none; }
}

.tiefenkarussell { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); justify-items: center; }
.tiefenkarussell__buehne { position: relative; isolation: isolate; width: 100%; user-select: none; -webkit-user-select: none; }
.tiefenkarussell__buehne:focus-visible { outline: var(--border-w-stark) solid var(--accent); outline-offset: calc(var(--border-w) * -2); }
.tiefenkarussell__karten {
  list-style: none; margin: 0; padding: var(--space-xs) var(--gutter) var(--space-md);
  display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.tiefenkarussell__karte {
  position: relative; flex: 0 0 min(80%, 18.75rem); aspect-ratio: 4 / 5; scroll-snap-align: center; overflow: hidden;
  background: var(--surface-raised); border: var(--border-w) solid var(--border-strong); border-radius: var(--r-md);
}
.tiefenkarussell__foto { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.tiefenkarussell__foto--links { object-position: 25% 50%; }
.tiefenkarussell__schleier { position: absolute; inset: 0; background: var(--surface-base); opacity: 0; pointer-events: none; }
.tiefenkarussell__name { display: grid; justify-items: center; gap: var(--space-3xs); text-align: center; min-height: 2.75em; margin: 0; }
.tiefenkarussell__name strong { font-size: var(--text-lg); }
.tiefenkarussell__name span { font-size: var(--text-sm); color: var(--ink-muted); }

.tiefenkarussell--an .tiefenkarussell__buehne { height: 28rem; display: flex; align-items: center; justify-content: center; perspective: 87.5rem; overflow: clip; touch-action: pan-y; cursor: grab; }
.tiefenkarussell--an .tiefenkarussell__buehne:active { cursor: grabbing; }
.tiefenkarussell--an .tiefenkarussell__karten { position: absolute; inset: 0; padding: 0; display: block; overflow: visible; scroll-snap-type: none; transform-style: preserve-3d; }
.tiefenkarussell--an .tiefenkarussell__karte { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 18.75rem; height: 23.75rem; aspect-ratio: auto; flex: none; transform-origin: center; cursor: pointer; will-change: transform; }
@media (prefers-reduced-motion: reduce) { 
  .tiefenkarussell--an .tiefenkarussell__karte { will-change: auto; }
}

.treibende-wand { inline-size: 100%; container-type: inline-size; }
.treibende-wand__rahmen { user-select: none; -webkit-user-select: none; --w-breite: 12.5rem; --w-hoehe: 8.25rem; --w-luecke: var(--space-md); --w-hub: 4rem; }
.treibende-wand__quelle { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-md); }
.treibende-wand__quelle .treibende-wand__kachel { display: grid; gap: var(--space-2xs); color: var(--ink); text-decoration: none; }
.treibende-wand__quelle .treibende-wand__innen { display: block; aspect-ratio: 3 / 2; overflow: hidden; border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface-base); }
.treibende-wand__quelle .treibende-wand__name { font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.treibende-wand__quelle .treibende-wand__kachel:hover .treibende-wand__innen { border-color: var(--border-strong); }
.treibende-wand__quelle .treibende-wand__kachel:focus-visible { outline: var(--border-w-stark) solid var(--accent); outline-offset: calc(var(--border-w) * -2); }
.treibende-wand__foto { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.treibende-wand__rahmen--an { position: relative; height: 36rem; overflow: hidden; perspective: 75rem; perspective-origin: 50% 50%; border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface-base); }
.treibende-wand__rahmen--an .treibende-wand__quelle { display: none; }
.treibende-wand__ebene { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; display: flex; transform-style: preserve-3d; transform-origin: 50% 50%; will-change: transform; }
.treibende-wand__spalte { position: relative; width: calc(var(--w-breite) + var(--w-luecke)); transform-style: preserve-3d; }
.treibende-wand__spur { display: flex; flex-direction: column; will-change: transform; transform-style: preserve-3d; }
.treibende-wand__rahmen--an .treibende-wand__kachel { position: relative; display: block; width: 100%; height: calc(var(--w-hoehe) + var(--w-luecke)); flex: none; transform-style: preserve-3d; color: var(--ink); text-decoration: none; outline: none; }
.treibende-wand__rahmen--an .treibende-wand__innen {
  position: absolute; inset: calc(var(--w-luecke) / 2); display: block; overflow: hidden; pointer-events: none;
  background: var(--surface-base); border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-md);
  opacity: 0.6; transform: translateZ(0);
  transition: transform var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease);
}

.treibende-wand__rahmen--an .treibende-wand__kachel.ist-aktiv .treibende-wand__innen,
.treibende-wand__rahmen--an .treibende-wand__kachel:focus-visible .treibende-wand__innen { opacity: 1; transform: translateZ(var(--w-hub)); border-color: var(--accent); }
.treibende-wand__rahmen--an .treibende-wand__name {
  position: absolute; inset-inline-start: var(--space-xs); inset-block-end: var(--space-xs); padding: var(--space-3xs) var(--space-xs);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--ink);
  background: var(--surface-overlay); border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-xs);
  opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.treibende-wand__rahmen--an .treibende-wand__kachel.ist-aktiv .treibende-wand__name,
.treibende-wand__rahmen--an .treibende-wand__kachel:focus-visible .treibende-wand__name { opacity: 1; }
@container (max-width: 34rem) {
  .treibende-wand__rahmen { --w-breite: 9rem; --w-hoehe: 6rem; --w-hub: 2.5rem; }
  .treibende-wand__rahmen--an { height: 30rem; }
}
@media (prefers-reduced-motion: reduce) { 
  .treibende-wand__ebene, .treibende-wand__spur { will-change: auto; }
  .treibende-wand__rahmen--an .treibende-wand__innen, .treibende-wand__rahmen--an .treibende-wand__name { transition: none; }
}

.bildakkordeon { inline-size: 100%; container-type: inline-size; }
.bildakkordeon__reihe {
  --h-gap: var(--space-xs);
  --h-wachs: 4.33;                       
  --h-kippung: 8deg;
  --h-medium: 63cqw;                     
  list-style: none; margin: 0; padding: 0; height: 28rem; user-select: none; -webkit-user-select: none;
  display: flex; gap: var(--h-gap); perspective: 87.5rem; perspective-origin: 50% 50%;
}
.bildakkordeon__feld {
  position: relative; flex: 1 1 0; min-width: 0; min-height: 0;
  transform: rotateY(calc(var(--vz, 0) * var(--h-kippung)));
  transition: flex-grow var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.bildakkordeon__feld.ist-aktiv { flex-grow: var(--h-wachs); transform: none; }
.bildakkordeon__link {
  position: absolute; inset: 0; display: block; overflow: hidden; text-decoration: none; color: var(--ink);
  background: var(--surface-raised); border: var(--border-w) solid var(--border-strong); border-radius: var(--r-md);
  transition: border-color var(--t-base) var(--ease);
}
.bildakkordeon__feld.ist-aktiv .bildakkordeon__link { border-color: var(--accent); }
.bildakkordeon__link:focus-visible { outline: var(--border-w-stark) solid var(--accent); outline-offset: calc(var(--border-w) * -2); }
.bildakkordeon__bild {
  position: absolute; inset-block-start: 0; inset-inline-start: 50%; width: var(--h-medium); height: 100%;
  transform: translateX(calc(-50% + var(--d, 0) * 0.5 * 0.06 * var(--h-medium)));
  transition: transform var(--t-slow) var(--ease);
}
.bildakkordeon__foto { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.bildakkordeon__foto--links { object-position: 25% 50%; }
.bildakkordeon__schleier { position: absolute; inset: 0; background: var(--surface-base); opacity: 0.35; pointer-events: none; transition: opacity var(--t-slow) var(--ease); }
.bildakkordeon__feld.ist-aktiv .bildakkordeon__schleier { opacity: 0; }

.bildakkordeon__nr, .bildakkordeon__name {
  background: var(--surface-overlay); border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-xs);
}
.bildakkordeon__nr { position: absolute; inset-block-start: var(--space-xs); inset-inline-start: var(--space-xs); min-width: var(--space-lg); padding: var(--space-3xs) var(--space-xs); text-align: center; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--ink-muted); }
.bildakkordeon__name {
  position: absolute; inset-inline-start: var(--space-md); inset-block-end: var(--space-md); display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm);
  max-width: calc(100% - 2 * var(--space-md)); white-space: nowrap; overflow: hidden;
  opacity: 0; transition: opacity var(--t-fast) var(--ease);
}
.bildakkordeon__name strong { font-size: var(--text-md); }
.bildakkordeon__name span { font-size: var(--text-xs); color: var(--ink-muted); }
.bildakkordeon__feld.ist-aktiv .bildakkordeon__name { opacity: 1; transition: opacity var(--t-base) var(--ease) var(--t-base); }

@container (max-width: 34rem) {
  .bildakkordeon__reihe { flex-direction: column; height: 34rem; perspective: none; --h-medium: 100cqw; }
  .bildakkordeon__feld { transform: none; }
  .bildakkordeon__bild { inset-block-start: 50%; inset-inline-start: 0; width: 100%; height: 63%; transform: translateY(calc(-50% + var(--d, 0) * 0.5 * 0.06 * 34rem)); }
}
@media (prefers-reduced-motion: reduce) { 
  
  .bildakkordeon__feld, .bildakkordeon__bild, .bildakkordeon__schleier, .bildakkordeon__name, .bildakkordeon__link { transition: none; }
  .bildakkordeon__feld { transform: none; }
  .bildakkordeon__bild { transform: translateX(-50%); }
  @container (max-width: 34rem) { .bildakkordeon__bild { transform: translateY(-50%); } }
}

.mauerwerk { inline-size: 100%; }
.mauerwerk__liste { list-style: none; margin: 0; padding: 0; columns: 12rem 4; column-gap: var(--space-sm); }
.mauerwerk__kachel { break-inside: avoid; margin-bottom: var(--space-sm); }
.mauerwerk__link { position: relative; display: block; color: var(--ink); text-decoration: none; }
.mauerwerk__bild {
  display: block; overflow: hidden; background: var(--surface-base);
  border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-md);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.mauerwerk__foto { display: block; width: 100%; height: auto; object-fit: cover; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.mauerwerk__name {
  position: absolute; inset-inline-start: var(--space-xs); inset-block-end: var(--space-xs); padding: var(--space-3xs) var(--space-xs);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  background: var(--surface-overlay); border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-xs);
}
.mauerwerk__link:hover .mauerwerk__bild { border-color: var(--border-strong); }
.mauerwerk__link:focus-visible { outline: var(--border-w-stark) solid var(--accent); outline-offset: calc(var(--border-w) * -2); border-radius: var(--r-md); }
.mauerwerk__liste--an { columns: auto; position: relative; user-select: none; -webkit-user-select: none; }
.mauerwerk__liste--an .mauerwerk__kachel { position: absolute; inset-block-start: 0; inset-inline-start: 0; margin: 0; padding: calc(var(--space-sm) / 2); }
.mauerwerk__liste--an .mauerwerk__link, .mauerwerk__liste--an .mauerwerk__bild, .mauerwerk__liste--an .mauerwerk__foto { height: 100%; }
.mauerwerk__liste--an .mauerwerk__kachel.ist-bereit { transition: transform var(--t-slow) var(--ease), width var(--t-slow) var(--ease), height var(--t-slow) var(--ease); }
.mauerwerk__liste--an .mauerwerk__kachel.ist-wartend { opacity: 0; }
.mauerwerk__liste--an .mauerwerk__link:hover .mauerwerk__bild { transform: scale(0.95); }
@media (prefers-reduced-motion: reduce) { 
  .mauerwerk__bild { transition: none; }
  .mauerwerk__liste--an .mauerwerk__link:hover .mauerwerk__bild { transform: none; }
  .mauerwerk__liste--an .mauerwerk__kachel.ist-bereit { transition: none; }
}

.geraetepaar { position: relative; inline-size: 100%; padding-inline-end: 16%; padding-block-end: 12%; }
.geraetepaar > .telefonrahmen { position: absolute; inset-inline-end: 0; inset-block-end: 0; width: 30%; margin: 0; }

.anbindungen { container-type: inline-size; }
.anbindungen__raster { display: grid; gap: var(--space-xl); align-items: start; }
@container (min-width: 56rem) {
  .anbindungen__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
}

.anbindungen__logo { display: block; width: var(--space-2xl); height: var(--space-2xl); color: var(--ink); flex: none; }
.anbindungen__logo rect { fill: var(--surface-raised); stroke: var(--border-strong); stroke-width: var(--border-w); }
.anbindungen__logo text { fill: currentColor; font-family: var(--font-ui); font-weight: var(--fw-bold); text-anchor: middle; }

.anbindungen__haupt {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--accent);
  border-radius: var(--r-md);
}
.anbindungen__haupt > * { margin: 0; }
.anbindungen__haupt-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.anbindungen__haupt .anbindungen__logo { width: var(--space-3xl); height: var(--space-3xl); }
.anbindungen__haupt h2 { font-size: var(--text-2xl); line-height: var(--leading-tight); }
.anbindungen__punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); color: var(--ink-muted); font-size: var(--text-sm); }
.anbindungen__punkte li { display: flex; gap: var(--space-xs); align-items: baseline; }
.anbindungen__punkte .symbol { color: var(--ink); transform: translateY(var(--space-3xs)); }

.anbindungen__suche { display: grid; gap: var(--space-2xs); margin-block-end: var(--space-xl); }
.anbindungen__suche .feld { width: min(calc(var(--panel-w) + var(--space-4xl)), 100%); }
.anbindungen__zaehler { font-size: var(--text-xs); color: var(--ink-muted); margin: 0; }

.anbindungen__liste { list-style: none; margin: 0; padding: 0; border-top: var(--border-w) solid var(--border-strong); }
.anbindungen__liste > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs) var(--space-md);
  align-items: center;
  padding-block: var(--space-md);
  border-bottom: var(--border-w) solid var(--border-subtle);
}
.anbindungen__liste > li[hidden] { display: none; }
.anbindungen__text { display: grid; gap: var(--space-3xs); min-width: 0; }
.anbindungen__text > * { margin: 0; }
.anbindungen__name { font-weight: var(--fw-semibold); color: var(--ink); }
.anbindungen__satz { font-size: var(--text-sm); color: var(--ink-muted); }
.anbindungen__rand { grid-column: 2; display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
@container (min-width: 40rem) {
  .anbindungen__liste > li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .anbindungen__rand { grid-column: 3; justify-content: flex-end; flex-wrap: nowrap; }
}
.anbindungen__leer { margin: 0; padding-block: var(--space-lg); color: var(--ink-muted); }

.werdegang { container-type: inline-size; }
.werdegang .zeitstrahl { max-width: var(--wrap-text); }
.werdegang__kopf { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; min-height: var(--space-lg); margin-block-end: var(--space-2xs); }
.werdegang__marke { display: block; height: var(--space-lg); width: auto; color: var(--ink); }
.werdegang__marke text { fill: currentColor; font-family: var(--font-ui); font-weight: var(--fw-bold); }
.werdegang__marke rect, .werdegang__marke circle, .werdegang__marke path { fill: none; stroke: currentColor; stroke-width: var(--border-w-stark); }
.werdegang__marke .werdegang__voll { fill: currentColor; stroke: none; }
.werdegang__text { margin: 0; max-width: var(--wrap-text); }

.zahlungsverlauf { container-type: inline-size; display: grid; gap: var(--space-md); }
.zahlungsverlauf .tabelle { font-size: var(--text-sm); }
.zahlungsverlauf .tabelle caption { color: var(--ink-muted); }
.zahlungsverlauf .tabelle td { vertical-align: middle; }
.zahlungsverlauf__datum { white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.zahlungsverlauf__betrag { white-space: nowrap; color: var(--ink); }
.zahlungsverlauf__betrag--minus { color: var(--ink-muted); }
.zahlungsverlauf__fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.zahlungsverlauf__fuss > p { margin: 0; font-size: var(--text-sm); color: var(--ink-muted); }

.rechnungsliste { container-type: inline-size; display: grid; gap: var(--space-md); }
.rechnungsliste .tabelle { font-size: var(--text-sm); }
.rechnungsliste .tabelle caption { color: var(--ink-muted); }
.rechnungsliste .tabelle td { vertical-align: middle; }
.rechnungsliste__datum { white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.rechnungsliste__betrag { white-space: nowrap; color: var(--ink); }
.rechnungsliste__fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.rechnungsliste__fuss > p { margin: 0; font-size: var(--text-sm); color: var(--ink-muted); }
.rechnungsliste__leiste {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
}

.rechnungsliste__zahl { display: grid; margin: 0; font-size: var(--text-sm); color: var(--ink-muted); min-width: 0; margin-inline-end: auto; }
.rechnungsliste__zahl > span { grid-area: 1 / 1; }
.rechnungsliste__leiste[data-gewaehlt="0"] .rechnungsliste__voll,
.rechnungsliste__leiste:not([data-gewaehlt="0"]) .rechnungsliste__leer { visibility: hidden; }
.rechnungsliste__zahl b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rechnungsliste__aktionen { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.rechnungsliste__leiste .btn { gap: var(--space-2xs); }

.kurstabelle { container-type: inline-size; display: grid; gap: var(--space-md); }
.kurstabelle .tabelle { font-size: var(--text-sm); }
.kurstabelle .tabelle caption { color: var(--ink-muted); }
.kurstabelle .tabelle td { vertical-align: middle; }
.kurstabelle__notiz { font-size: var(--text-xs); color: var(--ink-faint); margin: 0; }
.kurstabelle__betrag { white-space: nowrap; color: var(--ink); }
.kurstabelle__titel { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.kurstabelle__titeltext { display: grid; line-height: var(--leading-snug); min-width: 0; }
.kurstabelle__titeltext b { font-weight: var(--fw-semibold); color: var(--ink); }
.kurstabelle__titeltext span { font-size: var(--text-xs); color: var(--ink-faint); }
.kurstabelle__delta { white-space: nowrap; font-variant-numeric: tabular-nums; }

.kurstabelle__spur { display: block; width: var(--space-4xl); height: var(--space-lg); overflow: visible; }
.kurstabelle__spur polyline { fill: none; stroke: var(--ink-muted); stroke-width: var(--border-w-stark); vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.kurstabelle__spur--pass polyline { stroke: var(--state-pass); }
.kurstabelle__spur--fail polyline { stroke: var(--state-fail); }

.produktraster { container-type: inline-size; }
.produktraster__raster { display: grid; gap: var(--space-xl); align-items: start; }
@container (min-width: 56rem) {
  .produktraster__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); }
}

.produktraster .produktraster__bild { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: var(--r-md); animation: none; background: var(--surface-overlay); border: var(--border-w) solid var(--border-subtle); }
.produktraster .produktraster__bild--klein { aspect-ratio: 1 / 1; width: var(--space-4xl); border-radius: var(--r-sm); }

.produktraster__haupt { display: grid; gap: var(--space-md); }
.produktraster__haupt > * { margin: 0; }
.produktraster__haupt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; }
.produktraster__haupt h2 { font-size: var(--text-2xl); line-height: var(--leading-tight); }
.produktraster__preis { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--ink); white-space: nowrap; margin: 0; }
.produktraster__haupt-kopf .produktraster__preis { font-size: var(--text-xl); }
.produktraster__satz { font-size: var(--text-sm); color: var(--ink-muted); }

.produktraster__angaben { margin: 0; display: grid; border-top: var(--border-w) solid var(--border-subtle); font-size: var(--text-sm); }
.produktraster__angaben > div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); border-bottom: var(--border-w) solid var(--border-subtle); }
.produktraster__angaben dt { color: var(--ink-muted); }
.produktraster__angaben dd { margin: 0; color: var(--ink); text-align: end; }

.produktraster__liste { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--border-w) solid var(--border-strong); }
.produktraster__liste > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs) var(--space-md); padding-block: var(--space-md); border-bottom: var(--border-w) solid var(--border-subtle); align-items: start; }
.produktraster__text { display: grid; gap: var(--space-xs); min-width: 0; }
.produktraster__text > * { margin: 0; }
.produktraster__text-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.produktraster__name { font-weight: var(--fw-semibold); color: var(--ink); font-size: var(--text-md); }

@media (prefers-reduced-motion: reduce) {
  .rechnungsliste__leiste * { transition: none; animation: none; }
}

.anbindungen { inline-size: 100%; }
.kurstabelle { inline-size: 100%; }
.produktraster { inline-size: 100%; }
.rechnungsliste { inline-size: 100%; }
.werdegang { inline-size: 100%; }
.zahlungsverlauf { inline-size: 100%; }

.produktkacheln { container-type: inline-size; inline-size: 100%; padding-block: var(--space-xl); }

.produktkacheln :is(h2, p, ul) { margin: 0; }
.produktkacheln__kopf { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); text-align: center; margin-bottom: var(--space-2xl); }
.produktkacheln__titel { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.produktkacheln__lead { color: var(--ink-muted); max-width: var(--wrap-text); }
.produktkacheln__liste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-md); }
.produktkacheln__kachel { position: relative; display: flex; flex-direction: column; gap: var(--space-xs); }
.produktkacheln__bild { position: relative; }

.produktkacheln__bild > :is(.marke, .produktkacheln__abzeichen) { position: absolute; inset-block-start: var(--space-xs); inset-inline-start: var(--space-xs); }

.produktkacheln__abzeichen {
  display: inline-flex;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--r-xs);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-strong);
}
.produktkacheln__zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-3xs) var(--space-sm); }
.produktkacheln__name { font-size: var(--text-md); font-weight: var(--fw-semibold); }
.produktkacheln__name a { color: var(--ink); text-decoration: none; }
.produktkacheln__name a::after { content: ""; position: absolute; inset: 0; }
.produktkacheln__name a:focus-visible { outline: none; }
.produktkacheln__kachel:has(a:focus-visible) { outline: var(--border-w-stark) solid var(--focus); outline-offset: calc(var(--border-w) * -2); border-radius: var(--r-md); }
.produktkacheln__preis { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.produktkacheln__preis s { font-size: var(--text-xs); font-weight: var(--fw-regular); color: var(--ink-faint); }
.produktkacheln__bewertung { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.produktkacheln__bewertung .symbol { fill: currentColor; }
@container (min-width: 36rem) {
  .produktkacheln__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }
}
@container (min-width: 56rem) {
  .produktkacheln__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.strahlen { container-type: inline-size; inline-size: 100%; display: flex; flex-wrap: wrap; gap: var(--space-2xl) var(--space-4xl); align-items: center; }
.strahlen > * { flex: 1 1 100%; min-width: 0; }
.strahlen__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.strahlen__titel { font-size: var(--text-3xl); line-height: var(--leading-tight); text-wrap: balance; }
.strahlen__lead { color: var(--ink-muted); font-size: var(--text-md); max-width: var(--wrap-text); }
.strahlen__bild { margin: 0; }
.strahlen__titel, .strahlen__lead { margin: 0; }
@container (min-width: 48rem) {
  .strahlen > :first-child { flex: 1 1 0; }
  .strahlen > :last-child { flex: 1.3 1 0; }
}
.strahlen__feld {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-lg);
  padding: var(--space-lg) var(--space-sm);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
}

@container (max-width: 20rem) {
  .strahlen__feld { column-gap: var(--space-2xs); padding-inline: var(--space-2xs); }
}
@container (min-width: 36rem) {
  .strahlen__feld { column-gap: var(--space-4xl); padding: var(--space-2xl) var(--space-xl); }
}
.strahlen__linien { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.strahlen__feld ul { position: relative; display: flex; flex-direction: column; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.strahlen__quellen { align-items: flex-start; }
.strahlen__ziele { align-items: flex-end; }
.strahlen__knoten { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); text-align: center; font-size: var(--text-xs); color: var(--ink-muted); }
.strahlen__knoten--mitte { color: var(--ink); font-weight: var(--fw-semibold); }
.strahlen__kreis {
  position: relative; display: grid; place-items: center;
  inline-size: calc(var(--ctl-h-lg) * 1.4); aspect-ratio: 1;
  border-radius: var(--r-pill);
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-strong);
  color: var(--ink);
}
.strahlen__kreis--mitte { inline-size: calc(var(--ctl-h-lg) * 2); background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.strahlen__kreis svg { inline-size: 55%; block-size: 55%; }
.strahlen__kreis text { font-family: var(--font-ui); font-weight: var(--fw-bold); fill: currentColor; text-anchor: middle; }

.strahlen__bahn { fill: none; stroke: var(--border-strong); stroke-width: var(--border-w); stroke-linecap: round; }

.strahlen__licht {
  fill: none; stroke: var(--accent); stroke-width: var(--border-w-stark); stroke-linecap: round;
  stroke-dasharray: 6 200; stroke-dashoffset: 6; opacity: 0;
}
.strahlen__feld.ist-laeuft .strahlen__licht {
  animation: strahlen-lauf calc(var(--t-lang) * 2) var(--ease-in-out) infinite both;
  animation-delay: calc(var(--nr) * var(--t-base));
}

.strahlen__feld.ist-angehalten .strahlen__licht { animation-play-state: paused; }
@keyframes strahlen-lauf {
  from { stroke-dashoffset: 6; opacity: 1; }
  to { stroke-dashoffset: -100; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .strahlen__licht { display: none; } 
}

.ereignisliste { container-type: inline-size; inline-size: 100%; display: flex; flex-wrap: wrap; gap: var(--space-2xl) var(--space-4xl); align-items: center; }
.ereignisliste > * { flex: 1 1 100%; min-width: 0; }
.ereignisliste__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.ereignisliste__titel { margin: 0; font-size: var(--text-3xl); line-height: var(--leading-tight); text-wrap: balance; }
.ereignisliste__lead { margin: 0; color: var(--ink-muted); font-size: var(--text-md); max-width: var(--wrap-text); }
@container (min-width: 48rem) {
  .ereignisliste > :first-child { flex: 1 1 0; }
  .ereignisliste > :last-child { flex: 1.3 1 0; }
}
.ereignisliste__feed { border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface-raised); overflow: hidden; }
.ereignisliste__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border-bottom: var(--border-w) solid var(--border-subtle); }
.ereignisliste__kopf h3 { margin: 0; font-size: var(--text-md); }
.ereignisliste__kopf p { margin: 0; font-size: var(--text-xs); color: var(--ink-muted); }
.ereignisliste__eintraege { margin: 0; padding: 0; list-style: none; }
.ereignisliste__eintrag { display: grid; grid-template-rows: 1fr; }
.ereignisliste__eintrag + .ereignisliste__eintrag { border-top: var(--border-w) solid var(--border-subtle); }
.ereignisliste__innen { overflow: hidden; min-block-size: 0; }
.ereignisliste__zeile { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-sm); align-items: center; padding: var(--space-sm) var(--space-md); }
.ereignisliste__symbol { display: grid; place-items: center; inline-size: var(--ctl-h); block-size: var(--ctl-h); border-radius: var(--r-sm); background: var(--surface-overlay); color: var(--ink); }
.ereignisliste__meldung { display: flex; flex-direction: column; min-inline-size: 0; }
.ereignisliste__betreff { font-weight: var(--fw-medium); color: var(--ink); }
.ereignisliste__sub { font-size: var(--text-xs); color: var(--ink-muted); }
.ereignisliste__zeit { font-size: var(--text-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; align-self: start; }

.ereignisliste__eintraege.ist-spielend .ereignisliste__eintrag {
  grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--t-slow) var(--ease), opacity var(--t-base) var(--ease);
}
.ereignisliste__eintraege.ist-spielend .ereignisliste__eintrag.ist-da { grid-template-rows: 1fr; opacity: 1; }
.ereignisliste__eintraege.ist-spielend .ereignisliste__eintrag:not(.ist-da) { border-top-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .ereignisliste__eintraege.ist-spielend .ereignisliste__eintrag { transition: none; } 
}

@property --dia-t-wisch   { syntax: '<time>'; inherits: true; initial-value: 0ms; }
@property --dia-t-wachs   { syntax: '<time>'; inherits: true; initial-value: 0ms; }
@property --dia-t-bogen   { syntax: '<time>'; inherits: true; initial-value: 0ms; }
@property --dia-t-punkt   { syntax: '<time>'; inherits: true; initial-value: 0ms; }
@property --dia-t-takt    { syntax: '<time>'; inherits: true; initial-value: 0ms; }
@property --dia-t-versatz { syntax: '<time>'; inherits: true; initial-value: 0ms; }
@property --dia-t-versatz-gross { syntax: '<time>'; inherits: true; initial-value: 0ms; }

.diagramm,

.diagramm-muster {
  
  --dia-1: var(--ton-1);
  --dia-2: var(--ton-2);
  --dia-3: var(--ton-3);
  --dia-4: var(--ton-4);
  --dia-5: var(--ton-5);
  --dia-6: var(--ton-6);

  --dia-netz: color-mix(in oklab, var(--ink) 12%, transparent);
  --dia-netz-null: color-mix(in oklab, var(--ink) 38%, transparent);
  --dia-bahn: color-mix(in oklab, var(--ink) 9%, transparent);
  --dia-schraffur: color-mix(in oklab, var(--ink) 30%, transparent);

  --dia-t-wisch: calc(var(--t-slow) * 2.25);
  --dia-t-wachs: calc(var(--t-slow) * 1.5);
  --dia-t-bogen: calc(var(--t-slow) * 2.5);
  --dia-t-punkt: var(--t-slow);
  --dia-t-takt: calc(var(--t-slow) * 2);
  --dia-t-versatz: calc(var(--t-fast) / 4);
  --dia-t-versatz-gross: calc(var(--t-fast) * 0.8);
}

.diagramm [data-reihe='1'], .diagramm-muster [data-reihe='1'] { --dia-farbe: var(--dia-1); }
.diagramm [data-reihe='2'], .diagramm-muster [data-reihe='2'] { --dia-farbe: var(--dia-2); }
.diagramm [data-reihe='3'], .diagramm-muster [data-reihe='3'] { --dia-farbe: var(--dia-3); }
.diagramm [data-reihe='4'], .diagramm-muster [data-reihe='4'] { --dia-farbe: var(--dia-4); }
.diagramm [data-reihe='5'], .diagramm-muster [data-reihe='5'] { --dia-farbe: var(--dia-5); }
.diagramm [data-reihe='6'], .diagramm-muster [data-reihe='6'] { --dia-farbe: var(--dia-6); }

.diagramm {
  
  width: min(640px, 100%);
  margin: 0;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-lg);
  color: var(--ink);
}

.diagramm > script { display: none; }

.diagramm__kopf {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.diagramm__titel {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
}

.diagramm__notiz {
  margin-inline-start: auto;
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  color: var(--ink-muted);
}

.diagramm__jetzt {
  min-width: 5ch;
  font-size: var(--text-md);
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.diagramm__nochmal {
  width: var(--ctl-h-sm);
  height: var(--ctl-h-sm);
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  background: linear-gradient(var(--accent-soft-lift), var(--accent-soft));
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.diagramm__nochmal:hover {
  color: var(--ink);
  border-color: var(--accent);
}

.diagramm__nochmal svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.diagramm__feld { position: relative; }

.diagramm__bild {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.diagramm__netz line,
.diagramm__netz polygon {
  stroke: var(--dia-netz);
  stroke-dasharray: 4 4;
  fill: none;
}

.diagramm__netz line.null {
  stroke: var(--dia-netz-null);
  stroke-dasharray: none;
}

.diagramm__achse,
.diagramm__marke,
.diagramm__wert,
.diagramm__mitte,
.diagramm__kachel {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}

.diagramm__achse {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  fill: var(--ink-muted);
}

.diagramm__marke {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  fill: var(--ink);
}

.diagramm__wert {
  font-size: var(--text-md);
  font-weight: var(--fw-extrabold);
  fill: var(--ink);
}

.diagramm__mitte {
  font-size: var(--text-xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  fill: var(--ink);
}

.diagramm__mitte--klein { font-size: var(--text-lg); }

.diagramm__kachel {
  font-size: var(--text-2xs);
  font-weight: var(--fw-extrabold);
  fill: var(--ink);
  pointer-events: none;
}

.diagramm__linie {
  fill: none;
  stroke: var(--dia-farbe);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.diagramm__linie[data-reihe='2'] { stroke-dasharray: 9 5; }
.diagramm__linie[data-reihe='3'] { stroke-dasharray: 3 4; }
.diagramm__linie[data-reihe='4'] { stroke-dasharray: 12 4 3 4; }

.diagramm__stueck,
.diagramm__stufe,
.diagramm__gebiet,
.diagramm__zelle,
.diagramm__balken {
  fill: var(--dia-farbe);
  stroke: var(--accent);
  stroke-width: 1;
}

.diagramm__balken {
  rx: var(--r-sm);
  ry: var(--r-sm);
}

.diagramm__balken[data-hoch] { stroke-width: 2.5; }

.diagramm__stufe {
  rx: var(--r-md);
  ry: var(--r-md);
}

.diagramm__zelle,
.diagramm__gebiet {
  rx: var(--r-xs);
  ry: var(--r-xs);
  stroke: color-mix(in oklab, var(--accent) 45%, transparent);
}

.diagramm__stueck--aussen { fill-opacity: .78; }

.diagramm__flaeche { stroke: none; }

.diagramm linearGradient stop { stop-color: var(--dia-farbe); }
.diagramm linearGradient[data-verlauf='gewinn'] stop { stop-color: var(--state-pass); }

.diagramm linearGradient[data-verlauf='messuhr'] stop:first-child { stop-color: var(--accent-soft); }
.diagramm linearGradient[data-verlauf='messuhr'] stop:last-child { stop-color: var(--accent); }

.diagramm__muster[data-reihe='1'] { fill: url(#dia-muster-1); }
.diagramm__muster[data-reihe='2'] { fill: url(#dia-muster-2); }
.diagramm__muster[data-reihe='3'] { fill: url(#dia-muster-3); }
.diagramm__muster[data-reihe='4'] { fill: url(#dia-muster-4); }
.diagramm__muster[data-reihe='5'] { fill: url(#dia-muster-5); }
.diagramm__muster[data-reihe='6'] { fill: url(#dia-muster-6); }

.diagramm__punkt {
  fill: color-mix(in oklab, var(--dia-farbe), transparent 18%);
  stroke: var(--surface-raised);
  stroke-width: 1.5;
  transition: fill var(--t-fast) var(--ease);
}

.diagramm__punkt:hover { fill: var(--accent); }

.diagramm__strom {
  fill-opacity: .4;
  transition: fill-opacity var(--t-fast) var(--ease);
}

.diagramm__strom:hover { fill-opacity: .68; }

.diagramm__knoten {
  fill: var(--ink);
  rx: var(--r-xs);
  ry: var(--r-xs);
}

.diagramm__bahn {
  fill: none;
  stroke: var(--dia-bahn);
  stroke-width: 18;
}

.diagramm__bahn--flaeche {
  fill: var(--dia-bahn);
  stroke: none;
}

.diagramm__ring {
  fill: none;
  stroke: var(--dia-farbe);
  stroke-width: 18;
  stroke-linecap: round;
}

.diagramm__zeiger {
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
}

.diagramm__nabe { fill: var(--ink); }

.diagramm__netzform {
  fill: var(--dia-farbe);
  fill-opacity: .24;
  stroke: var(--dia-farbe);
  stroke-width: 2;
}

.diagramm__netzform[data-reihe='2'] { stroke-dasharray: 9 5; }
.diagramm__netzform[data-reihe='3'] { stroke-dasharray: 3 4; }

.diagramm__docht { stroke-width: 1.5; }

.diagramm__kerze {
  rx: var(--r-xs);
  ry: var(--r-xs);
  stroke-width: 1.5;
}

[data-zustand='steigt'] .diagramm__docht,
[data-zustand='steigt'] .diagramm__kerze { stroke: var(--state-pass); }

[data-zustand='steigt'] .diagramm__kerze { fill: var(--surface-raised); }

[data-zustand='faellt'] .diagramm__docht,
[data-zustand='faellt'] .diagramm__kerze { stroke: var(--state-fail); }

[data-zustand='faellt'] .diagramm__kerze { fill: var(--state-fail); }

.diagramm__linie--gewinn { stroke: var(--state-pass); }
.diagramm__linie--verlust { stroke: var(--state-fail); }
.diagramm__flaeche--verlust { fill: url(#dia-muster-verlust); }

.diagramm__hilfslinie {
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}

.diagramm__hilfslinie line {
  stroke: color-mix(in oklab, var(--ink) 40%, transparent);
  stroke-dasharray: 4 4;
}

.diagramm__hilfslinie circle {
  fill: var(--dia-farbe);
  stroke: var(--surface-raised);
  stroke-width: 2;
}

.diagramm__laufpunkt {
  fill: var(--accent);
  stroke: var(--surface-raised);
  stroke-width: 2;
}

.diagramm__bild:has([data-tip]:hover) .diagramm__balken:not(:hover),
.diagramm__bild:has(.diagramm__stueck:hover) .diagramm__stueck:not(:hover),
.diagramm__bild:has(.diagramm__strom:hover) .diagramm__strom:not(:hover) {
  opacity: .45;
}

.diagramm__balken,
.diagramm__stueck,
.diagramm [data-tip] {
  cursor: default;
  transition: opacity var(--t-fast) var(--ease);
}

.diagramm__hinweis {
  position: absolute;
  z-index: var(--z-schwebend);
  pointer-events: none;
  min-width: var(--space-5xl);
  
  width: max-content;
  max-width: min(var(--panel-w), 100%);
  padding: var(--space-xs) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  font-size: var(--text-xs);
  color: var(--ink);
  background: var(--surface-overlay);
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: var(--r-sm);
}

.diagramm__hinweis[hidden] { display: none; }

.diagramm__hinweis b {
  font-size: var(--text-sm);
  font-weight: var(--fw-extrabold);
  color: var(--ink);
}

.diagramm__hinweis span {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  white-space: nowrap;
}

.diagramm__hinweis i {
  width: var(--space-xs);
  height: var(--space-xs);
  flex: none;
  border-radius: 50%;
  background: var(--dia-farbe);
  border: var(--border-w) solid var(--accent);
}

.diagramm__hinweis i[data-zustand='steigt'] {
  background: var(--surface-raised);
  border-color: var(--state-pass);
}

.diagramm__hinweis i[data-zustand='faellt'] {
  background: var(--state-fail);
  border-color: var(--state-fail);
}

.diagramm__hinweis em {
  margin-inline-start: auto;
  padding-inline-start: var(--space-xs);
  font-style: normal;
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.diagramm__legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-muted);
  
  padding-inline-start: var(--dia-achse, 0px);
}

.diagramm__legende span,
.diagramm__legende button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}
.diagramm__legende button { cursor: pointer; }
.diagramm__legende button:hover { color: var(--ink); }

.diagramm__legende button[aria-pressed="false"] { color: var(--ink-faint); }
.diagramm__legende button[aria-pressed="false"] i { opacity: .3; }

.diagramm[data-aus~="1"] .diagramm__bild [data-reihe="1"],
.diagramm[data-aus~="2"] .diagramm__bild [data-reihe="2"],
.diagramm[data-aus~="3"] .diagramm__bild [data-reihe="3"],
.diagramm[data-aus~="4"] .diagramm__bild [data-reihe="4"],
.diagramm[data-aus~="5"] .diagramm__bild [data-reihe="5"],
.diagramm[data-aus~="6"] .diagramm__bild [data-reihe="6"],
.diagramm[data-aus~="steigt"] .diagramm__bild [data-zustand="steigt"],
.diagramm[data-aus~="faellt"] .diagramm__bild [data-zustand="faellt"] {
  display: none;
}

.diagramm__legende i {
  width: var(--space-sm);
  height: var(--space-sm);
  flex: none;
  background: var(--dia-farbe);
  border: var(--border-w) solid var(--accent);
  border-radius: var(--r-xs);
}

.diagramm__legende i[data-reihe='2'] {
  background-image: repeating-linear-gradient(45deg, var(--dia-schraffur) 0 var(--border-w), transparent var(--border-w) var(--space-2xs));
}

.diagramm__legende i[data-reihe='3'] {
  background-image: repeating-linear-gradient(-45deg, var(--dia-schraffur) 0 var(--border-w), transparent var(--border-w) var(--space-2xs));
}

.diagramm__legende i[data-reihe='4'] {
  background-image: radial-gradient(var(--dia-schraffur) 35%, transparent 36%);
  background-size: var(--space-2xs) var(--space-2xs);
}

.diagramm__legende i[data-reihe='5'] {
  background-image: repeating-linear-gradient(0deg, var(--dia-schraffur) 0 var(--border-w), transparent var(--border-w) var(--space-2xs));
}

.diagramm__legende i[data-reihe='6'] {
  background-image:
    repeating-linear-gradient(45deg, var(--dia-schraffur) 0 var(--border-w), transparent var(--border-w) var(--space-2xs)),
    repeating-linear-gradient(-45deg, var(--dia-schraffur) 0 var(--border-w), transparent var(--border-w) var(--space-2xs));
}

.diagramm__legende i[data-zustand='steigt'] {
  background: var(--surface-raised);
  border-color: var(--state-pass);
}

.diagramm__legende i[data-zustand='faellt'] {
  background: var(--state-fail);
  border-color: var(--state-fail);
}

.diagramm__skala i {
  width: var(--space-4xl);
  border-color: var(--accent);
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 12%, transparent), var(--accent));
}

.diagramm-muster {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.diagramm-muster .dia-grund { fill: var(--dia-farbe); }

.diagramm-muster .dia-strich {
  stroke: var(--dia-schraffur);
  stroke-width: 1;
  fill: none;
}

.diagramm-muster .dia-tupf { fill: var(--dia-schraffur); }

.diagramm-muster .dia-grund-verlust { fill: color-mix(in oklab, var(--state-fail) 26%, transparent); }
.diagramm-muster .dia-verlust { stroke: color-mix(in oklab, var(--state-fail) 70%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .diagramm__balken,
  .diagramm__stueck,
  .diagramm__punkt,
  .diagramm__strom,
  .diagramm__hilfslinie,
  .diagramm__nochmal,
  .diagramm [data-tip] {
    transition: none;
  }
}

@media (max-width: 560px) {
  .diagramm { padding: var(--space-sm); }
  .diagramm__kopf { flex-wrap: wrap; }
  .diagramm__notiz { margin-inline-start: 0; }
}

.fortschrittsring { container-type: inline-size; inline-size: 100%; display: flex; flex-wrap: wrap; gap: var(--space-2xl) var(--space-4xl); align-items: center; }
.fortschrittsring > * { flex: 1 1 100%; min-width: 0; }
.fortschrittsring__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.fortschrittsring__titel { hyphens: auto; margin: 0; font-size: var(--text-3xl); line-height: var(--leading-tight); text-wrap: balance; }
.fortschrittsring__lead { margin: 0; color: var(--ink-muted); font-size: var(--text-md); max-width: var(--wrap-text); }
@container (min-width: 48rem) {
  .fortschrittsring > :first-child { flex: 1 1 0; }
  .fortschrittsring > :last-child { flex: 1.3 1 0; }
}
.fortschrittsring__ringe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
@container (min-width: 36rem) {
  .fortschrittsring__ringe { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-3xl); }
}
.fortschrittsring__ring { position: relative; display: grid; place-items: center; inline-size: min(100%, calc(var(--ctl-h-lg) * 5)); aspect-ratio: 1; }
.fortschrittsring__ring--klein { inline-size: calc(var(--ctl-h-lg) * 2.5); }
.fortschrittsring__ring svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; transform: rotate(-90deg); }
.fortschrittsring__bahn { fill: none; stroke: var(--border-subtle); stroke-width: 9; }
.fortschrittsring__wert {
  fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: butt;
  transition: stroke-dasharray var(--t-lang) var(--ease);
}
.fortschrittsring__ring--zustand .fortschrittsring__wert { stroke: var(--state-pass); }
.fortschrittsring__mitte { position: relative; inline-size: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: var(--leading-tight); }
.fortschrittsring__zahl { font-size: var(--text-2xl); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--ink); }
.fortschrittsring__ring--klein .fortschrittsring__zahl { font-size: var(--text-lg); }
.fortschrittsring__einheit { max-inline-size: 70%; font-size: var(--text-xs); color: var(--ink-muted); text-wrap: balance; }
.fortschrittsring__fakten { display: flex; flex-direction: column; gap: var(--space-lg); }
.fortschrittsring__fakt { display: flex; align-items: center; gap: var(--space-md); }
.fortschrittsring__fakt-text { margin: 0; display: flex; flex-direction: column; gap: var(--space-3xs); }
.fortschrittsring__fakt-text strong { font-weight: var(--fw-semibold); color: var(--ink); }
.fortschrittsring__fakt-text span { font-size: var(--text-sm); color: var(--ink-muted); }
.fortschrittsring__trenn { border: 0; border-top: var(--border-w) solid var(--border-subtle); inline-size: 100%; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .fortschrittsring__wert { transition: none; } 
}

.fenster,
.rueckfrage,
.seitenblatt {
  color: var(--ink);
  
  background: var(--surface-overlay);
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--space-lg);
  
  margin: auto;
}

:is(.fenster, .rueckfrage, .seitenblatt, .lichtkasten):is(dialog):not([open]) {
  display: none;
}

.fenster::backdrop,
.rueckfrage::backdrop,
.seitenblatt::backdrop,
.lichtkasten::backdrop {
  background: color-mix(in oklab, var(--ink) 62%, transparent);
}

.fenster__kopf,
.seitenblatt__kopf {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
:is(.fenster__kopf, .seitenblatt__kopf) > :is(h1, h2, h3, h4) { margin-block: 0; margin-inline-end: auto; }

:is(.fenster__kopf, .seitenblatt__kopf) > :not(h1, h2, h3, h4) { margin-inline: 0; }

:is(.fenster__kopf, .seitenblatt__kopf) > :not(h1, h2, h3, h4) { flex-shrink: 0; }
:is(.fenster__kopf, .seitenblatt__kopf) .btn { white-space: nowrap; }
:is(.fenster__kopf, .seitenblatt__kopf) > :is(h1, h2, h3, h4) { min-width: 0; }

dialog:is(.fenster, .seitenblatt):focus { outline: none; }

:root:has(dialog:modal) { overflow: hidden; scrollbar-gutter: stable; }
dialog, .fenster__inhalt { overscroll-behavior: contain; }

:is(.fenster__kopf, .seitenblatt__kopf) > .btn--symbol { color: var(--ink-muted); background: transparent; border-color: transparent; }
:is(.fenster__kopf, .seitenblatt__kopf) > .btn--symbol:not(:disabled):hover { color: var(--ink); background: var(--surface-state); }

.fenster__fuss,
.rueckfrage__fuss {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.fenster__zu {
  flex: none;
}
.fenster__zu:hover {
  color: var(--ink);
  background: var(--surface-state);
}
.fenster__zu > .symbol { width: var(--icon-sm); height: var(--icon-sm); }

.fenster__marke {
  margin: 0;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fenster {
  width: min(28rem, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - 2 * var(--gutter));
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.fenster__inhalt { overflow-y: auto; overflow-x: clip; max-height: 66vh; }

.fenster--vorschau { width: min(60rem, calc(100vw - 2 * var(--gutter))); }
.fenster--vorschau > .fenster__kopf { gap: var(--space-xs); }
.fenster--vorschau > .fenster__kopf > h3 { flex: 1; min-inline-size: 0; }
.fenster--vorschau > .fenster__inhalt { padding: var(--space-md); background: var(--surface-base); border-radius: var(--r-sm); }

.rueckfrage {
  width: min(24rem, calc(100vw - 2 * var(--gutter)));
}
.rueckfrage > p {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.rueckfrage__gefahr {
  background: none;
  color: var(--state-fail);
  border-color: var(--state-fail);
}
.rueckfrage__gefahr:hover {
  background: var(--state-fail);
  color: var(--surface-raised);
  border-color: var(--state-fail);
}

.seitenblatt {
  width: min(var(--panel-w), calc(100vw - var(--gutter)));
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  border-radius: var(--r-md) 0 0 var(--r-md);
}

.seitenblatt__luecke { flex: 1; min-height: 0; }

.aufsatz-wickel { display: inline-block; }
.aufsatz {
  width: min(16rem, calc(100vw - 2 * var(--gutter)));
  margin: 0;
  padding: var(--space-md);
  color: var(--ink);
  
  background: var(--surface-overlay);
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: var(--r-md);
}
.aufsatz:popover-open {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@supports (anchor-name: --a) {
  .aufsatz-wickel { anchor-name: --aufsatz; }
  .aufsatz {
    position: fixed;
    position-anchor: --aufsatz;
    position-area: block-end span-inline-end;
    margin-top: var(--space-2xs);
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
  }
}

.hinweis-wickel { position: relative; display: inline-block; }
.kurzhinweis {
  position: absolute;
  bottom: calc(100% + var(--space-2xs));
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: var(--z-schwebend);
  white-space: nowrap;
  pointer-events: none;
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  color: var(--surface-raised);
  background: var(--ink);
  border-radius: var(--r-xs);
  padding: var(--space-3xs) var(--space-2xs);
  
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast) var(--ease), visibility var(--t-fast) var(--ease), display var(--t-fast) allow-discrete;
}

.kurzhinweis::after {
  content: "";
  position: absolute;
  top: 100%;
  inset-inline-start: 50%;
  translate: -50% 0;
  border: var(--space-3xs) solid transparent;
  border-top-color: var(--ink);
}
.hinweis-wickel:hover > .kurzhinweis,
.hinweis-wickel:focus-within > .kurzhinweis {
  display: block;
  opacity: 1;
  visibility: visible;
}
@starting-style {
  .hinweis-wickel:hover > .kurzhinweis,
  .hinweis-wickel:focus-within > .kurzhinweis,
  .hinweis-wickel:has(> [aria-expanded="true"]) > .kurzhinweis { opacity: 0; }
}

:root:has(.hinweis-wickel:hover) .hinweis-wickel:not(:hover) > .kurzhinweis {
  display: none;
  opacity: 0;
  visibility: hidden;
}

.vorschau-wickel {
  position: relative;
  display: inline-block;
  anchor-name: --vorschau;
  
  anchor-scope: --vorschau;
}

.vorschau-name {
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: var(--border-w);
  text-underline-offset: 0.2em;
}
@position-try --vorschau-oben {
  position-area: block-start span-inline-start;
  margin-block: 0 var(--space-2xs);
}

.vorschaukarte {
  
  position: fixed;
  position-anchor: --vorschau;
  
  position-area: block-end span-inline-start;
  margin-block-start: var(--space-2xs);
  
  position-try-fallbacks: --vorschau-oben;
  
  @supports not (anchor-name: --x) {
    position: absolute;
    top: calc(100% + var(--space-2xs));
    inset-inline-start: 0;
  }
  z-index: var(--z-schwebend);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: min(18rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--space-sm);
  
  background: var(--surface-overlay);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast) var(--ease), visibility var(--t-fast) var(--ease);
}
.vorschaukarte > div { display: flex; flex-direction: column; gap: var(--space-3xs); }
.vorschaukarte b { color: var(--ink); }
.vorschau-wickel:hover > .vorschaukarte,
.vorschau-wickel:focus-within > .vorschaukarte {
  opacity: 1;
  visibility: visible;
}

.vorschaukarte--schwebt {
  position: fixed;
  position-anchor: auto;
  position-area: none;
  inset: auto;
  margin: 0;
  opacity: 1;
  visibility: visible;
  color: var(--ink);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  @starting-style { opacity: 0; transform: translateY(calc(var(--space-3xs) * -1)); }
}
.vorschaukarte--schwebt:not(:popover-open) { display: none; }

:root[data-zieht-karte] :is(.kurzhinweis, .vorschaukarte) { visibility: hidden; }

.zuruf {
  position: fixed;
  
  inset: auto var(--gutter) var(--gutter) auto;
  width: max-content;
  
  
  max-width: min(48rem, calc(100vw - 2 * var(--gutter)));
  
  overflow: hidden;
  margin: 0;
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  color: var(--surface-base);
  background: var(--ink);
  border: 0;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
}
.zuruf:popover-open {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.zuruf > .symbol { flex: none; color: currentColor; }

.zuruf > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.zuruf--loeschen > .symbol { color: color-mix(in oklab, var(--state-fail) 60%, var(--surface-base)); }

.zuruf__handlung { flex: none; white-space: nowrap; }

.zuruf .zuruf__handlung { color: var(--surface-base); text-decoration: none; }
.zuruf .zuruf__handlung:last-child { font-weight: var(--fw-bold); }
.zuruf .zuruf__handlung:hover { color: var(--surface-base); background: color-mix(in oklab, var(--surface-base) 16%, transparent); }

@keyframes zuruf-frist {
  from { transform: scaleX(var(--zuruf-anteil, 1)); }
  to   { transform: scaleX(0); }
}
.zuruf::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: var(--border-w-stark);
  
  background: currentColor;
  opacity: .45;
  transform-origin: 0 50%;
}

.zuruf.laeuft::after {
  animation: zuruf-frist var(--zuruf-frist, 4000ms) linear forwards;
}

.zuruf:hover::after,
.zuruf:focus-within::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  
  .zuruf.laeuft::after {
    animation: zuruf-frist var(--zuruf-frist, 4000ms) linear forwards !important;
  }
}

.lichtkasten-strecke {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-sm);
}
.lichtkasten-strecke > button {
  display: block;
  padding: 0;
  cursor: pointer;
  text-align: start;
  background: none;
  
  border: var(--border-w-stark) solid transparent;
  border-radius: var(--r-md);
  color: var(--ink-muted);
  font-size: var(--text-xs);
}
.lichtkasten-strecke > button:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.lichtkasten-strecke > button > span { display: block; padding: var(--space-2xs); }

.lichtkasten-strecke .verhaeltnis { aspect-ratio: 3 / 2; }

.lichtkasten-strecke .verhaeltnis,
.lichtkasten__vorschau .verhaeltnis { display: block; padding: 0; }

.lichtkasten {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: var(--gutter);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.lichtkasten,
.lichtkasten .lichtkasten__titel,
.lichtkasten .lichtkasten__zaehler {
  color: var(--surface-raised);
}

.lichtkasten__buehne {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
}
.lichtkasten__bild {
  position: relative;
  max-height: 100%;
  width: min(70rem, 100%);
  border-radius: var(--r-md);
  
  background: var(--surface-overlay);
  display: grid;
  place-items: center;
}

.lichtkasten__bild:has(> img[hidden])::after,
.lichtkasten__bild:not(:has(> img))::after {
  content: 'Foto folgt';
  color: var(--ink-faint);
  font-size: var(--text-sm);
  border: var(--border-w) dashed var(--border-strong);
  border-radius: var(--r-sm);
  padding: var(--space-sm) var(--space-lg);
}
.lichtkasten__bild > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lichtkasten__pfeil,
.lichtkasten__zu {
}
.lichtkasten__pfeil:hover,
.lichtkasten__zu:hover {
  background: var(--surface-state);
  border-color: var(--accent);
}
.lichtkasten__pfeil > .symbol,
.lichtkasten__zu > .symbol { width: var(--icon); height: var(--icon); }

.lichtkasten__pfeil,
.lichtkasten__zu { position: absolute; z-index: var(--z-ueber); }
.lichtkasten__pfeil--zurueck { inset-inline-start: var(--space-md); top: 50%; translate: 0 -50%; }
.lichtkasten__pfeil--weiter  { inset-inline-end: var(--space-md); top: 50%; translate: 0 -50%; }
.lichtkasten__zu { top: var(--space-md); inset-inline-end: var(--space-md); }

.lichtkasten__fuss {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-inline: var(--space-2xs);
}
.lichtkasten__titel { font-size: var(--text-sm); font-weight: var(--fw-medium); }
.lichtkasten__zaehler { font-size: var(--text-xs); opacity: .8; }

.lichtkasten__leiste {
  display: flex;
  gap: var(--space-2xs);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-3xs);
}
.lichtkasten__vorschau {
  flex: none;
  width: var(--space-4xl);
  padding: 0;
  cursor: pointer;
  scroll-snap-align: center;
  background: var(--surface-overlay);
  
  border: var(--border-w-stark) solid transparent;
  border-radius: var(--r-sm);
  overflow: hidden;
  opacity: .6;
}
.lichtkasten__vorschau > img { width: 100%; height: 100%; object-fit: cover; }
.lichtkasten__vorschau:hover { opacity: 1; }
.lichtkasten__vorschau[aria-current="true"] {
  opacity: 1;
  border-color: var(--accent);
}

@media (max-width: 560px) {
  .fenster, .rueckfrage { width: calc(100vw - 2 * var(--gutter)); }
  .seitenblatt { width: calc(100vw - var(--gutter)); }
  .lichtkasten__pfeil, .lichtkasten__zu { width: var(--ctl-h-sm); height: var(--ctl-h-sm); }
  .lichtkasten__vorschau { width: var(--space-3xl); }
}

@media (prefers-reduced-motion: reduce) {
  .kurzhinweis, .vorschaukarte { transition: none; }
}

.seitenblatt__gruppe {
  border: 0;
  display: grid;
  gap: var(--space-2xs);
  justify-items: start;
}
.seitenblatt__gruppe > legend { padding: 0; margin-bottom: var(--space-2xs); }

.kurzhinweis--breit {
  white-space: normal;
  width: var(--menu-w);
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  padding: var(--space-xs) var(--space-sm);
  line-height: var(--leading-snug);
}

.hinweis-wickel:has(> [aria-expanded="true"]) > .kurzhinweis {
  display: block;
  opacity: 1;
  visibility: visible;
}
.hinweis-wickel[data-zu] > .kurzhinweis {
  display: none;
  opacity: 0;
  visibility: hidden;
}

.hinweis-wickel[data-nur-klick]:not(:has(> [aria-expanded="true"])) > .kurzhinweis {
  display: none;
  opacity: 0;
  visibility: hidden;
}

.hinweis-wickel[data-nur-klick] > .kurzhinweis {
  top: calc(100% + var(--space-2xs));
  bottom: auto;
  inset-inline-start: 0;
  translate: none;
  white-space: normal;
  width: max-content;
  max-width: min(var(--menu-w), calc(100vw - 2 * var(--gutter)));
  text-align: start;
}
.hinweis-wickel[data-nur-klick] > .kurzhinweis::after {
  top: auto;
  bottom: 100%;
  inset-inline-start: calc(var(--ctl-h) / 2);
  border-top-color: transparent;
  border-bottom-color: var(--ink);
}

.btn.infoknopf:not(.infoknopf--still) svg { transition: rotate var(--t-slow) var(--ease-in-out); }
.btn.infoknopf:not(.infoknopf--still):hover svg,
.btn.infoknopf:not(.infoknopf--still):focus-visible svg { rotate: 360deg; }

@media (prefers-reduced-motion: reduce) {
  
  .btn.infoknopf svg { transition: none; }
  .btn.infoknopf:hover svg,
  .btn.infoknopf:focus-visible svg { rotate: none; }
}

.btn--symbol.infoknopf {
  position: relative;
  width: 1.5em;
  height: 1.5em;
  min-width: 0;
  min-height: 0;
  vertical-align: middle;
  border-color: transparent;
  border-radius: var(--r-xs);
}
.btn--symbol.infoknopf > svg { width: 1em; height: 1em; }
.hinweis-wickel:has(> .infoknopf) { margin-inline-start: var(--space-2xs); vertical-align: middle; }
.btn--symbol.infoknopf::after { content: ""; position: absolute; inset: calc(-1 * var(--space-2xs)); }
@media (pointer: coarse) {
  .btn--symbol.infoknopf::after { inset: calc((1.5em - var(--tap-min)) / 2); }
}
.hinweis-wickel[data-nur-klick]:has(> .infoknopf) > .kurzhinweis::after { inset-inline-start: var(--space-sm); }

.fenster--frage { inline-size: min(26rem, calc(100vw - 2 * var(--space-md))); width: min(26rem, calc(100vw - 2 * var(--gutter))); }

dialog.fenster { width: min(48rem, calc(100vw - 2 * var(--gutter))); }
.fenster > form > .fenster__inhalt { margin-inline-end: calc(-1 * var(--space-lg)); padding-inline-end: calc(var(--space-lg) - var(--space-xs)); }
:is(.fenster, .seitenblatt) .raster { gap: var(--space-2xs) var(--space-md); }

dialog.fenster.fenster--frage { width: min(26rem, calc(100vw - 2 * var(--gutter))); }

.feld--schmal { width: min(var(--panel-w), 100%); }
.feld--breit  { width: min(calc(var(--panel-w) + var(--space-4xl)), 100%); }

.feld__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}
.feld__kopf label,
.feld__kopf > span:first-child {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--ink);
}

.hinweis { font-size: var(--text-2xs); color: var(--ink-faint); }

.satz,
.wahlgruppe,
.codefelder { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.satz > legend,
.wahlgruppe > legend,
.codefelder > legend {
  padding: 0;
  margin-bottom: var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--ink);
}

.feld .pflicht {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
}

:is(.feld, .wahlgruppe) .feld__fehler {
  margin: 0;
  
  width: 0;
  min-width: 100%;
  
  min-height: calc(var(--text-2xs) * var(--leading-normal));
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--state-fail);
}

.feld:has(> .hinweis) > .feld__fehler:empty { min-height: 0; }
.feld:has(> .feld__fehler:not(:empty)) > .hinweis { display: none; }

:is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--state-fail);
  border-width: var(--border-w-stark);
}

.feld :is(input, select, textarea)[disabled] { opacity: .45; cursor: not-allowed; }

.formular {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  container-type: inline-size;
}

.formular > :is(.feld, .formular__reihe, .feldgruppe) { width: 100%; }

.formular > :is([type="submit"], :has(> [type="submit"]):not(:has(input:not([type="submit"]), select, textarea))) { margin-block-start: var(--space-md); }
.formular__reihe { display: grid; gap: var(--space-2xs) var(--space-md); }
@container (min-width: 35rem) {
  .formular__reihe { grid-template-columns: 1fr 1fr; }
  
  .formular__reihe--rechts-schmal { grid-template-columns: 3fr 1fr; }
  .formular__reihe--links-schmal { grid-template-columns: 1fr 3fr; }
}

.feld textarea {
  min-height: calc(var(--ctl-h) * 2);
  resize: vertical;
  line-height: var(--leading-snug);
}

.feld .eingabegruppe {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-3xs) var(--space-3xs) var(--space-3xs) var(--space-sm);
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--ink-faint);
}
.feld .eingabegruppe:focus-within { border-color: var(--accent); }
.feld .eingabegruppe input {
  flex: 1;
  min-width: 0;
  min-height: var(--ctl-h-sm);
  padding: var(--space-2xs) 0;
  background: none;
  border: 0;
  border-radius: 0;
  outline: 0;
}

.feld .eingabegruppe input:focus-visible { outline: none; }

.feld .eingabegruppe > .feld__leeren { position: static; flex: none; width: var(--ctl-h-sm); height: var(--ctl-h-sm); }
.feld .eingabegruppe:has(input:not(:placeholder-shown, :disabled, [readonly])) > .feld__leeren { visibility: visible; }

.feld .eingabegruppe:has(input[aria-invalid="true"]) {
  border-color: var(--state-fail);
  outline: var(--border-w) solid var(--state-fail);
  outline-offset: calc(var(--border-w) * -2);
}
.feld .eingabegruppe:has(input:focus-visible) {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(var(--border-w) * -2);
}

.codefelder__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }

.codefelder__zeile > .feld__fehler { order: 1; flex-basis: 100%; }
.codefelder__zeile > .feld__fehler:empty { display: none; }
.codefelder input {
  width: var(--tap-min);
  min-height: var(--ctl-h-lg);
  padding-inline: 0;
  text-align: center;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--ink);
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-sm);
}
.codefelder input:focus-visible { border-color: var(--accent); }
.codefelder__strich {
  width: var(--space-xs);
  height: var(--border-w-stark);
  flex: none;
  background: var(--border-strong);
}

.haken {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding-block: var(--space-3xs);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--ink);
  cursor: pointer;
}
@media (pointer: coarse) {
  .haken, .wahl { min-height: var(--tap-min); align-items: center; }
}
.haken input { position: absolute; opacity: 0; width: 0; height: 0; }
.haken__kasten {
  width: 1em;
  height: 1em;
  margin-block-start: calc((1lh - 1em) / 2);
  flex: none;
  display: grid;
  place-items: center;
  
  background: var(--surface-overlay);
  border: var(--border-w) solid var(--border-strong);
  border-radius: calc(var(--r-xs) / 2);
}

.haken__zug {
  width: .8em;
  height: .8em;
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  
  transition: stroke-dashoffset var(--t-slow) var(--ease);
}
.haken input:checked ~ .haken__kasten {
  background: var(--accent);
  border-color: var(--accent);
}
.haken input:checked ~ .haken__kasten .haken__zug { stroke-dashoffset: 0; }
.haken input:focus-visible ~ .haken__kasten {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(var(--border-w) * -2);
}
.haken input:disabled ~ .haken__kasten { opacity: .45; }
.haken:has(input:disabled) { cursor: not-allowed; color: var(--ink-faint); }

.herz {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: pointer;
  
  user-select: none;
  -webkit-user-select: none;
}
.herz input { position: absolute; opacity: 0; width: 0; height: 0; }
@media (pointer: coarse) { .herz--still { min-width: var(--tap-min); justify-content: center; } }

.herz__bild {
  position: relative;
  width: var(--icon);
  height: var(--icon);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--ink-muted);
}

.herz__bild svg {
  grid-area: 1 / 1;
  width: var(--icon);
  height: var(--icon);
  transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.herz__voll { fill: currentColor; opacity: 0; }
.herz:hover .herz__bild { color: var(--ink); }
.herz input:checked ~ .herz__bild { color: var(--accent); }
.herz input:checked ~ .herz__bild .herz__leer { opacity: 0; }
.herz input:checked ~ .herz__bild .herz__voll { opacity: 1; }
.herz input:focus-visible ~ .herz__bild {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(var(--border-w) * -2);
}
.herz input:disabled ~ .herz__bild { opacity: .45; }
.herz:has(input:disabled) { cursor: not-allowed; color: var(--ink-faint); }

.herz__ring {
  position: absolute;
  
  inset: calc(-1 * var(--space-xs));
  border: var(--border-w-stark) solid var(--accent);
  border-radius: var(--r-pill);
  opacity: 0;
  pointer-events: none;
}
.herz input:checked ~ .herz__bild .herz__ring {
  animation: herz-ring var(--t-slow) var(--ease) forwards;
}
@keyframes herz-ring {
  from { transform: scale(.4); opacity: 1; }
  to   { transform: scale(1.4); opacity: 0; }
}

.herz--still { gap: 0; }

.herz__zahl { font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.herz input:checked ~ .herz__zahl { color: var(--ink); }
.herz__punkt {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  width: var(--space-xs);
  height: var(--space-xs);
  margin: calc(var(--space-xs) / -2);
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 0 0 var(--border-w) var(--surface-base);
  pointer-events: none;
  animation: herz-partikel var(--t-lang) var(--ease) forwards;
}

@keyframes herz-partikel {
  0%   { transform: translate(0, 0) scale(.4); opacity: 0; }
  15%  { transform: translate(calc(var(--weg-x) * .2), calc(var(--weg-y) * .2)) scale(1); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--weg-x), var(--weg-y)) scale(.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .herz__punkt { display: none; }
}

.wahlgruppe__liste { display: flex; flex-direction: column; gap: 0; }
.wahl {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding-block: var(--space-3xs);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--ink);
  cursor: pointer;
}
.wahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.wahl__kreis {
  width: 1em;
  height: 1em;
  margin-block-start: calc((1lh - 1em) / 2);
  flex: none;
  display: grid;
  place-items: center;
  background: var(--surface-overlay);
  border: var(--border-w) solid var(--border-strong);
  border-radius: calc(var(--r-xs) / 2);
}

.wahl__kreis::after {
  content: "";
  width: .8em;
  height: .8em;
  background: var(--accent-ink);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--t-slow) var(--ease);
}
.wahl input:checked ~ .wahl__kreis {
  background: var(--accent);
  border-color: var(--accent);
}
.wahl input:checked ~ .wahl__kreis::after { clip-path: inset(0); }
.eigenauswahl[data-mehrfach] .eigenauswahl__wert { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.wahl input:checked ~ .wahl__text { color: var(--ink); }
.wahl input:focus-visible ~ .wahl__kreis {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(var(--border-w) * -2);
}
.wahl__text { min-width: 0; }

:is(.wahl__text, .eigenauswahl__wert)[data-ton-zustand] { display: inline-flex; align-items: center; gap: var(--space-2xs); }
:is(.wahl__text, .eigenauswahl__wert)[data-ton-zustand] > .symbol { flex: none; color: var(--ink-muted); }
:is(.wahl__text, .eigenauswahl__wert)[data-ton-zustand="pass"] > .symbol { color: var(--state-pass); }
:is(.wahl__text, .eigenauswahl__wert)[data-ton-zustand="warn"] > .symbol { color: var(--state-warn); }
:is(.wahl__text, .eigenauswahl__wert)[data-ton-zustand="fail"] > .symbol { color: var(--state-fail); }
:is(.wahl__text, .eigenauswahl__wert)[data-ton-zustand="akzent"] > .symbol { color: var(--accent); }

.schalter { display: inline-flex; align-items: center; gap: var(--space-sm); vertical-align: middle; }
.schalter__spur {
  position: relative;
  width: var(--ctl-h-lg);
  height: var(--space-lg);
  flex: none;
  
  background: var(--border-strong);
  border: var(--border-w) solid transparent;
  border-radius: var(--r-md);
}
.schalter__spur input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.schalter__griff {
  position: absolute;
  
  top: 50%;
  translate: 0 -50%;
  inset-inline-start: var(--space-2xs);
  width: var(--space-md);
  height: var(--space-md);
  border-radius: var(--r-xs);
  background: var(--surface-raised);
  pointer-events: none;
  transition: transform var(--t-base) var(--ease), background-color var(--t-fast) var(--ease);
}
.schalter__spur:has(input:checked) {
  background: linear-gradient(to bottom, var(--accent-lift) 0%, var(--accent) 100%);
  border-color: var(--accent);
}

.schalter__spur:has(input:checked) .schalter__griff {
  transform: translateX(calc(var(--ctl-h-lg) - var(--space-md) - var(--space-xs)));
}
.schalter__spur:has(input:focus-visible) {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(var(--border-w) * -2);
}
.schalter__text { font-size: var(--text-sm); color: var(--ink); cursor: pointer; }

.feld input[type="range"] {
  width: 100%;
  min-height: var(--space-lg);
  padding: 0;
  background: none;
  border: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
@media (pointer: coarse) { .feld input[type="range"] { min-height: var(--tap-min); } }
.regler__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}
.regler__kopf label { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--ink); }
.regler__wert {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--ink);
}
.regler__skala {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-2xs);
  color: var(--ink-faint);
}

.eigenauswahl { position: relative; }
.eigenauswahl > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--ctl-h);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  list-style: none;
}
.eigenauswahl > summary::-webkit-details-marker { display: none; }
.eigenauswahl[open] > summary { border-color: var(--accent); }
.eigenauswahl__pfeil { color: var(--ink-faint); transition: transform var(--t-fast) var(--ease); }
.eigenauswahl[open] .eigenauswahl__pfeil { transform: rotate(180deg); }

.eigenauswahl__liste {
  position: absolute;
  top: calc(100% + var(--space-2xs));
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: var(--z-aufgeklappt);
  display: flex;
  flex-direction: column;
  padding: var(--space-2xs);
  
  background: var(--surface-overlay);
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: var(--r-md);
  
  max-height: min(18rem, 50dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.eigenauswahl[data-richtung="oben"] .eigenauswahl__liste {
  top: auto;
  bottom: calc(100% + var(--space-2xs));
}
.eigenauswahl__liste .wahl {
  width: 100%;
  min-height: var(--ctl-h-sm);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--r-xs);
}

.eigenauswahl__liste .wahl:hover { background: var(--surface-state); }

.eigenauswahl:not([data-mehrfach]) .eigenauswahl__liste .wahl__kreis { display: none; }
.eigenauswahl:not([data-mehrfach]) .eigenauswahl__liste .wahl { align-items: center; }
.eigenauswahl:not([data-mehrfach]) .eigenauswahl__liste .wahl:has(input:checked) { background: var(--surface-state); }
.eigenauswahl:not([data-mehrfach]) .eigenauswahl__liste .wahl:has(input:checked)::after {
  content: "";
  flex: none;
  margin-inline-start: auto;
  inline-size: var(--icon);
  block-size: var(--icon);
  background: currentColor;
  
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.eigenauswahl:not([data-mehrfach]) .eigenauswahl__liste .wahl:has(input:focus-visible) {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(var(--border-w) * -2);
}

.datumsfeld { position: relative; display: flex; }

.datumsfeld > .feld__eingabe { flex: 1 1 auto; min-width: 0; }
.datumsfeld__eingabe { min-width: 0; }

.datumsfeld__knopf {
  position: absolute;
  inset-block-end: var(--border-w);
  inset-inline-end: var(--border-w);
  width: var(--ctl-h);
  height: calc(var(--ctl-h) - 2 * var(--border-w));
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  background: none;
  border: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  cursor: pointer;
}

.datumsfeld__knopf { transition: color var(--t-sofort) var(--ease); }
.datumsfeld__knopf:hover { color: var(--ink); }
.datumsfeld__eingabe { padding-inline-end: var(--ctl-h); }

.datumsfeld__blatt {
  position: absolute;
  top: calc(100% + var(--space-2xs));
  inset-inline-end: 0;
  z-index: var(--z-aufgeklappt);
  width: max-content;
  padding: var(--space-sm);
  
  background: var(--surface-overlay);
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: var(--r-md);
  user-select: none;
}
.datumsfeld__blatt[hidden] { display: none; }

.datumsfeld__steuer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xs);
}
.datumsfeld__monat {
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  color: var(--ink);
}
.datumsfeld__schritt {
  width: var(--ctl-h-sm);
  height: var(--ctl-h-sm);
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  background: none;
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-xs);
  cursor: pointer;
}
.datumsfeld__schritt:hover:not(:disabled) { color: var(--ink); border-color: var(--border-strong); }
.datumsfeld__schritt:disabled { opacity: .4; cursor: default; }

.datumsfeld__raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-3xs); }
.datumsfeld__wochentag {
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  text-align: center;
  padding-block: var(--space-3xs);
}
.datumsfeld__tag {
  min-width: var(--ctl-h-sm);
  height: var(--ctl-h-sm);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--r-xs);
  cursor: pointer;
}

.datumsfeld__tag:hover:not(:disabled) { background: var(--surface-state); }
.datumsfeld__tag:disabled { color: var(--ink-faint); cursor: default; }

.datumsfeld__tag--heute { box-shadow: inset 0 0 0 var(--border-w) var(--border-strong); }

.datumsfeld__tag[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}
.datumsfeld__tag[aria-pressed="true"]:hover { background: var(--accent-hover); }

.datumsfeld__fuss {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-2xs);
  padding-top: var(--space-2xs);
  border-top: var(--border-w) solid var(--border-subtle);
}

.feld input[list]::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; }
.feld input[list]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.fragebogen {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: min(var(--panel-w) + var(--space-2xl), 100%);
  padding: var(--space-md);
  background: var(--surface-raised);
  border-radius: var(--r-md);
}
.fragebogen__balken {
  height: var(--space-xs);
  border-radius: var(--r-xs);
  background: var(--surface-overlay);
  overflow: hidden;
}
.fragebogen__balken > span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}

.fragebogen__buehne { display: grid; }
.fragebogen__buehne > * { grid-area: 1 / 1; }
.fragebogen__schritt { display: flex; flex-direction: column; gap: var(--space-sm); visibility: hidden; }
.fragebogen__schritt[data-aktiv] { visibility: visible; }
.fragebogen__zahl {
  margin: 0;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.fragebogen__nav { display: flex; align-items: center; gap: var(--space-xs); }
.fragebogen__luecke { flex: 1; }
.fragebogen__fertig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding-block: var(--space-xs);
  text-align: center;
}

.fragebogen__fertig[hidden] { display: flex; visibility: hidden; }
.fragebogen__weiterweg { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; }
.fragebogen__haken { width: var(--space-xl); height: var(--space-xl); color: var(--state-pass); }

.kachelwahl { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.kachelwahl__feld {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--ctl-h-sm);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--ink);
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-xs);
  cursor: pointer;
}
.kachelwahl__feld input { position: absolute; opacity: 0; width: 0; height: 0; }

.kachelwahl__feld:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.kachelwahl__feld:has(input:focus-visible) {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(var(--border-w) * -2);
}

.dateiablage {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: min(calc(var(--panel-w) + var(--space-4xl)), 100%);
}

.dateiablage__eingabe {
  position: absolute;
  width: var(--border-w);
  height: var(--border-w);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.dateiablage__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  border: var(--border-w-stark) dashed var(--border-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.dateiablage__zone > b { color: var(--ink); font-weight: var(--fw-bold); }
.dateiablage__zone .symbol { width: var(--space-lg); height: var(--space-lg); color: var(--accent); }
.dateiablage__zone:hover,
.dateiablage.ist-ueber .dateiablage__zone {
  border-color: var(--accent);
  
  background-color: var(--accent-soft);
  background-image: linear-gradient(var(--surface-state), var(--surface-state));
}
.dateiablage:has(.dateiablage__eingabe:focus-visible) .dateiablage__zone {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(var(--border-w) * -2);
}

.dateiablage--kompakt { width: 100%; }
.dateiablage--kompakt .dateiablage__zone {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  text-align: start;
}
.dateiablage--kompakt .dateiablage__zone > b { font-weight: var(--fw-medium); }
.dateiablage--kompakt .dateiablage__zone .symbol { width: var(--icon); height: var(--icon); }
.dateiablage--kompakt .dateiablage__zone span { font-size: var(--text-xs); color: var(--ink-muted); }
.dateiablage--kompakt .dateiablage__liste:empty { display: none; }
.dateiablage__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.dateiablage__liste li {
  --p: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-sm);
}

@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }

.dateiablage__kachel {
  position: relative;
  flex: none;
  width: var(--ctl-h-sm);
  height: var(--ctl-h-sm);
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--surface-overlay);
}
.dateiablage__kachel > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: grid;
  place-items: center;
}
.dateiablage__kachel .symbol { width: var(--icon); height: var(--icon); }
.dateiablage__geist { filter: grayscale(1) brightness(0.4); color: var(--border-strong); }
.dateiablage__echt {
  clip-path: inset(calc((1 - var(--p)) * 100%) 0 0 0);
  color: var(--accent);
  transition: clip-path var(--t-base) var(--ease);
}

.dateiablage__echt:not(img) { background: none; }

.dateiablage__text { min-width: 0; flex: 1; }
.dateiablage__name {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.dateiablage__mass { font-size: var(--text-2xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.dateiablage__zustand { position: relative; flex: none; width: var(--icon); height: var(--icon); }
.dateiablage__zustand > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease);
}
.dateiablage__zustand .symbol { width: var(--icon); height: var(--icon); }
.dateiablage__liste li.ist-fertig .dateiablage__zustand .ist-gut,
.dateiablage__liste li.ist-fehler .dateiablage__zustand .ist-schlecht { opacity: 1; transform: none; }
.dateiablage__liste li.ist-fertig .dateiablage__zustand .ist-gut { color: var(--state-pass); }
.dateiablage__liste li.ist-fehler .dateiablage__zustand .ist-schlecht { color: var(--state-fail); }

.dateiablage__liste li.ist-fehler { border-color: var(--state-fail); }

.dateiablage__liste li.ist-fehler .dateiablage__mass { color: var(--state-fail); }

.dateiablage__liste li.ist-fehler .dateiablage__echt { clip-path: inset(100% 0 0 0); }

.anzahlwahl {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  width: min(calc(var(--panel-w) + var(--space-4xl)), 100%);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-raised);
  border-radius: var(--r-md);
}
.anzahlwahl > .hinweis { flex-basis: 100%; }
.anzahlwahl__stapel { display: flex; min-width: var(--space-xl); }
.anzahlwahl__kopf {
  width: var(--space-xl);
  height: var(--space-xl);
  margin-inline-start: calc(var(--space-xs) * -1);
  display: grid;
  place-items: center;
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  background: var(--accent);
  color: var(--accent-ink);
  border: var(--border-w-stark) solid var(--surface-raised);
  border-radius: var(--r-pill);
}
.anzahlwahl__kopf:first-child { margin-inline-start: 0; }
.anzahlwahl__zahl { font-size: var(--text-sm); color: var(--ink); font-variant-numeric: tabular-nums; }

.anzahlwahl__feld {
  display: inline-grid;
  grid-template-columns: var(--ctl-h) minmax(var(--ctl-h), auto) var(--ctl-h);
  align-items: center;
  min-height: var(--ctl-h);
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-sm);
  overflow: clip;
}
.anzahlwahl__feld label { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--ink); }
.anzahlwahl__feld .anzahlwahl__schritt {
  align-self: stretch;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
}
.anzahlwahl__feld .anzahlwahl__schritt:hover:not([disabled]) { background: var(--surface-state); }
.anzahlwahl__feld input {
  grid-row: 1;
  grid-column: 2;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  text-align: center;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 0;
  outline: 0;
}

.anzahlwahl[data-rollt] .anzahlwahl__feld input:not(:focus) { color: transparent; }
.anzahlwahl__roll {
  grid-row: 1;
  grid-column: 2;
  justify-self: center;
  font-family: var(--font-data);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  pointer-events: none;
}
.anzahlwahl__feld input:focus ~ .anzahlwahl__roll { visibility: hidden; }
.anzahlwahl__feld:has(input:focus-visible) {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(var(--border-w) * -2);
}

@media (prefers-reduced-motion: reduce) {
  .haken__zug,
  .herz__bild svg,
  .wahl__kreis::after,
  .schalter__griff,
  .eigenauswahl__pfeil,
  .fragebogen__balken > span,
  .dateiablage__zone,
  .dateiablage__zustand > span,
  .dateiablage__echt { transition: none; }

  
  .herz input:checked ~ .herz__bild .herz__ring {
    animation: none;
    display: none;
  }
}

.zeichenzaehler {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: var(--text-2xs);
  
  font-weight: var(--fw-semibold);
  color: var(--ink-faint);
  white-space: nowrap;
}

.zeichenzaehler.ist-warn { color: var(--state-warn); }
.zeichenzaehler.ist-fail { color: var(--state-fail); }
.zeichenzaehler__meldung {
  margin: 0;
  
  min-height: calc(var(--text-2xs) * var(--leading-normal));
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--state-warn);
}
.zeichenzaehler__meldung.ist-fail { color: var(--state-fail); }

.bestaetigung {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin: 0;
  min-height: calc(var(--text-2xs) * var(--leading-normal));
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--state-pass);
}
.bestaetigung > .symbol {
  flex: none;
  
  margin-top: var(--space-3xs);
}
.bestaetigung b { font-weight: var(--fw-bold); }

.feld :is(input, select, textarea)[data-geprueft="ok"] {
  border-color: var(--state-pass);
  border-width: var(--border-w-stark);
}

.bedingtesfeld__folge { display: none; }
.wahl:has(input:checked) + .bedingtesfeld__folge,
.haken:has(input:checked) + .bedingtesfeld__folge {
  display: block;
  
  margin-inline-start: calc(var(--text-sm) + var(--space-xs));
  padding-top: var(--space-2xs);
  
  padding-bottom: var(--space-xs);
}

@media (max-width: 559px) {
  .wahl:has(input:checked) + .bedingtesfeld__folge,
  .haken:has(input:checked) + .bedingtesfeld__folge { margin-inline-start: 0; }
}

.eigenauswahl[open],
.suchauswahl:has(> .suchauswahl__liste:not([hidden])),
.datumsfeld:has(.datumsfeld__blatt:not([hidden])),
.feld:has(.eigenauswahl[open], .suchauswahl__liste:not([hidden]), .datumsfeld__blatt:not([hidden])) {
  position: relative;
  z-index: var(--z-aufgeklappt);
}

.suchauswahl { position: relative; }
.suchauswahl__liste {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: var(--z-aufgeklappt);
  margin: var(--space-2xs) 0 0;
  padding: var(--space-2xs);
  list-style: none;
  
  max-height: min(28rem, 70dvh);
  overflow-y: auto;
  
  background: var(--surface-overlay);
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: var(--r-md);
}
.suchauswahl__liste > li {
  min-height: var(--ctl-h-sm);
  display: flex;
  align-items: center;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--r-xs);
  font-size: var(--text-sm);
  cursor: pointer;
}
.suchauswahl__liste > li:hover,

.suchauswahl__liste > li.ist-aktiv { background: var(--surface-state); }

.suchauswahl__liste > li.suchauswahl__gruppe {
  min-height: 0;
  padding: var(--space-xs) var(--space-xs) var(--space-3xs);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  cursor: default;
}
.suchauswahl__liste > li.suchauswahl__gruppe:hover { background: none; }

.suchauswahl__liste > li.suchauswahl__neu { gap: var(--space-2xs); }

.wahl:has(input:disabled) { cursor: not-allowed; color: var(--ink-faint); }
.wahl input:disabled ~ .wahl__kreis { opacity: .45; }

.schalter:has(input:disabled) { cursor: not-allowed; }
.schalter:has(input:disabled) .schalter__spur { opacity: .45; }
.schalter:has(input:disabled) .schalter__text { color: var(--ink-faint); }

.regler:has(input:disabled) .regler__kopf,
.regler:has(input:disabled) .regler__skala { color: var(--ink-faint); }
.regler input:disabled { opacity: .45; cursor: not-allowed; }

.wahlliste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
}
.wahlmarke {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  
  padding: var(--space-3xs) var(--space-2xs) var(--space-3xs) var(--space-xs);
  border-radius: var(--r-xs);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--ink);
  background: var(--accent-soft);
  border: var(--border-w) solid var(--accent);
}

label.wahlmarke { cursor: pointer; user-select: none; }

.wahlmarke > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.wahlliste:has(input) .wahlmarke:has(> input:not(:checked)) { display: none; }

.wahlmarke:has(> input:focus-visible) {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(var(--border-w) * -2);
}
label.wahlmarke:hover { border-color: var(--accent-hover); }
.wahlmarke > svg {
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--ink-muted);
}
label.wahlmarke:hover > svg { color: var(--ink); }

.wahlliste:not(:has(input:checked))::before {
  content: "Keine Auswahl";
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.wahlliste:not(:has(input:not(:checked))) .wahlliste__zurueck {
  visibility: hidden;
}

.feld--passwort .feld__eingabe { position: relative; }
.feld--passwort .feld__eingabe input {
  padding-inline-end: calc(var(--space-sm) + var(--icon) + var(--space-2xs));
}
.feld__sicht {
  position: absolute;
  inset-inline-end: var(--border-w);
  inset-block-end: var(--border-w);
  display: grid;
  place-items: center;
  width: var(--ctl-h);
  height: calc(var(--ctl-h) - 2 * var(--border-w));
  padding: 0;
  color: var(--ink-faint);
  background: none;
  border: 0;
  border-radius: var(--r-xs);
  cursor: pointer;
}
.feld__sicht:hover { color: var(--ink); }

.feld__sicht [data-zeichen="sichtbar"] { display: none; }
.feld__sicht[aria-pressed="true"] [data-zeichen="verborgen"] { display: none; }
.feld__sicht[aria-pressed="true"] [data-zeichen="sichtbar"] { display: block; }

.tokenfeld {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--ctl-h);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-sm);
}
.tokenfeld:focus-within { border-color: var(--accent); }

.tokenfeld .wahlmarke button:not(.marke-sprung) {
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ink-muted);
  background: none;
  border: 0;
  border-radius: var(--r-xs);
  cursor: pointer;
}
.tokenfeld .wahlmarke button:not(.marke-sprung):hover { color: var(--ink); }

.tokenfeld .wahlmarke:has(> .marke-sprung) { gap: 0; padding-block: 0; padding-inline-end: 0; overflow: hidden; }
.tokenfeld .wahlmarke > .marke-sprung { padding-block: var(--space-3xs); padding-inline-end: var(--space-xs); }
.tokenfeld .wahlmarke > .marke-sprung + button {
  align-self: stretch;
  padding-inline: var(--space-2xs);
  background: var(--accent-soft-lift);
  border-radius: 0;
}
.tokenfeld .wahlmarke .symbol { width: var(--icon-sm); height: var(--icon-sm); }

.tokenfeld .tokenfeld__eingabe {
  
  width: auto;
  flex: 1 1 auto;
  min-width: var(--space-4xl);
  min-height: var(--ctl-h-sm);
  padding: var(--space-3xs) 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 0;
  outline: 0;
}

.tokenfeld:has(.tokenfeld__eingabe:focus-visible) {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(var(--border-w) * -2);
}

.einstellungen {
  width: 100%;
  display: flex;
  flex-direction: column;
  
  container-type: inline-size;
}

.einstellungszeile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto var(--ctl-h);
  align-items: center;
  gap: var(--space-2xs) var(--space-lg);
  padding-block: var(--space-md);
  padding-inline-start: var(--space-sm);
}
.einstellungszeile + .einstellungszeile {
  border-block-start: var(--border-w) solid var(--border-subtle);
}

.einstellungszeile::before {
  content: "";
  position: absolute;
  inset-block: var(--space-2xs);
  inset-inline-start: 0;
  width: var(--border-w-stark);
  border-radius: var(--r-xs);
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.einstellungszeile[data-geaendert="ja"]::before { opacity: 1; }

.einstellungszeile__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.einstellungszeile__text > label,
.einstellungszeile__text > span:first-child {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
}
.einstellungszeile__text > .hinweis {
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  max-width: 34ch;
}

.einstellungszeile__wert { width: min(var(--panel-w), 100%); }

.einstellungszeile__wert textarea { width: 100%; resize: vertical; }

.einstellungszeile__wert .schalter { justify-content: flex-end; }

.einstellungszeile__wert:has(> .schalter) { display: flex; justify-content: flex-end; align-items: center; }
.einstellungszeile__wert .schalter__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.einstellungszeile__fach {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: var(--ctl-h);
}

.einstellungszeile__zurueck {
  visibility: hidden;
  transition: visibility var(--t-sofort) var(--ease), color var(--t-sofort) var(--ease);
}
.einstellungszeile[data-geaendert="ja"] .einstellungszeile__zurueck { visibility: visible; }

.einstellungszeile__leiste {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
  padding-block-start: var(--space-xs);
}
.einstellungszeile:not([data-offen="ja"]) .einstellungszeile__leiste { display: none; }

@container (max-width: 30rem) {
  .einstellungszeile { grid-template-columns: minmax(0, 1fr) var(--ctl-h); }
  .einstellungszeile__text   { grid-column: 1; grid-row: 1; }
  .einstellungszeile__fach   { grid-column: 2; grid-row: 1; }
  .einstellungszeile__wert   { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .einstellungszeile__leiste { grid-column: 1 / -1; grid-row: 3; }
  .einstellungszeile__wert .schalter { justify-content: flex-start; }
}

.gefahrenbereich {
  width: 100%;
  margin-block-start: var(--space-3xl);
  padding-block-start: var(--space-lg);
  border-block-start: var(--border-w) solid var(--border-subtle);
}

.gefahrenbereich > .gefahrenbereich__titel {
  display: block;
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
}
.gefahrenbereich__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
  margin-block-start: var(--space-sm);
}
.gefahrenbereich__zeile p {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.gefahrenbereich__name { font-family: var(--font-data); user-select: all; }

@supports (anchor-name: --a) {
  
  .eigenauswahl:where(.fenster__inhalt *, .rollbereich *)[open] > summary { anchor-name: --fenster-auswahl; }
  .suchauswahl:where(.fenster__inhalt *, .rollbereich *):has(.suchauswahl__liste:not([hidden])) .feld__eingabe { anchor-name: --fenster-suche; }
  .datumsfeld:where(.fenster__inhalt *, .rollbereich *):has(> .datumsfeld__blatt:not([hidden])) { anchor-name: --fenster-datum; }

  .eigenauswahl__liste:where(.fenster__inhalt *, .rollbereich *),
  .eigenauswahl:where(.fenster__inhalt *, .rollbereich *)[data-richtung] .eigenauswahl__liste,
  .suchauswahl__liste:where(.fenster__inhalt *, .rollbereich *),
  .datumsfeld__blatt:where(.fenster__inhalt *, .rollbereich *) {
    position: fixed;
    inset: auto;
    margin-block: var(--space-2xs);
    max-height: 50dvh;
    overflow-y: auto;
    position-try-fallbacks: flip-block;
  }
  .eigenauswahl__liste:where(.fenster__inhalt *, .rollbereich *) { position-anchor: --fenster-auswahl; position-area: block-end span-inline-end; width: anchor-size(width); }
  .suchauswahl__liste:where(.fenster__inhalt *, .rollbereich *) { position-anchor: --fenster-suche; position-area: block-end span-inline-end; width: anchor-size(width); }
  .datumsfeld__blatt:where(.fenster__inhalt *, .rollbereich *) { position-anchor: --fenster-datum; position-area: block-end span-inline-start; }
}

.formular--kompakt > .feld:not(:has(textarea)),
.formular--kompakt > .feldgruppe > .feld:not(:has(textarea)) { padding-inline: var(--kompakt-einzug); }
.formular--kompakt {
  --kompakt-einzug: calc(var(--space-sm) + var(--border-w));
  --kompakt-label: var(--label-w-eigen, var(--label-w));
  
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xs);
}
.formular--kompakt .formular--kompakt { gap: var(--space-3xs); }

.formular--kompakt .feld:not(:has(textarea)) .feld__eingabe:not(:has(> label.visually-hidden)) {
  display: grid;
  grid-template-columns: var(--kompakt-label) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-xs);
}
.formular--kompakt .feld:not(:has(textarea)) .feld__eingabe > label { grid-row: 1; grid-column: 1; }
.formular--kompakt .feld:not(:has(textarea)) .feld__eingabe > input { grid-row: 1; grid-column: 2; }

.formular--kompakt .feld[role="group"],
.formular--kompakt .feld:has(> .tokenfeld) {
  display: grid;
  grid-template-columns: var(--kompakt-label) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-xs);
  row-gap: 0;
}
.formular--kompakt .feld[role="group"] > :not(.feld__kopf),
.formular--kompakt .feld:has(> .tokenfeld) > :not(label) { grid-column: 2; }
.formular--kompakt .feld:has(> .tokenfeld) > label { grid-column: 1; grid-row: 1; }
.formular--kompakt .feld:has(> .tokenfeld) > .tokenfeld { grid-row: 1; }

.formular--kompakt :is(.feld__eingabe > label, .feld__kopf > span:first-child, .feld > label) {
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
}

.formular--kompakt .datumsfeld__knopf { height: calc(var(--ctl-h-sm) - 2 * var(--border-w)); }

.formular--kompakt :is(.feld__leeren, .feld__sicht) { height: calc(var(--ctl-h-sm) - 2 * var(--border-w)); }
.formular--kompakt .feld :is(input:not([type="checkbox"]):not([type="radio"]):not(.tokenfeld__eingabe), textarea),
.formular--kompakt .eigenauswahl > summary,
.formular--kompakt .tokenfeld {
  min-height: var(--ctl-h-sm);
  font-size: var(--text-sm);
  background: transparent;
  border-color: transparent;
  transition: background var(--t-sofort) var(--ease), border-color var(--t-sofort) var(--ease);
}
.formular--kompakt .feld :is(input:not([type="checkbox"]):not([type="radio"]):not(.tokenfeld__eingabe), textarea):hover,
.formular--kompakt .eigenauswahl > summary:hover,
.formular--kompakt .tokenfeld:hover { background: var(--surface-state); }
.formular--kompakt .eigenauswahl[open] > summary { background: var(--surface-base); border-color: var(--border-strong); }
.formular--kompakt .feld :is(input:not([type="checkbox"]):not([type="radio"]):not(.tokenfeld__eingabe), textarea):focus,
.formular--kompakt .tokenfeld:focus-within { background: var(--surface-base); border-color: transparent; outline: none; }
.formular--kompakt .tokenfeld .tokenfeld__eingabe:focus-visible { outline: none; }
.formular--kompakt .tokenfeld { padding-block: var(--space-3xs); }
.formular--kompakt .tokenfeld .tokenfeld__eingabe { min-height: var(--space-lg); background: transparent; }

.formular--kompakt .eigenauswahl > summary .eigenauswahl__pfeil { opacity: 0; }
.formular--kompakt .eigenauswahl > summary:hover .eigenauswahl__pfeil,
.formular--kompakt .eigenauswahl[open] .eigenauswahl__pfeil { opacity: 1; }

.formular--kompakt .feld > .haken {
  display: grid;
  grid-template-columns: var(--kompakt-label) minmax(0, 1fr);
  column-gap: var(--space-xs);
  align-items: center;
  min-height: var(--ctl-h-sm);
}
.formular--kompakt .feld > .haken > span:last-child { grid-column: 1; grid-row: 1; font-size: var(--text-sm); color: var(--ink-muted); }

.formular--kompakt .feld > .haken { cursor: pointer; }
.formular--kompakt .feld > .haken > .haken__kasten { grid-column: 2; grid-row: 1; margin-block-start: 0; margin-inline-start: var(--wertkante); }

.feld[role="group"] > :is(.haken, .schalter) { margin-inline-start: var(--wertkante); }

.formular--kompakt .feld:has(textarea) { margin-top: var(--space-md); }
.formular--kompakt .feld:has(textarea) .feld__eingabe > label { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--ink); }
.formular--kompakt .feld textarea { border-color: var(--border-subtle); }

.formular--kompakt .feld .feld__fehler:empty { display: none; }
.formular--kompakt .feld :is(.feld__fehler, .hinweis) { grid-column: 2; }

.formular--kompakt .feld:not([role="group"]):not(:has(> .tokenfeld)):not(:has(textarea)) > :is(.feld__fehler, .hinweis) {
  margin-inline-start: calc(var(--kompakt-label) + var(--space-xs) + var(--wertkante));
}

.formular--kompakt { container-type: inline-size; }
@container (max-width: 26rem) {
  
  .formular--kompakt :is(.feld, .aufgabe-meta) { --kompakt-label: 6.5rem; }
}

.raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.raster > .ganz { grid-column: 1 / -1; }
.formular--kompakt.raster, .formular--kompakt .raster { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs) 0; }
.formular--kompakt .raster > .ganz, .formular--kompakt.raster > .ganz { grid-column: auto; }

.formular--kompakt { position: relative; }
.kompakt-griff { position: absolute; inset-block: 0; inset-inline-start: calc(var(--kompakt-label, var(--label-w)) - 6px); inline-size: 12px; cursor: col-resize; touch-action: none; z-index: var(--z-griff); }
.kompakt-griff::before, .kompakt-griff::after { content: ''; position: absolute; opacity: 0; transition: opacity var(--t-fast) var(--ease); pointer-events: none; }
.kompakt-griff::after { inset-inline-start: 5.5px; inline-size: var(--border-w); block-size: var(--space-2xl); inset-block-start: calc(var(--griff-y, 1rem) - var(--space-2xl) / 2); background: var(--border-strong); }

.kompakt-griff::before { inset-inline-start: 2px; inline-size: 8px; block-size: 14px; inset-block-start: calc(var(--griff-y, 1rem) - 7px); z-index: var(--z-ueber);
  background: radial-gradient(circle, var(--ink-muted) 1px, transparent 1.4px) 0 0 / 4px 4.67px; background-color: var(--surface-overlay); border-radius: var(--r-xs); }

.formular--kompakt .feld-griff { cursor: grab; user-select: none; }
.kompakt-griff:hover::before, .kompakt-griff:hover::after, .kompakt-griff[data-zieht]::before, .kompakt-griff[data-zieht]::after { opacity: 1; }

.formular--kompakt:not([data-alle-felder]) .feld[data-leer]:not([data-immer]) { display: none; }

.formular--kompakt .feld[data-nie] { display: none; }

.formular--kompakt:not([data-alle-felder]) .feldgruppe:not(:has(.feld:not([data-leer]), .feld[data-immer])) { display: none; }

.formular--kompakt:has(> :is(.eigenschaften-karte, .ablage-block)) { gap: var(--space-sm); }

.formular--kompakt .feld:has(textarea):not(.notiz-teil .feld) {
  margin-top: 0;
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
  transition: border-color var(--t-sofort) var(--ease);
}

.formular--kompakt .feld:has(textarea):not(.notiz-teil .feld) .feld__eingabe > textarea:is(:hover, :focus, *) {
  padding-inline: 0;
  background: transparent;
  border-color: transparent;
}

.formular--kompakt .feld:has(textarea):not(.notiz-teil .feld):focus-within { border-color: var(--border-strong); }

.formular--kompakt .feld:has(textarea) { position: relative; z-index: var(--z-deckt); }

.fe-werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs); padding-block-end: var(--space-2xs); margin-block-end: var(--space-2xs); border-block-end: var(--border-w) solid var(--border-subtle); }
.fe-werkzeug:where(.feld__eingabe > *) { order: 1; }
.fe-werkzeug ~ label { order: 2; }
.fe-werkzeug .btn--symbol { min-width: 0; min-height: 0; width: calc(var(--space-lg) + var(--space-2xs)); height: calc(var(--space-lg) + var(--space-2xs)); }
@media (pointer: coarse) { .fe-werkzeug .btn--symbol { min-width: var(--tap-min); min-height: var(--tap-min); } }
.fe-werkzeug .btn > svg { inline-size: var(--icon-sm); block-size: var(--icon-sm); min-inline-size: var(--icon-sm); flex: none; }
.fe-werkzeug .trenner--hoch { margin-inline: var(--space-2xs); }

.fe-werkzeug .fe-werkzeug__art { min-height: calc(var(--space-lg) + var(--space-2xs)); padding-inline: var(--space-xs); gap: var(--space-2xs); text-decoration: none; }

.formular--kompakt .feld .fe:focus { background: transparent; border-color: transparent; outline: none; }
.formular--kompakt .feld:has(.fe:focus) { border-color: var(--border-strong); }
.fe-werkzeug [data-fw="voll"] { margin-inline-start: auto; }
.feld .fe { block-size: var(--fe-hoehe, 12rem); min-block-size: 6rem; max-block-size: none; overflow: auto; resize: vertical; }
.fe-voll-fenster { inset: 0; margin: auto; inline-size: min(60rem, calc(100vw - 2 * var(--space-md))); block-size: min(90vh, 60rem); padding: var(--space-md); }
.fe-voll-fenster[open] { display: flex; flex-direction: column; }
.feld.fe-voll { flex: 1; display: flex; flex-direction: column; min-block-size: 0; border: 0; padding: 0; background: none; }
.feld.fe-voll > .feld__eingabe { flex: 1; min-block-size: 0; }

.feld.fe-voll .fe { block-size: auto; flex: 1; resize: none; padding-inline: 0; background: transparent; border-color: transparent; outline: none; }

@media (prefers-reduced-motion: reduce) {
  .formular--kompakt .feld :is(input, textarea),
  .formular--kompakt .eigenauswahl > summary,
  .formular--kompakt .tokenfeld,
  .formular--kompakt .feld:has(textarea) { transition: none; }
}

.feld .fe { position: relative; font-family: var(--font-ui); font-size: var(--text-sm); line-height: var(--leading-snug); width: 100%; min-height: max(calc(var(--ctl-h) * 2), calc(var(--zeilen, 4) * 1.4em + var(--space-sm))); padding: var(--space-2xs) var(--space-sm); color: var(--ink); background: var(--surface-base); border: var(--border-w) solid var(--border-strong); border-radius: var(--r-sm); max-width: none; overflow-wrap: anywhere; cursor: text; }
.feld .fe:focus-visible, .feld .fe:focus { outline: none; border-color: var(--accent); }
.formular--kompakt .feld .fe { background: transparent; border-color: transparent; transition: background var(--t-sofort) var(--ease), border-color var(--t-sofort) var(--ease); }
.formular--kompakt .feld .fe:hover { background: var(--surface-state); }
.fe.fe--leer::before { content: attr(data-platzhalter); color: var(--ink-faint); pointer-events: none; position: absolute; inset-block-start: var(--space-2xs); inset-inline-start: var(--space-sm); }
.fe > * + *, .fe p + p { margin-top: var(--space-2xs); }
.fe h1, .fe h2, .fe h3 { margin-top: var(--space-md); }
.fe > :first-child { margin-top: 0; }
.fe table { border-collapse: collapse; width: 100%; margin-block-start: var(--space-lg); }
.fe :is(th, td) { border: var(--border-w) solid var(--border-subtle); padding: var(--space-2xs) var(--space-xs); text-align: start; vertical-align: top; min-width: 4rem; }
.fe th { font-weight: var(--fw-semibold); background: var(--surface-raised); }
.fe pre { padding: var(--space-xs) var(--space-sm); background: var(--surface-raised); border-radius: var(--r-sm); white-space: pre-wrap; }
.fe hr { border: 0; border-top: var(--border-w) solid var(--border-subtle); }
.fe .fe-ref { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 0.2em; cursor: pointer; }
.fe li:has(> input[type="checkbox"]) { list-style: none; }
.feld .fe li > input[type="checkbox"], .fe li > input[type="checkbox"] { display: inline-block; margin: 0 var(--space-xs) 0 calc(-1 * var(--space-lg)); padding: 0; width: 1rem; min-width: 0; height: 1rem; min-height: 0; vertical-align: -0.15em; cursor: pointer; border-radius: var(--r-xs); }
.fe li:has(> input[type="checkbox"]:checked) { color: var(--ink-faint); text-decoration: line-through; }

.seite-text { min-width: 0; max-width: 72ch; }
.seite-text > * + * { margin-top: var(--space-sm); }
.seite-text > :first-child { margin-top: 0; }
.seite-text h1 { font-size: var(--text-2xl); }
.seite-text h2 { font-size: var(--text-xl); margin-top: var(--space-xl); }
.seite-text h3 { font-size: var(--text-lg); margin-top: var(--space-lg); }
.seite-text h4 { margin-top: var(--space-md); }
.seite-text :is(ul, ol) { padding-inline-start: var(--space-lg); }
.seite-text li + li { margin-top: var(--space-3xs); }
.seite-text blockquote { margin-inline: 0; padding: var(--space-sm) var(--space-md); background: var(--surface-raised); border-radius: var(--r-md); color: var(--ink-muted); }
.seite-text blockquote > * + * { margin-top: var(--space-xs); }
.seite-text code { font-size: 0.92em; padding: 0 var(--space-3xs); background: var(--surface-raised); border-radius: var(--r-sm); }
.seite-text pre { overflow-x: auto; padding: var(--space-sm); background: var(--surface-raised); border-radius: var(--r-md); }
.seite-text pre code { padding: 0; background: none; }
.seite-text hr { border: 0; border-top: var(--border-w) solid var(--border-subtle); margin-block: var(--space-lg); }
.seite-text img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.seite-text li:has(> input[type="checkbox"]) { list-style: none; }
.seite-text li:has(> input[type="checkbox"]:checked) { color: var(--ink-faint); text-decoration: line-through; }
:is(.fe, .seite-text) h4 { font-size: var(--text-md); }
:is(.fe, .seite-text) details { margin-block: var(--space-xs); }
:is(.fe, .seite-text) details > summary { cursor: pointer; font-weight: var(--fw-semibold); }
:is(.fe, .seite-text) details > :not(summary) { margin-inline-start: var(--space-lg); margin-top: var(--space-xs); }
:is(.fe, .seite-text) details[data-h="1"] > summary { font-size: var(--text-2xl); font-weight: var(--fw-extrabold); }
:is(.fe, .seite-text) details[data-h="2"] > summary { font-size: var(--text-xl); font-weight: var(--fw-bold); }
:is(.fe, .seite-text) details[data-h="3"] > summary { font-size: var(--text-lg); font-weight: var(--fw-bold); }
:is(.fe, .seite-text) details[data-h="4"] > summary { font-size: var(--text-md); font-weight: var(--fw-bold); }
.fe summary { cursor: text; }
.fe summary::marker { cursor: pointer; }
:is(.fe, .seite-text) p.lesezeichen > a { display: grid; gap: var(--space-3xs); padding: var(--space-sm) var(--space-md); border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-md); text-decoration: none; font-weight: var(--fw-semibold); color: var(--ink); }
:is(.fe, .seite-text) p.lesezeichen > a::after { content: attr(data-domain); font-weight: var(--fw-regular); font-size: var(--text-xs); color: var(--ink-faint); }
:is(.fe, .seite-text) p.lesezeichen > a:hover { background: var(--surface-state); }
:is(.fe, .seite-text) img.fe-bild { max-width: 100%; height: auto; border-radius: var(--r-md); }

.feld-symbol { flex: none; color: var(--ink-muted); }

.formular--kompakt .felder-schalter { padding-inline: 0; }

.hakenliste { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.hakenliste__legende {
  padding: 0;
  margin-bottom: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
}
.hakenliste__liste { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }

.hakenliste--beschreibung .hakenliste__liste { align-items: stretch; gap: 0; border-block: var(--border-w) solid var(--border-subtle); }
.hakenliste--beschreibung .haken { display: flex; width: 100%; padding-block: var(--space-sm); gap: var(--space-sm); }
.hakenliste--beschreibung .haken + .haken { border-top: var(--border-w) solid var(--border-subtle); }

.hakenliste--beschreibung .haken__kasten { margin-block-start: calc((1lh - 1em) / 2); }
.hakenliste__text { display: flex; flex-direction: column; gap: var(--space-3xs); }
.hakenliste__titel { font-weight: var(--fw-medium); color: var(--ink); }
.hakenliste__beschreibung { color: var(--ink-muted); font-size: var(--text-xs); }

.schwerkraftwirbel {
  
  --wirbel-raster: 38;        
  --wirbel-radius: 180;       
  --wirbel-stoss: 2;          
  --wirbel-zug: 0.7;          
  --wirbel-kurve: 1;          
  --wirbel-feder: 0.010;      
  --wirbel-daempfung: 0.91;
  
  --wirbel-punkt: 1.4;        
  --wirbel-deckkraft: 0.18;   
  --wirbel-tempo-teiler: 8;   
  --wirbel-tempo-punkt: 2.6;  
  --wirbel-tempo-deckkraft: 0.38;
  
  --wirbel-punkt-zeichen: 4.2;  
  --wirbel-zeichen-groesse: 1.15;
  --wirbel-neigung: 0;          
  --wirbel-verlauf-von: 0.5;    
  --wirbel-verlauf-bis: 2.6;    
  position: relative;
  overflow: hidden;
  min-height: 16rem;
  border-radius: var(--r-md);
  background: var(--surface-raised);
  
  color: var(--ink);
}
.schwerkraftwirbel > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.schwerkraftwirbel > :not(canvas) { position: relative; z-index: var(--z-ueber); }

.schwerkraftwirbel[data-flaeche="seite"] {
  position: fixed;
  inset: 0;
  z-index: var(--z-unter);
  min-height: 0;
  border-radius: 0;
  background: none;
  pointer-events: none;
}

.schwerkraftwirbel[data-art="weich"] {
  --wirbel-radius: 200;
  --wirbel-stoss: 0.55;
  --wirbel-zug: -0.2;
  --wirbel-kurve: 2;
  --wirbel-feder: 0.0045;
  --wirbel-daempfung: 0.94;
  --wirbel-tempo-teiler: 4;
  --wirbel-tempo-punkt: 1.2;
  --wirbel-tempo-deckkraft: 0.2;
}

.schwerkraftwirbel[data-muster] {
  --wirbel-raster: 16;
  --wirbel-punkt: 1.3;
  color: var(--accent);
}

.partikel {
  container-type: inline-size;
  inline-size: 100%;
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: min(30rem, 70svh);
  padding: var(--space-2xl) var(--space-lg);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--ink);
  touch-action: pan-y;
}
.partikel__leinwand { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.partikel__inhalt { position: relative; z-index: var(--z-ueber); display: grid; gap: var(--space-sm); max-width: var(--wrap-text); }
.partikel__titel { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.partikel__lead { color: var(--ink-muted); }
.partikel__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-xs); }
@container (min-width: 36rem) {
  .partikel__titel { font-size: var(--text-4xl); }
}

.bildspur {
  container-type: inline-size;
  inline-size: 100%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: center;
  gap: var(--space-xl);
  min-height: min(34rem, 80svh);
  padding: var(--space-2xl) var(--space-lg);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--ink);
  
  touch-action: pan-y;
}
.bildspur__inhalt { min-width: 0; position: relative; z-index: var(--z-ueber); display: grid; gap: var(--space-sm); max-width: var(--wrap-text); }
.bildspur__titel { overflow-wrap: anywhere; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; color: var(--ink); }
.bildspur__lead { color: var(--ink-muted); }
.bildspur__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-xs); }
@container (min-width: 36rem) {
  .bildspur__titel { font-size: var(--text-4xl); }
}
.bildspur__ebene { position: absolute; inset: 0; isolation: isolate; z-index: var(--z-klebend); pointer-events: none; overflow: hidden; }
.bildspur__bild {
  position: absolute;
  inset-block-start: 0; inset-inline-start: 0;
  width: 10rem;
  aspect-ratio: 1.1;
  opacity: 0;
  background: var(--surface-overlay);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  will-change: transform, opacity;
}
.bildspur__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bildspur__foto--links { object-position: 20% 50%; }
.bildspur__foto--mitte { object-position: 50% 50%; }
.bildspur__foto--rechts { object-position: 80% 50%; }
@media (prefers-reduced-motion: reduce) {
  .bildspur__ebene { position: relative; inset: auto; z-index: var(--z-ueber); display: flex; flex-wrap: wrap; gap: var(--space-sm); overflow: visible; }
  .bildspur__bild { position: relative; opacity: 1; width: 8rem; }
}

.fadenkreuz {
  container-type: inline-size;
  inline-size: 100%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: center;
  gap: var(--space-xl);
  min-height: min(34rem, 80svh);
  padding: var(--space-2xl) var(--space-lg);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--ink-muted);
  
  touch-action: pan-y;
}
.fadenkreuz__inhalt { min-width: 0; position: relative; z-index: var(--z-ueber); display: grid; gap: var(--space-sm); max-width: var(--wrap-text); }
.fadenkreuz__titel { overflow-wrap: anywhere; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; color: var(--ink); }
.fadenkreuz__lead { color: var(--ink-muted); }
.fadenkreuz__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-xs); }
@container (min-width: 36rem) {
  .fadenkreuz__titel { font-size: var(--text-4xl); }
}
.fadenkreuz__leinwand { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-klebend); }
.fadenkreuz__leistungen { display: grid; gap: var(--space-2xs); padding: 0; margin: var(--space-xs) 0 0; list-style: none; max-width: var(--wrap-text); }
.fadenkreuz__leistungen li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); padding-block: var(--space-xs); border-top: var(--border-w) solid var(--border-subtle); }
.fadenkreuz__leistungen span { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.geisterfasern {
  container-type: inline-size;
  inline-size: 100%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: center;
  gap: var(--space-xl);
  min-height: min(34rem, 80svh);
  padding: var(--space-2xl) var(--space-lg);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--ink);
  
  touch-action: pan-y;
}
.geisterfasern[data-farbe="akzent"] { color: var(--accent); }
.geisterfasern__leinwand { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.geisterfasern__inhalt { min-width: 0; position: relative; z-index: var(--z-ueber); display: grid; gap: var(--space-sm); max-width: var(--wrap-text); }
.geisterfasern__titel { overflow-wrap: anywhere; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; color: var(--ink); }
.geisterfasern__lead { color: var(--ink-muted); }
.geisterfasern__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-xs); }
@container (min-width: 36rem) {
  .geisterfasern__titel { font-size: var(--text-4xl); }
}

.faeden {
  container-type: inline-size;
  inline-size: 100%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: center;
  gap: var(--space-xl);
  min-height: min(34rem, 80svh);
  padding: var(--space-2xl) var(--space-lg);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--ink);
  
  touch-action: pan-y;
}
.faeden[data-farbe="akzent"] { color: var(--accent); }
.faeden__leinwand { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.faeden__inhalt { min-width: 0; position: relative; z-index: var(--z-ueber); display: grid; gap: var(--space-sm); max-width: var(--wrap-text); }
.faeden__titel { overflow-wrap: anywhere; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; color: var(--ink); }
.faeden__lead { color: var(--ink-muted); }
.faeden__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-xs); }
@container (min-width: 36rem) {
  .faeden__titel { font-size: var(--text-4xl); }
}

.lichtgeschwindigkeit {
  container-type: inline-size;
  inline-size: 100%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: center;
  gap: var(--space-xl);
  min-height: min(34rem, 80svh);
  padding: var(--space-2xl) var(--space-lg);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--ink);
  
  touch-action: pan-y;
}
.lichtgeschwindigkeit[data-farbe="akzent"] { color: var(--accent); }
.lichtgeschwindigkeit__leinwand { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lichtgeschwindigkeit__inhalt { min-width: 0; position: relative; z-index: var(--z-ueber); display: grid; gap: var(--space-sm); max-width: var(--wrap-text); }
.lichtgeschwindigkeit__titel { overflow-wrap: anywhere; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; color: var(--ink); }
.lichtgeschwindigkeit__lead { color: var(--ink-muted); }
.lichtgeschwindigkeit__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-xs); }
@container (min-width: 36rem) {
  .lichtgeschwindigkeit__titel { font-size: var(--text-4xl); }
}
.lichtgeschwindigkeit__platte {
  padding: var(--space-lg);
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
}
.lichtgeschwindigkeit__hinweis { font-size: var(--text-sm); color: var(--ink-faint); }

.kachelraster {
  display: grid;
  
  grid-template-columns: repeat(auto-fit, minmax(max(9rem, calc((100% - 3 * var(--space-sm)) / 4)), 1fr));
  
  grid-auto-rows: minmax(7rem, auto);
  gap: var(--space-sm);
  width: 100%;
  container-type: inline-size;
}
.kachelraster > * {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xs);
  overflow: hidden;
  padding: var(--space-sm);
  background: var(--surface-raised);
  border-radius: var(--r-md);
}

.kachelraster__breit { grid-column: 1 / -1; }

.kachelraster__gross { grid-column: 1 / -1; }
@container (min-width: 19rem) {
  .kachelraster__gross { grid-column: span 2; grid-row: span 2; }
}

.kachelraster__zahl {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: var(--text-2xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.kachelraster__bez {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.kachelraster__balken {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2xs);
  flex: 1;
  align-self: stretch;
  min-height: var(--space-2xl);
  margin-top: var(--space-2xs);
}
.kachelraster__balken > i {
  flex: 1;
  background: var(--accent);
  border-radius: var(--r-xs) var(--r-xs) 0 0;
}
.kachelraster__balken > i:nth-child(1) { height: 35%; }
.kachelraster__balken > i:nth-child(2) { height: 50%; }
.kachelraster__balken > i:nth-child(3) { height: 42%; }
.kachelraster__balken > i:nth-child(4) { height: 65%; }
.kachelraster__balken > i:nth-child(5) { height: 58%; }
.kachelraster__balken > i:nth-child(6) { height: 90%; }
.kachelraster__balken > i:nth-child(7) { height: 70%; }

.kachelraster__liste {
  list-style: none;
  margin: var(--space-2xs) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  color: var(--ink);
}
.kachelraster__liste li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.kachelraster__liste li::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--accent);
}

@media (max-width: 559px) {
  .kachelraster { grid-template-columns: 1fr 1fr; }
  .kachelraster__gross { grid-column: span 2; grid-row: span 1; }
  .kachelraster__breit { grid-column: span 2; }
}

.wendekarte {
  width: min(19rem, 100%);
  height: 19rem;
  perspective: 1000px;
}
.wendekarte__innen {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--t-slow) var(--ease);
}
.wendekarte:hover .wendekarte__innen,
.wendekarte:focus-within .wendekarte__innen { transform: rotateY(180deg); }

.wendekarte__vorn,
.wendekarte__hinten {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-md);
  overflow: hidden;
  border-radius: var(--r-md);
  backface-visibility: hidden;
  
  border: var(--border-w) solid var(--border-subtle);
}
.wendekarte__vorn {
  justify-content: flex-end;
  background: var(--surface-raised);
}

.wendekarte__bild {
  flex: 1 1 auto;
  min-height: 0;
  width: calc(100% + var(--space-md) * 2);
  
  max-width: none;
  margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) var(--space-2xs);
  object-fit: cover;
  border-radius: calc(var(--r-md) - var(--border-w)) calc(var(--r-md) - var(--border-w)) 0 0;
}
.wendekarte__hinten {
  transform: rotateY(180deg);
  background: var(--surface-raised);
}
.wendekarte h4 { font-size: var(--text-lg); }
.wendekarte p {
  margin: 0;
  max-width: none;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.wendekarte__hinten ul {
  margin: var(--space-2xs) 0 auto;
  padding-inline-start: var(--space-md);
  font-size: var(--text-sm);
  color: var(--ink);
}
.wendekarte__hinten li::marker { color: var(--accent); }

.wendekarte__hinten > .btn { align-self: flex-end; }

.ablaufkarte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  width: min(22rem, 100%);
  padding: var(--space-md);
  background: var(--surface-raised);
  border-radius: var(--r-md);
}
.ablaufkarte__betrag {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: var(--text-2xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.ablaufkarte__schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
}
.ablaufkarte__schritt {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.ablaufkarte__punkt {
  width: 1em;
  height: 1em;
  flex: none;
  display: grid;
  place-items: center;
  
  border-radius: calc(var(--r-xs) / 2);
  border: var(--border-w) solid var(--border-strong);
}
.ablaufkarte__punkt > .symbol { width: .8em; height: .8em; }
.ablaufkarte__schritt--fertig { color: var(--ink); }
.ablaufkarte__schritt--fertig .ablaufkarte__punkt {
  background: var(--state-pass);
  border-color: var(--state-pass);
  color: var(--accent-ink);
}

.ablaufkarte__schritt[aria-current="step"] {
  color: var(--ink);
  font-weight: var(--fw-bold);
}
.ablaufkarte__schritt[aria-current="step"] .ablaufkarte__punkt {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.glaskarte {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 15rem;
  padding: var(--space-lg);
  overflow: hidden;
  border-radius: var(--r-md);
  border: var(--border-w) solid var(--border-subtle);
  background:
    repeating-linear-gradient(
      135deg,
      var(--border-strong) 0 var(--space-lg),
      var(--surface-overlay) var(--space-lg) var(--space-xl)
    );
}
.glaskarte__grund {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.glaskarte__scheibe {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  width: min(19rem, 100%);
  padding: var(--space-md);
  border-radius: var(--r-md);
  color: var(--ink);
  
  background: color-mix(in oklab, var(--surface-raised) 82%, transparent);
  border: var(--border-w) solid color-mix(in oklab, var(--border-strong) 55%, transparent);
  backdrop-filter: blur(var(--space-xs)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--space-xs)) saturate(1.4);
}
.glaskarte__scheibe b { font-size: var(--text-lg); }
.glaskarte__scheibe p {
  margin: 0;
  max-width: none;
  font-size: var(--text-sm);
  
  color: var(--ink);
}
.glaskarte__scheibe .btn { margin-top: var(--space-2xs); }

.lichtkarten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-sm);
  width: 100%;
}
.lichtkarte {
  --zx: 50%;
  --zy: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  min-height: 9rem;
  padding: var(--space-md);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  border: var(--border-w) solid transparent;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease);
}
.lichtkarte::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(16rem circle at var(--zx) var(--zy), var(--accent-soft), transparent 65%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}
.lichtkarte:hover::before,
.lichtkarte:focus-within::before { opacity: 1; }
.lichtkarte:hover,
.lichtkarte:focus-within { border-color: var(--accent); }

.lichtkarte > * { position: relative; }
.lichtkarte b { font-size: var(--text-md); color: var(--ink); }
.lichtkarte p {
  margin: 0;
  max-width: none;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.beitragskarte {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: min(26rem, 100%);
  padding: var(--space-md);
  background: var(--surface-raised);
  border-radius: var(--r-md);
}
.beitragskarte__kopf {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.beitragskarte__kopf b { font-size: var(--text-sm); color: var(--ink); }

.beitragskarte__zeit {
  display: block;
  font-size: var(--text-2xs);
  color: var(--ink-faint);
}
.beitragskarte p {
  margin: 0;
  max-width: none;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink);
}
.beitragskarte__fuss {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.beitragskarte__fuss > span,
.beitragskarte__fuss > .herz {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 0;
  font-size: inherit;
}
.beitragskarte__fuss .herz__bild { width: var(--icon-sm); height: var(--icon-sm); }
.beitragskarte__fuss .herz__bild svg { width: var(--icon-sm); height: var(--icon-sm); }
.beitragskarte__zahl {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.beitragskarte__antwort {
  display: flex;
  gap: var(--space-xs);
  margin-inline-start: var(--space-lg);
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-overlay);
  border-radius: var(--r-sm);
}
.beitragskarte__antwort p { font-size: var(--text-sm); }

@media (prefers-reduced-motion: reduce) {
  .wendekarte__innen,
  .lichtkarte,
  .lichtkarte::before { transition: none; }
}

.ringkarussell {
  --karte-b: 200px;
  --karte-h: 270px;
  --n: 7;
  --rot: 0deg;
  --neigung: 0deg;
  --r: calc(var(--karte-b) / 2 / tan(180deg / var(--n)) * 1.12);
  position: relative;
  display: grid;
  gap: var(--space-md);
  width: 100%;
  overflow-x: clip;
  
  touch-action: pan-y;
  user-select: none;
}
.ringkarussell[data-blick="oben"] { --neigung: -9deg; }

.ringkarussell__buehne {
  position: relative;
  height: calc(var(--karte-h) + var(--space-3xl));
  perspective: 1200px;
  perspective-origin: 50% 40%;
  cursor: grab;
}
.ringkarussell[data-blick="oben"] .ringkarussell__buehne { perspective-origin: 50% 8%; }
.ringkarussell.zieht .ringkarussell__buehne { cursor: grabbing; }

.ringkarussell__ring {
  position: absolute;
  inset-inline-start: 50%;
  top: var(--space-sm);
  width: var(--karte-b);
  height: var(--karte-h);
  margin-inline-start: calc(var(--karte-b) / -2);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--r) * -1)) rotateX(var(--neigung)) rotateY(var(--rot));
  transition: transform var(--t-lang) var(--ease);
}
.ringkarussell.zieht .ringkarussell__ring { transition: none; }

.ringkarussell__karte {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r));
  opacity: var(--sicht, 1);
  transition: opacity var(--t-slow) var(--ease), border-color var(--t-base) var(--ease);
}

.ringkarussell__karte.ist-vorn { border-color: var(--accent); }

.ringkarussell__karte.ist-hinten { pointer-events: none; }

.ringkarussell__bild {
  position: relative;
  height: 52%;
  flex: none;
  overflow: hidden;
  background: var(--surface-overlay);
}
.ringkarussell__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ringkarussell__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-sm) var(--space-md);
}
.ringkarussell__text b { font-size: var(--text-lg); font-weight: var(--fw-bold); line-height: var(--leading-tight); }
.ringkarussell__text span { font-size: var(--text-sm); color: var(--ink-muted); }

.ringkarussell > .seitenwahl { justify-self: center; }

.ringkarussell:focus-visible { outline: none; }
.ringkarussell:focus-visible .ringkarussell__karte.ist-vorn {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(var(--border-w) * -2);
}

.ringkarussell__karte[data-i="0"] { --i: 0; }
.ringkarussell__karte[data-i="1"] { --i: 1; }
.ringkarussell__karte[data-i="2"] { --i: 2; }
.ringkarussell__karte[data-i="3"] { --i: 3; }
.ringkarussell__karte[data-i="4"] { --i: 4; }
.ringkarussell__karte[data-i="5"] { --i: 5; }
.ringkarussell__karte[data-i="6"] { --i: 6; }
.ringkarussell__karte[data-i="7"] { --i: 7; }
.ringkarussell__karte[data-i="8"] { --i: 8; }
.ringkarussell[data-anzahl="5"] { --n: 5; }
.ringkarussell[data-anzahl="6"] { --n: 6; }
.ringkarussell[data-anzahl="7"] { --n: 7; }
.ringkarussell[data-anzahl="8"] { --n: 8; }
.ringkarussell[data-anzahl="9"] { --n: 9; }

.ringkarussell { container-type: inline-size; container-name: ring; }
@container ring (max-width: 560px) {
  .ringkarussell__buehne {
    --karte-b: 168px;
    --karte-h: 236px;
    --r: calc(var(--karte-b) / 2 / tan(180deg / var(--n)) * 1.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ringkarussell__ring,
  .ringkarussell__karte { transition: none; }
}

.bentoraster { container-type: inline-size; inline-size: 100%; display: grid; gap: var(--space-xl); }
.bentoraster__kopf { display: grid; gap: var(--space-sm); }
.bentoraster__titel { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.bentoraster__lead { color: var(--ink-muted); max-width: var(--wrap-text); }
.bentoraster__raster { display: grid; gap: var(--space-sm); grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(15rem, auto); }
.bentoraster__kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--ink);
}

.bentoraster__kachel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface-state);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease);
}
.bentoraster__kachel:hover::before { opacity: 0.4; }
.bentoraster__kachel:has(.bentoraster__link:focus-visible) { outline: var(--border-w-stark) solid var(--focus); outline-offset: calc(var(--border-w-stark) * -1); }
.bentoraster__bild { position: relative; flex: 1; min-height: 8rem; color: var(--border-strong); }
.bentoraster__bild > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.bentoraster__bild > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.bentoraster__bild:has(> .browserrahmen, > .telefonrahmen) { display: grid; place-items: center; padding: var(--space-md); }
.bentoraster__bild > .telefonrahmen { --telefonrahmen-b: 10rem; }
.bentoraster__text { display: grid; gap: var(--space-3xs); padding: var(--space-md); }
.bentoraster__zeichen { width: var(--space-xl); height: var(--space-xl); color: var(--ink); transform-origin: left center; transition: transform var(--t-base) var(--ease); }
.bentoraster__kachel:hover .bentoraster__zeichen { transform: scale(0.75); }
.bentoraster__kachel h3 { hyphens: auto; font-size: var(--text-xl); line-height: var(--leading-snug); }
.bentoraster__kachel p { font-size: var(--text-sm); color: var(--ink-muted); max-width: 36ch; }
.bentoraster__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  justify-self: start;
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  text-decoration: none;
}
.bentoraster__link .symbol { width: var(--space-md); height: var(--space-md); }

.bentoraster__link::after { content: ""; position: absolute; inset: 0; }
.bentoraster__link:focus-visible { outline: none; }
.bentoraster__kachel--haupt { min-height: 22rem; }
.bentoraster__kachel--haupt h3 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
.bentoraster__kachel--haupt p { font-size: var(--text-md); max-width: 44ch; }
.bentoraster__kachel--haupt .bentoraster__zeichen { width: var(--space-2xl); height: var(--space-2xl); }

.bentoraster__kachel--band { min-height: 0; }
.bentoraster__kachel--band .bentoraster__text { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-lg); }
.bentoraster__kachel--band .bentoraster__text > div { display: grid; gap: var(--space-3xs); }
.bentoraster__kachel--band .bentoraster__link { margin-top: 0; justify-self: end; }

.bentoraster__skizze { display: block; width: 100%; height: auto; }
.bentoraster__skizze text { font-family: var(--font-ui); fill: var(--ink-muted); }
.bentoraster__skizze .bentoraster__beschriftung { fill: var(--ink-faint); }
.bentoraster__skizze .bentoraster__linie { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.bentoraster__skizze .bentoraster__fein { fill: none; stroke: var(--border-strong); stroke-linecap: round; stroke-linejoin: round; }
.bentoraster__skizze .bentoraster__zart { fill: none; stroke: var(--border-subtle); stroke-linecap: round; stroke-linejoin: round; }
.bentoraster__skizze .bentoraster__f1 { fill: var(--surface-base); stroke: none; }
.bentoraster__skizze .bentoraster__f2 { fill: var(--surface-raised); stroke: none; }
.bentoraster__skizze .bentoraster__f3 { fill: var(--surface-overlay); stroke: none; }
.bentoraster__skizze .bentoraster__punkt { fill: var(--accent); stroke: none; }
.bentoraster__skizze .bentoraster__gestrichelt { stroke-dasharray: 6 5; }

@media (hover: hover) and (pointer: fine) {
  .bentoraster__link { opacity: 0; transform: translateY(var(--space-xs)); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
  .bentoraster__kachel:hover .bentoraster__link,
  .bentoraster__kachel:focus-within .bentoraster__link { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bentoraster__kachel::before,
  .bentoraster__zeichen,
  .bentoraster__link { transition: none; }
  .bentoraster__kachel:hover .bentoraster__zeichen { transform: none; }
}

@container (min-width: 34rem) {
  .bentoraster__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bentoraster__kachel--haupt, .bentoraster__kachel--breit, .bentoraster__kachel--band { grid-column: span 2; }
}
@container (min-width: 56rem) {
  .bentoraster__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bentoraster__kachel--haupt { grid-row: span 2; }
  .bentoraster__kachel--band { grid-column: 1 / -1; }
}
@container (max-width: 33.99rem) {
  .bentoraster__kachel--band .bentoraster__text { grid-template-columns: minmax(0, 1fr); }
  .bentoraster__kachel--band .bentoraster__link { justify-self: start; margin-top: var(--space-xs); }
}

.kartenstapel { display: grid; justify-items: center; gap: var(--space-md); padding: var(--space-xl); }
.kartenstapel__stapel { position: relative; inline-size: 100%; max-inline-size: 22rem; aspect-ratio: 4 / 5; outline: none; }
.kartenstapel__stapel:not([data-bereit]) { aspect-ratio: auto; display: grid; gap: var(--space-md); }
.kartenstapel__stapel:not([data-bereit]) .kartenstapel__karte { position: relative; }

.kartenstapel__karte { position: absolute; inset: 0; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; will-change: transform; }
.kartenstapel__stapel[data-bereit] .kartenstapel__karte { pointer-events: none; }
.kartenstapel__stapel[data-bereit] .kartenstapel__karte[data-oben] { pointer-events: auto; cursor: grab; touch-action: pan-y; }
.kartenstapel__stapel.ist-zieht .kartenstapel__karte[data-oben] { cursor: grabbing; }

.kartenstapel__flaeche {
  position: absolute; inset: 0; overflow: hidden; will-change: transform;
  background: var(--surface-raised); border: var(--border-w) solid var(--border-strong); border-radius: var(--r-md);
}
.kartenstapel__stapel:not([data-bereit]) .kartenstapel__flaeche { position: relative; }
.kartenstapel__inhalt { display: grid; grid-template-rows: minmax(0, 1fr) auto; block-size: 100%; }
.kartenstapel__stapel:not([data-bereit]) .kartenstapel__inhalt { block-size: auto; }
.kartenstapel__bild { min-block-size: 0; background: var(--surface-overlay); border-bottom: var(--border-w) solid var(--border-subtle); }
.kartenstapel__stapel:not([data-bereit]) .kartenstapel__bild { aspect-ratio: 4 / 3; }

.kartenstapel__bild img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; pointer-events: none; }
.kartenstapel__foto--links { object-position: 20% 50%; }
.kartenstapel__unten { display: grid; gap: var(--space-3xs); padding: var(--space-sm) var(--space-md) var(--space-md); }
.kartenstapel__titel { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--ink); margin: 0; }
.kartenstapel__unten p { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }
.kartenstapel__unten .kartenstapel__preis { font-size: var(--text-xs); color: var(--ink-faint); }

.kartenstapel__stapel:focus-visible .kartenstapel__karte[data-oben] .kartenstapel__flaeche { outline: var(--border-w) solid var(--focus); outline-offset: calc(var(--border-w) * -2); }

.kartenstapel__bedienung { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-xs) var(--space-md); }
.kartenstapel__stand { font-size: var(--text-sm); color: var(--ink-muted); text-align: center; margin: 0; }
.kartenstapel__hinweis { font-size: var(--text-xs); color: var(--ink-faint); text-align: center; margin: 0; }

.kartentausch { inline-size: 100%; container-type: inline-size; display: grid; gap: var(--space-md); padding-block: var(--space-md); }
.kartentausch__stapel {
  position: relative; inline-size: 100%; aspect-ratio: 1 / 0.82; perspective: 900px; outline: none;
  --dx: 8cqi; --dy: 9.5cqi; --fall-weg: 125%;
  margin-block-end: var(--space-3xl);
}
.kartentausch__karte {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 62cqi; block-size: 50cqi;
  --p: 0; --fall: 0; --verz: 0ms;
  transform-style: preserve-3d; backface-visibility: hidden; cursor: pointer;
  
  transform:
    translate3d(calc(var(--p) * var(--dx)), calc(var(--p) * var(--dy) * -1 + var(--fall) * var(--fall-weg)), calc(var(--p) * var(--dx) * -1.5))
    translate(-50%, -50%) skewY(6deg);
}
.kartentausch__stapel:not([data-bereit]) { aspect-ratio: auto; display: grid; gap: var(--space-md); perspective: none; margin-block-end: 0; }
.kartentausch__stapel:not([data-bereit]) .kartentausch__karte { position: relative; inset-block-start: auto; inset-inline-start: auto; inline-size: auto; block-size: auto; transform: none; }

.kartentausch__flaeche {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  inline-size: 100%; block-size: 100%; overflow: hidden;
  background: var(--surface-raised); border: var(--border-w) solid var(--border-strong); border-radius: var(--r-md);
}
.kartentausch__bild { min-block-size: 0; background: var(--surface-overlay); border-bottom: var(--border-w) solid var(--border-subtle); }
.kartentausch__stapel:not([data-bereit]) .kartentausch__bild { aspect-ratio: 4 / 3; }
.kartentausch__bild img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; pointer-events: none; }
.kartentausch__foto--oben { object-position: 50% 30%; }
.kartentausch__unten { display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-md) var(--space-sm); }
.kartentausch__titel { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--ink); margin: 0; }
.kartentausch__unten p { font-size: var(--text-xs); color: var(--ink-muted); margin: 0; }

.kartentausch__stapel:focus-visible { outline: var(--border-w) solid var(--focus); outline-offset: calc(var(--border-w) * -2); border-radius: var(--r-md); }
.kartentausch__bedienung { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-md); }
.kartentausch__stand { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  .kartentausch__stapel[data-bereit] .kartentausch__karte { transition: transform var(--t-slow) var(--ease-in-out) var(--verz); }
}

.ki-eingabe {
  display: grid;
  gap: var(--space-2xs);
  width: min(calc(var(--panel-w) + var(--space-4xl)), 100%);
  padding: var(--space-sm);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-md);
}

.ki-eingabe__feld > textarea {
  border: 0;
  background: none;
  padding: var(--space-2xs) var(--space-2xs) var(--space-xs);
  resize: none;
  
  field-sizing: content;
  max-height: 10rem;
}
.ki-eingabe__feld > textarea:focus-visible { border-color: transparent; }
.ki-eingabe__feld > label { inset-inline-start: var(--space-2xs); }
.ki-eingabe__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.ki-eingabe__senden { margin-inline-start: auto; }
.ki-eingabe > .hinweis { margin-top: var(--space-3xs); }

.ki-schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3xs);
  width: min(calc(var(--panel-w) + var(--space-4xl)), 100%);
}
.ki-schritte__schritt {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--r-xs);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.ki-schritte__schritt[data-stand="laeuft"] {
  background: var(--accent-soft);
  color: var(--ink);
}
.ki-schritte__schritt[data-stand="offen"] { color: var(--ink-faint); }

.ki-schritte__dauer { margin-inline-start: auto; font-size: var(--text-2xs); white-space: nowrap; flex: none; }

.ki-schritte__zeichen {
  flex: none;
  width: var(--space-md);
  height: var(--space-md);
  border-radius: var(--r-pill);
  border: var(--border-w-stark) solid var(--border-strong);
}
.ki-schritte__schritt[data-stand="fertig"] .ki-schritte__zeichen {
  border-color: var(--state-pass);
  background:
    linear-gradient(to bottom right, transparent 45%, var(--state-pass) 45%) no-repeat;
  background-size: 100% 100%;
}
.ki-schritte__schritt[data-stand="laeuft"] .ki-schritte__zeichen {
  border-color: var(--accent);
  border-top-color: transparent;
  animation: ki-dreht var(--t-slow) linear infinite;
}
@keyframes ki-dreht { to { rotate: 360deg; } }

.spracheingabe {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: min(var(--panel-w), 100%);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
}

.spracheingabe__knopf[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  animation: spracheingabe-ring var(--t-lang) var(--ease-in-out) infinite;
}
@keyframes spracheingabe-ring {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 45%, transparent); }
  50%      { box-shadow: 0 0 0 var(--space-2xs) color-mix(in oklab, var(--accent) 0%, transparent); }
}
.spracheingabe__balken { display: flex; align-items: center; gap: var(--space-3xs); height: var(--space-xl); }
.spracheingabe__balken > i {
  width: var(--border-w-stark);
  height: var(--space-2xs);
  border-radius: var(--r-pill);
  background: var(--border-strong);
  transition: height var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.spracheingabe[data-nimmt-auf] .spracheingabe__balken > i {
  background: var(--accent);
  animation: spracheingabe-schlag var(--t-slow) var(--ease-in-out) infinite;
}
.spracheingabe[data-nimmt-auf] .spracheingabe__balken > i:nth-child(2) { animation-delay: calc(var(--t-sofort) * 1); }
.spracheingabe[data-nimmt-auf] .spracheingabe__balken > i:nth-child(3) { animation-delay: calc(var(--t-sofort) * 2); }
.spracheingabe[data-nimmt-auf] .spracheingabe__balken > i:nth-child(4) { animation-delay: calc(var(--t-sofort) * 3); }
.spracheingabe[data-nimmt-auf] .spracheingabe__balken > i:nth-child(5) { animation-delay: calc(var(--t-sofort) * 4); }
.spracheingabe[data-nimmt-auf] .spracheingabe__balken > i:nth-child(6) { animation-delay: calc(var(--t-sofort) * 5); }
.spracheingabe[data-nimmt-auf] .spracheingabe__balken > i:nth-child(7) { animation-delay: calc(var(--t-sofort) * 6); }
@keyframes spracheingabe-schlag {
  0%, 100% { height: var(--space-2xs); }
  50%      { height: var(--space-lg); }
}
.spracheingabe__stand { font-size: var(--text-sm); color: var(--ink-muted); margin-inline-start: auto; }

@media (prefers-reduced-motion: reduce) {
  .ki-schritte__schritt[data-stand="laeuft"] .ki-schritte__zeichen,
  .spracheingabe__knopf[aria-pressed="true"],
  .spracheingabe[data-nimmt-auf] .spracheingabe__balken > i { animation: none; }
  .spracheingabe[data-nimmt-auf] .spracheingabe__balken > i { height: var(--space-md); }
}

.sprachausgabe {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-sm);
}
.sprachausgabe__knopf[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}
.sprachausgabe__text { margin: 0; }

.sprachausgabe__text mark {
  background: var(--accent-soft);
  color: var(--ink);
  border-radius: var(--r-xs);
  padding: 0 var(--space-3xs);
}

.sprachausgabe[data-kann="nein"] .sprachausgabe__knopf { display: none; }

.sprachausgabe__knopf [data-zeichen="aus"],
.sprachausgabe__knopf[aria-pressed="true"] [data-zeichen="an"] { display: none; }
.sprachausgabe__knopf[aria-pressed="true"] [data-zeichen="aus"] { display: block; }

.knopf-sammeln svg,
.knopf-teilen svg,
.btn.knopf-glocke svg {
  width: var(--icon);
  height: var(--icon);
  flex: none;
}

.btn.knopf-roll {
  overflow: hidden;
  gap: var(--space-xs);
}
.knopf-roll__band {
  display: grid;
  overflow: hidden;
  line-height: var(--leading-snug);
}
.knopf-roll__band > span {
  grid-area: 1 / 1;
  transition: transform var(--t-slow) var(--ease-in-out);
}

.knopf-roll__band > span + span { transform: translateY(115%); }

.knopf-roll:hover  .knopf-roll__band > span:first-child,
.knopf-roll:focus-visible .knopf-roll__band > span:first-child,
.knopf-roll:active .knopf-roll__band > span:first-child { transform: translateY(-115%); }

.knopf-roll:hover  .knopf-roll__band > span + span,
.knopf-roll:focus-visible .knopf-roll__band > span + span,
.knopf-roll:active .knopf-roll__band > span + span { transform: none; }

.btn.knopf-roll--staffel {
  
  gap: 0;
  
  white-space: nowrap;
}
.knopf-roll__zeichen {
  display: inline-block;
  overflow: hidden;
  height: calc(1em * var(--leading-snug));
  line-height: calc(1em * var(--leading-snug));
  vertical-align: top;
}
.knopf-roll__zeichen > i {
  display: inline-block;
  
  font-style: normal;
  text-shadow: 0 calc(1em * var(--leading-snug)) currentColor;
  
  transition: transform var(--t-slow) var(--ease-in-out) calc(var(--i, 0) * var(--t-fast) / 6);
}
.knopf-roll--staffel:hover  .knopf-roll__zeichen > i,
.knopf-roll--staffel:focus-visible .knopf-roll__zeichen > i,
.knopf-roll--staffel:active .knopf-roll__zeichen > i {
  transform: translateY(calc(-1em * var(--leading-snug)));
}

.knopf-sammeln {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.knopf-sammeln__eintrag {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  
  flex-wrap: wrap;
  flex: 1 1 var(--menu-w);
  min-width: 0;
  background: var(--surface-raised);
  border-radius: var(--r-md);
  padding: var(--space-sm);
}
.knopf-sammeln__bild {
  width: var(--space-2xl);
  height: var(--space-2xl);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--surface-overlay);
  color: var(--ink-muted);
}

.knopf-sammeln__bild img { width: 100%; height: 100%; object-fit: cover; }
.knopf-sammeln__text {
  flex: 1 1 var(--menu-w);
  min-width: 0;
  overflow-wrap: anywhere;
}
.knopf-sammeln__text b {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.knopf-sammeln__text p {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}
.btn.knopf-sammeln__knopf { gap: var(--space-2xs); }

.btn.knopf-sammeln__knopf.ist-fertig {
  background: none;
  color: var(--state-pass);
  border-color: var(--state-pass);
  pointer-events: none;
}
.knopf-sammeln__ablage {
  position: relative;
  width: var(--ctl-h);
  height: var(--ctl-h);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  color: var(--ink);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
}
.knopf-sammeln__zahl {
  position: absolute;
  top: calc(var(--space-2xs) * -1);
  inset-inline-end: calc(var(--space-2xs) * -1);
  min-width: var(--space-lg);
  padding-inline: var(--space-3xs);
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
  background: var(--accent);
}

.knopf-sammeln__flug {
  position: fixed;
  z-index: var(--z-ziehen);
  width: var(--space-sm);
  height: var(--space-sm);
  margin: calc(var(--space-sm) / -2) 0 0 calc(var(--space-sm) / -2);
  border-radius: var(--r-xs);
  background: var(--accent);
  pointer-events: none;
}

.knopf-teilen {
  display: inline-flex;
  flex-wrap: wrap; 
  align-items: center;
  gap: var(--space-xs);
}
.knopf-teilen > .btn { gap: var(--space-2xs); }
.knopf-teilen__kanaele {
  display: inline-flex;
  gap: var(--space-2xs);
}
.knopf-teilen__kanaele button {
  width: var(--tap-min);
  height: var(--tap-min);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--accent);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-strong);
  cursor: pointer;
  opacity: 0;
  transform: translateX(calc(var(--space-sm) * -1)) scale(.6);
  pointer-events: none;
  transition:
    opacity var(--t-base) var(--ease),
    transform var(--t-base) var(--ease),
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.knopf-teilen:hover .knopf-teilen__kanaele button,
.knopf-teilen:focus-within .knopf-teilen__kanaele button {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.knopf-teilen__kanaele button:nth-child(2) { transition-delay: calc(var(--t-fast) / 3); }
.knopf-teilen__kanaele button:nth-child(3) { transition-delay: calc(var(--t-fast) * 2 / 3); }

.knopf-teilen__kanaele button:hover {
  
  background-color: var(--accent-soft);
  background-image: linear-gradient(var(--surface-state), var(--surface-state));
  border-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {

  
  .knopf-roll__band > span { transition: none; }
  .knopf-roll__band > span + span { display: none; }
  .knopf-roll:hover  .knopf-roll__band > span:first-child,
  .knopf-roll:focus-visible .knopf-roll__band > span:first-child,
  .knopf-roll:active .knopf-roll__band > span:first-child { transform: none; }

  
  .knopf-roll__zeichen > i {
    transition: none;
    text-shadow: none;
  }
  .knopf-roll--staffel:hover  .knopf-roll__zeichen > i,
  .knopf-roll--staffel:focus-visible .knopf-roll__zeichen > i,
  .knopf-roll--staffel:active .knopf-roll__zeichen > i { transform: none; }

  
  .knopf-teilen__kanaele button {
    transition: none;
    transition-delay: 0s;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

.btn.knopf-glocke { overflow: visible; }
.btn.knopf-glocke svg { transform-origin: top center; }
@keyframes knopf-glocke-laeuten {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(10deg); }
  30% { transform: rotate(-10deg); }
  45% { transform: rotate(5deg); }
  60% { transform: rotate(-5deg); }
  75% { transform: rotate(2deg); }
}
.btn.knopf-glocke:hover svg,
.btn.knopf-glocke:focus-visible svg,
.btn.knopf-glocke:active svg {
  animation: knopf-glocke-laeuten var(--t-lang) var(--ease-in-out);
}

@media (prefers-reduced-motion: reduce) {
  
  .btn.knopf-glocke:hover svg,
  .btn.knopf-glocke:focus-visible svg,
  .btn.knopf-glocke:active svg { animation: none; }
}

.knopfgruppe { display: inline-flex; }
.knopfgruppe .btn { border-radius: 0; margin-inline-start: -1px; }
.knopfgruppe .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); margin-inline-start: 0; }
.knopfgruppe .btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.knopfgruppe .btn:hover { position: relative; z-index: var(--z-ueber); }

.knopfschau { display: grid; gap: var(--space-sm); width: 100%; }

.knopfschau__reihe {
  display: grid;
  grid-template-columns: var(--space-5xl) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-sm);
}
.knopfschau__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.knopfschau__marke {
  
  align-self: center;
  font-size: var(--text-2xs);
  color: var(--ink-faint);
}
.knopfschau__reihe--voll { align-items: stretch; }
.knopfschau__reihe--voll .btn--voll { flex: 1 1 var(--menu-w); }

.umschaltknopf[aria-pressed="false"] { color: var(--ink-muted); border-color: var(--border-subtle); }
.umschaltknopf[aria-pressed="false"]:hover { color: var(--ink); border-color: var(--border-strong); }
.umschaltknopf[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--ink);
  border-color: var(--accent);
}

.umschaltknopf[aria-pressed="true"]:hover {
  background: var(--accent-soft-lift);
  border-color: var(--ink);
}
.umschaltgruppe { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

.burgerknopf__striche {
  position: relative;
  display: block;
  width: var(--icon);
  height: var(--icon);
}

.burgerknopf__striche > span {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 100%;
  height: var(--border-w-stark);
  border-radius: var(--r-xs);
  background: currentColor;
  transform: translateY(calc(-50% + var(--strich-weg, 0px)));
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.burgerknopf__striche > span:nth-child(1) { --strich-weg: calc(var(--icon) * -0.26); }
.burgerknopf__striche > span:nth-child(3) { --strich-weg: calc(var(--icon) * 0.26); }

.burgerknopf[aria-expanded="true"] .burgerknopf__striche > span:nth-child(1) {
  transform: translateY(-50%) rotate(45deg);
}
.burgerknopf[aria-expanded="true"] .burgerknopf__striche > span:nth-child(2) { opacity: 0; }
.burgerknopf[aria-expanded="true"] .burgerknopf__striche > span:nth-child(3) {
  transform: translateY(-50%) rotate(-45deg);
}

.burgerschau { position: relative; display: inline-block; }
.burgerknopf__menue {
  position: absolute;
  top: calc(100% + var(--space-2xs));
  inset-inline-start: 0;
  z-index: var(--z-aufgeklappt);
  display: flex;
  flex-direction: column;
  min-width: var(--menu-w);
  padding: var(--space-2xs);
  
  background: var(--surface-overlay);
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: var(--r-md);
}
.burgerknopf__menue[hidden] { display: none; }
.burgerknopf__menue a {
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--r-xs);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--text-sm);
}

.burgerknopf__menue a:hover { background: var(--surface-state); }

@media (prefers-reduced-motion: reduce) {
  .burgerknopf__striche > span { transition: none; }
}

.modusschalter {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-sm);
  
  justify-self: start;
}
.modusschalter__schacht {
  position: relative;
  display: grid;
  width: var(--ctl-h-sm);
  height: var(--ctl-h-sm);
  border-radius: var(--r-sm);
  
  background: none;
  color: var(--ink-faint);
  border: var(--border-w) solid transparent;
  
  overflow: clip;
  transition: background var(--t-sofort) var(--ease),
              color var(--t-sofort) var(--ease);
}
.modusschalter:hover .modusschalter__schacht {
  background: var(--surface-state);
  color: var(--ink);
}

.modusschalter__zeichen {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  
  transition: translate var(--t-base) var(--ease);
}
.modusschalter[aria-checked="false"] .modusschalter__zeichen--mond { translate: 0 -100%; }
.modusschalter[aria-checked="true"] .modusschalter__zeichen--sonne { translate: 0 100%; }

:root:not([data-mode="light"]) .modusschalter:not([data-abgeglichen]) .modusschalter__zeichen--mond { translate: none; }
:root:not([data-mode="light"]) .modusschalter:not([data-abgeglichen]) .modusschalter__zeichen--sonne { translate: 0 100%; }
:root[data-mode="light"] .modusschalter:not([data-abgeglichen]) .modusschalter__zeichen--mond { translate: 0 -100%; }
:root[data-mode="light"] .modusschalter:not([data-abgeglichen]) .modusschalter__zeichen--sonne { translate: none; }

.modusschalter:active .modusschalter__schacht { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .modusschalter__zeichen { transition: none; }
}

.nachoben {
  --nachoben-ende: max(var(--gutter), calc((100% - var(--nachoben-kante, var(--wrap))) / 2 + var(--gutter)));
  position: fixed;
  inset: auto var(--nachoben-ende) var(--space-md) auto;
  z-index: var(--z-leiste);
  background: var(--surface-overlay);
  border: var(--border-w-stark) solid var(--border-strong);
}

@supports (animation-timeline: scroll()) {
  .nachoben {
    opacity: 0;
    visibility: hidden;
    animation: nachoben-auftauchen linear both;
    animation-timeline: scroll(root block);
    
    animation-range: 50vh 100vh;
  }
}

:root:has(.zuruf:popover-open) .nachoben {
  animation: none;
  visibility: hidden;
}

@keyframes nachoben-auftauchen {
  from { opacity: 0; visibility: hidden; }
  to   { opacity: 1; visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .nachoben { animation: none; opacity: 1; visibility: visible; }
}

.kopf-vollbild,
.kopf-parallax,
.kopf-randlos,
.kopf-video,
.kopf-typo,
.kopf-tagnacht,
.kopf-buehne,
.kopf-bewertung,
.kopf-folge {
  container-type: inline-size;
}
.kopf-vollbild__titel,
.kopf-parallax__titel,
.kopf-randlos__titel,
.kopf-video__titel,
.kopf-tagnacht__titel,
.kopf-buehne__titel,
.kopf-bewertung__titel {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.kopf-vollbild__lead,
.kopf-parallax__lead,
.kopf-randlos__lead,
.kopf-video__lead,
.kopf-typo__lead,
.kopf-tagnacht__lead,
.kopf-buehne__lead,
.kopf-bewertung__lead {
  font-size: var(--text-lg);
  color: var(--ink-muted);
}
.kopf-vollbild__aktionen,
.kopf-parallax__aktionen,
.kopf-randlos__aktionen,
.kopf-video__aktionen,
.kopf-tagnacht__aktionen,
.kopf-buehne__aktionen,
.kopf-bewertung__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}

.kopf-buehne__bild,
.kopf-bewertung__foto,
.kopf-folge__bild {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-overlay);
}
.kopf-buehne__bild > img,
.kopf-bewertung__foto > img,
.kopf-folge__bild > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kopf-vollbild {
  position: relative;
  display: grid;
  align-items: end;
  
  min-height: min(85svh, 48rem);
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-md);
}
.kopf-vollbild__bild {
  position: absolute;
  inset: 0;
  z-index: var(--z-unter);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.kopf-vollbild__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--surface-base);
  border-radius: var(--r-md);
  padding: var(--space-xl);
  margin: var(--gutter);
  
  min-width: 0;
  max-width: min(34rem, calc(100% - 2 * var(--gutter)));
}
.kopf-vollbild__aktionen { margin-top: var(--space-sm); display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.kopf-parallax__kopf {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: var(--wrap-text);
  padding-bottom: var(--space-2xl);
}
.kopf-parallax__aktionen { margin-top: var(--space-sm); }
.kopf-parallax__fenster {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  background: var(--surface-raised);
}
.kopf-parallax__bild {
  position: absolute;
  inset-inline: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@container (min-width: 45rem) {
  .kopf-parallax__fenster { aspect-ratio: 21 / 9; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .kopf-parallax__bild {
      height: 130%;
      animation-name: kopf-parallax-lauf;
      
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}
@keyframes kopf-parallax-lauf {
  from { transform: translateY(-23%); }
  to { transform: translateY(0); }
}

.kopf-randlos__raster { display: grid; }
.kopf-randlos__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-self: center;
  padding-block: var(--section-y);
  padding-inline: var(--gutter);
}
.kopf-randlos__aktionen { margin-top: var(--space-sm); }
.kopf-randlos__bild {
  position: relative;
  align-self: center;
  overflow: hidden;
  border-radius: var(--r-md);
}

.kopf-randlos__bild { margin-block: var(--space-xl); }
.kopf-randlos__bild img { display: block; width: 100%; height: auto; }
@container (min-width: 56rem) {
  .kopf-randlos__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: min(80svh, 40rem);
  }
  .kopf-randlos__text {
    
    padding-inline-start: max(var(--gutter), calc((100cqw - var(--wrap)) / 2 + var(--gutter)));
    padding-inline-end: var(--space-3xl);
  }
  
  .kopf-randlos__bild { margin-inline-end: max(var(--gutter), calc((100cqw - var(--wrap)) / 2 + var(--gutter))); }
}

.kopf-video__raster { display: grid; gap: var(--space-xl); align-items: center; }
.kopf-video__text { display: flex; flex-direction: column; gap: var(--space-md); }
.kopf-video__aktionen { margin-top: var(--space-sm); }
.kopf-video__rahmen {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-raised);
}
.kopf-video__film {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kopf-video__schalter {
  position: absolute;
  inset-block-end: var(--space-md);
  inset-inline-end: var(--space-md);
}
.kopf-video__schalter[hidden] { display: none; }
@container (min-width: 56rem) {
  .kopf-video__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--space-3xl); }
}

.kopf-folge .bilderfolge { width: 100%; gap: var(--space-md); }
.kopf-folge .bilderfolge__bahn {
  gap: var(--space-sm);
  scroll-padding-inline: 4%;
  padding-bottom: 0;
}
.kopf-folge .bilderfolge__bild { flex: 0 0 92%; }
.kopf-folge__folie {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-xs);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-lg);
}
.kopf-folge__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-md);
}
.kopf-folge__titel {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.kopf-folge__text p { color: var(--ink-muted); }
.kopf-folge__bild { aspect-ratio: 4 / 3; }
.kopf-folge__bild--wegweiser > img { object-position: 60% 60%; }
.kopf-folge__bild--gondel > img { object-position: 40% 50%; }
.kopf-folge__bild--palmen > img { object-position: 50% 40%; }
@container (min-width: 56rem) {
  .kopf-folge__folie { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-lg); }
  .kopf-folge__text { padding: var(--space-xl); }
  .kopf-folge__bild { aspect-ratio: auto; min-height: 24rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kopf-folge .bilderfolge__bahn { scroll-behavior: auto; }
  .kopf-folge .bilderfolge__bild img { transition: none; }
}

.kopf-tagnacht {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 34rem;
  padding: var(--gutter);
  overflow: hidden;
  border-radius: var(--r-md);
}
.kopf-tagnacht__bild {
  position: absolute;
  inset: 0;
  margin: 0;
  background: var(--surface-overlay);
}
.kopf-tagnacht__bild > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kopf-tagnacht__bild--hell { display: none; }
.kopf-tagnacht__bild--hell > img { object-position: 70% 25%; }
.kopf-tagnacht__bild--dunkel > img { object-position: 50% 55%; }
:root[data-mode="light"] .kopf-tagnacht__bild--hell { display: block; }
:root[data-mode="light"] .kopf-tagnacht__bild--dunkel { display: none; }
.kopf-tagnacht__karte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  max-width: 40rem;
  padding: var(--space-xl);
  text-align: center;
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
}
.kopf-tagnacht__lead { max-width: var(--wrap-text); }
.kopf-tagnacht__aktionen { justify-content: center; }

.kopf-buehne__raster { display: grid; gap: var(--space-xl); align-items: end; }
.kopf-buehne__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
.kopf-buehne__rahmen {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
}
.kopf-buehne__bild { aspect-ratio: 4 / 5; }
.kopf-buehne__bild > img { object-position: 50% 40%; }
.kopf-buehne__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.kopf-buehne__zeile .marke:last-child { margin-inline-start: auto; }
@container (min-width: 56rem) {
  .kopf-buehne__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); }
  .kopf-buehne__titel { font-size: var(--text-5xl); }
}

.kopf-bewertung__raster { display: grid; gap: var(--space-xl); align-items: center; }
.kopf-bewertung__text { display: flex; flex-direction: column; gap: var(--space-lg); align-items: flex-start; }
.kopf-bewertung__bild { position: relative; }
.kopf-bewertung__foto { aspect-ratio: 4 / 5; }
.kopf-bewertung__foto > img { object-position: 50% 40%; }
.kopf-bewertung__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  color: var(--ink);
}
.kopf-bewertung__chiptext { display: flex; flex-direction: column; }
.kopf-bewertung__chiptext small { font-size: var(--text-xs); color: var(--ink-muted); }
.kopf-bewertung__sterne { display: inline-flex; gap: var(--space-3xs); color: var(--ink); }
.kopf-bewertung__stern { width: var(--icon-sm); height: var(--icon-sm); fill: currentColor; }
.kopf-bewertung__avatare { display: inline-flex; }
.kopf-bewertung__avatare > .profilbild + .profilbild { margin-inline-start: calc(var(--space-xs) * -1); }
.kopf-bewertung__avatare > .profilbild { border: var(--border-w-stark) solid var(--surface-raised); }
.kopf-bewertung__chip--foto { margin-top: var(--space-xs); }
@container (min-width: 44rem) {
  .kopf-bewertung__chip--foto {
    position: absolute;
    inset-inline-start: var(--space-sm);
    inset-block-end: var(--space-sm);
    margin-top: 0;
    max-width: calc(100% - var(--space-lg));
  }
}
@container (min-width: 56rem) {
  .kopf-bewertung__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); }
}

.kopf-typo__titel {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 16ch;
}
.kopf-typo__band {
  margin-top: var(--space-2xl);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-md);
}
.kopf-typo__band img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.kopf-typo__fuss {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
.kopf-typo__lead { max-width: 44ch; }
@container (min-width: 45rem) {
  
  .kopf-typo__band { aspect-ratio: 21 / 6; }
}

.kopf-bewertung { inline-size: 100%; }
.kopf-buehne { inline-size: 100%; }
.kopf-folge { inline-size: 100%; }
.kopf-parallax { inline-size: 100%; }
.kopf-randlos { inline-size: 100%; }
.kopf-tagnacht { inline-size: 100%; }
.kopf-typo { inline-size: 100%; }
.kopf-video { inline-size: 100%; }
.kopf-vollbild { inline-size: 100%; }

.kopf-vollbild__titel { hyphens: auto; overflow-wrap: break-word; }
.kopf-parallax__titel { hyphens: auto; overflow-wrap: break-word; }
.kopf-randlos__titel { hyphens: auto; overflow-wrap: break-word; }
.kopf-video__titel { hyphens: auto; overflow-wrap: break-word; }
.kopf-typo__titel { hyphens: auto; overflow-wrap: break-word; }
.kopf-folge__titel { hyphens: auto; overflow-wrap: break-word; }
.kopf-tagnacht__titel { hyphens: auto; overflow-wrap: break-word; }
.kopf-buehne__titel { hyphens: auto; overflow-wrap: break-word; }
.kopf-bewertung__titel { hyphens: auto; overflow-wrap: break-word; }

.kopf-anmeldung { container-type: inline-size; inline-size: 100%; }
.kopf-anmeldung__raster { display: grid; gap: var(--space-xl); align-items: start; }
.kopf-anmeldung__text { display: flex; flex-direction: column; gap: var(--space-lg); align-items: flex-start; }
.kopf-anmeldung__titel { font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); hyphens: auto; overflow-wrap: break-word; }
.kopf-anmeldung__lead { font-size: var(--text-lg); color: var(--ink-muted); }
.kopf-anmeldung__zitat { margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); max-width: var(--wrap-text); }
.kopf-anmeldung__zitat blockquote { margin: 0; font-size: var(--text-lg); color: var(--ink); }
.kopf-anmeldung__zitat figcaption { display: flex; align-items: center; gap: var(--space-xs); }
.kopf-anmeldung__wer { display: flex; flex-direction: column; font-size: var(--text-sm); }
.kopf-anmeldung__wer small { font-size: var(--text-xs); color: var(--ink-muted); }
.kopf-anmeldung__karte {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
}
.kopf-anmeldung__karte-titel { font-size: var(--text-2xl); }
.kopf-anmeldung__hilfe { color: var(--ink-muted); font-size: var(--text-sm); }

@container (min-width: 56rem) {
  .kopf-anmeldung__raster { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-3xl); }
  .kopf-anmeldung__titel { font-size: var(--text-5xl); }
}
@container (min-width: 18rem) {
  .kopf-anmeldung__karte .formular__reihe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.kopf-mailfeld { container-type: inline-size; inline-size: 100%; }
.kopf-mailfeld__mitte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}
.kopf-mailfeld__titel { font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); hyphens: auto; overflow-wrap: break-word; }
.kopf-mailfeld__lead { font-size: var(--text-lg); color: var(--ink-muted); max-width: var(--wrap-text); }
.kopf-mailfeld__form { inline-size: 100%; max-width: 36rem; text-align: start; }
.kopf-mailfeld__beleg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--ink-muted); }
.kopf-mailfeld__avatare { display: inline-flex; }
.kopf-mailfeld__avatare > .profilbild + .profilbild { margin-inline-start: calc(var(--space-xs) * -1); }
.kopf-mailfeld__avatare > .profilbild { border: var(--border-w-stark) solid var(--surface-base); }
@container (min-width: 56rem) {
  .kopf-mailfeld__titel { font-size: var(--text-5xl); }
}

.kopfzeile-mega,
.kopfzeile-kompakt {
  position: relative;
  container-type: inline-size;
  container-name: kopfzeile;
  background: var(--surface-base);
  border-block-end: var(--border-w) solid var(--border-subtle);
}
.kopfzeile-mega__innen,
.kopfzeile-kompakt__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  padding-block: var(--space-xs);
}
.kopfzeile-mega__logo,
.kopfzeile-kompakt__logo {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}
.kopfzeile-mega__logo svg,
.kopfzeile-kompakt__logo svg { height: var(--space-md); width: auto; display: block; }
.kopfzeile-mega .hauptmenue,
.kopfzeile-kompakt .hauptmenue { flex-wrap: wrap; background: none; padding: 0; }

.kopfzeile-mega .klappe { position: static; }

.kopfzeile-mega--offen { min-block-size: min(30rem, 80svh); }
.kopfzeile-mega .hauptmenue .menue {
  width: auto;
  min-width: 0;
  max-width: none;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 100%;
  padding: 0;
  gap: 0;
  border-radius: 0;
  border-inline: 0;
  border-block-start: 0;
  max-height: min(80svh, 28rem);
  overflow-y: auto;
  display: block;
}
.kopfzeile-mega__panel { padding-block: var(--space-md); }
.kopfzeile-mega__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-md) var(--space-lg);
}
.kopfzeile-mega__spalte { display: flex; flex-direction: column; gap: var(--space-3xs); }
.kopfzeile-mega__titel {
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-faint);
  letter-spacing: var(--tracking-wide);
}
.kopfzeile-mega__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  margin-block-start: var(--space-md);
  padding: var(--space-sm) var(--space-xs) 0;
  border-block-start: var(--border-w) solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.kopfzeile-mega__fuss p { margin: 0; max-width: none; }

.kopfzeile-kompakt .klappe { position: relative; }

.kopfzeile-kompakt--offen { min-block-size: min(22rem, 80svh); }
.kopfzeile-kompakt .hauptmenue .menue {
  width: min(24rem, calc(100cqw - 2 * var(--gutter)));
  max-width: none;
  
  inset-inline-start: auto;
  inset-inline-end: 0;
}
.kopfzeile-kompakt .hauptmenue .menue > a {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-xs);
}
.kopfzeile-kompakt .hauptmenue .menue a > .symbol { margin-block-start: var(--space-3xs); color: var(--ink-muted); }
.kopfzeile-kompakt__text { display: flex; flex-direction: column; }
.kopfzeile-kompakt__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block-start: var(--space-3xs);
  padding: var(--space-xs) var(--space-xs) var(--space-3xs);
  border-block-start: var(--border-w) solid var(--border-subtle);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}
.kopfzeile-kompakt__fuss > span { flex: 1; }
.kopfzeile-kompakt .hauptmenue .menue .kopfzeile-kompakt__fuss a {
  flex: none;
  width: auto;
  white-space: nowrap;
  padding: var(--space-3xs) var(--space-xs);
}

@container kopfzeile (max-width: 40rem) {
  .kopfzeile-kompakt .klappe { position: static; }
  .kopfzeile-kompakt .hauptmenue .menue {
    width: auto;
    inset-inline-start: var(--gutter);
    inset-inline-end: var(--gutter);
  }
}

.kopfzeile-kompakt { inline-size: 100%; }
.kopfzeile-mega { inline-size: 100%; }

.kopfzeile-mega--offen .menue,
.kopfzeile-kompakt--offen .menue { z-index: var(--z-ueber); }

.kopfzeile-schwebend {
  position: sticky;
  inset-block-start: var(--space-sm);
  z-index: var(--z-leiste);
  margin-block-start: var(--space-sm);
  inline-size: 100%;
  container-type: inline-size;
  container-name: kopfzeile;
}
.kopfzeile-schwebend__leiste {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md);
  background: var(--surface-raised);
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: var(--r-md);
}
.kopfzeile-schwebend__logo {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}
.kopfzeile-schwebend__logo svg { height: var(--space-md); width: auto; display: block; }
.kopfzeile-schwebend__menue {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.kopfzeile-schwebend .hauptmenue { background: none; padding: 0; flex-wrap: wrap; }
.kopfzeile-schwebend__burger { display: none; margin-inline-start: auto; }

@container kopfzeile (max-width: 48rem) {
  .kopfzeile-schwebend__burger { display: inline-flex; }
  .kopfzeile-schwebend__menue {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2xs));
    inset-inline: 0;
    z-index: var(--z-aufgeklappt);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: var(--space-2xs);
    background: var(--surface-overlay);
    border: var(--border-w-stark) solid var(--border-strong);
    border-radius: var(--r-md);
  }
  
  .kopfzeile-schwebend:has(.kopfzeile-schwebend__burger[aria-expanded="false"]) .kopfzeile-schwebend__menue { display: none; }
  .kopfzeile-schwebend .hauptmenue { flex-direction: column; align-items: stretch; }
  .kopfzeile-schwebend .hauptmenue__link { min-height: var(--ctl-h); }
  .kopfzeile-schwebend .klappe { display: block; }
  .kopfzeile-schwebend .klappe > summary { justify-content: space-between; min-height: var(--ctl-h); }
  .kopfzeile-schwebend .klappe .menue {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    margin-block-start: var(--space-3xs);
    background: none;
    border: 0;
    padding: 0 0 0 var(--space-xs);
  }
  .kopfzeile-schwebend__menue > .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .kopfzeile-schwebend * { transition: none; }
}

.klappe { position: relative; display: inline-block; }

.klappe[open] { z-index: var(--z-aufgeklappt); }
.klappe > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  list-style: none;
  cursor: pointer;
  min-height: var(--ctl-h-sm);
  padding-inline: var(--space-sm);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-muted);
}
.klappe > summary::-webkit-details-marker { display: none; }
.klappe > summary:hover,
.klappe[open] > summary { color: var(--ink); background: var(--surface-state); }
.klappe > summary .symbol--pfeil {
  transition: transform var(--t-fast) var(--ease);
}
.klappe[open] > summary .symbol--pfeil { transform: rotate(180deg); }

.menue {
  position: absolute;
  top: calc(100% + var(--space-2xs));
  inset-inline-start: 0;
  z-index: var(--z-aufgeklappt);
  min-width: min(var(--menu-w), calc(100vw - 2 * var(--gutter)));
  max-width: calc(100vw - 2 * var(--gutter));
  
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-2xs);
  
  background: var(--surface-overlay);
  border: var(--border-w-stark) solid var(--border-strong);
  border-radius: var(--r-md);
}

@media (max-width: 559px) {
  .menue { inset-inline-start: auto; inset-inline-end: 0; }
}

.menue button:not(.modusschalter),
.menue a {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--ctl-h-sm);
  padding: var(--space-2xs) var(--space-xs);
  text-align: start;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.menue button:not(.modusschalter):hover,

.menue a:hover { background: var(--surface-state); }

.menue :is(button, a) .symbol { color: var(--ink-faint); }

.menue__trenner {
  border: 0;
  height: var(--border-w);
  background: var(--border-subtle);
  margin: var(--space-3xs) var(--space-2xs);
}

.menue :is(button, a).menue__gefahr,
.menue :is(button, a).menue__gefahr .symbol { color: var(--state-fail); }

.pfad {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}
.pfad a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--ink-muted);
  text-decoration: none;
}
.pfad a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
.pfad__pfeil { color: var(--ink-faint); }

.pfad [aria-current] { color: var(--ink); }

.seitenwahl {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  flex-wrap: wrap;
}

.seitenwahl a,
.seitenwahl button {
  min-width: var(--ctl-h-sm);
  min-height: var(--ctl-h-sm);
  display: grid;
  place-items: center;
  padding-inline: var(--space-3xs);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  text-decoration: none;
  cursor: pointer;
  transition-property: background-color, color;
  transition-duration: var(--t-fast);
  transition-timing-function: var(--ease);
}
.seitenwahl :is(a, button):hover:not([aria-current]) {
  color: var(--ink);
  background: var(--surface-state);
}

.seitenwahl :is(a, button)[aria-current] {
  color: var(--ink);
  background: var(--accent-soft);
  font-weight: var(--fw-semibold);
}
.seitenwahl :is(a, button)[disabled] { opacity: .35; cursor: not-allowed; }
.seitenwahl > span { color: var(--ink-faint); padding-inline: var(--space-2xs); }

.hauptmenue,

.menueleiste {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs);
  background: var(--surface-raised);
  border-radius: var(--r-md);
}

[data-ausweich]:not([data-ausweich-bereit]) { flex-wrap: wrap; }

.hauptmenue__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--ctl-h-sm);
  padding-inline: var(--space-sm);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-muted);
  text-decoration: none;
}
.hauptmenue__link:hover { color: var(--ink); background: var(--surface-state); }
.hauptmenue__link[aria-current] { color: var(--ink); }
.hauptmenue .menue { width: var(--panel-w); }
.hauptmenue .menue a {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: var(--space-xs);
}
.hauptmenue .menue b { font-size: var(--text-sm); color: var(--ink); }
.hauptmenue .menue span {
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  line-height: var(--leading-snug);
  color: var(--ink-muted);
}

.klappmenue--flaeche { position: relative; display: block; width: min(25rem, 100%); }
.klappmenue--flaeche > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  min-height: var(--space-4xl);
  list-style: none;
  cursor: pointer;
  user-select: none;
  border: var(--border-w-stark) dashed var(--border-subtle);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-muted);
}
.klappmenue--flaeche > summary::-webkit-details-marker { display: none; }
.klappmenue--flaeche > summary:hover { color: var(--ink); border-color: var(--accent); }
.klappmenue--flaeche[open] > summary { border-color: var(--accent); }

.klappmenue--flaeche > .menue { top: var(--y, 60%); left: var(--x, var(--space-lg)); }

.suchfenster { width: min(68rem, 94vw); height: min(44rem, 86vh); padding: 0; border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-lg); background: var(--surface-raised); color: var(--ink); overflow: hidden; }
.suchfenster[open] { display: grid; grid-template-rows: auto auto 1fr auto; }

.suchfenster--im-fluss { display: grid; grid-template-rows: auto auto 1fr auto; width: 100%; height: 28rem; }
.suchfenster::backdrop { background: color-mix(in oklab, var(--surface-base) 55%, transparent); }
.suchfenster__kopf { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: var(--border-w) solid var(--border-subtle); color: var(--ink-muted); }
.suchfenster__kopf input { flex: 1; border: 0; background: none; font: inherit; font-size: var(--text-lg); color: var(--ink); outline: none; min-width: 0; }

.suchfenster__kopf input::-webkit-search-cancel-button { appearance: none; }
.suchfenster__weg { display: inline-grid; place-items: center; flex: none; inline-size: var(--space-lg); block-size: var(--space-lg); padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-faint); cursor: pointer; }
.suchfenster__weg[hidden] { display: none; }
.suchfenster__weg:hover, button.suchfenster__taste:hover { color: var(--ink); background: var(--surface-state); }
button.suchfenster__taste { background: none; cursor: pointer; line-height: inherit; }
.suchfenster kbd, .suchfenster__taste { font: inherit; font-size: var(--text-xs); color: var(--ink-faint); border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-xs); padding: 0 .35em; margin-inline-end: 2px; }
.suchfenster__filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs) var(--space-2xs); padding: var(--space-xs) var(--space-md); border-bottom: var(--border-w) solid var(--border-subtle); }
.suchfenster__filter .wahlchip { font-size: var(--text-xs); }

.suchfenster__rechts { margin-inline-start: auto; }
.suchfenster__filter .wahlchip .symbol { margin-inline-end: 3px; }
.suchfenster__filtername { font-size: var(--text-xs); color: var(--ink-faint); margin-inline: var(--space-xs) 2px; }
.suchfenster__filtername:first-child { margin-inline-start: 0; }
.suchfenster__rumpf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.suchfenster__liste { overflow-y: auto; padding: var(--space-2xs); border-inline-end: var(--border-w) solid var(--border-subtle); }
.suchfenster__gruppe { margin: var(--space-xs) var(--space-xs) var(--space-3xs); font-size: var(--text-xs); color: var(--ink-faint); }
.suchfenster__treffer { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-xs); align-items: center; width: 100%; text-align: start; padding: var(--space-2xs) var(--space-xs); border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: inherit; cursor: pointer; }
.suchfenster__treffer[aria-selected="true"] { background: color-mix(in oklab, var(--ink) 8%, transparent); }
.suchfenster__titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suchfenster__pfad { grid-column: 2; font-size: var(--text-xs); color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suchfenster__leer { padding: var(--space-md); color: var(--ink-muted); }
.suchfenster__vorschau { overflow-y: auto; padding: var(--space-md) var(--space-lg); display: grid; align-content: start; gap: var(--space-sm); }
.suchfenster__art { margin: 0; display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-xs); color: var(--ink-faint); }
.suchfenster__vtitel { margin: 0; font-size: var(--text-xl); }
.suchfenster__angaben { margin: 0; display: grid; gap: var(--space-3xs); font-size: var(--text-sm); }
.suchfenster__angaben .eigenschaft { display: grid; grid-template-columns: 10rem 1fr; gap: var(--space-xs); }
.suchfenster__angaben dt { display: flex; align-items: center; gap: var(--space-3xs); color: var(--ink-faint); }
.suchfenster__angaben dd { margin: 0; min-width: 0; }
.suchfenster__text { font-size: var(--text-sm); border-top: var(--border-w) solid var(--border-subtle); padding-top: var(--space-sm); }

.suchfenster mark { padding-inline: var(--space-3xs); margin-inline: calc(-1 * var(--space-3xs)); }
.suchfenster__text p { margin: 0; }
.suchfenster__vorschau .marke { vertical-align: middle; }
.suchfenster__oeffnen { margin: 0; }
.suchfenster__fuss { display: flex; gap: var(--space-md); padding: var(--space-2xs) var(--space-md); border-top: var(--border-w) solid var(--border-subtle); font-size: var(--text-xs); color: var(--ink-faint); }

@media (max-width: 900px) { .suchfenster__rumpf { grid-template-columns: 1fr; } .suchfenster__vorschau { display: none; } }

.suchfenster--kompakt { width: 100%; max-width: 26rem; height: auto; grid-template-rows: auto auto; }
.suchfenster--kompakt .suchfenster__rumpf { grid-template-columns: minmax(0, 1fr); }
.suchfenster--kompakt .suchfenster__liste { max-height: 16rem; border-inline-end: 0; }

.suchfenster__treffer:has(> kbd) { grid-template-columns: auto minmax(0, 1fr) auto; }
.suchfenster__treffer > kbd { grid-column: 3; grid-row: 1; }
@media (hover: none) or (pointer: coarse) {
  .suchfenster__treffer > kbd { display: none; }
}

.seitenleiste {
  display: flex;
  width: min(32rem, 100%);
  min-height: 14rem;
  border-radius: var(--r-md);
  overflow: hidden;
}
.seitenleiste__spalte {
  width: 11rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-2xs);
  background: var(--surface-raised);
  border-inline-end: var(--border-w) solid var(--border-subtle);
  transition: width var(--t-base) var(--ease);
}
.seitenleiste__spalte a {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--ctl-h-sm);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.seitenleiste__spalte a:hover { color: var(--ink); background: var(--surface-state); }

.seitenleiste__spalte a[aria-current] {
  
  color: var(--ink);
  font-weight: var(--fw-medium);
  background: var(--accent-soft);
}
.seitenleiste__spalte a[aria-current] .symbol { color: var(--accent); }
.seitenleiste__schalter {
  align-self: flex-end;
  width: var(--ctl-h-sm);
  height: var(--ctl-h-sm);
  margin-bottom: var(--space-3xs);
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  background: none;
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.seitenleiste__schalter:hover { color: var(--ink); border-color: var(--border-strong); }

.seitenleiste__inhalt { flex: 1; min-width: 0; padding: var(--space-md); }
.seitenleiste__inhalt p { max-width: none; }
.seitenleiste--schmal .seitenleiste__spalte,
.seitenleiste:has(.seitenleiste__kaestchen:checked) .seitenleiste__spalte {
  width: calc(var(--ctl-h-sm) + var(--space-md));
}
.seitenleiste--schmal .seitenleiste__spalte a span,
.seitenleiste:has(.seitenleiste__kaestchen:checked) .seitenleiste__spalte a span { display: none; }
.seitenleiste--schmal .seitenleiste__schalter,
.seitenleiste:has(.seitenleiste__kaestchen:checked) .seitenleiste__schalter { align-self: center; }

.seitenleiste--schmal .seitenleiste__spalte a,
.seitenleiste:has(.seitenleiste__kaestchen:checked) .seitenleiste__spalte a { justify-content: center; padding-inline: 0; }

.seitenleiste__spalte a > small {
  margin-inline-start: auto;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.seitenleiste[data-zaehler="aus"] .seitenleiste__spalte a > small,
.seitenleiste--schmal .seitenleiste__spalte a > small,
.seitenleiste:has(.seitenleiste__kaestchen:checked) .seitenleiste__spalte a > small { display: none; }

.seitenleiste--app { width: 100%; border-radius: 0; overflow: visible; }
body > .seitenleiste--app { min-height: 100dvh; }
.seitenleiste--app > .seitenleiste__spalte {
  display: flex; flex-direction: column; width: var(--leiste-b, var(--leiste-w)); padding: var(--space-sm);
}
body > .seitenleiste--app > .seitenleiste__spalte { position: sticky; top: 0; align-self: flex-start; height: 100dvh; overflow-y: auto; }
.seitenleiste--app > .seitenleiste__inhalt { padding: 0; }
.seitenleiste--app .seitenleiste__spalte a small { margin-inline-start: auto; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.leiste-kopf { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-xs) var(--space-sm); }
.leiste-marke { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--ink); text-decoration: none; border-radius: var(--r-sm); }
.leiste-marke > svg, .leiste-marke > img { width: var(--ctl-h-sm); height: var(--ctl-h-sm); flex: none; }
.leiste-marke b { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.leiste-marke:focus-visible { outline: var(--border-w-stark) solid var(--focus); outline-offset: calc(-1 * var(--border-w-stark)); }

.leiste-suche {
  display: flex; align-items: center; gap: var(--space-xs); width: 100%; min-height: var(--ctl-h-sm);
  margin-block-end: var(--space-sm); padding: 0 var(--space-xs); border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-sm); background: var(--surface-raised); color: var(--ink-faint); font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.leiste-suche kbd { margin-inline-start: auto; font-family: var(--font-data); font-size: var(--text-2xs); }
.leiste-suche:hover { border-color: var(--border-strong); color: var(--ink-muted); }
.leiste-suche:focus-visible { outline: var(--border-w-stark) solid var(--focus); outline-offset: calc(-1 * var(--border-w-stark)); }
@media (hover: none), (pointer: coarse) { .leiste-suche kbd { display: none; } }

.leiste-gruppe { margin: var(--space-md) var(--space-xs) var(--space-2xs); }
.leiste-fuss { margin-top: auto; padding-top: var(--space-md); display: grid; gap: var(--space-3xs); font-size: var(--text-xs); color: var(--ink-faint); }
.leiste-quelle { display: flex; align-items: center; gap: var(--space-xs); margin: var(--space-xs) var(--space-xs) var(--space-2xs); font-size: var(--text-xs); color: var(--ink-faint); }
.leiste-quelle span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leiste-fuss .modusschalter { margin-inline-start: var(--space-xs); }

.leiste-version { display: block; margin: 0 var(--space-xs) var(--space-2xs); font-size: var(--text-xs); color: var(--ink-faint); text-decoration: none; border-radius: var(--r-xs); }
.leiste-version:hover { color: var(--ink-muted); text-decoration: underline; }
.leiste-version:focus-visible { outline: var(--border-w-stark) solid var(--focus); outline-offset: calc(var(--border-w) * -2); }

.arbeitsflaeche { width: 100%; max-width: calc(2 * var(--wrap)); margin-inline: auto; padding: var(--space-lg) var(--gutter) var(--space-4xl); display: grid; gap: var(--space-lg); align-content: start; }
.arbeitsflaeche > * { min-width: 0; }

:root[data-blatt-offen] .arbeitsflaeche:not(body:has(> dialog.angedockt[open], :not(.splitansicht) > dialog.angedockt[open]) main *) { padding-inline-end: calc(var(--dock-w) + var(--gutter)); }

.seitenleiste--app > .bodenleiste { display: none; position: fixed; inset: auto 0 0 0; z-index: var(--z-blatt); padding-bottom: env(safe-area-inset-bottom, 0px); }

@media (max-width: 720px) {
  :root[data-blatt-offen] .arbeitsflaeche { padding-inline-end: var(--gutter); }
  .seitenleiste--app > .bodenleiste { display: block; }
  .seitenleiste--app > .seitenleiste__spalte { display: none; }
  .seitenleiste--app > .seitenleiste__inhalt { padding-bottom: calc(var(--ctl-h-lg) + var(--space-xl)); }
  body:has(> .seitenleiste--app) .zuruf { inset-block-end: calc(var(--ctl-h-lg) + var(--space-lg) + env(safe-area-inset-bottom, 0px)); }
}

:is(.seitenleiste--schmal, .seitenleiste:has(.seitenleiste__kaestchen:checked)).seitenleiste--app :is(.leiste-kopf b, .leiste-suche, .leiste-gruppe, .leiste-fuss) { display: none; }

@media print { .seitenleiste--app > :is(.seitenleiste__spalte, .bodenleiste), .seitenleiste--app :is(.kopfleiste, .meldung) { display: none !important; } }

.seitenkopf { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; min-height: var(--ctl-h); }
.seitenkopf__titel { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.seitenkopf__rechts { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

@media (max-width: 720px) { .seitenkopf__titel { font-size: var(--text-xl); } }

.seitenplatzhalter { display: grid; gap: var(--space-sm); }
.seitenplatzhalter > .platzhalter { display: block; height: var(--row-h); }
.seitenplatzhalter__titel.platzhalter { width: 40%; height: var(--ctl-h); margin-block-end: var(--space-md); }
.seitenplatzhalter__zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin-block-end: var(--space-md); }
.seitenplatzhalter__zahlen .platzhalter { display: block; height: var(--ctl-h-lg); }

.seitenleiste__spalte { transition: width var(--t-base) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .seitenleiste__spalte { transition: none; }
}

.seitenleiste__schalter:has(.seitenleiste__kaestchen:focus-visible) {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(var(--border-w) * -2);
}

.klappmenue--profil > summary {
  gap: var(--space-xs);
  min-height: var(--ctl-h);
  padding: var(--space-3xs) var(--space-sm) var(--space-3xs) var(--space-3xs);
  border: var(--border-w) solid var(--border-subtle);
  
  border-radius: var(--r-sm);
  color: var(--ink);
  font-weight: var(--fw-bold);
}
.klappmenue--profil > summary:hover,
.klappmenue--profil[open] > summary { background: none; border-color: var(--accent); }
.klappmenue--profil > .menue { inset-inline-start: 0; inset-inline-end: auto; min-width: 16rem; }

.klappmenue--rechts > .menue { inset-inline-start: auto; inset-inline-end: 0; }
.klappmenue__bild {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--space-xl);
  height: var(--space-xl);
  
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: var(--border-w) solid var(--accent);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-normal);
}
.klappmenue__kopf {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
}
.klappmenue__kopf .klappmenue__bild { width: var(--space-2xl); height: var(--space-2xl); font-size: var(--text-sm); }
.klappmenue__kopf b { display: block; font-size: var(--text-sm); color: var(--ink); }
.klappmenue__kopf span { font-size: var(--text-xs); color: var(--ink-muted); }

.werkzeugleiste {
  display: inline-flex;
  gap: var(--space-3xs);
  padding: var(--space-3xs);
  background: var(--surface-raised);
  border-radius: var(--r-md);
}
.werkzeugleiste button {
  display: inline-flex;
  align-items: center;
  min-height: var(--ctl-h-sm);
  padding-inline: var(--space-xs);
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-muted);
  background: none;
  cursor: pointer;
  transition-property: background-color, color;
  transition-duration: var(--t-base);
  transition-timing-function: var(--ease);
}
.werkzeugleiste button:hover { color: var(--ink); }
.werkzeugleiste button span {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition-property: max-width, opacity, margin-inline-start;
  transition-duration: var(--t-slow), var(--t-base), var(--t-base);
  transition-timing-function: var(--ease);
}

.werkzeugleiste button[aria-pressed="true"] {
  
  color: var(--ink);
  font-weight: var(--fw-medium);
  background: var(--accent-soft);
}
.werkzeugleiste button[aria-pressed="true"] span {
  max-width: 8rem;
  opacity: 1;
  margin-inline-start: var(--space-2xs);
}

@media (prefers-reduced-motion: reduce) {
  .klappe > summary .symbol--pfeil,
  .seitenleiste__spalte,
  .seitenwahl button,
  .werkzeugleiste button,
  .werkzeugleiste button span { transition: none; }
  .klappe[open] > summary .symbol--pfeil { transform: none; }
  .werkzeugleiste button[aria-pressed="true"] span {
    max-width: 8rem;
    opacity: 1;
    margin-inline-start: var(--space-2xs);
  }
}

@media (max-width: 560px) {
  .menueleiste { flex-wrap: wrap; }
  .menueleiste .klappe { position: static; }
  .menueleiste .menue {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: var(--space-2xs);
    box-shadow: none;
  }
}

.fussbereich {
  width: 100%;
  border-block-start: var(--border-w) solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  
  container-type: inline-size;
  container-name: fuss;
}
.fussbereich__innen {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block-start: var(--space-2xl);
}

.fussbereich--landingpage .fussbereich__innen { padding-block-start: var(--space-lg); }

.fussbereich--flaeche { background: var(--surface-raised); }

.fussbereich__raster {
  display: grid;
  grid-template-columns: minmax(14rem, 1.4fr) repeat(3, minmax(9rem, 1fr));
  gap: var(--space-xl);
  padding-block-end: var(--space-2xl);
}

@container fuss (max-width: 900px) {
  .fussbereich__raster { grid-template-columns: repeat(2, minmax(9rem, 1fr)); }
  .fussbereich__marke { grid-column: 1 / -1; }
}
@container fuss (max-width: 560px) {
  .fussbereich__raster { grid-template-columns: 1fr; }
}

.fussbereich__logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-block-end: var(--space-sm);
  color: var(--ink);
  text-decoration: none;
}
.fussbereich__logo:hover { text-decoration: none; }
.fussbereich__zeichen {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.fussbereich__name {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.fussbereich__marke p {
  margin: 0;
  max-width: 24rem;
  line-height: var(--leading-normal);
}
.fussbereich__sozial {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin-block-start: var(--space-md);
}

.fussbereich__spalte > b {
  display: block;
  margin-block-end: var(--space-sm);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.fussbereich ul { margin: 0; padding: 0; list-style: none; }
.fussbereich__spalte li + li { margin-block-start: var(--space-2xs); }

.fussbereich a:not(.btn) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding-block: var(--space-3xs);
  color: var(--ink-muted);
  text-decoration: none;
}
.fussbereich a:not(.btn):hover { color: var(--ink); text-decoration: underline; }

@media (pointer: coarse) {
  .fussbereich a:not(.btn),
  .fussbereich__knopflink { min-height: var(--tap-min); }
  .fussbereich__knopflink { display: inline-flex; align-items: center; }
  .fussbereich__spalte li + li { margin-block-start: 0; }
}

.fussbereich__pflicht {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  padding-block: var(--space-md) var(--space-xl);
  border-block-start: var(--border-w) solid var(--border-subtle);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.fussbereich--landingpage .fussbereich__pflicht { border-block-start: 0; }

.fussbereich__pflicht small { font-size: var(--text-xs); }
.fussbereich__pflicht ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
}
.fussbereich__pflicht a { font-size: var(--text-xs); }

.fussbereich__knopflink {
  padding: var(--space-3xs) 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--ink-faint);
  cursor: pointer;
}
.fussbereich__knopflink:hover { color: var(--ink); text-decoration: underline; }

.bodenleiste__ausschnitt {
  width: 100%;
  max-width: 22rem;
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
}
.bodenleiste__platzhalter {
  margin: 0;
  min-height: 6rem;
  padding: var(--space-md);
  color: var(--ink-faint);
  font-size: var(--text-sm);
}

.bodenleiste {
  
  --bl-ueberstand: var(--space-xs);
  
  --bl-innen: var(--space-3xs);
  
  --bl-platte: var(--ctl-h-sm);
  
  --bl-kopf: max(
    calc(var(--bl-ueberstand) + var(--bl-innen)),
    calc(var(--bl-platte) - var(--bl-ueberstand) - var(--bl-innen)
         - var(--icon) - var(--space-3xs)));

  background: var(--surface-raised);
  border-block-start: var(--border-w) solid var(--border-subtle);
}

.bodenleiste__leiste {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding-block-start: var(--bl-kopf);
}

.bodenleiste__eintrag {
  
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-3xs);
  min-height: var(--tap-min);
  padding-block: var(--bl-innen);
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--t-sofort) var(--ease);
}
.bodenleiste__eintrag:hover,
.bodenleiste__eintrag[aria-current]:not([aria-current="false"]) { color: var(--ink); }

.bodenleiste__eintrag .symbol {
  transition: color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.bodenleiste__wort {
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

.bodenleiste__eintrag[aria-current]:not([aria-current="false"]) .bodenleiste__wort {
  font-weight: var(--fw-semibold);
}

.bodenleiste__eintrag:focus-visible {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(-1 * var(--border-w-stark));
  border-radius: var(--r-sm);
}

.bodenleiste__eintrag[aria-current]:not([aria-current="false"])::before {
  content: "";
  position: absolute;
  z-index: var(--z-unter);
  inset-inline-start: 50%;
  inset-block-start: calc(-1 * (var(--bl-kopf) + var(--bl-ueberstand)));
  transform: translate(-50%);
  width: var(--bl-platte);
  height: var(--bl-platte);
  border-radius: var(--r-sm);
  
  background: linear-gradient(to bottom, var(--accent-lift), var(--accent));
  pointer-events: none;
}

.bodenleiste__eintrag[aria-current]:not([aria-current="false"]) .symbol {
  transform: translate(0, calc(
    var(--bl-platte) / 2 - var(--bl-ueberstand)
    - var(--bl-kopf) - var(--bl-innen) - var(--icon) / 2));
  color: var(--accent-ink);
}

@media (prefers-reduced-motion: reduce) {
  .bodenleiste__eintrag .symbol { transition-duration: 1ms; }
}

.inhaltsverzeichnis {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.inhaltsverzeichnis__titel {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-extrabold);
  text-wrap: balance;
  margin: 0 0 var(--space-md);
}
.inhaltsverzeichnis ol { list-style: none; margin: 0; padding: 0; }
.inhaltsverzeichnis > ol > li + li { margin-top: var(--space-2xs); }
.inhaltsverzeichnis details ol { padding-inline-start: var(--space-lg); }
.inhaltsverzeichnis a,
.inhaltsverzeichnis summary {
  display: flex;
  gap: var(--space-2xs);
  align-items: baseline;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--r-xs);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  text-decoration: none;
}
.inhaltsverzeichnis summary { cursor: pointer; list-style: none; }
.inhaltsverzeichnis summary::-webkit-details-marker { display: none; }
.inhaltsverzeichnis summary::before {
  content: '›';
  display: inline-block;
  width: 1em;
  transition: transform var(--t-fast) var(--ease);
}
.inhaltsverzeichnis details[open] > summary::before { transform: rotate(90deg); }

.inhaltsverzeichnis ol:has(> li > details) > li > a::before {
  content: '';
  flex: none;
  width: 1em;
}
.inhaltsverzeichnis__gruppe > a { font-weight: var(--fw-bold); color: var(--ink); }
.inhaltsverzeichnis a:hover,
.inhaltsverzeichnis summary:hover { color: var(--ink); background: var(--surface-state); }

.inhaltsverzeichnis a[aria-current]:not([aria-current="false"]) {
  color: var(--ink);
  background: var(--accent-soft);
  font-weight: var(--fw-medium);
}
.inhaltsverzeichnis__nr {
  min-width: 2.2em;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
@media (prefers-reduced-motion: reduce) {
  .inhaltsverzeichnis summary::before { transition-duration: 1ms; }
}

.inhaltsverzeichnis-ansicht {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: start;
}
.inhaltsverzeichnis-ansicht > .inhaltsverzeichnis { flex: 1 1 12rem; max-block-size: 24rem; }

.inhaltsverzeichnis-rahmen { display: grid; inline-size: 100%; min-width: 0; }

.inhaltsverzeichnis-ansicht__leiste {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-block-end: var(--space-xs);
  border-bottom: var(--border-w) solid var(--border-subtle);
}
.inhaltsverzeichnis-ansicht__marke { font-family: var(--font-display); font-size: var(--text-md); }
.inhaltsverzeichnis-ansicht > .inhaltsverzeichnis[hidden] { display: none; }

.inhaltsverzeichnis-rahmen:has(.inhaltsverzeichnis[hidden]) > * {
  inline-size: calc(100% - 12rem - var(--space-lg));
  min-inline-size: min(100%, 18rem);
  justify-self: center;
}
.inhaltsverzeichnis-ansicht__text {
  flex: 999 1 18rem;
  min-width: 0;
  max-block-size: 24rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

:has(> .fliessmenue) { inline-size: 100%; }
.fliessmenue { inline-size: 100%; padding: 0; margin: 0; list-style: none; border-block: var(--border-w) solid var(--border-subtle); }
.fliessmenue__eintrag { position: relative; overflow: hidden; border-top: var(--border-w) solid var(--border-subtle); }
.fliessmenue__eintrag:first-child { border-top: 0; }
.fliessmenue__link {
  position: relative; display: flex; align-items: center; justify-content: center; gap: var(--space-md);
  padding-block: var(--space-xl); min-block-size: calc(var(--space-4xl) + var(--space-md));
  font-size: var(--text-3xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight);
  color: var(--ink); text-decoration: none; text-align: center;
}
.fliessmenue__link:focus-visible { outline: none; }
.fliessmenue__eintrag:has(.fliessmenue__link:focus-visible) { outline: calc(var(--border-w) * 2) solid var(--focus); outline-offset: calc(var(--border-w) * -2); }

.fliessmenue__band, .fliessmenue__innen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fliessmenue__band { background: var(--ink); color: var(--surface-base); }
.fliessmenue__innen { display: flex; align-items: center; }
.fliessmenue__lauf { display: flex; inline-size: max-content; align-items: center; }
.fliessmenue__teil { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-xl); padding-inline: var(--space-md) var(--space-xl); white-space: nowrap; }
.fliessmenue__teil > span { font-size: var(--text-2xl); font-weight: var(--fw-regular); line-height: 1; }
.fliessmenue__teil .fliessmenue__fakt { font-size: var(--text-lg); }
.fliessmenue__zeichen { inline-size: var(--space-xl); block-size: var(--space-xl); flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.fliessmenue:not([data-bereit]) .fliessmenue__band { display: none; }
.fliessmenue__eintrag .fliessmenue__band { transform: translateY(101%); }
.fliessmenue__eintrag .fliessmenue__innen { transform: translateY(-101%); }
.fliessmenue__eintrag[data-kante="oben"] .fliessmenue__band { transform: translateY(-101%); }
.fliessmenue__eintrag[data-kante="oben"] .fliessmenue__innen { transform: translateY(101%); }
.fliessmenue__eintrag[data-offen] .fliessmenue__band, .fliessmenue__eintrag[data-offen] .fliessmenue__innen { transform: translateY(0); }

@media (prefers-reduced-motion: no-preference) {
  .fliessmenue__band, .fliessmenue__innen { transition: transform var(--t-slow) var(--ease); }
  .fliessmenue__eintrag[data-ohne] .fliessmenue__band, .fliessmenue__eintrag[data-ohne] .fliessmenue__innen { transition: none; }
  
  .fliessmenue__lauf { animation: fliessmenue-lauf calc(var(--t-lang) * 12) linear infinite; }
  .fliessmenue:not([data-im-bild]) .fliessmenue__lauf { animation-play-state: paused; }
}
@keyframes fliessmenue-lauf { to { transform: translateX(calc(-100% / var(--n, 4))); } }

.preisvergleich {
  display: grid;
  gap: var(--space-xl);
  container-type: inline-size;
}
.preisvergleich__kopf {
  display: grid;
  gap: var(--space-sm);
  max-inline-size: var(--wrap-text);
}
.preisvergleich__kopf > * { margin: 0; }

.preisvergleich__vergleich > summary { display: inline-grid; grid-template-columns: auto auto; align-items: center; inline-size: fit-content; }
.preisvergleich__inhalt { margin-block-start: var(--space-lg); }

.preisvergleich__vergleich > summary { list-style: none; cursor: pointer; }
.preisvergleich__vergleich > summary::-webkit-details-marker { display: none; }
.preisvergleich__vergleich > summary .symbol--pfeil { transition: rotate var(--t-fast) var(--ease); }
.preisvergleich__vergleich[open] > summary .symbol--pfeil { rotate: 180deg; }

.preisvergleich__auf, .preisvergleich__zu { grid-area: 1 / 1; }
.preisvergleich__vergleich > summary .symbol--pfeil { grid-column: 2; }
.preisvergleich__zu { visibility: hidden; }
.preisvergleich__vergleich[open] > summary .preisvergleich__zu { visibility: visible; }
.preisvergleich__vergleich[open] > summary .preisvergleich__auf { visibility: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .preisvergleich__vergleich[open] > .preisvergleich__inhalt { animation: preisvergleich-ein var(--t-base) var(--ease) both; }
}
@keyframes preisvergleich-ein {
  from { opacity: 0; translate: 0 calc(-1 * var(--space-xs)); }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .preisvergleich__vergleich > summary .symbol--pfeil { transition: none; }
}

.preisvergleich__tabelle { font-size: var(--text-sm); }
.preisvergleich__tabelle thead th {
  padding-block: var(--space-sm);
  font-size: var(--text-sm);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  text-align: center;
  vertical-align: bottom;
}
.preisvergleich__tabelle thead th:first-child { text-align: start; }
.preisvergleich__tabelle tbody th {
  padding: var(--space-xs);
  border-bottom: var(--border-w) solid var(--border-subtle);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  color: var(--ink);
}
.preisvergleich__tabelle td { text-align: center; vertical-align: middle; color: var(--ink); }
.preisvergleich__tabelle tbody td:first-child { font-weight: var(--fw-regular); }

.preisvergleich__tabelle .preisvergleich__empf { background: var(--accent-soft); color: var(--ink); }
.preisvergleich__tabelle td.preisvergleich__empf { background: color-mix(in oklab, var(--accent-soft) 35%, transparent); }
.preisvergleich__marke {
  display: block;
  margin-block-end: var(--space-3xs);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.preisvergleich__tabelle .preisvergleich__gruppe th {
  padding: var(--space-md) var(--space-xs) var(--space-3xs);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: var(--border-w) solid var(--border-strong);
}

.preisvergleich__ja, .preisvergleich__nein { display: block; margin-inline: auto; }
.preisvergleich__ja { color: var(--accent); }
.preisvergleich__nein { color: var(--ink-faint); }

.preispaar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  container-type: inline-size;
}
.preispaar__kopf {
  display: grid;
  gap: var(--space-sm);
  max-inline-size: var(--wrap-text);
}
.preispaar__kopf > * { margin: 0; }

.preispaar__kopf { text-align: start; } 
.preispaar .preisstufen { grid-template-columns: minmax(0, 1fr); }
.preispaar .preisstufen__reihe {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  max-inline-size: 46rem;
  inline-size: 100%;
  margin-inline: auto;
}
.preispaar__fuss {
  margin: 0;
  max-inline-size: none;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  text-align: start;
}

.preiskopf {
  display: grid;
  gap: var(--space-xl);
  container-type: inline-size;
}
.preiskopf__kopf {
  display: grid;
  gap: var(--space-sm);
  max-inline-size: var(--wrap-text);
}
.preiskopf__kopf > * { margin: 0; }

.preiskopf__titelblock {
  display: grid;
  gap: var(--space-sm);
  max-inline-size: var(--wrap-text);
}

.preiskopf__kopf {
  display: grid;
  gap: var(--space-md);
  max-inline-size: none;
  margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) 0;
  padding: var(--space-lg);
  border-bottom: var(--border-w) solid var(--border-subtle);
  border-radius: calc(var(--r-md) - var(--border-w-stark)) calc(var(--r-md) - var(--border-w-stark)) 0 0;
}
.preiskopf__kopf > *, .preiskopf__titelblock > * { margin: 0; }
.preiskopf__kopf .preisstufe__vergleich { margin: 0; }
.preiskopf .preisstufe--empfohlen .preiskopf__kopf {
  background: var(--accent-soft);
  border-bottom-color: var(--accent);
}

.preiskopf .preisstufe--empfohlen .preiskopf__kopf .preisstufe__name,
.preiskopf .preisstufe--empfohlen .preiskopf__kopf .preisstufe__satz,
.preiskopf .preisstufe--empfohlen .preiskopf__kopf .preisstufe__einheit,
.preiskopf .preisstufe--empfohlen .preiskopf__kopf .preisstufe__waehrung,
.preiskopf .preisstufe--empfohlen .preiskopf__kopf .preisstufe__vergleich {
  color: var(--ink);
}

.preisseite {
  display: grid;
  gap: var(--space-3xl);
  container-type: inline-size;
}
.preisseite__teil { display: grid; gap: var(--space-xl); min-inline-size: 0; }
.preisseite__kopf {
  display: grid;
  gap: var(--space-sm);
  max-inline-size: var(--wrap-text);
}
.preisseite__kopf > * { margin: 0; }

.preisseite__kopf--mitte { text-align: start; } 
.preisseite__unter { font-size: var(--text-3xl); }

.preisseite__tabelle { font-size: var(--text-sm); }
.preisseite__tabelle thead th {
  padding-block: var(--space-sm);
  font-size: var(--text-sm);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  text-align: center;
  vertical-align: bottom;
}
.preisseite__tabelle thead th:first-child { text-align: start; }
.preisseite__tabelle thead th .preisseite__preis {
  display: block;
  margin-block-start: var(--space-3xs);
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
}
.preisseite__tabelle tbody th {
  padding: var(--space-xs);
  border-bottom: var(--border-w) solid var(--border-subtle);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  color: var(--ink);
}
.preisseite__tabelle td { text-align: center; vertical-align: middle; color: var(--ink); }
.preisseite__tabelle tbody td:first-child { font-weight: var(--fw-regular); }

.preisseite__tabelle .preisseite__empf { background: var(--accent-soft); color: var(--ink); }
.preisseite__tabelle .preisseite__empf .preisseite__preis { color: var(--ink); }
.preisseite__tabelle td.preisseite__empf { background: color-mix(in oklab, var(--accent-soft) 35%, transparent); }
.preisseite__marke {
  display: block;
  margin-block-end: var(--space-3xs);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.preisseite__tabelle .preisseite__gruppe th {
  padding: var(--space-md) var(--space-xs) var(--space-3xs);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: var(--border-w) solid var(--border-strong);
}

.preisseite__ja, .preisseite__nein { display: block; margin-inline: auto; }
.preisseite__ja { color: var(--accent); }
.preisseite__nein { color: var(--ink-faint); }

.preisseite__fragen { display: grid; gap: var(--space-xl); max-inline-size: var(--wrap-text); margin-inline: auto; inline-size: 100%; }
.preisseite__fragen > h3 { margin: 0; }
.preisseite__schluss {
  display: grid;
  justify-items: start;
  gap: var(--space-md);
  max-inline-size: var(--wrap-text);
}
.preisseite__schluss > * { margin: 0; }
.preisseite__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }

.preiskopf { inline-size: 100%; }
.preispaar { inline-size: 100%; }
.preisseite { inline-size: 100%; }
.preisvergleich { inline-size: 100%; }

.zeitstrahl {
  position: relative;
  
  --zeitstrahl-bahn: var(--space-xs);
  --zeitstrahl-punkt: var(--space-sm);
  padding-inline-start: var(--space-xl);
  
  view-timeline: --zeitstrahl block;
}

.zeitstrahl__spur {
  position: absolute;
  inset-inline-start: calc(var(--zeitstrahl-bahn) + var(--zeitstrahl-punkt) / 2 - 1px);
  top: var(--space-2xs);
  bottom: var(--space-2xs);
  width: var(--border-w-stark);
  overflow: hidden;
  background: var(--border-subtle);
}
.zeitstrahl__fuellung {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: top;
  scale: 1 1;
  animation: zeitstrahlFuellen linear both;
  animation-timeline: --zeitstrahl;
  animation-range: entry 70% exit 30%;
}
@keyframes zeitstrahlFuellen { from { scale: 1 0; } }

.zeitstrahl > ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.zeitstrahl li {
  position: relative;
  color: var(--ink-muted);
  animation: zeitstrahlErreicht steps(1) both;
  animation-timeline: --zeitstrahl;
}
@keyframes zeitstrahlErreicht { from { color: var(--ink-faint); } }

.zeitstrahl li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--zeitstrahl-bahn) - var(--space-xl));
  top: var(--space-2xs);
  width: var(--zeitstrahl-punkt);
  height: var(--zeitstrahl-punkt);
  border-radius: var(--r-pill);
  background: var(--accent);
  border: var(--border-w-stark) solid var(--accent);
  animation: zeitstrahlPunkt steps(1) both;
  animation-timeline: --zeitstrahl;
  animation-range: calc(var(--pos, 0) * 100%) calc(var(--pos, 0) * 100% + 0.5%);
}
@keyframes zeitstrahlPunkt {
  from { background-color: var(--surface-base); border-color: var(--border-strong); }
}

.zeitstrahl li b {
  display: block;
  font-size: var(--text-lg);
  color: var(--ink);
}
.zeitstrahl__wann {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .zeitstrahl__fuellung,
  .zeitstrahl li,
  .zeitstrahl li::before { animation-timeline: none; }
}

.linienzug {
  width: min(33rem, 100%);
  background: var(--surface-raised);
  border-radius: var(--r-md);
  overflow: hidden;
  view-timeline: --linienzug block;
}
.linienzug > svg { display: block; width: 100%; height: auto; }

.linienzug .strasse {
  fill: none;
  stroke: var(--surface-overlay);
  stroke-width: 14;
  stroke-linecap: round;
}
.linienzug .bahn {
  fill: none;
  stroke: var(--border-subtle);
  stroke-width: 3;
  stroke-dasharray: 10 6;
}
.linienzug .halt { fill: var(--border-strong); }
.linienzug text {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  fill: var(--ink);
}
.linienzug .klein { font-size: var(--text-2xs); font-weight: var(--fw-regular); fill: var(--ink-muted); }

.linienzug .weg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: linienzugZeichnen linear both;
  animation-timeline: --linienzug;
  animation-range: entry 60% cover 45%;
}
@keyframes linienzugZeichnen { from { stroke-dashoffset: 1; } }

.linienzug .marke {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  scale: 1;
  animation: linienzugMarke var(--ease) both;
  animation-timeline: --linienzug;
  animation-range: cover 45% cover 52%;
}
@keyframes linienzugMarke { from { scale: 0; } }

@media (prefers-reduced-motion: reduce) {
  .linienzug .weg, .linienzug .marke { animation-timeline: none; }
}

.reihenfolge { width: min(26rem, 100%); }
.reihenfolge > ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.reihenfolge li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-raised);
  border-radius: var(--r-md);
}
.reihenfolge li > b { flex: 1; font-weight: var(--fw-medium); }

.reihenfolge__platz {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--space-lg);
  height: var(--space-lg);
  border-radius: var(--r-sm);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--accent-ink);
  background: var(--accent);
}
.reihenfolge__knoepfe { display: flex; flex: none; gap: var(--space-3xs); }

.reihenfolge__knoepfe > button { flex: none; }

.reihenfolge__knoepfe > button[disabled] { opacity: .35; cursor: not-allowed; }

.wortaufgang { view-timeline: --wortaufgang block; }
.wortaufgang > p {
  margin: 0;
  max-width: var(--wrap-text);
  
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.wortaufgang__wort {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
}
.wortaufgang__wort > span {
  display: inline-block;
  translate: 0 0;
  animation: wortaufgangSteigen var(--ease) both;
  animation-timeline: --wortaufgang;
  
  animation-range: entry calc(55% + var(--i, 0) * 3%) entry calc(88% + var(--i, 0) * 3%);
}
@keyframes wortaufgangSteigen { from { translate: 0 105%; } }

.wortaufgang__wort:nth-child(1)  { --i: 0; }
.wortaufgang__wort:nth-child(2)  { --i: 1; }
.wortaufgang__wort:nth-child(3)  { --i: 2; }
.wortaufgang__wort:nth-child(4)  { --i: 3; }
.wortaufgang__wort:nth-child(5)  { --i: 4; }
.wortaufgang__wort:nth-child(6)  { --i: 5; }
.wortaufgang__wort:nth-child(7)  { --i: 6; }
.wortaufgang__wort:nth-child(8)  { --i: 7; }
.wortaufgang__wort:nth-child(9)  { --i: 8; }
.wortaufgang__wort:nth-child(10) { --i: 9; }
.wortaufgang__wort:nth-child(11) { --i: 10; }
.wortaufgang__wort:nth-child(12) { --i: 11; }

@media (prefers-reduced-motion: reduce) {
  .wortaufgang__wort > span { animation-timeline: none; }
}

.fussspur {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-raised);
  padding: var(--space-2xl) var(--space-xl);
  min-height: 14rem;
}

.fussspur__flaeche {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.fussspur > *:not(.fussspur__flaeche) { position: relative; z-index: var(--z-ueber); }

.fussspur__tritt {
  position: absolute;
  left: 0;
  top: 0;
  
  width: var(--space-xl);
  color: var(--accent);
  opacity: 0;
  translate: -50% -50%;
  transform: translate(var(--x), var(--y)) rotate(var(--dreh)) scaleX(var(--seite));
  
}
.fussspur__tritt svg { width: 100%; height: auto; fill: currentColor; }

.fussspur__tritt.ist-frisch {
  animation: fussspur-verblassen var(--t-lang) var(--ease) forwards;
}

@keyframes fussspur-verblassen {
  0%   { opacity: 0; }
  10%  { opacity: .72; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fussspur__flaeche { display: none; }
}

.einblenden { container-type: inline-size; inline-size: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
.einblenden__kopf { display: flex; flex-direction: column; gap: var(--space-lg); align-items: flex-start; max-width: var(--wrap-text); }
.einblenden__titel { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0; }
.einblenden__lead { font-size: var(--text-lg); color: var(--ink-muted); margin: 0; }
.einblenden__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.einblenden__zweispalt { display: grid; gap: var(--space-lg); }
.einblenden__h3 { font-size: var(--text-xl); margin: 0; }
.einblenden__liste { list-style: none; margin: 0; padding: 0; display: grid; }
.einblenden__liste > li { padding: var(--space-md) 0; border-block-start: var(--border-w) solid var(--border-subtle); display: grid; gap: var(--space-2xs); }
.einblenden__liste > li:last-child { border-block-end: var(--border-w) solid var(--border-subtle); }
.einblenden__liste strong { font-weight: var(--fw-semibold); }
.einblenden__liste span { color: var(--ink-muted); }
@container (min-width: 44rem) {
  .einblenden__zweispalt { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-2xl); align-items: start; }
}
@media (prefers-reduced-motion: no-preference) {
  .einblenden.ist-bereit .einblenden__teil {
    opacity: 0;
    filter: blur(var(--space-xs));
    translate: 0 var(--space-xs);
    transition-property: opacity, filter, translate;
    transition-duration: var(--t-slow);
    transition-timing-function: var(--ease);
  }
  .einblenden.ist-bereit .einblenden__teil[data-richtung="oben"]   { translate: 0 calc(var(--space-xs) * -1); }
  .einblenden.ist-bereit .einblenden__teil[data-richtung="links"]  { translate: calc(var(--space-md) * -1) 0; }
  .einblenden.ist-bereit .einblenden__teil[data-richtung="rechts"] { translate: var(--space-md) 0; }
  .einblenden.ist-bereit .einblenden__teil[data-stufe="1"] { transition-delay: var(--t-fast); }
  .einblenden.ist-bereit .einblenden__teil[data-stufe="2"] { transition-delay: calc(var(--t-fast) * 2); }
  .einblenden.ist-bereit .einblenden__teil[data-stufe="3"] { transition-delay: calc(var(--t-fast) * 3); }
  .einblenden.ist-bereit .einblenden__teil[data-stufe="4"] { transition-delay: calc(var(--t-fast) * 4); }
  .einblenden.ist-bereit .einblenden__teil[data-stufe="5"] { transition-delay: calc(var(--t-fast) * 5); }
  .einblenden.ist-bereit .einblenden__teil[data-stufe="6"] { transition-delay: calc(var(--t-fast) * 6); }
  .einblenden.ist-bereit .einblenden__teil.ist-da { opacity: 1; filter: none; translate: 0 0; }
}

.tempoband { container-type: inline-size; inline-size: 100%; display: grid; }
.tempoband__reihe { overflow: hidden; border-block: var(--border-w) solid var(--border-subtle); padding-block: var(--space-md); }
.tempoband__bahn { display: flex; }
.tempoband__block { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.tempoband__block > li { font-size: var(--text-3xl); font-weight: var(--fw-extrabold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); padding-inline: var(--space-lg); }
.tempoband__reihe--leise .tempoband__block > li { color: var(--ink-faint); }
@container (min-width: 44rem) {
  .tempoband__block > li { font-size: var(--text-5xl); }
}
@media (prefers-reduced-motion: no-preference) {
  .tempoband.ist-bereit .tempoband__bahn { width: max-content; translate: var(--tempoband-x, 0) 0; }
  .tempoband.ist-bereit .tempoband__block { flex: none; flex-wrap: nowrap; }
  .tempoband.ist-bereit .tempoband__block > li { flex: none; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  
  .tempoband__bahn { width: auto; translate: none; }
  .tempoband__block[aria-hidden="true"] { display: none; }
}

.stapelkarten { inline-size: 100%; container-type: inline-size; }
.stapelkarten__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.stapelkarten__inhalt {
  display: grid;
  grid-template-rows: auto minmax(11rem, 1fr);
  height: 100%;
  overflow: hidden;
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-md);
  transform-origin: 50% 0%;
}
.stapelkarten__text { display: grid; gap: var(--space-xs); align-content: center; padding: var(--space-lg); }
.stapelkarten__text h2 { font-size: var(--text-xl); line-height: var(--leading-snug); }
.stapelkarten__text p { font-size: var(--text-sm); color: var(--ink-muted); max-width: 44ch; }
.stapelkarten__fakten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-md); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink); }
.stapelkarten__link { display: inline-flex; align-items: center; gap: var(--space-2xs); justify-self: start; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink); text-decoration: none; }
.stapelkarten__link:hover { text-decoration: underline; text-underline-offset: var(--space-3xs); }
.stapelkarten__link .symbol { width: var(--space-md); height: var(--space-md); }
.stapelkarten__bild { position: relative; background: var(--surface-base); border-top: var(--border-w) solid var(--border-subtle); }
.stapelkarten__foto { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }

.stapelkarten__bild:has(> .browserrahmen, > .telefonrahmen) { display: grid; place-items: center; padding: var(--space-lg); }
.stapelkarten__bild > .telefonrahmen { --telefonrahmen-b: 11rem; }
.stapelkarten__karte--haupt .stapelkarten__text h2 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
.stapelkarten__karte--haupt .stapelkarten__text p { font-size: var(--text-md); }
@container (min-width: 44rem) {
  .stapelkarten__inhalt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
  .stapelkarten__karte--haupt .stapelkarten__inhalt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  
  .stapelkarten__bild { border-top: 0; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stapelkarten__karte:nth-child(1) { --index: 1; }
    .stapelkarten__karte:nth-child(2) { --index: 2; }
    .stapelkarten__karte:nth-child(3) { --index: 3; }
    .stapelkarten__karte:nth-child(4) { --index: 4; }
    .stapelkarten__karte {
      --index0: calc(var(--index) - 1);
      --reverse-index: calc(var(--stapelkarten-anzahl) - var(--index0));
      position: sticky;
      top: calc(var(--haft-oben, 0px) + var(--space-sm));
      padding-top: calc(var(--index) * var(--stapelkarten-versatz));
    }
    .stapelkarten__liste {
      --stapelkarten-anzahl: 4;
      --stapelkarten-versatz: var(--space-sm);
      --stapelkarten-hoehe: 30rem;
      grid-template-rows: repeat(var(--stapelkarten-anzahl), var(--stapelkarten-hoehe));
      gap: var(--space-xl);
      
      padding-bottom: calc(var(--stapelkarten-anzahl) * var(--stapelkarten-versatz));
      margin-bottom: var(--space-xl);
      view-timeline-name: --stapelkarten-im-fenster;
    }
    @container (max-width: 43.99rem) { .stapelkarten__liste { --stapelkarten-hoehe: 36rem; } }
    @keyframes stapelkarten-schrumpfen {
      to {
        transform: scale(calc(1.1 - 0.1 * var(--reverse-index)));
        background-color: var(--surface-overlay);
      }
    }
    .stapelkarten__inhalt {
      --start-range: calc(var(--index0) / var(--stapelkarten-anzahl) * 100%);
      --end-range: calc(var(--index) / var(--stapelkarten-anzahl) * 100%);
      animation: stapelkarten-schrumpfen linear forwards;
      animation-timeline: --stapelkarten-im-fenster;
      animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range);
    }
  }
}

.gegenlauf { inline-size: 100%; container-type: inline-size; }
.gegenlauf__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); overflow: clip; }
.gegenlauf__spalte { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.gegenlauf__bild { margin: 0; display: grid; gap: var(--space-2xs); }
.gegenlauf__flaeche { aspect-ratio: 3 / 4; border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; background: var(--surface-base); }
.gegenlauf__foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.gegenlauf__bild figcaption { display: flex; justify-content: space-between; gap: var(--space-xs); font-size: var(--text-xs); color: var(--ink-muted); }
.gegenlauf__bild figcaption span:first-child { color: var(--ink); font-weight: var(--fw-semibold); }
@container (min-width: 40rem) {
  .gegenlauf__raster, .gegenlauf__spalte { gap: var(--space-md); }
  .gegenlauf__bild figcaption { font-size: var(--text-sm); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gegenlauf__raster { view-timeline-name: --gegenlauf-im-fenster; }
    
    .gegenlauf__spalte--gegen { flex-direction: column-reverse; }
    @keyframes gegenlauf-verschieben {
      from { transform: translateY(calc(-100% + 100svh)); }
      to   { transform: translateY(calc(100% - 100svh)); }
    }
    .gegenlauf__spalte--gegen {
      animation: gegenlauf-verschieben linear both;
      animation-timeline: --gegenlauf-im-fenster;
      animation-range: contain 0% contain 100%;
    }
  }
}

.parallaxkarussell { inline-size: 100%; container-type: inline-size; }
.parallaxkarussell__leiste {
  list-style: none;
  margin: 0;
  padding: var(--space-xs) var(--gutter) var(--space-md);
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.parallaxkarussell__leiste:focus-visible { outline: var(--border-w-stark) solid var(--accent); outline-offset: calc(var(--border-w) * -2); }
.parallaxkarussell__folie { flex: 0 0 min(80%, 30rem); scroll-snap-align: center; }
.parallaxkarussell__fig { display: grid; gap: var(--space-xs); margin: 0; }
.parallaxkarussell__rahmen { position: relative; aspect-ratio: 7 / 6; overflow: hidden; border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface-base); }
.parallaxkarussell__tiefe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.parallaxkarussell__fig figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.parallaxkarussell__fig figcaption strong { font-size: var(--text-md); }
.parallaxkarussell__fig figcaption span { font-size: var(--text-sm); color: var(--ink-muted); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .parallaxkarussell__folie { view-timeline: --folie inline; }
    @keyframes parallaxkarussell-gleiten {
      from { transform: translateX(-23%); }
      to   { transform: translateX(0); }
    }
    .parallaxkarussell__tiefe {
      inset-inline-end: auto;
      width: 130%;
      animation: parallaxkarussell-gleiten linear both;
      animation-timeline: --folie;
    }
  }
}

.querabschnitt { inline-size: 100%; container-type: inline-size; overflow-x: clip; padding-block: var(--section-y); }
.querabschnitt__spur { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.querabschnitt__vorspann { display: grid; gap: var(--space-xs); max-width: var(--wrap-text); margin-bottom: var(--space-xl); }
.querabschnitt__vorspann h2 { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.querabschnitt__vorspann p { color: var(--ink-muted); }
.querabschnitt__stufen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.querabschnitt__stufe {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  padding: var(--space-lg);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
}
.querabschnitt__nr { font-size: var(--text-4xl); line-height: var(--leading-tight); font-weight: var(--fw-semibold); color: var(--ink-faint); }
.querabschnitt__stufe h3 { font-size: var(--text-xl); line-height: var(--leading-snug); }
.querabschnitt__stufe p { font-size: var(--text-sm); color: var(--ink-muted); max-width: 40ch; }
.querabschnitt__frist { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink); }
.querabschnitt__stufe--schmal { background: var(--surface-base); }
.querabschnitt__stufe--haupt { background: var(--surface-overlay); border-color: var(--border-strong); padding: 0; overflow: hidden; }
.querabschnitt__text { display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-lg); }
.querabschnitt__stufe--haupt h3 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
.querabschnitt__stufe--haupt p { font-size: var(--text-md); max-width: 44ch; }
.querabschnitt__bild { position: relative; height: 12rem; border-top: var(--border-w) solid var(--border-subtle); background: var(--surface-base); }
.querabschnitt__foto { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }

.querabschnitt__bild:has(> .browserrahmen, > .telefonrahmen) { display: grid; place-items: center; padding: var(--space-md); height: auto; }
.querabschnitt__bild > .telefonrahmen { --telefonrahmen-b: 9rem; }
@container (min-width: 48rem) {
  .querabschnitt__stufen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .querabschnitt__stufe--haupt { grid-column: 1 / -1; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes querabschnitt-schieben {
      
      to { transform: translateX(calc(-100% + 100cqw)); }
    }
    .querabschnitt {
      
      height: var(--querabschnitt-hoehe, 450svh);
      padding-block: 0;
      view-timeline-name: --querabschnitt-im-fenster;
      view-timeline-axis: block;
    }
    .querabschnitt__haft {
      position: sticky;
      
      top: var(--haft-oben, 0px);
      height: calc(100svh - var(--haft-oben, 0px));
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    .querabschnitt__spur {
      display: flex;
      align-items: center;
      gap: var(--space-xl);
      width: max-content;
      max-width: none;
      margin-inline: 0;
      will-change: transform;
      animation: querabschnitt-schieben linear forwards;
      animation-timeline: --querabschnitt-im-fenster;
      animation-range: contain 0% contain 100%;
    }
    .querabschnitt__vorspann { flex: 0 0 min(80cqw, 28rem); margin-bottom: 0; }
    .querabschnitt__stufen { display: flex; gap: var(--space-md); align-items: stretch; }
    .querabschnitt__stufe { flex: 0 0 min(78cqw, 20rem); }
    .querabschnitt__stufe--schmal { flex-basis: min(70cqw, 16rem); }
    .querabschnitt__stufe--haupt { flex-basis: min(88cqw, 34rem); display: flex; flex-direction: column; }
    .querabschnitt__bild { height: auto; flex: 1; min-height: 10rem; }
    
    .querabschnitt--still { height: auto; padding-block: var(--section-y); }
    .querabschnitt--still .querabschnitt__haft { position: static; height: auto; }
    .querabschnitt--still .querabschnitt__spur { animation: none; }
  }
}

.aufziehen { inline-size: 100%; --aufziehen-weg: 1.2; --aufziehen-halt: 0.35; border-radius: var(--r-md); container-type: inline-size; }
.aufziehen__buehne { --aufziehen-start-b: 42; --aufziehen-start-h: 58; display: grid; gap: var(--space-lg); isolation: isolate; }
@container (max-width: 40rem) {
  
  .aufziehen__buehne { --aufziehen-start-b: 76; --aufziehen-start-h: 50; }
}
.aufziehen__titel { font-size: var(--text-5xl); font-weight: var(--fw-extrabold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0; text-wrap: balance; }
.aufziehen__rahmen { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface-raised); border-radius: var(--r-md); }
.aufziehen__bild { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.aufziehen__tafel {
  display: grid; gap: var(--space-sm);
  max-width: var(--wrap-text);
  padding: var(--space-lg);
  background: var(--surface-overlay);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-md);
}
.aufziehen__tafel h2 { font-size: var(--text-2xl); line-height: var(--leading-tight); margin: 0; }
.aufziehen__tafel p { color: var(--ink-muted); margin: 0; }
.aufziehen__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.aufziehen__hinweis { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .aufziehen.ist-bereit .aufziehen__bahn { height: calc(100svh * (1 + var(--aufziehen-weg) + var(--aufziehen-halt))); }
  .aufziehen.ist-bereit .aufziehen__buehne { position: sticky; top: 0; height: 100svh; overflow: hidden; display: block; }
  .aufziehen.ist-bereit .aufziehen__rahmen { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
  .aufziehen.ist-bereit .aufziehen__bild { transform-origin: center; }
  .aufziehen.ist-bereit .aufziehen__titel {
    position: absolute; inset: 0; z-index: var(--z-ueber);
    display: flex; align-items: center; justify-content: center;
    padding: 0 var(--gutter); text-align: center; pointer-events: none;
  }
  .aufziehen.ist-bereit .aufziehen__titel > span { padding: var(--space-xs) var(--space-md); background: var(--surface-base); border-radius: var(--r-md); }
  .aufziehen.ist-bereit .aufziehen__ueberlage {
    position: absolute; inset: 0; z-index: var(--z-ueber);
    display: flex; align-items: center; justify-content: center;
    padding: var(--gutter); opacity: 0;
  }
  .aufziehen.ist-bereit .aufziehen__hinweis {
    display: block; position: absolute; inset-inline: 0; bottom: var(--space-md); z-index: var(--z-ueber);
    text-align: center; color: var(--ink-muted); font-size: var(--text-sm); pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .aufziehen__ueberlage { margin-top: var(--space-lg); }
}

.kontaktseite {
  container-type: inline-size;
  container-name: kontaktseite;
}
.kontaktseite__raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@container kontaktseite (min-width: 52rem) {
  .kontaktseite__raster { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; }
}
.kontaktseite__angaben h2 { margin: 0; }
.kontaktseite__angaben > p { margin-block: var(--space-sm) 0; color: var(--ink-muted); max-width: var(--wrap-text); }
.kontaktseite__liste {
  display: grid;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  padding: 0;
  list-style: none;
}
.kontaktseite__liste li { display: flex; align-items: flex-start; gap: var(--space-sm); }
.kontaktseite__liste .symbol { margin-block-start: var(--space-3xs); color: var(--ink-muted); }
.kontaktseite__liste b { display: block; font-size: var(--text-sm); color: var(--ink); }
.kontaktseite__liste span, .kontaktseite__liste a { font-size: var(--text-sm); color: var(--ink-muted); }
.kontaktseite__liste a { text-decoration: none; }
.kontaktseite__liste a:hover { color: var(--ink); text-decoration: underline; }

.kontaktseite__bild { aspect-ratio: auto; }
.kontaktseite__bild img { height: auto; }
.kontaktseite__bild img { object-position: 50% 60%; }
.kontaktseite__formular {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--surface-raised);
  border-radius: var(--r-md);
}
.kontaktseite__formular h3 { margin: 0; font-size: var(--text-lg); }

.kontaktseite__formular .feld { width: 100%; }
.kontaktseite__formular > p { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); max-width: none; }
.kontaktseite__paar { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@container kontaktseite (min-width: 64rem) {
  .kontaktseite__paar { grid-template-columns: 1fr 1fr; }
}
.kontaktseite__senden { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.kontaktseite__senden small { font-size: var(--text-xs); color: var(--ink-faint); }

.deckblatt {
  min-height: min(100svh, 40rem);
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  container-name: deckblatt;
  background: var(--surface-base);
}
.deckblatt__kopf { border-block-end: var(--border-w) solid var(--border-subtle); }

.deckblatt__kopf--haftet { position: sticky; inset-block-start: 0; z-index: var(--z-leiste); background: var(--surface-base); }

:root:has(.deckblatt__kopf--haftet) { --haft-oben: calc(var(--tap-min) + 2 * var(--space-xs) + var(--border-w)); }
.deckblatt__kopfinnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  padding-block: var(--space-xs);
}
.deckblatt__logo { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.deckblatt__logo svg { height: var(--space-md); width: auto; display: block; }
.deckblatt__haupt { flex: 1; display: flex; flex-direction: column; }
.deckblatt__innen {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(12rem, 1fr);
}
.deckblatt__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xl) var(--gutter);
  padding-inline-start: max(var(--gutter), calc((100cqw - var(--wrap)) / 2 + var(--gutter)));
  background: var(--surface-base);
}
.deckblatt__text h2 { margin: 0; max-width: 16ch; font-size: var(--text-4xl); line-height: var(--leading-tight); }
.deckblatt__text p { margin: 0; color: var(--ink-muted); max-width: var(--wrap-text); }
.deckblatt__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.deckblatt__bild { margin: 0; min-height: 12rem; background: var(--surface-overlay); }
.deckblatt__bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@container deckblatt (min-width: 56rem) {
  .deckblatt__innen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr; }
}

.kasse { container-type: inline-size; container-name: kasse; }
.kasse__kopf { display: grid; gap: var(--space-sm); max-width: var(--wrap-text); margin-block-end: var(--space-xl); }
.kasse__kopf > * { margin: 0; }
.kasse__lead { font-size: var(--text-lg); color: var(--ink-muted); }
.kasse__form { display: grid; gap: var(--space-xl); align-items: start; }
@container kasse (min-width: 56rem) {
  .kasse__form { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--space-2xl); }
  .kasse__summe { position: sticky; top: var(--space-lg); z-index: var(--z-klebend); }
}
.kasse__felder { display: grid; gap: var(--space-2xl); }
.kasse__block { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: var(--space-md); }
.kasse__block > legend { padding: 0; margin-block-end: var(--space-md); font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--ink); }
.kasse__paar { display: grid; gap: var(--space-md); }
@container kasse (min-width: 36rem) {
  .kasse__paar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kasse__paar--ort { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.kasse__block .feld { width: 100%; }
.kasse__wahl { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); width: 100%; }
.kasse__preis { font-variant-numeric: tabular-nums; color: var(--ink-muted); white-space: nowrap; }
.kasse__block .wahl { width: 100%; }
.kasse__block .wahl__text { flex: 1; }

.kasse__summe { display: grid; gap: var(--space-lg); padding: var(--space-lg); background: var(--surface-raised); border: var(--border-w) solid var(--border-strong); border-radius: var(--r-md); }
.kasse__summe > * { margin: 0; }
.kasse__summe h3 { font-size: var(--text-xl); }
.kasse__posten { list-style: none; margin: 0; padding: 0; display: grid; }
.kasse__posten > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; padding-block: var(--space-xs); border-bottom: var(--border-w) solid var(--border-subtle); font-size: var(--text-sm); }
.kasse__bild { width: var(--space-2xl); height: auto; aspect-ratio: 1 / 1; border-radius: var(--r-sm); animation: none; background: var(--surface-overlay); border: var(--border-w) solid var(--border-subtle); }
.kasse__text { display: grid; line-height: var(--leading-snug); min-width: 0; }
.kasse__text b { font-weight: var(--fw-semibold); color: var(--ink); }
.kasse__text span { font-size: var(--text-xs); color: var(--ink-muted); }
.kasse__betrag { white-space: nowrap; color: var(--ink); }
.kasse__summen { margin: 0; display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.kasse__summen > div { display: flex; justify-content: space-between; gap: var(--space-md); }
.kasse__summen dt { color: var(--ink-muted); }
.kasse__summen dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--ink); }
.kasse__summen .kasse__total { padding-block-start: var(--space-sm); margin-block-start: var(--space-2xs); border-top: var(--border-w) solid var(--border-strong); font-size: var(--text-lg); font-weight: var(--fw-bold); }
.kasse__summen .kasse__total dt { color: var(--ink); }
.kasse__summe .btn { width: 100%; justify-content: center; }
.kasse__sicher { display: flex; gap: var(--space-xs); align-items: center; font-size: var(--text-xs); color: var(--ink-muted); }

.deckblatt { inline-size: 100%; }
.kasse { inline-size: 100%; }
.kontaktseite { inline-size: 100%; }

.warenkorb {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: min(26rem, 100%);
  padding: var(--space-lg);
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-md);
}
.warenkorb :is(h3, h4, p, ul, dl, dd) { margin: 0; }
.warenkorb__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.warenkorb__titel { font-size: var(--text-lg); }
.warenkorb__liste { list-style: none; padding: 0; display: flex; flex-direction: column; }
.warenkorb__position {
  display: grid;
  grid-template-columns: var(--space-3xl) minmax(0, 1fr);
  grid-template-areas: "bild text" "bild steuer";
  gap: var(--space-2xs) var(--space-sm);
  padding-block: var(--space-sm);
  border-top: var(--border-w) solid var(--border-subtle);
}
.warenkorb__position:first-child { border-top: 0; padding-top: 0; }

.warenkorb__bild {
  grid-area: bild;
  width: var(--space-3xl);
  height: var(--space-3xl);
  display: grid;
  place-items: center;
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-sm);
  color: var(--ink-faint);
}
.warenkorb__bild .symbol { width: var(--space-lg); height: var(--space-lg); }
.warenkorb__bild > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.warenkorb__text { grid-area: text; display: flex; flex-direction: column; gap: var(--space-3xs); }
.warenkorb__name { font-size: var(--text-sm); font-weight: var(--fw-medium); }
.warenkorb__angaben { display: flex; flex-wrap: wrap; gap: 0 var(--space-sm); font-size: var(--text-xs); color: var(--ink-muted); }
.warenkorb__angaben div { display: inline-flex; gap: var(--space-2xs); }
.warenkorb__angaben dt::after { content: ":"; }
.warenkorb__angaben dd { color: var(--ink); }
.warenkorb__steuer { grid-area: steuer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.warenkorb__preis { font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--ink); }
.warenkorb__menge-zeile { display: inline-flex; align-items: center; gap: var(--space-2xs); }

.warenkorb__menge {
  width: var(--space-3xl);
  height: var(--ctl-h-sm);
  padding: 0;
  text-align: center;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-sm);
  appearance: textfield;
}
.warenkorb__menge::-webkit-inner-spin-button, .warenkorb__menge::-webkit-outer-spin-button { appearance: none; margin: 0; }
.warenkorb__menge:focus-visible { outline: var(--border-w-stark) solid var(--focus); outline-offset: calc(var(--border-w) * -2); }
.warenkorb__summe {
  display: flex;
  flex-wrap: wrap; 
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: var(--border-w) solid var(--border-strong);
  font-weight: var(--fw-medium);
}
.warenkorb__summe small { display: block; font-weight: var(--fw-regular); font-size: var(--text-xs); color: var(--ink-muted); }
.warenkorb__summe strong { white-space: nowrap; font-size: var(--text-xl); font-variant-numeric: tabular-nums; }

.warenkorb__aktionen { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-xs); text-align: center; }
.warenkorb__aktionen > a:not(.btn) { align-self: center; padding-block: var(--space-2xs); }

.effekttext {
  text-wrap: balance;   
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

.wechselwort {
  --wechselwort-anzahl: 4;
  --wechselwort-takt: calc(var(--t-slow) * 4);
  display: inline-grid;
  overflow: hidden;
  
  height: calc(1em * var(--leading-snug));
  vertical-align: bottom;
  color: var(--accent);
}
.wechselwort__band {
  display: grid;
  line-height: var(--leading-snug);
  animation: wechselwort-band
    calc(var(--wechselwort-takt) * var(--wechselwort-anzahl))
    steps(var(--wechselwort-anzahl)) infinite;
}
.wechselwort--drei { --wechselwort-anzahl: 3; }
.wechselwort--vier { --wechselwort-anzahl: 4; }
.wechselwort--fuenf { --wechselwort-anzahl: 5; }
.wechselwort--sechs { --wechselwort-anzahl: 6; }

@keyframes wechselwort-band {
  to {
    transform: translateY(
      calc(-100% * var(--wechselwort-anzahl) / (var(--wechselwort-anzahl) + 1))
    );
  }
}

.rollwoerter {
  --rollwoerter-zeile: calc(var(--space-2xl) + var(--space-3xs));
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.rollwoerter__feld {
  height: calc(var(--rollwoerter-zeile) * 3);
  padding-block: var(--rollwoerter-zeile);
  margin: 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: none;
  
  mask-image: linear-gradient(transparent, currentColor 30%, currentColor 70%, transparent);
}
.rollwoerter__feld::-webkit-scrollbar { display: none; }
.rollwoerter__feld li {
  min-height: var(--rollwoerter-zeile);
  display: flex;
  align-items: center;
  font-size: var(--text-2xl);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-snug);
  color: var(--ink-faint);
  transition: color var(--t-base) var(--ease), font-weight var(--t-base) var(--ease);
}

.rollwoerter__feld li.ist-mitte {
  color: var(--accent);
  font-weight: var(--fw-extrabold);
}

@media (prefers-reduced-motion: reduce) {
  .wechselwort__band { animation: none; }
  .rollwoerter__feld li { transition: none; }
  .rollwoerter__feld { scroll-behavior: auto; }
}

.markierung { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--space-lg); align-items: flex-start; max-width: var(--wrap-text); }
.markierung__titel { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0; }
.markierung__lead { font-size: var(--text-lg); color: var(--ink-muted); margin: 0; }
.markierung__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.markierung__text { background-color: var(--accent-soft); border-radius: var(--r-xs); padding-inline: var(--space-3xs); }
.markierung.ist-bereit .markierung__text { background: none; padding-inline: 0; position: relative; }
.markierung__folie { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.markierung__strich { fill: none; stroke: var(--accent-soft); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .markierung__strich { stroke-dashoffset: 1; transition: stroke-dashoffset var(--t-lang) var(--ease); transition-delay: calc(var(--strich-nr, 0) * var(--t-slow)); }
  .markierung.ist-da .markierung__strich { stroke-dashoffset: 0; }
}

.flimmern {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-block-size: 34rem; padding: var(--space-xl);
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-md);
  touch-action: pan-y;
}
.flimmern__tafel {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  font-family: var(--font-mono); font-size: var(--text-sm);
  pointer-events: none;
}
.flimmern__blatt {
  position: relative; display: grid; gap: var(--space-md);
  max-inline-size: var(--wrap-text); padding: var(--space-xl);
  background: var(--surface-overlay);
  border: var(--border-w) solid var(--border-strong); border-radius: var(--r-md);
}
.flimmern__titel { font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; margin: 0; }
.flimmern__blatt p { color: var(--ink-muted); margin: 0; }
.flimmern__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }

.flimmern__farbe { display: none; }
.flimmern__farbe--1 { color: var(--border-strong); }
.flimmern__farbe--2 { color: var(--ink-faint); }
.flimmern__farbe--3 { color: var(--ink-muted); }

.logostreifen { display: grid; gap: var(--space-xl); container-type: inline-size; }
.logostreifen__kopf { display: grid; gap: var(--space-sm); max-width: var(--wrap-text); }
.logostreifen__kopf > * { margin: 0; }
.logostreifen__titel { font-size: var(--text-4xl); }
.logostreifen__lead { font-size: var(--text-lg); color: var(--ink-muted); max-width: var(--wrap-text); }
.logostreifen__quelle { font-size: var(--text-xs); color: var(--ink-faint); margin: 0; }
.logostreifen__logos {
  list-style: none;
  margin: 0;
  padding: var(--space-lg) 0 0;
  border-top: var(--border-w) solid var(--border-subtle);
  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-lg) var(--space-xl);
  align-items: center;
  color: var(--ink-muted);
}
.logostreifen__logos svg { display: block; width: auto; height: var(--space-xl); }

.logostreifen__wort { font-weight: var(--fw-bold); font-size: var(--text-lg); white-space: nowrap; }

.logostreifen--band { gap: var(--space-md); }
.logostreifen--band .logostreifen__kopf { max-width: none; }
.logostreifen--band .logostreifen__titel { font-size: var(--text-sm); font-weight: var(--fw-semibold); letter-spacing: normal; color: var(--ink-muted); }
.logostreifen--band .logostreifen__logos { border-top: 0; padding-top: 0; }
@container (min-width: 56rem) {
  .logostreifen--band { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2xl); }
}
.logostreifen__logos text { font-family: var(--font-ui); font-weight: var(--fw-bold); }

.zitatblock {
  
  display: grid; justify-items: start; gap: var(--space-lg);
  max-width: var(--wrap-text); margin-block: 0;
  container-type: inline-size;
}
.zitatblock__marke { color: var(--ink-muted); width: 10rem; height: var(--space-xl); }
.zitatblock__marke text { font-family: var(--font-ui); font-weight: var(--fw-bold); }
.zitatblock blockquote { margin: 0; }
.zitatblock blockquote p {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
}
.zitatblock figcaption { display: grid; justify-items: start; gap: var(--space-xs); }
.zitatblock__person { display: grid; gap: var(--space-3xs); font-size: var(--text-sm); }
.zitatblock__person b { font-weight: var(--fw-bold); color: var(--ink); }
.zitatblock__person span { color: var(--ink-muted); }

.zitatblock__gesicht { object-position: 47% 36%; transform: scale(2.4); transform-origin: 47% 36%; }
.zitatblock .profilbild { width: calc(var(--space-3xl) * 1.5); height: calc(var(--space-3xl) * 1.5); }

.kundenstimmen { display: grid; gap: var(--space-xl); container-type: inline-size; }
.kundenstimmen__kopf { display: flex; justify-content: space-between; align-items: end; gap: var(--space-lg); flex-wrap: wrap; }
.kundenstimmen__kopf > div { display: grid; gap: var(--space-sm); }
.kundenstimmen__titel { margin: 0; font-size: var(--text-4xl); }
.kundenstimmen__quelle { font-size: var(--text-xs); color: var(--ink-faint); margin: 0; }
.kundenstimmen__spalten { display: grid; gap: var(--space-xl); }
@container (min-width: 44rem) {
  .kundenstimmen__spalten { grid-template-columns: 1.5fr 1fr; align-items: start; }
}
.kundenstimmen__sterne { display: inline-flex; gap: var(--space-3xs); color: var(--ink); align-items: center; }
.kundenstimmen__sterne svg { width: var(--icon); height: var(--icon); fill: currentColor; stroke: currentColor; }
.kundenstimmen__stimme { display: grid; gap: var(--space-md); margin: 0; align-content: start; }
.kundenstimmen__stimme blockquote { margin: 0; }
.kundenstimmen__stimme blockquote p { margin: 0; color: var(--ink); }
.kundenstimmen__stimme figcaption { display: flex; align-items: center; gap: var(--space-sm); }
.kundenstimmen__stimme--haupt {
  padding: var(--space-xl);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
}
.kundenstimmen__stimme--haupt blockquote p { font-size: var(--text-2xl); font-weight: var(--fw-semibold); line-height: var(--leading-snug); }
.kundenstimmen__weitere { list-style: none; margin: 0; padding: 0; display: grid; }
.kundenstimmen__weitere > li { padding-block: var(--space-lg); border-top: var(--border-w) solid var(--border-subtle); }
.kundenstimmen__weitere > li:first-child { padding-top: 0; border-top: 0; }
.kundenstimmen__weitere .kundenstimmen__stimme blockquote p { font-size: var(--text-md); }
.kundenstimmen__person { display: grid; gap: var(--space-3xs); font-size: var(--text-sm); }
.kundenstimmen__person b { font-weight: var(--fw-bold); color: var(--ink); }
.kundenstimmen__person span { color: var(--ink-muted); }

.teamliste { display: grid; gap: var(--space-xl); container-type: inline-size; }
.teamliste__kopf { display: grid; gap: var(--space-sm); max-width: var(--wrap-text); }
.teamliste__kopf > * { margin: 0; }
.teamliste__titel { font-size: var(--text-4xl); }
.teamliste__lead { font-size: var(--text-lg); color: var(--ink-muted); max-width: var(--wrap-text); }
.teamliste__aufbau { display: grid; gap: var(--space-xl); }
@container (min-width: 48rem) {
  .teamliste__aufbau { grid-template-columns: 1.4fr 1fr; align-items: start; gap: var(--space-3xl); }
}
.teamliste__leitung { display: grid; gap: var(--space-lg); }
@container (min-width: 36rem) {
  .teamliste__leitung { grid-template-columns: 1fr 1fr; align-items: start; }
}
.teamliste__leitung-text { display: grid; gap: var(--space-sm); align-content: start; }
.teamliste__leitung-text > * { margin: 0; }
.teamliste__name { font-size: var(--text-3xl); }
.teamliste__rolle { color: var(--ink-muted); font-size: var(--text-sm); }
.teamliste__bild { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-md); display: block; }
.teamliste__bild--mitte { object-position: 50% 25%; }
.teamliste__kontakt { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: grid; gap: var(--space-xs); font-size: var(--text-sm); }
.teamliste__kontakt li { display: flex; align-items: center; gap: var(--space-xs); }
.teamliste__kontakt a { color: var(--ink); }
.teamliste__kontakt .symbol { color: var(--ink-muted); }
.teamliste__leute { list-style: none; margin: 0; padding: 0; display: grid; }
.teamliste__leute > li {
  display: flex; align-items: center; gap: var(--space-md);
  padding-block: var(--space-md);
  border-top: var(--border-w) solid var(--border-subtle);
}
.teamliste__leute > li:first-child { border-top: 0; padding-top: 0; }
.teamliste__person { display: grid; gap: 0; font-size: var(--text-sm); }
.teamliste__person b { font-weight: var(--fw-bold); color: var(--ink); }
.teamliste__person span { color: var(--ink-muted); }
.teamliste__stellen {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap;
  padding-top: var(--space-lg);
  border-top: var(--border-w) solid var(--border-subtle);
}
.teamliste__stellen > div { display: grid; gap: var(--space-3xs); max-width: var(--wrap-text); }
.teamliste__stellen-titel { margin: 0; font-size: var(--text-xl); }
.teamliste__stellen p { margin: 0; color: var(--ink-muted); }

.kundenstimmen { inline-size: 100%; }
.logostreifen { inline-size: 100%; }
.teamliste { inline-size: 100%; }
.zitatblock { inline-size: 100%; }

.team-portraets { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); container-type: inline-size; inline-size: 100%; }
.team-portraets :is(h2, h3, p, ul) { margin: 0; }
.team-portraets :is(h2, h3) { text-wrap: balance; }
.team-portraets p { max-width: var(--wrap-text); }
.team-portraets ul { padding: 0; list-style: none; }
.team-portraets .profilbild { border-radius: var(--r-md); width: 100%; height: auto; aspect-ratio: 1 / 1; font-size: var(--text-2xl); }
.team-portraets__kopf { display: grid; gap: var(--space-sm); max-width: var(--wrap-text); }
.team-portraets__titel { font-size: var(--text-3xl); line-height: var(--leading-tight); }
.team-portraets__lead { color: var(--ink-muted); font-size: var(--text-md); }
.team-portraets__partner { display: grid; gap: var(--space-xl); }
.team-portraets__person { display: grid; gap: var(--space-md); align-content: start; }
.team-portraets__name { font-size: var(--text-xl); }
.team-portraets__rolle { color: var(--ink-muted); font-size: var(--text-sm); }
.team-portraets__person .profilbild { font-size: var(--text-5xl); }
.team-portraets__leute { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }
.team-portraets__leute > li { display: grid; gap: var(--space-xs); align-content: start; }
.team-portraets__leute .profilbild { font-size: var(--text-xl); }
.team-portraets__leute b { color: var(--ink); font-weight: var(--fw-bold); }
.team-portraets__leute span:not(.profilbild) { color: var(--ink-muted); font-size: var(--text-sm); }
.team-portraets__angaben { display: grid; gap: var(--space-3xs); }
.team-portraets__schluss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: var(--border-w) solid var(--border-subtle);
}
.team-portraets__schluss p { color: var(--ink-muted); }
@container (min-width: 40rem) {
  .team-portraets__partner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); }
}
@container (min-width: 48rem) {
  .team-portraets__leute { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 64rem) {
  .team-portraets__leute { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.personenkarte { display: grid; gap: var(--space-xl); container-type: inline-size; inline-size: 100%; }
.personenkarte :is(h2, p, ul) { margin: 0; }
.personenkarte ul { padding: 0; list-style: none; }
.personenkarte__einleitung { display: grid; gap: var(--space-sm); max-width: var(--wrap-text); }
.personenkarte__titel { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.personenkarte__lead { color: var(--ink-muted); font-size: var(--text-md); }
.personenkarte__liste { display: grid; gap: var(--space-md); }
.personenkarte__karte {
  position: relative;
  display: block;
  min-height: 24rem;
  height: 100%;
  overflow: hidden;
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  color: var(--ink);
  text-decoration: none;
}

.personenkarte .personenkarte__bild { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.personenkarte__angaben {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  display: flex;
  flex-direction: column;
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-sm);
}
.personenkarte__rolle { font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-muted); }
.personenkarte__name { font-size: var(--text-xl); font-weight: var(--fw-bold); line-height: var(--leading-snug); }
.personenkarte__karte--haupt .personenkarte__name { font-size: var(--text-2xl); }
.personenkarte__text {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--space-md);
  background: var(--surface-base);
  border-block-start: var(--border-w) solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  transform: translateY(100%);
  transition: transform var(--t-base) var(--ease);
}
.personenkarte__karte:hover .personenkarte__text,
.personenkarte__karte:focus-visible .personenkarte__text { transform: translateY(0); }
.personenkarte__karte:focus-visible { outline: var(--border-w-stark) solid var(--focus); outline-offset: calc(var(--border-w) * -2); }

@media (hover: none) {
  .personenkarte__text { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .personenkarte__text { transform: none; transition: none; }
}
@container (min-width: 44rem) {
  .personenkarte__liste { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: repeat(2, minmax(16rem, 1fr)); }
  .personenkarte__liste > li:has(> .personenkarte__karte--haupt) { grid-row: span 2; }
  .personenkarte__karte { min-height: 16rem; }
  .personenkarte__karte--haupt { min-height: 34rem; }
}

.laufband { container-type: inline-size; inline-size: 100%; display: grid; gap: var(--space-md); }
.laufband__titel { font-size: var(--text-2xl); margin: 0; }
.laufband__buehne { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); overflow: hidden; }
.laufband__reihe { display: flex; }
.laufband__block { display: flex; flex-wrap: wrap; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.laufband__stimme { width: min(20rem, 78cqw); display: grid; gap: var(--space-sm); align-content: start; margin: 0; padding: var(--space-md); height: 100%; box-sizing: border-box; background: var(--surface-raised); border: var(--border-w) solid var(--border-subtle); border-radius: var(--r-md); }
.laufband__stimme p { margin: 0; }
.laufband__wer { font-size: var(--text-sm); color: var(--ink-muted); }
.laufband__stimme--haupt { background: var(--accent-soft); border-color: var(--border-strong); }
.laufband--bilder .laufband__block { align-items: start; }
.laufband__bild { margin: 0; display: grid; gap: var(--space-xs); width: min(18rem, 72cqw); }
.laufband__bild--breit { width: min(22rem, 82cqw); }
.laufband__bild .verhaeltnis { aspect-ratio: 4 / 3; }
.laufband__bild--breit .verhaeltnis { aspect-ratio: 3 / 2; }
.laufband__bild figcaption { font-size: var(--text-sm); color: var(--ink-muted); }
.laufband__steuer { display: none; gap: var(--space-md); align-items: center; }
.laufband__stand { font-size: var(--text-sm); color: var(--ink-muted); }
@media (prefers-reduced-motion: no-preference) {
  .laufband.ist-bereit .laufband__steuer { display: flex; }
  .laufband.ist-bereit .laufband__reihe { width: max-content; animation: laufband-lauf calc(var(--t-lang) * 30) linear infinite; }
  .laufband.ist-bereit .laufband__reihe--zurueck { animation-direction: reverse; }
  .laufband.ist-bereit .laufband__block { flex: none; flex-wrap: nowrap; padding-inline-end: var(--space-md); }
  .laufband.ist-bereit .laufband__block > li { flex: none; }
  
  .laufband.ist-bereit .laufband__buehne { touch-action: pan-y; cursor: grab; }
  .laufband.ist-bereit .laufband__buehne.ist-gezogen { cursor: grabbing; user-select: none; }
  .laufband.ist-bereit:has(.ist-gezogen) .laufband__reihe { animation-play-state: paused; }
  .laufband.ist-bereit:focus-within .laufband__reihe,
  .laufband.ist-bereit:hover .laufband__reihe,
  .laufband.ist-bereit[data-lauf="aus"] .laufband__reihe { animation-play-state: paused; }
}
@keyframes laufband-lauf { to { translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) {
  
  .laufband__reihe { width: auto; animation: none; }
  .laufband__block[aria-hidden="true"], .laufband__steuer { display: none; }
}

.zahlenkacheln { display: grid; gap: var(--space-xl); container-type: inline-size; }
.zahlenkacheln__kopf { display: grid; gap: var(--space-sm); max-width: var(--wrap-text); }
.zahlenkacheln__kopf > * { margin: 0; }
.zahlenkacheln__titel { font-size: var(--text-4xl); }
.zahlenkacheln__lead { font-size: var(--text-lg); color: var(--ink-muted); max-width: var(--wrap-text); }
.zahlenkacheln__quelle { font-size: var(--text-2xs); color: var(--ink-faint); }
.zahlenkacheln .kachelraster__gross .kachelraster__zahl { font-size: var(--text-4xl); }

.leitzahl { container-type: inline-size; }
.leitzahl__aufbau { display: grid; gap: var(--space-2xl); }
@container (min-width: 44rem) {
  .leitzahl__aufbau { grid-template-columns: 1.3fr 1fr; align-items: end; gap: var(--space-3xl); }
}
.leitzahl__haupt { display: grid; gap: var(--space-md); }
.leitzahl__haupt > * { margin: 0; }
.leitzahl__titel { font-size: var(--text-2xl); font-weight: var(--fw-semibold); max-width: 22ch; color: var(--ink-muted); }
.leitzahl__zahl {
  display: block;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-5xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.leitzahl__lead { font-size: var(--text-lg); color: var(--ink-muted); max-width: var(--wrap-text); }
.leitzahl__quelle { font-size: var(--text-xs); color: var(--ink-faint); }
.leitzahl__neben { display: grid; margin: 0; }
.leitzahl__neben > div { display: grid; gap: var(--space-3xs); padding-block: var(--space-md); border-top: var(--border-w) solid var(--border-subtle); }
.leitzahl__neben > div:first-child { border-top: 0; padding-top: 0; }
.leitzahl__neben dt { font-size: var(--text-sm); color: var(--ink-muted); order: 2; }
.leitzahl__neben dd { margin: 0; order: 1; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--ink); }
.leitzahl__neben small { font-size: var(--text-2xs); color: var(--ink-faint); order: 3; }

.kennzahlkarten { display: grid; gap: var(--space-xl); container-type: inline-size; }
.kennzahlkarten__kopf { display: grid; gap: var(--space-sm); max-width: var(--wrap-text); }
.kennzahlkarten__kopf > * { margin: 0; }
.kennzahlkarten__titel { font-size: var(--text-4xl); }
.kennzahlkarten__lead { font-size: var(--text-lg); color: var(--ink-muted); max-width: var(--wrap-text); }
.kennzahlkarten__raster.kennzahlen { grid-template-columns: 1fr; gap: var(--space-md); }
@container (min-width: 40rem) {
  .kennzahlkarten__raster.kennzahlen { grid-template-columns: 1.4fr 1fr; grid-auto-flow: row; }
  .kennzahlkarten__raster .kennzahlkarten__karte--haupt { grid-row: span 2; }
}
.kennzahlkarten__karte.zahl {
  gap: var(--space-xs);
  padding: var(--space-lg);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
  align-content: space-between;
}
.kennzahlkarten__karte--haupt.zahl { border-color: var(--accent); background: var(--accent-soft); padding: var(--space-xl); }
.kennzahlkarten__karte .kennzahlkarten__zeichen { color: var(--ink-muted); width: var(--space-lg); height: var(--space-lg); }
.kennzahlkarten__karte--haupt .kennzahlkarten__zeichen { color: var(--ink); }
.kennzahlkarten__karte.zahl b { font-size: var(--text-3xl); font-weight: var(--fw-extrabold); line-height: var(--leading-tight); }
.kennzahlkarten__karte--haupt.zahl b { font-size: var(--text-4xl); }
.kennzahlkarten__karte.zahl span { font-size: var(--text-sm); }
.kennzahlkarten__link {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  margin-top: var(--space-sm);
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink);
  text-decoration: underline; text-underline-offset: 0.2em;
  justify-self: start;
}
.kennzahlkarten__link:hover { color: var(--accent); }

.einheit { font-size: 0.5em; font-weight: var(--fw-semibold); color: var(--ink-muted); letter-spacing: 0; }

.kennzahl-veraenderung { display: grid; gap: var(--space-xl); container-type: inline-size; }
.kennzahl-veraenderung__kopf { display: grid; gap: var(--space-sm); max-width: var(--wrap-text); }
.kennzahl-veraenderung__kopf > * { margin: 0; }
.kennzahl-veraenderung__titel { font-size: var(--text-4xl); }
.kennzahl-veraenderung__lead { font-size: var(--text-lg); color: var(--ink-muted); max-width: var(--wrap-text); }
.kennzahl-veraenderung__quelle { font-size: var(--text-xs); color: var(--ink-faint); margin: 0; }
.kennzahl-veraenderung__werte { display: grid; gap: var(--space-md); margin: 0; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.kennzahl-veraenderung__wert {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: center; align-content: start;
  padding: var(--space-lg);
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md);
}

.kennzahl-veraenderung__zeichen {
  display: inline-grid; place-items: center; flex: none;
  color: var(--ink-muted);
}
.kennzahl-veraenderung__wert dt { font-size: var(--text-sm); color: var(--ink-muted); }
.kennzahl-veraenderung__wert dd { margin: 0; grid-column: 1 / -1; }
.kennzahl-veraenderung__zahl { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: var(--text-3xl); font-weight: var(--fw-extrabold); line-height: var(--leading-tight); color: var(--ink); }
.kennzahl-veraenderung__vergleich { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; font-size: var(--text-xs); color: var(--ink-muted); }
.kennzahl-veraenderung .marke { gap: var(--space-3xs); }
.kennzahl-veraenderung .marke::before { display: none; }

.kennzahl-veraenderung { inline-size: 100%; }
.kennzahlkarten { inline-size: 100%; }
.leitzahl { inline-size: 100%; }
.zahlenkacheln { inline-size: 100%; }



/* ------------------------------------------------------------
   Die Marke: TFCZ
   Grundfläche #2B69A6 · Akzent #005A94 · Schrift Nunito Sans
   Rundung: TFCZ (4 / 8 / 12 / 16 / 22 px) · Modus: hell und dunkel, folgt der Einstellung des Geräts
   ------------------------------------------------------------ */
html:root{
  --font-display: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-ui: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-data: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --fw-knopf: 800;
  --surface-base: #2B69A6;
  --surface-raised: #2A66A2;
  --surface-overlay: #255D95;
  --border-subtle: #5287BD;
  --border-strong: #C3D8EE;
  --ink: #FFFFFF;
  --ink-muted: #EEF4FA;
  --ink-faint: #E6EFF8;
  --accent: #FFFFFF;
  --accent-lift: #FFFFFF;
  --accent-soft: #255D95;
  --accent-soft-lift: #2A66A2;
  --accent-ink: #0D273D;
  --accent-hover: #E3EEF8;
  --state-pass: #C2F2CF;
  --state-fail: #FFDDD8;
  --state-warn: #FFE2A6;
  --focus: #E9C475;
  --ton-1: #CFE3F5;
  --ton-2: #C9EBCF;
  --ton-3: #F4DFB3;
  --ton-4: #F7D2C6;
  --ton-5: #EBCFE8;
  --ton-6: #C2EDEC;
  --accent-2: #E9C475;
  --accent-2-lift: #F0D08A;
  --accent-2-hover: #F4D99B;
  --accent-2-ink: #0D273D;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  html:root:not([data-mode="light"]){
    --surface-base: #0D273D;
    --surface-raised: #122436;
    --surface-overlay: #16304A;
    --border-subtle: #333F4A;
    --border-strong: #75828F;
    --ink: #EEF4FA;
    --ink-muted: #C3D2E0;
    --ink-faint: #A5ACB2;
    --accent: #5CA7DC;
    --accent-lift: #69B4E9;
    --accent-soft: #263747;
    --accent-soft-lift: #304252;
    --accent-ink: #0D273D;
    --accent-hover: #6FBAF0;
    --state-pass: #67B57D;
    --state-fail: #FF7F73;
    --state-warn: #E49B2C;
    --focus: #CDA857;
    --ton-1: #7FB0DD;
    --ton-2: #89B992;
    --ton-3: #C4A674;
    --ton-4: #D59B89;
    --ton-5: #C69AC2;
    --ton-6: #6FBAB9;
    --accent-2: #CDA857;
    --accent-2-lift: #DAB564;
    --accent-2-hover: #E1BB6A;
    --accent-2-ink: #0D273D;
    color-scheme: dark;
  }
}
html:root[data-mode="dark"]{
  --surface-base: #0D273D;
  --surface-raised: #122436;
  --surface-overlay: #16304A;
  --border-subtle: #333F4A;
  --border-strong: #75828F;
  --ink: #EEF4FA;
  --ink-muted: #C3D2E0;
  --ink-faint: #A5ACB2;
  --accent: #5CA7DC;
  --accent-lift: #69B4E9;
  --accent-soft: #263747;
  --accent-soft-lift: #304252;
  --accent-ink: #0D273D;
  --accent-hover: #6FBAF0;
  --state-pass: #67B57D;
  --state-fail: #FF7F73;
  --state-warn: #E49B2C;
  --focus: #CDA857;
  --ton-1: #7FB0DD;
  --ton-2: #89B992;
  --ton-3: #C4A674;
  --ton-4: #D59B89;
  --ton-5: #C69AC2;
  --ton-6: #6FBAB9;
  --accent-2: #CDA857;
  --accent-2-lift: #DAB564;
  --accent-2-hover: #E1BB6A;
  --accent-2-ink: #0D273D;
  color-scheme: dark;
}
html:root[data-mode="light"]{
  --surface-base: #2B69A6;
  --surface-raised: #2A66A2;
  --surface-overlay: #255D95;
  --border-subtle: #5287BD;
  --border-strong: #C3D8EE;
  --ink: #FFFFFF;
  --ink-muted: #EEF4FA;
  --ink-faint: #E6EFF8;
  --accent: #FFFFFF;
  --accent-lift: #FFFFFF;
  --accent-soft: #255D95;
  --accent-soft-lift: #2A66A2;
  --accent-ink: #0D273D;
  --accent-hover: #E3EEF8;
  --state-pass: #C2F2CF;
  --state-fail: #FFDDD8;
  --state-warn: #FFE2A6;
  --focus: #E9C475;
  --ton-1: #CFE3F5;
  --ton-2: #C9EBCF;
  --ton-3: #F4DFB3;
  --ton-4: #F7D2C6;
  --ton-5: #EBCFE8;
  --ton-6: #C2EDEC;
  --accent-2: #E9C475;
  --accent-2-lift: #F0D08A;
  --accent-2-hover: #F4D99B;
  --accent-2-ink: #0D273D;
  color-scheme: light;
}
[data-modus-fest="dunkel"]{
  --surface-base: #0D273D;
  --surface-raised: #122436;
  --surface-overlay: #16304A;
  --border-subtle: #333F4A;
  --border-strong: #75828F;
  --ink: #EEF4FA;
  --ink-muted: #C3D2E0;
  --ink-faint: #A5ACB2;
  --accent: #5CA7DC;
  --accent-lift: #69B4E9;
  --accent-soft: #263747;
  --accent-soft-lift: #304252;
  --accent-ink: #0D273D;
  --accent-hover: #6FBAF0;
  --state-pass: #67B57D;
  --state-fail: #FF7F73;
  --state-warn: #E49B2C;
  --focus: #CDA857;
  --ton-1: #7FB0DD;
  --ton-2: #89B992;
  --ton-3: #C4A674;
  --ton-4: #D59B89;
  --ton-5: #C69AC2;
  --ton-6: #6FBAB9;
  --accent-2: #CDA857;
  --accent-2-lift: #DAB564;
  --accent-2-hover: #E1BB6A;
  --accent-2-ink: #0D273D;
  color-scheme: dark;
}
[data-modus-fest="hell"]{
  --surface-base: #2B69A6;
  --surface-raised: #2A66A2;
  --surface-overlay: #255D95;
  --border-subtle: #5287BD;
  --border-strong: #C3D8EE;
  --ink: #FFFFFF;
  --ink-muted: #EEF4FA;
  --ink-faint: #E6EFF8;
  --accent: #FFFFFF;
  --accent-lift: #FFFFFF;
  --accent-soft: #255D95;
  --accent-soft-lift: #2A66A2;
  --accent-ink: #0D273D;
  --accent-hover: #E3EEF8;
  --state-pass: #C2F2CF;
  --state-fail: #FFDDD8;
  --state-warn: #FFE2A6;
  --focus: #E9C475;
  --ton-1: #CFE3F5;
  --ton-2: #C9EBCF;
  --ton-3: #F4DFB3;
  --ton-4: #F7D2C6;
  --ton-5: #EBCFE8;
  --ton-6: #C2EDEC;
  --accent-2: #E9C475;
  --accent-2-lift: #F0D08A;
  --accent-2-hover: #F4D99B;
  --accent-2-ink: #0D273D;
  color-scheme: light;
}