/* seitefertig.com — Hauptseite
   Designplan: helle Seite, zwei dunkle Kapitel als Betonung. Jeder Abschnitt
   malt seinen eigenen Grund — die Seite als Ganzes wechselt die Farbe nicht.
   Systemschrift (SF Pro auf Apple-Geräten), Inter selbst gehostet als Ersatz.
   Schrifttreppe: 96 / 72 / 40 / 28 / 21 / 17 / 14. */

/* ---------- Schrift ---------- */
@font-face {
  font-family: "Inter Web";
  src: url(/site-assets/fonts/inter-var.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* Ersatzschrift mit Inter-Maßen, damit beim Nachladen nichts springt */
@font-face {
  font-family: "Inter Ersatz";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  /* Grundfarben */
  --grund: #f5f5f7;          /* die Seite */
  --weiss: #ffffff;          /* hellerer Abschnitt, Karten */
  --tief: #08080a;           /* die beiden dunklen Kapitel */
  --kachel: #161617;         /* Flächen im dunklen Kapitel */
  --tinte: #1d1d1f;
  --tinte-leise: #6e6e73;
  --licht: #f5f5f7;          /* Schrift auf Dunkel */
  --licht-leise: #a1a1a6;
  --blau: #0066cc;           /* nur für Links und Fokus, nie als Zierde */

  /* Altnamen, solange noch Regeln darauf zeigen */
  --schwarz: var(--tief);
  --hell: var(--grund);
  --grau: var(--licht-leise);
  --dunkel-text: var(--tinte);
  --dunkel-grau: var(--tinte-leise);

  /* Voreinstellung = heller Grund. Abschnitte überschreiben das lokal. */
  --bg: var(--grund);
  --fg: var(--tinte);
  --fg2: var(--tinte-leise);
  --flaeche: var(--weiss);
  --linie: rgba(0, 0, 0, .10);

  /* Abstandstreppe: ein Rhythmus für die ganze Seite */
  --luft: clamp(96px, 14vh, 168px);
  --luft-klein: clamp(60px, 9vh, 104px);

  --schrift: -apple-system, BlinkMacSystemFont, "Inter Web", "Inter Ersatz", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --breite: 1180px;
  --rand: clamp(20px, 5vw, 48px);
  --radius: 28px;
  --kopf: 52px;

  /* Fest hell: verhindert, dass iOS und macOS im Dunkelmodus Formularfelder,
     Platzhalter und Auswahlfelder von sich aus umfärben. */
  color-scheme: light;
}
/* ---------- Abschnittstöne ----------
   Jeder Abschnitt setzt seine Farben selbst und malt sich damit.
   Dadurch gibt es harte, saubere Kanten zwischen den Abschnitten
   statt eines Hintergrunds, der mitten im Bild umfärbt. */
.ton { background: var(--bg); color: var(--fg); }
/* Der Grund muss auch die Hülle eines gepinnten Abschnitts tragen. */
.pin-spacer:has(> .ton-grund) { background: var(--grund); }
.pin-spacer:has(> .ton-weiss) { background: var(--weiss); }
.pin-spacer:has(> .ton-tief) { background: var(--tief); }
.ton-grund {
  --bg: var(--grund); --fg: var(--tinte); --fg2: var(--tinte-leise);
  --flaeche: var(--weiss); --linie: rgba(0, 0, 0, .10);
}
.ton-weiss {
  --bg: var(--weiss); --fg: var(--tinte); --fg2: var(--tinte-leise);
  --flaeche: var(--grund); --linie: rgba(0, 0, 0, .08);
}
.ton-tief {
  --bg: var(--tief); --fg: var(--licht); --fg2: var(--licht-leise);
  --flaeche: var(--kachel); --linie: rgba(255, 255, 255, .14);
}

/* Die Kopfzeile folgt dem Abschnitt, unter dem sie gerade liegt —
   sie ist das Einzige, was beim Scrollen die Farbe wechselt. */
:root { --kopf-bg: var(--grund); --kopf-fg: var(--tinte); --kopf-fg2: var(--tinte-leise); }
html[data-page-theme="dunkel"] { --kopf-bg: var(--tief); --kopf-fg: var(--licht); --kopf-fg2: var(--licht-leise); }

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--grund);
  color: var(--tinte);
  font: 400 17px/1.47 var(--schrift);
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Der Rhythmus hängt am Ton, nicht an der Verschachtelung: gepinnte
   Abschnitte werden von ScrollTrigger in einen Zwischen-Container gehüllt
   und wären mit einem Kindselektor sonst außen vor. */
.ton { padding: var(--luft) 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; border-radius: 6px; }
.ton-tief :focus-visible { outline-color: #6fb3f2; }
.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
b, strong { font-weight: 600; color: var(--fg); }

/* Lenis Grund-CSS (offiziell, lenis 1.3.x) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

/* Seitenwechsel zwischen Startseite und Referenzen */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }

/* ---------- Typografie ---------- */
.t-riesig { font-weight: 600; font-size: clamp(44px, 7.4vw, 96px); line-height: 1.03; letter-spacing: -0.038em; }
.t-gross  { font-weight: 600; font-size: clamp(40px, 5.6vw, 72px); line-height: 1.05; letter-spacing: -0.035em; }
.t-mittel { font-weight: 600; font-size: clamp(26px, 3vw, 40px); line-height: 1.12; letter-spacing: -0.03em; }
.t-absatz { font-weight: 600; font-size: clamp(21px, 2.1vw, 28px); line-height: 1.22; letter-spacing: -0.025em; color: var(--fg2); }
.t-klein  { font-size: 14px; line-height: 1.4; letter-spacing: -0.01em; color: var(--fg2); }

/* ---------- Buttons ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 26px; border-radius: 999px;
  font-size: 17px; font-weight: 400; text-decoration: none; white-space: nowrap;
  color: var(--fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 45%, transparent);
  transition: background-color .25s, color .25s, box-shadow .25s;
}
.knopf:hover { box-shadow: inset 0 0 0 1px var(--fg); }
.knopf--voll { background: var(--fg); color: var(--bg); box-shadow: none; }
.knopf--voll:hover { background: color-mix(in srgb, var(--fg) 86%, var(--bg)); box-shadow: none; }
.knopf span { display: inline-block; pointer-events: none; }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--kopf);
  color: var(--kopf-fg);
  background: color-mix(in srgb, var(--kopf-bg) 74%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--kopf-fg) 12%, transparent);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1),
              background-color .45s ease, color .45s ease, border-color .45s ease;
}
.kopf.ist-weg { transform: translateY(-100%); }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.logo { font-weight: 600; font-size: 20px; letter-spacing: -0.03em; text-decoration: none; }
.kopf nav { display: flex; align-items: center; gap: 28px; }
.kopf nav a:not(.pille) { font-size: 12.5px; letter-spacing: -0.005em; color: var(--kopf-fg2); text-decoration: none; transition: color .2s; }
.kopf nav a:not(.pille):hover { color: var(--kopf-fg); }
.pille {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px;
  background: var(--kopf-fg); color: var(--kopf-bg); font-size: 12.5px; font-weight: 500; text-decoration: none;
  transition: background-color .45s ease, color .45s ease;
}
.fortschritt {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: color-mix(in srgb, var(--kopf-fg) 55%, transparent);
  transform-origin: 0 50%; transform: scaleX(0);
}
@media (max-width: 640px) { .kopf nav a.nur-gross { display: none; } }
/* Am Handy traegt die Leiste unten den Handlungsaufruf. Der Knopf in der
   Kopfzeile waere ein zweiter davon und draengt dort ueber den Rand. */
@media (max-width: 759px) { .kopf nav .pille { display: none; } }

/* ---------- Hero ---------- */
.hero { padding-top: calc(var(--kopf) + clamp(56px, 12vh, 120px)); padding-bottom: 0; text-align: center; }
/* Dunkler als sonst im Fließtext: hinter diesen Zeilen liegt die Flut.
   Gemessen im ungünstigsten Fall (alle vier Farbflächen voll übereinander)
   ergibt #434347 noch 5,1:1 auf der Startseite und 4,78:1 im Referenzen-Hero
   (der ist flacher, dort greifen die Flächen tiefer in den Text hinein). Gerechnet mit der echten Geometrie der vier
   Flächen samt Bewegungsspielraum, nicht mit "alle voll übereinander" —
   das war zu pessimistisch und hätte unnötig Farbe gekostet. */
.hero .kick { font-size: clamp(17px, 1.7vw, 21px); font-weight: 600; color: #434347; letter-spacing: -0.01em; margin-bottom: 12px; }
.hero h1 { max-width: 13.5ch; margin: 0 auto; }
.hero .lede { font-size: clamp(19px, 2vw, 24px); line-height: 1.3; font-weight: 500; color: #434347; max-width: 30ch; margin: 22px auto 34px; letter-spacing: -0.02em; }
.hero .knoepfe { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Das Browserfenster: Quelltext wird zur fertigen Seite */
.bau { padding: clamp(56px, 9vh, 96px) var(--rand) 0; }
.bau-buehne { position: relative; max-width: min(1080px, calc((100svh - 150px) * 1.6)); margin: 0 auto; }
.bau-buehne::before {
  content: ""; position: absolute; inset: -16% -12% 18%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 56% at 32% 42%, rgba(224, 176, 116, .30), transparent 68%),
    radial-gradient(44% 58% at 72% 52%, rgba(111, 179, 242, .22), transparent 70%),
    radial-gradient(60% 60% at 50% 60%, rgba(0, 0, 0, .09), transparent 72%);
  filter: blur(6px);
}
.rahmen {
  border-radius: 18px; overflow: hidden; background: #0b0b0c;
  box-shadow: inset 0 0 0 1px #333336, 0 60px 120px -40px rgba(0, 0, 0, .9);
  transform-origin: 50% 0;
}
.leiste { display: flex; align-items: center; justify-content: center; height: 44px; border-bottom: 1px solid #222224; background: #0b0b0c; position: relative; z-index: 3; }
.adresse { font-size: 13px; color: var(--grau); background: #1a1a1c; border-radius: 8px; padding: 5px clamp(18px, 6vw, 64px); letter-spacing: -0.01em; }
.adresse b { color: var(--hell); font-weight: 500; }
.flaeche { position: relative; aspect-ratio: 16 / 10; overflow: hidden; text-align: left; }
.code {
  position: absolute; inset: 0; padding: clamp(18px, 3vw, 36px);
  font: 400 clamp(11px, 1.15vw, 14px)/1.85 var(--mono); letter-spacing: 0; color: #5e5e63;
  white-space: pre; overflow: hidden;
}
.code .z { display: block; }
/* Zurückhaltende Syntaxfarben: zwei Akzente reichen, damit es nach Code
   aussieht und nicht nach Dekoration. */
.code .tag  { color: #6fb3f2; }   /* Elemente */
.code .attr { color: #9b9bae; }   /* Attributnamen */
.code .wert { color: #e0b074; }   /* Werte in Anführungszeichen */
.code .txt  { color: #e8e8ee; }   /* sichtbarer Text der Seite */
.render { position: absolute; inset: 0; overflow: hidden; }
.render-innen { position: absolute; inset: 0; }
.render img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.naht {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px; opacity: 0;
  background: #fff; box-shadow: 0 0 24px 4px rgba(255, 255, 255, .35);
}
.bau-notiz { margin-top: 18px; text-align: center; }
@media (max-width: 759px) {
  .bau-buehne { max-width: min(400px, calc((100svh - 140px) * .557)); }
  .flaeche { aspect-ratio: 390 / 700; }
  .rahmen { border-radius: 26px; }
}

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

.abschnitt-kopf { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(40px, 6vw, 72px); }
.textlink { font-size: 19px; color: #0066cc; text-decoration: none; letter-spacing: -0.02em; white-space: nowrap; }
html[data-page-theme="dunkel"] .textlink { color: #2997ff; }
.textlink:hover { text-decoration: underline; }
.textlink::after { content: " ›"; }

/* Zahlen */
.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.zahl b { display: block; font-weight: 600; font-size: clamp(64px, 9vw, 128px); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.zahl .maske { display: block; overflow: hidden; padding-bottom: .06em; }
.zahl .maske > span { display: inline-block; }
.zahl p { margin-top: 14px; max-width: 19ch; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.3; font-weight: 500; color: var(--fg2); }
@media (max-width: 759px) {
  /* Kurze Angaben mittig: "0 €" linksbündig über voller Breite wirkt verloren.
     Lange Fließtexte bleiben linksbündig, die liest man sonst schlechter. */
  .zahlen { grid-template-columns: 1fr; gap: 44px; text-align: center; }
  .zahl p { margin-inline: auto; }
}

/* Ablauf */
.schritte { list-style: none; padding: 0; display: grid; gap: 18px; }
.schritt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: end; background: var(--flaeche); border-radius: var(--radius); padding: clamp(28px, 4vw, 56px); }
.schritt .nr { font-weight: 600; font-size: clamp(72px, 12vw, 180px); line-height: .82; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; color: var(--fg); }
.schritt h3 { margin-bottom: 10px; }
.schritt p { max-width: 30ch; }
.ablauf-balken { display: none; }
/* gepinnte Fassung (nur Desktop mit Bewegung, per JS) */
.ablauf.ist-gepinnt .schritte { position: relative; height: min(62vh, 560px); display: block; }
.ablauf.ist-gepinnt .schritt { position: absolute; inset: 0; align-items: center; }
.ablauf.ist-gepinnt .ablauf-balken { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.ablauf-balken span { height: 2px; background: color-mix(in srgb, var(--fg) 16%, transparent); border-radius: 2px; overflow: hidden; }
.ablauf-balken i { display: block; height: 100%; background: var(--fg); transform: scaleX(0); transform-origin: 0 50%; }
@media (max-width: 759px) { .schritt { grid-template-columns: 1fr; gap: 20px; } }

/* Was ich baue — heller Abschnitt */
.bauen-lede { max-width: 32ch; }
.leistungen { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: clamp(48px, 6vw, 72px) 0; }
.leistungen li {
  background: var(--flaeche); border-radius: var(--radius); min-height: clamp(150px, 16vw, 220px);
  padding: 28px 32px; display: flex; align-items: flex-end;
  font-weight: 600; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.1; letter-spacing: -0.03em;
}
.bauen-schluss { max-width: 36ch; }
@media (max-width: 759px) { .leistungen { grid-template-columns: 1fr 1fr; gap: 12px; } .leistungen li { padding: 18px; border-radius: 22px; min-height: 120px; font-size: clamp(17px, 4.8vw, 22px); hyphens: auto; -webkit-hyphens: auto; } }

/* Referenzen — ohne JS und bei reduzierter Bewegung ein Raster,
   mit Bewegung am Desktop eine horizontale Strecke (Klasse per JS) */
.spur { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 18px; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.karte { display: block; text-decoration: none; }
.karte-bild { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; background: var(--flaeche); }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.karte-text { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 22px 6px 0; }
.karte h3 { font-weight: 600; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.03em; line-height: 1.15; }
.karte p { color: var(--fg2); font-size: 17px; margin-top: 4px; }
.karte .domain { color: var(--fg2); font-size: 14px; white-space: nowrap; }
.karte--alle .karte-bild { display: flex; align-items: flex-end; padding: clamp(28px, 4vw, 48px); background: var(--flaeche); }
.karte--alle .karte-bild span { font-weight: 600; font-size: clamp(32px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.04em; }
.karte--alle .karte-bild span::after { content: " ›"; color: var(--blau); }

.ist-horizontal .strecke { overflow: hidden; }
.ist-horizontal .spur { display: flex; gap: 18px; max-width: none; }
.ist-horizontal .spur::after { content: ""; flex: none; width: max(1px, calc(var(--rand) - 18px)); }
.ist-horizontal .karte { flex: none; width: min(78vw, 880px, calc((100svh - 360px) * 1.6)); }
.ist-horizontal .karte-bild img { transform: scale(1.12); }

@media (max-width: 759px) {
  .spur { grid-template-columns: 1fr; }
  /* Titel und Domain nebeneinander wird am Handy zu eng: untereinander. */
  .karte-text { display: block; }
  .karte .domain { display: block; margin-top: 10px; }
  .karte--alle .karte-bild { aspect-ratio: auto; min-height: 180px; }
}

/* Wer das macht */
.person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 100px); align-items: center; }
.portrait { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--flaeche); }
.portrait img { width: 100%; height: 118%; object-fit: cover; margin-top: -9%; }
.person-text h2 { margin-bottom: 36px; }
.person-text .t-absatz + .t-absatz { margin-top: 1.1em; }
.person-text .t-absatz:first-of-type { color: var(--fg); }
@media (max-width: 759px) { .person { grid-template-columns: 1fr; } .portrait { max-width: 420px; } }


/* Fuß */
.fuss { background: var(--grund); color: var(--tinte-leise); border-top: 1px solid rgba(0,0,0,.10); padding: 32px 0 44px; }
.fuss .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fuss nav { display: flex; gap: 22px; flex-wrap: wrap; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--tinte); text-decoration: underline; }

/* Kein Rückfall ohne JS mehr nötig: die Töne stehen als Klassen im
   Stylesheet, nicht im Skript. */

/* ---------- Anlauf-Zustand vor JS ----------
   Nur wenn das Inline-Script im <head> läuft und Bewegung erlaubt ist.
   Ein Zeitlimit im Script entfernt die Klasse, falls die Dateien nicht laden. */
.js-bewegung .hero .kick,
.js-bewegung .hero h1,
.js-bewegung .hero .lede,
.js-bewegung .hero .knoepfe,
.js-bewegung .bau-buehne { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  body, .kopf { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* =========================================================
   Referenzseite
   ========================================================= */
.hero--ref { text-align: left; padding-bottom: 0; }
.hero--ref h1 { margin: 0; max-width: 18ch; font-size: clamp(36px, 7.4vw, 96px); }
.hero--ref .lede { margin: 26px 0 0; max-width: 34ch; }
.hero--ref .zahlen { margin-top: clamp(64px, 10vh, 120px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Auch diese Beschriftungen liegen auf der Flut, nicht auf glattem Grund. */
.hero .zahl p { color: #434347; }


.projekt-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.projekt--links .projekt-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.projekt--links .projekt-text { order: 2; }
.projekt h2 { margin-bottom: 20px; }
.projekt .t-absatz { max-width: 26ch; }
.technik { list-style: none; padding: 0; margin: 36px 0 32px; border-top: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
.technik li { padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); font-size: 19px; line-height: 1.35; letter-spacing: -0.02em; }
.links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.ohne-link { font-size: 17px; color: var(--fg2); }

/* Ebenen: Desktop-Bild hinten, Handy-Bild vorne */
.ebenen { position: relative; aspect-ratio: 16 / 12; }
.ebene { position: absolute; will-change: transform; }
.ebene--desktop { left: 0; top: 0; width: 88%; border-radius: 18px; overflow: hidden; background: var(--flaeche);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 12%, transparent), 0 40px 90px -40px rgba(0,0,0,.6); }
.ebene--desktop img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.ebene--handy { right: 0; bottom: 0; width: 27%; border-radius: 26px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 5px #1d1d1f, 0 0 0 6px #3a3a3c, 0 40px 80px -30px rgba(0,0,0,.7); }
.ebene--handy img { width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top center; }

/* Handwerk: drei Handys nebeneinander */
.ebenen--handys { aspect-ratio: 16 / 13; }
.ebenen--handys .ebene--handy { width: 28%; bottom: auto; }
.ebenen--handys .ebene--handy:nth-child(1) { left: 4%; right: auto; top: 10%; }
.ebenen--handys .ebene--handy:nth-child(2) { left: 36%; right: auto; top: 0; }
.ebenen--handys .ebene--handy:nth-child(3) { left: 68%; right: auto; top: 14%; }


.abschluss h2 { max-width: 16ch; }
.abschluss .t-absatz { margin: 28px 0 40px; max-width: 30ch; }

@media (max-width: 899px) {
  .projekt-raster { grid-template-columns: 1fr; }
  .projekt--links .projekt-raster { grid-template-columns: 1fr; }
  .projekt--links .projekt-text { order: 0; }
  .hero--ref .zahlen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 759px) {
  .hero--ref .zahlen { grid-template-columns: 1fr; }
  .ebene--handy { border-radius: 18px; box-shadow: 0 0 0 3px #1d1d1f, 0 0 0 4px #3a3a3c, 0 30px 60px -30px rgba(0,0,0,.7); }
}

/* SplitText-Masken: Platz für Punkt und Überhang am Zeilenende */
[data-split] > div, .hero h1 > div { padding-right: .1em; margin-right: -.1em; }

/* =========================================================
   Fotos (Unsplash, Nachweis in site/BILDNACHWEIS.md)
   ========================================================= */

/* Der Hero traegt kein Foto mehr: die Seite ist hell, und alle Fotos im
   Bestand sind Nacht- und Daemmerungsmotive. Sie stehen jetzt in den
   dunklen Baendern weiter unten. Das Browserfenster traegt den Hero. */
.hero { position: relative; isolation: isolate; }

/* ---------- Flut: fließender Farbgrund ----------
   Angelehnt an das macOS-Hintergrundbild: ein langsam fließendes Band aus
   Blau, Türkis, Sand und blassem Flieder. Genommen sind die MITTELtöne der
   Vorlage (Sättigung 0,19 bis 0,53) — die hellsten Enden trugen zu wenig,
   der satte Kern (#1e4ec7, Sättigung 0,85) wäre zu laut.
   Vier Flächen, jede mit eigener Dauer für Weg, Größe und Drehung. Weil
   die Dauern nicht ineinander aufgehen, wiederholt sich das Bild praktisch
   nie. Bewegt wird ausschließlich Transform. */
.flut {
  position: absolute; inset: -14% -8% 24%; z-index: -1;
  pointer-events: none; overflow: hidden;
}
.flut-flaeche {
  position: absolute; display: block;
  will-change: transform;
}
.flut-flaeche--1 {
  width: 76%; height: 104%; left: -10%; top: -22%;
  background: radial-gradient(ellipse closest-side at 50% 50%, rgba(216, 201, 176, .46), rgba(216, 201, 176, 0));
}
.flut-flaeche--2 {
  width: 72%; height: 96%; right: -12%; top: -10%;
  background: radial-gradient(ellipse closest-side at 50% 50%, rgba(94, 149, 198, .40), rgba(94, 149, 198, 0));
}
.flut-flaeche--3 {
  width: 64%; height: 82%; left: 16%; top: 18%;
  background: radial-gradient(ellipse closest-side at 50% 50%, rgba(106, 168, 180, .34), rgba(106, 168, 180, 0));
}
.flut-flaeche--4 {
  width: 58%; height: 74%; right: 10%; top: 26%;
  background: radial-gradient(ellipse closest-side at 50% 50%, rgba(150, 154, 194, .28), rgba(150, 154, 194, 0));
}

/* Leise Fassung: der Grund soll nur mitschwingen, nicht auffallen. */
.flut--leise { inset: 0; }
.flut--leise .flut-flaeche--1 { background: radial-gradient(ellipse closest-side at 50% 50%, rgba(216, 201, 176, .24), rgba(216, 201, 176, 0)); }
.flut--leise .flut-flaeche--2 { background: radial-gradient(ellipse closest-side at 50% 50%, rgba(94, 149, 198, .21), rgba(94, 149, 198, 0)); }
.flut--leise .flut-flaeche--3 { background: radial-gradient(ellipse closest-side at 50% 50%, rgba(106, 168, 180, .18), rgba(106, 168, 180, 0)); }
.flut--leise .flut-flaeche--4 { background: radial-gradient(ellipse closest-side at 50% 50%, rgba(150, 154, 194, .14), rgba(150, 154, 194, 0)); }

@media (max-width: 759px) {
  /* Am Handy flacher: die Flut säße sonst hinter dem Browserfenster. */
  .flut { inset: -10% -14% 40%; }
  .flut--leise { inset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .flut-flaeche { will-change: auto; }
}


/* Foto-Kachel im hellen Abschnitt */
.foto-kachel { margin-top: clamp(48px, 6vw, 72px); border-radius: var(--radius); overflow: hidden; aspect-ratio: 21 / 9; background: var(--flaeche); position: relative; }
.foto-kachel img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; object-position: 50% 62%; }
@media (max-width: 759px) { .foto-kachel { aspect-ratio: 4 / 3; border-radius: 22px; } }


/* Referenzen: Handwerk mit Werkstatt-Foto als hinterste Ebene */
.ebenen--handys .ebene--foto { left: 0; top: 0; width: 100%; height: 72%; border-radius: var(--radius); overflow: hidden; }
.ebenen--handys .ebene--foto img { width: 100%; height: 100%; object-fit: cover; }
.ebenen--handys .ebene--handy { z-index: 1; }


.hero--ref { padding-bottom: clamp(80px, 12vh, 140px); }

/* =========================================================
   Foto-Bänder: Bild im Hintergrund, Schrift darüber
   Das Portrait im Abschnitt "Wer das macht" bleibt davon
   ausgenommen — das steht weiter neben dem Text.
   ========================================================= */
.foto-abschnitt {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(150px, 24vh, 260px) 0;
}
/* Ein dunkles Kapitel aus zwei Abschnitten: das Foto trägt die Überschrift,
   darunter folgen die Schritte auf demselben Grund, ohne Fuge dazwischen. */
.kapitel-kopf { padding-bottom: var(--luft-klein); }
.kapitel-rumpf { padding-top: var(--luft-klein); }
.foto-grund { position: absolute; inset: -8% 0; z-index: -1; }
.foto-grund img { width: 100%; height: 100%; object-fit: cover; }
/* Abdunkeln, damit heller Text sicher lesbar bleibt. Oben und unten
   kräftiger, damit das Band in die angrenzenden Abschnitte übergeht. */
.foto-grund::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.78) 0%, rgba(0,0,0,.52) 32%, rgba(0,0,0,.52) 68%, rgba(0,0,0,.80) 100%),
    linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,.15) 65%);
}
.foto-abschnitt h2,
.foto-abschnitt .t-absatz b { color: #f5f5f7; }
/* Volle Deckkraft: gemessen reicht 0,92 auf dem hellsten Band nicht (4,20:1).
   Die Hierarchie trägt hier die Schriftgröße, nicht die Farbe. */
.foto-abschnitt .t-absatz { color: var(--licht); }
.foto-abschnitt h2 { max-width: 17ch; }
.foto-abschnitt .t-absatz { margin-top: 24px; max-width: 34ch; }

/* Kompaktes Band: sitzt direkt über dem Formular */
.foto-abschnitt--knapp { padding: var(--luft) 0; }

@media (max-width: 759px) {
  .foto-grund::after {
    background:
      linear-gradient(to bottom, rgba(0,0,0,.80) 0%, rgba(0,0,0,.58) 30%, rgba(0,0,0,.58) 70%, rgba(0,0,0,.82) 100%);
  }
}

/* =========================================================
   Demo-Formular — der primäre Handlungsaufruf der Seite
   ========================================================= */

/* Bezugsrahmen für die leise Flut im Hintergrund. */
.demo { position: relative; isolation: isolate; }
.demo-kopf h2 { max-width: 18ch; margin-bottom: 26px; }
/* Beschriftung direkt über dem Formular: das Band darüber macht das
   Versprechen, diese Zeile benennt die Handlung. */
.formular-titel {
  margin-bottom: 26px; padding-bottom: 18px;
  border-bottom: 1px solid var(--linie);
}
/* Auf der Referenzseite steht darüber noch der Einleitungsblock. */
.demo-kopf + .formular-titel { margin-top: clamp(44px, 6vw, 64px); }
/* Der Abstand liegt jetzt an der Überschrift, nicht mehr am Formular. */
.formular-titel + .demo-form { margin-top: 0; }
.demo-kopf .t-absatz { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.32; }

.demo-form {
  margin-top: clamp(44px, 6vw, 64px);
  background: var(--weiss); border-radius: var(--radius);
  padding: clamp(26px, 4vw, 52px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 30px 70px -45px rgba(0, 0, 0, .35);
}
.feld-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.feld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.feld--breit { grid-column: 1 / -1; }
.feld label { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--dunkel-text); }
.feld label .opt { font-weight: 400; color: var(--dunkel-grau); }

/* Felder ausdrücklich hell, damit iOS und macOS im Dunkelmodus nichts umfärben */
.feld input,
.feld textarea {
  width: 100%; font: 400 17px/1.4 var(--schrift); letter-spacing: -0.015em;
  color: #1d1d1f; background: #fbfbfd;
  border: 1px solid #d2d2d7; border-radius: 12px;
  padding: 13px 15px; appearance: none; -webkit-appearance: none;
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}
.feld textarea { min-height: 132px; resize: vertical; }
/* 5,07:1 auf Weiss. #a1a1a6 waere mit 2,36:1 nicht lesbar genug. */
.feld input::placeholder,
.feld textarea::placeholder { color: #6e6e73; opacity: 1; }
.feld input:hover, .feld textarea:hover { border-color: #b8b8bf; }
.feld input:focus, .feld textarea:focus {
  outline: none; background: #fff; border-color: #0066cc;
  box-shadow: 0 0 0 4px rgba(0, 102, 204, .14);
}
/* Autofill: WebKit färbt sonst im Dunkelmodus selbst ein */
.feld input:-webkit-autofill,
.feld input:-webkit-autofill:hover,
.feld input:-webkit-autofill:focus,
.feld textarea:-webkit-autofill {
  -webkit-text-fill-color: #1d1d1f;
  -webkit-box-shadow: 0 0 0 1000px #fbfbfd inset;
  box-shadow: 0 0 0 1000px #fbfbfd inset;
  caret-color: #1d1d1f;
}

/* Fehler stehen am Feld, nicht gesammelt oben */
.feld-fehler { font-size: 13.5px; line-height: 1.35; color: #c4271a; min-height: 0; }
.feld.ist-fehler input,
.feld.ist-fehler textarea { border-color: #c4271a; background: #fffafa; }
.feld.ist-fehler input:focus,
.feld.ist-fehler textarea:focus { box-shadow: 0 0 0 4px rgba(196, 39, 26, .13); }

/* Zusatzfelder, wenn es keine bestehende Website gibt.
   Ohne JavaScript immer sichtbar; mit JavaScript blendet formular.js sie
   erst ein, wenn das Website-Feld leer bleibt. */
.ohne-website {
  grid-column: 1 / -1;
  display: grid; gap: 18px;
  border-left: 3px solid #d2d2d7;
  padding: 2px 0 2px 20px;
}
.ohne-website[hidden] { display: none; }
.ohne-website-notiz { font-size: 14.5px; line-height: 1.45; color: var(--dunkel-grau); max-width: 54ch; }
.ohne-website-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }

.feld-hinweis { font-size: 13.5px; line-height: 1.45; color: var(--dunkel-grau); margin-top: -2px; }
.feld-hinweis[hidden] { display: none; }

/* Honigtopf: für Menschen unsichtbar, kein display:none (manche Bots prüfen das) */
.honigtopf {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.demo-fuss { margin-top: 30px; display: flex; align-items: center; gap: 20px 26px; flex-wrap: wrap; }
.demo-fuss .hinweis { font-size: 13.5px; line-height: 1.45; color: var(--dunkel-grau); max-width: 42ch; }
.demo-fuss .hinweis a { color: #0066cc; }
.demo-form button[type="submit"] { border: 0; cursor: pointer; font-family: var(--schrift); }
.demo-form button[type="submit"]:disabled { opacity: .55; cursor: progress; }

/* Bestätigung an Ort und Stelle, kein Seitenwechsel */
.demo-danke { display: none; }
.demo-form.ist-gesendet .feld-raster,
.demo-form.ist-gesendet .demo-fuss { display: none; }
.demo-form.ist-gesendet .demo-danke { display: block; }
.demo-danke h3 { font-weight: 600; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.03em; line-height: 1.14; margin-bottom: 14px; }
.demo-danke p { font-size: 17px; line-height: 1.5; color: var(--dunkel-grau); max-width: 46ch; }
.sende-fehler { margin-top: 18px; font-size: 14.5px; line-height: 1.45; color: #c4271a; }
.sende-fehler:empty { margin-top: 0; }

@media (max-width: 759px) {
  .feld-raster { grid-template-columns: 1fr; gap: 18px; }
  .ohne-website-felder { grid-template-columns: 1fr; gap: 18px; }
  .ohne-website { padding-left: 14px; }
  .demo-form { border-radius: 22px; }
  .demo-fuss { gap: 18px; }
  .demo-fuss .knopf { width: 100%; }
}

/* =========================================================
   Zusage: wie schnell, und was nach dem Start passiert
   ========================================================= */

.versprechen h2 { max-width: 18ch; margin-bottom: clamp(36px, 5vw, 56px); }
.versprechen-liste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.versprechen-karte {
  background: var(--flaeche); border-radius: var(--radius); padding: clamp(24px, 2.6vw, 34px);
  box-shadow: 0 0 0 1px var(--linie);
  display: flex; flex-direction: column; gap: 10px;
}
.versprechen-karte b {
  font-weight: 600; font-size: clamp(26px, 2.8vw, 38px); line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.versprechen-karte span { font-size: 15.5px; line-height: 1.38; color: var(--fg2); }
.versprechen-notiz { margin-top: 26px; font-size: 14.5px; line-height: 1.5; color: var(--fg2); max-width: 62ch; }
@media (max-width: 640px) { .versprechen-liste { grid-template-columns: 1fr; gap: 12px; } .versprechen-karte { border-radius: 20px; padding: 20px; } }

/* =========================================================
   Mobile Leiste: immer sichtbar, führt immer zum Formular
   ========================================================= */
.leiste-unten { display: none; }
@media (max-width: 759px) {
  .leiste-unten {
    display: block; position: fixed; inset: auto 0 0; z-index: 60;
    padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--hell) 86%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid rgba(0, 0, 0, .1);
  }
  .leiste-unten .knopf {
    display: flex; width: 100%; height: 48px;
    background: #1d1d1f; color: #f5f5f7; box-shadow: none;
  }
  /* Platz, damit der Fuß nicht unter der Leiste verschwindet */
  .fuss { padding-bottom: calc(40px + 68px + env(safe-area-inset-bottom)); }
  /* Am Formular selbst ist die Leiste überflüssig */
  .leiste-unten.ist-weg { transform: translateY(110%); opacity: 0; pointer-events: none; }
  .leiste-unten { transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .35s; }
}
@media (prefers-reduced-motion: reduce) { .leiste-unten { transition: none; } }

/* =========================================================
   Handy: Tippflächen
   Fuß- und Kopfzeilen-Links waren nur 16–20 px hoch. Mit Polsterung
   kommen sie auf 44 px, ohne dass sich das Schriftbild ändert.
   ========================================================= */
@media (max-width: 759px) {
  /* .nur-gross ausdruecklich ausgenommen: diese Regel haette sonst das
     display:none aus der 640px-Abfrage ueberschrieben (hoehere Spezifitaet)
     und "Ablauf" und "Ueber mich" waeren am Handy wieder aufgetaucht. */
  .fuss nav a,
  .kopf nav a:not(.pille):not(.nur-gross),
  .kopf .logo,
  .textlink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .fuss nav { gap: 4px 22px; }
  .fuss .wrap { gap: 8px 16px; }
  /* Der Fuß steht sonst zu eng unter der Leiste */
  .fuss { padding-top: 20px; }
}