/* ============================================================
   Next Gen Management — v3 "Die Steigung"
   Design-Brief v3, 09.08.2026. Eine Achse: 3.2deg aufwärts.
   Signatur: Sora/Manrope · Navy #0b1b38 · Cyan #08a4d7
   Easing "ngm-steigung": cubic-bezier(0.34, 0.96, 0.14, 1)
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --navy-deep: #081226;
  --navy: #0b1b38;
  --navy-card: #11284e;
  --navy-glow: #143c77;
  --cyan: #08a4d7;
  --cyan-btn: #3fb2ec;
  --cyan-btn-hover: #54bdf2;
  --cyan-on-dark: #54bdf2;
  --cyan-deep: #0e6da8;
  --ice: #f3f7fb;
  --ice-alt: #e9f0f8;
  --panel: #ffffff;
  --ink: #12253f;
  --ink-2: #44586f;
  --w-hi: #eef4fb;
  --w-body: #d7e2f0;
  --w-dim: #9fb4d0;
  --btn-ink: #06121f;
  --line-light: rgba(18, 37, 63, 0.12);
  --line-dark: rgba(84, 189, 242, 0.16);
  /* Formularrahmen braucht 3:1 gegen den Seitengrund (WCAG 1.4.11), --line-light
     erreicht auf --ice nur 1,26:1 und ist als Bedienelement-Kante unzulaessig. */
  --line-field: rgba(18, 37, 63, 0.55);

  --fs-display: clamp(2.5rem, 5.6vw, 4.4rem);
  --fs-h2: clamp(1.9rem, 3.4vw, 2.7rem);
  --fs-h3: clamp(1.15rem, 1.8vw, 1.4rem);
  --fs-body: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --fs-small: 0.9rem;

  --r-btn: 12px;
  --r-card: 18px;
  --r-img: 14px;

  --ease-rise: cubic-bezier(0.34, 0.96, 0.14, 1);
  --sec-lg: clamp(6rem, 10vw, 9rem);
  --sec-md: clamp(4rem, 7vw, 6rem);
  --cut: 5.6vw;               /* tan(3.2deg) * 100vw — die Steigungsachse */
  --header-h: 78px;
  /* Hoehe der Handy-Schnellleiste. 0px heisst: es gibt keine, und jedes
     calc() damit ergibt rechnerisch genau den Wert von vorher (Regel 68d). */
  --bar-h: 0px;
  --wrap: 72rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--ink);
  background: var(--ice);
  overflow-wrap: break-word;
  /* Regel 148: die fixierte Leiste liegt UEBER der Seite. Ohne diesen Freiraum
     liegt die letzte Fusszeile (Impressum, Datenschutz) dauerhaft darunter. */
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: "Sora", "Manrope", sans-serif;
  line-height: 1.12;
  margin: 0 0 0.6em;
  hyphens: manual;
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
/* D-8: Parent-Scope statt global (SOFORT-KILL 12). Gegengeprueft am 24.09.2026:
   auf allen neun Seiten liegt KEIN <p> ausserhalb von main, footer oder header,
   die Wirkung ist damit unveraendert — nur die Regel greift nicht mehr blind. */
:is(main, footer, header) p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }
/* `<picture>` ist nur ein Auswahlmechanismus, keine Layout-Ebene. Ohne diese Zeile
   stuende es als Inline-Kasten zwischen Panel und Bild und naehme `.hero__panel img`
   (height: 100%) den Bezug (Befund C-1, WebP-Umbau 23.09.2026). */
picture { display: contents; }
figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--cyan-deep); text-decoration: none; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
/* cut-top zieht die Sektion um --cut unter die vorige: der Anker soll an der
   OPTISCHEN Kante landen, nicht an der unsichtbaren Boxkante (Review LOW-06) */
.cut-top[id] { scroll-margin-top: calc(var(--header-h) + 16px - var(--cut)); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

/* Fokus sichtbar, immer (Regel 41) — Doppelring (Tim, 23.09.2026, Befund A-4).
   Cyan allein erreicht auf den hellen Flaechen nur 2,08 bis 2,39:1 und verfehlt damit
   die 3:1, die WCAG 1.4.11 fuer Bedienelement-Umrisse verlangt (auf dunkel sind es
   7,16:1, dort war nie etwas falsch). Statt den Ton mit der Flaeche zu wechseln bleibt
   die Marken-Farbe aussen und ein 1px-Innenring traegt den Kontrast: auf hell
   --ink (14,32:1 gegen --ice), auf dunkel --w-hi (16,86:1 gegen --navy-deep).
   Der Innenring haengt am Token, nicht am Selektor — jede dunkle Flaeche setzt ihn um. */
:root { --fokus-innen: var(--ink); }
:focus-visible {
  outline: 2px solid var(--cyan-btn); outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--fokus-innen);
  border-radius: 4px;
}
.site-header, .hero, .page-head, .szene, .on-dark, .site-footer, .hero-mini, .karte {
  --fokus-innen: var(--w-hi);
}

/* Das Sprungziel traegt tabindex="-1", sonst verschiebt der Skip-Link nur den
   Tab-Startpunkt und der Lesecursor des Screenreaders bleibt oben (Regel 176,
   Befund A-3). Der Fokusring muss dort weg: sonst zeichnet :focus-visible einen
   Rahmen um den GESAMTEN Seiteninhalt (Muster des GOV.UK Design System). */
main#main:focus, main#main:focus-visible { outline: none; box-shadow: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cyan-btn); color: var(--btn-ink);
  padding: 0.7rem 1.2rem; border-radius: 0 0 var(--r-btn) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* Spam-Falle im Kontaktformular: sichtbar fuer Bots, die kein Stylesheet lesen,
   unsichtbar fuer alle anderen. Bewusst NICHT display:none — verbreitete Spam-Skripte
   pruefen genau darauf und lassen solche Felder aus. */
.falle { position: absolute; left: -9999px; top: 0; width: 12rem; }
/* Breite bewusst normal, nicht 1px: check-browser misst jede Textspalte gegen ihr
   laengstes Wort und meldete die Falle sonst als 1-px-Spalte. Versteckt ist sie
   durch die Position, nicht durch die Groesse. */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Feines statisches Korn auf grossen hellen Flaechen (BAUFORM §9) */
.grain { position: relative; }
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.grain > * { position: relative; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: transparent; border: 0; cursor: pointer;
  font: 700 1rem/1 "Manrope", sans-serif;
  border-radius: var(--r-btn);
  padding: 0.95rem 1.5rem; min-height: 44px;
  touch-action: manipulation;
  transition: background-color 180ms var(--ease-rise), color 180ms var(--ease-rise), transform 120ms ease-out;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--cyan-btn); color: var(--btn-ink); }
.btn-primary:hover { background: var(--cyan-btn-hover); }
.btn .btn-arrow { transition: transform 180ms var(--ease-rise); }

/* Leiser Pfeil-Textlink (Sekundaerweg, kein zweiter Kasten) */
.arrow-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 600; color: var(--cyan-deep); min-height: 44px;
  padding-block: 0.4rem;
}
.arrow-link svg { transition: transform 180ms var(--ease-rise); }
.arrow-link:hover { color: var(--ink); }
.on-dark .arrow-link { color: var(--w-hi); }
.on-dark .arrow-link:hover { color: var(--cyan-on-dark); }

/* ---------- Header: island ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(8, 18, 38, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
  transition: top 260ms var(--ease-rise), left 260ms var(--ease-rise),
              right 260ms var(--ease-rise), border-radius 260ms var(--ease-rise),
              background-color 260ms var(--ease-rise), box-shadow 260ms var(--ease-rise);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: var(--header-h); max-width: none;
}
.site-header.is-island {
  top: 10px; left: 12px; right: 12px;
  border-radius: 14px;
  border: 1px solid var(--line-dark);
  background: rgba(8, 18, 38, 0.86);
  box-shadow: 0 14px 40px rgba(4, 10, 24, 0.35);
}
.brand { display: inline-flex; align-items: center; }
.brand-img { width: auto; height: 46px; }

.main-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.main-nav a:not(.btn) {
  color: var(--w-body); font-weight: 600; font-size: 0.98rem;
  /* D-3: 0.5rem ergaben 41 px Zielgroesse — WCAG 2.5.8 (24 px) erfuellt, das
     Haus-Soll von 44 px nicht. 0.6rem bringt 44,2 px. */
  position: relative; padding-block: 0.6rem;
  transition: color 160ms var(--ease-rise), transform 160ms var(--ease-rise);
}
.main-nav a:not(.btn):hover { color: var(--w-hi); }
/* Aktive Seite: die Steigungslinie der Marke unter dem Wort — steigt im 3,2°-Winkel
   der Seite an und wird nach rechts hin hell (Regel 89 erfuellt: button_stil ist fill,
   der Marker damit ein eigenes Primitiv).
   :not(.btn) ist Pflicht (Regel 107): auf kontakt.html traegt der gefuellte CTA selbst
   aria-current. Ohne den Ausschluss schlaegt (0,2,0) die Regel .btn-primary (0,1,0) und
   faerbt den Ink-Text weiss - 2,16:1 auf Cyan - plus ein unsichtbarer Strich im Button. */
.main-nav a:not(.btn)[aria-current="page"] { color: var(--w-hi); }
.main-nav a:not(.btn)[aria-current="page"]::before {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: 0.24rem;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(84, 189, 242, 0) 4%, var(--cyan-on-dark) 82%);
  transform: rotate(-3.2deg); transform-origin: left bottom;
}

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--w-hi);
  padding: 0.6rem; cursor: pointer; border-radius: 8px; touch-action: manipulation;
  min-width: 44px; min-height: 44px;   /* WCAG 2.5.5: 22px Icon + Padding ergaben nur 41px */
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-burger { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---------- Handy-Schnellleiste ---------- */
/* Am Telefon kommt die Mehrzahl der Besucher an, und dort ist der Kopf nach dem
   ersten Wisch weg. Die beiden Wege, die zaehlen, bleiben deshalb unten stehen.
   Sichtbar wird sie in derselben Abfrage, die das Burger-Menue einblendet —
   und in genau dieser Abfrage bekommt --bar-h seinen Wert, damit Hero und
   Seitenfuss den Platz freihalten (Regel 148). */
.mobil-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  align-items: center; gap: 0.7rem;
  padding: 0.55rem clamp(1rem, 4vw, 1.5rem);
  padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
  /* Deckend, nicht transluzent: unter einer 0.9er Flaeche blieb bei Regel 165
     schon einmal ein lesbarer Geist stehen, und hier laeuft ein Screenshot durch. */
  background: var(--navy-deep);
  box-shadow: 0 -14px 34px rgba(4, 10, 24, 0.5);
}
/* Dieselbe steigende, nach rechts hellere Linie wie unter dem aktiven Menuepunkt:
   die Leiste ist damit ein Teil der Seite und kein aufgesetztes Bauteil. */
.mobil-bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, rgba(84, 189, 242, 0) 6%, var(--cyan-on-dark) 88%);
}
.mobil-bar__ruf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0 1.15rem;
  border: 1px solid var(--line-dark); border-radius: var(--r-btn);
  background: rgba(17, 40, 78, 0.75);
  color: var(--w-hi); font-weight: 700; font-size: 0.97rem;
  touch-action: manipulation;
  transition: background-color 180ms var(--ease-rise);
}
.mobil-bar__cta { flex: 1; min-height: 48px; justify-content: center; padding-inline: 1rem; }

/* ---------- Hero: die Werk-Staffel ---------- */
.hero {
  position: relative; display: flex; align-items: center;
  min-height: 100svh;
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 62%, #0d2146 100%);
  color: var(--w-hi);
  overflow: hidden;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: calc(var(--cut) + 3rem);
}
.hero__medium { position: absolute; inset: 0; }
.hero__panel {
  position: absolute;
  border-radius: var(--r-img);
  overflow: hidden;
  border: 1px solid rgba(84, 189, 242, 0.22);
  box-shadow: 0 30px 80px rgba(4, 10, 24, 0.55);
  transform: rotate(-3.2deg);
  background: var(--navy-card);
}
/* Die Staffel traegt dieselbe Browserleiste wie die Mockups auf Projekte und
   Leistungen (`.mock__bar`). Ohne sie las die Aufnahme als eingefuegter Screenshot
   statt als laufende Website — Tims Befund vom 24.09.2026. Das `aspect-ratio` auf
   den Panels ist dafuer entfallen: die Leiste sitzt UEBER dem Bild, in einer festen
   Verhaeltnisbox haette sie das Bild um ihre eigene Hoehe gestaucht. Jetzt gibt das
   Bild die Hoehe vor (`height: auto`), die Leiste kommt oben drauf. */
.hero__panel img { width: 100%; height: auto; display: block; }
.hero__panel .mock__bar { padding: 0.5rem 0.8rem; }
.hero__panel--a { width: 44%; right: 15%; top: 47%; }
.hero__panel--b { width: 38%; right: -6%; top: 16%; }
/* Die Handy-Aufnahme bekommt nur die Punkte, keine Adresszeile — genauso wie
   `.mock--mobil`: ein Telefon zeigt keine URL-Leiste. */
.hero__panel--c { width: 12.5%; right: 40.5%; top: 11%; }
.hero__panel--c .mock__bar { padding: 0.35rem 0.55rem; }
.hero__panel--c .mock__dots i { width: 5px; height: 5px; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--navy-deep) 0%, rgba(8, 18, 38, 0.96) 34%, rgba(8, 18, 38, 0.55) 55%, rgba(8, 18, 38, 0.08) 78%, rgba(8, 18, 38, 0) 100%);
}
.hero__inhalt { position: relative; width: 100%; }
.hero h1 { font-size: clamp(2.35rem, 4.7vw, 3.8rem); max-width: min(54rem, 100%); margin-bottom: 0.5em; }
.hero__sub {
  max-width: 34rem; font-size: 1.14rem; color: var(--w-body); margin-bottom: 2rem;
}
/* Das Versprechen steht auf eigener Zeile: im Fliesstext riss der Satz mitten
   in „Wir" um und der Absatz wurde zu einem Klumpen (Durchsicht Tim 24.09.). */
.hero__sub strong { display: block; margin-top: 0.5em; color: var(--w-hi); font-weight: 700; }
.hero__actions { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.hero__tel {
  margin-top: 2.6rem; font-size: var(--fs-small); color: var(--w-dim);
}
.hero__tel a {
  color: var(--w-body); font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding-block: 0.4rem;
}
.hero__tel a:hover { color: var(--cyan-on-dark); }
.hero .arrow-link { color: var(--w-hi); }
.hero .arrow-link:hover { color: var(--cyan-on-dark); }

/* ---------- Die Steigungskante zwischen Sektionen ---------- */
.cut-top {
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(-1 * var(--cut));
  padding-top: calc(var(--cut) + var(--sec-md));
}
.cut-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  padding-bottom: calc(var(--cut) + var(--sec-md));
}
.cut-top.cut-bottom {
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}

/* ---------- Sektionen ---------- */
.sec { padding-block: var(--sec-lg); }
.sec-md { padding-block: var(--sec-md); }
.sec-ice { background: var(--ice); }
.sec-ice-alt { background: var(--ice-alt); }
.on-dark { color: var(--w-body); }
.on-dark h2, .on-dark h3 { color: var(--w-hi); }

.sec-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head .lead { color: var(--ink-2); font-size: 1.08rem; }
.on-dark .sec-head .lead { color: var(--w-body); }

/* ---------- Index: Was wir machen (2 typografische Zeilen) ---------- */
.was-row {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  padding-block: clamp(2.2rem, 4.5vw, 3.4rem);
  border-top: 1px solid var(--line-light);
}
.was-row:last-of-type { border-bottom: 1px solid var(--line-light); }
.was-row h3 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem); letter-spacing: -0.02em; margin-bottom: 0.4em;
}
.was-row p { color: var(--ink-2); max-width: 32rem; }
.was-row .arrow-link { margin-top: 0.6rem; }
.was-thumb {
  border-radius: var(--r-img); overflow: hidden;
  border: 1px solid var(--line-light);
  box-shadow: 0 18px 44px rgba(18, 37, 63, 0.12);
  transform: rotate(-1.6deg);
}

/* ---------- Aufstiegs-Szene (Signatur, gepinnt) ---------- */
.szene {
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 70%);
  position: relative;
}
.szene__stage { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-block: 3rem; }
.szene__line {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.szene__kopf { margin-bottom: clamp(2rem, 4vw, 3.2rem); max-width: 40rem; }
.szene__kopf h2 { margin-bottom: 0.3em; }
.szene__kopf p { color: var(--w-dim); }
.szene__grid {
  position: relative; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: end; width: 100%;
}
.station { padding-bottom: clamp(0rem, 2vw, 1rem); }
.station:nth-child(2) { transform: translateY(-3.4rem); }
.station:nth-child(3) { transform: translateY(-6.8rem); }
.station h3 { color: var(--w-hi); margin-bottom: 0.35em; }
.station p { color: var(--w-dim); font-size: var(--fs-small); max-width: 21rem; }
.station__art { margin-bottom: 1.1rem; }

/* Station 1: die Karteikarte */
.mini-karte {
  width: min(15.5rem, 100%); aspect-ratio: 8.5 / 5.4;
  border-radius: 12px; position: relative; overflow: hidden;
  background: radial-gradient(120% 130% at 50% 110%, var(--navy-glow) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  border: 1px solid var(--line-dark);
  box-shadow: 0 20px 50px rgba(4, 10, 24, 0.5);
  display: grid; align-content: center; gap: 0.35rem; padding: 1.1rem 1.25rem;
}
.mini-karte svg {
  position: absolute; right: -6px; bottom: -4px; width: 58%; height: auto;
  color: var(--cyan-on-dark); opacity: 0.65;
}
.mini-karte b {
  color: var(--w-hi); font-family: "Sora", sans-serif; font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.01em;
}
.mini-karte span { color: var(--w-dim); font-size: 0.78rem; position: relative; }

/* Station 2: Browser-Rahmen mit echtem Screenshot */
.mock {
  /* display: block noetig — in den proj-cards ist .mock ein <span>, dessen
     Inline-Zeilenkasten den Border sonst als Strich ueber die Ecken zieht */
  display: block;
  border-radius: var(--r-img); overflow: hidden;
  border: 1px solid var(--line-dark);
  background: var(--navy-card);
  box-shadow: 0 24px 60px rgba(4, 10, 24, 0.5);
}
.mock__bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  background: rgba(8, 18, 38, 0.9);
  border-bottom: 1px solid var(--line-dark);
}
.mock__dots { display: inline-flex; gap: 5px; }
.mock__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(159, 180, 208, 0.4); }
.mock__url {
  font-size: 0.78rem; color: var(--w-dim); letter-spacing: 0.02em;
  background: rgba(17, 40, 78, 0.7); border-radius: 6px; padding: 0.18rem 0.7rem;
}
.mock img { width: 100%; height: auto; }
.station .mock { max-width: 21rem; }

/* Station 3: Zahlenzeilen */
.zahlen { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }
.zahlen div { display: flex; align-items: baseline; gap: 0.7rem; }
.zahlen strong {
  font-family: "Sora", sans-serif; font-weight: 700;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem); color: var(--w-hi);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.zahlen span { color: var(--w-body); font-weight: 600; }
.szene__cta { margin-top: 1rem; }

/* ---------- Projekte / Mockup-Staffel ---------- */
.proj-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start;
}
.proj-grid .proj-card:nth-child(2) { margin-top: clamp(2rem, 5vw, 4.5rem); }
/* D-1: Mit einer dritten Referenz traegt das 7fr/5fr-Raster nicht mehr — gemessen
   am 23.09.2026 landete Karte 3 bei 1440 px unter Karte 1 und liess die rechte
   Spalte leer. Die Staffelung dafuer steht jetzt bereit: drei gleich breite
   Spuren, die Treppe entsteht ueber die Abstaende. Wenn Black Pearl live geht,
   bekommt `.proj-grid` zusaetzlich die Klasse `proj-grid--drei` und die dritte
   Karte kommt dazu; sonst aendert sich nichts. */
.proj-grid--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.proj-grid--drei .proj-card:nth-child(2) { margin-top: clamp(1.4rem, 3vw, 2.6rem); }
.proj-grid--drei .proj-card:nth-child(3) { margin-top: clamp(2.8rem, 6vw, 5.2rem); }
.proj-card { display: block; }
a.proj-card .mock { transition: transform 220ms var(--ease-rise), border-color 220ms var(--ease-rise), box-shadow 220ms var(--ease-rise); }
/* Auch auf hellen Flaechen bleibt der Browser-Rahmen dunkel (Tim, 09.08.2026):
   die helle Rahmen-Variante wirkte auf --ice blass und ausgewaschen. */
.sec-ice .mock, .sec-ice-alt .mock {
  border-color: rgba(18, 37, 63, 0.35);
  box-shadow: 0 26px 60px rgba(18, 37, 63, 0.3);
}
.proj-meta { display: grid; gap: 0.15rem; padding-top: 1rem; }
.proj-title {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: "Sora", sans-serif; font-weight: 600; font-size: 1.12rem; color: var(--ink);
}
a.proj-card .proj-title svg { color: var(--cyan-deep); transition: transform 180ms var(--ease-rise); }
.proj-domain { color: var(--ink-2); font-size: var(--fs-small); }
.proj-mehr { margin-top: clamp(2rem, 4vw, 3rem); }

/* Projekt-Detailseite: Desktop + Mobil nebeneinander */
.case {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(1.2rem, 3vw, 2.5rem); align-items: start;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.case:last-of-type { margin-bottom: 0; }
.case__facts { display: grid; gap: 0.9rem; align-content: start; }
.case__facts h3 { margin-bottom: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.case__facts p { color: var(--ink-2); }
.case__shots { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.34fr); gap: 1rem; align-items: end; }
.mock--mobil .mock__bar { padding: 0.4rem 0.7rem; }

/* ---------- Social-Profile ---------- */
.social-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
/* Ohne Monogramm-Kachel: fuenf gleiche Karten mit Icon oben links sind das
   meistkopierte Baukasten-Muster (Anti-Slop C), und der Buchstabe wiederholte nur
   den ersten Buchstaben des Namens darunter. Der Name traegt die Karte. */
.social-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: 1rem;
  background: var(--panel); border: 1px solid var(--line-light);
  border-radius: var(--r-card); padding: 1.15rem 1.3rem;
  transition: transform 220ms var(--ease-rise), border-color 220ms var(--ease-rise), box-shadow 220ms var(--ease-rise);
}
.social-arrow { color: var(--cyan-deep); transition: transform 180ms var(--ease-rise); }
.social-name { display: block; font-weight: 700; color: var(--ink); }
.social-handle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--ink-2); font-size: var(--fs-small);
}

/* ---------- Team ---------- */
.team-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.team-figure {
  /* Abstand Content-Kante -> Viewport-Kante: zentrierter Rest + Wrap-Padding */
  --bleed: calc(max(100vw - var(--wrap), 0px) / 2 + clamp(1.25rem, 4vw, 2.5rem));
  margin-left: calc(-1 * var(--bleed));   /* laeuft randlos an den linken Rand */
}
.team-figure img {
  width: 100%; height: auto;
  border-radius: 0 var(--r-card) var(--r-card) 0;
}
.team-figure figcaption {
  font-size: var(--fs-small); color: var(--ink-2);
  padding: 0.7rem 1rem 0 var(--bleed);
}
.team-list { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.team-list li { border-top: 1px solid var(--line-light); padding-top: 1.1rem; }
.team-name { display: block; font-family: "Sora", sans-serif; font-weight: 600; color: var(--ink); }
.team-role { color: var(--ink-2); font-size: var(--fs-small); }

/* ---------- Kontakt-Band: die Karteikarte ---------- */
.kontakt-band { position: relative; overflow: hidden; }
.kontakt-band .wrap {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.kontakt-band h2 { margin-bottom: 0.4em; }
/* Das Band gibt es hell (Unterseiten-CTA) und dunkel (index). Die helle Variante
   darf niemals --w-body erben: #d7e2f0 auf --ice sind 1,22:1. */
.kontakt-band .lead { color: var(--ink-2); font-size: 1.08rem; max-width: 30rem; }
.kontakt-band.on-dark .lead { color: var(--w-body); }
.kontakt-band .btn { margin-top: 1.6rem; }
.kontakt-band--solo .wrap { display: block; max-width: var(--wrap); }
.kontakt-band--solo .band-inner { max-width: 44rem; margin-inline: auto; text-align: center; }
.kontakt-band--solo .band-inner .lead { margin-inline: auto; }
.band-tick {
  display: block; width: 3.6rem; height: 2px; border-radius: 2px;
  margin: 0 auto 1.4rem;
  background: linear-gradient(90deg, rgba(14, 109, 168, 0), var(--cyan-deep));
  transform: rotate(-3.2deg);
}
.karte {
  position: relative; overflow: hidden;
  border-radius: var(--r-card);
  /* Karteikarten-Proportion, aber NIE als Deckel. Unter ~430px Kartenbreite braucht
     der Inhalt mehr Hoehe als 5.4/8.5 hergibt; zusammen mit overflow:hidden schnitt
     das bei 390px 28px weg (Oberkante von "KONTAKT", Unterkante der letzten Nummer).
     Deshalb faellt das Verhaeltnis unterhalb von 640px weg, siehe Media Query. */
  aspect-ratio: 8.5 / 5.4;
  background: radial-gradient(130% 140% at 50% 115%, var(--navy-glow) 0%, var(--navy) 52%, var(--navy-deep) 100%);
  border: 1px solid var(--line-dark);
  box-shadow: 0 34px 90px rgba(4, 10, 24, 0.55);
  display: grid; align-content: center; gap: 1.1rem;
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
  transform: rotate(-2deg);
}
.karte__arc { position: absolute; right: -10px; bottom: -8px; width: 62%; height: auto; pointer-events: none; color: var(--cyan-on-dark); opacity: 0.75; }
/* Kein Versal-Tracking: die Form ist der Breadcrumb-Zeile vorbehalten (Regel 149) */
.karte__titel {
  font-family: "Sora", sans-serif; font-weight: 700; letter-spacing: 0.01em;
  color: var(--w-hi); font-size: clamp(1.05rem, 2vw, 1.4rem); margin: 0;
}
.karte__zeile {
  position: relative;
  display: flex; align-items: center; gap: 0.75rem;
  color: var(--w-body); font-weight: 600; font-size: clamp(0.92rem, 1.6vw, 1.05rem);
}
.karte__zeile svg { color: var(--cyan-on-dark); flex: none; }
.karte__zeile a { color: var(--w-body); padding-block: 0.35rem; display: inline-flex; align-items: center; }
.karte__zeile a:hover { color: var(--cyan-on-dark); }
.karte hr { border: 0; border-top: 1px solid rgba(84, 189, 242, 0.18); margin: 0; position: relative; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: var(--w-body); padding: var(--sec-md) 0 2rem; }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: clamp(1.6rem, 4vw, 3rem); margin-bottom: 3rem;
}
.footer-brand p { color: var(--w-dim); font-size: var(--fs-small); max-width: 20rem; margin-top: 1rem; }
.footer-h {
  font-family: "Sora", sans-serif; font-size: 0.95rem; font-weight: 600;
  color: var(--w-hi); margin: 0 0 0.9rem;
}
.footer-list { display: grid; gap: 0.15rem; }
.footer-list a {
  color: var(--w-body); display: inline-flex; align-items: center; gap: 0.5rem;
  padding-block: 0.7rem;
}
.footer-list a:hover { color: var(--cyan-on-dark); }
.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: var(--fs-small); color: var(--w-dim);
}
.footer-legal { display: flex; gap: 1.4rem; }
.footer-legal a { color: var(--w-body); padding-block: 0.7rem; display: inline-block; }
.footer-legal a:hover { color: var(--cyan-on-dark); }

/* ---------- Unterseiten-Kopf: dunkles Markenband mit Steigungskante ---------- */
.page-head {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 62%, #0d2146 100%);
  color: var(--w-hi);
  padding: calc(var(--header-h) + clamp(3rem, 7vw, 4.6rem)) 0 calc(var(--cut) + clamp(1.8rem, 3.5vw, 2.8rem));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}
.page-head .wrap { position: relative; }
.page-head__linie {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; color: var(--cyan-on-dark); opacity: 0.4;
}
.crumbs {
  display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center;
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--w-body); margin: 0 0 1.4rem; padding: 0; list-style: none;
}
/* Zielgroesse wie bei den Nav-Links (D-3): 0.3rem ergaben 30 px. WCAG 2.5.8
   (24 px) war erfuellt, das Haus-Soll von 44 px nicht. Beim Tastaturweg am
   24.09.2026 aufgefallen, gleiche Fehlerklasse, deshalb gleich mitgenommen. */
.crumbs a { color: var(--cyan-on-dark); padding-block: 0.72rem; display: inline-block; }
.crumbs a:hover { color: var(--w-hi); }
.crumbs .crumb-sep { color: rgba(159, 180, 208, 0.75); }
.page-head h1 { max-width: 50rem; }
.page-head .lead { color: var(--w-body); font-size: 1.1rem; max-width: 38rem; }
/* Sprungmarken-Chips im Kopf (Leistungen/Projekte) */
.head-chips { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.head-chips a {
  display: inline-flex; align-items: center; gap: 0.55rem;
  /* Pill-Radius laut Design-Brief v3.1 (bewusste Unterscheidung Sprungmarke vs. CTA).
     Kante 0.62 statt 0.34: der Rahmen ist hier das einzige Signal, dass das Ding
     bedienbar ist, und braucht 3:1 (WCAG 1.4.11) — gemessen vorher 2,07:1 gegen die
     eigene Fuellung und 2,24:1 gegen den Kopf, jetzt 3,74:1 / 4,05:1. */
  min-height: 44px; padding: 0.6rem 1.2rem; border-radius: 999px;
  border: 1px solid rgba(84, 189, 242, 0.62); background: rgba(17, 40, 78, 0.55);
  color: var(--w-hi); font-weight: 600; font-size: 0.95rem;
  touch-action: manipulation;
  transition: border-color 160ms var(--ease-rise), background 160ms var(--ease-rise), transform 160ms var(--ease-rise);
}
.head-chips a:hover { border-color: rgba(63, 178, 236, 0.9); background: rgba(17, 40, 78, 0.85); }
.head-chips a:active { transform: scale(0.97); }
.head-chips svg { color: var(--cyan-on-dark); transform: rotate(90deg); flex: none; }

/* ---------- Leistungen ---------- */
/* `.leistung` als Behaelter gibt es seit v3.5 nicht mehr — die beiden Angebote
   sitzen in `.haelfte`. Uebrig bleibt der Haarstrich, der die Ueberschrift anhebt. */
.leistung__hairline {
  display: block; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--cyan-btn), rgba(63, 178, 236, 0));
  transform-origin: left center; border: 0; margin: 0 0 0.9rem;
}
.merkmale { display: grid; gap: 0.65rem; margin: 1.4rem 0 1.8rem; }
.merkmale li { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--ink); }
.merkmale svg { flex: none; color: var(--cyan-deep); margin-top: 0.2rem; }


/* ---------- Ablauf (editorial, keine Kreise): vier Spalten, die Treppe steigt
   nach rechts. Staffelung ueber margin, nicht transform — sonst macht der
   Reveal-Tween sie platt (dieselbe Falle wie Code-Review HIGH-01). ---------- */
.ablauf {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start;
}
/* Dreistufige Variante (ueber-uns): ohne sie stand die Treppe in einem
   Vier-Spalten-Raster mit leerer vierter Spur und erreichte ihre oberste Stufe nie. */
.ablauf--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ablauf-step { border-top: 1px solid var(--line-dark); padding-top: clamp(1.1rem, 2vw, 1.5rem); }
.ablauf-step:nth-child(1) { margin-top: 4.5rem; }
.ablauf-step:nth-child(2) { margin-top: 3rem; }
.ablauf-step:nth-child(3) { margin-top: 1.5rem; }
.ablauf--3 .ablauf-step:nth-child(1) { margin-top: 3rem; }
.ablauf--3 .ablauf-step:nth-child(2) { margin-top: 1.5rem; }
.ablauf--3 .ablauf-step:nth-child(3) { margin-top: 0; }
.ablauf-num {
  display: block; margin-bottom: 0.8rem;
  font-family: "Sora", sans-serif; font-weight: 700;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem); line-height: 1;
  color: var(--cyan-on-dark); font-variant-numeric: tabular-nums;
}
.ablauf-step h3 { color: var(--w-hi); margin-bottom: 0.3em; }
.ablauf-step p { color: var(--w-dim); margin: 0; max-width: 30rem; }

/* ---------- Kontakt-Seite ---------- */
.kontakt-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5rem); align-items: start;
}
/* Die gedrehte Karte ragt mit ihrer unteren Ecke ueber die eigene Layoutbox hinaus
   (gemessen 4px). Ohne Abstand sass diese Ecke auf der ersten Zeile des Hinweises. */
.kontakt-hinweis { color: var(--ink-2); font-size: var(--fs-small); max-width: 26rem; margin-top: 1.6rem; }
.kontakt-grid .karte { transform: rotate(-1.2deg); margin-top: 1rem; }

/* Formular */
.contact-form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.field .opt { font-weight: 400; color: var(--ink-2); }
.field input, .field textarea {
  font: inherit; color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line-field);
  border-radius: var(--r-btn);
  padding: 0.85rem 1rem; width: 100%;
  transition: border-color 160ms var(--ease-rise), box-shadow 160ms var(--ease-rise);
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 9rem; resize: vertical; }
/* Feld-Fokus: der Ring sitzt buendig am Rand, der Innenring deshalb NACH INNEN
   (inset) in die weisse Fuellung — 15,42:1. Aussen bleibt Cyan wie ueberall (A-4). */
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--cyan-btn); outline-offset: 0; border-color: var(--cyan-btn);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.field-error { display: none; color: #a8322a; font-size: var(--fs-small); margin: 0; }
.field.is-invalid input, .field.is-invalid textarea { border-color: #a8322a; }
.field.is-invalid .field-error { display: block; }
.form-note { font-size: var(--fs-small); color: var(--ink-2); max-width: 30rem; }
.form-note a { text-decoration: underline; text-underline-offset: 3px; }
.form-submit { position: relative; justify-self: start; }
.form-submit .spinner {
  display: none; width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid rgba(6, 18, 31, 0.3); border-top-color: var(--btn-ink);
}
.form-submit.is-loading .spinner { display: inline-block; animation: drehen 700ms linear infinite; }
.form-submit.is-loading { pointer-events: none; opacity: 0.85; }
@keyframes drehen { to { transform: rotate(360deg); } }
.form-status { min-height: 1.4em; font-weight: 600; color: var(--cyan-deep); }
/* Fehlermeldung nach einem gescheiterten Versand (kontakt.html?fehler=1).
   Muss NACH .form-status stehen: gleiche Spezifitaet, die spaetere Regel gewinnt. */
.form-status--fehler { color: #a8322a; font-weight: 700; }

/* ---------- Rechtsseiten / Textseiten ---------- */
.legal { max-width: 46rem; padding-bottom: var(--sec-lg); }
.legal h2 { font-size: 1.35rem; margin-top: 2.2em; }
.legal h3 { font-size: 1.05rem; margin-top: 1.6em; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal ul { list-style: disc; padding-left: 1.4rem; display: grid; gap: 0.3rem; }
.platzhalter {
  background: rgba(63, 178, 236, 0.12);
  border: 1px dashed var(--cyan-deep); border-radius: 4px;
  padding: 0 0.3rem;
}

/* ---------- 404 / Danke ---------- */
.hero-mini {
  min-height: 72svh; display: flex; align-items: center;
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 75%);
  color: var(--w-body);
  padding-top: var(--header-h);
}
.hero-mini h1 { color: var(--w-hi); }
.hero-mini .lead { color: var(--w-body); max-width: 32rem; }
.hero-mini .btn { margin-top: 1.4rem; }
.hero-mini a:not(.btn) {
  color: var(--cyan-on-dark);
  text-decoration: underline; text-underline-offset: 3px;
}
.hero-mini a:not(.btn):hover { color: var(--w-hi); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero__panel--a { width: 50%; right: 8%; }
  .hero__panel--b { width: 42%; right: -10%; }
  .hero__panel--c { display: none; }
}

@media (max-width: 1023px) {
  /* Aufstiegs-Szene: ungepinnt, gestapelt (BAUFORM §5) */
  .szene__stage { min-height: 0; display: block; padding-block: 0; }
  .szene__grid { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; align-items: start; }
  .station:nth-child(2), .station:nth-child(3) { transform: none; }
  .szene__line { display: none; }
}

@media (max-width: 900px) {
  .team-grid, .kontakt-band .wrap, .kontakt-grid { grid-template-columns: minmax(0, 1fr); }
  /* Einspaltig steht das Formular ZUERST, die Karteikarte darunter (Tim, 24.09.2026).
     Bis dahin war es umgekehrt, mit der Begruendung, wer anrufen wolle, solle nicht am
     ganzen Formular vorbeiscrollen. Diese Begruendung ist mit der Schnellleiste
     hinfaellig: `Anrufen` steht jetzt auf jedem Bildschirm in Daumenreichweite. Damit
     ist das Formular die Handlung, fuer die man auf dieser Seite ist, und steht oben. */
  .kontakt-grid > div:last-child { margin-top: 2rem; }
  .ablauf, .ablauf--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ablauf-step:nth-child(1), .ablauf-step:nth-child(3) { margin-top: 1.5rem; }
  .ablauf-step:nth-child(2) { margin-top: 0; }
  /* gleiche Spezifitaet wie die Desktop-Regeln oben, sonst gewinnt (0,2,1) hier weiter */
  .ablauf--3 .ablauf-step:nth-child(1), .ablauf--3 .ablauf-step:nth-child(3) { margin-top: 1.5rem; }
  .ablauf--3 .ablauf-step:nth-child(2) { margin-top: 0; }
  .case { grid-template-columns: minmax(0, 1fr); }
  .proj-grid, .proj-grid--drei { grid-template-columns: minmax(0, 1fr); }
  .proj-grid .proj-card:nth-child(2) { margin-top: 0; }
  .proj-grid--drei .proj-card:nth-child(2), .proj-grid--drei .proj-card:nth-child(3) { margin-top: 0; }
  .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-figure { margin-left: 0; }
  .team-figure img { border-radius: var(--r-card); }
  .team-figure figcaption { padding-left: 0; }
  .team-grid .team-figure { order: -1; }
  .karte { max-width: 30rem; }
}

@media (max-width: 860px) {
  /* Ab hier gibt es die Schnellleiste. --bar-h ist der einzige Ort, an dem ihre
     Hoehe steht; Hero und body rechnen damit. 66px = 48px Ziel + 2x 0.55rem. */
  :root { --bar-h: 66px; }
  .mobil-bar { display: flex; }
  /* Die Nummer steht jetzt dauerhaft unten in der Leiste. Zweimal dieselbe
     Rufnummer auf einem Bildschirm ist kein Angebot, sondern Rauschen. */
  .hero__tel { display: none; }
  /* Regel 148: die Leiste liegt UEBER dem bodentiefen Hero, nicht darunter. */
  .hero { padding-bottom: calc(var(--cut) + 1.5rem + var(--bar-h)); }

  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    /* Deckend, nicht 0.97: die 60px-Display-H1 des Heros blieb als lesbarer Geist
       im offenen Menue stehen. Das eigene backdrop-filter war ausserdem wirkungslos,
       weil der Header bereits einen Backdrop-Root aufspannt (Geist hatte harte Kanten). */
    background: var(--navy-deep);
    border-bottom: 1px solid var(--line-dark);
    display: flex; flex-direction: column; align-items: stretch;
    padding: 1rem clamp(1.25rem, 4vw, 2.5rem) 1.4rem; gap: 0.2rem;
    /* Uebergang statt hartem Umschalten (CRITICAL-RULES §4, Review MEDIUM-03):
       display bleibt flex, der Zustand laeuft ueber visibility+opacity+Anstieg —
       visibility verzoegert beim Schliessen, damit die Ausblendung sichtbar ist */
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 240ms var(--ease-rise), transform 240ms var(--ease-rise),
                visibility 0s linear 240ms;
  }
  /* Im Insel-Zustand setzt das Panel die Kartenkante des Headers fort. Ohne die
     Seitenkanten und ohne das Abrunden weiter unten standen zwei Karten mit einer
     Kerbe dazwischen uebereinander. */
  .site-header.is-island .main-nav {
    border-radius: 0 0 14px 14px;
    border-left: 1px solid var(--line-dark);
    border-right: 1px solid var(--line-dark);
  }
  /* Header und Panel sind im offenen Zustand EINE Flaeche: gleicher Ton (das Panel ist
     nach Regel 165 deckend, der Header war 0.86 transluzent) und keine Kante dazwischen. */
  .site-header.is-nav-open {
    background: var(--navy-deep);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom-color: transparent;
  }
  .site-header.is-island.is-nav-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  /* Der Rest der Seite verschwindet, solange das Menue offen ist. Ohne die Flaeche stand
     unter dem 329px hohen Panel der Hero voll lesbar da, inklusive eines ZWEITEN
     identischen Primaer-CTA. Deckend, nicht 0.94: bei rgba(...,0.94) blieb der cyanfarbene
     Button als klar lesbarer Geist stehen — dieselbe Falle wie Regel 165.
     --navy statt --navy-deep, damit das Panel als eigene Flaeche darauf lesbar bleibt. */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: 90;
    background: var(--navy);
    opacity: 0; pointer-events: none;
    transition: opacity 240ms var(--ease-rise);
  }
  html.nav-open body::before { opacity: 1; pointer-events: auto; }
  .main-nav.is-open {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity 240ms var(--ease-rise), transform 240ms var(--ease-rise);
  }
  .main-nav a:not(.btn) { padding-block: 0.85rem; font-size: 1.05rem; }
  /* Im gestreckten Menue wuerde die Steigungslinie sonst ueber die volle Zeile laufen */
  .main-nav a:not(.btn)[aria-current="page"]::before { right: auto; width: 3.4rem; bottom: 0.5rem; }
  .main-nav .btn { margin-top: 0.8rem; justify-content: center; }
}

@media (max-width: 768px) {
  .sec { padding-block: var(--sec-md); }
  /* Einspaltig war der Fuss 830px hoch — fast ein ganzer Handy-Bildschirm, auf
     JEDER der neun Seiten. Navigation und Draht sind kurze Listen und stehen
     nebeneinander; nur der Markenblock bleibt ueber die volle Breite. */
  .footer-grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 1.4rem 1rem; margin-bottom: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
  /* Eine getrennte Adresse ist keine Adresse: die Trennung aus der 700er-Abfrage
     schrieb hier „ngm.business@gmx.-de". Kontaktangaben werden nie getrennt.
     `overflow-wrap: anywhere` statt `break-word`, weil nur `anywhere` die
     Mindestbreite des Flex-Kindes mitverkleinert — mit `break-word` stand die
     Adresse bei 320px mit 190px in einer 160px-Spalte und schob die Seite um
     14px auf. `min-width: 0` an beiden Enden, sonst zieht das Flex-Kind sie
     wieder auf Inhaltsbreite. */
  .footer-list a { hyphens: manual; font-size: 0.97rem; min-width: 0; overflow-wrap: break-word; }
  .footer-list li { min-width: 0; }
}

@media (max-width: 700px) {
  /* Deutsche Komposita duerfen auf schmalen Zeilen trennen (Regel 69i).
     Auf Desktop-Zeilenlaengen ergab das "lo-kale", "Hot-line", "Be-trieb". */
  p, li, figcaption, dd { hyphens: auto; }
  /* Ausgenommen: die Zeile unter der H1. Eine getrennte Silbe an der wichtigsten
     Stelle der Seite liest sich billig, und die Zeile ist kurz genug, dass sie
     auch ungetrennt umbricht. */
  .hero__sub { hyphens: manual; }

  /* Der Kopf ist schmal, die Linie laeuft dadurch quer durch H1 und Lead statt an
     ihnen vorbei. Sie bleibt als Textur, tritt aber hinter die Schrift zurueck. */
  .page-head__linie { opacity: 0.24; }

  /* ---- Hero am Telefon: zwei Zonen statt einer Flaeche ----
     Bis zum 24.09.2026 lag das Panel bei top:56% GENAU HINTER Lead und CTA. Damit
     der Text lesbar blieb, musste der Verlauf dort auf 0,84 bis 0,95 Deckung — das
     Ergebnis war ein schwarzes Feld mit einem Schatten darin. Tim dazu: „man sieht
     die Websites im Hintergrund nicht".
     Jetzt teilt sich der Hero: Schrift oben (align-items:flex-start statt center,
     sonst schwimmt der Block in die Mitte und frisst den Platz von unten), das
     Projekt darunter als eigene Karte, die rechts aus dem Bild laeuft. Der Verlauf
     muss nur noch die obere Haelfte decken und gibt die Karte ganz frei.
     BAUFORM §5: EIN Bild am Telefon, dieselbe 3,2°-Schraege wie ueberall. */
  /* Die Karte bekommt ihr Band UNTEN reserviert, statt es zu hoffen: 88% Breite
     im Verhaeltnis 1440/849 sind 51,9vw hoch, die 3,2°-Drehung legt rund 2vw drauf,
     dazu die Browserleiste mit ihren festen 2,4rem.
     Ohne diese Reserve rutschte sie auf kurzen Geraeten (iPhone SE, 375x667) wieder
     hinter den Text, und der Hero blieb bei 100svh stehen — gemessen, nicht geschaetzt. */
  .hero { align-items: flex-start; padding-bottom: calc(var(--cut) + 1.2rem + var(--bar-h) + 54vw + 2.4rem); }
  .hero__panel--b { display: none; }
  .hero__panel--a {
    width: 88%; right: -12%; left: auto;
    top: auto;
    /* Unterkante knapp ueber der Schnellleiste: die Karte wird nicht angeschnitten,
       sie steht auf ihr auf. */
    bottom: calc(var(--bar-h) + 0.7rem);
    opacity: 1;
  }
  .hero__scrim {
    background: linear-gradient(180deg, rgba(8, 18, 38, 0.97) 0%, rgba(8, 18, 38, 0.93) 46%, rgba(8, 18, 38, 0.72) 58%, rgba(8, 18, 38, 0.2) 66%, rgba(8, 18, 38, 0) 74%);
  }
  .hero h1 { margin-bottom: 0.34em; }
  .hero__sub { font-size: 1.06rem; margin-bottom: 1.3rem; }
  .hero__sub strong { margin-top: 0.4em; }
}

@media (max-width: 620px) {
  .was-row { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  /* Ablauf am Telefon: die Ziffer wandert in die linke Spur, statt eine eigene
     Zeile ueber dem Titel zu belegen. Vier Schritte kosteten so 860px, jetzt 560 —
     dieselbe Information, ein Drittel weniger Weg. */
  .ablauf { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .ablauf-step:nth-child(n) { margin-top: 0; }
  .ablauf--3 .ablauf-step:nth-child(n) { margin-top: 0; }
  .ablauf-step {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.9rem; row-gap: 0.15rem;
  }
  .ablauf-num { grid-row: 1 / span 2; margin-bottom: 0; font-size: 2rem; align-self: start; }
  .was-thumb { max-width: 26rem; }
  /* Vier Profilkarten untereinander sind vier Bildschirmviertel fuer vier Namen. */
  .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
  /* Beweis-Paar: Desktop-Aufnahme und Handy-Aufnahme standen untereinander und
     brauchten zusammen 680px je Projekt. Als ueberlappendes Paar ist es eine
     Komposition statt einer Liste — und 250px kuerzer. */
  .case__shots {
    grid-template-columns: minmax(0, 1fr); gap: 0;
    justify-items: start;
  }
  .case__shots .mock:first-child { width: 92%; }
  .case__shots .mock--mobil {
    max-width: 9.5rem; justify-self: end;
    margin-top: -26%; position: relative; z-index: 2;
  }
  .hero__actions { align-items: stretch; flex-direction: column; gap: 0.9rem; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__actions .arrow-link { justify-content: center; }
  /* Die Karteikarte richtet sich hier nach ihrem Inhalt statt nach dem Verhaeltnis,
     sonst schneidet overflow:hidden Titel und letzte Telefonnummer an. */
  .karte { aspect-ratio: auto; gap: 0.85rem; }
  /* Der Primaer-CTA ist die wichtigste Handlung der Seite und bekommt die ganze
     Breite: ein 44px hoher Kasten am linken Rand ist am Daumen das kleinere Ziel
     (Regel 31). Der leise Pfeil-Link daneben bleibt schmal — die Hierarchie aus
     BAUFORM §8 (ein gefuellter CTA, ein leiser Weg) bleibt damit erhalten. */
  .contact-form .form-submit,
  .szene .btn-primary,
  .kontakt-band .btn-primary { width: 100%; justify-content: center; }
}

/* Kurze Telefone (iPhone SE und aehnlich): dieselbe Komposition, nur schlanker.
   Mit voller Kartenbreite waere der Hero dort 1,6 Bildschirme hoch — die Karte soll
   den Beweis liefern, nicht den Auftakt verdraengen. */
@media (max-width: 700px) and (max-height: 800px) {
  .hero {
    padding-top: calc(var(--header-h) + 0.5rem);
    padding-bottom: calc(var(--cut) + 0.8rem + var(--bar-h) + 40vw + 2.4rem);
  }
  .hero__panel--a { width: 64%; right: -8%; }
  /* Gekuerzt wird der Rhythmus, nicht der Inhalt: derselbe Text, engere Zeilen und
     Abstaende. Gemessen auf 375x667 (iPhone SE): der Textblock endet damit bei 428
     statt 526, und die Karte steht vollstaendig ueber der Leiste statt als Splitter
     am unteren Rand. Wer eine Aussage am Telefon versteckt, hat sie nicht gekuerzt,
     sondern weggelassen. */
  .hero h1 { font-size: 1.95rem; line-height: 1.12; margin-bottom: 0.28em; }
  .hero__sub { font-size: 0.98rem; line-height: 1.5; margin-bottom: 0.9rem; }
  .hero__sub strong { margin-top: 0.3em; }
  .hero__actions { gap: 0.7rem; }
}

/* Sehr kurze Telefone (unter 600px Anzeigehoehe, praktisch iPhone SE der ersten
   Bauart): Dort bleiben nach Kopf und Leiste rund 420px. H1, Unterzeile und die
   beiden Wege fuellen die allein. Eine Karte, von der 6px zu sehen waeren, ist kein
   Beweis, sondern ein Splitter — also gibt es hier keine, und der Hero ist genau
   ein Bildschirm Schrift. BAUFORM §5: je Breakpoint entscheiden, nicht schrumpfen. */
@media (max-width: 700px) and (max-height: 600px) {
  .hero { padding-bottom: calc(var(--cut) + 0.8rem + var(--bar-h)); }
  .hero__panel--a { display: none; }
  .hero__scrim { background: linear-gradient(180deg, rgba(8, 18, 38, 0.97) 0%, rgba(8, 18, 38, 0.9) 100%); }
}

@media (max-width: 380px) {
  :root { --fs-display: clamp(2.1rem, 9vw, 2.5rem); }
}

/* Grid-/Flex-Kinder duerfen schrumpfen (Regel 100-Handwerker).
   `.leistung__media` stand hier bis zum 24.09.2026 mit (Befund A-2). Die Klasse
   kommt in keiner HTML dieses Projekts mehr vor; ihre vier Regeln sind mit dem
   Handy-Umbau entfallen, der Ueberlaufschutz der uebrigen Raster bleibt. */
.was-row > *, .team-grid > *, .kontakt-band .wrap > *, .kontakt-grid > *,
.case > *, .proj-grid > *, .szene__grid > *, .footer-grid > * { min-width: 0; }

/* Der Ueberlauf-Schutz fuer die beiden Leistungs-Sektionen (Befund A-1, 23.09.2026)
   haengt seit v3.5 an `.haelfte` statt an den beiden IDs: die wartende Medienspalte,
   die ihn noetig machte, gibt es nicht mehr, dafuer reicht die dunkle Haelfte mit
   ihrem Lichtstreifen ueber die eigene Box hinaus. Gleiche Wirkung, an der Stelle,
   wo sie jetzt gebraucht wird. */

/* ---------- Hover nur auf echten Pointern (Regel 39) ---------- */
@media (hover: hover) and (pointer: fine) {
  /* Alles, was beim Hover VERSCHIEBT, gehoert hier herein (Regel 39): auf dem Handy
     bleibt so kein Pfeil versetzt und keine Zeile angehoben stehen. Reine
     Farbwechsel duerfen draussen bleiben, sie hinterlassen keinen kaputten Zustand. */
  .btn:hover .btn-arrow { transform: translate(2px, -2px); }
  .arrow-link:hover svg { transform: translate(2px, -2px); }
  .main-nav a:not(.btn):hover { transform: translateY(-1px); }
  .head-chips a:hover { transform: translateY(-2px); }
  .head-chips a:active { transform: translateY(-1px) scale(0.97); }  /* Press schlaegt Hover (Reihenfolge) */
  a.proj-card:hover .mock { transform: translateY(-4px); border-color: rgba(63, 178, 236, 0.65); box-shadow: 0 32px 72px rgba(18, 37, 63, 0.38); }
  a.proj-card:hover .proj-title svg { transform: translate(2px, -2px); }
  a.social-card:hover { transform: translateY(-4px); border-color: rgba(63, 178, 236, 0.65); box-shadow: 0 22px 50px rgba(18, 37, 63, 0.16); }
  a.social-card:hover .social-arrow { transform: translate(2px, -2px); }
}

/* ---------- Reduced Motion: komplett statisch ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0.01ms !important;   /* sonst haengt das visibility-Delay des Menues nach */
  }
}

/* ============================================================================
   v3.5 — die drei Unterseiten bekommen einen eigenen Aufbau (24.09.2026)
   Tims Entscheidung nach der Entwurfsrunde: Projekte B, Leistungen A, Über uns C.
   Jede Seite traegt jetzt einen eigenen Zug aus BAUFORM 11; die Steigungsachse
   bleibt der EINE formale Zug der Marke (BAUFORM 8).
   ============================================================================ */

/* ---------- bewegung: masken-schnitt (projekte.html) ----------
   Beide Zustaende sind Polygone. Zwischen einem Polygon und `clip-path: none`
   kann CSS nicht ueberblenden — gemessen am 23.09.2026: der Schnitt sprang statt
   zu laufen. Der offene Zustand ist deshalb das volle Rechteck, und nach dem
   Uebergang faellt der Clip ganz weg (`schnitt-fertig`), damit er keine Schatten
   der Karten abschneidet.
   Den geschlossenen Zustand setzt NUR das Skript, und nur unter der Falz: was beim
   Laden im Bild steht, wird nie angefasst (Regel 86b, LCP-Schutz aus Befund C-2). */
.schnitt-bereit [data-schnitt] {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: clip-path 1050ms var(--ease-rise);
}
.schnitt-bereit [data-schnitt].ist-zu { clip-path: polygon(0% 100%, 100% 94.4%, 100% 100%, 0% 100%); }
.schnitt-bereit [data-schnitt].schnitt-fertig { clip-path: none; transition: none; }

/* ---------- projekte.html: der Kontaktabzug ----------
   Alle sieben Beweise auf EINER hellen Flaeche, in wechselnder Groesse. Kein
   Hell-Dunkel-Wechsel mehr in der Mitte; der dunkle Anker sitzt am Schluss. */
.abzug {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.4vw, 2.2rem); align-items: start;
}
.abzug > * { min-width: 0; }
.feld { display: grid; gap: 0.9rem; }
.feld--gross { grid-column: span 7; }
.feld--mittel { grid-column: span 5; margin-top: clamp(2.5rem, 6vw, 5.5rem); }
.feld h3 { margin-bottom: 0; font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.feld p { color: var(--ink-2); margin: 0; }
.feld .mock { border-radius: var(--r-img); }
/* Die zwei Sektionen sitzen auf EINER hellen Flaeche: dazwischen kein
   Sektionsabstand, nur eine Haarlinie. Deshalb tragen sie eigene Paddings
   statt .sec-md, und die Trennung macht der Rand der zweiten sec-head. */
.sec-abzug { padding-block: var(--sec-md) 0; background: var(--ice); }
.sec-angehaengt { padding-block: 0 var(--sec-md); background: var(--ice); }
.sec-angehaengt .sec-head {
  border-top: 1px solid var(--line-light);
  padding-top: clamp(2.2rem, 4.5vw, 3.4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.kachel { grid-column: span 7; }
.kachel:nth-of-type(2n) { grid-column: span 5; }
.kachel.social-card { min-height: 6.2rem; align-content: center; }

/* ---------- leistungen.html: zwei Haelften, ein Schnitt ----------
   Die Steigungskante trennt nicht mehr Sektionen, sondern die beiden Angebote.
   Eine Flaeche, gespiegelte Komposition. */
.haelfte {
  --bleed: calc(max(100vw - var(--wrap), 0px) / 2 + clamp(1.25rem, 4vw, 2.5rem));
  position: relative; overflow-x: clip;
}
.haelfte .wrap {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.haelfte .wrap > * { min-width: 0; }
.haelfte--hell { background: var(--ice); padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem); }
.haelfte--hell .media { margin-right: calc(-1 * var(--bleed)); }
.haelfte--dunkel {
  background: linear-gradient(150deg, var(--navy-deep) 0%, var(--navy) 70%);
  color: var(--w-body);
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(-1 * var(--cut));
  padding-block: calc(var(--cut) + clamp(3.5rem, 7vw, 6rem)) clamp(4rem, 8vw, 7rem);
}
.haelfte--dunkel .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.haelfte--dunkel .media { margin-left: calc(-1 * var(--bleed)); order: -1; }
.haelfte p { color: var(--ink-2); max-width: 33rem; }
.haelfte--dunkel p { color: var(--w-body); }
.haelfte--dunkel .merkmale li { color: var(--w-body); }
.haelfte--dunkel .merkmale svg { color: var(--cyan-on-dark); }
.haelfte--hell .media .mock:not(.mock--mobil) { border-radius: var(--r-img) 0 0 var(--r-img); }

/* Statt der gemalten Typo-Karte: die echten Handles, die die Achse hinaufsteigen */
.handles { display: grid; gap: 0; margin: 0; padding: 0 clamp(1.25rem, 4vw, 2.5rem) 0 0; list-style: none; }
.handles li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem;
  border-bottom: 1px solid rgba(84, 189, 242, 0.22);
  padding: 0.85rem 0 0.85rem clamp(1.25rem, 4vw, 2.5rem);
}
.handles li:nth-child(2) { margin-left: 1.6rem; }
.handles li:nth-child(3) { margin-left: 3.2rem; }
.handles li:nth-child(4) { margin-left: 4.8rem; }
.handles li:last-child { border-bottom-color: rgba(84, 189, 242, 0.55); }
.handles__name { font-family: "Sora", sans-serif; font-weight: 600; color: var(--w-hi); font-size: clamp(1rem, 1.8vw, 1.25rem); }
.handles__at { color: var(--cyan-on-dark); font-size: var(--fs-small); }
/* Helle Variante fuer die Startseite (dort steht die Liste auf --ice) */
/* Auf der Startseite steht die Liste in einer schmaleren Spur als auf Leistungen:
   mit der grossen Staffelung brach die letzte Zeile um. Kleinere Stufen. */
.handles--hell { padding-right: 0; }
.handles--hell li:nth-child(2) { margin-left: 1.1rem; }
.handles--hell li:nth-child(3) { margin-left: 2.2rem; }
.handles--hell li:nth-child(4) { margin-left: 3.3rem; }
.handles--hell li { border-bottom-color: var(--line-light); padding-left: 0; }
.handles--hell li:last-child { border-bottom-color: var(--cyan-deep); }
.handles--hell .handles__name { color: var(--ink); }
.handles--hell .handles__at { color: var(--cyan-deep); }

/* bewegung: licht-streifen — EIN Verlauf wandert einmal ueber die dunkle Haelfte,
   im Winkel der Achse. Genau der Zug der Karteikarte: gerichtet, einmalig, schmal. */
.haelfte--dunkel::after {
  content: ""; position: absolute; inset: -30% -45%; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, transparent 43%, rgba(84, 189, 242, 0.15) 50%, transparent 57%);
  transform: translateX(-55%) rotate(-3.2deg); opacity: 0;
}
.haelfte--dunkel > * { position: relative; z-index: 2; }
.streifen-laeuft .haelfte--dunkel::after { animation: ngm-streifen 1900ms var(--ease-rise) forwards; }
@keyframes ngm-streifen {
  0%   { opacity: 0; transform: translateX(-55%) rotate(-3.2deg); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(55%) rotate(-3.2deg); }
}

/* Der Ablauf wandert auf HELL — der dunkle Anker sitzt jetzt in der Seitenmitte */
.ablauf-hell .ablauf-step { border-top-color: var(--line-light); }
.ablauf-hell .ablauf-step h3 { color: var(--ink); }
.ablauf-hell .ablauf-step p { color: var(--ink-2); }
.ablauf-hell .ablauf-num { color: var(--cyan-deep); }

/* ---------- ueber-uns.html: das Foto ganz oben ----------
   Volle Breite, vollstaendig, unbewegt, nichts darauf (Tims vier Punkte vom
   23.09.2026). Der helle Keil zwischen Kopf und Foto entstand, weil der Kopf unten
   diagonal beschnitten ist und darunter der Seitengrund durchscheint. Hier traegt
   das Foto selbst dieselbe Kante: es rutscht um --cut unter den Kopf und ist oben
   links um genau dieselbe Hoehe beschnitten — 5,6vw von 56,25vw Bildhoehe sind
   9,956 %, und zwar bei jeder Breite, weil beide an vw haengen. */
.fotoband-voll {
  position: relative; overflow: hidden; background: var(--navy-deep);
  clip-path: polygon(0 9.956%, 100% 0%, 100% 100%, 0% 100%);
  margin-top: calc(-1 * var(--cut));
}
.fotoband-voll img { width: 100%; height: auto; }
/* bewegung: naht-auffahrt — die harte Kante faehrt einmal in ihren Winkel.
   Reihenfolge, zweimal gemessen am 23.09.2026: Der flache Start wird gesetzt,
   SOLANGE es keinen Uebergang gibt — sonst blendet CSS schon dorthin, die Kante
   erreicht den Start nie und die Bewegung faellt praktisch aus (erster Versuch:
   Amplitude 1,1 statt 9,956 Prozentpunkten). Erst nach einem erzwungenen Umbruch
   kommt der Uebergang dazu, und erst im Bild danach faellt der Start weg. */
.fotoband-voll.ist-flach { clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0% 100%); }
.naht-bereit .fotoband-voll { transition: clip-path 900ms var(--ease-rise); }
/* Der Bildnachweis lief ueber die volle Bandbreite: 1072px und 149 Zeichen auf
   einem quer gehaltenen iPad, auf dem Schreibtisch 1152px. Eine Bildunterschrift
   steht unter dem Bildanfang, nicht ueber das ganze Band. */
.fotoband-voll__nachweis { margin: 0.9rem 0 0; font-size: var(--fs-small); color: var(--ink-2); max-width: 44rem; }
.sec-nach-foto { padding-top: clamp(1.2rem, 2.5vw, 2rem); }

/* Zeilen: zwei Menschen und drei Massstaebe in derselben Form, zwei Groessen.
   Die .ablauf-Komponente faellt auf ueber-uns weg — sie gehoert zum Ablauf auf
   leistungen.html und war die woertlichste Doppelung im Bestand. */
.zeilen { display: grid; }
.zeile {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(0.8rem, 3vw, 2.5rem); align-items: baseline;
  border-top: 1px solid var(--line-light);
  padding-block: clamp(1.5rem, 3.2vw, 2.4rem);
}
.zeile > * { min-width: 0; }
.zeilen .zeile:last-child { border-bottom: 1px solid var(--line-light); }
.zeile__titel { margin: 0; font-family: "Sora", sans-serif; letter-spacing: -0.02em; }
.zeilen--gross .zeile__titel { font-size: clamp(1.45rem, 2.8vw, 2.1rem); font-weight: 700; }
.zeilen--klein .zeile__titel { font-size: clamp(1.1rem, 1.9vw, 1.4rem); font-weight: 600; }
.zeile p { margin: 0; color: var(--ink-2); max-width: 40rem; }
.zeilen--gross .zeile p { font-size: 1.05rem; }

/* ---------- Responsive fuer die drei neuen Aufbauten ---------- */
@media (max-width: 900px) {
  .feld--gross, .feld--mittel { grid-column: 1 / -1; margin-top: 0; }
  .kachel, .kachel:nth-of-type(2n) { grid-column: span 6; }
  .haelfte .wrap, .haelfte--dunkel .wrap { grid-template-columns: minmax(0, 1fr); }
  .haelfte--hell .media { margin-inline: 0; }
  /* einspaltig steht die Ueberschrift vor der Liste, nicht dahinter */
  .haelfte--dunkel .media { margin-inline: 0; order: 1; margin-top: 1.6rem; }
  .haelfte--hell .media .mock:not(.mock--mobil) { border-radius: var(--r-img); }
  .handles { padding-right: 0; }
  .handles li { padding-left: 0; }
  .handles li:nth-child(n) { margin-left: 0; }
}
@media (max-width: 760px) {
  .zeile { grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
}
@media (max-width: 620px) {
  .kachel, .kachel:nth-of-type(2n) { grid-column: 1 / -1; }
}

/* ============================================================
   TABLET — eigenes Band, 701 bis 1023 px (im Hochformat bis 1100)
   BAUFORM §5, zweite Entscheidung. Tim, 24.09.2026.

   Befund vorher: fast jede Umschaltung auf EINE Spur stand bei
   `max-width: 900px`. Damit war jedes Tablet im Hochformat ein breites
   Handy — die Aufstiegs-Szene stand bei 820px als 336px schmale Spalte
   mit 418px Totraum rechts daneben, der Hero war 1180px hoch und die
   easy-sports-Aufnahme lag genau auf der CTA-Zeile. Die Startseite war
   im Hochformat (7085px) LAENGER als auf einem breiteren Geraet (5897px),
   weil alles untereinander stand.

   Das Band ist deshalb keine Zwischengroesse, sondern eine eigene
   Entscheidung: zwei echte Spuren in Tablet-Proportionen, der Rhythmus
   von --sec-md statt --sec-lg, und ein Hero in zwei Zonen wie am Telefon,
   nur mit dem Platz, den 1180px hergeben.

   Die zweite Abfrage faengt das iPad Pro 12.9 im Hochformat (1024px):
   1024px hoch ist ein Tablet, 1024px quer ist ein Schreibtisch. Genau
   diese Unterscheidung kann `orientation` und die Breite allein nicht.
   ============================================================ */
@media (min-width: 701px) and (max-width: 1023px),
       (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) {

  /* ---- Rhythmus: --sec-lg sind auf 820px 96px Luft ueber UND unter jedem
     Block, also fast ein Fuenftel Bildschirm pro Fuge. --sec-md sind 64px. ---- */
  .sec { padding-block: var(--sec-md); }
  .sec-head { max-width: 38rem; margin-bottom: clamp(1.9rem, 4vw, 2.8rem); }

  /* ---- Zwei Spuren statt einer ---- */
  .proj-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(1.2rem, 2.6vw, 1.8rem); }
  .proj-grid .proj-card:nth-child(2) { margin-top: clamp(1.6rem, 4vw, 3rem); }
  .proj-grid--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proj-grid--drei .proj-card:nth-child(2) { margin-top: 1.4rem; }
  .proj-grid--drei .proj-card:nth-child(3) { margin-top: 2.8rem; }

  .team-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(1.4rem, 3.4vw, 2.4rem); }
  /* Das Foto laeuft wie am Schreibtisch randlos an die linke Kante — es ist der
     einzige Beweis auf der Seite, dass es uns zu zweit wirklich gibt. */
  .team-grid .team-figure { margin-left: calc(-1 * var(--bleed)); }
  .team-figure img { border-radius: 0 var(--r-card) var(--r-card) 0; }
  .team-figure figcaption { padding-left: var(--bleed); }

  .kontakt-band .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(1.6rem, 4vw, 2.6rem); }

  /* Auf der Kontaktseite bleibt das Formular die breitere Spur (Tim, 24.09.):
     es ist die Handlung, die Karteikarte ist der Beleg daneben. */
  .kontakt-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.6rem, 3.6vw, 2.6rem); }
  .kontakt-grid > div:last-child { margin-top: 0; }
  /* Die Karteikarten-Proportion faellt, wie schon unter 700px: in einer 5fr-Spur
     ist die Karte 261 bis 419px breit, und 8.5/5.4 schnitten davon zusammen mit
     `overflow: hidden` 32 bis 53px ab — die zweite Rufnummer war weg. Die eigene
     Anmerkung an `.karte` nennt ~430px als Grenze; hier liegt jede Karte darunter. */
  .karte { aspect-ratio: auto; gap: 0.85rem; }

  /* Vier Schritte in vier Spuren sind bei 900px 210px breit — zwei Spuren
     tragen die Ueberschrift ohne Umbruch. */
  .ablauf, .ablauf--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ablauf-step:nth-child(1), .ablauf-step:nth-child(3) { margin-top: 1.5rem; }
  .ablauf-step:nth-child(2) { margin-top: 0; }
  .ablauf--3 .ablauf-step:nth-child(1), .ablauf--3 .ablauf-step:nth-child(3) { margin-top: 1.5rem; }
  .ablauf--3 .ablauf-step:nth-child(2) { margin-top: 0; }

  /* ---- Die Aufstiegs-Szene: ungepinnt wie ab 1023px, aber wieder als
     Treppe nebeneinander. Gestapelt war sie drei linksbuendige Kaertchen
     in einer halbleeren Flaeche — die Signatur der Seite war weg. ---- */
  /* Ungepinnt: die Buehne ist 100svh hoch und schiebt im Hochformat bei 1024px
     die Startseite auf 8967px auf. Die Abfrage bei 1023px erwischt genau dieses
     Geraet nicht, deshalb steht es hier noch einmal. */
  .szene__stage { min-height: 0; display: block; padding-block: 0; }
  .szene__line { display: none; }
  .szene__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 2.2vw, 1.5rem); align-items: end; }
  .station:nth-child(2) { transform: translateY(-2.2rem); }
  .station:nth-child(3) { transform: translateY(-4.4rem); }
  .station p { font-size: 0.86rem; }

  /* ---- leistungen.html: die zwei Haelften bleiben Haelften ---- */
  .haelfte .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(1.4rem, 3.4vw, 2.4rem); }
  .haelfte--dunkel .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .haelfte--hell .media { margin-right: calc(-1 * var(--bleed)); }
  .haelfte--dunkel .media { margin-left: calc(-1 * var(--bleed)); order: -1; margin-top: 0; }
  .haelfte--hell .media .mock:not(.mock--mobil) { border-radius: var(--r-img) 0 0 var(--r-img); }
  /* Nur die Stufen werden kleiner. Die Innenabstaende bleiben: `.media` laeuft
     hier mit -bleed an die linke Kante, und genau diese Strecke holt das
     Listen-Padding wieder herein. Auf 0 gesetzt stand "Black Pearl Lounge"
     bei 820px halb ausserhalb des Bildschirms (gemessen 24.09.2026). */
  .handles li:nth-child(2) { margin-left: 1.1rem; }
  .handles li:nth-child(3) { margin-left: 2.2rem; }
  .handles li:nth-child(4) { margin-left: 3.3rem; }

  /* ---- projekte.html: gross und mittel bleiben nebeneinander ---- */
  .feld--gross { grid-column: span 7; }
  .feld--mittel { grid-column: span 5; margin-top: clamp(1.6rem, 4vw, 3rem); }

  /* ---- ueber-uns.html: Titel und Text bleiben in zwei Spalten ---- */
  .zeile { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(0.8rem, 3vw, 2rem); }
}

/* ------------------------------------------------------------
   TABLET, HERO — nur im HOCHFORMAT, 701 bis 1100 px.
   Die zwei Zonen setzen voraus, dass unter dem Text Hoehe uebrig ist. Im
   Querformat gibt es die nicht: bei 1023x700 waere der Hero 1044px hoch
   geworden und die Staffel haette komplett unter der Falz gestanden. Dort
   bleibt es deshalb bei der Komposition von nebeneinander — breit und flach
   ist genau der Fall, fuer den sie gebaut ist.
   ------------------------------------------------------------ */
@media (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) {
  /* ---- Hero: zwei Zonen. Text oben, die Werk-Staffel unten rechts.
     Dieselbe Trennung wie am Telefon, aber hier ist Platz fuer BEIDE
     Aufnahmen — und damit bleibt die Staffel als Staffel lesbar. ---- */
  .hero {
    /* KEINE feste Bildschirmhoehe im Hochformat. `min-height: 100svh` zwang die
       Komposition, auf einem 1366px hohen iPad 350px Rest mit Luft zu fuellen —
       daher das Loch von 208px zwischen Text und Staffel (Tims Befund 24.09.2026).
       Jetzt bestimmt die Komposition die Hoehe, und vom naechsten Abschnitt steht
       ein Streifen im Bild: das ist der ehrlichere Hinweis zu scrollen als eine
       leere Flaeche.

       Die drei Masse unten stehen in vw, nicht in Prozent, und das ist der Punkt:
       `padding-bottom: 27%` rechnet gegen die BREITE des Elements, `bottom: 27%`
       an einem absolut gesetzten Panel gegen die HOEHE des umgebenden Blocks.
       Beide Male 27 geschrieben, zwei verschiedene Groessen gemeint — Panel b
       stieg dadurch um 78px zu hoch und lag auf "Projekte ansehen". Dieselbe
       Fehlerform wie B-190, nur innerhalb einer Datei. In vw haengen Reserve und
       Panelstand an derselben Zahl und koennen nicht mehr auseinanderlaufen.

       --b-hoch ist die gemessene Hoehe von Panel b (54 % Breite, plus die paar
       Pixel, die die Drehung um 3,2 Grad an den Rahmen setzt). Die 3,5rem sind der
       einzige Abstand zwischen Text und Staffel; 1rem davon ist der Anschlag der
       Panels, es bleiben konstant 2,5rem sichtbare Fuge — auf jedem Geraet. */
    --versatz: 6vw;    /* Stufe der Staffel: um so viel steht b hoeher als a */
    --b-hoch: 37.5vw;  /* gemessene Hoehe von Panel b bei 50 % Breite, mit Drehung */
    min-height: 0;
    padding-top: calc(var(--header-h) + 2.6rem);
    padding-bottom: calc(var(--bar-h) + var(--versatz) + var(--b-hoch) + 3.5rem);
  }
  .hero h1 { font-size: clamp(2.6rem, 5.6vw, 3.5rem); margin-bottom: 0.38em; }
  .hero__sub { max-width: 27rem; font-size: 1.1rem; margin-bottom: 1.5rem; }
  .hero__sub strong { margin-top: 0.45em; }
  .hero__tel { margin-top: 1.6rem; }
  /* Die Staffel spannt von Kante zu Kante und ueberlappt sich in der Mitte.
     Vorher stand sie als freier Kasten in der Flaeche: 161 bis 216px leer links
     daneben, 104 bis 254px Loch darueber — zwei Bloecke mit einem Loch statt
     einer Flaeche (Tims Befund 24.09.2026). BAUFORM §1: das Medium ist die
     FLAECHE, auf der die Zeile liegt, kein Kasten daneben. Jetzt laeuft a links
     und b rechts aus dem Bild (BAUFORM §3), und die beiden ueberschneiden sich. */
  /* Nebeneinander statt uebereinander. Bei 78 % und 54 % Breite schoben sich die
     beiden Aufnahmen 87 bis 116px ineinander und "PERFEKT LACKIERT." lag zur
     Haelfte unter dem Sportgeschaeft (Tims Befund 25.09.2026). Jetzt stehen sie
     mit einer schmalen Fuge nebeneinander, jede tritt an ihrer Seite aus dem Bild
     (BAUFORM §3), und die Stufe ist flach — das macht die Staffel niedriger und
     damit den ganzen Hero kuerzer. */
  .hero__panel--a {
    width: 56%; left: -6%; right: auto; top: auto;
    bottom: calc(var(--bar-h) + 1rem);
  }
  .hero__panel--b {
    width: 50%; right: -6%; left: auto; top: auto;
    bottom: calc(var(--bar-h) + 1rem + var(--versatz));
  }
  /* Die Handy-Aufnahme kommt zurueck. Ohne sie blieb unten rechts eine leere
     Ecke zwischen der Unterkante von b und der rechten Kante von a — genau die
     Sorte Loch, um die es in dieser Runde geht. Sie ist ausserdem das dritte
     Geraet der Staffel: mit ihr steht am Telefon EIN Projekt, auf dem Tablet die
     Staffel zu dritt, am Schreibtisch dieselbe zu dritt breiter gefaechert. */
  /* Die Handy-Aufnahme steht VORN und ueberbrueckt die Fuge zwischen den beiden
     Fenstern: ein Telefon vor einem Bildschirm ist die Ansicht, die es ohnehin
     gibt, und die Staffel bleibt eine Staffel statt zweier Nachbarn. Sie ist
     ausserdem das dritte Geraet — am Telefon steht EIN Projekt, auf dem Tablet
     die Staffel zu dritt, am Schreibtisch dieselben drei breiter gefaechert. */
  .hero__panel--c {
    display: block; z-index: 2;
    width: 17%; left: 44%; right: auto; top: auto;
    bottom: calc(var(--bar-h) + 1rem);
  }
  /* Senkrecht statt diagonal: die Aufnahmen stehen UNTER dem Text, nicht daneben.
     Der Verlauf deckt nur die Textzone; darunter stehen sie frei und offen. */
  .hero__scrim {
    background: linear-gradient(177deg,
      rgba(8, 18, 38, 0.96) 0%, rgba(8, 18, 38, 0.9) 27%,
      rgba(8, 18, 38, 0.5) 40%, rgba(8, 18, 38, 0.1) 52%, rgba(8, 18, 38, 0) 62%);
  }
}

/* Kontaktangaben brechen nie um (visual-qa 25.09.2026): „info@nextgen-“ /
   „management.de“ liest sich wie eine Silbentrennung, wer abtippt, schreibt
   „nextgenmanagement.de“. Ein geschuetzter Bindestrich (U+2011) waere keine
   Loesung: kopiert ergaebe er eine ungueltige Adresse. */
a[href^="mailto:"], a[href^="tel:"], .nobr { white-space: nowrap; }

/* Unter 440px ist die Kontaktspalte neben der Navigation zu schmal fuer die
   Adresse (180px Platz, 197px Adresse): dort bekommt sie die volle Breite. */
@media (max-width: 440px) {
  .footer-grid > :last-child { grid-column: 1 / -1; }
}