/* Website des Terminplaners. Farben und Formen kommen aus der App (src/styles.css):
   Papier, Schiefer, Amber, Bühnen-Blau, Ersatzwagen-Grün. Eine Schrift: Plus Jakarta Sans wie bei Segui,
   selbst ausgeliefert. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/PlusJakartaSans.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --papier: #f4f2ee;
  --papier-tief: #ebe7df;
  --flaeche: #ffffff;
  --linie: #e3dfd7;
  --linie-fein: #efece6;
  --tinte: #1f2a33;
  --leise: #59616b;
  --schiefer: #1f2a33;
  --schiefer-2: #2b3843;
  --schiefer-tief: #172028;
  --schiefer-text: #f4f2ee;
  --schiefer-leise: #b9bfc5;
  --amber: #f2b33d;
  --amber-hover: #f6c45f;
  --amber-hell: #fcf1db;
  --buehne: #dbe8f4;
  --buehne-rand: #4c7fae;
  --wagen: #e2efe0;
  --wagen-rand: #5b8f55;
  --offen: #f6ead2;
  --offen-rand: #b8862b;
  --jetzt: #d64b36;
  --schrift: "Plus Jakarta Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --rahmen: 1200px;
  --rand: clamp(16px, 4vw, 40px);
  --kopf-h: 60px;
  --radius: 14px;
  --schatten: 0 1px 2px rgb(31 42 51 / 0.05), 0 14px 34px -14px rgb(31 42 51 / 0.24);
  --schatten-gross: 0 2px 4px rgb(31 42 51 / 0.05), 0 34px 64px -28px rgb(31 42 51 / 0.38);
  --aus: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-h) + 16px);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: #c8c2b6 var(--papier);
}
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 17px/1.6 var(--schrift);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 {
  margin: 0;
  font-weight: 750;
  letter-spacing: -0.025em;
  word-spacing: 0.04em;
  line-height: 1.04;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
::selection { background: rgb(242 179 61 / 0.45); color: var(--tinte); }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; border-radius: 4px; }
.kopf :focus-visible, .schluss :focus-visible, .fuss :focus-visible, .menue :focus-visible { outline-color: var(--amber); }

.rahmen { width: 100%; max-width: calc(var(--rahmen) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
/* Bedienelemente, die nur mit JavaScript etwas tun (Probegarage, js/start.js) */
html:not(.js) .nur-js { display: none !important; }
.nur-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprung { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--amber); color: var(--tinte); padding: 8px 14px; border-radius: 8px; font-weight: 650; }
.sprung:focus { left: 8px; }
.sym { width: 20px; height: 20px; flex: none; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; border-radius: 10px; border: 1.5px solid transparent;
  font: 650 16px/1.1 var(--schrift); text-decoration: none; text-align: center; white-space: nowrap;
  cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.knopf:active { transform: translateY(1px); }
.knopf-dunkel { background: var(--schiefer); color: var(--schiefer-text); box-shadow: 0 10px 22px -12px rgb(31 42 51 / 0.7); }
.knopf-dunkel:hover { background: var(--schiefer-2); }
.knopf-amber { background: var(--amber); color: var(--tinte); }
.knopf-amber:hover { background: var(--amber-hover); }
.knopf-rand { border-color: rgb(31 42 51 / 0.28); color: var(--tinte); background: transparent; }
.knopf-rand:hover { background: rgb(31 42 51 / 0.05); border-color: rgb(31 42 51 / 0.45); }
.knopf-klein { min-height: 40px; padding: 0 16px; font-size: 15px; border-radius: 8px; }
.knopf-block { display: flex; width: 100%; }

/* Kopf: wie der Kopf der App */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--schiefer); color: var(--schiefer-text); }
.kopf-in { display: flex; align-items: center; gap: 20px; height: var(--kopf-h); padding: 0 var(--rand); max-width: 1680px; margin: 0 auto; }
.marke { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; font-weight: 750; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }
.marke span { overflow: hidden; text-overflow: ellipsis; }
.zeichen { width: 28px; height: 28px; flex: none; }
.kopf-links { display: flex; gap: 2px; margin: 0 auto; }
.kopf-links a { padding: 8px 12px; border-radius: 7px; text-decoration: none; color: var(--schiefer-leise); font-size: 15.5px; font-weight: 500; transition: color 0.15s, background-color 0.15s; }
.kopf-links a:hover { color: var(--schiefer-text); background: rgb(255 255 255 / 0.08); }
.kopf-rechts { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.kopf-links + .kopf-rechts { margin-left: 0; }
.kopf-anmelden { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid rgb(255 255 255 / 0.2); text-decoration: none; font-size: 15px; font-weight: 550; }
.kopf-anmelden:hover { background: rgb(255 255 255 / 0.08); }
.nur-schmal { display: none; }
.menue-knopf { display: none; width: 42px; height: 40px; place-items: center; border-radius: 8px; border: 1px solid rgb(255 255 255 / 0.2); background: transparent; color: inherit; cursor: pointer; padding: 0; }
.menue-knopf .sym { width: 22px; height: 22px; }
.menue-knopf .l1, .menue-knopf .l2 { transition: transform 0.25s var(--aus); transform-origin: 12px 12px; }
.kopf.offen .menue-knopf .l1 { transform: translateY(4px) rotate(45deg); }
.kopf.offen .menue-knopf .l2 { transform: translateY(-4px) rotate(-45deg); }
.menue { background: var(--schiefer); border-top: 1px solid rgb(255 255 255 / 0.1); padding: 8px var(--rand) 20px; display: grid; }
.menue[hidden] { display: none; }
.menue a { padding: 14px 4px; border-bottom: 1px solid rgb(255 255 255 / 0.08); text-decoration: none; font-size: 19px; font-weight: 600; }
.menue a:last-child { border-bottom: 0; color: var(--schiefer-leise); }

@media (max-width: 960px) {
  .kopf-links, .kopf-anmelden { display: none; }
  .menue-knopf { display: inline-grid; }
}
@media (max-width: 440px) {
  .nur-breit { display: none; }
  .nur-schmal { display: inline; }
  .kopf-in { gap: 10px; }
  .kopf-rechts { gap: 8px; }
  .kopf .marke { font-size: 16.5px; gap: 8px; }
  .kopf .knopf-klein { padding: 0 12px; }
}

/* Startbild: Titel oben auf ruhigem Grund, darunter ein Ausschnitt der Tagesansicht im App-Fenster
   (Mockup-Runde 21.10.2026, Variante A). Die Bausteine der Tafel (.tafel-kopf, .sk, .t …) teilt es mit der
   Mini-Tafel beim Umstieg. */
.hero { background: var(--papier); padding: clamp(44px, 6vw, 80px) 0 clamp(56px, 6vw, 88px); overflow: hidden; }
.hero-text { display: grid; justify-items: center; text-align: center; gap: 22px; }
.hero-text h1 { font-size: clamp(2.2rem, 1rem + 3.6vw, 4.3rem); line-height: 1; font-weight: 780; letter-spacing: -0.045em; }
.hero .aktionen { justify-content: center; align-items: center; gap: 10px 26px; margin-top: 6px; }
.hero .vertrauen { justify-content: center; }
.lead { font-size: clamp(17px, 0.95rem + 0.3vw, 20px); line-height: 1.5; max-width: 34em; color: var(--leise); }
.aktionen { display: flex; flex-wrap: wrap; gap: 12px; }
.link-mehr {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; font-size: 16px; color: var(--tinte);
  text-decoration: underline; text-decoration-color: rgb(31 42 51 / 0.3); text-underline-offset: 5px;
  transition: text-decoration-color 0.2s ease;
}
.link-mehr:hover { text-decoration-color: var(--tinte); }
.vertrauen { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14.5px; color: var(--leise); }
.vertrauen li { display: inline-flex; align-items: center; gap: 6px; }
.vertrauen .sym { width: 17px; height: 17px; color: var(--wagen-rand); stroke-width: 2.4; }

/* Bausteine der Tagesansicht (aus der App): Spaltenkopf, Zeitachse, Raster, Termin, Jetzt-Linie */
.tafel-kopf { display: grid; grid-template-columns: var(--achse) repeat(var(--spalten), minmax(0, 1fr)); border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.sk { border-left: 1px solid var(--linie); border-top: 3px solid var(--buehne-rand); padding: 8px 12px 9px; min-width: 0; }
.sk.art-wagen { border-top-color: var(--wagen-rand); }
.sk.art-offen { border-top-color: var(--offen-rand); background: color-mix(in srgb, var(--offen) 45%, var(--flaeche)); }
.sk b { display: block; font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk span { display: block; font-size: 12px; color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tafel-leib {
  position: relative; display: grid;
  grid-template-columns: var(--achse) repeat(var(--spalten), minmax(0, 1fr));
  overflow: hidden;
}
.zeitachse { grid-column: 1; grid-row: 1; position: relative; border-right: 1px solid var(--linie); }
.zeitachse span { position: absolute; right: 8px; top: calc(var(--h) * var(--stunde)); transform: translateY(-50%); font-size: 12px; color: var(--leise); font-variant-numeric: tabular-nums; }
.zeitachse span:first-child { transform: none; top: 2px; }
.spalten { grid-column: 2 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(var(--spalten), minmax(0, 1fr)); }
/* Stundenlinien: das Raster der Tagesansicht, halbe Stunden feiner */
.spalte {
  position: relative; border-left: 1px solid var(--linie); min-width: 0;
  background-image: repeating-linear-gradient(to bottom, var(--linie) 0 1px, transparent 1px calc(var(--stunde) / 2), var(--linie-fein) calc(var(--stunde) / 2) calc(var(--stunde) / 2 + 1px), transparent calc(var(--stunde) / 2 + 1px) var(--stunde));
}
.spalte.art-offen { background-color: color-mix(in srgb, var(--offen) 30%, transparent); }

/* Termin wie .termin in der App */
.t {
  position: absolute; left: 4px; right: 4px; z-index: 1;
  top: calc(var(--a) * var(--stunde) / 60 + 1px); height: calc(var(--d) * var(--stunde) / 60 - 3px);
  background: var(--buehne); border-left: 3px solid var(--buehne-rand); border-radius: 5px;
  padding: 3px 7px; font-size: 13px; line-height: 1.3; overflow: hidden; color: var(--tinte);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.04);
}
.art-wagen .t { background: var(--wagen); border-left-color: var(--wagen-rand); }
.art-offen .t { background: var(--offen); border-left-color: var(--offen-rand); }
.t-zeit { display: block; font-weight: 650; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-titel { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: break-word; }
.t.kurz { display: flex; gap: 6px; align-items: baseline; padding-top: 2px; }
.t.kurz .t-titel { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jetzt { position: absolute; left: var(--achse); right: 0; top: calc(var(--a) * var(--stunde) / 60); height: 2px; background: var(--jetzt); z-index: 2; pointer-events: none; }
.jetzt::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--jetzt); }

.hero-bild { position: relative; margin-top: clamp(40px, 4.5vw, 60px); max-width: calc(1080px + 2 * var(--rand)); }
.fenster {
  --achse: 58px; --spalten: 4; --stunde: 78px;
  position: relative; background: var(--flaeche); border-radius: 16px; overflow: hidden;
  box-shadow: var(--schatten-gross);
}
.fenster-leiste { display: flex; align-items: center; gap: 14px; height: 50px; padding: 0 16px; background: var(--schiefer); color: var(--schiefer-text); }
.fenster-leiste .zeichen { width: 24px; height: 24px; }
.fenster-datum { font-weight: 650; font-size: 15px; white-space: nowrap; }
.fenster-ansichten { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: rgb(255 255 255 / 0.08); font-size: 13px; }
.fenster .sk { padding: 11px 12px 10px; }
.fenster .tafel-leib { height: calc(4 * var(--stunde) + 6px); }
.fenster .t { padding: 5px 8px; }
.fenster .t-titel { -webkit-line-clamp: 2; }
/* Bedienung, der aufgezogene Termin und die Handy-Tafel: css/hero.css (Probegarage) */

/* Der Autoschlüssel liegt auf der oberen rechten Ecke des Fensters, über der leeren Seite der Leiste */
.hero-objekte {
  position: absolute; z-index: 2; pointer-events: none;
  width: clamp(140px, 17vw, 250px); height: auto;
  top: calc(-0.5 * clamp(140px, 17vw, 250px));
  /* .hero-bild endet --rand rechts vom Fenster; der Schlüssel ragt nur so weit hinaus, wie Rand frei ist */
  right: calc(var(--rand) - clamp(0px, (100vw - 1080px) / 2 - 30px, 110px));
  filter: drop-shadow(0 18px 20px rgb(31 42 51 / 0.16));
}

@media (max-width: 639px) {
  .hero { padding-top: 36px; }
  .hero-text { gap: 18px; }
  .hero-text h1 { font-size: clamp(2rem, 9.4vw, 2.5rem); }
  .hero .aktionen { width: 100%; }
  .aktionen .knopf { flex: 1 1 100%; }
  /* Das Fenster läuft bis an den rechten Rand, die Tafel darin scrollt seitwärts (css/hero.css) */
  .hero-bild { padding-right: 0; margin-top: 48px; }
  /* Über der rechten Ecke des Fensters, die Leiste darunter bleibt frei (dort sind jetzt Knöpfe) */
  .hero-bild { margin-top: 84px; }
  .hero-objekte { width: 112px; top: -78px; left: auto; right: 10px; }
}
/* Tablet: die Leiste ist voll, der Schlüssel liegt über der rechten Ecke des Fensters statt darauf */
@media (min-width: 640px) and (max-width: 899px) {
  .hero-bild { margin-top: 96px; }
  .hero-objekte { width: 136px; top: -92px; right: calc(var(--rand) + 4px); }
}

/* Gemeinsame Abschnitte */
section { position: relative; }
.abschnitt-kopf { display: grid; gap: 14px; max-width: 46rem; margin-bottom: clamp(36px, 5vw, 64px); }
.abschnitt-kopf.mitte { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.abschnitt-kopf h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem); }
.abschnitt-kopf p { font-size: 19px; color: var(--leise); max-width: 40em; }
.abschnitt-kopf p a { color: var(--tinte); }

/* Nach dem Startbild: «Ein Plan, überall» (Mockup-Runde 21.10.2026, Variante A, docs/mockups/neben-r1/).
   Derselbe neue Termin (amber) auf PC, Tablet und Handy, daneben die übrigen Vorteile als Liste. */
.neben { padding: clamp(72px, 8vw, 112px) 0 clamp(80px, 10vw, 128px); }
.neben-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(40px, 5vw, 72px); }
.neben-kopf { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px clamp(40px, 5vw, 72px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.neben-kopf h2 { font-size: clamp(2.1rem, 1.2rem + 2.9vw, 3.9rem); max-width: 12ch; }
.neben-kopf p { font-size: clamp(18px, 1rem + 0.3vw, 20px); line-height: 1.5; color: var(--leise); max-width: 26em; padding-bottom: 6px; }

/* Die drei Geräte: Bausteine der Tagesansicht im Kleinen */
.neben-geraete { margin: 0; display: grid; gap: 18px; align-content: start; }
.neben-szene { position: relative; aspect-ratio: 16 / 11; }
.neben-schirm { background: var(--flaeche); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.neben-leiste { display: flex; align-items: center; gap: 8px; height: 30px; flex: none; padding: 0 10px; background: var(--schiefer); color: var(--schiefer-text); font-size: 11.5px; }
.neben-leiste .zeichen { width: 15px; height: 15px; }
.neben-leiste b { font-weight: 650; white-space: nowrap; }
.neben-leiste span { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: rgb(255 255 255 / 0.12); }
.neben-tafel { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-height: 0; }
.neben-sp { border-left: 1px solid var(--linie); display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.neben-sp:first-child { border-left: 0; }
.neben-sk { border-top: 3px solid var(--buehne-rand); border-bottom: 1px solid var(--linie); padding: 6px 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.neben-sp.wagen .neben-sk { border-top-color: var(--wagen-rand); }
.neben-feld { padding: 6px 4px; display: grid; align-content: start; gap: 6px; background-image: repeating-linear-gradient(to bottom, transparent 0 37px, var(--linie-fein) 37px 38px); }
/* Termin im Fluss, aussehen wie .t */
.neben-t { background: var(--buehne); border-left: 3px solid var(--buehne-rand); border-radius: 5px; padding: 4px 6px; font-size: 11px; line-height: 1.3; min-height: 44px; overflow: hidden; }
.neben-t b { display: block; font-weight: 650; font-variant-numeric: tabular-nums; }
.neben-t span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.neben-sp.wagen .neben-t { background: var(--wagen); border-left-color: var(--wagen-rand); min-height: 120px; }
/* Der neue Termin: amber wie ein eigener Termin in der Probegarage */
.neben-t.neu { background: var(--amber-hell); border-left-color: var(--amber); box-shadow: inset 0 0 0 1.5px var(--amber), 0 6px 14px -8px rgb(184 134 43 / 0.6); }

.neben-pc { position: absolute; left: 0; top: 0; width: 82%; }
.neben-pc .neben-schirm { aspect-ratio: 16 / 10; height: auto; border: 7px solid var(--schiefer-tief); border-bottom-width: 9px; border-radius: 12px 12px 4px 4px; box-shadow: var(--schatten-gross); }
.neben-sockel { height: 10px; margin: 0 -5%; border-radius: 0 0 10px 10px; background: linear-gradient(#cfcac0, #b9b3a7); box-shadow: 0 10px 18px -10px rgb(31 42 51 / 0.45); }
.neben-tablet { position: absolute; right: 7%; bottom: 0; width: 34%; aspect-ratio: 3 / 4; border: 7px solid var(--schiefer-tief); border-radius: 16px; overflow: hidden; box-shadow: var(--schatten-gross); }
.neben-tablet .neben-sk { font-size: 10.5px; padding: 5px 6px; }
.neben-tablet .neben-t { font-size: 10.5px; }
.neben-handy { position: absolute; right: 0; bottom: -4%; width: 19%; aspect-ratio: 9 / 19; border: 5px solid var(--schiefer-tief); border-radius: 18px; overflow: hidden; box-shadow: var(--schatten-gross); }
.neben-handy .neben-leiste { height: 26px; justify-content: center; font-size: 10px; }
.neben-handy .neben-leiste .zeichen { display: none; }
.neben-liste { padding: 6px 5px; display: grid; gap: 5px; align-content: start; }
.neben-handy .neben-t { font-size: 9.5px; min-height: 0; padding: 3px 5px; }

.neben-geraete figcaption { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14.5px; color: var(--leise); padding-top: 22px; }
.neben-geraete figcaption span { display: inline-flex; align-items: center; gap: 7px; }
.neben-geraete figcaption .sym { width: 18px; height: 18px; color: var(--buehne-rand); }

/* Der eine Moment: beim Hereinscrollen erscheint der neue Termin am PC, dann auf Tablet und Handy
   (site.js setzt .gesehen). Ohne JS und mit «weniger Bewegung» steht er einfach da. */
@media (prefers-reduced-motion: no-preference) {
  .neben-geraete .neben-t.neu { transition: opacity 0.45s var(--aus), translate 0.6s var(--aus); }
  .neben-tablet .neben-t.neu { transition-delay: 0.5s; }
  .neben-handy .neben-t.neu { transition-delay: 0.75s; }
  .js .neben-geraete:not(.gesehen) .neben-t.neu { opacity: 0; translate: 0 6px; }
}

/* Die übrigen Vorteile, je mit Sprung ins passende Kapitel */
.neben-punkte { display: grid; align-content: start; border-top: 1px solid var(--linie); }
.neben-punkte a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; padding: 16px 4px 17px; border-bottom: 1px solid var(--linie); text-decoration: none; transition: background-color 0.2s ease; }
.neben-punkte a:hover { background: rgb(31 42 51 / 0.03); }
.neben-punkte a:hover b { text-decoration: underline; text-decoration-color: rgb(31 42 51 / 0.35); }
.neben-punkte .sym { width: 24px; height: 24px; color: var(--buehne-rand); margin-top: 1px; }
.neben-punkte a > span { display: grid; gap: 3px; }
.neben-punkte b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.neben-punkte a > span > span { font-size: 15.5px; color: var(--leise); line-height: 1.45; }
.neben-herkunft { grid-column: 2; font-size: 14.5px; color: var(--leise); padding: 16px 4px 0; }

@media (max-width: 899px) {
  .neben-in, .neben-kopf { grid-template-columns: minmax(0, 1fr); }
  .neben-kopf { margin-bottom: 32px; }
  .neben-geraete { margin-bottom: 36px; }
  .neben-herkunft { grid-column: 1; }
}
@media (max-width: 599px) {
  /* Handy: PC über die volle Breite, das Handy davor; das Tablet (und seine Beschriftung) fällt weg */
  .neben-szene { aspect-ratio: 10 / 7.4; }
  .neben-pc { width: 92%; }
  .neben-tablet, .neben-geraete figcaption .neben-mit-tablet { display: none; }
  .neben-handy { width: 30%; bottom: -2%; }
  .neben-pc .neben-sp:nth-child(3) { display: none; }
  .neben-leiste { font-size: 10.5px; }
  .neben-geraete figcaption { padding-top: 14px; gap: 6px 18px; }
}

/* Funktionen: Kapitel links, Demos rechts. Mit JS und breitem Bildschirm bleibt die Demo stehen
   und wechselt mit dem Kapitel; sonst folgt jede Demo ihrem Kapitel. */
.funktionen { padding: clamp(80px, 10vw, 130px) 0; background: var(--papier-tief); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.kapitel-liste { display: grid; gap: clamp(56px, 8vw, 96px); }
.kapitel { display: grid; gap: 28px; }
.kapitel-text { display: grid; gap: 14px; align-content: center; max-width: 30rem; }
.kapitel-text h3 { font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.3rem); }
.kapitel-text p { font-size: 18px; color: var(--leise); line-height: 1.6; }
.demo { margin: 0; position: relative; }
.demo-ui {
  position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten-gross); overflow: hidden; height: 100%;
  display: flex; flex-direction: column; justify-content: center; font-size: 13px;
}
.demo-objekt { position: absolute; z-index: 3; pointer-events: none; width: clamp(130px, 13vw, 190px); height: auto; left: calc(-1 * clamp(80px, 8vw, 120px)); bottom: -56px; transform: rotate(-8deg); filter: drop-shadow(0 16px 18px rgb(31 42 51 / 0.16)); }

@media (min-width: 1024px) {
  .js .kapitel-liste { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; row-gap: 0; }
  .js .kapitel { display: contents; }
  /* Aktives Kapitel nur über die Titelfarbe, der Text bleibt voll lesbar (--leise 5:1 auf Papier tief) */
  .js .kapitel-text { grid-column: 1; min-height: 68vh; padding: 8vh 0; }
  .js .kapitel-text h3 { color: var(--leise); transition: color 0.35s ease; }
  .js .kapitel-text.an h3 { color: var(--tinte); }
  .js .kapitel-liste > .kapitel:first-child .kapitel-text { padding-top: 0; }
  .js .kapitel-liste .demo {
    grid-column: 2; grid-row: 1 / span 6; align-self: start;
    position: sticky; top: calc(var(--kopf-h) + (100vh - var(--kopf-h) - min(540px, 70vh)) / 2);
    height: min(540px, 70vh);
    /* Ausgeblendet nur optisch: per Tab und für Screenreader bleiben alle Demos erreichbar (site.js holt das
       Kapitel mit dem Fokus nach vorn) */
    opacity: 0; pointer-events: none; transform: translateY(14px) scale(0.985);
    transition: opacity 0.45s var(--aus), transform 0.6s var(--aus);
  }
  .js .kapitel-liste .demo.an { opacity: 1; pointer-events: auto; transform: none; }
}
@media (max-width: 1023px) {
  .demo-ui { min-height: 340px; }
  .demo-objekt { left: auto; right: -2px; bottom: -78px; width: 100px; }
}
/* Handy: nur über der Kartenecke, nie über der letzten Zeile */
@media (max-width: 639px) {
  .demo-objekt { right: -10px; bottom: -96px; width: 88px; }
}
@media (max-width: 359px) {
  .demo-objekt { right: -6px; bottom: -66px; width: 64px; }
}

/* Funktionen: echte Screenshots der App (img/app/). Breit füllt das Bild die stehende Fläche ohne
   Verzerrung, der Rest in der Randfarbe des Bildes (--grund); am Handy ein eigener Ausschnitt. */
.demo-ui-bild { background: var(--grund, var(--flaeche)); }
.demo-ui-bild picture { display: block; }
.demo-bild { display: block; width: 100%; height: auto; }
@media (min-width: 1024px) {
  .js .demo-ui-bild picture { flex: 1; min-height: 0; }
  .js .demo-bild { height: 100%; object-fit: contain; }
  /* Feiertage beginnt mit dem dunklen Kopf der App: Ist das Feld schmaler als das Bild, bleibt der Rest
     unten in der Grundfarbe (nahtlos) statt als heller Streifen über dem Kopf */
  .js .demo-feiertage .demo-bild { object-position: top; }
}


/* Und ausserdem: wie eine Tafel in den Einstellungen der App */
.ausserdem { margin-top: clamp(72px, 9vw, 120px); }
.ausserdem h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); margin-bottom: 20px; }
.tafel-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.tafel-liste li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-bottom: 1px solid var(--linie-fein); }
.tafel-liste li:nth-child(odd) { border-right: 1px solid var(--linie-fein); }
.tafel-liste li:nth-last-child(-n+2) { border-bottom: 0; }
.tafel-liste .sym { width: 24px; height: 24px; color: var(--buehne-rand); margin-top: 1px; }
.tafel-liste div { display: grid; gap: 2px; }
.tafel-liste b { font-weight: 650; font-size: 16.5px; }
.tafel-liste span { color: var(--leise); font-size: 15.5px; line-height: 1.45; }
@media (max-width: 719px) {
  .tafel-liste { grid-template-columns: 1fr; }
  .tafel-liste li:nth-child(odd) { border-right: 0; }
  .tafel-liste li:nth-last-child(2) { border-bottom: 1px solid var(--linie-fein); }
}

/* Umstieg aus der bisherigen Software */
.umstieg { padding: clamp(90px, 11vw, 150px) 0; background: var(--flaeche); border-bottom: 1px solid var(--linie); overflow: clip; }
.umstieg-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 72px; align-items: center; position: relative; }
.umstieg-text { display: grid; gap: 18px; }
.umstieg h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.3rem); }
.umstieg-text p { font-size: 18px; color: var(--leise); }
.umstieg-text .umstieg-saison { color: var(--tinte); font-weight: 600; padding-left: 14px; position: relative; }
.umstieg-saison::before { content: ""; position: absolute; left: 0; top: 0.35em; bottom: 0.35em; width: 1px; background: var(--tinte); }
.demo-umstieg .demo-ui { box-shadow: var(--schatten); }
.rad { position: absolute; right: calc(-1 * clamp(48px, 5vw, 84px)); bottom: calc(-1 * clamp(64px, 6.4vw, 100px)); width: clamp(120px, 11vw, 168px); height: auto; pointer-events: none; z-index: 2; transform: rotate(-6deg); filter: drop-shadow(0 20px 22px rgb(31 42 51 / 0.18)); }
@media (max-width: 1023px) {
  .umstieg-in { grid-template-columns: 1fr; }
  .rad { right: -20px; bottom: -74px; width: 120px; }
}
@media (max-width: 639px) {
  .rad { display: none; }
}

/* Der erste Monat */
.monat { padding: clamp(90px, 11vw, 150px) 0; }
.monat-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 64px; align-items: start; }
.monat-bild { position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px; box-shadow: var(--schatten); }
.monat-demo { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mo-wt { font-size: 12px; color: var(--leise); text-align: center; padding-bottom: 4px; }
.mo-tag { min-height: 78px; border-radius: 8px; padding: 6px 7px; display: grid; grid-template-rows: auto 1fr auto; gap: 2px; background: var(--flaeche); border: 1px solid var(--linie-fein); min-width: 0; position: relative; }
.mo-tag b { font-size: 11px; font-weight: 600; color: var(--leise); white-space: nowrap; }
.mo-tag small { align-self: end; font-size: 11px; color: var(--leise); }
.mo-n { align-self: end; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.mo-tag em { font-style: normal; font-size: 10.5px; font-weight: 700; align-self: start; justify-self: start; background: var(--amber); color: var(--tinte); padding: 1px 6px; border-radius: 4px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mo-tag.stufe-0 { background: repeating-linear-gradient(135deg, var(--papier) 0 5px, var(--linie-fein) 5px 6px); border-color: transparent; }
.stufe-1 { background: color-mix(in srgb, var(--buehne-rand) 8%, var(--flaeche)); }
.stufe-2 { background: color-mix(in srgb, var(--buehne-rand) 22%, var(--flaeche)); }
.stufe-3 { background: color-mix(in srgb, var(--buehne-rand) 40%, var(--flaeche)); }
.stufe-4 { background: color-mix(in srgb, var(--buehne-rand) 60%, var(--flaeche)); }
.mo-tag.stufe-3 b, .mo-tag.stufe-4 b { color: var(--tinte); }
.mo-tag.meilenstein { outline: 2px solid var(--amber); outline-offset: -2px; }
.mo-tag.abo { background: var(--schiefer); color: var(--schiefer-text); border-color: var(--schiefer); }
.mo-tag.abo b, .mo-tag.abo small { color: var(--schiefer-leise); }
.mo-tag.leer { background: transparent; border: 1px dashed var(--linie); }
.mo-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--leise); }
.mo-legende span { display: inline-flex; align-items: center; gap: 6px; }
.mo-legende i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--linie); }
.magnete { position: absolute; z-index: 2; width: clamp(140px, 14vw, 210px); height: auto; bottom: calc(-1 * clamp(36px, 4vw, 60px)); right: calc(-1 * clamp(16px, 3vw, 48px)); pointer-events: none; filter: drop-shadow(0 14px 16px rgb(31 42 51 / 0.14)); }
.laeuft .mo-tag { animation: fuellen 0.6s var(--aus) both; animation-delay: calc(var(--i) * 28ms); }
@keyframes fuellen { from { opacity: 0; transform: scale(0.92); } }
.schritte { display: grid; gap: 0; position: relative; padding-top: 4px; }
.schritte li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 0 0 26px; position: relative; }
.schritte li::before { content: ""; position: absolute; left: 41px; top: 30px; bottom: 0; width: 1px; background: var(--linie); }
.schritte li:last-child::before { display: none; }
.schritt-tag { justify-self: center; align-self: start; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 4px 10px; border-radius: 6px; background: var(--amber); color: var(--tinte); position: relative; z-index: 1; }
.schritte li:last-child .schritt-tag { background: var(--schiefer); color: var(--schiefer-text); }
.schritte b { display: block; font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.schritte p { color: var(--leise); font-size: 16px; line-height: 1.5; }
@media (max-width: 1023px) {
  .monat-in { grid-template-columns: 1fr; }
  .magnete { right: -8px; bottom: -40px; width: 150px; }
}
@media (max-width: 639px) {
  .monat-bild { padding: 10px; }
  .monat-demo { gap: 3px; }
  .mo-tag { min-height: 52px; padding: 4px; }
  .mo-tag b { font-size: 9.5px; }
  .mo-n { font-size: 15px; }
  .mo-tag em { font-size: 0; padding: 0; width: 8px; height: 8px; border-radius: 50%; position: absolute; top: 5px; right: 5px; }
  .mo-tag.abo em { display: none; }
  .mo-tag.abo small { font-size: 9px; }
  .mo-tag small { font-size: 9.5px; }
  .magnete { display: none; }
}

/* Preise */
.preise { padding: clamp(90px, 11vw, 150px) 0; background: var(--papier-tief); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.plaene { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.plan-mitte { border: 2px solid var(--tinte); box-shadow: var(--schatten-gross); }
.plan h3 { font-size: 28px; }
.plan-kopf { display: grid; gap: 4px; }
.plan-grenze { color: var(--leise); font-size: 15.5px; }
.plan-buehnen { display: flex; align-items: center; gap: 4px; color: var(--buehne-rand); min-height: 28px; flex-wrap: wrap; }
.plan-buehnen .sym { width: 26px; height: 26px; }
.plan-buehnen i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--buehne); }
.plan-buehnen i .sym { width: 16px; height: 16px; stroke-width: 2.4; }
.plan-preis { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan-preis b { font-size: clamp(48px, 4.6vw, 64px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: lining-nums; }
.plan-preis .cur { font-weight: 650; font-size: 18px; }
.plan-preis .per { color: var(--leise); font-size: 15px; }
.plan-fuer { color: var(--leise); font-size: 15.5px; flex: 1; }
.inklusive { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 36px auto 0; max-width: 1100px; font-size: 16px; font-weight: 550; }
.inklusive li { display: inline-flex; align-items: center; gap: 8px; }
.inklusive .sym { width: 18px; height: 18px; color: var(--wagen-rand); stroke-width: 2.4; }
.fein { text-align: center; margin: 18px auto 0; max-width: 44rem; color: var(--leise); font-size: 15px; }
.fein a { color: var(--tinte); }
@media (max-width: 899px) {
  .plaene { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .inklusive { justify-content: flex-start; flex-direction: column; max-width: 480px; }
  .fein { text-align: left; max-width: 480px; }
}

/* Fragen */
.fragen { padding: clamp(90px, 11vw, 150px) 0; }
.fragen-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 72px; align-items: start; }
.fragen .abschnitt-kopf { position: sticky; top: calc(var(--kopf-h) + 32px); }
.frage { border-bottom: 1px solid var(--linie); }
.frage:first-child { border-top: 1px solid var(--linie); }
.frage summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; cursor: pointer; list-style: none; font-weight: 650; font-size: 18.5px; line-height: 1.35; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover span { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; }
.plus { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1.5px solid var(--linie); }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.8px; margin: -0.9px 0 0 -6px; background: var(--tinte); border-radius: 1px; transition: transform 0.3s var(--aus); }
.plus::after { transform: rotate(90deg); }
.frage[open] .plus::after { transform: rotate(0deg); }
.frage[open] .plus { background: var(--amber); border-color: var(--amber); }
.antwort { padding: 0 52px 24px 0; }
.antwort p { color: var(--leise); font-size: 17px; line-height: 1.65; max-width: 62ch; }
.antwort a { color: var(--tinte); }
@media (max-width: 899px) {
  .fragen-in { grid-template-columns: 1fr; }
  .fragen .abschnitt-kopf { position: static; margin-bottom: 8px; }
  .antwort { padding-right: 0; }
}

/* Wer dahintersteht: zwei Porträts, leicht versetzt, daneben drei Fakten und der direkte Draht.
   Weiss, damit sich der Abschnitt von den Fragen (Papier) und vom Schluss (Schiefer) abhebt. */
.team { background: var(--flaeche); padding: clamp(90px, 11vw, 150px) 0; }
.team-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(48px, 7vw, 104px); align-items: center; }
.team-fotos { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(14px, 2vw, 24px); }
.team-fotos figure { margin: 0; display: grid; gap: 14px; }
.team-fotos figure:nth-child(2) { margin-top: clamp(28px, 5vw, 64px); }
.team-fotos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; background: #191512; box-shadow: var(--schatten-gross); }
.team-fotos figcaption { display: grid; align-content: start; gap: 2px; padding-left: 2px; }
.team-fotos figcaption b { font-size: 18px; }
.team-fotos figcaption span { font-size: 15px; color: var(--leise); }
.team-text { display: grid; gap: 22px; }
.team-text h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem); max-width: 12ch; }
.team-text > p { font-size: 19px; color: var(--leise); max-width: 34em; }
.team-fakten { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.team-fakten li { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--linie); }
.team-fakten li:last-child { border-bottom: 1px solid var(--linie); }
.team-fakten b { font-size: 16.5px; }
.team-fakten span { font-size: 15.5px; color: var(--leise); }
.team-text > .team-kontakt { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; font-size: 16px; color: var(--tinte); }
.team-kontakt > span { color: var(--leise); width: 100%; margin-bottom: 2px; }
.team-kontakt a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; text-decoration-color: rgb(31 42 51 / 0.3); }
.team-kontakt a:hover { text-decoration-color: currentColor; }
@media (max-width: 899px) {
  .team-in { grid-template-columns: 1fr; }
  .team-fotos { max-width: 560px; }
}
@media (max-width: 599px) {
  .team-fotos { gap: 16px; }
  .team-fotos figure:nth-child(2) { margin-top: 28px; }
  .team-fotos figcaption b { font-size: 16px; }
  .team-fotos figcaption span { font-size: 14px; }
  .team-text > p { font-size: 17.5px; }
}

/* Schluss: noch einmal der aufgezogene Termin, auf Schiefer */
.schluss { background: var(--schiefer); color: var(--schiefer-text); padding: clamp(90px, 11vw, 150px) 0; }
.schluss-in { position: relative; display: grid; justify-items: center; text-align: center; gap: 18px; padding: clamp(48px, 7vw, 88px) max(calc(var(--rand) + 22px), 5vw); max-width: 980px; }
.schluss-in::before { content: ""; position: absolute; inset: 0 var(--rand); border: 2px dashed var(--amber); border-radius: 12px; background: rgb(242 179 61 / 0.06); }
.schluss-in > * { position: relative; }
.schluss h2 { font-size: clamp(2.1rem, 1.2rem + 3vw, 4rem); max-width: 14ch; }
.schluss p { color: var(--schiefer-leise); font-size: 19px; }
.schluss .knopf { margin-top: 10px; }

/* Fusszeile */
.fuss { background: var(--schiefer-tief); color: var(--schiefer-leise); padding: 56px 0 40px; font-size: 15px; }
.fuss-in { max-width: calc(var(--rahmen) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; }
.fuss-marke { display: grid; gap: 10px; }
.fuss-marke .marke { color: var(--schiefer-text); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 6px 22px; align-content: start; justify-content: flex-end; max-width: 560px; }
.fuss-links a { text-decoration: none; padding: 4px 0; }
.fuss-links a:hover { color: var(--schiefer-text); text-decoration: underline; }
.fuss-copy { grid-column: 1 / -1; border-top: 1px solid rgb(255 255 255 / 0.1); padding-top: 22px; font-size: 14px; }
@media (max-width: 719px) {
  .fuss-in { grid-template-columns: 1fr; }
  .fuss-links { justify-content: flex-start; }
}

/* Textseiten: AGB, Datenschutz, AVV, Impressum, 404 */
.text-seite { max-width: calc(760px + 2 * var(--rand)); margin: 0 auto; padding: clamp(48px, 8vw, 96px) var(--rand) clamp(80px, 10vw, 128px); }
.text-seite h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); margin-bottom: 28px; hyphens: auto; overflow-wrap: break-word; }
.toc { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 18px 22px; margin-bottom: 40px; }
.toc p { font-weight: 650; font-size: 14px; color: var(--leise); margin-bottom: 8px; }
.toc ol { columns: 2; column-gap: 28px; list-style: decimal; padding-left: 1.3em; font-size: 15px; }
.toc li { padding: 3px 0; break-inside: avoid; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.text { font-size: 17px; line-height: 1.7; }
.text h2 { font-size: 22px; font-weight: 750; letter-spacing: -0.01em; margin: 44px 0 10px; scroll-margin-top: calc(var(--kopf-h) + 20px); }
.text p + p { margin-top: 12px; }
.text ul { list-style: disc; padding-left: 1.3em; margin: 10px 0 12px; display: grid; gap: 6px; }
.text .einleitung { font-size: 19px; line-height: 1.6; }
.text .stand { margin-top: 44px; color: var(--leise); font-size: 15px; }
/* Offene Punkte für Joël (quelle/recht.mjs offen()); vor dem Go-live müssen alle weg sein */
.text mark.offen { display: inline; background: var(--amber-hell); color: var(--tinte); border: 1px dashed var(--amber); border-radius: 4px; padding: 1px 5px; font-size: 0.9em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tabelle-rahmen { overflow-x: auto; margin: 16px 0; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); }
.tabelle { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--linie-fein); }
.tabelle thead th { font-size: 13px; color: var(--leise); font-weight: 650; background: var(--papier); }
.tabelle tbody tr:last-child > * { border-bottom: 0; }
.tabelle tbody th { font-weight: 650; white-space: nowrap; }
.tabelle tbody th small { display: block; font-weight: 400; color: var(--leise); font-size: 13px; }
@media (max-width: 639px) { .toc ol { columns: 1; } }
.fehler-seite { text-align: left; }
.fehler-code { font-size: clamp(5rem, 14vw, 9rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; color: var(--tinte); display: inline-block; padding: 6px 18px 10px; border: 2px dashed var(--amber); border-radius: 12px; background: var(--amber-hell); margin-bottom: 28px; }
.fehler-seite p + p { margin-top: 24px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .kopf, .fuss, .hero-objekte { display: none; }
}