/* Perrevo – Startseite. Farben nur über tokens.css. */
:root {
  --hero-track: 240svh;      /* Hero-Tafel: 1,4 Bildschirme Scrollweg zum Abarbeiten der Aufgaben */
  --topbar-h: 4rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-dense: clamp(4rem, 9vw, 6.5rem);
  --section-quiet: clamp(5.5rem, 14vw, 10rem);
  --flap-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: calc(var(--topbar-h) + 1rem); scrollbar-color: var(--teal-700) var(--sand-200); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sand-100); color: var(--ink-900); font: 400 1.0625rem/1.6 var(--font-body); font-feature-settings: "ss01" 0; text-rendering: optimizeLegibility; }
::selection { background: var(--teal-100); color: var(--ink-900); }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--space-2); text-wrap: balance; }
h1 { font-size: clamp(2.05rem, 1.4rem + 3.4vw, 4.25rem); font-weight: 600; }
h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.85rem); font-weight: 600; }
h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
p { margin: 0 0 var(--space-2); text-wrap: pretty; }
a { color: var(--teal-700); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
input { caret-color: var(--copper-700); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
small, .note { color: var(--ink-700); font-size: .875rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; z-index: 30; left: var(--gutter); top: -4rem; padding: .5rem 1rem; border-radius: 8px; background: var(--ink-900); color: var(--sand-50); }
.skip:focus { top: .75rem; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .6rem 1.2rem; border-radius: 999px;
  background: var(--copper-700); color: var(--white); font: 600 1rem/1.2 var(--font-head); text-decoration: none; text-align: center; border: 0; cursor: pointer;
  box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--shade) 35%, transparent); transition: background-color 160ms cubic-bezier(.2, .8, .2, 1); }
.btn:hover { background: color-mix(in srgb, var(--copper-700) 86%, var(--shade)); text-decoration: none; }
.btn:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible, [role="tab"]:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 3px; }
.btn--large { min-height: 52px; padding: .8rem 1.6rem; font-size: 1.125rem; }

/* Kopfzeile, Button permanent */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--topbar-h); display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
  padding: 0 var(--gutter); background: var(--sand-100);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--sand-400) 45%, transparent); }
.topbar__logo { display: flex; align-items: center; text-decoration: none; }
.topbar__logo img { display: block; height: clamp(1.05rem, .95rem + .5vw, 1.35rem); width: auto; }

/* Hero: Überschrift links, Abflugtafel des Bürotags rechts. Gepinnt nur, wenn beides ins Bild passt. */
.hero { position: relative; background: linear-gradient(180deg, var(--sand-100) 0%, var(--sand-100) 35%, var(--sand-200) 100%); }
.hero__stage { display: grid; align-items: center; min-height: 100svh; padding: calc(var(--topbar-h) + clamp(1.5rem, 5svh, 3.5rem)) 0 clamp(2rem, 5svh, 3.5rem); }
.hero__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; width: 100%; max-width: 86rem; }
.hero__copy h1 { max-width: 15ch; }
.hero__copy p { max-width: 34rem; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; color: var(--ink-700); margin-bottom: var(--space-3); }
.hero__copy small { display: block; margin-top: .75rem; }
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); }
}
/* Laptops mit niedrigem Fenster: Überschrift nach Höhe skalieren, damit die Tafel trotzdem stehen bleiben kann */
@media (min-width: 1000px) and (max-height: 759px) {
  .hero__copy h1 { font-size: clamp(2rem, 8.2svh, 4.25rem); max-width: 16ch; }
  .hero__copy p { font-size: 1.0625rem; margin-bottom: var(--space-2); }
}
@media (min-width: 1000px) and (min-height: 540px) and (prefers-reduced-motion: no-preference) {
  .hero { height: var(--hero-track); }
  .hero__stage { position: sticky; top: 0; height: 100svh; }
}

/* Hero-Tafel: Kacheln wie im Rechner, Buchstaben statt Ziffern */
.hb { container-type: inline-size; position: relative; margin: 0; padding: clamp(1rem, 2.4vw, 1.75rem); border-radius: 6px; background: var(--board); color: var(--board-ink);
  border: 1px solid var(--board-seam); box-shadow: inset 0 0 0 5px var(--board), inset 0 0 0 6px var(--board-line); }
.hb .flaps { --flap-size: clamp(.6875rem, 2.25cqw, 1.0625rem); gap: 2px; }
.hb .flap { border-radius: 2px; }
.hb .flap-sep { width: .45em; }
.hb__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--board-line);
  color: var(--board-ink-strong); font: 600 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.2 var(--font-head); letter-spacing: -0.02em; }
.hb .hb__clock { --flap-size: clamp(.9375rem, 3cqw, 1.375rem); }
.hb__cols, .hb__row { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; column-gap: clamp(.6rem, 2cqw, 1.25rem); align-items: center; }
.hb__cols { margin: 0; padding: .85rem 0 .4rem; color: var(--board-ink-soft); font: 500 .8125rem/1.3 var(--font-body); }
.hb__cols span:first-child { width: calc(clamp(.6875rem, 2.25cqw, 1.0625rem) * 4.45 + 8px); }
.hb__cols span:last-child { width: calc(clamp(.6875rem, 2.25cqw, 1.0625rem) * 9 + 16px); }
.hb__rows { list-style: none; margin: 0; padding: 0; }
.hb__row { padding: .45rem 0; border-top: 1px solid var(--board-line); }
.hb__time .flap { color: var(--board-digit); }
.hb__task { color: var(--board-ink); transition: opacity 500ms ease; }
.hb__status { color: var(--board-ink-soft); }
.hb__row.is-done .hb__task { opacity: .55; }
.hb__row.is-done .hb__status { color: var(--board-ok); }
.hb__sum { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--board-ink-soft);
  color: var(--board-ink-strong); font: 600 clamp(.9375rem, .9rem + .3vw, 1.0625rem)/1.3 var(--font-head); }
.hb__sum small { display: block; color: var(--board-ink-soft); font: 400 .8125rem/1.4 var(--font-body); }
.hb__sum .flaps { --flap-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); gap: 3px; }
@container (max-width: 560px) {
  .hb .flaps { --flap-size: clamp(.6875rem, 3.5cqw, 1rem); }
  .hb__cols, .hb__row { grid-template-columns: max-content minmax(0, 1fr); }
  .hb__cols span:last-child, .hb .hb__status { display: none; }
  .hb__cols span:first-child { width: calc(clamp(.6875rem, 3.5cqw, 1rem) * 4.45 + 8px); }
  .hb__row.is-done .hb__task { color: var(--board-ok); opacity: 1; }
  /* Schmal: Status als zweite Zeile unter der Aufgabe, damit „offen → entlastet“ sichtbar bleibt */
  .hb__row { grid-template-areas: "time task" "time status"; row-gap: 4px; }
  .hb__time { grid-area: time; align-self: start; }
  .hb__task { grid-area: task; }
  .hb .hb__status { grid-area: status; display: flex; --flap-size: clamp(.5625rem, 2.8cqw, .8125rem); }
  .hb .hb__sum .flaps { --flap-size: clamp(1.5rem, 8cqw, 2.1rem); gap: 3px; }
}

/* Handy und Tablet: Text scrollt vorbei, dann bleibt die Tafel stehen, und der Tag läuft durch */
.hb-track { display: none; }
@media (max-width: 999px) and (prefers-reduced-motion: no-preference) {
  .hero__grid { align-items: start; }
  .hb { position: sticky; top: calc(var(--topbar-h) + .75rem); z-index: 1; }
  .hb-track { display: block; height: 110svh; }
}

/* Die Tafel */
.board-section { position: relative; padding: var(--section-dense) var(--gutter) 0; }
.board { --focus: var(--board-ink-strong); max-width: var(--maxw); margin: 0 auto; background: var(--board); color: var(--board-ink); border-radius: 6px;
  border: 1px solid var(--board-seam); box-shadow: inset 0 0 0 5px var(--board), inset 0 0 0 6px var(--board-line);
  --flap-col: calc(var(--flap-size) * 3.45 + 10px);
  padding: clamp(1rem, 2.4vw, 2rem) clamp(.875rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.6vw, 2.25rem); }
.board ::selection { background: var(--sand-200); color: var(--teal-800); }
.board :focus-visible { outline-color: var(--focus); }
.board__head { display: grid; gap: .5rem; padding-bottom: clamp(.875rem, 2vw, 1.25rem); border-bottom: 1px solid var(--board-line); }
.board__head h2 { margin: 0; color: var(--board-ink-strong); font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); }
.board__sub { margin: .9rem 0 0; padding: 0 .75rem; max-width: 46rem; text-wrap: wrap; color: var(--board-ink-soft); font-size: .875rem; line-height: 1.45; }
.board__intro { margin: 0; max-width: 34rem; color: var(--board-ink-soft); font-size: .9375rem; line-height: 1.5; }
.board__reset { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; margin-top: .75rem; padding: 0 .9rem; border: 1px solid var(--board-line); border-radius: 4px;
  background: transparent; color: var(--board-ink-strong); font: 600 .875rem/1 var(--font-body); cursor: pointer; transition: border-color 160ms, background-color 160ms; }
.board__reset::before { content: "↺"; font-size: 1.05rem; }
.board__reset:hover { border-color: var(--board-ink-soft); background: color-mix(in srgb, var(--board-ink-strong) 8%, transparent); }
.board__body { display: grid; gap: clamp(1.25rem, 2.6vw, 2.25rem); margin-top: clamp(.75rem, 1.6vw, 1.25rem); accent-color: var(--teal-700); }
@media (min-width: 900px) {
  .board__head { grid-template-columns: auto 1fr; align-items: end; column-gap: var(--space-4); }
  .board__controls { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .calc__result { display: grid; grid-template-columns: minmax(0, 1fr); }
  .bars { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 2.5rem); }
}

.board__cols { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--flap-col); column-gap: var(--space-2); align-items: baseline; margin: 0; padding: 0 .75rem .4rem; color: var(--board-ink-soft); font: 500 .8125rem/1.3 var(--font-body); letter-spacing: .01em; }
.board__cols > span:last-child { text-align: right; white-space: nowrap; }
.cols-short { display: none; }
@media (max-width: 520px) { .cols-long { display: none; } .cols-short { display: inline; } }
/* feine Spaltenlinie zwischen Aufgabe und Stunden, durch Kopf, Zeilen und Summe */
.board__cols::after, .row::after { content: ""; position: absolute; top: 0; bottom: 0; right: calc(.75rem + var(--flap-col) + var(--space-2) / 2); width: 1px; background: var(--board-line); pointer-events: none; }
.board__rows { display: grid; }
.row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--flap-col); grid-template-areas: "name flaps" "flag flaps"; align-items: center; align-content: center; column-gap: var(--space-2);
  width: 100%; min-height: 3.5rem; margin: 0; padding: .55rem .75rem; border: 0; border-top: 1px solid var(--board-line); border-radius: 0;
  background: transparent; color: var(--board-ink-soft); font: 500 1rem/1.3 var(--font-head); text-align: left; cursor: pointer;
  transition: background-color 180ms cubic-bezier(.2, .8, .2, 1), color 180ms cubic-bezier(.2, .8, .2, 1); }
.row__name { grid-area: name; min-width: 0; overflow-wrap: break-word; hyphens: manual; }
.row .flaps { grid-area: flaps; justify-content: flex-end; }
.row--total { cursor: default; margin-top: 0; border-top: 1px solid var(--board-ink-soft); color: var(--board-ink); font-weight: 600; }

/* Klappziffern */
.flaps { display: inline-flex; align-items: center; gap: 3px; font: 700 var(--flap-size)/1 var(--font-head); font-variant-numeric: tabular-nums; color: var(--board-digit); white-space: nowrap; }
.flap { position: relative; display: inline-block; width: 1em; height: 1.36em; border-radius: 4px; background: var(--board-tile); box-shadow: var(--shadow-tile); perspective: 240px; }
.flap__half, .flap__leaf { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; line-height: 1; backface-visibility: hidden; }
.flap__half--top, .flap__leaf--top { clip-path: inset(0 0 50% 0); background: var(--board-tile-top); }
.flap__half--bottom, .flap__leaf--bottom { clip-path: inset(50% 0 0 0); background: var(--board-tile); }
.flap::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: var(--board-seam); }
.flap__leaf { z-index: 2; transform-origin: 50% 50%; will-change: transform; }
.flap__leaf--top { animation: flap-fall 150ms cubic-bezier(.55, 0, .9, .45) both; }
.flap__leaf--bottom { transform: rotateX(90deg); animation: flap-land 190ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes flap-fall { from { transform: rotateX(0deg); } to { transform: rotateX(-90deg); } }
@keyframes flap-land { from { transform: rotateX(90deg); } to { transform: rotateX(0deg); } }
.flap-sep { display: inline-block; width: .38em; text-align: center; color: var(--board-ink-soft); }
@media (prefers-reduced-motion: reduce) { .flap__leaf { display: none; animation: none; } .row { transition: none; } }

/* Eingaben auf der Tafel */
.calc fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.calc legend { padding: 0; margin-bottom: .6rem; color: var(--board-ink-strong); font: 600 1.0625rem/1.3 var(--font-head); }
.board__controls { display: grid; gap: clamp(1.25rem, 2.4vw, 1.75rem); }
.calc__base { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .75rem; row-gap: .5rem; align-items: end; }
.calc .calc__base { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calc__base legend, .calc__share legend { grid-column: 1 / -1; float: left; width: 100%; }
.calc__field { display: grid; grid-template-rows: auto auto auto; gap: .3rem; min-width: 0; align-self: stretch; align-content: end; }
.calc__field label { color: var(--board-ink-soft); font-size: .875rem; line-height: 1.3; }
/* Eingaben im Material der Tafel: Kachelgrund, Kupferziffern, Haarlinie */
.calc input { width: 100%; min-height: 2.875rem; padding: .35rem .65rem; border: 0; border-radius: 3px; background: var(--board-tile);
  box-shadow: inset 0 -1px 0 var(--board-ink-soft), var(--shadow-tile); caret-color: var(--board-ink-strong);
  color: var(--board-digit); font: 700 1.25rem/1.2 var(--font-head); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.calc input:hover { box-shadow: inset 0 -2px 0 var(--board-ink-soft), var(--shadow-tile); }
.calc input:focus-visible { outline-offset: 2px; }
.calc input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--err-bg); }
.err { color: var(--ink-900); font-size: .8125rem; line-height: 1.35; }
.err:empty { display: none; }
.board .err { padding: .2rem .45rem; border-radius: 6px; background: var(--err-bg); }
.panel__note { grid-column: 1 / -1; margin: .35rem 0 0; color: var(--board-ink-soft); font-size: .875rem; line-height: 1.45; }
.calc__noscript { margin: 0; padding: var(--space-2); border-radius: 10px; background: var(--sand-50); color: var(--ink-900); }

/* Ergebnis: drei Balken mit Betrag und Stunden */
.calc__result { padding-top: clamp(1rem, 2vw, 1.5rem); border-top: 1px solid var(--board-line); }
.calc__label { margin: 0 0 .75rem; color: var(--board-ink-strong); font: 600 1.0625rem/1.3 var(--font-head); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.delay { display: grid; gap: .3rem; margin-top: clamp(1.25rem, 2.4vw, 1.75rem); padding: clamp(1rem, 2.2vw, 1.4rem) 0 0; border-top: 1px dashed var(--board-line); }
.delay__q { margin: 0; color: var(--board-ok); font: 600 .8125rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.delay__a { margin: 0; max-width: 40rem; color: var(--board-ink-strong); font: 500 clamp(1.05rem, 1rem + .5vw, 1.3rem)/1.45 var(--font-head); }
.delay__num { display: inline-block; color: var(--board-digit); font: 700 clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem)/1.1 var(--font-head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr) auto; grid-template-areas: "year amount hours" "track track track"; align-items: baseline; column-gap: .6rem; row-gap: .35rem; }
.bar__year { grid-area: year; color: var(--board-ink-soft); font-size: .875rem; }
.bar__amount { grid-area: amount; justify-self: end; color: var(--board-digit); font: 700 1.3125rem/1.1 var(--font-head); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.bar__hours { grid-area: hours; min-width: 5.5rem; text-align: right; color: var(--board-ink-soft); font-size: .875rem; font-variant-numeric: tabular-nums; }
.bar__track { grid-area: track; display: block; height: .5rem; border-radius: 999px; background: var(--board-tile); overflow: hidden; }
.bar__track i { display: block; height: 100%; border-radius: inherit; background: var(--sand-300); transform: scaleX(var(--fill, 0)); transform-origin: left; transition: transform 420ms cubic-bezier(.16, 1, .3, 1); }
.board .note { margin: .9rem 0 0; color: var(--board-ink-soft); font-size: .8125rem; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .bar__track i { transition: none; } }

.board-after { max-width: var(--maxw); margin: 0 auto; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(.875rem, 2.6vw, 2.25rem) 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.board-after p { margin: 0; max-width: 34rem; color: var(--ink-700); }

/* Kopfzeile: Seitenlinks ab Tablet */
.topbar__nav { display: none; gap: clamp(1rem, 2vw, 1.75rem); margin-left: auto; margin-right: var(--space-2); }
.topbar__nav a { color: var(--ink-700); font: 500 .9375rem/1.2 var(--font-body); text-decoration: none; padding: .5rem 0; }
.topbar__nav a:hover { color: var(--teal-700); }
@media (min-width: 860px) { .topbar__nav { display: flex; } }
/* Handy: Menüknopf, Links klappen als Liste unter der Kopfzeile auf */
.topbar__menu { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid var(--sand-300); border-radius: 999px;
  background: transparent; color: var(--ink-900); cursor: pointer; }
.topbar__menu[hidden] { display: none; }
.topbar__menu span, .topbar__menu span::before, .topbar__menu span::after { display: block; width: 16px; height: 2px; border-radius: 1px; background: currentColor; transition: transform 200ms cubic-bezier(.2, .8, .2, 1), opacity 160ms; }
.topbar__menu span { position: relative; }
.topbar__menu span::before, .topbar__menu span::after { content: ""; position: absolute; left: 0; }
.topbar__menu span::before { top: -5px; }
.topbar__menu span::after { top: 5px; }
.topbar__menu[aria-expanded="true"] span { background: transparent; }
.topbar__menu[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); background: var(--ink-900); }
.topbar__menu[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); background: var(--ink-900); }
.topbar__menu:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 2px; }
@media (max-width: 859px) {
  .topbar__nav.is-open { display: flex; flex-direction: column; position: fixed; top: var(--topbar-h); left: 0; right: 0; margin: 0; padding: .25rem var(--gutter) 1rem;
    background: var(--sand-100); border-bottom: 1px solid var(--sand-300); box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--shade) 40%, transparent); }
  .topbar__nav.is-open a { display: flex; align-items: center; min-height: 48px; border-top: 1px solid var(--sand-300); font-size: 1.0625rem; color: var(--ink-900); }
  .topbar__nav.is-open a:first-child { border-top: 0; }
}
@media (min-width: 860px) { .topbar__menu, .topbar__menu[hidden] { display: none; } }

/* Vertrauensleiste: vier Haltestellen auf einer Haarlinie */
.trust { background: var(--teal-800); }
.trust__list { list-style: none; display: grid; gap: .5rem var(--space-3); margin: 0 auto; padding-top: 1rem; padding-bottom: 1rem; }
.trust__list li { display: flex; align-items: center; gap: .6rem; white-space: nowrap; color: var(--sand-50); font: 500 .9375rem/1.35 var(--font-body); }
.trust__list li::before { content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 2px; background: var(--teal-300); }
@media (min-width: 700px) { .trust__list { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: var(--space-4); } }
@media (min-width: 1100px) { .trust__list { grid-template-columns: repeat(4, auto); justify-content: space-between; } }

/* So funktioniert's: drei Stationen, ein Signal läuft die Linie entlang */
.flow__lead, .demo__lead { max-width: 40rem; color: var(--ink-700); }
.flow__route { --stop: .9rem; position: relative; list-style: none; display: grid; gap: var(--space-4); margin: var(--space-4) 0 0; padding: 0 0 0 2.25rem; }
.flow__route::before { content: ""; position: absolute; left: calc(var(--stop) / 2 - .5px); top: .5rem; bottom: .5rem; width: 1px; background: color-mix(in srgb, var(--teal-700) 45%, transparent); }
.flow__route::after { content: ""; position: absolute; left: calc(var(--stop) / 2 - 4px); top: .5rem; width: 8px; height: 8px; border-radius: 2px; background: var(--copper-500); opacity: 0; }
.flow__stop { position: relative; }
.flow__stop::before { content: ""; position: absolute; left: -2.25rem; top: .35rem; width: var(--stop); height: var(--stop); border: 2px solid var(--teal-700); border-radius: 2px; background: var(--sand-100); }
.flow__stop--ai::before { background: var(--teal-700); }
.flow__stop h3 { margin-bottom: .6rem; }
.flow__items { list-style: none; margin: 0; padding: 0; }
.flow__items li { padding: .45rem 0; border-top: 1px solid var(--sand-300); color: var(--ink-700); }
.flow__stop--ai .flow__items li { color: var(--teal-700); font-weight: 500; }
@media (min-width: 900px) {
  .flow__route { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); padding: 2.25rem 0 0; }
  .flow__route::before { left: 0; right: 0; top: calc(var(--stop) / 2 - .5px); bottom: auto; width: auto; height: 1px; }
  .flow__route::after { top: calc(var(--stop) / 2 - 4px); left: 0; }
  .flow__stop::before { left: 0; top: -2.25rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .flow__route.is-live::after { animation: flow-v 3.6s cubic-bezier(.45, 0, .55, 1) infinite; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .flow__route.is-live::after { animation-name: flow-h; }
}
@keyframes flow-v { 0% { opacity: 0; translate: 0 0; } 8% { opacity: 1; } 85% { opacity: 1; translate: 0 var(--flow-len, 400px); } 100% { opacity: 0; translate: 0 var(--flow-len, 400px); } }
@keyframes flow-h { 0% { opacity: 0; translate: 0 0; } 8% { opacity: 1; } 85% { opacity: 1; translate: var(--flow-len, 800px) 0; } 100% { opacity: 0; translate: var(--flow-len, 800px) 0; } }

/* Live-Demo: Reiter, links die Anfrage, rechts das vorbereitete Ergebnis auf Tafelmaterial */
.demo { background: var(--sand-200); }
.demo__tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--space-3) 0; }
.demo__tabs [role="tab"] { min-height: 44px; padding: .55rem 1.1rem; border: 1px solid var(--sand-400); border-radius: 999px; background: transparent; color: var(--ink-900);
  font: 600 .9375rem/1.2 var(--font-head); cursor: pointer; transition: background-color 160ms, color 160ms, border-color 160ms; }
.demo__tabs [role="tab"]:hover { border-color: var(--teal-700); color: var(--teal-700); }
.demo__tabs [aria-selected="true"], .demo__tabs [aria-selected="true"]:hover { background: var(--teal-700); border-color: var(--teal-700); color: var(--sand-50); }
.demo__panel { display: grid; gap: var(--space-3); align-items: start; }
.demo__panel[hidden] { display: none; }
@media (min-width: 900px) { .demo__panel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(1.5rem, 4vw, 3rem); } }
.demo__meta { margin: 0 0 .6rem; color: var(--ink-700); font: 500 .8125rem/1.4 var(--font-body); }
.demo__in { padding-top: .25rem; }
.demo__msg { margin: 0; padding: var(--space-3); border: 1px solid var(--sand-300); background: var(--sand-100); border-radius: 6px;
  font: 400 clamp(1.0625rem, 1rem + .3vw, 1.1875rem)/1.55 var(--font-body); color: var(--ink-900); }
.demo__out { padding: clamp(1rem, 2.4vw, 1.75rem); border-radius: 6px; background: var(--board); color: var(--board-ink);
  border: 1px solid var(--board-seam); box-shadow: inset 0 0 0 5px var(--board), inset 0 0 0 6px var(--board-line); }
.demo__out .demo__meta { color: var(--board-ink-soft); }
.demo__fields { margin: 0; }
.demo__fields > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--board-line); }
.demo__fields dt { color: var(--board-ink-soft); font: 500 .875rem/1.45 var(--font-body); }
.demo__fields dd { margin: 0; color: var(--board-ink-strong); font: 500 1rem/1.45 var(--font-head); }
.demo__fields b, .demo__saved b { color: var(--board-digit); font-variant-numeric: tabular-nums; }
.demo__status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin: 0; padding-top: .8rem; border-top: 1px solid var(--board-ink-soft);
  color: var(--board-ok); font: 600 .9375rem/1.4 var(--font-head); }
.demo__saved { color: var(--board-ink-soft); font: 500 .875rem/1.4 var(--font-body); }
.demo__note { margin-top: var(--space-3); }
@media (prefers-reduced-motion: no-preference) {
  .demo__panel.is-playing .demo__fields > div, .demo__panel.is-playing .demo__status { animation: demo-in 420ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 260ms + 350ms); }
  .demo__panel.is-playing .demo__msg { animation: demo-in 380ms cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes demo-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 520px) { .demo__fields > div { grid-template-columns: 1fr; gap: .1rem; } }

/* Leistungen als nummerierte Tafelzeilen */
.services__grid { display: grid; gap: var(--space-4); }
.services__intro p { max-width: 26rem; color: var(--ink-700); }
.services__all { font-weight: 500; }
.services__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sand-300); }
.services__list li { border-bottom: 1px solid var(--sand-300); }
.services__list a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 1.25rem; gap: var(--space-2); align-items: baseline; padding: var(--space-3) 0; color: var(--ink-900); text-decoration: none; }
.services__list a::after { content: "→"; color: var(--teal-700); font: 500 1.125rem/1 var(--font-head); transition: translate 200ms cubic-bezier(.2, .8, .2, 1); }
.services__list a:hover strong { color: var(--teal-700); }
.services__list a:hover::after { translate: 4px 0; }
.services__no { color: color-mix(in srgb, var(--copper-700) 82%, var(--ink-900)); font: 700 .9375rem/1.4 var(--font-head); font-variant-numeric: tabular-nums; }
.services__text strong { display: block; font: 600 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.3 var(--font-head); letter-spacing: -0.01em; transition: color 160ms; }
.services__text span { display: block; margin-top: .3rem; color: var(--ink-700); }
@media (min-width: 900px) {
  .services__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .services__intro { position: sticky; top: calc(var(--topbar-h) + 2rem); }
}


/* Unterseiten: Kopf und Leistungsblöcke */
.topbar__nav a[aria-current="page"] { color: var(--ink-900); text-decoration: underline; text-decoration-color: var(--teal-700); text-underline-offset: .45em; text-decoration-thickness: 2px; }
.page-head { padding: calc(var(--topbar-h) + clamp(3rem, 9vw, 6.5rem)) 0 clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--sand-300); }
.page-head h1 { max-width: 18ch; }
.page-head__kicker { margin-bottom: var(--space-2); color: var(--teal-700); font: 600 .9375rem/1.3 var(--font-head); }
.page-head__lead { max-width: 40rem; color: var(--ink-700); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; margin-bottom: var(--space-3); }
.offers { padding-top: var(--space-3); padding-bottom: var(--section-dense); }
.offer { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-2); padding: clamp(2rem, 5vw, 3.5rem) 0; border-bottom: 1px solid var(--sand-300); scroll-margin-top: calc(var(--topbar-h) + 1rem); }
.offer__no { margin: .1rem 0 0; color: color-mix(in srgb, var(--copper-700) 82%, var(--ink-900)); font: 700 clamp(1.5rem, 1.2rem + 1.4vw, 2.6rem)/1 var(--font-head); font-variant-numeric: tabular-nums; }
.offer h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); max-width: 24ch; margin-bottom: .5rem; }
.offer__what { margin-bottom: var(--space-2); color: var(--teal-700); font: 600 1rem/1.4 var(--font-head); }
.offer__body > p:not(.offer__what) { max-width: 42rem; color: var(--ink-700); }
.offer__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; max-width: 42rem; }
.offer__list li { position: relative; padding: .55rem 0 .55rem 1.5rem; border-top: 1px solid var(--sand-300); }
.offer__list li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: .55rem; height: .55rem; border-radius: 2px; background: var(--teal-700); }
@media (min-width: 900px) {
  .offer { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: clamp(1.25rem, 2.5vw, 2rem); }
}

/* Überschriften klappen beim Reinscrollen Wort für Wort ein, wie die Buchstaben im Logo */
.fold .fold__w { display: inline-block; transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .fold:not(.is-in) .fold__w { opacity: 0; transform: perspective(700px) rotateX(-90deg); }
  .fold.is-in .fold__w { transition: transform 620ms cubic-bezier(.16, 1, .3, 1), opacity 260ms ease; transition-delay: calc(var(--i) * 65ms); }
}

/* Nummern klappen einmal kurz durch */

/* Linien zeichnen sich: Ablauf-Route und So-geht's-Linie */
@media (prefers-reduced-motion: no-preference) {
  .js-draw .route li::after { transform: scaleY(0); transform-origin: 50% 0; transition: transform 700ms cubic-bezier(.45, 0, .2, 1); transition-delay: calc(var(--i, 0) * 260ms); }
  .js-draw .route li::before { scale: .3; opacity: 0; transition: scale 360ms cubic-bezier(.22, 1, .36, 1), opacity 200ms; transition-delay: calc(var(--i, 0) * 260ms + 120ms); }
  .js-draw .route.is-drawn li::after { transform: scaleY(1); }
  .js-draw .route.is-drawn li::before { scale: 1; opacity: 1; }
  .js-draw .flow__route::before { transform: scaleY(0); transform-origin: 50% 0; transition: transform 900ms cubic-bezier(.45, 0, .2, 1); }
  .js-draw .flow__route.is-live::before { transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .js-draw .flow__route::before { transform: scaleX(0); transform-origin: 0 50%; }
}

/* Illustrationen im Tafel-Stil: Papier, Petrol, Tinte. Kein Kupfer außer bei Zahlen. */
.ill { display: block; width: 100%; height: auto; overflow: visible; }
.ill .p { fill: var(--sand-50); stroke: var(--ink-900); stroke-width: 2; stroke-linejoin: round; }
.ill .s { fill: none; stroke: var(--ink-900); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ill .s.thick { stroke-width: 5; }
.ill .ts { fill: none; stroke: var(--teal-700); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ill .t1 { fill: var(--teal-100); }
.ill .t3 { fill: var(--teal-300); }
.ill .t7 { fill: var(--teal-700); }
.ill .t8 { fill: var(--teal-800); }
.ill .frame { fill: none; stroke: var(--board-line); }
.ill .tile { fill: var(--board-tile); }
.ill .lbl { fill: var(--board-ink-soft); opacity: .7; }
.ill .okdot { fill: var(--board-ok); }
.ill .lens { fill: color-mix(in srgb, var(--teal-100) 55%, transparent); stroke: var(--ink-900); stroke-width: 3; }
.ill .dash { fill: none; stroke: var(--teal-700); stroke-width: 2; stroke-dasharray: 4 6; }
.ill .tx { fill: var(--board-digit); font: 700 22px var(--font-head); font-variant-numeric: tabular-nums; }
.ill .drop, .ill .pop, .ill .fly, .ill .gather, .ill .packet, .ill .scan, .ill .row .tile { transform-box: fill-box; }
.ill .check { stroke-dasharray: 60; stroke-dashoffset: 0; }

.flow__stop .ill { max-width: 15rem; margin: 0 0 var(--space-2); }
.offer__ill { margin: 0; max-width: 22rem; }
@media (min-width: 900px) {
  .offer { grid-template-columns: 4.5rem minmax(0, 5fr) minmax(0, 3fr); column-gap: clamp(1.25rem, 3vw, 3rem); }
  .offer__ill { align-self: center; }
}
@media (max-width: 899px) { .offer__ill { grid-column: 2; max-width: 18rem; } }

@media (prefers-reduced-motion: no-preference) {
  /* Ausgangslage, bis die Illustration ins Bild kommt */
  .js-ill .ill:not(.is-in) .drop { opacity: 0; transform: translateY(-46px); }
  .js-ill .ill:not(.is-in) .pop { opacity: 0; transform: scale(.85); }
  .js-ill .ill:not(.is-in) .fly { opacity: 0; transform: translate(-40px, 10px); }
  .js-ill .ill:not(.is-in) .gather { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
  .js-ill .ill:not(.is-in) .check { stroke-dashoffset: 60; }
  .js-ill .ill:not(.is-in) .grow { transform: scaleX(0); }
  .ill .drop { transition: transform 750ms cubic-bezier(.22, 1, .36, 1), opacity 260ms; transition-delay: var(--d, 0ms); }
  .ill .pop { transform-origin: 50% 100%; transition: transform 500ms cubic-bezier(.22, 1, .36, 1), opacity 260ms; transition-delay: var(--d, 0ms); }
  .ill .gather { transition: transform 900ms cubic-bezier(.22, 1, .36, 1), opacity 300ms; transition-delay: var(--d, 0ms); }
  .ill .grow { transform-box: fill-box; transform-origin: 0 50%; transition: transform 500ms ease-out; transition-delay: var(--d, 0ms); }
  .ill .check { transition: stroke-dashoffset 600ms ease-out; transition-delay: calc(var(--d, 900ms) + 300ms); }
  .ill.is-in .fly { animation: ill-fly 1100ms cubic-bezier(.45, 0, .2, 1) both; }
  .ill.is-in .wave { animation: ill-ring 1.6s ease-out infinite; }
  .ill.is-in .wave.w2 { animation-delay: .25s; }
  .ill.is-in .ring { animation: ill-ring 900ms ease-out 3 both; }
  .ill.is-in .ring.r2 { animation-delay: .2s; }
  .ill.is-in .row .tile { animation: ill-flap 4.5s ease-in-out infinite; animation-delay: var(--d); transform-origin: 50% 50%; }
  .ill.is-in .row .okdot { animation: ill-ok 4.5s ease-in-out infinite; animation-delay: var(--d); }
  .ill.is-in .packet { animation: ill-packet 2.1s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: var(--d); }
  .ill.is-in .scan { animation: ill-scan 4s ease-in-out infinite; }
}
@keyframes ill-fly { from { transform: translate(-40px, 10px); opacity: 0; } 20% { opacity: 1; } 70% { transform: translate(110px, -40px); opacity: 1; } to { transform: translate(120px, -44px); opacity: 0; } }
@keyframes ill-ring { from { opacity: 0; } 30% { opacity: 1; } to { opacity: 0; } }
@keyframes ill-flap { 0%, 70%, 100% { transform: scaleY(1); } 76% { transform: scaleY(.05); } 82% { transform: scaleY(1); } }
@keyframes ill-ok { 0%, 74% { opacity: .25; } 84%, 100% { opacity: 1; } }
/* „Ihr Team": ein Vorgang kommt herein, wird abgehakt und abgelegt, in Schleife wie die anderen beiden */
.ill .handoff { transform-box: fill-box; }
.ill .tick { stroke-dasharray: 60; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ill.is-in .handoff { animation: ill-handoff 4.5s 1.2s ease-in-out infinite both; }
  .ill.is-in .tick { animation: ill-tick 4.5s 1.2s ease-out infinite both; }
  .js-ill .ill:not(.is-in) .tick { stroke-dashoffset: 60; }
}
@keyframes ill-handoff { 0% { opacity: 0; transform: translateX(-34px); } 12%, 78% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes ill-tick { 0%, 28% { stroke-dashoffset: 60; } 42%, 100% { stroke-dashoffset: 0; } }
@keyframes ill-packet { from { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateX(52px); opacity: 0; } }
@keyframes ill-scan { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(0, 36px); } 50% { transform: translate(0, 72px); } 75% { transform: translate(0, 108px); } }

/* Fotos: ruhig gerahmt, keine Schatten, Ecken wie die Tafel */
.photo { margin: 0; overflow: hidden; border-radius: 6px; background: var(--sand-200); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stance__photo { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.stance__photo img { aspect-ratio: 2 / 1; object-position: 50% 50%; }
@media (max-width: 640px) { .stance__photo img { aspect-ratio: 4 / 3; object-position: 45% 50%; } }
.photo__cap { padding: .75rem 1rem; color: var(--ink-700); font-size: .875rem; line-height: 1.45; }
.photo__ai { display: block; margin-top: .3rem; color: var(--ink-700); opacity: 1; font-size: .75rem; letter-spacing: .01em; }
.page-head__grid { display: grid; gap: var(--space-4); align-items: center; }
.page-head__photo { aspect-ratio: 4 / 3; }
@media (min-width: 1000px) { .page-head__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 4.5rem); } }
@media (prefers-reduced-motion: no-preference) {
  .js-ill .photo img { transform: scale(1.06); transition: transform 1400ms cubic-bezier(.16, 1, .3, 1); }
  .js-ill .photo.is-in img { transform: none; }
}

/* „Posteingang sortiert": Nachrichten liegen als Stapel im Eingang und landen als Zeilen auf der Tafel */
.sort { position: relative; display: grid; gap: var(--space-3); margin: var(--space-4) 0 var(--space-3); padding: clamp(1.1rem, 3vw, 2rem); border-radius: 6px;
  background: var(--board); color: var(--board-ink); border: 1px solid var(--board-seam); box-shadow: inset 0 0 0 5px var(--board), inset 0 0 0 6px var(--board-line); }
.sort__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--board-line);
  color: var(--board-ink-strong); font: 600 clamp(1.1rem, 1rem + .6vw, 1.4rem)/1.3 var(--font-head); }
.sort__hint { display: block; color: var(--board-ok); font: 600 .8125rem/1.6 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.sort__head { align-items: center; }
.sort__clock { --flap-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); flex: none; }
/* Beim Scrollen bleibt die Tafel auf großen Bildschirmen stehen, bis alles einsortiert ist */
@media (min-width: 900px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  .js-sort-pin .sort-track { height: 230vh; }
  .js-sort-pin .sort-track .sort { position: sticky; top: calc(var(--topbar-h) + 3vh); }
}
.sort__pile { display: none; }
.sort__rows { margin: 0; padding: 0; list-style: none; }
.sort__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem 1rem; min-height: 4.25rem; padding: .7rem .9rem;
  border-bottom: 1px solid var(--board-line); border-radius: 4px; }
.sort__in { display: none; }
.sort__out { display: grid; min-width: 0; }
.sort__cat { color: var(--board-ink-strong); font: 600 1.05rem/1.3 var(--font-head); }
.sort__who { color: var(--board-ink-soft); font: 500 .875rem/1.4 var(--font-body); }
.sort__status { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid currentColor; font: 600 .8125rem/1.2 var(--font-body); white-space: nowrap; }
.sort__item[data-state="ok"] .sort__status { color: var(--board-ok); }
.sort__item[data-state="ok"] .sort__status::before { content: "✓"; }
.sort__item[data-state="wait"] .sort__status { color: var(--sand-50); }
.sort__item[data-state="wait"] .sort__status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.sort__sum { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; margin: 0; color: var(--board-ink-soft); font: 500 .9375rem/1.4 var(--font-body); }
.sort__sum b { color: var(--board-digit); font: 700 1.5rem/1 var(--font-head); font-variant-numeric: tabular-nums; margin-right: .3rem; }
@media (max-width: 559px) {
  .sort__item { min-height: 3.5rem; padding: .5rem .6rem; gap: .25rem .6rem; }
  .sort__cat { font-size: .975rem; }
  .sort__who { font-size: .8125rem; }
  .sort__status { padding: .25rem .55rem; font-size: .75rem; }
}

.flow__swipe { display: none; }
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .flow__swipe-arrow { animation: swipe-nudge 1.6s cubic-bezier(.45, 0, .55, 1) infinite; }
}
@keyframes swipe-nudge { 0%, 100% { translate: 0 0; } 50% { translate: .4rem 0; } }
/* Handy und Tablet: die drei Stationen als Karten zum Wischen statt drei Bildschirme untereinander */
@media (max-width: 899px) {
  .flow__route { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding: .25rem var(--gutter) 1rem; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .flow__route::-webkit-scrollbar { display: none; }
  .flow__route::before, .flow__route::after, .flow__stop::before { display: none; }
  .flow__stop { flex: 0 0 min(80%, 20rem); scroll-snap-align: start; padding: 1rem 1rem .75rem; border: 1px solid var(--sand-300); border-radius: 6px; background: var(--sand-50); }
  .flow__stop--ai { border-color: var(--teal-300); background: var(--teal-50); }
  .flow__stop .ill { max-width: 9.5rem; margin-bottom: .5rem; }
  .flow__items li { padding: .35rem 0; font-size: .9375rem; }
  .flow__swipe { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 0; color: var(--teal-700); font: 600 .9375rem/1.3 var(--font-body); }
  .flow__swipe-arrow { display: inline-block; font-size: 1.25rem; line-height: 1; }
}
/* Mit Bewegung: Stapel links (Handy: oben), Zeilen fliegen nacheinander auf die Tafel */
.sort.js-sort .sort__pile { display: block; position: relative; min-height: 13rem; border: 1px dashed var(--board-line); border-radius: 6px; }
.sort.js-sort .sort__pile::before { content: "Eingang"; position: absolute; left: .8rem; top: .6rem; color: var(--board-ink-soft); font: 600 .75rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 900px) {
  .sort.js-sort { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "head head" "pile rows" "sum sum"; column-gap: clamp(1.5rem, 3vw, 2.5rem); }
  .sort.js-sort .sort__head { grid-area: head; }
  .sort.js-sort .sort__pile { grid-area: pile; }
  .sort.js-sort .sort__rows { grid-area: rows; }
  .sort.js-sort .sort__sum { grid-area: sum; }
}
.sort.js-sort .sort__item { transition: transform 750ms cubic-bezier(.65, 0, .25, 1), background-color 220ms, box-shadow 220ms; }
.sort.js-sort .sort__item.is-pile { background: var(--sand-50); box-shadow: 0 6px 18px color-mix(in srgb, var(--shade) 35%, transparent); border-bottom-color: transparent; }
.sort.js-sort .sort__item.is-pile .sort__in { display: grid; }
.sort.js-sort .sort__item.is-pile .sort__out, .sort.js-sort .sort__item.is-pile .sort__status { display: none; }
.sort__src { color: var(--teal-700); font: 600 .75rem/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.sort__msg { color: var(--ink-900); font: 500 .9375rem/1.35 var(--font-body); }
.sort.js-sort .sort__item:not(.is-pile) .sort__out, .sort.js-sort .sort__item:not(.is-pile) .sort__status { animation: sort-in 350ms 180ms both; }
@keyframes sort-in { from { opacity: 0; } }
.sort.js-sort .sort__pile::after { content: "✓ Alles sortiert"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--board-ok); font: 600 1rem/1 var(--font-head); opacity: 0; transition: opacity 500ms; }
.sort.js-sort.is-done .sort__pile::after { opacity: 1; }
/* Handy und Tablet: Stapel liegt direkt auf der Tafel, Zeilen einzeilig. So passt alles auf einen Bildschirm,
   die Tafel bleibt stehen, und man sieht jeden Zettel vom Stapel auf seinen Platz fliegen. */
@media (max-width: 899px) {
  .sort.js-sort { grid-template-areas: "head" "rows" "sum"; gap: .9rem; padding: 1rem .9rem; }
  .sort.js-sort .sort__head { grid-area: head; flex-wrap: nowrap; padding-bottom: .6rem; font-size: 1.05rem; }
  .sort.js-sort .sort__clock { --flap-size: 1.15rem; }
  .sort.js-sort .sort__rows { grid-area: rows; }
  .sort.js-sort .sort__pile { grid-area: rows; align-self: center; min-height: 9rem; border: 0; }
  .sort.js-sort .sort__pile::before { content: none; }
  .sort.js-sort .sort__pile::after { content: none; }
  .sort.js-sort .sort__sum { grid-area: sum; display: grid; grid-template-columns: 1fr 1fr; gap: .35rem 1rem; font-size: .8125rem; }
  .sort.js-sort .sort__sum b { font-size: 1.2rem; }
  .sort.js-sort .sort__item { grid-template-columns: minmax(0, 1fr) auto; min-height: 2.9rem; padding: .35rem .5rem; }
  .sort.js-sort .sort__out { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sort.js-sort .sort__cat { font-size: .9375rem; }
  .sort.js-sort .sort__who { font-size: .8125rem; }
  .sort.js-sort .sort__who::before { content: " · "; }
}
@media (max-width: 899px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
  .js-sort-pin .sort-track { height: 190svh; }
  .js-sort-pin .sort-track .sort { position: sticky; top: calc(var(--topbar-h) + .5rem); }
}
.sort.no-anim .sort__item { transition: none !important; }
.flow__route--plain { padding-top: 0; }
.flow__route--plain::before, .flow__route--plain::after, .flow__route--plain .flow__stop::before { display: none; }

/* Abschnittsmarken: Nummer und Thema über der Überschrift */
.kicker { display: flex; align-items: center; gap: .6rem; margin: 0 0 var(--space-2); color: var(--teal-700); font: 600 .8125rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.kicker span { color: color-mix(in srgb, var(--copper-700) 82%, var(--ink-900)); font-variant-numeric: tabular-nums; }
.kicker::after { content: ""; width: 2.5rem; height: 1px; background: currentColor; opacity: .5; }

/* Fortschrittslinie am linken Rand, nur auf breiten Bildschirmen */
.rail { display: none; }
@media (min-width: 1360px) {
  .rail { display: block; position: fixed; z-index: 15; left: 28px; top: 22vh; width: 1px; height: 56vh; background: var(--sand-300); pointer-events: none; }
  .rail i { position: absolute; inset: 0; background: var(--teal-700); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
  .rail::after { content: ""; position: absolute; left: -3px; top: calc(var(--p, 0) * 100%); width: 7px; height: 7px; margin-top: -3px; border-radius: 2px; background: var(--teal-700); }
}

/* Abschnitte: dicht und ruhig im Wechsel */
.section { padding: var(--section-dense) 0; }
.section--quiet { padding: var(--section-quiet) 0; }
.section h2 { max-width: 22ch; }

/* Alltag */
.day { padding-top: calc(var(--section-dense) + 1rem); }
.day__grid { display: grid; gap: var(--space-4); }
.day__intro p { max-width: 26rem; color: var(--ink-700); }
.day__list { list-style: none; margin: 0; padding: 0; }
.scene { --flap-size: 1.25rem; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(.875rem, 2.5vw, 2rem); padding: var(--space-3) 0; border-top: 1px solid var(--sand-300); }
.scene:last-child { border-bottom: 1px solid var(--sand-300); }
.scene__time { margin: 0; line-height: 1; }
/* Uhrzeiten als stehende Klappkacheln: die Szenen lesen sich wie Abfahrten derselben Tafel */
.flaps--static .flap-sep { color: var(--ink-700); width: .32em; }
.scene__text p { margin: 0; max-width: 60ch; }
.scene__tag { display: inline-block; margin-top: .6rem; color: var(--teal-700); font: 500 .875rem var(--font-head); }
.scene--last .scene__text p { font-family: var(--font-head); font-size: 1.1875rem; line-height: 1.45; letter-spacing: -0.005em; }
@media (min-width: 900px) {
  .day__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .day__intro { position: sticky; top: calc(var(--topbar-h) + 2rem); }
  .scene { --flap-size: 1.5rem; }
}

/* Haltung */
.stance { background: var(--sand-50); }
.stance__title { font-size: clamp(2.4rem, 1.5rem + 4.5vw, 5.25rem); letter-spacing: -0.035em; line-height: 1; max-width: 12ch; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.stance__body { max-width: 40rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.6; }
.stance__split { display: grid; gap: var(--space-4); margin-top: clamp(2.5rem, 6vw, 4.5rem); padding-top: var(--space-4); border-top: 1px solid var(--sand-300); }
.stance__split h3 { margin-bottom: .75rem; }
.stance__split ul { list-style: none; margin: 0; padding: 0; }
.stance__split li { padding: .65rem 0; border-top: 1px solid var(--sand-200); color: var(--ink-700); }
.stance__split li:first-child { border-top: 0; }
@media (min-width: 760px) { .stance__split { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 6vw, 5rem); } }

/* Ablauf: Stationen einer Route in Tafelzeilen. Unabhängig von der Anzahl der Schritte. */
.route { --stop: .7rem; --row-pad: var(--space-3); list-style: none; margin: var(--space-4) 0 0; padding: 0; border-top: 1px solid var(--sand-300); }
.route li { position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: var(--space-2); row-gap: .3rem; padding: var(--row-pad) 0; border-bottom: 1px solid var(--sand-300); }
.route li::before { content: ""; grid-row: 1 / span 2; justify-self: center; position: relative; z-index: 1; width: var(--stop); height: var(--stop); margin-top: .4rem;
  border: 1.5px solid var(--teal-700); border-radius: 2px; background: var(--sand-100); }
.route li:last-child::before { background: var(--teal-700); }
.route li::after { content: ""; position: absolute; left: calc(.875rem - .5px); top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--teal-700) 55%, transparent); }
.route li:first-child::after { top: calc(var(--row-pad) + .75rem); }
.route li:last-child::after { bottom: calc(100% - var(--row-pad) - .75rem); }
.route li:only-child::after { display: none; }
.route h3 { grid-column: 2; margin: 0; }
.route p { grid-column: 2; margin: 0; max-width: 46rem; color: var(--ink-700); }
@media (min-width: 900px) {
  .route li { grid-template-columns: 1.75rem minmax(0, 15rem) minmax(0, 1fr); column-gap: var(--space-3); align-items: baseline; }
  .route li::before { grid-row: 1; align-self: start; }
  .route p { grid-column: 3; }
}

/* Fragen */
.faq__grid { display: grid; gap: var(--space-3); }
.faq details { border-top: 1px solid var(--sand-300); }
.faq details:last-child { border-bottom: 1px solid var(--sand-300); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); min-height: 3.5rem; padding: .85rem 0; cursor: pointer; list-style: none;
  font: 600 1.125rem/1.35 var(--font-head); color: var(--ink-900); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 1rem; height: 1rem;
  background: linear-gradient(var(--teal-700), var(--teal-700)) center / 100% 2px no-repeat, linear-gradient(var(--teal-700), var(--teal-700)) center / 2px 100% no-repeat;
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--teal-700); }
.faq details p { margin: 0; padding: 0 0 var(--space-3); max-width: 62ch; color: var(--ink-700); }
@media (min-width: 900px) { .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: start; } }
@media (prefers-reduced-motion: reduce) { .faq summary::after, .btn { transition: none; } }

/* Abschluss: Daniel und die Einladung als ein Ende. Links der Mensch, rechts das Ticket in Tafel-Material. */
.ending { padding: var(--section-dense) 0; background: var(--sand-200); }
.ending__grid { display: grid; gap: var(--space-4); align-items: center; }
.ending__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); letter-spacing: -0.03em; line-height: 1.04; max-width: 14ch; margin-bottom: var(--space-3); }
.ending__person p { max-width: 34rem; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }
.ending__person p:last-child { margin-bottom: 0; }
.ticket { --focus: var(--board-ink-strong); padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 6px; background: var(--board); color: var(--board-ink);
  border: 1px solid var(--board-seam); box-shadow: inset 0 0 0 5px var(--board), inset 0 0 0 6px var(--board-line); }
.ticket :focus-visible { outline-color: var(--focus); }
.ticket__title { margin: 0 0 var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--board-line); color: var(--board-ink-strong); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); letter-spacing: -0.02em; }
.ticket__meta { margin: .9rem 0 0; color: var(--board-ink-soft); font-size: .875rem; }
@media (min-width: 900px) { .ending__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2.5rem, 6vw, 6rem); } }

.footer { padding: var(--space-3) 0 var(--space-4); background: var(--sand-100); color: var(--ink-700); font-size: .875rem; }
.footer .wrap { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.footer a { color: var(--ink-700); margin-left: var(--space-2); }
.legal { max-width: 46rem; margin: 0 auto; padding: 6rem var(--space-3) var(--space-5); }
.legal h1 { font-size: 2rem; }

/* Niedrige Bildschirme (Querformat-Handy, 400 % Zoom): kleinere Überschrift */
@media (max-height: 520px) {
  :root { --topbar-h: 3.5rem; }
  .hero__copy h1 { font-size: clamp(1.6rem, 1.2rem + 2.4vw, 2.4rem); }
}
@media (max-width: 360px) {
  .calc .calc__base { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bar { grid-template-columns: 3.75rem minmax(0, 1fr) auto; }
  .bar__hours { min-width: 0; }
}

/* Logo-Intro: Klapptafel → Wortmarke → fliegt nach oben links, die Fläche klappt in zwei Hälften auf */
html.intro-on body::before { content: ""; position: fixed; inset: 0; z-index: 100; background: var(--sand-100); }
html.intro-run .topbar__logo img { opacity: 0; }
html.intro-run, html.intro-on { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 100; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; cursor: pointer; }
.intro__half { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--sand-100); transition: transform 700ms cubic-bezier(.7, 0, .2, 1); }
.intro__half--top { top: 0; border-bottom: 1px solid var(--sand-200); }
.intro__half--bottom { bottom: 0; }
.intro__word, .intro__logo { grid-area: 1 / 1; position: relative; z-index: 1; }
.intro__word { --flap-size: clamp(2.2rem, 1.2rem + 6vw, 5.5rem); gap: .08em; transition: opacity 300ms, transform 400ms cubic-bezier(.22, 1, .36, 1); }
.intro__logo { width: 8rem; max-width: none; height: auto; opacity: 0; transform-origin: 0 0; transition: opacity 350ms; }
.intro.is-logo .intro__word { opacity: 0; transform: scale(.96); }
.intro.is-logo .intro__logo { opacity: 1; }
.intro.is-fly .intro__logo { transition: transform 650ms cubic-bezier(.65, 0, .25, 1); }
.intro.is-open .intro__half--top { transform: translateY(-101%); }
.intro.is-open .intro__half--bottom { transform: translateY(101%); }
.intro.is-skip, .intro.is-skip * { transition-duration: 220ms !important; }
.intro.is-skip { opacity: 0; transition: opacity 220ms; }

/* Demo: Chat-Fenster auf Sand, Telefonat auf Tafelmaterial */
.chat, .call { display: flex; flex-direction: column; min-height: 30rem; border-radius: 6px; overflow: hidden; }
.chat { background: var(--sand-50); border: 1px solid var(--sand-300); }
.chat__head, .call__head { display: flex; align-items: center; gap: .75rem; margin: 0; padding: .9rem 1.1rem; }
.chat__head { background: var(--teal-800); color: var(--sand-50); }
.chat__head small, .call__head small { display: block; font: 500 .8125rem/1.3 var(--font-body); }
.chat__head small { color: var(--teal-100); }
.call__head small { color: var(--board-ink-soft); }
.chat__head strong, .call__head strong { display: block; font: 600 1.05rem/1.25 var(--font-head); }
.chat__avatar { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--sand-50); color: var(--teal-800); font: 700 1rem/1 var(--font-head); }
.chat__log { flex: 1; display: flex; flex-direction: column; gap: .6rem; max-height: 24rem; margin: 0; padding: 1.1rem; overflow-y: auto; list-style: none; }
.chat__msg { max-width: 85%; padding: .65rem .9rem; border-radius: 6px; font-size: .9375rem; line-height: 1.45; }
.chat__msg--bot { align-self: flex-start; background: var(--sand-200); color: var(--ink-900); border-bottom-left-radius: 2px; }
.chat__msg--user { align-self: flex-end; background: var(--teal-700); color: var(--sand-50); border-bottom-right-radius: 2px; }
.chat__typing { align-self: flex-start; display: flex; gap: 4px; padding: .8rem .9rem; border-radius: 6px; background: var(--sand-200); }
.chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-500); animation: chat-dot 1s ease-in-out infinite; }
.chat__typing i:nth-child(2) { animation-delay: .15s; }
.chat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.chat__card { align-self: stretch; padding: .8rem 1rem; border-radius: 6px; background: var(--board); color: var(--board-ink); font-size: .875rem; }
.chat__card strong { display: block; margin-bottom: .35rem; color: var(--board-ok); font: 600 .8125rem/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.chat__card ul { margin: 0; padding: 0; list-style: none; }
.chat__card li { padding: .15rem 0; color: var(--board-ink-strong); }
.chat__chips { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 4.5rem; padding: .9rem 1.1rem 1.1rem; border-top: 1px solid var(--sand-300); }
.chat__chip { min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--teal-700); border-radius: 999px; background: transparent; color: var(--teal-800); font: 600 .875rem/1.2 var(--font-body); cursor: pointer; transition: background-color 160ms, color 160ms; }
.chat__chip:hover { background: var(--teal-700); color: var(--sand-50); }
.chat__noscript { margin: 0; padding: 0 1.1rem 1.1rem; }
.call { background: var(--board); color: var(--board-ink); border: 1px solid var(--board-seam); }
.call__head { justify-content: space-between; border-bottom: 1px solid var(--board-line); color: var(--board-ink-strong); }
.call__time { color: var(--board-digit); font: 700 1.25rem/1 var(--font-head); font-variant-numeric: tabular-nums; }
.call__wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 3.5rem; margin: 1rem 1.1rem 0; }
.call__wave i { width: 4px; height: 100%; border-radius: 2px; background: var(--board-ink-soft); transform: scaleY(.2); transition: transform 300ms; }
.call.is-live .call__wave i { background: var(--board-ok); animation: call-wave 900ms ease-in-out infinite alternate; }
.call__wave i:nth-child(3n) { animation-delay: -.3s; }
.call__wave i:nth-child(3n+1) { animation-delay: -.6s; }
.call__wave i:nth-child(4n) { animation-duration: 700ms; }
@keyframes call-wave { from { transform: scaleY(.15); } to { transform: scaleY(.95); } }
.call__play { align-self: center; margin: .9rem 0 .4rem; }
.call__play:disabled { opacity: .75; cursor: default; }
.call__log { flex: 1; max-height: 17rem; margin: 0; padding: .6rem 1.1rem; overflow-y: auto; list-style: none; }
.call__line { padding: .45rem 0; border-top: 1px solid var(--board-line); color: var(--board-ink-strong); font-size: .9375rem; line-height: 1.45; }
.call__line::before { content: attr(data-who); display: block; color: var(--board-ink-soft); font: 600 .75rem/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.call__line--ai::before { color: var(--board-ok); }
.call__note { margin: 0 1.1rem 1.1rem; }
@media (prefers-reduced-motion: no-preference) {
  .chat__msg, .chat__card, .call__line { animation: try-in 280ms cubic-bezier(.22, 1, .36, 1) both; }
}
@keyframes try-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .call.is-live .call__wave i, .chat__typing i { animation: none; } }

/* Über uns: zwei Textblöcke nebeneinander, darunter die Arbeitsschritte als Route */
.about__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 900px) { .about__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 6vw, 5rem); } }
.about__block h2 { max-width: 18ch; margin-bottom: var(--space-2); }
.about__block p { max-width: 36rem; color: var(--ink-700); }
.about-steps { background: var(--sand-50); border-top: 1px solid var(--sand-300); }
.ending__more { color: var(--teal-700); font-weight: 600; text-underline-offset: .2em; }

/* Demo-Panels: Erklärung links, Chat bzw. Telefon rechts */
.demo__explain { margin: 0; max-width: 32rem; color: var(--ink-700); }
@media (min-width: 900px) { .demo__panel--try { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: clamp(2rem, 4vw, 3.5rem); } }

/* Abschnitte im Wechsel hell, mittel, dunkler Sand, damit die Seite in klare Blöcke zerfällt (Variante 2, 13.10.2026) */
.flow, .services, #fragen { background: var(--sand-50); }
#ablauf { background: var(--sand-100); }

/* Foto „Montagmorgen": öffnet sich beim Hereinscrollen von schmal auf volle Breite, das Bild gleitet dabei leicht */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stance__photo { animation: photo-open linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .stance__photo img, .js-ill .stance__photo img, .js-ill .stance__photo.is-in img { transition: none; animation: photo-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes photo-open { from { clip-path: inset(0 12% 0 12% round 18px); } to { clip-path: inset(0 0 0 0 round 6px); } }
@keyframes photo-drift { from { transform: scale(1.18) translateY(-5%); } to { transform: scale(1.04) translateY(4%); } }

/* Handy: weniger Leerraum, Chatfenster ohne leere Fläche, Rechner-Ergebnis kompakt und als Leiste beim Tippen */
@media (max-width: 899px) {
  :root { --section-dense: 3rem; --section-quiet: 4rem; }
  .chat, .call { min-height: 0; }
  .chat__log { min-height: 9rem; max-height: 15rem; }
  .call__log { max-height: 13rem; }
  .services__list a { gap: .75rem; padding: 1.1rem 0; grid-template-columns: 1.75rem minmax(0, 1fr) 1rem; }
  .stance__split { gap: var(--space-3); }
  .stance__split li { padding: .45rem 0; }
  .bars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
  .bar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "year" "amount" "hours" "track"; row-gap: .15rem; }
  .bar__amount { justify-self: start; font-size: clamp(.95rem, 4.4vw, 1.2rem); }
  .bar__hours { min-width: 0; text-align: left; font-size: .8125rem; }
}
@media (max-width: 360px) { .bar { grid-template-columns: minmax(0, 1fr); } }


/* Rechner: jede Aufgabe mit ihren eigenen Feldern, Anteil als Auswahl 40 % / 50 % */
.calc .row { grid-template-areas: "name flaps" "inputs inputs"; cursor: default; padding: .75rem; row-gap: .55rem; }
.calc .row__inputs { grid-area: inputs; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.calc .row .calc__field label { font: 500 .8125rem/1.3 var(--font-body); }
.calc .row--total { grid-template-areas: "name flaps"; padding-block: .75rem; }
.calc .row__name { color: var(--board-ink-strong); }
@media (max-width: 899px) { .calc .row::after, .calc .board__cols::after { content: none; } }
.calc__share { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.share { position: relative; display: block; cursor: pointer; }
.share input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.share span { display: grid; gap: .1rem; min-height: 3.6rem; align-content: center; padding: .5rem .8rem; border: 1px solid var(--board-line); border-radius: 4px; color: var(--board-ink-soft); font-size: .875rem; transition: background-color 160ms, border-color 160ms; }
.share b { color: var(--board-digit); font: 700 1.3rem/1.1 var(--font-head); font-variant-numeric: tabular-nums; }
.share input:checked + span { background: var(--board-row-active); border-color: var(--board-ink-soft); color: var(--board-ink-strong); }
.share input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.share:hover span { border-color: var(--board-ink-soft); }
.calc__base .panel__note { margin-top: 0; font-size: .8125rem; }
@media (min-width: 900px) {
  .calc .row { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem) var(--flap-col); grid-template-areas: "name inputs flaps"; }
  .calc .row--total { grid-template-columns: minmax(0, 1fr) var(--flap-col); }
  .calc .board__cols { grid-template-columns: minmax(0, 1fr) var(--flap-col); }
  .calc__share { align-self: stretch; align-content: start; }
}

/* Dunkles Farbschema (nur mit data-theme="dark"). Stellen, an denen Sand als Schrift auf Teal steht, bleiben hell. */
:root[data-theme="dark"] .trust__list li,
:root[data-theme="dark"] .chat__head,
:root[data-theme="dark"] .sort__item[data-state="wait"] .sort__status { color: var(--fixed-sand-50); }
:root[data-theme="dark"] .chat__head small { color: var(--fixed-sand-300); }
:root[data-theme="dark"] .chat__avatar { background: var(--fixed-sand-50); color: var(--fixed-teal-800); }
:root[data-theme="dark"] .chat__chip { color: var(--teal-700); }
:root[data-theme="dark"] .chat__chip:hover { color: var(--sand-100); }
:root[data-theme="dark"] .board ::selection { background: var(--fixed-sand-200); color: var(--fixed-teal-800); }
:root[data-theme="dark"] .trust { border-block: 1px solid var(--sand-300); }

/* Hell/Dunkel-Schalter: am PC als Symbol in der Kopfzeile, am Handy als Zeile im Menü */
.topbar__theme { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .75rem; flex: none; min-width: 44px; min-height: 44px; padding: 0;
  border: 1px solid var(--sand-300); border-radius: 999px; background: transparent; color: var(--ink-700); font: 500 .9375rem/1.2 var(--font-body); cursor: pointer;
  transition: color 160ms, border-color 160ms; }
.topbar__theme[hidden] { display: none; }
.topbar__theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topbar__theme-sun { display: none; }
:root[data-theme="dark"] .topbar__theme-sun { display: block; }
:root[data-theme="dark"] .topbar__theme-moon { display: none; }
.topbar__theme:hover { color: var(--teal-700); border-color: var(--teal-700); }
.topbar__theme:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 2px; }
.topbar__theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 860px) { .topbar__nav { align-items: center; } }
@media (max-width: 859px) {
  .topbar__nav.is-open .topbar__theme { justify-content: flex-start; width: 100%; min-height: 48px; border: 0; border-top: 1px solid var(--sand-300); border-radius: 0;
    color: var(--ink-900); font-size: 1.0625rem; }
  .topbar__nav.is-open .topbar__theme-label { position: static; width: auto; height: auto; clip-path: none; }
  .topbar__nav.is-open .topbar__theme::after { content: "aus" / ""; margin-left: auto; padding: .2rem .7rem; border: 1px solid var(--sand-400); border-radius: 999px; color: var(--ink-700); font-size: .875rem; }
  .topbar__nav.is-open .topbar__theme[aria-pressed="true"]::after { content: "an" / ""; border-color: var(--teal-700); color: var(--teal-700); }
}
/* Kupfer-Nummern auf dunklem Grund heller, damit sie lesbar bleiben */
:root[data-theme="dark"] .kicker span,
:root[data-theme="dark"] .services__no,
:root[data-theme="dark"] .offer__no { color: var(--copper-500); }
/* Mail-Zettel im Posteingang bleiben auch dunkel wie Papier: helle Palette nur für diese Zettel */
:root[data-theme="dark"] .sort.js-sort .sort__item.is-pile {
  --sand-50: var(--fixed-sand-50); --sand-100: var(--fixed-sand-100); --sand-200: var(--fixed-sand-200); --sand-300: var(--fixed-sand-300);
  --ink-900: var(--fixed-ink-900); --ink-700: var(--fixed-ink-700); --ink-500: var(--fixed-ink-500); --teal-700: var(--fixed-teal-700);
  color: var(--fixed-ink-900);
}