/* Landing baushtell.at, Neubau 24.9.2026.
   Regeln: landing/CLAUDE.md. Film: marketing/landing-neu/FILM.md.
   Das Zeichen der Seite ist der offene Ring, der sich zum grünen Haken
   schließt (aus DoneMark der App). Ohne Skript steht alles im Endzustand da:
   Ringe zu, Karten sichtbar. Erst die Klasse .js auf <html> stellt die
   Anfangszustände her, die das Skript dann abspielt. */

@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 500; font-display: swap; src: url('/fonts/barlow-semi-condensed-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 600; font-display: swap; src: url('/fonts/barlow-semi-condensed-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 700; font-display: swap; src: url('/fonts/barlow-semi-condensed-700-latin.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 200 800; font-display: swap; src: url('/fonts/manrope-variable-latin.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-display: swap; src: url('/fonts/inter-wordmark-800.woff2') format('woff2'); }

:root {
  --gelb: #ffc30e;
  --gelb-hover: #ffcf3d;
  --gelb-text: #1a1400;
  --gruen: #008e5e;
  --orange: #c17a28;
  --violett: #924e7d;
  --grund: #f9f9f7;
  --flaeche: #f4f3f0;
  --karte: #ffffff;
  --tinte: #1f2937;
  --tinte-leicht: #5d5e61;
  --tinte-leise: #74777f;
  --linie: #c4c6cf;
  --tafel: #1f2937;
  --tafel-hell: #2a3444;
  --tafel-tief: #182130;
  --fuss: #141a24;

  --schrift-anzeige: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --schrift-text: 'Manrope', system-ui, -apple-system, sans-serif;
  --schrift-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --schrift-marke: 'Inter', 'Manrope', system-ui, sans-serif;

  --rand: 24px;
  --abschnitt: clamp(88px, 11vw, 150px);
  --schatten-schweb: 0 22px 48px -16px rgba(31, 41, 55, 0.32), 0 2px 6px rgba(31, 41, 55, 0.06);
  --schatten-blatt: 0 36px 70px -26px rgba(31, 41, 55, 0.42), 0 3px 10px rgba(31, 41, 55, 0.08);
  --weich: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 719px) {
  :root { --rand: 16px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--schrift-anzeige); font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

[hidden] { display: none !important; }
.skipLink { position: absolute; left: -9999px; }
.skipLink:focus { left: 16px; top: 16px; z-index: 100; background: var(--karte); padding: 10px 16px; border-radius: 8px; }

.rahmen { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: var(--rand); }

/* ---------- Das Zeichen: Ring, der sich zum Haken schließt ---------- */

/* Der Ring steckt als <use> in einem Symbol. Regeln der Seite erreichen die
   Kreise darin nur über geerbte Variablen, deshalb steuert .ring hier nur
   Variablen und die Kreise lesen sie. */
/* Registriert, damit sich --ring-bogen weich verändern kann (Uhr in der Kette). */
@property --ring-bogen { syntax: '<number>'; inherits: true; initial-value: 100; }

.ring {
  --ring-farbe: var(--gruen);
  --ring-fuell: rgba(0, 142, 94, 0.1);
  --ring-bogen: 100;
  --ring-haken: 0;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  overflow: visible;
  transition: --ring-bogen 0.7s var(--weich);
}
.js .ring:not(.isZu) { --ring-farbe: var(--gelb); --ring-fuell: transparent; --ring-bogen: 72; --ring-haken: 100; }
.js .ring.istLeer:not(.isZu) { --ring-farbe: rgba(196, 198, 207, 0.9); }
/* Die Uhr: der aktive Ring füllt sich in der Zeit bis zum nächsten Schritt. */
.js .ring.tickt:not(.isZu) { --ring-bogen: 100; transition: --ring-bogen var(--takt, 3800ms) linear; }
.js .ring.tickStart:not(.isZu) { --ring-bogen: 2; transition: none; }
.ringBahn {
  fill: var(--ring-fuell);
  stroke: var(--ring-farbe);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: var(--ring-bogen) calc(100 - var(--ring-bogen));
  transform: rotate(-90deg);
  transform-origin: 20px 20px;
  transition: stroke 0.35s ease, fill 0.35s ease;
}
.ringHaken {
  fill: none;
  stroke: var(--gruen);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: var(--ring-haken);
  transition: stroke-dashoffset 0.4s ease 0.45s;
}

/* Handgezogener Kringel um ein Wort, zeichnet sich selbst. */
.kringel { position: relative; display: inline-block; white-space: nowrap; }
.kringel svg { position: absolute; left: -7%; top: -22%; width: 115%; height: 146%; overflow: visible; pointer-events: none; }
.kringel path { fill: none; stroke: var(--gelb); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--weich) 0.35s; }
.js .kringel:not(.isDa) path { stroke-dashoffset: 100; }

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 26px;
  border: 0;
  border-radius: 12px;
  font-family: var(--schrift-text);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.knopf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--weich); }
.knopf:hover svg { transform: translateX(3px); }
.knopf:focus-visible { outline: 3px solid rgba(255, 195, 14, 0.6); outline-offset: 3px; }
.knopfGelb { background: var(--gelb); color: var(--gelb-text); box-shadow: 0 10px 24px -10px rgba(255, 195, 14, 0.9); }
.knopfGelb:hover { background: var(--gelb-hover); }
.knopfDunkel { background: var(--tinte); color: #fff; }
.knopfDunkel:hover { background: #111827; }
.knopfLeise { background: transparent; color: var(--tinte); box-shadow: inset 0 0 0 1px rgba(196, 198, 207, 0.8); }
.knopfKlein { min-height: 42px; padding: 0 18px; font-size: 15px; border-radius: 10px; }

.leiseLink { font-weight: 600; color: var(--tinte); text-decoration: none; border-bottom: 2px solid rgba(31, 41, 55, 0.18); padding-bottom: 2px; transition: border-color 0.2s; }
.leiseLink:hover { border-color: var(--tinte); }
.kleingedruckt { font-size: 14px; color: var(--tinte-leise); }
.zentriert { text-align: center; }

/* ---------- Kopf ---------- */

.kopf { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.kopf.istGescrollt { background: rgba(249, 249, 247, 0.88); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 rgba(196, 198, 207, 0.4); }
.kopfInhalt { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.marke { font-family: var(--schrift-marke); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; color: var(--gelb); text-decoration: none; }
.marke span { color: var(--tinte); }
.markeHell span { color: #fff; }
.kopfNav { display: flex; align-items: center; gap: 28px; }
.kopfNav a:not(.knopf) { font-size: 15px; font-weight: 600; color: var(--tinte-leicht); text-decoration: none; transition: color 0.2s; }
.kopfNav a:not(.knopf):hover { color: var(--tinte); }
@media (max-width: 859px) {
  .navWeit { display: none; }
  .kopfNav { gap: 16px; }
}
@media (max-width: 400px) {
  .navAnmelden { display: none; }
}

/* ---------- Überschriften der Abschnitte ---------- */

h2 { font-size: clamp(38px, 5.2vw, 70px); line-height: 0.98; }
.kopfzeile { max-width: 760px; margin: 0 auto clamp(48px, 6vw, 80px); text-align: center; }
.kopfzeile p, .kundeText p, .stundenText > p:not(.zaehler), .flickText p { margin-top: 20px; font-size: clamp(17px, 1.5vw, 20px); color: var(--tinte-leicht); max-width: 34em; }
.kopfzeile p { margin-inline: auto; }
.kopfzeileHell p, .tafel .flickText p { color: rgba(244, 243, 240, 0.72); }

/* Erscheinen beim Scrollen (setzt das Skript, ohne Skript sofort sichtbar) */
.js .auf { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--weich), transform 0.8s var(--weich); }
.js .auf.isDa { opacity: 1; transform: none; }

/* ---------- Geräte-Rahmen ---------- */

.laptop { position: relative; padding: 10px 10px 12px; background: #0e1117; border-radius: 16px; box-shadow: var(--schatten-blatt); }
.laptop img { border-radius: 6px; width: 100%; }
.laptop::after { content: ''; position: absolute; left: -7%; right: -7%; bottom: -14px; height: 14px; background: linear-gradient(#e2e0da, #cbc8c0); border-radius: 2px 2px 14px 14px; box-shadow: 0 16px 30px -12px rgba(31, 41, 55, 0.35); }
.handy { position: relative; padding: 8px; background: #0e1117; border-radius: 36px; box-shadow: var(--schatten-blatt); }
.handy img { border-radius: 29px; width: 100%; }
.blatt { background: #fff; border-radius: 4px; box-shadow: var(--schatten-blatt); overflow: hidden; }
.foto { width: 100%; border-radius: 22px; object-fit: cover; }

/* ---------- 1 · Anfang ---------- */

.anfang { position: relative; overflow: hidden; padding-top: 72px; background: radial-gradient(120% 90% at 78% 30%, #ffffff 0%, var(--grund) 58%); }
.anfangInhalt { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 40px; align-items: end; min-height: min(calc(100svh - 72px), 860px); }
.anfangText { align-self: center; padding: 56px 0 112px; }
.anfang h1 { font-size: clamp(46px, 5.3vw, 80px); line-height: 0.94; letter-spacing: -0.015em; }
.h1Satz { display: block; }
.zusammen { white-space: nowrap; }
.h1Satz + .h1Satz { margin-top: 0.12em; }
.anfangSatz { margin-top: 28px; font-size: clamp(18px, 1.55vw, 21px); color: var(--tinte-leicht); max-width: 30em; }
.anfangAktion { display: flex; align-items: center; gap: 28px; margin-top: 36px; flex-wrap: wrap; }
.anfang .kleingedruckt { margin-top: 16px; }

.anfangBild { position: relative; width: 112%; max-width: 680px; justify-self: end; aspect-ratio: 1 / 1.1; }
.grossRing { position: absolute; left: 2%; top: 30%; width: 96%; overflow: hidden; }
.grossRingGrund { fill: #efe9da; }
.grossRingBahn {
  fill: none;
  stroke: var(--gelb);
  stroke-width: 26;
  stroke-linecap: round;
  stroke-dasharray: 76 24;
  transform: rotate(60deg);
  transform-origin: 300px 300px;
  transition: stroke-dasharray 0.9s var(--weich);
}
.js .grossRingBahn { stroke-dasharray: var(--bogen, 50) 100; }
.martin { position: absolute; left: 13%; bottom: 0; width: 74%; filter: drop-shadow(0 30px 40px rgba(31, 41, 55, 0.18)); }

.schwebKarte {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(196, 198, 207, 0.45);
  border-radius: 16px;
  box-shadow: var(--schatten-schweb);
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
  animation: schweben 7s ease-in-out infinite;
}
.schwebKarte span { display: flex; flex-direction: column; gap: 2px; }
.schwebKarte small { font-family: var(--schrift-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinte-leise); }
.schwebKarte b { font-family: var(--schrift-anzeige); font-size: 19px; font-weight: 600; }
.schwebKarte em { font-style: normal; font-weight: 600; font-size: 13px; color: var(--gruen); }
.js .schwebKarte:not(.isZu) em { color: var(--tinte-leise); font-weight: 500; }
.js .schwebKarte:not(.isZu) em::before { content: attr(data-vorher); }
.js .schwebKarte:not(.isZu) em { font-size: 0; }
.js .schwebKarte:not(.isZu) em::before { font-size: 13px; }
.schwebKarte .ring { width: 34px; height: 34px; }
.schwebA { left: -16%; top: 58%; }
.schwebB { right: -3%; top: 12%; animation-delay: -2s; }
.schwebC { left: -4%; top: 82%; animation-delay: -4s; }
.schwebD { right: -3%; top: 78%; animation-delay: -1s; }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (max-width: 1099px) {
  .anfangInhalt { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .anfangText { padding: 40px 0 36px; }
  .anfangBild { justify-self: center; max-width: 560px; width: 100%; margin-right: 0; }
}
@media (max-width: 559px) {
  .anfang h1 { font-size: clamp(44px, 12.4vw, 60px); }
  .anfangAktion { gap: 20px; }
  .anfangAktion .knopfGelb { width: 100%; }
  .anfangBild { width: calc(100% + 2 * var(--rand)); margin-inline: calc(-1 * var(--rand)); max-width: none; }
  .schwebKarte { padding: 9px 12px 9px 9px; gap: 9px; border-radius: 13px; }
  .schwebKarte b { font-size: 15px; }
  .schwebKarte small { font-size: 9px; }
  .schwebKarte em, .js .schwebKarte:not(.isZu) em::before { font-size: 12px; }
  .schwebKarte .ring { width: 26px; height: 26px; }
  .schwebA { left: 2%; top: 56%; }
  .schwebB { right: 2%; top: 10%; }
  .schwebC { left: 3%; top: 84%; }
  .schwebD { right: 2%; top: 76%; }
}

/* ---------- Dunkle Tafeln ---------- */

.tafel {
  position: relative;
  margin-inline: clamp(8px, 1.6vw, 24px);
  padding-block: var(--abschnitt);
  border-radius: clamp(24px, 3vw, 40px);
  background:
    radial-gradient(60% 50% at 88% 12%, rgba(255, 195, 14, 0.09), transparent 70%),
    radial-gradient(50% 60% at 8% 100%, rgba(255, 255, 255, 0.05), transparent 70%),
    var(--tafel);
  color: #f4f3f0;
  overflow: hidden;
}
.tafel h2, .tafel h3 { color: #fff; }

/* ---------- 2 · Flickwerk ---------- */

.flickwerk { margin-top: 0; }
.flickInhalt { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.flickText h2 { max-width: 11em; }

.schalter { display: inline-flex; align-items: center; gap: 14px; margin-top: 36px; padding: 0; background: none; border: 0; cursor: pointer; }
.schalterSpur { position: relative; width: 64px; height: 36px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); transition: background-color 0.35s ease; }
.schalterKnopf { position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); transition: transform 0.4s var(--weich); }
.schalterText { position: relative; font-weight: 700; font-size: 17px; color: #fff; min-width: 9em; text-align: left; }
.schalterAn { position: absolute; left: 0; opacity: 0; transition: opacity 0.3s; }
.schalterAus { transition: opacity 0.3s; }
.schalter[aria-checked='true'] .schalterSpur { background: var(--gruen); }
.schalter[aria-checked='true'] .schalterKnopf { transform: translateX(28px); }
.schalter[aria-checked='true'] .schalterAus { opacity: 0; }
.schalter[aria-checked='true'] .schalterAn { opacity: 1; }
.schalter:focus-visible .schalterSpur { outline: 3px solid rgba(255, 195, 14, 0.6); outline-offset: 3px; }

.flickBuehne { position: relative; height: 470px; }
.fenster {
  position: absolute;
  background: #fff;
  color: var(--tinte);
  border-radius: 12px;
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transition: transform 0.9s var(--weich), opacity 0.6s ease;
}
.fensterLeiste { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #eceae4; font-family: var(--schrift-mono); font-size: 11px; color: var(--tinte-leicht); white-space: nowrap; overflow: hidden; }
.fensterLeiste i { width: 9px; height: 9px; border-radius: 50%; background: #d3d0c8; flex-shrink: 0; }
.fensterLeiste span { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; }
.fensterWord { left: 0; top: 18px; width: 58%; transform: rotate(-5deg); }
.wordSeite { display: flex; flex-direction: column; gap: 9px; padding: 18px 22px 24px; }
.wordSeite b { font-family: 'Times New Roman', serif; font-size: 22px; font-weight: 700; }
.wordSeite span { height: 7px; border-radius: 4px; background: #e4e2dc; }
.zeileLang { width: 92%; } .zeileMittel { width: 70%; } .zeileKurz { width: 40%; }
.wordTabelle { display: grid !important; grid-template-columns: 3fr 1fr 1fr; gap: 4px; height: auto !important; background: none !important; }
.wordTabelle i { height: 38px; border: 1px solid #d9d6ce; }
.fensterExcel { right: 0; top: 0; width: 52%; transform: rotate(4deg); }
.excelRaster { display: grid; grid-template-columns: 1.3fr 0.7fr 0.8fr 1fr; font-size: 13px; }
.excelRaster span { padding: 7px 9px; border-right: 1px solid #e3e1db; border-bottom: 1px solid #e3e1db; min-height: 33px; }
.excelRaster span:nth-child(-n + 4) { background: #f3f7f1; font-weight: 700; }
.excelFehler { color: #a1262d; font-family: var(--schrift-mono); font-size: 12px; }
.fensterChat { left: 22%; top: 196px; width: 46%; transform: rotate(3deg); z-index: 2; }
.chat { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: #efeae2; }
.blase { align-self: flex-start; max-width: 86%; padding: 8px 12px; background: #fff; border-radius: 4px 12px 12px 12px; font-size: 14px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); }
.blaseIch { align-self: flex-end; background: #d9fdd3; border-radius: 12px 4px 12px 12px; }
.fensterMail { right: 2%; top: 262px; width: 50%; transform: rotate(-4deg); z-index: 1; }
.mail { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 22px; font-size: 14px; }
.mail > span:not([class]) { color: var(--tinte-leise); font-size: 13px; margin-top: -4px; }
.mail > span[class] { height: 7px; border-radius: 4px; background: #e4e2dc; }

.flickApp { position: absolute; inset: 40px 0 auto 0; opacity: 0; transform: scale(0.88); transition: opacity 0.7s ease 0.35s, transform 0.9s var(--weich) 0.3s; pointer-events: none; }
.flickwerk.istAn .fenster { opacity: 0; transform: translate(var(--zu-x, 0), var(--zu-y, 0)) scale(0.2) rotate(0deg); }
.fensterWord { --zu-x: 40%; --zu-y: 60%; }
.fensterExcel { --zu-x: -40%; --zu-y: 70%; }
.fensterChat { --zu-x: 10%; --zu-y: -10%; }
.fensterMail { --zu-x: -30%; --zu-y: -40%; }
.flickwerk.istAn .flickApp { opacity: 1; transform: none; }

@media (max-width: 959px) {
  .flickInhalt { grid-template-columns: 1fr; gap: 40px; }
  .flickBuehne { height: 440px; }
}
@media (max-width: 559px) {
  .flickBuehne { height: 400px; }
  .fensterWord { width: 70%; }
  .fensterExcel { width: 66%; top: 36px; }
  .fensterChat { width: 64%; left: 10%; top: 190px; }
  .fensterMail { width: 66%; top: 270px; }
  .excelRaster { font-size: 11.5px; }
  .flickApp { inset: 70px 0 auto 0; }
}

/* ---------- 3 · Ein Auftrag ---------- */

.kette { padding-block: var(--abschnitt); }
.ketteRinge { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); max-width: 980px; margin: 0 auto; }
.ketteRinge::before, .ketteRinge::after { content: ''; position: absolute; top: 21px; left: calc(100% / 12); height: 3px; border-radius: 2px; }
.ketteRinge::before { right: calc(100% / 12); background: rgba(196, 198, 207, 0.5); }
.ketteRinge::after { width: calc((100% - 100% / 6) * var(--fortschritt, 1)); background: var(--gruen); transition: width 0.8s var(--weich); }
.ketteRinge button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 0; background: none; border: 0; cursor: pointer; }
.ketteRinge .ring { width: 44px; height: 44px; background: var(--grund); border-radius: 50%; transition: transform 0.4s var(--weich); }
.ketteRinge span { font-family: var(--schrift-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinte-leise); transition: color 0.3s; }
.ketteRinge [aria-selected='true'] span { color: var(--tinte); }
.ketteRinge [aria-selected='true'] .ring { transform: scale(1.18); }
.ketteRinge button:focus-visible { outline: none; }
.ketteRinge button:focus-visible .ring { outline: 3px solid rgba(255, 195, 14, 0.6); outline-offset: 4px; border-radius: 50%; }

.ketteBuehne { position: relative; margin-top: 56px; height: clamp(560px, 58vw, 760px); overflow-x: clip; overflow-y: visible; }
.station { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.8s var(--weich), visibility 0s linear 0.6s; }
.station.isAktiv { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.station figcaption { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(640px, 100%); text-align: center; font-size: clamp(17px, 1.5vw, 19px); color: var(--tinte-leicht); }
.station figcaption b { color: var(--tinte); }
.station .laptop { position: absolute; left: 50%; top: 88px; width: min(1000px, 86%); transform: translateX(-54%); }
.station .handy { position: absolute; right: 2%; bottom: 0; width: min(240px, 21%); }
.stationBlatt { position: absolute; left: 50%; top: 88px; width: min(430px, 40%); transform: translateX(-58%) rotate(-1.5deg); }
.stationBlatt img { width: 100%; }
.stationKnoepfe { position: absolute; left: 50%; top: 52%; width: min(340px, 32%); transform: translateX(28%) rotate(1.5deg); background: #fff; border-radius: 18px; box-shadow: var(--schatten-schweb); overflow: hidden; }
.station .handyAllein { right: auto; left: 50%; top: 88px; bottom: auto; width: min(270px, 26%); transform: translateX(-10%); z-index: 1; }
.station .handyZweit { right: auto; left: 50%; top: 128px; bottom: auto; width: min(240px, 23%); transform: translateX(-100%) rotate(-6deg); opacity: 0.94; }

@media (max-width: 719px) {
  .ketteRinge .ring { width: 34px; height: 34px; }
  .ketteRinge::before, .ketteRinge::after { top: 16px; }
  .ketteRinge span { font-size: 9px; letter-spacing: 0.04em; }
  .ketteBuehne { height: 620px; margin-top: 36px; }
  .station .laptop { top: 118px; width: 88%; }
  .station .handy { width: 40%; right: 2%; bottom: 20px; }
  .stationBlatt { top: 118px; width: 74%; transform: translateX(-60%) rotate(-1.5deg); }
  .stationKnoepfe { width: 62%; top: 60%; transform: translateX(-24%) rotate(1.5deg); }
  .station .handyAllein { top: 118px; bottom: auto; width: 56%; transform: translateX(-20%); }
  .station .handyZweit { top: 150px; bottom: auto; width: 50%; transform: translateX(-88%) rotate(-6deg); }
  .station.mitHandy .laptop { display: none; }
  .station.mitHandy .handy { right: auto; left: 50%; top: 118px; bottom: auto; width: 60%; transform: translateX(-50%); }
}

/* ---------- Graue Abschnitte ---------- */

.grau { background: var(--flaeche); padding-block: var(--abschnitt); }

/* ---------- 4 · Beim Kunden ---------- */

.kunde { margin-top: calc(-1 * clamp(40px, 5vw, 60px)); padding-top: calc(var(--abschnitt) + clamp(40px, 5vw, 60px)); }
.kundeInhalt { display: grid; grid-template-columns: 1fr; gap: clamp(56px, 6vw, 88px); }
.kundeBild { position: relative; width: 74%; }
.kundeBild .foto { aspect-ratio: 3 / 2; }
.kundeBlatt { position: absolute; left: 80%; top: -7%; width: 50%; aspect-ratio: 1788 / 1240; transform: rotate(2.5deg); }
.kundeBlatt img { position: absolute; left: 0; top: 0; width: 100%; }
.verlauf { position: absolute; left: -4%; bottom: -12%; width: min(340px, 58%); padding: 18px 22px 20px; background: #fff; border: 1px solid rgba(196, 198, 207, 0.45); border-radius: 18px; box-shadow: var(--schatten-schweb); }
.verlaufTitel { font-family: var(--schrift-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinte-leise); margin-bottom: 10px; }
.verlauf li { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; padding: 7px 0; font-size: 15px; transition: opacity 0.5s ease, transform 0.6s var(--weich); }
.verlauf li + li { border-top: 1px solid rgba(196, 198, 207, 0.3); }
.verlauf .ring { width: 22px; height: 22px; }
.verlauf time { font-family: var(--schrift-mono); font-size: 13px; color: var(--tinte-leise); }
.js .verlauf li:not(.isDa) { opacity: 0; transform: translateX(-12px); }
.kundeText { order: -1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: end; }
.kundeText h2 { max-width: 8em; }
.kundeText p { margin-top: 0 !important; }

@media (max-width: 959px) {
  .kundeInhalt { gap: 120px; }
  .kundeText { grid-template-columns: 1fr; gap: 20px; }
  .kundeBild { width: 88%; }
  .kundeBlatt { left: auto; right: -14%; top: -18%; width: 48%; }
}
@media (max-width: 559px) {
  .kundeInhalt { gap: 170px; }
  .kundeBild { width: 100%; }
  .kundeBild .foto { position: relative; z-index: 1; }
  .kundeBlatt { width: 54%; top: -40%; right: -2%; aspect-ratio: 1788 / 2526; }
  .verlauf { position: relative; z-index: 2; left: auto; bottom: auto; width: auto; margin: -44px 10px 0; }
}

/* ---------- 5 · Stunden vom Handy ---------- */

.stunden { padding-block: var(--abschnitt) calc(var(--abschnitt) + 30px); background: var(--grund); }
.stundenInhalt { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.stundenText h2 { max-width: 7em; }
.zaehler { display: flex; align-items: baseline; gap: 16px; margin-top: 36px; }
.zaehlerZahl { font-family: var(--schrift-anzeige); font-weight: 700; font-size: clamp(88px, 10vw, 140px); line-height: 0.8; font-variant-numeric: tabular-nums; }
.zaehlerEinheit { font-size: 15px; line-height: 1.35; color: var(--tinte-leicht); max-width: 9em; }
.stundenBild { position: relative; }
.stundenBild .foto { width: 76%; margin-left: auto; aspect-ratio: 4 / 5; }
.stundenHandy { position: absolute; left: 2%; bottom: -8%; width: 36%; transform: rotate(-4deg); }

@media (max-width: 959px) {
  .stundenInhalt { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 559px) {
  .stundenBild .foto { width: 82%; }
  .stundenHandy { width: 46%; left: -1%; }
}

/* ---------- 6 · Die App denkt mit ---------- */

.denkGitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.denkKarte { display: flex; flex-direction: column; min-width: 0; border-radius: 22px; }
.denkKarte.gross { padding: 18px 18px 28px; background: var(--tafel-hell); border: 1px solid rgba(255, 255, 255, 0.07); }
.denkKarte.klein { padding: 16px 16px 22px; background: var(--tafel-tief); border: 1px solid rgba(255, 255, 255, 0.04); }
.denkKarte h3 { margin: 22px 10px 0; font-size: 28px; line-height: 1.05; }
.denkKarte.klein h3 { font-size: 21px; margin-top: 16px; }
.denkKarte p { margin: 8px 10px 0; font-size: 16px; color: rgba(244, 243, 240, 0.68); }
.denkKarte.klein p { font-size: 15px; }
.moment { position: relative; height: 190px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 18px; }
.klein .moment { height: 96px; flex-direction: row; align-items: center; justify-content: center; }

.miniZeile { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 14px; background: #fff; color: var(--tinte); border-radius: 10px; font-size: 13px; white-space: nowrap; overflow: hidden; }
.miniZeile > span:not(.punkt) { overflow: hidden; text-overflow: ellipsis; }
.miniZeile b { font-family: var(--schrift-mono); font-size: 12px; font-weight: 500; }
.miniZeile em { margin-left: auto; font-style: normal; color: var(--tinte-leise); font-size: 12px; }
.punkt { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.punktGesendet { background: var(--violett); }
.miniZeile .ring { width: 20px; height: 20px; }
.nfBrief { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; color: var(--gelb); opacity: 0; }
.nfBrief svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.nfErledigt { background: rgba(255, 255, 255, 0.94); }

.momentWandern { flex-direction: row; align-items: center; justify-content: center; gap: 14px; }
.wanderSpalte { display: flex; flex-direction: column; gap: 7px; width: 38%; padding: 12px; background: #fff; border-radius: 10px; }
.wanderSpalte small { font-family: var(--schrift-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinte-leise); margin-bottom: 2px; }
.wanderSpalte span { height: 10px; border-radius: 3px; background: #e4e2dc; }
.wanderSpalte span:nth-child(3) { width: 80%; } .wanderSpalte span:nth-child(4) { width: 90%; } .wanderSpalte span:nth-child(5) { width: 64%; }
.wanderZiel span { background: rgba(0, 142, 94, 0.35); }
.wanderPfeil { width: 40px; flex-shrink: 0; fill: none; stroke: var(--gelb); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.denkKarte .fehltSatz { margin: 0; padding: 11px 13px; background: #fff; color: var(--tinte); border-radius: 10px; font-size: 13px; line-height: 1.4; }
.fehltFelder { display: flex; align-items: center; gap: 8px; }
.fehltFeld { display: flex; align-items: center; height: 38px; padding: 0 12px; min-width: 70px; background: #fff; color: var(--tinte); border-radius: 8px; font-size: 14px; box-shadow: inset 0 0 0 2px rgba(255, 195, 14, 0.8); }
.fehltOrt { flex: 1; box-shadow: none; }
.fehltFeld i { font-style: normal; }
.fehltFelder .ring { width: 28px; height: 28px; }

.momentNummer { font-family: var(--schrift-mono); font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; }
.momentNummer span { position: absolute; transition: transform 0.6s var(--weich), opacity 0.5s; }
.nrAlt { opacity: 0; transform: translateY(-120%); color: rgba(255, 255, 255, 0.45); }
.nrNeu { color: #fff; }
.momentPause { gap: 12px !important; font-size: 14px; color: rgba(255, 255, 255, 0.72); flex-wrap: wrap; }
.momentPause b { font-family: var(--schrift-anzeige); font-size: 30px; color: #fff; }
.pauseAbzug { padding: 3px 8px; border-radius: 6px; background: rgba(255, 195, 14, 0.14); color: var(--gelb); font-size: 12px; font-weight: 600; }
.momentQr svg { width: 62px; height: 62px; fill: #fff; padding: 5px; background: rgba(255, 255, 255, 0.08); border-radius: 6px; }

/* Die Momente spielen, sobald die Karte im Bild ist (Klasse .spielt). */
.js .denkKarte:not(.spielt) .nfErledigt { opacity: 0; transform: translateY(10px); }
.nfErledigt { transition: opacity 0.5s ease 1.4s, transform 0.6s var(--weich) 1.4s; }
.js .denkKarte.spielt .nfBrief { animation: briefFlug 1.3s var(--weich) 0.3s both; }
@keyframes briefFlug { 0% { opacity: 0; transform: translate(-90px, -26px) scale(0.7); } 30% { opacity: 1; } 80% { opacity: 1; transform: translate(80px, -26px) scale(1); } 100% { opacity: 0; transform: translate(110px, -26px); } }
.js .denkKarte.spielt .nfTage { color: var(--orange); }
.wanderZiel span { transition: opacity 0.4s ease, transform 0.5s var(--weich); }
.js .denkKarte:not(.spielt) .wanderZiel span { opacity: 0; transform: translateX(-30px); }
.wanderZiel span:nth-child(2) { transition-delay: 0.3s; } .wanderZiel span:nth-child(3) { transition-delay: 0.55s; } .wanderZiel span:nth-child(4) { transition-delay: 0.8s; } .wanderZiel span:nth-child(5) { transition-delay: 1.05s; }
.fehltOrt i { transition: opacity 0.4s ease 1.5s; }
.js .denkKarte:not(.spielt) .fehltOrt i { opacity: 0; }
.js .denkKarte:not(.spielt) .nrNeu { opacity: 0; transform: translateY(120%); }
.js .denkKarte:not(.spielt) .nrAlt { opacity: 1; transform: none; }
.nrNeu { transition-delay: 0.6s !important; }
.pauseAbzug, .momentPause b { transition: opacity 0.4s ease, transform 0.5s var(--weich); }
.pauseAbzug { transition-delay: 0.5s; } .momentPause b { transition-delay: 1.1s; }
.js .denkKarte:not(.spielt) .pauseAbzug, .js .denkKarte:not(.spielt) .momentPause b { opacity: 0; transform: scale(0.8); }
.momentQr svg { transition: clip-path 1.4s var(--weich) 0.3s; clip-path: inset(0 0 0 0); }
.js .denkKarte:not(.spielt) .momentQr svg { clip-path: inset(0 0 100% 0); }

@media (max-width: 959px) {
  .denkGitter { grid-template-columns: 1fr 1fr; }
  .denkKarte.gross:first-child { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .denkGitter { grid-template-columns: 1fr; gap: 12px; }
  .denkKarte.gross:first-child { grid-column: auto; }
  .denkKarte.klein { display: grid; grid-template-columns: 110px 1fr; grid-template-rows: auto auto; column-gap: 14px; padding: 12px; }
  .denkKarte.klein .moment { grid-row: 1 / 3; height: auto; min-height: 84px; padding: 8px; }
  .denkKarte.klein h3 { margin: 6px 0 0; font-size: 19px; }
  .denkKarte.klein p { margin: 4px 0 0; font-size: 14px; }
  .momentNummer { font-size: 13px; }
  .momentPause { font-size: 0 !important; }
  .momentPause b { font-size: 26px; }
  .momentPause .pauseAbzug { font-size: 10px; }
}

/* ---------- 7 · Was drauf muss ---------- */

.beleg { padding-block: var(--abschnitt); background: var(--grund); }
.belegBuehne { position: relative; width: min(660px, 100%); margin: 0 auto; }
.belegBlatt { transform: rotate(-0.6deg); }
.schild {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  background: #fff;
  border: 1px solid rgba(196, 198, 207, 0.55);
  border-radius: 99px;
  box-shadow: var(--schatten-schweb);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 0.5s ease, transform 0.6s var(--weich);
}
.schild .ring { width: 26px; height: 26px; }
.schild.links { transform: translate(-100%, -50%); flex-direction: row-reverse; padding: 8px 8px 8px 16px; }
.schild.rechts { transform: translate(0, -50%); }
.js .schild.links:not(.isDa) { opacity: 0; transform: translate(calc(-100% + 16px), -50%); }
.js .schild.rechts:not(.isDa) { opacity: 0; transform: translate(-16px, -50%); }

@media (max-width: 1099px) {
  .belegBuehne { width: min(500px, 100%); }
  .schild { font-size: 13px; }
}
@media (max-width: 859px) {
  .belegBuehne { width: 100%; }
  .belegBlatt { width: 100%; max-width: 560px; margin: 0 auto; }
  .schilder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
  .schild, .schild.links, .schild.rechts { position: static; transform: none; flex-direction: row; padding: 8px 12px 8px 8px; white-space: normal; border-radius: 14px; font-size: 14px; line-height: 1.25; }
  .js .schild.links:not(.isDa), .js .schild.rechts:not(.isDa) { transform: translateY(10px); }
}

/* ---------- 8 · Umsteigen ---------- */

.pfadBuehne { position: relative; }
.pfad { position: absolute; left: 0; top: 0; width: 100%; height: 120px; overflow: visible; }
.pfad path { fill: none; stroke: rgba(31, 41, 55, 0.28); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pfad .pfadPunkt { display: none; }
.pfadLaeufer { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 0 7px rgba(255, 195, 14, 0.22), 0 6px 14px rgba(31, 41, 55, 0.25); }
.dialoge { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding-top: 150px; }
.dialog { display: flex; flex-direction: column; gap: 18px; }
.dialogKarte { flex: 1; padding: 24px 24px 26px; background: #fff; border: 1px solid rgba(196, 198, 207, 0.45); border-radius: 20px; box-shadow: var(--schatten-schweb); }
.dialogTitel { font-family: var(--schrift-anzeige); font-size: 25px; font-weight: 700; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(196, 198, 207, 0.35); }
.dialogMono { font-family: var(--schrift-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinte-leicht); padding-top: 8px; }
.dialogZeile { font-size: 15px; color: var(--tinte-leicht); }
.dialogZeile b { font-family: var(--schrift-anzeige); font-size: 19px; color: var(--tinte); }
.importListe { margin: 14px 0 16px; border: 1px solid rgba(196, 198, 207, 0.45); border-radius: 12px; overflow: hidden; }
.importListe li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: 14px; transition: opacity 0.4s ease, transform 0.5s var(--weich); }
.importListe li + li { border-top: 1px solid rgba(196, 198, 207, 0.3); }
.importListe b { font-family: var(--schrift-anzeige); font-size: 16px; }
.importListe span, .importMehr { color: var(--tinte-leise); }
.dialogKnopf { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 10px; background: var(--gelb); color: var(--gelb-text); font-weight: 700; font-size: 14px; }
.dialogLabel { font-family: var(--schrift-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinte-leise); margin-top: 6px; }
.nummerZeile { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.nummerFeld { display: inline-flex; white-space: nowrap; align-items: center; height: 46px; padding: 0 14px; border-radius: 10px; font-family: var(--schrift-mono); font-size: 18px; color: var(--tinte-leise); box-shadow: inset 0 0 0 1px var(--linie), 0 0 0 4px rgba(255, 195, 14, 0.28); }
.nummerFeld b { color: var(--tinte); font-weight: 600; min-width: 2.2em; }
.nummerKnopf { display: inline-flex; align-items: center; height: 42px; padding: 0 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(196, 198, 207, 0.8); font-size: 14px; font-weight: 600; transition: opacity 0.3s; }
.nummerZeile .ring { width: 34px; height: 34px; transition: opacity 0.3s; }
.dialogFormat { margin-top: 12px; font-family: var(--schrift-mono); font-size: 12px; color: var(--tinte-leise); }
.exportBalken { height: 8px; margin: 20px 0 16px; border-radius: 99px; background: var(--flaeche); overflow: hidden; }
.exportBalken span { display: block; height: 100%; width: 100%; background: var(--gruen); border-radius: inherit; transition: width 1.6s var(--weich); }
.exportDateien li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-family: var(--schrift-mono); font-size: 13px; }
.exportDateien .ring { width: 22px; height: 22px; }
.dialogUnter { font-size: 16px; color: var(--tinte-leicht); padding-inline: 6px; }
.dialogUnter b { color: var(--tinte); }

.js .dialog:not(.spielt) .importListe li { opacity: 0; transform: translateY(8px); }
.importListe li:nth-child(2) { transition-delay: 0.25s; } .importListe li:nth-child(3) { transition-delay: 0.5s; } .importListe li:nth-child(4) { transition-delay: 0.75s; }
.js .dialog:not(.spielt) .exportBalken span { width: 0; }
.js .dialog:not(.spielt) .nummerZeile .ring { opacity: 0; }
.js .dialog.spielt:not(.fertig) .nummerZeile .ring { opacity: 0; }
.js .dialog.fertig .nummerKnopf { opacity: 0; width: 0; padding: 0; margin-left: -10px; }

@media (max-width: 959px) {
  .nummerFeld { font-size: 16px; padding: 0 10px; }
  .nummerZeile { flex-wrap: wrap; }
  .pfad, .pfadLaeufer { display: none; }
  .dialoge { grid-template-columns: 1fr; padding-top: 0; gap: 36px; max-width: 480px; margin: 0 auto; }
}

/* ---------- 9 · Preise ---------- */

.preise { padding-block: var(--abschnitt); background: var(--grund); }
.preisKarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1040px; margin: 0 auto; }
.preisKarte { display: flex; flex-direction: column; padding: 30px 30px 32px; background: #fff; border: 1px solid rgba(196, 198, 207, 0.45); border-radius: 22px; }
.preisPersonen { font-family: var(--schrift-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinte-leicht); }
.preisRinge { display: flex; flex-wrap: wrap; gap: 5px; margin: 16px 0 26px; min-height: 22px; }
.preisRinge .ring { width: 22px; height: 22px; }
/* 60px statt 68px seit den Bruttobeträgen (19.10.2026): „94,80 €“ plus „im Monat“ muss in die Drittel-Karte passen, sonst bricht „Monat“ allein um. */
.preisBetrag { font-family: var(--schrift-anzeige); font-size: 60px; font-weight: 700; line-height: 0.9; }
.preisBetrag small { margin-left: 8px; font-family: var(--schrift-text); font-size: 16px; font-weight: 500; color: var(--tinte-leise); white-space: nowrap; }
.preisNetto { margin-top: 12px; font-size: 15px; color: var(--tinte-leicht); }
.preisWeitere { margin-top: 4px; font-size: 15px; color: var(--tinte-leicht); }
.preisGruender { max-width: 640px; margin: 32px auto 0; text-align: center; font-size: 16px; color: var(--tinte-leicht); }
.preisGruender b { color: var(--tinte); }
.preisAktion { display: flex; justify-content: center; margin-top: 32px; }
.preise .kleingedruckt { margin-top: 14px; }

@media (max-width: 859px) {
  .preisKarten { grid-template-columns: 1fr; max-width: 460px; }
  .preisBetrag { font-size: 58px; }
}

/* ---------- 10 · Fragen und Kontakt ---------- */

.fragenInhalt { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.fragenListe h2, .kontakt h2 { margin-bottom: 28px; }
.fragenListe details { border-bottom: 1px solid rgba(196, 198, 207, 0.6); }
.fragenListe summary { position: relative; display: block; padding: 20px 52px 20px 0; font-family: var(--schrift-anzeige); font-size: 22px; font-weight: 600; line-height: 1.2; cursor: pointer; list-style: none; }
.fragenListe summary::-webkit-details-marker { display: none; }
.fragenListe summary::after { content: ''; position: absolute; right: 4px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--gelb); background: linear-gradient(var(--tinte), var(--tinte)) center / 12px 2px no-repeat, linear-gradient(var(--tinte), var(--tinte)) center / 2px 12px no-repeat; transition: transform 0.35s var(--weich), background-color 0.3s; }
.fragenListe details[open] summary::after { transform: rotate(45deg); }
.fragenListe summary:focus-visible { outline: 3px solid rgba(255, 195, 14, 0.6); outline-offset: 4px; border-radius: 6px; }
.fragenListe details p { padding: 0 52px 22px 0; color: var(--tinte-leicht); }

.kontakt { position: sticky; top: 100px; padding: clamp(24px, 3vw, 36px); background: #fff; border: 1px solid rgba(196, 198, 207, 0.45); border-radius: 26px; box-shadow: 0 24px 60px -30px rgba(31, 41, 55, 0.3); }
.kontakt h2 { font-size: clamp(34px, 3.4vw, 46px); margin-bottom: 14px; }
.kontakt > p { color: var(--tinte-leicht); }
.formular { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld span { font-size: 14px; font-weight: 600; }
.feld textarea, .feld input { width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--tinte); background: var(--grund); border: 1px solid rgba(196, 198, 207, 0.9); border-radius: 12px; resize: vertical; transition: border-color 0.2s, box-shadow 0.2s; }
.feld textarea:focus, .feld input:focus { outline: none; border-color: var(--tinte-leise); box-shadow: 0 0 0 4px rgba(255, 195, 14, 0.25); }
.falle { position: absolute; left: -9999px; }
.formular .knopf { align-self: flex-start; }
.formFehler { font-size: 14px; color: #a1262d; }
.danke { display: flex; gap: 14px; align-items: flex-start; margin-top: 24px; padding: 18px; border-radius: 14px; background: rgba(0, 142, 94, 0.08); }
.danke .ring { width: 32px; height: 32px; }
.kontaktMail { margin-top: 20px; font-size: 15px; }
.kontaktMail a { color: var(--tinte-leicht); }

@media (max-width: 959px) {
  .fragenInhalt { grid-template-columns: 1fr; }
  .kontakt { position: static; }
}
@media (max-width: 559px) {
  .fragenListe summary { font-size: 20px; }
  .fragenListe details p { padding-right: 0; }
}

/* ---------- 11 · Der Abend gehört dir ---------- */

.schluss { background: linear-gradient(var(--flaeche) 0 42%, var(--fuss) 42% 100%); padding-bottom: clamp(56px, 7vw, 96px); }
.schlussKarte {
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(32px, 5vw, 72px);
  border-radius: clamp(26px, 3vw, 40px);
  background:
    radial-gradient(70% 70% at 100% 0%, rgba(255, 195, 14, 0.12), transparent 60%),
    var(--tafel);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.schlussText h2 { color: #fff; font-size: clamp(46px, 6.4vw, 92px); line-height: 0.92; max-width: 7em; }
.schlussText > p { margin-top: 22px; font-size: clamp(17px, 1.5vw, 20px); color: rgba(244, 243, 240, 0.74); max-width: 26em; }
.schlussText .knopf { margin-top: 32px; }
.zusagen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 32px; font-size: 15px; font-weight: 600; color: rgba(244, 243, 240, 0.9); }
.zusagen li { display: flex; align-items: center; gap: 10px; }
.zusagen .ring { width: 24px; height: 24px; }
.zusagen .ring.isZu, html:not(.js) .zusagen .ring { --ring-fuell: rgba(0, 142, 94, 0.2); }

/* Das Foto läuft rechts aus der Karte, links runde Ecken, oben und unten Luft. Der
   gelbe Bogen liegt zwischen Foto und freigestelltem Martin, also hinter ihm. Alle drei
   Ebenen schneiden gleich zu (cover, Mitte), sonst verrutscht die Freistellung. */
.schlussBild { position: relative; align-self: stretch; margin-right: calc(-1 * clamp(32px, 5vw, 72px)); min-height: 420px; border-radius: 30px 0 0 30px; overflow: hidden; box-shadow: -30px 30px 60px -30px rgba(0, 0, 0, 0.55); }
.schlussFoto, .schlussVorn, .schlussBogen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.schlussBogen circle { fill: none; stroke: var(--gelb); stroke-width: 24; stroke-linecap: round; stroke-dasharray: 33 67; stroke-dashoffset: 0; transform: rotate(186deg); transform-origin: 890px 470px; transition: stroke-dasharray 1.6s var(--weich) 0.2s; filter: drop-shadow(0 0 18px rgba(255, 195, 14, 0.35)); }
.js .schlussKarte:not(.isZu) .schlussBogen circle { stroke-dasharray: 0 100; }
.schlussVorn { pointer-events: none; }

@media (max-width: 859px) {
  .schlussKarte { grid-template-columns: 1fr; }
  /* Breite ausdrücklich setzen: Safari lässt ein Rasterelement mit Seitenverhältnis, dessen
     Inhalt nur aus absolut gesetzten Ebenen besteht, sonst auf Inhaltsbreite schrumpfen. */
  .schlussBild { order: -1; align-self: start; width: calc(100% + clamp(32px, 5vw, 72px)); min-height: 0; aspect-ratio: 4 / 3; margin-top: calc(-1 * clamp(32px, 5vw, 72px) + 16px); }
  .schluss { background: linear-gradient(var(--flaeche) 0 30%, var(--fuss) 30% 100%); }
}
@media (max-width: 459px) {
  .zusagen { grid-template-columns: 1fr; }
  .schlussText .knopf { width: 100%; }
}

/* ---------- Fuß ---------- */

.fuss { background: var(--fuss); color: rgba(244, 243, 240, 0.72); padding: 24px 0 36px; font-size: 15px; }
.fussInhalt { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-top: 24px; }
.fussSatz { margin-top: 10px; }
.fussSpalte { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.fussSpalte p { font-family: var(--schrift-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 243, 240, 0.45); margin-bottom: 4px; }
.fussSpalte a, .fussKnopf { color: rgba(244, 243, 240, 0.8); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-size: 15px; }
.fussSpalte a:hover, .fussKnopf:hover { color: #fff; }
.fussZeile { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; color: rgba(244, 243, 240, 0.45); }
@media (max-width: 859px) {
  .fussInhalt { grid-template-columns: 1fr 1fr; }
}

/* ---------- Einwilligung ---------- */

/* Cookie-Hinweis im Look, den jeder kennt: am Handy ein flaches Blatt über die
   ganze Breite, zwei Knöpfe nebeneinander, „Alle akzeptieren" dunkel. „Nur notwendige" (= ablehnen)
   bleibt auf derselben Ebene und gleich groß, nur leiser: fehlt es dort, werten es
   fast alle EU-Aufsichten als Verstoß (EDPB Cookie Banner Taskforce, 17.1.2023,
   Punkt 8). Seit 29.9.2026 knapp gehalten (vorher 43 % des Handy-Bildschirms, über
   dem Startknopf) und erst nach dem ersten Scrollen bzw. gut zwei Sekunden. */
.consentCard { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid rgba(196, 198, 207, 0.5); border-radius: 16px 16px 0 0; box-shadow: 0 -14px 40px -20px rgba(31, 41, 55, 0.35); font-size: 14px; animation: consentHoch 0.32s ease-out; }
.consentCard[hidden] { display: none; }
@keyframes consentHoch { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .consentCard { animation: none; } }
.consentTitle { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
/* Am Handy ohne Überschrift: der Satz sagt es, die Zeile kostete Platz über dem Startknopf. */
@media (max-width: 639px) { .consentTitle { display: none; } }
.consentText { color: var(--tinte-leicht); line-height: 1.45; }
.consentActions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.consentActions .knopf { width: 100%; }
.consentActions .knopf[hidden] { display: none; }
/* Beim Auswählen untereinander: Speichern und Alle akzeptieren brauchen Platz. */
.consentWaehlen .consentActions { grid-template-columns: 1fr; }
.consentWaehlen #consentAccept { order: -1; }
.consentWaehlen #consentDecline { order: 1; }
.consentPick { display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.consentPick:hover { color: var(--tinte); }
.consentPick[hidden] { display: none; }
.consentChoices { display: grid; gap: 10px; margin-top: 12px; }
.consentChoices[hidden] { display: none; }
.consentChoice { display: flex; align-items: flex-start; gap: 10px; color: var(--tinte); line-height: 1.4; cursor: pointer; }
.consentChoice input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--tinte); }
@media (min-width: 640px) {
  .consentCard { left: auto; right: 16px; bottom: 16px; width: 400px; border: 1px solid rgba(196, 198, 207, 0.5); border-radius: 18px; padding: 20px; box-shadow: 0 24px 60px -20px rgba(31, 41, 55, 0.4); }
}

/* ---------- Weniger Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}