/* Aigner Digital – Startseite
   Warm und persönlich: Literata für Überschriften, Mona Sans für Text, Blau
   aus dem Logo als Akzent auf warmem Weiß und Sand. Das zentrale Stück ist
   der Abschnitt „Entstehung“: ein Browserfenster, in dem sich beim Scrollen
   eine Website aufbaut. Die Steuerung dafür steckt in script.js. */

:root {
  --papier: #fbfaf7;
  --weiss: #fff;
  --sand: #f3efe8;
  --linie: #e3ddd2;
  --tinte: #0f2330;
  --tinte-tief: #08161f;
  --text: #24323b;
  --grau: #56636c;
  --blau: #0087b8;
  --blau-tief: #006b93;
  --blau-hell: #2aa8d8;
  --eis: #e4f1f6;

  --serif: 'Literata', Georgia, serif;
  --sans: 'Mona Sans', system-ui, sans-serif;
  --nav-h: 78px;
  --rand: clamp(20px, 4.5vw, 72px);
  --ecke: 14px;
  --aus: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: var(--nav-h); }

body {
  background: var(--papier);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--blau); color: var(--weiss); }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; color: var(--tinte); text-wrap: balance; }
h2 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
h3 { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; line-height: 1.25; color: var(--tinte); }

:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; border-radius: 4px; }
.kontakt :focus-visible, footer :focus-visible { outline-color: var(--weiss); }

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 300;
  background: var(--tinte); color: var(--weiss); padding: 10px 18px; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--rand); }

/* ── Knöpfe ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1;
  padding: 0.9em 1.3em; border-radius: 10px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--aus);
}
.btn:active { transform: translateY(1px); }
.btn-gross { font-size: 1.06rem; padding: 1.05em 1.6em; }
.btn-blau { background: var(--blau-tief); color: var(--weiss); box-shadow: 0 10px 24px -12px rgba(0, 107, 147, 0.7); }
.btn-blau:hover { background: #00587a; }
.btn-rand { border-color: var(--tinte); color: var(--tinte); background: transparent; }
.btn-rand:hover { background: var(--tinte); color: var(--weiss); }

/* ── Navigation ── */
nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  padding: 0 var(--rand);
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(251, 250, 247, 0.88);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color 0.3s;
}
nav.scrolled { border-bottom-color: var(--linie); }
.logo-link { display: inline-flex; }
.logo-img { height: 44px; width: auto; }
footer .logo-img { height: 30px; }
.nav-right { display: flex; align-items: center; gap: 34px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-weight: 550; font-size: 0.98rem; color: var(--tinte); text-decoration: none; }
.nav-links a:hover { color: var(--blau-tief); }

.nav-toggle { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 12px 10px; position: relative; z-index: 201; }
.nav-toggle span { display: block; height: 2px; background: var(--tinte); border-radius: 2px; transition: transform 0.25s var(--aus); }
.nav-toggle span + span { margin-top: 8px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

/* ── Hero ── */
.hero {
  max-width: 1400px; margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(36px, 6vh, 80px)) var(--rand) clamp(48px, 7vw, 96px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 80px); align-items: center;
}
.hero-text { animation: sanft-rein 0.9s var(--aus) both; }
.hero h1 { font-size: clamp(2.8rem, 5.4vw, 5rem); }
.hero-lead { margin-top: 24px; max-width: 32em; font-size: clamp(1.1rem, 1.4vw, 1.25rem); line-height: 1.6; }

.person { margin-top: 30px; display: flex; align-items: center; gap: 14px; }
.person-bild {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blau), var(--blau-tief)); color: var(--weiss);
  font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
  box-shadow: 0 0 0 4px var(--papier), 0 0 0 5px var(--linie);
}
.person-bild img { width: 100%; height: 100%; object-fit: cover; }
.person p { font-size: 1rem; color: var(--grau); line-height: 1.4; }
.person strong { display: block; font-size: 1.05rem; color: var(--tinte); font-weight: 650; }

.hero-aktionen { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.hero-tel { text-decoration: none; color: var(--grau); }
.hero-tel strong { color: var(--tinte); font-weight: 650; white-space: nowrap; border-bottom: 2px solid var(--eis); }
.hero-tel:hover strong { border-bottom-color: var(--blau); }

/* Laptop und Handy mit echten Arbeiten */
.hero-geraete { position: relative; padding: 0 0 31% 12%; animation: sanft-rein 1.1s 0.15s var(--aus) both; }
.geraet-laptop {
  border-radius: var(--ecke); overflow: hidden; background: var(--weiss);
  box-shadow: 0 50px 90px -40px rgba(15, 35, 48, 0.55), 0 0 0 1px rgba(15, 35, 48, 0.08);
}
.laptop-leiste { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: var(--sand); border-bottom: 1px solid var(--linie); }
.laptop-leiste i { width: 9px; height: 9px; border-radius: 50%; background: #d8d1c4; }
.geraet-laptop img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.geraet-handy { position: absolute; left: 0; bottom: 0; width: 24%; }

/* Handy-Gerät: .handy ist der Bezug (cqw = Prozent seiner Breite), .rahmen
   zeichnet Gehäuse, Dynamic Island und Tasten, alles skaliert mit */
.handy { container-type: inline-size; }
.rahmen {
  position: relative; padding: 3.6cqw; border-radius: 15cqw;
  background: linear-gradient(150deg, #33434d 0%, #111c23 45%, #0b1419 100%);
  box-shadow: inset 0 0 0 0.6cqw rgba(255, 255, 255, 0.1), 0 0 0 1px #070d11, 0 50px 80px -34px rgba(15, 35, 48, 0.65), 0 18px 30px -18px rgba(15, 35, 48, 0.4);
}
.bildschirm { position: relative; overflow: hidden; border-radius: 11.6cqw; padding-top: 12cqw; background: var(--leiste, #fff); }
.bildschirm img { display: block; width: 100%; aspect-ratio: 1170 / 2532; object-fit: cover; object-position: top; }
/* Statusleiste: Uhrzeit links, Akku rechts */
.bildschirm::before {
  content: '9:41'; position: absolute; top: 3.6cqw; left: 9cqw;
  font: 600 4.4cqw/1 var(--sans); letter-spacing: -0.01em; color: var(--leiste-text, #000);
}
.bildschirm::after {
  content: ''; position: absolute; top: 4cqw; right: 8cqw; width: 6.6cqw; height: 3.2cqw; border-radius: 1cqw;
  border: 0.5cqw solid var(--leiste-text, #000); opacity: 0.85;
  background: linear-gradient(90deg, var(--leiste-text, #000) 70%, transparent 70%) content-box; padding: 0.4cqw;
}
.rahmen::before {
  content: ''; position: absolute; z-index: 1; top: 6.4cqw; left: 50%; transform: translateX(-50%);
  width: 29cqw; height: 8.4cqw; border-radius: 8.4cqw; background: #04080b;
}
.rahmen::after {
  content: ''; position: absolute; right: -1.1cqw; top: 26%; width: 1.1cqw; height: 15%; border-radius: 0 1cqw 1cqw 0;
  background: #1b2830; box-shadow: calc(-100cqw - 1.1cqw) -9cqw 0 #1b2830, calc(-100cqw - 1.1cqw) 14cqw 0 #1b2830;
}
@keyframes sanft-rein { from { opacity: 0; transform: translateY(18px); } }

.hero-leiste {
  grid-column: 1 / -1; margin-top: clamp(8px, 2vw, 24px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.hero-leiste div { padding: 22px 24px; }
.hero-leiste div + div { border-left: 1px solid var(--linie); }
.hero-leiste dt { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2.1rem); color: var(--tinte); line-height: 1.1; }
.hero-leiste dd { margin-top: 4px; color: var(--grau); font-size: 1rem; }

/* ── Vorteile ── */
.vorteile { background: var(--sand); padding: clamp(72px, 10vw, 128px) 0; }
.vorteile-raster { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.vorteile-kopf { position: sticky; top: calc(var(--nav-h) + 32px); }
.vorteile-kopf p { margin-top: 18px; color: var(--grau); max-width: 26em; }
.text-link { display: inline-block; margin-top: 22px; font-weight: 600; color: var(--blau-tief); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.vorteil-liste { display: grid; }
.vorteil-liste li { display: grid; grid-template-columns: auto 1fr; gap: 4px 22px; padding: 26px 0; border-top: 1px solid var(--linie); }
.vorteil-liste li:last-child { border-bottom: 1px solid var(--linie); }
.vorteil-liste svg { grid-row: span 2; width: 48px; height: 48px; padding: 11px; border-radius: 50%; background: var(--weiss); fill: none; stroke: var(--blau-tief); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 0 0 1px var(--linie); }
.vorteil-liste h3 { font-size: 1.45rem; align-self: center; }
.vorteil-liste p { color: var(--text); font-size: 1.05rem; max-width: 34em; }

/* ── Website-Check ── */
.check { padding: clamp(80px, 11vw, 150px) 0; }
.check-raster { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.check-kopf p { margin-top: 18px; color: var(--grau); max-width: 26em; }
.check-form { background: var(--weiss); border-radius: calc(var(--ecke) + 6px); padding: clamp(10px, 2vw, 20px) clamp(20px, 3.5vw, 40px) clamp(20px, 3.5vw, 40px); box-shadow: 0 40px 80px -50px rgba(15, 35, 48, 0.35), 0 0 0 1px var(--linie); }
.check-form fieldset { border: 0; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.check-form fieldset[disabled] { opacity: 0.35; }
.check-form legend { float: left; font-size: 1.05rem; color: var(--tinte); font-weight: 550; max-width: 30em; }
.jn { display: flex; gap: 6px; flex-shrink: 0; }
.jn input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jn span { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 44px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--linie); font-weight: 600; color: var(--tinte); cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.jn span:hover { border-color: var(--blau); }
.jn input:checked + span { background: var(--blau-tief); border-color: var(--blau-tief); color: var(--weiss); }
.jn input:focus-visible + span { outline: 3px solid var(--blau); outline-offset: 2px; }
.check-ergebnis { margin-top: 24px; padding: 24px; border-radius: var(--ecke); background: var(--eis); animation: sanft-rein 0.5s var(--aus) both; }
.check-ergebnis h3 { font-size: 1.5rem; }
.check-ergebnis p { margin-top: 8px; }
.check-ergebnis ul { margin-top: 12px; display: grid; gap: 6px; }
.check-ergebnis li { position: relative; padding-left: 26px; }
.check-ergebnis li::before { content: ''; position: absolute; left: 4px; top: 0.6em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--blau-tief); }
.check-ergebnis .btn { margin-top: 20px; }

/* ── Branchen ── */
.branchen { padding: clamp(80px, 11vw, 150px) 0 clamp(40px, 5vw, 64px); }
.branchen-reiter { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 12px; background: var(--sand); margin-bottom: clamp(28px, 4vw, 48px); }
.branchen-reiter button {
  font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; border: 0; background: transparent; color: var(--tinte);
  padding: 12px 20px; border-radius: 9px; transition: background-color 0.2s, box-shadow 0.2s;
}
.branchen-reiter button[aria-selected="true"] { background: var(--weiss); box-shadow: 0 2px 10px -2px rgba(15, 35, 48, 0.18); }
.branche { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: clamp(32px, 6vw, 96px); align-items: center; animation: sanft-rein 0.5s var(--aus) both; }
.branche[hidden] { display: none; }
.branche-text h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); max-width: 22em; }
.branche-text .haken { margin-top: 18px; }
.branche-text .werk-link { margin-top: 22px; }
.branche-handy { justify-self: center; width: min(100%, 300px); }
.branchen-notiz { margin-top: clamp(28px, 4vw, 44px); color: var(--grau); font-size: 0.98rem; }

/* ── Arbeiten ── */
.arbeiten { padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 11vw, 150px); }
.kopf { display: grid; grid-template-columns: auto minmax(0, 30em); justify-content: space-between; align-items: end; gap: 20px 64px; margin-bottom: clamp(44px, 6vw, 80px); }
.kopf p { color: var(--grau); }

.werk-bild {
  display: block; border-radius: var(--ecke); overflow: hidden; background: var(--weiss);
  box-shadow: 0 30px 60px -32px rgba(15, 35, 48, 0.45), 0 0 0 1px rgba(15, 35, 48, 0.07);
  transition: transform 0.5s var(--aus), box-shadow 0.5s var(--aus);
}
.werk-bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.werk:hover .werk-bild { transform: translateY(-6px); box-shadow: 0 44px 80px -32px rgba(15, 35, 48, 0.5), 0 0 0 1px rgba(15, 35, 48, 0.07); }
.werk-text h3 { margin-top: 22px; }
.werk-art { margin-top: 4px; font-size: 0.95rem; color: var(--blau-tief); font-weight: 600; }
.werk-text > p:not(.werk-art) { margin-top: 10px; color: var(--grau); font-size: 1.02rem; max-width: 36em; }
.werk-link { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--tinte); text-decoration: underline; text-decoration-color: var(--blau); text-decoration-thickness: 2px; }

.werk-gross { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-bottom: clamp(56px, 7vw, 104px); }
.werk-gross .werk-text h3 { margin-top: 0; font-size: clamp(2rem, 3vw, 2.6rem); }
.werk-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }

/* ── Entstehung ── */
.entstehung { position: relative; height: 340vh; background: var(--weiss); border-top: 1px solid var(--linie); --kipp: 0; --q: 0; --p: 1; }
.entstehung-kopf { padding-top: clamp(64px, 8vw, 104px); display: grid; grid-template-columns: auto minmax(0, 28em); justify-content: space-between; align-items: end; gap: 16px 64px; }
.entstehung-kopf p { color: var(--grau); }
.buehne {
  position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h));
  display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); gap: clamp(28px, 4vw, 72px);
  align-items: center; padding: 24px var(--rand) 32px; max-width: 1400px; margin: 0 auto;
  pointer-events: none;
}

.browser {
  width: min(100%, calc((100svh - var(--nav-h) - 110px) * 1.6));
  justify-self: center;
  background: var(--weiss); border-radius: var(--ecke); overflow: hidden;
  box-shadow: 0 50px 100px -34px rgba(15, 35, 48, 0.45), 0 18px 36px -18px rgba(15, 35, 48, 0.25), 0 0 0 1px rgba(15, 35, 48, 0.08);
  transform-origin: 50% 0;
  transform: perspective(1800px) rotateX(calc(var(--kipp) * 22deg)) scale(calc(1 - var(--kipp) * 0.06));
  will-change: transform;
}
.browser-leiste { height: 40px; display: flex; align-items: center; justify-content: center; padding: 0 14px; background: var(--sand); border-bottom: 1px solid var(--linie); }
.adresse {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  height: 26px; padding: 0 14px; border-radius: 7px; background: var(--weiss);
  font-size: 0.8rem; color: var(--grau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adresse-live { display: none; align-items: center; gap: 8px; color: var(--tinte); }
.adresse-live i { width: 8px; height: 8px; border-radius: 50%; background: #18a35c; box-shadow: 0 0 0 3px rgba(24, 163, 92, 0.2); }
.entstehung[data-schritt="3"] .adresse-entwurf { display: none; }
.entstehung[data-schritt="3"] .adresse-live { display: inline-flex; }

.browser-flaeche {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background-color: #f9fbfc;
  background-image: linear-gradient(#e5edf1 1px, transparent 1px), linear-gradient(90deg, #e5edf1 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Schritt 1: Notizen */
.notizen {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; gap: 12px;
  padding: 0 14%; transition: opacity 0.4s;
}
.notizen li {
  display: flex; align-items: center; gap: 12px;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px;
  padding: 12px 18px; font-size: clamp(0.85rem, 1.5vw, 1.15rem); font-weight: 550; color: var(--tinte);
  box-shadow: 0 10px 24px -14px rgba(15, 35, 48, 0.35);
  opacity: clamp(0, calc(var(--q) * 5.5 - var(--i)), 1);
  transform: translateY(calc((1 - clamp(0, calc(var(--q) * 5.5 - var(--i)), 1)) * 14px));
}
.notizen li::before { content: ''; width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--blau); flex-shrink: 0; }
.notizen li:nth-child(1) { --i: 0; margin-left: 4%; }
.notizen li:nth-child(2) { --i: 1; margin-left: 18%; }
.notizen li:nth-child(3) { --i: 2; margin-left: 8%; }
.notizen li:nth-child(4) { --i: 3; margin-left: 24%; }
.entstehung:not([data-schritt="0"]) .notizen { opacity: 0; }

/* Schritt 2: Entwurf als Skizze */
.skizze { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s; }
.entstehung:not([data-schritt="0"]) .skizze { opacity: 1; }
.skizze i {
  position: absolute; display: block; border: 2px dashed var(--blau); border-radius: 6px; background: rgba(0, 135, 184, 0.06);
  transform-origin: 0 50%; transform: scaleX(var(--z, 1));
}
.entstehung[data-schritt="1"] .skizze i { --z: clamp(0, calc(var(--q) * 7 - var(--i, 0)), 1); }
.s-nav { left: 0; top: 0; width: 100%; height: 9%; border-radius: 0 !important; border-width: 0 0 2px 0 !important; --i: 0; }
.s-logo { left: 5%; top: 2.6%; width: 15%; height: 4%; --i: 0.5; }
.s-link { top: 3.2%; width: 7%; height: 2.8%; }
.s-l1 { left: 39%; --i: 1; } .s-l2 { left: 48%; --i: 1.2; } .s-l3 { left: 57%; --i: 1.4; }
.s-knopf { left: 86%; top: 2.2%; width: 9%; height: 5%; --i: 1.6; }
.s-bild { left: 0; top: 9%; width: 100%; height: 91%; border-style: dotted !important; background: rgba(0, 135, 184, 0.03) !important; --i: 2; }
.s-titel { left: 5%; height: 8.5%; background: rgba(0, 135, 184, 0.14) !important; }
.s-t1 { top: 42%; width: 54%; --i: 3; } .s-t2 { top: 53%; width: 22%; --i: 3.4; }
.s-text { left: 5%; height: 2.6%; }
.s-x1 { top: 65%; width: 34%; --i: 4; } .s-x2 { top: 69.5%; width: 30%; --i: 4.2; }
.s-cta { top: 80%; height: 6.5%; }
.s-c1 { left: 5%; width: 17%; background: rgba(0, 135, 184, 0.2) !important; --i: 5; } .s-c2 { left: 24%; width: 14%; --i: 5.3; }

/* Schritt 3 und 4: die fertige Seite wischt über die Skizze und scrollt dann */
.fertig { position: absolute; inset: 0; --wisch: 0; --roll: 0; clip-path: inset(0 0 calc((1 - var(--wisch)) * 100%) 0); }
.fertig img { width: 100%; transform: translateY(calc(var(--roll) * -42%)); }
.scan { position: absolute; left: 0; right: 0; height: 2px; top: 0; opacity: 0; background: var(--blau); box-shadow: 0 0 18px 4px rgba(0, 135, 184, 0.55); }
.entstehung[data-schritt="2"] .fertig { --wisch: var(--q); }
.entstehung[data-schritt="2"] .scan { opacity: 1; top: calc(var(--q) * 100%); }
.entstehung[data-schritt="3"] .fertig { --wisch: 1; --roll: var(--q); }

/* Hinweis im Fenster: was gerade zu sehen ist */
.schritt-hinweis {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); z-index: 2;
  max-width: 92%; padding: 9px 16px; border-radius: 99px;
  background: rgba(15, 35, 48, 0.88); color: var(--weiss);
  font-size: clamp(0.78rem, 1.2vw, 0.95rem); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 10px 24px -12px rgba(15, 35, 48, 0.6);
}

/* Schrittliste neben dem Browser: nummeriert und anklickbar */
.schritte { pointer-events: auto; }
.schritte ol { display: grid; gap: 6px; counter-reset: schritt; }
.schritte li { counter-increment: schritt; }
.schritte h3 button {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 12px;
  font: inherit; color: inherit;
}
.schritte h3 button::before {
  content: counter(schritt); flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 0.9rem; font-weight: 650; color: var(--grau); border: 1.5px solid var(--linie); background: var(--weiss);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.schritte h3 button:hover { color: var(--blau-tief); }
.schritte h3 button:focus-visible { outline: 3px solid var(--blau); outline-offset: 4px; border-radius: 6px; }
.entstehung[data-schritt="0"] li:nth-child(1) h3 button::before,
.entstehung[data-schritt="1"] li:nth-child(2) h3 button::before,
.entstehung[data-schritt="2"] li:nth-child(3) h3 button::before,
.entstehung[data-schritt="3"] li:nth-child(4) h3 button::before { background: var(--blau-tief); border-color: var(--blau-tief); color: var(--weiss); }
.schritte li p { padding-left: 42px; }
.scroll-hinweis {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-size: 0.95rem; font-weight: 600; color: var(--blau-tief); transition: opacity 0.4s;
}
.scroll-hinweis i {
  width: 10px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
  animation: hinweis-wippen 1.4s ease-in-out infinite;
}
@keyframes hinweis-wippen { 0%, 100% { translate: 0 -3px; } 50% { translate: 0 3px; } }
.entstehung.weitergescrollt .scroll-hinweis { opacity: 0; }
.schritte li { padding: 14px 0 14px 18px; border-left: 2px solid var(--linie); opacity: 0.45; transition: opacity 0.35s, border-color 0.35s; }
.schritte li:hover { opacity: 0.8; }
.schritte li p { margin-top: 6px; font-size: 1rem; color: var(--grau); }
.entstehung[data-schritt="0"] li:nth-child(1),
.entstehung[data-schritt="1"] li:nth-child(2),
.entstehung[data-schritt="2"] li:nth-child(3),
.entstehung[data-schritt="3"] li:nth-child(4) { opacity: 1; border-left-color: var(--blau); }
.tage { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 0.85rem; font-weight: 600; color: var(--grau); }
.tage-spur { flex: 1; height: 4px; border-radius: 4px; background: var(--linie); overflow: hidden; }
.tage-spur i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--blau); border-radius: 4px; }

/* ── Preise ── */
.preise { background: var(--sand); padding: clamp(80px, 11vw, 150px) 0; }
.preise-raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 88px); align-items: start;
  background: var(--weiss); border-radius: calc(var(--ecke) + 6px); padding: clamp(28px, 5vw, 64px);
  box-shadow: 0 40px 80px -50px rgba(15, 35, 48, 0.35), 0 0 0 1px var(--linie);
}
.preis-betrag { margin-top: clamp(20px, 3vw, 32px); font-family: var(--serif); font-weight: 600; font-size: clamp(4rem, 9vw, 7.5rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--blau-tief); }
.preis-was { margin-top: 16px; font-size: 1.2rem; font-weight: 600; color: var(--tinte); }
.preis-notiz { margin-top: 6px; color: var(--grau); }
.preis-kopf .btn { margin-top: 30px; }
.preis-inhalt { padding-top: 6px; }
.haken { margin-top: 14px; display: grid; }
.haken li { position: relative; padding: 11px 0 11px 34px; border-bottom: 1px solid var(--linie); }
.haken li::before {
  content: ''; position: absolute; left: 6px; top: 0.95em;
  width: 7px; height: 13px; border: solid var(--blau-tief); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.wartung { margin-top: 30px; padding: 22px 24px; border-radius: var(--ecke); background: var(--eis); }
.wartung h3 { font-size: 1.15rem; }
.wartung p { margin-top: 6px; color: var(--text); font-size: 1rem; }
.fussnote { margin-top: 20px; font-size: 0.92rem; color: var(--grau); }

/* ── Häufige Fragen ── */
.fragen { padding: clamp(80px, 11vw, 150px) 0; }
.fragen-raster { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.fragen-raster > div > p { margin-top: 16px; color: var(--grau); max-width: 24em; }
.fragen-liste details { border-bottom: 1px solid var(--linie); }
.fragen-liste details:first-child { border-top: 1px solid var(--linie); }
.fragen-liste summary {
  list-style: none; cursor: pointer; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font-family: var(--serif); font-weight: 600; font-size: 1.25rem; color: var(--tinte);
}
.fragen-liste summary::-webkit-details-marker { display: none; }
/* Plus wird zu Minus: zeigt auf einen Blick, dass sich die Frage aufklappen lässt */
.fragen-liste summary::after {
  content: ''; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--linie); background-color: var(--weiss);
  background-image: linear-gradient(var(--blau-tief), var(--blau-tief)), linear-gradient(var(--blau-tief), var(--blau-tief));
  background-size: 14px 2px, 2px 14px; background-position: center; background-repeat: no-repeat;
  transition: background-size 0.25s var(--aus), border-color 0.2s, background-color 0.2s;
}
.fragen-liste summary:hover::after { border-color: var(--blau); background-color: var(--eis); }
.fragen-liste details[open] summary::after { background-size: 14px 2px, 2px 0; }
.fragen-liste summary:hover { color: var(--blau-tief); }
.fragen-liste details p { padding: 0 40px 24px 0; color: var(--text); max-width: 40em; }

/* ── Kundenstimmen ── */
.stimmen { padding: clamp(80px, 10vw, 140px) 0; }
.stimme blockquote { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.35; color: var(--tinte); max-width: 30em; margin-top: 32px; }
.stimme figcaption { margin-top: 14px; color: var(--grau); }

/* ── Kontakt ── */
.naechste { margin-top: 32px; display: grid; gap: 14px; counter-reset: schritt; max-width: 30em; }
.naechste li { counter-increment: schritt; position: relative; padding-left: 46px; color: #c9d6de; }
.naechste li::before {
  content: counter(schritt); position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.35);
  display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; font-size: 0.95rem; color: var(--weiss);
}
.naechste strong { color: var(--weiss); font-weight: 600; }
.kontakt { background: var(--tinte); color: #d5e1e8; padding: clamp(80px, 11vw, 150px) 0; }
.kontakt h2 { color: var(--weiss); }
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.kontakt-text p { margin-top: 24px; max-width: 30em; font-size: 1.15rem; }
.portrait { width: 160px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--ecke); margin-bottom: 32px; }
.direkt { margin-top: 36px; display: grid; gap: 6px; }
.direkt a { font-family: var(--serif); font-weight: 600; font-size: clamp(1.4rem, 2.5vw, 2rem); color: var(--weiss); text-decoration: none; }
.direkt a:hover { color: var(--blau-hell); }

.kontakt-form { display: grid; gap: 6px; }
.kontakt-form label { font-size: 0.95rem; font-weight: 600; color: var(--weiss); margin-top: 12px; }
.kontakt-form label:first-child { margin-top: 0; }
.kontakt-form input, .kontakt-form textarea {
  width: 100%; font: inherit; font-size: 1.02rem; color: var(--weiss);
  padding: 14px 16px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.06); border: 1.5px solid rgba(255, 255, 255, 0.32);
  transition: border-color 0.2s, background-color 0.2s;
}
.kontakt-form textarea { resize: vertical; min-height: 128px; line-height: 1.5; }
.kontakt-form ::placeholder { color: #93a6b2; opacity: 1; }
.kontakt-form input:focus, .kontakt-form textarea:focus { border-color: var(--blau-hell); background: rgba(255, 255, 255, 0.09); }
.kontakt-form input:user-invalid, .kontakt-form textarea:user-invalid { border-color: #ff8f8f; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feld-paar > div { display: grid; gap: 6px; }
.feld-paar label { margin-top: 0; }
.form-hinweis { margin-top: 14px; font-size: 0.92rem; color: #a9bcc7; }
.btn-submit { margin-top: 20px; width: 100%; background: var(--blau-hell); color: var(--tinte); box-shadow: none; }
.btn-submit:hover { background: #59c0e6; }
.btn-submit:disabled { opacity: 0.6; cursor: default; }
.form-status { margin-top: 10px; padding: 14px 16px; border-radius: 10px; font-size: 1rem; }
.form-status[data-state="ok"] { background: rgba(42, 168, 216, 0.16); color: #bfe6f5; border: 1px solid rgba(42, 168, 216, 0.5); }
.form-status[data-state="warten"] { background: rgba(255, 255, 255, 0.06); color: #c7d5dd; border: 1px solid rgba(255, 255, 255, 0.2); }
.form-status[data-state="fehler"] { background: rgba(255, 143, 143, 0.1); color: #ffc2c2; border: 1px solid rgba(255, 143, 143, 0.5); }
.form-notiz { margin-top: 12px; font-size: 0.92rem; color: #a9bcc7; }
.form-notiz a { color: var(--weiss); }
.honigtopf { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Fuß ── */
footer { background: var(--tinte-tief); color: #a9bcc7; padding: clamp(48px, 6vw, 72px) 0 28px; font-size: 0.98rem; }
.fuss-raster { display: grid; grid-template-columns: 1.3fr 1fr 0.8fr; gap: 32px clamp(32px, 5vw, 80px); }
.fuss-marke p { margin-top: 18px; max-width: 26em; }
.fuss-titel { font-family: var(--sans); font-size: 0.98rem; font-weight: 600; letter-spacing: 0; color: var(--weiss); margin-bottom: 10px; line-height: 1.4; }
footer p + p { margin-top: 10px; }
footer a { color: var(--weiss); }
.fuss-links { display: grid; gap: 6px; }
.fuss-unten { margin-top: clamp(36px, 5vw, 56px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.9rem; }

.mobile-cta { display: none; }

/* ── Schalter: Aktion und Kundenstimmen ── */
body:not(.aktion-beendet) .nur-regulaer { display: none !important; }
body.aktion-beendet .nur-aktion { display: none !important; }
body.keine-referenzen .referenzen-bereich,
body.keine-referenzen .referenzen-nav { display: none !important; }

/* Ohne Bewegung: die Entstehung steht still und zeigt die fertige Seite */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .entstehung { height: auto; }
  .buehne { position: static; height: auto; padding-block: 24px 96px; }
  .browser { transform: none; }
  .schritte li { opacity: 1; }
  .scroll-hinweis, .schritt-hinweis { display: none; }
}

/* ── Mittlere Breiten ── */
@media (max-width: 1100px) {
  .nav-links { gap: 20px; }
  .nav-right { gap: 22px; }
  .werk-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Handy und Tablet ── */
@media (max-width: 880px) {
  :root { --nav-h: 64px; }
  body { font-size: 1.0625rem; padding-bottom: 78px; }
  .logo-img { height: 36px; }
  .nav-toggle { display: block; }
  .nav-cta { display: none; }
  .nav-links {
    position: fixed; inset: 0; z-index: 200;
    display: none; flex-direction: column; justify-content: center; gap: 6px;
    padding: 96px var(--rand) 40px; background: var(--papier);
  }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding: 8px 0; font-family: var(--serif); font-weight: 600; font-size: 2.2rem; line-height: 1.1; }

  .hero { grid-template-columns: 1fr; padding-top: calc(var(--nav-h) + 28px); }
  .hero-geraete { padding: 0 0 33% 14%; }
  .hero-leiste { grid-template-columns: 1fr; margin-top: 0; }
  .hero-leiste div { padding: 16px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .hero-leiste div + div { border-left: 0; border-top: 1px solid var(--linie); }
  .hero-leiste dd { margin: 0; text-align: right; }

  .vorteile-raster, .check-raster { grid-template-columns: 1fr; }
  .vorteile-kopf { position: static; }
  .check-form fieldset { flex-direction: column; align-items: flex-start; }
  .check-form legend { float: none; }
  .kopf, .entstehung-kopf, .werk-gross, .preise-raster, .kontakt-raster, .fragen-raster { grid-template-columns: 1fr; }
  .werk-reihe { grid-template-columns: 1fr; gap: 48px; }

  .entstehung { height: 300vh; }
  .buehne { grid-template-columns: 1fr; align-content: center; gap: 22px; padding-top: 16px; }
  .browser { width: 100%; border-radius: 10px; }
  .browser-leiste { height: 32px; }
  .adresse { font-size: 0.72rem; height: 22px; }
  .notizen { gap: 7px; padding: 0 6%; }
  .notizen li { padding: 7px 11px; border-radius: 7px; }
  .schritte ol { position: relative; min-height: 9.5em; }
  .schritte li p { padding-left: 0; }
  /* Am Handy zeigt die nummerierte Schrittliste den Stand, der Hinweis im Fenster entfällt */
  .schritt-hinweis { display: none; }
  .notizen li { white-space: nowrap; }
  .notizen li:nth-child(1) { margin-left: 0; }
  .notizen li:nth-child(2) { margin-left: 8%; }
  .notizen li:nth-child(3) { margin-left: 3%; }
  .notizen li:nth-child(4) { margin-left: 11%; }
  /* Inhalt über der festen Anruf-Leiste halten */
  .buehne { padding-bottom: 96px; }
  .scroll-hinweis { bottom: 88px; }
  .schritte li { position: absolute; inset: 0 0 auto 0; opacity: 0; border-left: 0; padding: 0; }
  .entstehung[data-schritt="0"] li:nth-child(1),
  .entstehung[data-schritt="1"] li:nth-child(2),
  .entstehung[data-schritt="2"] li:nth-child(3),
  .entstehung[data-schritt="3"] li:nth-child(4) { opacity: 1; }

  .fragen-liste details p { padding-right: 0; }

  .fuss-raster { grid-template-columns: 1fr; }
  .branche { grid-template-columns: 1fr; }
  .branchen-reiter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .branchen-reiter button { padding: 12px 6px; font-size: 0.92rem; }
  .branche-handy { width: min(72%, 260px); }

  .mobile-cta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; inset: auto 0 0 0; z-index: 90;
    padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom));
    background: rgba(251, 250, 247, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--linie);
  }
  .mobile-cta .btn { padding: 0.95em 0.6em; }
  .btn { white-space: normal; text-align: center; line-height: 1.25; }
}

@media (max-width: 880px) and (prefers-reduced-motion: reduce) {
  .schritte ol { min-height: 0; display: grid; gap: 16px; }
  .schritte li { position: static; opacity: 1; }
}

@media (max-width: 520px) {
  .feld-paar { grid-template-columns: 1fr; }
  .hero-aktionen .btn { width: 100%; }
}

/* Lange deutsche Wörter in Überschriften trennen statt überlaufen */
h1, h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }