/* =========================================================
   Leuchtturm – Unterseiten
   Baut auf style.css auf (Tokens, Maßsystem --u, Menü, Footer, Motive).
   Jede Seite setzt ihre Farbwelt über --seite-bg / --seite-fg / --seite-akzent.
   ========================================================= */

.seite { --seite-bg: hsl(var(--nacht)); --seite-fg: hsl(var(--weiss)); --seite-akzent: var(--color-akzent); }
.seite--ablauf   { --seite-bg: hsl(var(--nacht));    --seite-fg: hsl(var(--weiss)); --seite-akzent: hsl(var(--signal)); }
.seite--projekte { --seite-bg: hsl(var(--koralle));  --seite-fg: hsl(var(--nacht)); --seite-akzent: hsl(var(--nacht)); }
.seite--kunden   { --seite-bg: hsl(var(--signal));   --seite-fg: hsl(var(--nacht)); --seite-akzent: hsl(var(--weiss)); }
.seite--crew     { --seite-bg: hsl(var(--signal-tief)); --seite-fg: hsl(var(--weiss)); --seite-akzent: hsl(var(--koralle)); }
.seite--stimmen  { --seite-bg: hsl(var(--weiss));    --seite-fg: hsl(var(--nacht)); --seite-akzent: hsl(var(--signal-tief)); }
.seite--kontakt  { --seite-bg: hsl(var(--nacht));    --seite-fg: hsl(var(--weiss)); --seite-akzent: hsl(var(--koralle)); }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: absolute; z-index: 5; left: 0; right: 0; top: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(var(--navi-platz) + 20px) max(var(--rand), 5vw) 0;
  color: var(--seite-fg);
}
.pfad ol { display: flex; gap: .5em; margin: 0; padding: 0; list-style: none; font-weight: 700; font-size: max(13px, calc(18 * var(--u))); }
.pfad li + li::before { content: "/"; margin-right: .5em; opacity: .5; }
.pfad a { text-decoration: none; border-radius: 999px; }
@media (hover: hover) { .pfad a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.seite :focus-visible:not(.navi *, .navi-blatt *) { outline-color: currentColor; }

/* ---------- Auftakt (Seitenkopf) ---------- */
.auftakt {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(calc(900 * var(--u)), 92svh);
  display: grid; align-content: end;
  padding: max(calc(220 * var(--u)), calc(var(--navi-platz) + 96px)) calc(60 * var(--u)) calc(90 * var(--u));
  background: var(--seite-bg); color: var(--seite-fg);
}
.auftakt-zeile {
  display: inline-flex; align-items: center; gap: .6em; margin: 0 0 calc(24 * var(--u));
  font-weight: 700; font-size: max(13px, calc(20 * var(--u))); letter-spacing: .04em; text-transform: uppercase;
}
.auftakt-zeile::before { content: ""; width: 2.4em; height: 3px; border-radius: 2px; background: var(--seite-akzent); }
.auftakt h1 {
  max-width: 14ch; margin: 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: calc(176 * var(--u)); line-height: .9;
  letter-spacing: -0.045em; text-transform: uppercase;
  text-wrap: balance;
}
.auftakt h1 em { font-style: normal; color: var(--seite-akzent); }
.auftakt-lead {
  max-width: 36em; margin: calc(40 * var(--u)) 0 0;
  font-size: max(17px, calc(30 * var(--u))); line-height: 1.38; letter-spacing: -0.01em;
  text-wrap: pretty;
}
.auftakt-deko { position: absolute; z-index: -1; pointer-events: none; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: calc(150 * var(--u)) var(--rand); }
.abschnitt--dunkel { background: hsl(var(--nacht)); color: hsl(var(--weiss)); }
.abschnitt--hell { background: hsl(var(--weiss)); }
.abschnitt-kopf { width: var(--satz); margin: 0 auto calc(90 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(40 * var(--u)) calc(120 * var(--u)); align-items: end; }
.abschnitt-kopf h2 {
  margin: 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: calc(96 * var(--u)); line-height: .95;
  letter-spacing: -0.035em; text-transform: uppercase;
  text-wrap: balance;
}
.abschnitt-kopf p { margin: 0; font-size: max(16px, calc(26 * var(--u))); line-height: 1.45; text-wrap: pretty; }
.innen { width: var(--satz); margin: 0 auto; }

/* Kleine Pillen (Tags) */
.marke {
  display: inline-block; padding: .35em .9em; border-radius: 999px;
  background: hsl(var(--nacht) / .08);
  font-size: max(12px, calc(16 * var(--u))); font-weight: 700; line-height: 1.2;
}
.abschnitt--dunkel .marke { background: hsl(var(--weiss) / .12); }

/* ---------- Nächster Halt ---------- */
.weiter {
  position: relative; overflow: hidden;
  padding: calc(120 * var(--u)) var(--rand) calc(140 * var(--u));
  background: hsl(var(--grau)); text-align: center;
  border-top: 2px solid hsl(var(--nacht) / .1);
}
.weiter p { margin: 0 0 calc(18 * var(--u)); font-weight: 700; font-size: max(14px, calc(22 * var(--u))); letter-spacing: .04em; text-transform: uppercase; }
.weiter a {
  display: inline-flex; align-items: center; gap: .25em;
  font-family: var(--font-display); font-weight: 900;
  font-size: calc(150 * var(--u)); line-height: 1; letter-spacing: -0.045em; text-transform: uppercase;
  text-decoration: none; border-radius: .2em;
}
.weiter svg { width: .7em; height: .7em; transition: transform var(--feder-dauer) var(--feder); }
@media (hover: hover) { .weiter a:hover svg { transform: translateX(.18em); } .weiter a:hover { color: hsl(var(--signal-tief)); } }

/* =========================================================
   ABLAUF – Seekarte mit Etappen
   ========================================================= */
.seite--ablauf .auftakt-deko {
  right: calc(-120 * var(--u)); bottom: calc(-200 * var(--u));
  width: calc(1000 * var(--u)); aspect-ratio: 1;
  background: repeating-radial-gradient(circle, transparent 0 calc(58 * var(--u)), hsl(var(--signal) / .22) calc(58 * var(--u)) calc(61 * var(--u)));
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
}
.route { position: relative; width: var(--satz); margin: 0 auto; padding: 0; list-style: none; counter-reset: etappe; }
/* Kurslinie */
.route::before {
  content: ""; position: absolute; left: 50%; top: calc(40 * var(--u)); bottom: calc(40 * var(--u));
  border-left: calc(4 * var(--u)) dashed hsl(var(--nacht) / .35); translate: -50% 0;
}
.etappe {
  position: relative; counter-increment: etappe;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(180 * var(--u));
  padding: calc(50 * var(--u)) 0;
}
.etappe-karte {
  grid-column: 1; justify-self: end; width: 100%; max-width: calc(700 * var(--u));
  padding: calc(56 * var(--u)) calc(60 * var(--u));
  border-radius: calc(44 * var(--u));
  background: hsl(var(--weiss));
  box-shadow: 0 calc(20 * var(--u)) calc(60 * var(--u)) hsl(var(--nacht) / .08);
}
.etappe:nth-child(even) .etappe-karte { grid-column: 2; justify-self: start; }
.etappe-boje {
  position: absolute; left: 50%; top: calc(50 * var(--u) + 56 * var(--u));
  display: grid; place-items: center;
  width: calc(96 * var(--u)); aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%; background: hsl(var(--signal)); color: hsl(var(--nacht));
  font-family: var(--font-display); font-weight: 900; font-size: calc(34 * var(--u));
  box-shadow: 0 0 0 calc(12 * var(--u)) hsl(var(--grau));
}
.etappe-boje::before { content: counter(etappe, decimal-leading-zero); }
.etappe-zeit { display: block; margin-bottom: calc(14 * var(--u)); font-weight: 700; font-size: max(13px, calc(18 * var(--u))); color: hsl(var(--signal-tief)); text-transform: uppercase; letter-spacing: .04em; }
.etappe h3 { margin: 0 0 calc(18 * var(--u)); font-family: var(--font-display); font-weight: 900; font-size: calc(52 * var(--u)); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; }
.etappe p { margin: 0; font-size: max(15px, calc(22 * var(--u))); line-height: 1.5; }
.etappe ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: calc(28 * var(--u)); }

.gepaeck { width: var(--satz); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: calc(40 * var(--u)); }
.gepaeck-karte { padding: calc(70 * var(--u)); border-radius: calc(50 * var(--u)); background: hsl(var(--weiss) / .06); border: 2px solid hsl(var(--weiss) / .14); }
.gepaeck-karte--hell { background: hsl(var(--signal)); color: hsl(var(--nacht)); border-color: transparent; }
.gepaeck-karte h3 { margin: 0 0 calc(36 * var(--u)); font-family: var(--font-display); font-weight: 900; font-size: calc(46 * var(--u)); line-height: 1; text-transform: uppercase; letter-spacing: -0.03em; }
.gepaeck-karte li { position: relative; padding: calc(16 * var(--u)) 0 calc(16 * var(--u)) 1.8em; border-top: 1px solid currentColor; font-size: max(15px, calc(23 * var(--u))); border-top-color: hsl(var(--weiss) / .16); }
.gepaeck-karte--hell li { border-top-color: hsl(var(--nacht) / .18); }
.gepaeck-karte li::before { content: "✦"; position: absolute; left: 0; color: var(--color-akzent); }
.gepaeck-karte--hell li::before { color: hsl(var(--nacht)); }

/* FAQ */
.faq { width: var(--satz); margin: 0 auto; }
.faq details { border-top: 2px solid hsl(var(--nacht) / .15); }
.faq details:last-child { border-bottom: 2px solid hsl(var(--nacht) / .15); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: calc(34 * var(--u)) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 800; font-size: max(17px, calc(34 * var(--u))); line-height: 1.15; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center;
  width: 1.5em; aspect-ratio: 1; border-radius: 50%; background: hsl(var(--signal));
  transition: rotate var(--feder-dauer) var(--feder);
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { max-width: 52em; margin: 0; padding: 0 0 calc(36 * var(--u)); font-size: max(15px, calc(23 * var(--u))); line-height: 1.55; }

/* =========================================================
   PROJEKTE – Fallstudie + Index
   ========================================================= */
.seite--projekte .auftakt-deko {
  right: calc(60 * var(--u)); top: calc(120 * var(--u));
  width: calc(300 * var(--u)); aspect-ratio: 4 / 5; rotate: 6deg;
  border-radius: calc(44 * var(--u)); overflow: hidden;
}
.fall {
  width: var(--satz); margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: calc(90 * var(--u)); align-items: center;
}
.fall-bild { position: relative; aspect-ratio: 16 / 10; border-radius: calc(50 * var(--u)); overflow: hidden; }
.fall-foto, .index-foto { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); }
.fall-kunde { margin: 0 0 calc(16 * var(--u)); font-weight: 700; font-size: max(14px, calc(20 * var(--u))); text-transform: uppercase; letter-spacing: .04em; }
.fall h2 { margin: 0 0 calc(40 * var(--u)); font-family: var(--font-display); font-weight: 900; font-size: calc(80 * var(--u)); line-height: .95; letter-spacing: -0.035em; text-transform: uppercase; }
.fall dl { margin: 0; display: grid; gap: calc(22 * var(--u)); }
.fall dt { font-weight: 700; font-size: max(13px, calc(18 * var(--u))); text-transform: uppercase; letter-spacing: .04em; color: hsl(var(--signal-tief)); }
.fall dd { margin: 4px 0 0; font-size: max(15px, calc(22 * var(--u))); line-height: 1.5; }
.fall-zahlen { display: flex; gap: calc(50 * var(--u)); margin-top: calc(46 * var(--u)); padding-top: calc(36 * var(--u)); border-top: 2px solid hsl(var(--nacht) / .12); }
.fall-zahlen b { display: block; font-family: var(--font-display); font-weight: 900; font-size: calc(64 * var(--u)); line-height: 1; letter-spacing: -0.04em; }
.fall-zahlen span { font-size: max(12px, calc(17 * var(--u))); }

.filter { display: flex; flex-wrap: wrap; gap: 10px; width: var(--satz); margin: 0 auto calc(50 * var(--u)); }
.filter button {
  padding: .6em 1.3em; border: 2px solid hsl(var(--nacht)); border-radius: 999px; background: transparent;
  font-family: var(--font-display); font-weight: 800; font-size: max(13px, calc(19 * var(--u))); text-transform: uppercase; letter-spacing: -0.01em;
  transition: background-color .2s ease, color .2s ease, transform var(--feder-dauer) var(--feder);
}
.filter button[aria-pressed="true"] { background: hsl(var(--nacht)); color: hsl(var(--signal)); }
@media (hover: hover) { .filter button:hover { transform: translateY(-2px); } }
.filter button:active { transform: scale(.96); }
.filter-zahl { align-self: center; margin-left: auto; font-weight: 700; font-size: max(13px, calc(18 * var(--u))); }

.index { width: var(--satz); margin: 0 auto; }
.index-zeile { border-top: 2px solid hsl(var(--nacht) / .14); }
.index-zeile:last-child { border-bottom: 2px solid hsl(var(--nacht) / .14); }
.index-zeile[hidden] { display: none; }
.index-zeile { scroll-margin-top: calc(120 * var(--u)); }
.index-zeile:target .index-link { background: hsl(var(--weiss)); }
.index-link {
  position: relative;
  display: grid; grid-template-columns: calc(90 * var(--u)) minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr) calc(90 * var(--u)); gap: calc(30 * var(--u)); align-items: center;
  padding: calc(34 * var(--u)) calc(20 * var(--u));
  text-decoration: none; border-radius: calc(20 * var(--u));
  transition: background-color .25s ease, padding .4s var(--aus);
}
.index-logo { display: grid; place-items: center; aspect-ratio: 1; padding: 8%; border-radius: calc(16 * var(--u)); background: hsl(var(--weiss)); box-shadow: inset 0 0 0 1px hsl(var(--nacht) / .1); }
.index-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.index-logo--dunkel { background: hsl(var(--nacht)); }
.index-logo--text { background: hsl(var(--nacht)); color: hsl(var(--weiss)); font-family: var(--font-display); font-weight: 900; font-size: max(13px, calc(24 * var(--u))); }
.index-kunde { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-weight: 900; font-size: calc(40 * var(--u)); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; }
.index-titel { font-size: max(15px, calc(22 * var(--u))); }
.index-arten { display: flex; flex-wrap: wrap; gap: 6px; }
.index-jahr { justify-self: end; font-weight: 700; font-size: max(13px, calc(18 * var(--u))); font-variant-numeric: tabular-nums; }
/* Vorschau erscheint beim Überfahren */
.index-vorschau {
  position: absolute; z-index: 3; right: calc(150 * var(--u)); top: 50%;
  width: calc(300 * var(--u)); aspect-ratio: 4 / 3; border-radius: calc(26 * var(--u)); overflow: hidden;
  opacity: 0; scale: .7; rotate: -6deg; translate: 0 -50%; pointer-events: none;
  transition: opacity .2s ease, scale var(--feder-dauer) var(--feder), rotate var(--feder-dauer) var(--feder);
}
.index-vorschau--scroll { background: hsl(var(--nacht)); }
.index-foto--scroll {
  width: 100%; height: auto; max-width: none; object-fit: initial; object-position: top;
  transform: translateY(0); will-change: transform;
  transition: transform 12s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) {
  .index-link:hover { background: hsl(var(--weiss)); padding-left: calc(36 * var(--u)); }
  .index-link:hover .index-vorschau { opacity: 1; scale: 1; rotate: 4deg; }
  .index-link:hover .index-vorschau--scroll .index-foto--scroll { transform: translateY(-92.4%); }
}
@media (prefers-reduced-motion: reduce) {
  .index-foto--scroll { transition: none; }
}
.index-leer { width: var(--satz); margin: 0 auto; padding: calc(40 * var(--u)) 0; font-weight: 700; }

/* =========================================================
   KUNDEN – Zahlen, Branchen, Logo-Wand, Logbuch
   ========================================================= */
.seite--kunden .auftakt-deko {
  right: calc(-60 * var(--u)); top: calc(120 * var(--u));
  font-family: var(--font-display); font-weight: 900; font-size: calc(560 * var(--u)); line-height: .8;
  color: hsl(var(--signal-tief) / .35); letter-spacing: -0.06em;
}
.zahlen { width: var(--satz); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(30 * var(--u)); }
.zahl { padding: calc(50 * var(--u)) calc(40 * var(--u)); border-radius: calc(40 * var(--u)); background: hsl(var(--weiss)); }
.zahl b { display: block; font-family: var(--font-display); font-weight: 900; font-size: calc(110 * var(--u)); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.zahl span { display: block; margin-top: calc(12 * var(--u)); font-size: max(14px, calc(21 * var(--u))); line-height: 1.3; }

.branchen { width: var(--satz); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(30 * var(--u)); }
.branche {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: calc(380 * var(--u)); padding: calc(46 * var(--u));
  border-radius: calc(40 * var(--u)); color: hsl(var(--weiss));
  display: flex; flex-direction: column; justify-content: flex-end;
}
.branche .motiv { z-index: -2; }
.branche::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, rgb(0 0 0 / .7)); }
.branche h3 { margin: 0 0 calc(12 * var(--u)); font-family: var(--font-display); font-weight: 900; font-size: calc(40 * var(--u)); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; }
.branche p { margin: 0; font-size: max(14px, calc(19 * var(--u))); line-height: 1.4; }

.wand { width: var(--satz); margin: 0 auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 2px solid hsl(var(--weiss) / .14); border-left: 2px solid hsl(var(--weiss) / .14); }
.wand li {
  display: grid; place-items: center; min-height: calc(170 * var(--u)); padding: 12px;
  border-right: 2px solid hsl(var(--weiss) / .14); border-bottom: 2px solid hsl(var(--weiss) / .14);
  font-size: calc(34 * var(--u)); line-height: 1; text-align: center;
  transition: background-color .25s ease, color .25s ease;
}
.wand .wm { color: inherit; font-size: calc(32 * var(--u)); }
.wand .wm-6, .wand .wm-2 { font-size: calc(24 * var(--u)); }
.wand small { display: block; font-size: .45em; letter-spacing: .1em; text-transform: uppercase; }
@media (hover: hover) { .wand li:hover { background: hsl(var(--signal)); color: hsl(var(--nacht)); } }

.logbuch { width: var(--satz); margin: 0 auto; border-collapse: collapse; font-size: max(14px, calc(22 * var(--u))); }
.logbuch caption { text-align: left; padding-bottom: calc(20 * var(--u)); font-size: max(13px, calc(17 * var(--u))); opacity: .7; }
.logbuch th, .logbuch td { padding: calc(26 * var(--u)) calc(16 * var(--u)); text-align: left; border-bottom: 2px solid hsl(var(--nacht) / .12); }
.logbuch thead th { font-size: max(12px, calc(16 * var(--u))); text-transform: uppercase; letter-spacing: .05em; opacity: .6; }
.logbuch tbody th { font-family: var(--font-display); font-weight: 900; font-size: 1.4em; letter-spacing: -0.03em; }
.logbuch .gold { color: hsl(var(--signal-tief)); font-weight: 700; }

/* =========================================================
   CREW – Prinzipien, Profile, Jobs
   ========================================================= */
.seite--crew .auftakt-deko {
  right: calc(100 * var(--u)); bottom: 0;
  display: flex; align-items: flex-end; gap: calc(14 * var(--u));
}
.seite--crew .auftakt-deko svg { width: calc(170 * var(--u)); height: auto; aspect-ratio: 3 / 4; border-radius: calc(30 * var(--u)) calc(30 * var(--u)) 0 0; }
.seite--crew .auftakt-deko svg:nth-child(2) { width: calc(210 * var(--u)); }

.prinzipien { width: var(--satz); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(30 * var(--u)); counter-reset: prinzip; }
.prinzip { counter-increment: prinzip; padding: calc(56 * var(--u)) calc(50 * var(--u)); border-radius: calc(44 * var(--u)); background: hsl(var(--weiss)); }
.prinzip::before { content: counter(prinzip); display: grid; place-items: center; width: calc(70 * var(--u)); aspect-ratio: 1; margin-bottom: calc(40 * var(--u)); border-radius: 50%; background: hsl(var(--signal)); font-family: var(--font-display); font-weight: 900; font-size: calc(28 * var(--u)); }
.prinzip h3 { margin: 0 0 calc(16 * var(--u)); font-family: var(--font-display); font-weight: 900; font-size: calc(40 * var(--u)); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; }
.prinzip p { margin: 0; font-size: max(15px, calc(21 * var(--u))); line-height: 1.5; }

.profile { width: var(--satz); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(30 * var(--u)); }
.profil {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(30 * var(--u)); align-items: start;
  padding: calc(30 * var(--u)); border-radius: calc(44 * var(--u));
  background: hsl(var(--weiss) / .06); border: 2px solid hsl(var(--weiss) / .12);
  transition: background-color .25s ease, transform var(--feder-dauer) var(--feder);
}
@media (hover: hover) { .profil:hover { background: hsl(var(--weiss) / .12); transform: translateY(-4px); } }
.profil-bild { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: calc(30 * var(--u)); background: var(--p-bg); }
.profil h3 { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: calc(44 * var(--u)); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; }
.profil-rolle { margin: calc(8 * var(--u)) 0 calc(22 * var(--u)); color: var(--color-akzent); font-weight: 700; font-size: max(14px, calc(19 * var(--u))); }
.profil dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: calc(8 * var(--u)) calc(20 * var(--u)); font-size: max(13px, calc(18 * var(--u))); line-height: 1.4; }
.profil dt { opacity: .6; }
.profil dd { margin: 0; min-width: 0; }

.jobs { width: var(--satz); margin: 0 auto; }
.job {
  display: grid; grid-template-columns: 1fr auto auto; gap: calc(30 * var(--u)); align-items: center;
  padding: calc(34 * var(--u)) 0; border-top: 2px solid hsl(var(--nacht) / .14);
}
.job:last-child { border-bottom: 2px solid hsl(var(--nacht) / .14); }
.job h3 { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: calc(42 * var(--u)); line-height: 1.05; letter-spacing: -0.03em; text-transform: uppercase; }
.job p { margin: 6px 0 0; font-size: max(14px, calc(19 * var(--u))); }
.job .knopf { font-size: max(13px, calc(20 * var(--u))); padding: calc(14 * var(--u)) calc(34 * var(--u)); }

/* =========================================================
   STIMMEN – Leitzitat + Zitat-Wand
   ========================================================= */
.seite--stimmen .auftakt-deko {
  right: calc(60 * var(--u)); top: calc(40 * var(--u));
  font-family: Georgia, serif; font-weight: 700; font-size: calc(900 * var(--u)); line-height: 1;
  color: hsl(var(--koralle) / .55);
}
.leitzitat { width: min(var(--satz), calc(1500 * var(--u))); margin: 0 auto; text-align: center; }
.leitzitat blockquote { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: calc(64 * var(--u)); line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.leitzitat figcaption { margin-top: calc(40 * var(--u)); font-size: max(15px, calc(22 * var(--u))); }
.leitzitat figcaption b { display: block; font-family: var(--font-display); text-transform: uppercase; }

.zitatwand { width: var(--satz); margin: 0 auto; columns: 3 calc(420 * var(--u)); column-gap: calc(30 * var(--u)); }
.zitat {
  break-inside: avoid; margin: 0 0 calc(30 * var(--u));
  padding: calc(50 * var(--u)) calc(46 * var(--u)) calc(40 * var(--u));
  border-radius: calc(40 * var(--u)); background: var(--z-bg, hsl(var(--weiss))); color: var(--z-fg, hsl(var(--nacht)));
}
.zitat blockquote { margin: 0; font-size: max(16px, calc(25 * var(--u))); line-height: 1.45; letter-spacing: -0.01em; }
.zitat blockquote::before { content: "\201C"; display: block; margin-bottom: -.4em; font-family: Georgia, serif; font-weight: 700; font-size: 3.2em; line-height: 1; }
.zitat figcaption { display: flex; align-items: center; gap: 14px; margin-top: calc(34 * var(--u)); font-size: max(13px, calc(17 * var(--u))); line-height: 1.3; }
.zitat figcaption b { display: block; font-size: 1.1em; }
.zitat-initial {
  flex: none; display: grid; place-items: center; width: calc(58 * var(--u)); min-width: 38px; aspect-ratio: 1; border-radius: 50%;
  background: currentColor;
}
.zitat-initial span { color: var(--z-bg, hsl(var(--weiss))); font-family: var(--font-display); font-weight: 900; font-size: max(13px, calc(20 * var(--u))); }
.zitat .marke { margin-top: calc(24 * var(--u)); background: hsl(var(--nacht) / .1); }
.zitat--dunkel { --z-bg: hsl(var(--nacht)); --z-fg: hsl(var(--weiss)); }
.zitat--dunkel .marke { background: hsl(var(--weiss) / .14); }
.zitat--signal { --z-bg: hsl(var(--signal)); }
.zitat--koralle { --z-bg: hsl(var(--koralle)); }
.zitat--blau { --z-bg: hsl(200 70% 70%); }

/* =========================================================
   KONTAKT – Anfrage + Hafenkarte
   ========================================================= */
.seite--kontakt .auftakt-deko {
  right: calc(90 * var(--u)); bottom: calc(-150 * var(--u));
  width: calc(440 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  background: hsl(var(--koralle));
  animation: anfrage-puls 3.2s ease-in-out infinite;
}
@keyframes anfrage-puls { 50% { scale: 1.06; } }
.kontakt-raster { width: var(--satz); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: calc(40 * var(--u)); align-items: start; }

.anfrage { padding: calc(70 * var(--u)); border-radius: calc(50 * var(--u)); background: hsl(var(--weiss)); }
.anfrage h2 { margin: 0 0 calc(40 * var(--u)); font-family: var(--font-display); font-weight: 900; font-size: calc(60 * var(--u)); line-height: 1; letter-spacing: -0.035em; text-transform: uppercase; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: calc(24 * var(--u)); }
.feld { display: grid; gap: 8px; margin-bottom: calc(28 * var(--u)); }
.feld label, .feld legend { font-weight: 700; font-size: max(14px, calc(18 * var(--u))); }
.feld input, .feld textarea, .feld select {
  width: 100%; padding: .85em 1.1em; border: 2px solid hsl(var(--nacht) / .15); border-radius: calc(22 * var(--u));
  background: hsl(var(--grau) / .35); color: inherit;
  font: inherit; font-size: max(16px, calc(20 * var(--u)));
  transition: border-color .2s ease, background-color .2s ease;
}
.feld textarea { min-height: 9em; resize: vertical; border-radius: calc(26 * var(--u)); }
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible { outline: none; border-color: hsl(var(--nacht)); background: hsl(var(--weiss)); }
.feld [aria-invalid="true"] { border-color: hsl(4 80% 50%); }
fieldset.feld { margin: 0 0 calc(28 * var(--u)); padding: 0; border: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chips span {
  display: block; padding: .55em 1.1em; border: 2px solid hsl(var(--nacht) / .2); border-radius: 999px;
  font-weight: 700; font-size: max(14px, calc(18 * var(--u)));
  transition: background-color .2s ease, border-color .2s ease;
}
.chips input:checked + span { background: hsl(var(--signal)); border-color: hsl(var(--signal)); }
.chips input:focus-visible + span { outline: 3px solid hsl(var(--nacht)); outline-offset: 2px; }
.zustimmung { display: flex; gap: 12px; align-items: flex-start; margin: calc(10 * var(--u)) 0 calc(36 * var(--u)); font-size: max(14px, calc(17 * var(--u))); line-height: 1.45; }
.zustimmung input { flex: none; width: 1.3em; height: 1.3em; margin-top: .1em; accent-color: hsl(var(--nacht)); }
.anfrage .knopf { border: 0; cursor: pointer; }
.anfrage-status { min-height: 1.5em; margin: calc(20 * var(--u)) 0 0; font-weight: 700; }

.hafen { display: grid; gap: calc(30 * var(--u)); }
.hafen-karte { padding: calc(56 * var(--u)); border-radius: calc(50 * var(--u)); background: hsl(var(--signal)); }
.hafen-karte h2 { margin: 0 0 calc(24 * var(--u)); font-family: var(--font-display); font-weight: 900; font-size: calc(40 * var(--u)); line-height: 1; text-transform: uppercase; letter-spacing: -0.03em; }
.hafen-karte address { overflow-wrap: anywhere; font-style: normal; font-size: max(16px, calc(24 * var(--u))); line-height: 1.5; }
.hafen-karte a { font-weight: 700; }
.offen-status { display: inline-flex; align-items: center; gap: .6em; margin-top: calc(24 * var(--u)); padding: .5em 1em; border-radius: 999px; background: hsl(var(--nacht)); color: hsl(var(--weiss)); font-weight: 700; font-size: max(13px, calc(17 * var(--u))); }
.offen-status::before { content: ""; width: .7em; aspect-ratio: 1; border-radius: 50%; background: hsl(0 0% 60%); }
.offen-status[data-offen="ja"]::before { background: hsl(140 70% 50%); box-shadow: 0 0 0 4px hsl(140 70% 50% / .25); }
.zeiten { margin: calc(20 * var(--u)) 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px calc(20 * var(--u)); font-size: max(14px, calc(19 * var(--u))); }
.zeiten dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Stilisierte Seekarte statt eingebetteter Karte (keine Drittanbieter) */
.seekarte {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: calc(50 * var(--u));
  background:
    repeating-linear-gradient(0deg, transparent 0 calc(47 * var(--u)), hsl(200 60% 40% / .25) calc(47 * var(--u)) calc(49 * var(--u))),
    repeating-linear-gradient(90deg, transparent 0 calc(47 * var(--u)), hsl(200 60% 40% / .25) calc(47 * var(--u)) calc(49 * var(--u))),
    hsl(200 65% 72%);
}
.seekarte svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.seekarte-pin {
  position: absolute; left: 58%; top: 46%;
  width: calc(64 * var(--u)); min-width: 40px; aspect-ratio: 1; translate: -50% -100%;
  border-radius: 50% 50% 50% 0; rotate: -45deg; background: hsl(var(--gold)); border: 4px solid hsl(var(--nacht));
}
.seekarte-schild { position: absolute; left: 58%; top: 50%; translate: -50% 0; padding: .4em .9em; border-radius: 999px; background: hsl(var(--nacht)); color: hsl(var(--weiss)); font-weight: 700; font-size: max(12px, calc(16 * var(--u))); white-space: nowrap; }

.schritte { width: var(--satz); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(30 * var(--u)); counter-reset: schritt; }
.schritt { counter-increment: schritt; padding-top: calc(30 * var(--u)); border-top: calc(6 * var(--u)) solid hsl(var(--signal)); }
.schritt::before { content: counter(schritt, decimal-leading-zero); display: block; font-family: var(--font-display); font-weight: 900; font-size: calc(90 * var(--u)); line-height: 1; color: hsl(var(--signal-tief)); }
.schritt h3 { margin: calc(20 * var(--u)) 0 calc(10 * var(--u)); font-family: var(--font-display); font-weight: 900; font-size: calc(36 * var(--u)); line-height: 1.05; text-transform: uppercase; letter-spacing: -0.03em; }
.schritt p { margin: 0; font-size: max(15px, calc(21 * var(--u))); line-height: 1.5; }

/* =========================================================
   MOBIL (< 768px)
   ========================================================= */
@media (max-width: 767.98px) {
  .pfad { display: none; }
  .auftakt { min-height: calc(640 * var(--u)); padding: calc(var(--navi-platz) + 48px) var(--rand) calc(50 * var(--u)); }
  .auftakt h1 { font-size: calc(54 * var(--u)); }
  .auftakt-lead { font-size: calc(17 * var(--u)); margin-top: calc(20 * var(--u)); }
  .abschnitt { padding: calc(70 * var(--u)) var(--rand); }
  .abschnitt-kopf { grid-template-columns: 1fr; margin-bottom: calc(36 * var(--u)); gap: calc(14 * var(--u)); }
  .abschnitt-kopf h2 { font-size: calc(38 * var(--u)); }
  .abschnitt-kopf p { font-size: calc(16 * var(--u)); }
  .weiter { padding: calc(60 * var(--u)) var(--rand) calc(130 * var(--u)); }
  .weiter a { font-size: calc(40 * var(--u)); }

  /* Ablauf: Kurslinie links, Karten rechts */
  .seite--ablauf .auftakt-deko { width: calc(420 * var(--u)); right: calc(-140 * var(--u)); bottom: auto; top: calc(40 * var(--u)); }
  .route::before { left: calc(24 * var(--u)); }
  .etappe { grid-template-columns: 1fr; padding: calc(14 * var(--u)) 0 calc(14 * var(--u)) calc(64 * var(--u)); }
  .etappe-karte, .etappe:nth-child(even) .etappe-karte { grid-column: 1; max-width: none; padding: calc(26 * var(--u)) calc(22 * var(--u)); border-radius: calc(26 * var(--u)); }
  .etappe-boje { left: calc(24 * var(--u)); top: calc(14 * var(--u) + 22 * var(--u)); width: calc(44 * var(--u)); font-size: calc(15 * var(--u)); box-shadow: 0 0 0 calc(6 * var(--u)) hsl(var(--grau)); }
  .etappe h3 { font-size: calc(24 * var(--u)); }
  .gepaeck { grid-template-columns: 1fr; gap: calc(14 * var(--u)); }
  .gepaeck-karte { padding: calc(28 * var(--u)) calc(22 * var(--u)); border-radius: calc(26 * var(--u)); }
  .gepaeck-karte h3 { font-size: calc(24 * var(--u)); margin-bottom: calc(16 * var(--u)); }
  .faq summary { padding: calc(18 * var(--u)) 0; }

  /* Projekte */
  .seite--projekte .auftakt-deko { width: calc(150 * var(--u)); right: calc(20 * var(--u)); top: calc(90 * var(--u)); }
  .fall { grid-template-columns: 1fr; gap: calc(28 * var(--u)); }
  .fall-bild { border-radius: calc(26 * var(--u)); }
  .fall h2 { font-size: calc(32 * var(--u)); margin-bottom: calc(20 * var(--u)); }
  .fall-zahlen { gap: calc(18 * var(--u)); }
  .fall-zahlen b { font-size: calc(30 * var(--u)); }
  .filter-zahl { width: 100%; margin: 6px 0 0; }
  .index-link { grid-template-columns: calc(64 * var(--u)) minmax(0, 1fr) auto; column-gap: calc(12 * var(--u)); row-gap: 6px; padding: calc(18 * var(--u)) 0; }
  .index-kunde { font-size: calc(18 * var(--u)); }
  .index-titel, .index-arten { grid-column: 2 / -1; }
  .index-jahr { grid-row: 1; grid-column: 3; }
  .index-vorschau { display: none; }

  /* Kunden */
  .seite--kunden .auftakt-deko { font-size: calc(220 * var(--u)); top: calc(90 * var(--u)); right: calc(-20 * var(--u)); }
  .zahlen { grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); }
  .zahl { padding: calc(22 * var(--u)) calc(18 * var(--u)); border-radius: calc(24 * var(--u)); }
  .zahl b { font-size: calc(44 * var(--u)); }
  .branchen { grid-template-columns: 1fr; gap: calc(12 * var(--u)); }
  .branche { min-height: calc(200 * var(--u)); padding: calc(22 * var(--u)); border-radius: calc(26 * var(--u)); }
  .branche h3 { font-size: calc(22 * var(--u)); }
  .wand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wand li { min-height: calc(90 * var(--u)); }
  .wand .wm { font-size: calc(20 * var(--u)); }
  .wand .wm-6, .wand .wm-2 { font-size: calc(14 * var(--u)); }
  .logbuch { display: block; overflow-x: auto; }
  .logbuch th, .logbuch td { padding: calc(14 * var(--u)) calc(8 * var(--u)); white-space: nowrap; }

  /* Crew */
  .seite--crew .auftakt-deko { right: var(--rand); }
  .seite--crew .auftakt-deko svg { width: calc(70 * var(--u)); border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 0; }
  .seite--crew .auftakt-deko svg:nth-child(2) { width: calc(86 * var(--u)); }
  .prinzipien, .profile { grid-template-columns: 1fr; gap: calc(12 * var(--u)); }
  .prinzip { padding: calc(26 * var(--u)) calc(22 * var(--u)); border-radius: calc(26 * var(--u)); }
  .prinzip::before { width: calc(40 * var(--u)); font-size: calc(16 * var(--u)); margin-bottom: calc(18 * var(--u)); }
  .prinzip h3 { font-size: calc(22 * var(--u)); }
  .profil { grid-template-columns: calc(110 * var(--u)) minmax(0, 1fr); gap: calc(16 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(26 * var(--u)); }
  .profil-bild { border-radius: calc(18 * var(--u)); }
  .profil h3 { font-size: calc(22 * var(--u)); }
  .profil-rolle { margin-bottom: calc(10 * var(--u)); }
  .profil dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .profil dd + dt { margin-top: calc(6 * var(--u)); }
  .profil dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
  .job { grid-template-columns: 1fr; gap: calc(10 * var(--u)); padding: calc(20 * var(--u)) 0; }
  .job h3 { font-size: calc(22 * var(--u)); }
  .job .knopf { justify-self: start; }

  /* Stimmen */
  .seite--stimmen .auftakt-deko { font-size: calc(360 * var(--u)); top: calc(40 * var(--u)); right: var(--rand); }
  .leitzitat blockquote { font-size: calc(26 * var(--u)); }
  .zitatwand { columns: 1; }
  .zitat { padding: calc(26 * var(--u)) calc(22 * var(--u)); border-radius: calc(26 * var(--u)); margin-bottom: calc(12 * var(--u)); }

  /* Kontakt */
  .seite--kontakt .auftakt-deko { width: calc(160 * var(--u)); right: calc(-30 * var(--u)); top: calc(110 * var(--u)); bottom: auto; }
  .kontakt-raster { grid-template-columns: minmax(0, 1fr); gap: calc(14 * var(--u)); }
  .anfrage { padding: calc(28 * var(--u)) calc(20 * var(--u)); border-radius: calc(28 * var(--u)); }
  .anfrage h2 { font-size: calc(28 * var(--u)); margin-bottom: calc(22 * var(--u)); }
  .feld-paar { grid-template-columns: 1fr; gap: 0; }
  .feld input, .feld textarea, .feld select { border-radius: calc(16 * var(--u)); }
  .hafen-karte { padding: calc(28 * var(--u)) calc(22 * var(--u)); border-radius: calc(28 * var(--u)); }
  .hafen-karte h2 { font-size: calc(24 * var(--u)); }
  .seekarte { border-radius: calc(28 * var(--u)); }
  .schritte { grid-template-columns: 1fr; gap: calc(24 * var(--u)); }
  .schritt::before { font-size: calc(44 * var(--u)); }
  .schritt h3 { font-size: calc(22 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .seite--kontakt .auftakt-deko { animation: none; }
}


/* =========================================================
   LEISTUNGSSEITEN (Webdesign, Website erstellen, ERP, DMS)
   ========================================================= */
.seite--leistung { --seite-bg: hsl(var(--nacht)); --seite-fg: hsl(var(--weiss)); --seite-akzent: hsl(var(--signal)); }
.seite--software { --seite-bg: hsl(var(--signal-tief)); --seite-fg: hsl(var(--weiss)); --seite-akzent: hsl(var(--koralle)); }
.seite--recht    { --seite-bg: hsl(var(--nacht)); --seite-fg: hsl(var(--weiss)); --seite-akzent: hsl(var(--signal)); }
.seite--leistung .auftakt-deko, .seite--software .auftakt-deko {
  right: calc(-120 * var(--u)); bottom: calc(-200 * var(--u));
  width: calc(1000 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 calc(58 * var(--u)), hsl(var(--weiss) / .14) calc(58 * var(--u)) calc(61 * var(--u)));
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
}
.stand { margin: calc(28 * var(--u)) 0 0; font-size: max(13px, calc(17 * var(--u))); opacity: .7; }

/* Fließtext in zwei Spalten – für ausführliche Erklärungen */
.fliess { width: var(--satz); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(40 * var(--u)) calc(120 * var(--u)); }
.fliess h3 { margin: 0 0 calc(14 * var(--u)); font-family: var(--font-display); font-weight: 900; font-size: calc(36 * var(--u)); line-height: 1.05; letter-spacing: -0.03em; text-transform: uppercase; }
.fliess p, .fliess li { max-width: 62ch; margin: 0; font-size: max(16px, calc(23 * var(--u))); line-height: 1.6; }
.fliess p + p { margin-top: 1em; }
.fliess ul { margin: 0; padding-left: 1.2em; }
.fliess a { color: inherit; text-underline-offset: 3px; }

/* Module einer Software als Pillen */
.module { width: var(--satz); margin: 0 auto; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.module .marke { font-size: max(14px, calc(20 * var(--u))); padding: .5em 1.1em; }

/* Screenshots */
.screens { width: var(--satz); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(40 * var(--u)); }
.screen { margin: 0; }
.screen img { display: block; width: 100%; height: auto; border-radius: calc(24 * var(--u)); border: 2px solid hsl(var(--weiss) / .14); background: hsl(var(--weiss)); }
.screen figcaption { margin-top: calc(14 * var(--u)); font-weight: 700; font-size: max(14px, calc(19 * var(--u))); }

/* Referenzen */
.referenzen { width: var(--satz); margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(30 * var(--u)); }
.referenz a { display: block; color: inherit; text-decoration: none; border-radius: calc(30 * var(--u)); transition: transform var(--feder-dauer) var(--feder); }
.referenz img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; border-radius: calc(30 * var(--u)); }
.referenz b { display: block; margin-top: calc(16 * var(--u)); font-family: var(--font-display); font-weight: 800; font-size: max(16px, calc(26 * var(--u))); text-transform: uppercase; letter-spacing: -0.02em; }
.referenz span { display: block; margin-top: 4px; font-size: max(14px, calc(19 * var(--u))); opacity: .75; }
@media (hover: hover) { .referenz a:hover { transform: translateY(-6px); } }
.referenz a:active { transform: scale(.97); }

/* Rechtstexte */
.recht { width: var(--satz); max-width: 75ch; margin: 0 auto; }
.recht h2 { margin: calc(60 * var(--u)) 0 calc(14 * var(--u)); font-family: var(--font-display); font-weight: 900; font-size: max(20px, calc(34 * var(--u))); text-transform: uppercase; letter-spacing: -0.02em; }
.recht p, .recht address { margin: 0 0 1em; font-style: normal; font-size: max(15px, calc(21 * var(--u))); line-height: 1.6; }
.luecke { padding: 0 .3em; border-radius: 4px; background: hsl(var(--gold) / .35); }

@media (max-width: 767.98px) {
  .seite--leistung .auftakt-deko, .seite--software .auftakt-deko { width: calc(420 * var(--u)); right: calc(-140 * var(--u)); bottom: auto; top: calc(40 * var(--u)); }
  /* Lange Keyword-Überschriften („Reutlingen“, „Handwerker“) passen sonst nicht in 390px */
  .seite--leistung .auftakt, .seite--software .auftakt, .seite--recht .auftakt { grid-template-columns: minmax(0, 1fr); }
  .seite--leistung .auftakt h1, .seite--software .auftakt h1, .seite--recht .auftakt h1 { font-size: calc(38 * var(--u)); hyphens: auto; overflow-wrap: break-word; }
  .fliess, .screens, .referenzen { grid-template-columns: minmax(0, 1fr); gap: calc(24 * var(--u)); }
  .fliess h3 { font-size: calc(22 * var(--u)); }
  .recht h2 { font-size: calc(20 * var(--u)); hyphens: auto; overflow-wrap: break-word; }
  .screen img, .referenz img { border-radius: calc(16 * var(--u)); }
}

/* =========================================================
   PRAXIS-BILDER (ERP, DMS): Foto öffnet sich, Stationen leuchten nacheinander auf
   ========================================================= */
.praxis-raster { width: var(--satz); margin: 0 auto; display: grid; grid-template-columns: 7fr 4fr; gap: calc(40 * var(--u)); align-items: end; }
.praxis-bild[data-reveal] {
  position: relative; overflow: hidden; margin: 0; transform: none;
  border-radius: calc(32 * var(--u));
  clip-path: inset(10% 6% round calc(32 * var(--u)));
  transition: opacity .6s ease, clip-path 1s var(--aus);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.praxis-bild[data-reveal].sichtbar { clip-path: inset(0 round calc(32 * var(--u))); }
.praxis-bild--gross { aspect-ratio: 3 / 2; }
.praxis-bild--klein { aspect-ratio: 4 / 5; }
.praxis-bild--klein img { object-position: 74% 50%; }
.praxis-bild img {
  display: block; width: 100%; height: 116%; object-fit: cover;
  transform: translateY(var(--versatz, -7%)) scale(1.06);
  transition: scale 1.2s var(--aus);
  will-change: transform;
}
.praxis-schritte {
  position: absolute; left: calc(24 * var(--u)); bottom: calc(24 * var(--u));
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 6px; list-style: none;
  border-radius: 999px; background: hsl(var(--nacht) / .86); color: hsl(var(--weiss));
}
.praxis-schritte li {
  padding: .45em 1em; border-radius: 999px;
  font-weight: 700; font-size: max(13px, calc(18 * var(--u)));
  opacity: .6;
}
.praxis-bild.sichtbar .praxis-schritte li {
  animation: station 8s ease infinite;
  animation-delay: calc(var(--n) * 2s + .6s);
}
@keyframes station {
  0%, 25% { opacity: 1; background: hsl(var(--signal)); color: hsl(var(--nacht)); }
  32%, 100% { opacity: .6; background: transparent; color: inherit; }
}
.module .marke { transition: opacity .5s ease, transform var(--feder-dauer) var(--feder), background-color .2s ease, color .2s ease; }
@media (hover: hover) { .module .marke.sichtbar:hover { transform: translateY(-3px); background: hsl(var(--signal)); color: hsl(var(--nacht)); } }
@media (max-width: 767.98px) {
  .praxis-raster { grid-template-columns: minmax(0, 1fr); gap: calc(16 * var(--u)); }
  .praxis-bild--klein { aspect-ratio: 3 / 2; }
  .praxis-schritte { left: 8px; right: 8px; bottom: 8px; justify-content: center; border-radius: 20px; gap: 2px; padding: 4px; }
  .praxis-schritte li { font-size: 12px; padding: .4em .7em; }
}
@media (prefers-reduced-motion: reduce) {
  .praxis-bild[data-reveal], .praxis-bild[data-reveal].sichtbar { clip-path: none; }
  .praxis-bild.sichtbar .praxis-schritte li { animation: none; opacity: 1; }
  .praxis-bild img { transform: none; height: 100%; }
}

/* ---------- Korrekturen ---------- */
.schritte { padding: 0; list-style: none; }
.auftakt-bild { display: none; }

@media (max-width: 767.98px) {
  .faq summary { font-size: calc(20 * var(--u)); }
  /* Pfeil lief bei langen Seitennamen aus dem Bild */
  .weiter a { max-width: 100%; font-size: calc(36 * var(--u)); }
  .weiter svg { flex: none; }
  .seite--recht .auftakt { min-height: 0; }
  .profil-bild.bald { font-size: max(11px, calc(13 * var(--u))); }
  .referenz b { font-size: max(14px, calc(15 * var(--u))); overflow-wrap: anywhere; }
  /* Deko-Formen lagen über Eyebrow und Überschrift */
  .seite--projekte .auftakt-deko, .seite--kontakt .auftakt-deko { display: none; }
  /* Illustrationen stehen unter dem Text statt darauf */
  .seite--crew .auftakt { padding-bottom: calc(130 * var(--u)); }
}

/* ---------- Auftakt am PC: Text links, echte Inhalte rechts ---------- */
@media (min-width: 1024px) {
  .auftakt { align-content: center; min-height: min(calc(860 * var(--u)), 92svh); padding-top: calc(var(--navi-platz) + 72px); }
  .auftakt > :not(.auftakt-deko, .auftakt-bild) { position: relative; z-index: 1; }
  .auftakt h1 { max-width: calc(1000 * var(--u)); font-size: calc(112 * var(--u)); line-height: .95; }
  .auftakt-lead { max-width: calc(880 * var(--u)); margin-top: calc(32 * var(--u)); font-size: max(16px, calc(25 * var(--u))); }
  .seite--projekte .auftakt-deko, .seite--kontakt .auftakt-deko { display: none; }
  .seite--crew .auftakt-deko { right: calc(70 * var(--u)); gap: calc(18 * var(--u)); }
  .seite--crew .auftakt-deko svg { width: calc(230 * var(--u)); }
  .seite--crew .auftakt-deko svg:nth-child(2) { width: calc(280 * var(--u)); }

  .auftakt-bild { display: block; position: absolute; z-index: 0; }

  /* Fenster-Stapel: Software- und Website-Screenshots */
  .auftakt-bild--stapel { right: calc(60 * var(--u)); top: calc(50% + var(--navi-h) / 2); width: calc(760 * var(--u)); height: calc(600 * var(--u)); translate: 0 -50%; }
  .ab-fenster {
    position: absolute; overflow: hidden; padding-top: calc(26 * var(--u));
    border-radius: calc(20 * var(--u)); background: hsl(var(--weiss));
    box-shadow: 0 calc(30 * var(--u)) calc(70 * var(--u)) hsl(218 62% 7% / .42);
    animation: ab-schweben 8s ease-in-out infinite;
  }
  .ab-fenster::before {
    content: ""; position: absolute; left: calc(16 * var(--u)); top: calc(9 * var(--u));
    width: calc(8 * var(--u)); aspect-ratio: 1; border-radius: 50%; background: hsl(var(--nacht) / .25);
    box-shadow: calc(14 * var(--u)) 0 hsl(var(--nacht) / .25), calc(28 * var(--u)) 0 hsl(var(--nacht) / .25);
  }
  .ab-fenster img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; }
  .ab-f3 { left: 0; top: 0; width: calc(440 * var(--u)); rotate: -6deg; animation-delay: -5s; }
  .ab-f2 { right: 0; top: calc(30 * var(--u)); width: calc(440 * var(--u)); rotate: 5deg; animation-delay: -2.5s; }
  .ab-f1 { left: calc(120 * var(--u)); bottom: 0; width: calc(540 * var(--u)); rotate: -1deg; }
  .ab-chip {
    position: absolute; right: calc(10 * var(--u)); bottom: calc(50 * var(--u));
    padding: .6em 1.1em; border-radius: 999px; white-space: nowrap;
    background: var(--color-akzent); color: hsl(var(--nacht));
    font-weight: 700; font-size: max(12px, calc(19 * var(--u)));
    box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) hsl(218 62% 7% / .35);
  }
  .seite--projekte .ab-chip { background: hsl(var(--nacht)); color: hsl(var(--weiss)); }

  /* Leuchtturm: Ablauf und Rechtliches */
  .auftakt-bild--turm { right: calc(90 * var(--u)); bottom: 0; width: calc(760 * var(--u)); height: calc(690 * var(--u)); }
  .auftakt-bild--turm::before { content: ""; position: absolute; right: calc(-60 * var(--u)); top: calc(-20 * var(--u)); width: calc(640 * var(--u)); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, hsl(var(--gold) / .22), transparent 66%); }
  .auftakt-bild--turm img { position: absolute; right: 0; bottom: 0; width: auto; height: 100%; }
  .ab-route {
    position: absolute; left: 0; top: 50%; translate: 0 -50%; margin: 0; padding: calc(30 * var(--u)) calc(36 * var(--u));
    display: grid; gap: calc(16 * var(--u)); list-style: none;
    border: 1px solid hsl(var(--weiss) / .16); border-radius: calc(28 * var(--u));
    background: hsl(218 62% 7% / .72); backdrop-filter: blur(10px);
    font-weight: 700; font-size: max(13px, calc(21 * var(--u)));
  }
  .ab-route li { display: flex; align-items: center; gap: .8em; }
  .ab-route b { font-family: var(--font-display); font-weight: 900; color: var(--seite-akzent); }

  /* Kontakt: direkte Wege statt Deko */
  .auftakt-bild--karte {
    right: calc(90 * var(--u)); top: calc(50% + var(--navi-h) / 2); translate: 0 -50%; width: calc(600 * var(--u));
    padding: calc(48 * var(--u)); border-radius: calc(44 * var(--u)); background: var(--color-akzent); color: hsl(var(--nacht));
    font-size: max(15px, calc(23 * var(--u))); line-height: 1.4;
  }
  .auftakt-bild--karte p { margin: calc(22 * var(--u)) 0 0; }
  .auftakt-bild--karte .ab-karte-titel { margin: 0 0 calc(22 * var(--u)); font-weight: 700; font-size: max(13px, calc(18 * var(--u))); letter-spacing: .04em; text-transform: uppercase; }
  .auftakt-bild--karte a { display: block; width: fit-content; font-family: var(--font-display); font-weight: 900; font-size: calc(36 * var(--u)); line-height: 1.3; letter-spacing: -0.03em; text-decoration: none; }
  .auftakt-bild--karte a:hover { text-decoration: underline; }
  .auftakt-bild--karte .ab-karte-zeit { font-weight: 700; }
}
@keyframes ab-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-10 * var(--u))); } }
@media (prefers-reduced-motion: reduce) { .ab-fenster { animation: none; } }