/* Webglanz – Aufbau und Bewegung nach cuberto.com, Fallstudien nach refokus.com (vermessen 29.09.2026).
   Farben aus der Webglanz-Palette (#133c55, #386fa4, #59a5d8, #84d2f6, #91e5f6), Schrift Geist statt Suisse Intl. */
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-var.woff2?v=9b6f5ff45b") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif.woff2?v=9e2f219693") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --tinte: #0c1a24;          /* Text (bei Cuberto Schwarz) */
  --nacht: #133c55;          /* dunkle Flächen und Pillen */
  --nacht-tief: #0b2638;
  --blau: #386fa4;
  --hell: #59a5d8;
  --himmel: #84d2f6;
  --eis: #91e5f6;
  --grau: #eef2f6;           /* helle Karten (Cuberto #eee) */
  --schiefer: #5b6b78;       /* nächste Karte im Stapel (Cuberto #595959) */
  --minze: #e3f3fa;          /* Zahlenkarten (Cuberto Minze) */
  --nebel: #eef3fa;          /* Zahlenkarten breit (Cuberto #f1f3fa) */
  --weiss: #fff;
  --weiss-70: rgb(255 255 255 / .7);
  --schrift: "Geist", system-ui, sans-serif;
  --rand: 108px;             /* Seitenrand (Cuberto) */
  --rand-schmal: 216px;      /* Rand der Inhaltsbereiche */
  --federn: cubic-bezier(.16, 1, .3, 1);
  --fuellen: cubic-bezier(.4, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--schrift); font-size: 18px; line-height: 25.2px; letter-spacing: .02em; color: var(--tinte); background: var(--weiss); -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 200; background: var(--weiss); padding: 8px 14px; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:focus-visible { outline: 3px solid var(--hell); outline-offset: 3px; }
.rahmen { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--rand); }
.rahmen-schmal { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--rand-schmal); }
.klein-gross { font-size: 14.4px; line-height: 18.72px; letter-spacing: 0; text-transform: uppercase; }

/* Pillen mit Füllung von unten beim Drüberfahren (Cuberto) */
.pille { --grund: var(--nacht); --text: var(--weiss); --fuell: var(--blau); --fuell-text: var(--weiss);
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 50px; padding: 0 25px; border: 0; border-radius: 99999px; background: var(--grund); color: var(--text);
  font-size: 18px; line-height: 18px; font-weight: 500; letter-spacing: 0; text-decoration: none; cursor: pointer; white-space: nowrap; }
.pille::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 100%; height: 100%; border-radius: 50% 50% 0 0;
  background: var(--fuell); transition: transform .5s var(--fuellen), border-radius .5s var(--fuellen); }
.pille span { transition: color .4s ease; }
.pille:hover::before, .pille:focus-visible::before { transform: translateY(-100%); border-radius: 0; }
.pille:hover span, .pille:focus-visible span { color: var(--fuell-text); }
.pille-hell { --grund: var(--weiss); --text: var(--nacht); --fuell: var(--nacht); --fuell-text: var(--weiss); }
.pille-umriss { --grund: transparent; --text: var(--weiss); --fuell: var(--weiss); --fuell-text: var(--nacht); height: auto; padding: 12.6px 18px; font-size: 21.6px; line-height: 21.6px; font-weight: 400; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); }
.pille-gross { height: auto; padding: 28.8px 50.4px; font-size: 21.6px; line-height: 21.6px; font-weight: 400; }
.pille-umriss-dunkel { --grund: transparent; --text: var(--tinte); --fuell: var(--nacht); --fuell-text: var(--weiss); box-shadow: inset 0 0 0 1px rgb(12 26 36 / .3); }

/* Kreis mit Pfeil (Cuberto „Explore“) */
.mehr { display: inline-flex; align-items: center; gap: 14.4px; text-decoration: none; }
.mehr i { width: 36px; height: 36px; border-radius: 50%; background: currentColor; display: grid; place-items: center; transition: transform .4s ease; }
.mehr i::before { content: ""; width: 12px; height: 12px; background: var(--kreis-pfeil, var(--weiss)); clip-path: polygon(20% 0, 100% 0, 100% 80%, 84% 80%, 84% 28%, 11% 100%, 0 89%, 72% 16%, 20% 16%); }
.mehr:hover i { transform: rotate(45deg); }

/* Kopfleiste: fest, verschwindet beim Runterscrollen, kommt beim Hochscrollen zurück */
.leiste { position: fixed; z-index: 95; top: 0; left: 0; right: 0; height: 72px; background: var(--weiss); transition: transform .5s var(--fuellen), background-color .3s ease; }
.leiste.ist-weg { transform: translateY(-100%); }
.leiste-innen { max-width: 1600px; height: 100%; margin-inline: auto; padding-inline: var(--rand); display: flex; align-items: center; gap: 45px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; font-size: 24px; line-height: 1; font-weight: 600; letter-spacing: -.02em; }
.logo img { width: 36px; height: auto; }
.menue { display: flex; margin-right: -18px; }
.menue a { position: relative; padding: 5px 18px; font-size: 18px; line-height: 21.6px; letter-spacing: 0; text-decoration: none; }
.menue a::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--fuellen); }
.menue a:hover::after, .menue a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.menue-knopf { display: none; }
main { padding-top: 72px; }

/* Brotkrumen */
.crumbs { max-width: 1600px; margin: 36px auto 0; padding-inline: var(--rand); font-size: 14.4px; letter-spacing: 0; display: flex; gap: 8px; color: var(--schiefer); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--tinte); }

/* Wörter gleiten einzeln hoch (Cuberto-Einblendung) */
.wort { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .02em .14em; margin: -.08em -.02em -.14em; }
.wort > span { display: inline-block; transform: translateY(110%); transition: transform 1.2s var(--federn); transition-delay: calc(var(--n, 0) * 35ms); }
.ist-da .wort > span, .ist-da.wort > span { transform: none; }
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .6s ease, transform 1.2s var(--federn); }
.reveal.ist-da { opacity: 1; transform: none; }

/* Start: Überschrift und Film */
/* Film läuft abgedunkelt im Hintergrund (Refokus), Schrift darüber weiß */
.start-kopf { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: center; justify-items: center; min-height: calc(100svh - 72px); padding: 108px var(--rand); text-align: center; color: var(--weiss); background: var(--nacht-tief); }
.start-film { position: absolute; inset: 0; z-index: -1; }
.start-film video { width: 100%; height: 100%; object-fit: cover; }
.start-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 38 56 / .86), rgb(11 38 56 / .74) 45%, rgb(11 38 56 / .9)); }
.film-knopf { position: absolute; right: var(--rand); bottom: 28px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(255 255 255 / .14); color: var(--weiss); cursor: pointer; transition: background-color .3s ease; }
.film-knopf:hover { background: rgb(255 255 255 / .26); }
.film-knopf svg { width: 16px; height: 16px; fill: currentColor; }
.film-knopf .spielen, .film-knopf[aria-pressed="true"] .anhalten { display: none; }
.film-knopf[aria-pressed="true"] .spielen { display: block; }
.start-kopf h1 { max-width: 90%; margin: 0 auto; font-size: 81px; line-height: 81px; font-weight: 500; letter-spacing: -.01em; }
.start-kopf p { max-width: 756px; margin: 28.8px auto 0; font-size: 21.6px; line-height: 25.92px; }
.start-knoepfe { margin-top: 36px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* Startbereich nach Vorgabe: Hinweis-Pille, Garantie-Zeile, nachmessbare Belege */
.start-flagge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 36px; padding: 6px 16px 6px 6px; border-radius: 99999px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); font-size: 16.2px; text-decoration: none; transition: box-shadow .3s ease; }
.start-flagge:hover { box-shadow: inset 0 0 0 1px var(--weiss); }
.start-flagge .tag { padding: 4px 12px; border-radius: 99999px; background: var(--weiss); color: var(--nacht); font-size: 12.6px; line-height: 16px; }
.start-kopf h1 em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--himmel); }
.start-kopf .pille { --grund: var(--weiss); --text: var(--nacht); --fuell: var(--himmel); --fuell-text: var(--nacht); }
.start-kopf .pille-umriss-dunkel { --grund: transparent; --text: var(--weiss); --fuell: var(--weiss); --fuell-text: var(--nacht); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); }
.pfeil-klein { width: 16px; height: 16px; margin-left: 4px; position: relative; }
.garantie { max-width: 640px; margin: 36px auto 0; font-size: 16.2px; line-height: 23px; color: var(--weiss-70); }
.garantie b { color: var(--weiss); font-weight: 500; }
.beweise { list-style: none; padding: 0; margin: 28px auto 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 36px; font-size: 16.2px; color: var(--weiss-70); }
.beweise li { display: inline-flex; align-items: center; gap: 8px; }
.beweise b { color: var(--weiss); font-weight: 500; }
.beweise svg { width: 18px; height: 18px; fill: none; stroke: var(--himmel); stroke-width: 1.7; }

/* Anfrage: Branche wählen (Vorgabe des Nutzers), in Cubertos Kartenform */
.anfrage { padding-top: 135px; padding-bottom: 135px; }
.anfrage .section-head { text-align: center; }
.anfrage .section-head p { margin-inline: auto; }
.anfrage .tag { margin-bottom: 18px; }
.lede { font-size: 21.6px; line-height: 27px; color: var(--schiefer); }
.quickstart { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.quickstart-item { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 190px; padding: 26px; border-radius: 18px; background: var(--nebel); font-size: 21.6px; line-height: 26px; text-decoration: none; transition: background-color .4s ease, color .4s ease, transform .6s var(--federn); }
.quickstart-item:hover, .quickstart-item:focus-visible { background: var(--nacht); color: var(--weiss); transform: translateY(-4px); }
.quickstart-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--weiss); display: grid; place-items: center; }
.quickstart-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--nacht); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.form-foot { margin-top: 28px; text-align: center; font-size: 16.2px; color: var(--schiefer); }

/* Kontaktseite: Anfrage links, direkter Kontakt rechts (Cuberto „Contacts“) */
.kontakt { padding: 72px 0 135px; }
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 108px; align-items: start; }
.kontakt-titel { font-size: 81px; line-height: 81px; font-weight: 500; letter-spacing: -.01em; }
.kontakt-lede { max-width: 620px; margin-top: 28.8px; font-size: 21.6px; line-height: 27px; color: var(--schiefer); }
.anfrage-form { margin-top: 72px; display: grid; gap: 44px; }
.frage { min-width: 0; margin: 0; padding: 0; border: 0; }
.frage > legend, .frage > label { display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 0; margin-bottom: 18px; font-size: 21.6px; line-height: 26px; }
.frage-nr { font-size: 14.4px; color: var(--blau); font-variant-numeric: tabular-nums; }
.frage-frei { margin-left: auto; font-size: 14.4px; color: var(--schiefer); }
.frage input[type="text"] { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid rgb(12 26 36 / .25); border-radius: 0; background: transparent; color: var(--tinte); font: inherit; font-size: 21.6px; }
.frage input::placeholder { color: rgb(12 26 36 / .35); }
.frage input:focus { outline: 0; border-bottom-color: var(--blau); }
.frage input[aria-invalid="true"] { border-bottom-color: #b3261e; }
.wahl { display: flex; flex-wrap: wrap; gap: 10px; }
.wahl label { position: relative; cursor: pointer; padding: 12.6px 20px; border-radius: 99999px; box-shadow: inset 0 0 0 1px rgb(12 26 36 / .25); font-size: 18px; line-height: 21.6px; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.wahl label:hover { box-shadow: inset 0 0 0 1px var(--nacht); }
.wahl input { position: absolute; opacity: 0; }
.wahl label:has(input:checked) { background: var(--nacht); color: var(--weiss); box-shadow: none; }
.wahl label:has(input:focus-visible) { outline: 3px solid var(--hell); outline-offset: 3px; }
.frage.ist-fehler .wahl label { box-shadow: inset 0 0 0 1px #b3261e; }
.anfrage-form .error { color: #b3261e; }
.anfrage-senden { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.anfrage-senden .submit { height: 58px; padding: 0 34px; }
.anfrage-senden .hint { max-width: 340px; text-align: left; color: var(--schiefer); }
.anfrage-senden .hint a { color: var(--tinte); }
.kontakt .done { margin: 72px 0 0; background: var(--nebel); }
.kontakt .done p { color: var(--schiefer); }
.kontakt-seite { display: grid; gap: 44px; padding-top: 14px; }
.kontakt-block { display: grid; gap: 12px; justify-items: start; padding-top: 22px; border-top: 1px solid rgb(12 26 36 / .15); }
.kontakt-block .klein-gross, .kontakt-block .leise { color: var(--schiefer); }
.kontakt-block .leise { font-size: 14.4px; line-height: 20px; }
.kontakt-tel { font-size: 40px; line-height: 44px; letter-spacing: -.02em; text-decoration: none; }
.kontakt-tel:hover { color: var(--blau); }
.orte-liste { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.orte-liste li { padding: 5px 12px; border-radius: 99999px; background: var(--nebel); font-size: 14.4px; }

/* Überblick: kleine Marke links, großer Text rechts (Cuberto „WHAT WE DO“) */
.ueberblick { padding-top: 107px; }
.ueberblick-innen { display: flex; }
.ueberblick .klein-gross { flex: 0 0 282px; }
.ueberblick-text { max-width: 624px; font-size: 23.04px; line-height: 29.95px; letter-spacing: .01em; }
.ueberblick-text > * + * { margin-top: 18px; }
.ueberblick-text h2 { font: inherit; }
.ueberblick-text a { text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Leistungen als Stapel: die aktive Karte ist dunkel und offen (Cuberto „FeatureSection“) */
.stapel { position: relative; margin-top: 108px; height: calc(var(--karten) * 38vh + 60vh); }
.stapel-innen { position: sticky; top: calc(50vh - 330px); display: grid; gap: 9px; }
.karte-l { position: relative; overflow: hidden; border-radius: 18px; padding: 54px; background: var(--grau); color: var(--tinte); transition: background-color .6s ease, color .6s ease; }
.karte-l-kopf { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 14.4px; }
.karte-l h3 { font-size: 37.8px; line-height: 41.58px; font-weight: 500; letter-spacing: 0; }
.karte-l-nr { font-size: 21.6px; line-height: 41.58px; opacity: .45; }
.karte-l-koerper { position: relative; z-index: 1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--federn); }
.karte-l-koerper > div { overflow: hidden; }
.karte-l-koerper p { max-width: 504px; margin-top: 28.8px; }
.karte-l-koerper ul { list-style: none; padding: 0; margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.karte-l-koerper li { padding: 6px 14px; border-radius: 99999px; box-shadow: inset 0 0 0 1px currentColor; font-size: 14.4px; opacity: .8; }
.karte-l .mehr { margin-top: 21.6px; }
.karte-l.ist-aktiv { background: var(--nacht); color: var(--weiss); --kreis-pfeil: var(--nacht); }
.karte-l.ist-aktiv .karte-l-koerper { grid-template-rows: 1fr; }
.karte-l.ist-naechste { background: var(--schiefer); color: rgb(255 255 255 / .55); }
.karte-l-bild { position: absolute; top: 0; right: 0; bottom: 0; width: 41%; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.karte-l.ist-aktiv .karte-l-bild { opacity: 1; }
.form-balken { background: repeating-linear-gradient(90deg, transparent 0 60px, rgb(255 255 255 / .12) 60px 61px), linear-gradient(180deg, transparent, var(--blau) 75%, var(--himmel)); -webkit-mask: linear-gradient(90deg, transparent, #000 25%); mask: linear-gradient(90deg, transparent, #000 25%); }
.form-dreieck { background: linear-gradient(180deg, transparent 35%, var(--blau)); clip-path: polygon(50% 18%, 100% 100%, 0 100%); }
.form-rahmen { background: radial-gradient(closest-side, transparent 55%, rgb(132 210 246 / .25) 56% 57%, transparent 58%) center / 140% 140%, radial-gradient(closest-side, transparent 38%, rgb(132 210 246 / .35) 39% 40%, transparent 41%) center / 140% 140%, radial-gradient(closest-side, var(--blau), transparent) center / 90% 90% no-repeat; }
.form-sechseck { background: linear-gradient(180deg, transparent 20%, rgb(89 165 216 / .55)); clip-path: polygon(50% 8%, 96% 32%, 96% 100%, 4% 100%, 4% 32%); }

/* Einsatzgebiet wie Cubertos Logo-Raster */
/* Orte nach digidop.com („Working worldwide“, vermessen 01.10.2026): zwei Karten mit gerahmter Grafik, Titel, Text, Textlink */
.orte { padding: 96px 0 168px; background: #f6f8fa; }
.orte + .dunkel.rund { z-index: 1; margin-top: -72px; }
.orte-titel { max-width: 1024px; margin: 0 auto; text-align: center; font-size: 48px; line-height: 48px; font-weight: 500; letter-spacing: -.02em; }
.orte-titel span { color: #95a1ab; }
.orte-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; }
.orte-karte { display: flex; flex-direction: column; }
.orte-bild { position: relative; overflow: hidden; aspect-ratio: 608 / 489; margin-bottom: 24px; padding: 2px; border: 6px solid var(--weiss); border-radius: 8px; background: var(--weiss); }
.orte-bild svg { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 8px; background: var(--nebel); }
.orte-punkte { fill: url(#punkte); }
#punkte circle { fill: rgb(19 60 85 / .13); }
.fluss { fill: none; stroke: #b9d9ef; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.fluss-klein { stroke-width: 4; }
.ringe circle { fill: none; stroke: rgb(19 60 85 / .16); stroke-width: 1.2; }
.ring-text text { font: 500 12px/1 var(--schrift); fill: var(--schiefer); paint-order: stroke; stroke: var(--nebel); stroke-width: 6px; }
.ort-pin { position: absolute; left: var(--x); top: var(--y); }
.ort-pin > i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: rgb(19 60 85 / .25); box-shadow: inset 0 0 0 5px rgb(255 255 255 / .9); }
.ort-pin.ist-sitz > i { background: var(--blau); }
.ort-pin > span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 6px; background: var(--weiss); box-shadow: 0 6px 18px rgb(19 60 85 / .12); font-size: 13px; line-height: 14px; font-weight: 500; white-space: nowrap; }
.ort-pin > span { position: absolute; }
.ort-pin.rechts > span { left: 14px; top: -14px; }
.ort-pin.links > span { right: 14px; top: -14px; }
.ort-pin.oben > span { left: -20px; bottom: 14px; }
.ort-pin.unten > span { left: -20px; top: 14px; }
.ort-pin b { padding: 2px 6px; border-radius: 4px; background: var(--nacht); color: var(--weiss); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.ort-pin.ist-mitte > span { left: 50%; transform: translateX(-50%); background: var(--nacht); color: var(--weiss); }
.orte-inhalt { display: flex; flex-direction: column; align-items: start; max-width: 480px; }
.orte-inhalt h3 { font-size: 32px; line-height: 35.2px; font-weight: 500; letter-spacing: -.02em; }
.orte-inhalt p { margin-top: 16px; font-size: 16px; line-height: 21.6px; color: var(--schiefer); }
.text-link { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; padding: 2px 0; font-size: 16px; line-height: 21.6px; font-weight: 500; text-decoration: none; }
.text-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--fuellen); }
.text-link:hover::after { transform: scaleX(1); }
.text-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .3s ease; }
.text-link:hover svg { transform: translateX(3px); }

/* Dunkle Bereiche mit runder Oberkante (Cuberto „-inverse“) */
.dunkel { position: relative; color: var(--weiss); background: var(--nacht); }
.dunkel.rund { border-radius: 72px 72px 0 0; margin-top: -1px; }
/* Heller Bereich schiebt sich mit runder Oberkante über den dunklen davor */
.hell-rund { position: relative; z-index: 1; background: var(--weiss); border-radius: 72px 72px 0 0; margin-top: -72px; }

/* Arbeiten: versetztes Zweierraster (Cuberto „Selected work“) */
.arbeiten { padding: 135px 0 180px; }
.arbeiten-kopf { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 90px; }
.arbeiten-kopf h2 { font-size: 72px; line-height: 79.2px; font-weight: 500; letter-spacing: -.03em; }
.arbeiten-kopf p { max-width: 380px; color: var(--weiss-70); }
.arbeiten-ende { margin-top: 90px; text-align: center; }

/* Startseite: Arbeiten als Projektliste nach refokus.com (vermessen 01.10.2026): Zeile füllt sich in Kundenfarbe und klappt drei Bilder auf */
.projekte { border-top: 1px solid rgb(255 255 255 / .15); }
.projekt { padding: 36px 0; border-bottom: 1px solid rgb(255 255 255 / .15); transition: background-color .6s cubic-bezier(.23, 1, .32, 1); }
.projekt.ist-offen { background: var(--kunde); }
.projekt-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; }
.projekt-titel { grid-column: 1 / span 4; display: flex; flex-direction: column; justify-content: space-between; align-items: start; gap: 24px; }
.projekt-titel h3 { font-size: 28px; line-height: 37.8px; font-weight: 500; letter-spacing: 0; }
.projekt-link { position: relative; display: inline-flex; align-items: center; gap: 12px; padding-bottom: 12px; font-size: 16px; line-height: 16px; text-decoration: none; opacity: 0; transition: opacity .4s ease; }
.projekt-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .5s var(--fuellen); }
.projekt-link:hover::after { transform: scaleX(0); }
.projekt-link svg { width: 18px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.projekt.ist-offen .projekt-link, .projekt-link:focus-visible { opacity: 1; }
.projekt-text { grid-column: 5 / span 4; font-size: 18px; line-height: 27px; }
.projekt-leistungen { grid-column: 10 / span 3; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.projekt-leistungen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.projekt-leistungen li, .projekt-ort { font-size: 12px; line-height: 14.4px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.projekt-bilder { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--federn); }
.projekt-bilder > div { min-height: 0; overflow: hidden; }
.projekt.ist-offen .projekt-bilder { grid-template-rows: 1fr; }
.projekt-bilder-reihe { display: grid; grid-template-columns: 640fr 348fr 348fr; gap: 16px; padding-top: 36px; }
.projekt-bilder-reihe img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 8px; }
.projekt-bilder-reihe img:first-child { height: auto; aspect-ratio: 16 / 9; }
/* Arbeiten nach rejouice.com/work „Full view“ (vermessen 02.10.2026): großer Satz unten links,
   dann je Projekt eine Bühne in Bildschirmhöhe, die beim Scrollen die vorige überdeckt */
/* Einstieg mit demselben Abstand wie alle Seitenköpfe; bildschirmhoch wie bei Rejouice wirkte ohne Bild wie eine Lücke */
main > section.rj-einstieg { padding: 108px var(--rand) 100px; }
.rj-einstieg h1, .rj-satz { max-width: 1320px; font-size: 62px; line-height: 67px; font-weight: 500; letter-spacing: -.02em; text-indent: 220px; }
main > section.rj-buehnen { padding: 0; }
/* Fragen sind echte Überschriften (für Google und KI-Suchen), sehen aber aus wie bisher */
summary > h3, summary > h4 { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
/* Autor und Stand unter Leistungsseiten und Preisen */
.stand { padding-block: 28px; font-size: 14px; line-height: 20px; color: var(--schiefer); }
/* Platzhalter für Bilder, Videos usw., die noch fehlen; der Nutzer entscheidet später. build.py warnt, solange einer drin ist. */
.platzhalter { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; border: 1.5px dashed rgb(12 26 36 / .3); border-radius: 12px; background: #eef2f6; color: var(--schiefer); text-align: center; }
.platzhalter strong { font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -.01em; color: var(--tinte); }
.platzhalter span { max-width: 380px; font-size: 14px; line-height: 19px; }
.platzhalter.dunkel { border-color: rgb(255 255 255 / .3); background: rgb(255 255 255 / .06); color: rgb(255 255 255 / .7); }
.platzhalter.dunkel strong { color: var(--weiss); }
/* Über mich nach rejouice.com/about (vermessen 03.10.2026): Grundsätze, Riesenwort mit Hochzahl, „One Founder“, schwarzer Teil */
main > section.ue-grund { min-height: 535px; padding: 0 var(--rand); }
.ue-zweispaltig { display: grid; grid-template-columns: 1fr 1fr; padding-top: 16px; border-top: 1px solid rgb(12 26 36 / .15); font-size: 16px; line-height: 20px; }
.ue-zweispaltig > p { max-width: 220px; }
.ue-zweispaltig ol { list-style: none; margin: 0; padding: 0; }
.ue-zweispaltig li { display: grid; grid-template-columns: 48px 1fr; margin-left: -48px; }
main > section.ue-riesig { padding: 0 var(--rand) 100px; }
.ue-wort { position: relative; padding-right: 72px; text-align: right; font-size: min(21vw, 330px); line-height: 1.1; font-weight: 500; letter-spacing: -.05em; }
.ue-wort sup { position: absolute; top: .45em; right: 0; font-size: 36px; line-height: 36px; letter-spacing: 0; vertical-align: baseline; }
.ue-riesig .ue-zweispaltig { font-size: 20px; line-height: 24px; }
main > section.ue-aussage { padding: 120px var(--rand) 0; }
main > section.ue-gruender { display: grid; grid-template-columns: 230px 555px minmax(0, 1fr); align-items: start; padding: 220px var(--rand); font-size: 20px; line-height: 26px; }
.ue-etikett { align-self: end; }
.ue-portraet { aspect-ratio: 555 / 696; }
main > section.ue-medien { padding: 120px var(--rand) 0; }
.ue-medien .platzhalter { aspect-ratio: 1360 / 766; }
.ue-portraet img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.ue-zitat { padding-left: 135px; }
.ue-zitat blockquote { max-width: 325px; }
.ue-zitat figcaption { margin-top: 24px; }
.ue-zitat figcaption span { display: block; color: rgb(12 26 36 / .5); }
.ue-zitat a { display: inline-block; margin-top: 20px; padding-block: 4px; text-underline-offset: 4px; }
main > section.ue-schwarz { display: grid; grid-template-columns: 1fr 1fr; padding: 200px var(--rand); background: var(--nacht-tief); color: var(--weiss); font-size: 20px; line-height: 26px; }
.ue-schwarz h2 { align-self: end; max-width: 440px; font-size: 62px; line-height: 67px; font-weight: 500; letter-spacing: -.02em; }
.ue-schwarz-text { display: grid; gap: 48px; max-width: 360px; }
.ue-schwarz h3 { margin-bottom: 24px; font-size: 20px; line-height: 24px; font-weight: 500; }
.ue-schwarz p { color: rgb(255 255 255 / .55); }
.ue-schwarz-bilder { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 120px; }
.ue-schwarz-bilder .platzhalter { aspect-ratio: 4 / 3; }
.rj-buehne { position: sticky; top: 0; display: block; height: 100vh; overflow: hidden; background: var(--kunde); color: var(--weiss); text-decoration: none; }
.rj-titel { position: absolute; z-index: 2; left: 0; right: 0; top: 100px; text-align: center; font-size: 62px; line-height: 67px; font-weight: 500; letter-spacing: -.02em; }
.rj-titel span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.rj-bild { position: absolute; left: 50%; bottom: -6%; width: min(62vw, 64vh * 1.6, 1000px); transform: translateX(-50%); }
.rj-rechner { display: block; width: 100%; height: auto; border-radius: 14px 14px 0 0; box-shadow: 0 40px 90px -30px rgb(0 0 0 / .55); transition: transform 1.2s var(--federn); }
.rj-handy { position: absolute; right: -9%; bottom: 14%; width: 25%; height: auto; border: 6px solid #1d1e21; border-radius: 30px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6); transition: transform 1.2s var(--federn); }
.rj-buehne:hover .rj-rechner { transform: translateY(-12px); }
.rj-buehne:hover .rj-handy { transform: translateY(-24px); }
.rj-meta, .rj-nr { position: absolute; z-index: 2; bottom: 30px; font-size: 16px; line-height: 18px; }
.rj-meta { left: var(--rand); }
.rj-nr { right: 28px; }
/* Abschluss nach refokus.com (Kacheln „Start a Project“, vermessen 03.10.2026): kleine dunkle Kachel + große Kachel in der Markenfarbe */
main > section.rf-abschluss { display: grid; grid-template-columns: 410fr 955fr; gap: 3px; padding: 36px; }
.rf-kachel { display: flex; flex-direction: column; justify-content: space-between; min-height: 482px; padding: 24px 20px; border-radius: 8px; color: var(--weiss); text-decoration: none; transition: background-color .4s ease; }
.rf-klein { background: var(--nacht); }
.rf-gross { background: var(--blau); }
.rf-klein:hover { background: #18496a; }
.rf-gross:hover { background: #3f7ab3; }
.rf-ueber { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 12px; line-height: 14.4px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.rf-ueber svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .4s var(--federn); }
.rf-kachel:hover .rf-ueber svg { transform: translate(3px, -3px); }
.rf-titel-klein { max-width: 370px; margin-top: 24px; margin-bottom: auto; font-size: 36.8px; line-height: 40.5px; font-weight: 500; letter-spacing: -.02em; }
.rf-klein p { max-width: 370px; font-size: 14px; line-height: 18.3px; }
.rf-unten { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.rf-titel-gross { font-size: 88px; line-height: 88px; font-weight: 500; letter-spacing: -.02em; }
.rf-link { position: relative; flex: none; padding-bottom: 12px; font-size: 18px; line-height: 27px; }
.rf-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .5s var(--fuellen); }
.rf-gross:hover .rf-link::after { transform: scaleX(.4); }

/* Notizzettel (Cuberto „Trusted by our clients“), hier für die Studienzahlen */
.zettel-bereich { padding: 135px 0 90px; overflow: hidden; }
.zettel-bereich h2 { text-align: center; font-size: 72px; line-height: 79.2px; font-weight: 500; letter-spacing: -.03em; }
.zettel-bereich > .rahmen > p { max-width: 640px; margin: 24px auto 0; text-align: center; font-size: 18px; color: var(--schiefer); }
.zettel { position: relative; height: 480px; max-width: 1060px; margin: 72px auto 0; }
.zettel-karte { position: absolute; width: 300px; min-height: 300px; padding: 36px 30px; background: var(--minze); box-shadow: 0 20px 40px rgb(12 26 36 / .08); transition: transform 1s var(--federn); }
.zettel-karte:nth-child(2) { background: var(--nebel); }
.zettel-karte .zahl { display: block; font-size: 64px; line-height: 64px; font-weight: 500; letter-spacing: -.03em; color: var(--nacht); }
.zettel-karte p { margin-top: 20px; font-size: 21.6px; line-height: 27px; }
.zettel-karte:nth-child(1) { left: 20px; top: 70px; transform: rotate(-7deg); }
.zettel-karte:nth-child(2) { left: calc(50% - 150px); top: 0; transform: rotate(3deg); z-index: 1; }
.zettel-karte:nth-child(3) { right: 20px; top: 110px; transform: rotate(8deg); }
.zettel-karte:hover { transform: rotate(0) translateY(-8px); z-index: 2; }
.quelle { display: block; margin-top: 18px; font-size: 13px; line-height: 18px; letter-spacing: 0; color: var(--schiefer); }
.quelle a { color: inherit; }

/* Zahlenkarten (Cuberto „WHY CUBERTO“) */
.zahlen { margin-top: 90px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; }
.zahl-karte { grid-column: span 2; min-height: 236px; padding: 30px; border-radius: 14px; background: var(--minze); display: flex; flex-direction: column; }
.zahl-karte:nth-child(n+4) { grid-column: span 3; background: var(--nebel); }
.zahl-karte svg { width: 22px; height: 22px; stroke: var(--nacht); fill: none; stroke-width: 1.6; }
.zahl-karte .wert { margin-top: auto; font-size: 58px; line-height: 58px; font-weight: 400; letter-spacing: -.03em; }
.zahl-karte .wert small { font-size: 23px; letter-spacing: 0; }
.zahl-karte .was { margin-top: 12px; font-size: 12px; line-height: 15px; text-transform: uppercase; letter-spacing: .02em; }
.zahl-karte p { margin-top: 10px; font-size: 16.2px; line-height: 22.68px; color: var(--schiefer); }

/* Ablauf wie Cubertos „Insights“ */
/* Ablauf nach edgarallan.com (Prozess-Abschnitt, vermessen 01.10.2026): Schrittfolge mit Pfeilen, Kasten mit Reitern */
.ablauf { padding: 148px 0 164px; background: var(--nebel); }
.ablauf + .dunkel.rund { z-index: 1; margin-top: -72px; }
.abschnitt-marke { display: flex; align-items: center; gap: 8px; margin: 0 0 24px; font-size: 16px; line-height: 20.8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blau); }
.abschnitt-marke::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: currentColor; }
.ablauf-folge { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; font-size: 48px; line-height: 48px; font-weight: 500; letter-spacing: -.02em; }
.ablauf-folge i { font-style: normal; font-size: 22px; line-height: 22px; font-weight: 400; letter-spacing: 0; color: var(--schiefer); }
.ablauf-text { max-width: 680px; margin: 24px 0 12px; font-size: 16px; line-height: 27.2px; color: var(--schiefer); }
.ablauf-text a { color: var(--tinte); white-space: nowrap; }
.reiter { display: flex; flex-direction: column; margin-top: 52px; overflow: hidden; border: 1px solid rgb(12 26 36 / .12); border-radius: 20px; background: var(--weiss); }
.reiter-leiste { display: grid; grid-template-columns: repeat(5, 1fr); box-shadow: inset 0 -1px 0 rgb(12 26 36 / .1); }
.reiter-knopf { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 28px; border: 0; background: #e2e9f2; text-align: left; cursor: pointer; box-shadow: inset -1px 0 0 rgb(12 26 36 / .08); transition: background-color .3s ease; }
.reiter-knopf:last-child { box-shadow: none; }
.reiter-knopf:hover { background: #ebf0f6; }
.reiter-knopf[aria-selected="true"] { background: var(--weiss); }
.reiter-knopf[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--blau); }
.reiter-knopf:focus-visible { outline-offset: -3px; }
.reiter-nr { font-size: 11px; line-height: 14.3px; font-weight: 600; letter-spacing: .1em; color: var(--schiefer); }
.reiter-name { font-size: 16px; line-height: 20.8px; font-weight: 600; letter-spacing: -.01em; color: rgb(12 26 36 / .7); }
.reiter-knopf[aria-selected="true"] .reiter-nr { color: var(--blau); }
.reiter-knopf[aria-selected="true"] .reiter-name { color: var(--tinte); }
.reiter-feld { display: grid; grid-template-columns: 1fr 1fr; min-height: 388px; }
.reiter-feld[hidden] { display: none; }
.reiter-text { display: flex; flex-direction: column; padding: 56px 52px; }
.reiter-schritt { margin: 0 0 14px; font-size: 16px; line-height: 20.8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blau); }
.reiter-text h3 { margin: 0 0 16px; font-size: 28px; line-height: 32.2px; font-weight: 500; letter-spacing: -.02em; }
.reiter-text p:not(.reiter-schritt) { margin: 0 0 28px; font-size: 16px; line-height: 27.52px; color: var(--schiefer); }
.reiter-text ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.reiter-text li { display: flex; gap: 10px; font-size: 16px; line-height: 20.8px; color: var(--schiefer); }
.reiter-text li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--blau); }
.reiter-bild { display: flex; align-items: center; justify-content: center; padding: 48px; background: #e4eef8; }
.mini-karte { width: min(100%, 400px); padding: 24px; border-radius: 16px; background: var(--weiss); box-shadow: 0 12px 32px rgb(19 60 85 / .1); font-size: 14px; line-height: 18.2px; }
.mini-titel { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: 16px; font-weight: 600; }
.mini-titel span { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--schiefer); }
.mini-zeile { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgb(12 26 36 / .08); color: var(--tinte); }
.mini-zeile svg { flex: none; width: 16px; height: 16px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mini-zeile.ok svg { stroke: var(--blau); }
.mini-zeile.nein svg { stroke: #b3261e; }
.mini-preis { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: var(--nacht); color: var(--weiss); font-size: 20px; line-height: 24px; font-weight: 600; }
.mini-preis span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--weiss-70); }
.mini-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.mini-chips span { padding: 6px 12px; border-radius: 99999px; background: var(--nebel); font-size: 13px; }
.mini-adresse { display: flex; align-items: center; gap: 6px; }
.mini-adresse i { width: 8px; height: 8px; border-radius: 50%; background: rgb(12 26 36 / .15); }
.mini-adresse span { flex: 1; margin-left: 8px; padding: 6px 10px; border-radius: 8px; background: var(--nebel); font-size: 12.6px; color: var(--schiefer); }
.mini-status { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 8px; padding: 4px 12px 4px 10px; border-radius: 99999px; background: #e3f5e9; color: #1d6b3b; font-size: 13px; font-weight: 600; }
.mini-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2eb35a; }
.reiter-handys { gap: 20px; }
.reiter-handys img { width: auto; height: 292px; border-radius: 18px; box-shadow: 0 20px 40px rgb(19 60 85 / .18); }
.reiter-handys img + img { transform: translateY(24px); }

/* Check-Seite: alle 21 Punkte in vier Reitern, gleicher Aufbau wie der Ablauf (edgarallan.com) */
.reiter-leiste.reiter-vier { grid-template-columns: repeat(4, 1fr); }
.punkte-feld { grid-template-columns: 1fr; min-height: 0; }
.punkte-feld .reiter-text { padding-bottom: 0; }
.punkte-feld .reiter-text h3 { max-width: 760px; }
.punkte-liste { list-style: none; margin: 0; padding: 0 52px 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.punkte-liste li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 20px 0; border-top: 1px solid rgb(12 26 36 / .1); }
.punkte-liste .punkt-nr { font-size: 14px; line-height: 24px; font-weight: 600; color: var(--blau); }
.punkte-liste h4 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: -.01em; }
.punkte-liste p { margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--schiefer); }
.punkte-liste .punkt-warum { font-size: 13.5px; line-height: 19px; }
.punkt-quelle { font-style: italic; }
.punkte-hinweis { max-width: 760px; margin-top: 24px; font-size: 13.5px; line-height: 19px; color: var(--schiefer); }

/* Leistungsseiten nach edgarallan.com (Leistungsseite AEO, vermessen 02.10.2026): blauer Kopf mit Beispiel-Karte,
   Zahlenband, Warum mit dunkler Karte, Aussage, vier Dinge auf Blau, „Richtig hier, wenn“, Aufruf-Karte, Fragen */
.lk-kopf { padding: 100px 0 56px; background: var(--blau); color: var(--weiss); }
.lk-frage { margin: 0 0 16px; font-size: 21.6px; line-height: 27px; font-weight: 400; color: rgb(255 255 255 / .75); }
.lk-kopf-satz { max-width: 1120px; font-size: 81px; line-height: 81px; font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
.lk-kopf-satz em { font-style: normal; color: var(--eis); }
.lk-kopf-unten { display: flex; align-items: flex-start; gap: 140px; margin-top: 48px; }
.lk-kopf-text { flex: 0 0 452px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.lk-kopf-text p { font-size: 20px; line-height: 34px; }
.lk-kopf .btn { --grund: var(--weiss); --text: var(--blau); --fuell: var(--nacht); --fuell-text: var(--weiss); }
.lk-kopf-karte { flex: 1; min-width: 0; }
.lk-beispiel { flex: none; padding: 4px 10px; border-radius: 99999px; background: var(--nebel); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--schiefer); }

/* Weiße Beispiel-Karte im Kopf; darin Google-Profil (g-*), Zeitplan, Bewerbung oder Fototermin */
.lk-karte { padding: 32px; border-radius: 24px; background: var(--weiss); color: var(--tinte); box-shadow: 0 30px 60px -30px rgb(11 38 56 / .55); font-size: 15px; line-height: 21px; }
.g-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.g-name { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.02em; }
.g-sterne { margin-top: 6px; color: var(--schiefer); }
.g-sterne b { font-weight: 600; color: var(--tinte); }
.sterne { color: #f4b400; letter-spacing: 1px; }
.sterne i { font-style: normal; color: rgb(12 26 36 / .18); }
.g-knoepfe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 22px 0 6px; padding-bottom: 18px; border-bottom: 1px solid rgb(12 26 36 / .1); }
.g-knoepfe span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; color: var(--blau); }
.g-knoepfe svg { width: 40px; height: 40px; padding: 10px; border: 1px solid rgb(12 26 36 / .15); border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.g-angaben { list-style: none; margin: 0; padding: 0; }
.g-angaben li { display: flex; align-items: center; gap: 14px; padding: 9px 0; }
.g-angaben svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--schiefer); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.g-offen { font-weight: 600; color: #1d7a43; }
.g-verteilung { display: grid; gap: 7px; margin-top: 12px; padding-top: 18px; border-top: 1px solid rgb(12 26 36 / .1); }
.g-verteilung div { display: grid; grid-template-columns: 12px 1fr; align-items: center; gap: 10px; font-size: 12px; line-height: 12px; color: var(--schiefer); }
.g-verteilung i { height: 8px; border-radius: 8px; background: linear-gradient(90deg, #f4b400 var(--anteil), var(--nebel) var(--anteil)); }
.lk-karte .mini-titel { margin-bottom: 4px; font-size: 20px; line-height: 26px; }
.lk-karte .mini-zeile { padding: 12px 0; }
.lk-karte .mini-chips .an { background: var(--blau); color: var(--weiss); }
.lk-gross { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 14px; font-size: 83px; line-height: 83px; font-weight: 500; letter-spacing: -.03em; color: var(--blau); }
.lk-gross small { font-size: 18px; line-height: 22px; font-weight: 500; letter-spacing: 0; color: var(--schiefer); }
.lk-reihe { padding: 14px 0; border-top: 1px solid rgb(12 26 36 / .08); }
.lk-reihe-kopf { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 18px; }
.lk-reihe-kopf b { font-weight: 600; color: var(--blau); }
.lk-reihe i { display: block; height: 4px; margin-top: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--blau) var(--anteil), rgb(12 26 36 / .08) var(--anteil)); }
.lk-stelle { margin: 6px 0 4px; font-size: 34px; line-height: 40px; font-weight: 500; letter-spacing: -.02em; }
.lk-stelle + .lk-notiz { margin-top: 0; }
.lk-notiz { margin-top: 14px; font-size: 13px; line-height: 18px; color: var(--schiefer); }
.lk-feld { margin-top: 12px; }
.lk-feld span { display: block; font-size: 12px; line-height: 16px; color: var(--schiefer); }
.lk-feld div { margin-top: 4px; padding: 10px 12px; border: 1px solid rgb(12 26 36 / .15); border-radius: 10px; font-size: 15px; line-height: 20px; color: rgb(12 26 36 / .4); }
.lk-mock-knopf { display: block; margin-top: 16px; padding: 12px; border-radius: 99999px; background: var(--blau); color: var(--weiss); text-align: center; font-weight: 600; }

/* Zahlenband: drei große Zahlen, Linien dazwischen */
.lk-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0; background: var(--weiss); border-bottom: 1px solid rgb(12 26 36 / .1); }
.lk-zahl { padding: 64px 56px; }
.lk-zahl:first-child { padding-left: var(--rand); }
.lk-zahl:last-child { padding-right: var(--rand); }
.lk-zahl + .lk-zahl { border-left: 1px solid rgb(12 26 36 / .1); }
.lk-zahl strong { display: block; font-size: 120px; line-height: 120px; font-weight: 500; letter-spacing: -.03em; color: var(--blau); }
.lk-zahl p { max-width: 260px; margin-top: 12px; font-size: 16px; line-height: 26.4px; color: var(--schiefer); }

/* helle Abschnitte: Warum, Aussage, Richtig hier, Aufruf, Fragen */
.lk-hell { padding: 0; background: var(--nebel); }
.lk-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; padding-block: 120px; }
.lk-links { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.lk-links .abschnitt-marke { margin: 0; }
.lk-titel { font-size: 50.4px; line-height: 54.4px; font-weight: 500; letter-spacing: -.02em; }
.lk-links > p:not(.abschnitt-marke) { max-width: 480px; font-size: 18px; line-height: 29.7px; color: var(--schiefer); }
.lk-links .btn { margin-top: 12px; }
.lk-klebt { position: sticky; top: 120px; }

/* dunkle Karte neben „Warum“ */
.lk-dunkel-karte { padding: 36px; border: 1px solid rgb(255 255 255 / .1); border-radius: 20px; background: var(--nacht-tief); color: var(--weiss); }
.lk-dk-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.lk-dk-marke { font-size: 12px; line-height: 15.6px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .45); }
.lk-dunkel-karte .lk-beispiel { background: rgb(132 210 246 / .15); color: var(--himmel); }
.lk-dk-suche { display: flex; align-items: center; gap: 14px; margin: 18px 0 26px; padding-bottom: 26px; border-bottom: 1px solid rgb(255 255 255 / .1); font-size: 34px; line-height: 40px; font-weight: 500; letter-spacing: -.03em; color: var(--himmel); }
.lk-dk-suche svg { flex: none; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lk-dk-zeile { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgb(255 255 255 / .08); }
.lk-dk-zeile b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; }
.lk-dk-zeile small { display: block; margin-top: 4px; font-size: 13px; line-height: 17px; color: rgb(255 255 255 / .55); }
.lk-dk-zeile .sterne i { color: rgb(255 255 255 / .2); }
.lk-dk-status { flex: none; padding: 4px 10px; border-radius: 99999px; font-size: 12px; line-height: 16px; font-weight: 600; }
.lk-dk-status.gut { background: rgb(46 179 90 / .18); color: #7fdc9f; }
.lk-dk-status.schlecht { background: rgb(232 163 32 / .16); color: #f0b74a; }
.lk-dk-zeile.ihr { position: relative; }
.lk-dunkel-karte .lk-gross { margin-top: 18px; color: var(--himmel); }
.lk-dunkel-karte .lk-gross small { color: rgb(255 255 255 / .55); }
.lk-dunkel-karte .lk-reihe { border-color: rgb(255 255 255 / .08); }
.lk-dunkel-karte .lk-reihe-kopf { color: rgb(255 255 255 / .6); }
.lk-dunkel-karte .lk-reihe-kopf b { color: var(--himmel); }
.lk-dunkel-karte .lk-reihe i { background: linear-gradient(90deg, var(--himmel) var(--anteil), rgb(255 255 255 / .08) var(--anteil)); }
.lk-dunkel-karte .lk-reihe.warn i { background: linear-gradient(90deg, #e8a320 var(--anteil), rgb(255 255 255 / .08) var(--anteil)); }
.lk-dunkel-karte .lk-reihe.warn b { color: #f0b74a; }
.lk-dk-zeile.ihr::before { content: ""; position: absolute; left: -36px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--himmel); }

/* Aussage: großer Satz, zweite Hälfte in Blau */
.lk-aussage { padding: 120px 80px; }
.lk-aussage-vor { max-width: 600px; margin-bottom: 52px; font-size: 23px; line-height: 38px; color: var(--schiefer); }
.lk-aussage-satz { font-size: 80px; line-height: 104px; font-weight: 500; letter-spacing: -.02em; }
.lk-aussage-satz em { font-style: normal; color: var(--blau); }

/* Vier Dinge auf Blau */
.lk-vier { padding: 120px 0; background: var(--blau); color: var(--weiss); }
.lk-vier .abschnitt-marke { margin-bottom: 16px; color: rgb(255 255 255 / .65); }
.lk-vier .lk-titel { max-width: 608px; font-size: 57.6px; line-height: 60.5px; }
.lk-vier-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 72px; }
.lk-ding { display: flex; flex-direction: column; padding: 40px 32px; border-radius: 4px; background: rgb(255 255 255 / .07); }
.lk-ding svg { width: 98px; height: 98px; margin-bottom: 44px; padding: 16px; border-radius: 20px; background: rgb(255 255 255 / .1); fill: none; stroke: var(--weiss); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.lk-ding h3 { margin-bottom: 14px; font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: -.01em; }
.lk-ding p { font-size: 15px; line-height: 24px; color: rgb(255 255 255 / .85); }

/* Richtig hier, wenn: Haken-Liste */
.lk-richtig .lk-titel { max-width: 494px; font-size: 54px; line-height: 58.3px; }
.lk-liste { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgb(12 26 36 / .12); }
.lk-liste li { display: flex; gap: 16px; padding: 24px 0; border-top: 1px solid rgb(12 26 36 / .12); font-size: 16px; line-height: 24.8px; }
.lk-liste li::before { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9 14.5l3.2 3.2L19 10.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px no-repeat; }

/* Aufruf-Karte in Blau mit zwei Kreisen */
.lk-aufruf-karte { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 48px; padding: 80px; border-radius: 24px; background: var(--blau); color: var(--weiss); }
.lk-aufruf-karte::before, .lk-aufruf-karte::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
.lk-aufruf-karte::before { right: -80px; top: -80px; width: 320px; height: 320px; background: rgb(255 255 255 / .06); }
.lk-aufruf-karte::after { right: 200px; bottom: -60px; width: 200px; height: 200px; background: rgb(255 255 255 / .04); }
.lk-aufruf-karte h2 { max-width: 600px; font-size: 50px; line-height: 55px; font-weight: 500; letter-spacing: -.02em; }
.lk-aufruf-karte p { max-width: 600px; margin-top: 12px; font-size: 16px; line-height: 25.6px; color: rgb(255 255 255 / .8); }

/* Fragen: Titel links klebt, Fragen rechts mit Plus im Kreis */
.lk-fragen { grid-template-columns: 5fr 8fr; gap: 80px; }
.lk-fragen .lk-titel { font-size: 50px; line-height: 55px; }
.lk-fragen .lk-links > p:not(.abschnitt-marke) { font-size: 16px; line-height: 26.4px; }
.lk-fragen-liste details { border-top: 1px solid rgb(12 26 36 / .12); }
.lk-fragen-liste details:last-child { border-bottom: 1px solid rgb(12 26 36 / .12); }
.lk-fragen-liste summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 48px 0; font-size: 16px; line-height: 20.8px; font-weight: 500; }
.lk-fragen-liste summary::-webkit-details-marker { display: none; }
.lk-fragen-liste summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e2ebf5; color: var(--blau); font-size: 18px; font-weight: 400; transition: transform .4s var(--federn); }
.lk-fragen-liste details[open] summary { padding-bottom: 16px; }
.lk-fragen-liste details[open] summary::after { transform: rotate(45deg); }
.lk-fragen-liste details p { max-width: 640px; padding-bottom: 40px; font-size: 16px; line-height: 26.4px; color: var(--schiefer); }
.lk-fragen-liste a { color: var(--tinte); }

/* Preise nach sketch.com/pricing (vermessen 02.10.2026): Serifen-Titel, Paket-Karten halb auf einem
   Verlaufsfeld, „In jedem Paket enthalten“, breite Karten für die Betreuung, Vergleichstabelle, Fragen nach Themen */
.sk-titel { font-weight: 500; letter-spacing: -.02em; }
main > section.sk-kopf { padding: 96px 0 0; background: linear-gradient(180deg, var(--weiss) 0%, #f2f7fc 100%); }
.sk-kopf h1 { font-size: 81px; line-height: 81px; letter-spacing: -.01em; }
.sk-kopf .sk-lead { max-width: 700px; margin-top: 28.8px; font-size: 21.6px; line-height: 27px; color: var(--schiefer); }
.sk-feld { position: relative; margin: 81px calc(var(--rand) * -1 + 32px) 0; padding: 0 calc(var(--rand) - 32px) 68px; }
.sk-feld::before { content: ""; position: absolute; z-index: 0; inset: 48px 0 0; border-radius: 56px 56px 68px 68px; background: linear-gradient(100deg, #dcedf9 0%, #e9f1fa 50%, #e6e9f8 100%); }
.sk-karten { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.sk-karte { position: relative; display: flex; flex-direction: column; padding: 36px; border-radius: 28px; background: rgb(255 255 255 / .92); box-shadow: 0 0 1px rgb(19 60 85 / .25), 0 8px 24px -8px rgb(19 60 85 / .12); }
.sk-karte h2 { font-size: 32px; line-height: 40px; }
.sk-abzeichen { position: absolute; top: -16px; left: 36px; padding: 7px 14px; border-radius: 99999px; background: var(--tinte); color: var(--weiss); font-size: 13px; line-height: 15px; font-weight: 500; }
.sk-was { min-height: 39px; margin-top: 12px; font-size: 15px; line-height: 19.5px; color: rgb(12 26 36 / .8); }
.sk-preis { display: flex; align-items: flex-start; gap: 4px; margin-top: 30px; font-size: 76px; line-height: 76px; letter-spacing: -.02em; }
.sk-preis small { margin-top: 6px; font-size: 24px; line-height: 24px; }
.sk-hinweis { margin-top: 4px; font-size: 12px; line-height: 14.4px; color: rgb(12 26 36 / .64); }
.sk-liste { list-style: none; margin: 24px 0 0; padding: 0; display: grid; align-content: start; gap: 10px; }
.sk-liste li { display: grid; grid-template-columns: 24px 1fr; gap: 6px; font-size: 15px; line-height: 24px; }
.sk-liste li::before { content: ""; width: 24px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1a24' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='7.25'/%3E%3Cpath d='M9 12.2l2 2 4-4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; }
.sk-liste li.nein { color: rgb(12 26 36 / .5); }
.sk-liste li.nein::before { opacity: .45; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1a24' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='7.25'/%3E%3Cpath d='M9.5 9.5l5 5m0-5l-5 5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.sk-knopf { display: flex; justify-content: center; align-items: center; height: 47px; margin-top: auto; padding: 0 24px; border-radius: 24px; background: #151515; color: var(--weiss); font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: none; box-shadow: inset 0 1px 1px rgb(255 255 255 / .15), 0 2px 6px rgb(0 0 0 / .2); transition: background-color .3s ease; }
.sk-knopf:hover { background: var(--nacht); }
.sk-karte .sk-liste { margin-bottom: 36px; }
.sk-nebenlink { margin-top: 12px; text-align: center; font-size: 13px; line-height: 16px; }
.sk-nebenlink a { display: inline-block; padding-block: 4px; margin-block: -4px; text-underline-offset: 3px; }
.sk-enthalten { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 60px; padding: 0 48px; }
.sk-enthalten h2 { font-size: 24px; line-height: 32px; }
.sk-enthalten h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0; }
.sk-enthalten h3 svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sk-enthalten p { margin-top: 8px; font-size: 15px; line-height: 20px; color: rgb(12 26 36 / .64); }
.sk-danach { padding-top: 64px; }
.sk-danach > p { margin: 0 0 20px 68px; font-size: 14px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: rgb(12 26 36 / .55); }
.sk-breit { display: grid; grid-template-columns: 236px 1fr 1fr 236px; gap: 20px 40px; margin-top: 20px; padding: 56px 68px 64px; border-radius: 56px; background: rgb(255 255 255 / .6); box-shadow: 0 0 1px rgb(19 60 85 / .3), 0 12px 32px -12px rgb(19 60 85 / .12); }
.sk-breit h2 { grid-column: 1 / -1; font-size: 32px; line-height: 40px; }
.sk-breit .sk-text { font-size: 16px; line-height: 24px; }
.sk-breit .sk-text strong { display: block; margin-top: 24px; font-weight: 600; }
.sk-breit .sk-liste { margin: 0; }
.sk-breit .sk-preis { margin-top: 0; font-size: 56px; line-height: 56px; }
.sk-breit .sk-hinweis { margin: 8px 0 44px; }
.sk-breit .sk-knopf { margin-top: 0; }
main > section.sk-vergleich { padding-top: 128px; }
.sk-vergleich h2.sk-titel { font-size: 48px; line-height: 52px; }
.sk-tabelle { width: 100%; margin-top: 40px; border-collapse: collapse; table-layout: fixed; }
.sk-tabelle col.sk-spalte-name { width: 22%; }
.sk-tabelle thead th { position: sticky; top: 0; z-index: 1; padding: 20px 8px 24px; background: var(--weiss); text-align: center; font-weight: 400; vertical-align: top; }
.sk-tabelle thead th .sk-titel { display: block; font-size: 32px; line-height: 40px; }
.sk-tabelle thead th small { display: block; margin-top: 4px; font-size: 13px; line-height: 16px; color: rgb(12 26 36 / .64); }
.sk-tabelle tbody th[colspan] { padding: 40px 0 8px; text-align: left; font-size: 17px; line-height: 24px; font-weight: 500; }
.sk-tabelle tbody th[scope="row"] { padding: 6px 0; text-align: left; font-size: 16px; line-height: 24px; font-weight: 500; }
.sk-tabelle td { padding: 6px 8px; text-align: center; font-size: 15px; line-height: 24px; }
.sk-ja, .sk-nein { display: inline-block; width: 24px; height: 24px; vertical-align: middle; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1a24' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='7.25'/%3E%3Cpath d='M9 12.2l2 2 4-4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; }
.sk-nein { width: 16px; height: 1px; background: rgb(12 26 36 / .35); }
.sk-notiz { display: flex; align-items: center; gap: 20px; margin-top: 72px; padding: 28px 36px; border-radius: 28px; background: var(--grau); }
.sk-notiz strong { flex: none; font-size: 44px; line-height: 44px; font-weight: 400; color: var(--blau); }
.sk-notiz p { font-size: 16px; line-height: 24px; }
.sk-notiz .src { display: inline; margin: 0 0 0 6px; }
main > section.sk-fragen { display: grid; grid-template-columns: 292px 1fr; gap: 128px; padding-top: 128px; padding-bottom: 80px; }
.sk-fragen h2.sk-titel { font-size: 48px; line-height: 52px; }
.sk-gruppe + .sk-gruppe { margin-top: 60px; }
.sk-gruppe h3 { font-size: 14px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: rgb(12 26 36 / .55); }
.sk-gruppe details { border-bottom: 1px solid rgb(12 26 36 / .12); }
.sk-gruppe summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; font-size: 18px; line-height: 28px; font-weight: 500; }
.sk-gruppe summary::-webkit-details-marker { display: none; }
.sk-gruppe summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform .4s var(--federn); }
.sk-gruppe details[open] summary::after { transform: rotate(45deg); }
.sk-gruppe details p { max-width: 680px; padding-bottom: 24px; font-size: 16px; line-height: 25px; color: rgb(12 26 36 / .75); }

/* Ablauf nach digidop.com/services/webdesign (vermessen 03.10.2026): Titel mittig mit grauem Ende, Schritte mit
   klebendem Text links, großer Bildfläche rechts und Zähler, dunkles Band mit zwei Zahlen, Fragen als dunkle Kacheln */
main > section.dd-kopf { padding: 96px 0 0; background: #f6f8fa; }
.dd-kopf-innen { max-width: 1100px; margin: 0 auto; padding-bottom: 64px; border-bottom: 1px solid rgb(12 26 36 / .12); text-align: center; }
.dd-titel { font-size: 48px; line-height: 48px; font-weight: 500; letter-spacing: -.02em; }
.dd-kopf h1 { font-size: 81px; line-height: 81px; font-weight: 500; letter-spacing: -.01em; }
.dd-kopf h1 span, .dd-titel span { color: #8f9aa3; }
.dd-kopf p { max-width: 756px; margin: 28.8px auto 0; font-size: 21.6px; line-height: 27px; color: var(--schiefer); }
main > section.dd-schritte { padding: 96px 0 120px; background: #f6f8fa; }
.dd-schritt { display: grid; grid-template-columns: 80px 382px minmax(0, 1fr) 54px; align-items: start; }
.dd-schritt + .dd-schritt { margin-top: 48px; }
.dd-nr, .dd-zaehler { position: sticky; top: 360px; padding-top: 5px; font-size: 12px; line-height: 16.2px; color: #4c5a65; }
.dd-zaehler { display: flex; flex-direction: column; gap: 16px; text-align: right; }
.dd-text { position: sticky; top: 360px; display: flex; flex-direction: column; gap: 20px; }
.dd-text h2 { font-size: 32px; line-height: 35.2px; font-weight: 500; letter-spacing: -.02em; }
.dd-wann { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blau); }
.dd-text p:not(.dd-wann) { font-size: 16px; line-height: 21.6px; color: #4c5a65; }
.dd-bild { display: flex; align-items: center; justify-content: center; min-height: 600px; margin-left: 58px; padding: 40px; border-radius: 24px; background: #e9eef3; }
.dd-bild .mini-karte { width: min(100%, 440px); padding: 32px; border-radius: 20px; font-size: 16px; line-height: 21px; box-shadow: 0 24px 48px -16px rgb(19 60 85 / .22); }
.dd-bild .mini-titel { font-size: 19px; }
.dd-bild .mini-preis { font-size: 24px; line-height: 28px; }
.dd-handys { gap: 24px; }
.dd-handys img { width: auto; height: 440px; border-radius: 24px; box-shadow: 0 24px 48px -16px rgb(19 60 85 / .3); }
.dd-handys img + img { transform: translateY(40px); }
main > section.dd-band { padding: 8px; }
main > section.dd-video { padding: 64px 0 0; background: #f6f8fa; }
.dd-video .platzhalter { aspect-ratio: 16 / 9; }
.dd-band-bild { position: absolute; inset: 0; z-index: 0; align-items: flex-end; text-align: right; padding: 52px; border-radius: 16px; }
.dd-band-innen > figure, .dd-band-innen > .btn, .dd-zahlen { position: relative; z-index: 1; }
.dd-band-innen { position: relative; overflow: hidden; min-height: 640px; padding: 52px; border-radius: 16px; background: radial-gradient(ellipse 60% 70% at 85% 110%, rgb(56 111 164 / .65), transparent 70%), var(--nacht-tief); color: #f8f8f8; }
.dd-band blockquote { max-width: 620px; font-size: 48px; line-height: 48px; font-weight: 500; letter-spacing: -.02em; }
.dd-band blockquote span { color: #8f9aa3; }
.dd-band figcaption { margin-top: 20px; font-size: 14px; line-height: 18px; color: rgb(248 248 248 / .7); }
.dd-band .btn { margin-top: 20px; --grund: #f8f8f8; --text: var(--tinte); --fuell: var(--himmel); --fuell-text: var(--tinte); height: 42px; padding: 0 20px; font-size: 16px; }
.dd-zahlen { position: absolute; right: 18px; bottom: 18px; display: grid; grid-template-columns: 305px 305px; gap: 10px; }
.dd-zahl { display: flex; flex-direction: column; justify-content: space-between; gap: 96px; padding: 32px 24px 20px; border-radius: 12px; background: rgb(255 255 255 / .08); backdrop-filter: blur(12px); }
.dd-zahl strong { font-size: 80px; line-height: 64px; font-weight: 500; letter-spacing: -.02em; }
.dd-zahl > span { font-size: 16px; line-height: 21.6px; color: rgb(248 248 248 / .75); }
main > section.dd-fragen { padding: 120px 0; background: var(--nacht-tief); color: #f8f8f8; }
.dd-fragen .dd-titel { max-width: 736px; margin: 0 auto 64px; text-align: center; }
.dd-fragen-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1100px; margin: 0 auto; align-items: start; }
.dd-fragen-raster > div { display: grid; gap: 24px; }
.dd-fragen details { padding: 0 24px 0 32px; border-radius: 12px; background: rgb(255 255 255 / .06); }
.dd-fragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 32px 0; font-size: 18px; line-height: 19.8px; color: #c5c5c5; }
.dd-fragen summary::-webkit-details-marker { display: none; }
.dd-fragen summary::after { content: ""; flex: none; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23c5c5c5' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E") center no-repeat; transition: transform .4s var(--federn); }
.dd-fragen details[open] summary::after { transform: rotate(90deg); }
.dd-fragen details a { color: #f8f8f8; }
.dd-fragen details p { padding-bottom: 28px; font-size: 16px; line-height: 24px; color: rgb(248 248 248 / .7); }

/* Häufige Fragen (Cuberto „FAQ“) */
.fragen { padding: 135px 0 108px; }
.fragen h2 { font-size: 72px; line-height: 72px; font-weight: 500; letter-spacing: -.03em; margin-bottom: 108px; }
.fragen details { border-top: 1px solid rgb(255 255 255 / .2); }
.fragen details:last-child { border-bottom: 1px solid rgb(255 255 255 / .2); }
.fragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 14.4px; padding: 36px 0; font-size: 21.6px; line-height: 25.92px; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; flex: none; width: 16px; height: 16px; margin-top: 5px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform .4s var(--federn); }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details p { max-width: 1008px; padding-bottom: 36px; font-size: 16.2px; line-height: 24.3px; color: var(--weiss-70); }
.fragen details a { color: var(--weiss); }

/* Schluss mit Formular (Cuberto „OutroSection“) */
.schluss { position: relative; overflow: hidden; color: var(--weiss); background: radial-gradient(ellipse 60% 70% at 50% 110%, rgb(56 111 164 / .75), transparent 70%), var(--nacht-tief); padding: 147px 0 120px; text-align: center; }
.schluss::before { content: ""; position: absolute; left: 50%; bottom: -1px; width: 1100px; height: 440px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgb(132 210 246 / .12)); clip-path: polygon(50% 0, 100% 100%, 0 100%); pointer-events: none; }
.schluss > .rahmen { position: relative; max-width: 800px; }
.schluss-titel { font-size: 72px; line-height: 79.2px; font-weight: 400; letter-spacing: -.03em; }
.schluss-text { margin-top: 28.8px; font-size: 21.6px; line-height: 30.24px; color: var(--weiss-70); }
.schluss-text a { color: var(--weiss); }
.next { margin-top: 20px; font-size: 16.2px; color: var(--himmel); }
.check { margin: 54px auto 0; max-width: 620px; text-align: left; display: grid; gap: 22px; }
.choice { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.choice label { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice label { padding: 12px 20px; border-radius: 99999px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); font-size: 16.2px; transition: background-color .3s ease, color .3s ease; }
.choice label:has(input:checked) { background: var(--weiss); color: var(--nacht); }
.choice label:has(input:focus-visible) { outline: 3px solid var(--hell); outline-offset: 3px; }
.field label { display: block; font-size: 14.4px; color: var(--weiss-70); margin-bottom: 6px; }
.field input { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid rgb(255 255 255 / .35); background: transparent; color: var(--weiss); font: inherit; font-size: 21.6px; border-radius: 0; }
.field input::placeholder { color: rgb(255 255 255 / .35); }
.field input:focus { outline: 0; border-bottom-color: var(--himmel); }
.field input[aria-invalid="true"] { border-bottom-color: #ff9d8a; }
.hp { position: absolute; left: -9999px; }
.error { min-height: 0; color: #ffb4a6; font-size: 16.2px; }
.error:empty { display: none; }
.check .submit { justify-self: center; margin-top: 8px; height: 58px; padding: 0 34px; }
.hint { text-align: center; font-size: 14.4px; color: var(--weiss-70); }
.hint a, .done a { color: var(--weiss); }
.done { margin: 54px auto 0; max-width: 620px; padding: 30px; border-radius: 18px; background: rgb(255 255 255 / .08); text-align: left; }
.done strong { font-size: 23px; font-weight: 500; }
.done p { margin-top: 10px; color: var(--weiss-70); }
.assure { margin-top: 54px; font-size: 16.2px; color: var(--weiss-70); }
.assure strong { color: var(--weiss); font-weight: 500; }
.call { margin-top: 36px; display: grid; justify-items: center; gap: 10px; }
.phone { font-size: 46px; line-height: 50px; font-weight: 400; letter-spacing: -.02em; text-decoration: none; }
.phone:hover { color: var(--himmel); }
.call-note { font-size: 14.4px; color: var(--weiss-70); }

/* Fuß (Cuberto) */
.fuss { color: var(--weiss); background: var(--nacht-tief); padding: 108px 0 54px; }
.fuss-raster { display: grid; grid-template-columns: 1fr auto; gap: 54px; }
.fuss-kontakt { display: flex; gap: 90px; }
.fuss-kontakt p { margin-top: 18px; max-width: 260px; font-size: 16.2px; line-height: 24.3px; font-weight: 500; }
.fuss-kontakt .klein-gross { margin-right: 9px; font-weight: 400; color: var(--weiss-70); }
.fuss-links { display: grid; grid-template-columns: auto auto; gap: 8px 72px; align-content: start; }
.fuss-links a { font-size: 18px; line-height: 25px; text-decoration: none; }
.fuss-links a:hover { color: var(--himmel); }
.fuss-unten { display: flex; gap: 54px; margin-top: 60px; font-size: 14.4px; color: var(--weiss-70); }
.fuss-unten a { text-decoration: none; }
.fuss-unten a:hover { color: var(--weiss); }
.daumen { display: none; }

/* ================= Unterseiten: vorhandene Bausteine im Cuberto-Aussehen ================= */
main > section { padding-top: 108px; }
.wrap { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--rand-schmal); }
.after-section { margin-top: 54px; }
.lead { font-size: 21.6px; line-height: 25.92px; letter-spacing: .02em; }
.muted { color: var(--schiefer); }
.tag { display: inline-block; font-size: 14.4px; line-height: 18.72px; letter-spacing: 0; text-transform: uppercase; }
.src, .source { display: block; margin-top: 14px; font-size: 13px; line-height: 18px; letter-spacing: 0; color: var(--schiefer); }
.src a, .source a { color: inherit; }
hr.dotted { border: 0; border-top: 1px solid rgb(12 26 36 / .15); margin: 0; }
.more { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.more:hover { color: var(--blau); }

/* Knöpfe der Unterseiten = Pillen */
.btn { --grund: var(--nacht); --text: var(--weiss); --fuell: var(--blau); --fuell-text: var(--weiss);
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 25px;
  border: 0; border-radius: 99999px; background: var(--grund); color: var(--text); font-size: 18px; line-height: 18px; font-weight: 500; letter-spacing: 0;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: color .4s ease; }
.btn::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 100%; height: 100%; border-radius: 50% 50% 0 0; background: var(--fuell); transition: transform .5s var(--fuellen), border-radius .5s var(--fuellen); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(-100%); border-radius: 0; }
.btn:hover, .btn:focus-visible { color: var(--fuell-text); }
.btn-secondary { --grund: transparent; --text: var(--tinte); --fuell: var(--nacht); --fuell-text: var(--weiss); box-shadow: inset 0 0 0 1px rgb(12 26 36 / .3); }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }
.neu-link { margin-top: 18px; text-align: center; font-size: 16.2px; }
.neu-link a:hover { color: var(--blau); }

/* Seitenkopf: groß, mittig (Cuberto „About“/„Contacts“); Leistungsseiten dunkel (Cuberto „Web Design“) */
.page-hero { padding-top: 108px; text-align: center; }
.page-hero-grid { display: block; }
.page-hero h1 { max-width: 1100px; margin: 0 auto; font-size: 81px; line-height: 81px; font-weight: 500; letter-spacing: -.01em; }
.page-hero .lead { max-width: 756px; margin: 28.8px auto 0; }
.page-hero .tag { margin-bottom: 20px; }
.page-hero h1 + .lead, .page-hero .tag + h1 { margin-top: 28.8px; }
.page-hero .hero-art, .page-hero .halftone:not(.card) { display: none; }
.page-hero .devices { max-width: 1224px; margin: 90px auto 0; }
.kopf-dunkel { margin-top: 0; padding: 162px 0 162px; color: var(--weiss); background: radial-gradient(ellipse 70% 60% at 50% 120%, rgb(56 111 164 / .7), transparent 70%), var(--nacht-tief); }
.kopf-dunkel .muted, .kopf-dunkel .lead { color: var(--weiss-70); }
.kopf-dunkel .btn { --grund: var(--weiss); --text: var(--nacht); --fuell: var(--himmel); --fuell-text: var(--nacht); }
.kopf-dunkel .btn-secondary { --grund: transparent; --text: var(--weiss); --fuell: var(--weiss); --fuell-text: var(--nacht); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .45); }
.kopf-dunkel .neu-link a { color: var(--himmel); }
.kopf-dunkel .devices { margin-bottom: -270px; }
/* alte Seiten setzen nach dem Kopf „padding-top:0“ (für das frühere Design) – hier gilt Cubertos Abstand */
.page-hero + section { padding-top: 108px !important; }
/* Geräte ragen 270 − 162 = 108px aus dem Kopf, danach der übliche Abstand von 108px */
.kopf-dunkel:has(.devices) + section { padding-top: 216px !important; }
main:has(> .kopf-dunkel, > .lk-kopf) .crumbs { position: absolute; left: 0; right: 0; top: 72px; z-index: 2; color: var(--weiss-70); }
main:has(> .kopf-dunkel, > .lk-kopf) { position: relative; }
main:has(> .kopf-dunkel, > .lk-kopf) .crumbs a:hover { color: var(--weiss); }

/* Geräte: Laptop und Handy mit den neuen Bildschirmfotos */
.devices { position: relative; aspect-ratio: 16 / 10.4; }
.dev-laptop { position: absolute; left: 0; top: 0; width: 86%; }
.dev-laptop .shell { padding: 1.4%; border-radius: 22px; background: linear-gradient(180deg, #fbfdfe, #d9e3ea); box-shadow: inset 0 1px 1px rgba(255,255,255,.9), 0 0 0 1px rgba(19,60,85,.08), 0 50px 90px -40px rgba(19,60,85,.5), 0 18px 36px -20px rgba(19,60,85,.3); }
.dev-laptop .screen { border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; background: #0b1c28; }
.dev-laptop img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.dev-laptop .base { height: 14px; margin: 0 -5%; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, #e9eff4, #c3cfd8); position: relative; }
.dev-laptop .base::after { content: ""; position: absolute; left: 50%; top: 0; width: 18%; height: 5px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #b9c6d0; }
.dev-phone { position: absolute; right: 0; bottom: 0; width: 30%; transform: rotate(4deg); }
.dev-phone .shell { position: relative; padding: 3.4%; border-radius: 17% / 8%; background: linear-gradient(135deg, #5b5e64 0%, #2a2c30 18%, #3b3d42 50%, #232427 82%, #54575d 100%); box-shadow: inset 0 0 0 1.5px #8a8d93, inset 0 0 0 4px #141517, 0 40px 70px -30px rgba(19,60,85,.6), 0 14px 30px -16px rgba(19,60,85,.4); }
.dev-phone .screen { position: relative; overflow: hidden; aspect-ratio: 9 / 19.5; border-radius: 14.4% / 6.8%; background: #fbfaf7; container-type: size; }
.dev-phone .screen::before { content: ""; position: absolute; top: 1.6%; left: 50%; width: 32%; height: 3.4%; transform: translateX(-50%); border-radius: 40px; background: #000; z-index: 3; }
.dev-phone .status { position: absolute; left: 0; right: 0; top: 0; height: 6.2cqh; z-index: 1; display: flex; align-items: center; gap: 2.5cqw; padding: 0 9cqw 0 12cqw; background: #fbfaf7; font: 600 6cqw/1 -apple-system, system-ui, sans-serif; color: #111; }
.dev-phone .status span { margin-right: auto; }
.dev-phone .status .sig { width: 7cqw; height: 4cqw; background: linear-gradient(#111,#111) 0 100% / 1.2cqw 35% no-repeat, linear-gradient(#111,#111) 1.9cqw 100% / 1.2cqw 55% no-repeat, linear-gradient(#111,#111) 3.8cqw 100% / 1.2cqw 75% no-repeat, linear-gradient(#111,#111) 5.7cqw 100% / 1.2cqw 100% no-repeat; }
.dev-phone .status .bat { position: relative; width: 9cqw; height: 4.4cqw; border: .6cqw solid rgba(17,17,17,.45); border-radius: 1.4cqw; }
.dev-phone .status .bat::before { content: ""; position: absolute; inset: .5cqw; right: 1.6cqw; border-radius: .7cqw; background: #111; }
.dev-phone .scroll, .dev-phone .still { position: absolute; left: 0; top: 6.2cqh; width: 100%; max-width: none; }
.dev-phone .still { height: calc(100% - 6.2cqh); object-fit: cover; object-position: top; }
@media (prefers-reduced-motion: no-preference) {
  .dev-phone .scroll { animation: phone-scroll 22s cubic-bezier(.65,0,.35,1) 1.5s infinite alternate; }
  @keyframes phone-scroll { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(calc(-100% + 93.8cqh)); } }
}

/* Aussage: großer Text rechts, Marke links frei (Cuberto „Overview“) */
.statement-wrap { display: grid; grid-template-columns: 282px minmax(0, 624px); }
.statement-wrap > * { grid-column: 2; }
.statement { font-size: 23.04px; line-height: 29.95px; letter-spacing: .01em; }
.statement-wrap .muted { margin-top: 18px; font-size: 18px; line-height: 25.2px; }
p.statement.after-section { max-width: 624px; margin-left: 282px; }

/* Überschrift eines Abschnitts (Cuberto „Our capabilities“) */
.section-head { margin-bottom: 54px; }
.section-head h2, .market-head h2, .carousel-head h2 { font-size: 46px; line-height: 50.6px; font-weight: 500; letter-spacing: -.02em; }
.section-head p, .market-head p { max-width: 720px; margin-top: 18px; font-size: 18px; line-height: 25.2px; }
.section-head .muted { color: var(--schiefer); }

/* Karten als Zeilen mit dünner Linie (Cuberto „Who we work with“) */
.spec-grid { display: grid; }
.spec-grid .card { display: grid; grid-template-columns: 282px minmax(0, 1fr); gap: 0 40px; padding: 36px 0; border-top: 1px solid rgb(12 26 36 / .15); background: none; border-radius: 0; }
.spec-grid .card:last-child { border-bottom: 1px solid rgb(12 26 36 / .15); }
.spec-grid .card > * { grid-column: 2; }
.spec-grid .card > h3, .spec-grid .card > .tag { grid-column: 1; grid-row: 1 / span 9; }
.spec-grid .card > .tag { grid-row: 1; align-self: start; margin-bottom: 8px; }
/* Mit Etikett: Der Text rechts läuft über beide Zeilen, sonst wird die erste Zeile so hoch wie er und die Überschrift rutscht unter ihn */
@media (min-width: 861px) {
  .spec-grid .card:has(> .tag) { grid-template-rows: auto 1fr; }
  .spec-grid .card > .tag ~ h3 { grid-row: 2; align-self: start; }
  .spec-grid .card > .tag ~ p { grid-row: 1 / span 2; }
}
.spec-grid .card h3 { font-size: 21.6px; line-height: 25.92px; font-weight: 500; }
.spec-grid .card p { max-width: 624px; font-size: 18px; line-height: 25.2px; }
.spec-grid .card p + p, .spec-grid .card ul { margin-top: 12px; }
.spec-grid .card .btn, .spec-grid .card .more { justify-self: start; margin-top: 18px; }
.card { border-radius: 18px; padding: 36px; background: var(--nebel); }
.card h3, .bento .card h2 { font-size: 21.6px; line-height: 25.92px; font-weight: 500; }
.card p { margin-top: 10px; }
.card-feature { background: var(--nacht); color: var(--weiss); }
.card-feature .muted, .card-feature p { color: var(--weiss-70); }
.card-feature .facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.card-feature .facts li { padding: 6px 14px; border-radius: 99999px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .45); font-size: 14.4px; }
.card-feature .more { color: var(--weiss); }
.pill-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pill-list li { padding: 8px 16px; border-radius: 99999px; box-shadow: inset 0 0 0 1px rgb(12 26 36 / .3); font-size: 16.2px; }
.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.bento .card { display: grid; align-content: space-between; gap: 22px; min-height: 300px; padding: 44px; }
.bento .card .why { color: var(--schiefer); }
.bento .card-feature .why { color: var(--weiss-70); }

/* Zahlen als Minzkarten (Cuberto „Typical website timelines“) */
.stat { display: flex; flex-direction: column; min-height: 236px; padding: 30px; border-radius: 14px; background: var(--minze); }
.stat .label { font-size: 16.2px; line-height: 20px; }
.stat .value { margin: 18px 0 0; font-size: 58px; line-height: 58px; font-weight: 400; letter-spacing: -.03em; }
.stat p { margin-top: 14px; font-size: 16.2px; line-height: 22.68px; color: var(--schiefer); }
.stat .src { margin-top: auto; padding-top: 14px; }
.stat-split { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; align-items: stretch; }
.market-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px; margin-top: 54px; }
.market-card { padding: 30px; border-radius: 14px; background: var(--minze); min-height: 200px; }
.market-card .num { display: block; font-size: 58px; line-height: 58px; letter-spacing: -.03em; color: var(--nacht); }
.market-card p { margin-top: 16px; font-size: 18px; }
.dots-bg { background: none; }

/* Aufruf-Leiste (dunkle Karte) */

/* Schritte (Ablauf, Check) als Zeilen */
.step { display: grid; grid-template-columns: 282px minmax(0, 1fr); gap: 0 40px; padding: 36px 0; }
.step h3 { font-size: 21.6px; line-height: 25.92px; font-weight: 500; }
.step .when { display: block; margin-top: 8px; font-size: 14.4px; line-height: 18.72px; text-transform: uppercase; color: var(--blau); }
.step p { max-width: 624px; font-size: 18px; line-height: 25.2px; }
.step p + p { margin-top: 12px; }


/* Preise */
.price { display: flex; flex-direction: column; gap: 14px; padding: 36px; border-radius: 18px; background: var(--nebel); }
.price h3 { font-size: 21.6px; font-weight: 500; }
.price .amount { font-size: 58px; line-height: 58px; letter-spacing: -.03em; }
.price .amount small { font-size: 18px; letter-spacing: 0; }
.price ul { padding-left: 1.1em; display: grid; gap: 6px; font-size: 16.2px; line-height: 22.68px; }
.price.pick { background: var(--nacht); color: var(--weiss); }

/* Projekte (Arbeiten, Leistungen, Branchen) wie Cubertos Projektkacheln */
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 90px 108px; }
.project { display: block; text-decoration: none; }
.project .art { overflow: hidden; border-radius: 18px; background: var(--grau); aspect-ratio: 16 / 10; }
.project .art img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--federn); }
.project:hover .art img { transform: scale(1.04); }
.project .body { margin-top: 18px; display: grid; gap: 8px; }
.project h2, .project h3 { font-size: 28.8px; line-height: 31.68px; font-weight: 500; }
.project .more { text-decoration: underline; }

/* Rechtstexte wie Cubertos Artikelseite */
.legal { max-width: 800px; }
.legal h2 { margin: 54px 0 14px; font-size: 28.8px; line-height: 34px; font-weight: 500; letter-spacing: -.01em; }
.legal h3 { margin: 30px 0 10px; font-size: 21.6px; line-height: 26px; font-weight: 500; }
.legal p, .legal li { font-size: 18px; line-height: 28px; }
.legal p + p, .legal ul, .legal ol { margin-top: 14px; }
.legal a { color: var(--blau); overflow-wrap: anywhere; }

/* ================= Fallstudien nach refokus.com/projects/meridian ================= */
.fall { --kunde: var(--nacht); }
.serif { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; letter-spacing: 0; }
.fall-marke { font-size: 12px; line-height: 14.4px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.fall-kopf { margin-top: 0; padding: 168px 0 72px; min-height: 735px; background: var(--kunde); color: var(--weiss); display: flex; flex-direction: column; justify-content: flex-end; }
main:has(> .fall-kopf) .crumbs { position: absolute; left: 0; right: 0; top: 72px; z-index: 2; color: rgb(255 255 255 / .75); }
main:has(> .fall-kopf) { position: relative; }
.fall-titel { font-size: 128px; line-height: 115px; font-weight: 500; letter-spacing: -.03em; }
.fall-kopf hr { margin: 44px 0 36px; border: 0; border-top: 1px solid rgb(255 255 255 / .4); }
.fall-meta { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 40px; }
.fall-meta ul { list-style: none; padding: 0; margin-top: 14px; font-size: 16px; line-height: 22px; }
.fall-meta p:not(.fall-marke) { margin-top: 14px; font-size: 16px; line-height: 22px; }
.fall-meta .fall-intro p { margin-top: 0; font-size: 18px; line-height: 27px; }
.fall-meta .fall-intro p + p { margin-top: 14px; }
main > section.fall-zoom { padding-top: 0; }
.fall-zoom { height: 170vh; background: radial-gradient(ellipse 70% 60% at 50% 55%, color-mix(in srgb, var(--kunde) 55%, white), var(--kunde) 75%); }
.fall-zoom-innen { position: sticky; top: 72px; height: calc(100vh - 72px); display: grid; place-items: center; overflow: hidden; }
.fall-zoom-bild { width: min(1224px, 90vw); transform: scale(var(--zoom, .72)); border-radius: 8px; overflow: hidden; box-shadow: 0 40px 80px -30px rgb(12 26 36 / .35); background: var(--grau); }
.fall-zoom-bild .leiste-punkte { height: 28px; display: flex; gap: 7px; align-items: center; padding-left: 14px; background: #f4f6f8; }
.fall-zoom-bild .leiste-punkte i { width: 10px; height: 10px; border-radius: 50%; background: #d7dde3; }
.fall-zoom-bild img { width: 100%; }
main > section.fall-band { padding-top: 0; }
.fall-band { background: var(--kunde); padding: 44px 0 !important; overflow: hidden; }
.fall-band-spur { display: flex; gap: 24px; width: max-content; animation: band 40s linear infinite; }
.fall-band-spur img { width: 200px; border-radius: 22px; box-shadow: 0 20px 40px -20px rgb(0 0 0 / .45); }
@keyframes band { to { transform: translateX(-50%); } }
.fall-block { padding: 135px 0 0; }
.fall-block h2 { font-size: 64px; line-height: 66px; font-weight: 500; letter-spacing: -.03em; max-width: 900px; }
.fall-block .statement { margin-top: 36px; }
.fall-block .spec-grid { margin-top: 54px; }
.fall-bild { margin-top: 72px; border-radius: 8px; overflow: hidden; background: var(--grau); }
.fall-bild img { width: 100%; }
.fall-bild-karte { display: grid; place-items: center; padding: 54px; }
.fall-bild-karte img { width: min(520px, 100%); border-radius: 4px; box-shadow: 0 30px 60px -30px rgb(12 26 36 / .35); }
.fall-bild-handys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 72px; padding: 54px; border-radius: 8px; background: var(--grau); }
.fall-bild-handys img { width: 100%; border-radius: 22px; box-shadow: 0 30px 60px -30px rgb(12 26 36 / .45); }
main > section.fall-ergebnis { margin-top: 135px; padding: 108px 0; background: var(--kunde); color: var(--weiss); }
.fall-ergebnis-raster { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.fall-ergebnis p:not(.fall-marke) { font-size: 24px; line-height: 33.6px; }
.fall-ergebnis ul { list-style: none; padding: 0; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.fall-ergebnis li { padding: 8px 16px; border-radius: 99999px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); font-size: 16px; }
main > section.fall-weiter { padding: 9px 9px 0; background: var(--weiss); }
.fall-weiter-raster { display: grid; grid-template-columns: 1fr 2fr; gap: 9px; }
.fall-karte { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 520px; padding: 36px; border-radius: 12px; color: var(--weiss); text-decoration: none; overflow: hidden; background: var(--karte, var(--nacht)); }
.fall-karte h2, .fall-karte h3 { font-weight: 500; letter-spacing: -.02em; }
.fall-karte h3 { font-size: 36.8px; line-height: 40.5px; }
.fall-karte h2 { font-size: 88px; line-height: 88px; }
.fall-karte .pfeil-ecke { position: absolute; top: 30px; right: 30px; font-size: 22px; transition: transform .4s var(--federn); }
.fall-karte:hover .pfeil-ecke { transform: translate(4px, -4px); }
.fall-karte p:not(.fall-marke) { max-width: 360px; font-size: 16px; line-height: 22px; color: rgb(255 255 255 / .8); }
.fall-karte-unten { display: flex; justify-content: space-between; align-items: end; gap: 20px; }

/* Tablet */
@media (max-width: 1200px) {
  :root { --rand: 48px; --rand-schmal: 96px; }
  .menue a { padding-inline: 12px; }
  .zahl-karte, .zahl-karte:nth-child(n+4) { grid-column: span 3; }
  .kontakt-raster { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; }
  .kontakt-titel { font-size: 60px; line-height: 62px; }
  .lk-kopf-unten { gap: 64px; }
  .lk-kopf-text { flex-basis: 400px; }
  .lk-zahl { padding: 56px 40px; }
  .lk-zahl strong { font-size: 88px; line-height: 88px; }
  .lk-zwei { gap: 56px; }
  .lk-aussage-satz { font-size: 64px; line-height: 80px; }
  .lk-vier-raster { grid-template-columns: 1fr 1fr; }
  .sk-breit { grid-template-columns: 1fr 1fr; gap: 24px 40px; padding: 44px; border-radius: 40px; }
  .sk-breit .sk-text { grid-column: 1 / -1; }
  .sk-enthalten { padding: 0; }
  main > section.ue-gruender { grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr); }
  .ue-zitat { padding-left: 48px; }
  .dd-schritt { grid-template-columns: 56px 300px minmax(0, 1fr) 40px; }
  .dd-bild { margin-left: 32px; }
  .dd-handys img { height: 340px; }
}
/* Handy */
@media (max-width: 860px) {
  :root { --rand: 20px; --rand-schmal: 20px; }
  body { font-size: 16.2px; line-height: 22.68px; }
  .leiste-innen { gap: 12px; }
  .leiste .pille { height: 42px; padding: 0 18px; font-size: 16px; }
  .menue-knopf { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--grau); cursor: pointer; }
  .menue-striche, .menue-striche::before { display: block; width: 16px; height: 1.5px; background: var(--tinte); position: relative; transition: transform .3s ease; }
  .menue-striche::before { content: ""; position: absolute; top: 5px; }
  .menue-striche { transform: translateY(-2.5px); }
  .menue-offen .menue-striche { transform: rotate(45deg); }
  .menue-offen .menue-striche::before { transform: translateY(-5px) rotate(-90deg); }
  .menue { position: fixed; inset: 72px 0 auto; margin: 0; flex-direction: column; padding: 20px var(--rand) 36px; background: var(--weiss); box-shadow: 0 24px 40px rgb(12 26 36 / .1); display: none; }
  .menue-offen .menue { display: flex; }
  .menue a { padding: 12px 0; font-size: 28px; line-height: 32px; }
  .menue a::after { display: none; }
  .start-kopf { padding: 54px var(--rand) 96px; }
  .film-knopf { bottom: 20px; width: 40px; height: 40px; }
  .start-film::after { background: linear-gradient(180deg, rgb(11 38 56 / .88), rgb(11 38 56 / .84) 45%, rgb(11 38 56 / .94)); }
  .start-kopf h1 { max-width: none; font-size: 44px; line-height: 46px; }
  .start-kopf p { font-size: 18px; line-height: 23px; }
  .ueberblick { padding-top: 72px; }
  .ueberblick-innen { flex-direction: column; gap: 20px; }
  .ueberblick .klein-gross { flex: none; }
  .ueberblick-text { font-size: 20px; line-height: 26px; }
  /* Leistungsstapel wie am Rechner: klebt, beim Scrollen öffnet sich eine Karte nach der anderen */
  .stapel { height: calc(var(--karten) * 45vh + 70vh); margin-top: 44px; }
  .stapel-innen { top: 84px; gap: 8px; }
  .karte-l { padding: 20px 22px; }
  .karte-l h3 { font-size: 23px; line-height: 28px; }
  .karte-l-nr { font-size: 15px; line-height: 28px; }
  .karte-l-koerper p { margin-top: 14px; font-size: 15px; line-height: 21px; }
  .karte-l-koerper ul { margin-top: 12px; gap: 6px; }
  .karte-l-koerper li { padding: 4px 10px; font-size: 12.6px; }
  .karte-l .mehr { margin-top: 14px; }
  .karte-l-bild { width: 50%; }
  .orte { padding: 72px 0 108px; }
  .orte + .dunkel.rund { margin-top: -36px; }
  .orte-titel { font-size: 30px; line-height: 32px; }
  .orte-karten { grid-template-columns: 1fr; gap: 44px; margin-top: 36px; }
  .orte-inhalt h3 { font-size: 24px; line-height: 27px; }
  .ort-pin > span { padding: 5px 7px; font-size: 11px; line-height: 12px; }
  .ort-pin.rechts > span { left: 10px; top: -11px; }
  .ort-pin.links > span { right: 10px; top: -11px; }
  .ort-pin > i { left: -7px; top: -7px; width: 14px; height: 14px; box-shadow: inset 0 0 0 4px rgb(255 255 255 / .9); }
  .dunkel.rund, .hell-rund { border-radius: 36px 36px 0 0; }
  .hell-rund { margin-top: -36px; }
  .arbeiten, .fragen, .ablauf, .zettel-bereich { padding: 72px 0; }
  .arbeiten-kopf { flex-direction: column; align-items: start; margin-bottom: 44px; }
  .arbeiten-kopf h2, .zettel-bereich h2, .fragen h2, .schluss-titel { font-size: 40px; line-height: 44px; }
  .fragen h2 { margin-bottom: 44px; }
  /* Handy wie bei Rejouice: quadratische Bilder untereinander, Name klein unten links */
  main > section.rj-einstieg { padding: 54px var(--rand) 72px; }
  .rj-einstieg h1, .rj-satz { font-size: 27px; line-height: 29px; text-indent: 0; }
  main > section.ue-grund { min-height: 0; padding-bottom: 72px; }
  .ue-zweispaltig { grid-template-columns: 1fr; gap: 24px; }
  .ue-zweispaltig li { margin-left: 0; }
  .ue-wort { padding-right: 0; padding-top: 40px; }
  .ue-wort sup { top: 0; font-size: 20px; line-height: 20px; }
  .ue-riesig .ue-zweispaltig { font-size: 17px; line-height: 21px; }
  main > section.ue-aussage { padding-top: 72px; }
  main > section.ue-medien { padding-top: 72px; }
  .ue-schwarz-bilder { grid-template-columns: 1fr; margin-top: 0; }
  main > section.dd-video { padding-top: 40px; }
  .dd-band-bild { justify-content: flex-start; padding: 12px 14px; }
  .dd-band-bild span { display: none; }
  .platzhalter strong { font-size: 22px; line-height: 26px; }
  main > section.ue-gruender { grid-template-columns: 1fr; gap: 24px; padding: 96px var(--rand); font-size: 17px; line-height: 21px; }
  .ue-etikett { align-self: start; }
  .ue-zitat { padding-left: 0; }
  main > section.ue-schwarz { grid-template-columns: 1fr; gap: 56px; padding: 96px var(--rand); font-size: 17px; line-height: 21px; }
  .ue-schwarz h2 { font-size: 36px; line-height: 40px; }
  .rj-buehne { position: relative; height: auto; aspect-ratio: 1; }
  .rj-titel { top: auto; bottom: 18px; left: var(--rand); right: 64px; transform: none; text-align: left; font-size: 17px; line-height: 20px; font-weight: 400; }
  .rj-titel span { text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .rj-bild { top: 46%; bottom: auto; width: 70vw; transform: translate(-50%, -50%); }
  .rj-handy { right: -12%; width: 32%; border-width: 3px; border-radius: 14px; }
  .rj-meta { top: 18px; bottom: auto; font-size: 13px; line-height: 16px; }
  .rj-nr { right: var(--rand); bottom: 18px; font-size: 17px; line-height: 20px; }
  main > section.rf-abschluss { grid-template-columns: 1fr; padding: 12px; }
  .rf-kachel { min-height: 300px; }
  .rf-gross { min-height: 360px; }
  .rf-titel-klein { font-size: 32px; line-height: 36px; }
  .rf-unten { flex-direction: column; align-items: flex-start; }
  .rf-titel-gross { font-size: 64px; line-height: 64px; }
  .projekte { display: grid; gap: 12px; padding-inline: var(--rand); border: 0; }
  /* Projektliste: statt Drüberfahren füllt sich die Karte in der Bildschirmmitte mit der Kundenfarbe */
  .projekt { padding: 21px 16px; border: 0; border-radius: 8px; background: rgb(255 255 255 / .06); }
  .projekt.ist-offen { background: var(--kunde); }
  .projekt-bilder-reihe img:first-child { transform: scale(.94); opacity: .5; transition: transform .9s var(--federn), opacity .6s ease; }
  .projekt.ist-offen .projekt-bilder-reihe img:first-child { transform: none; opacity: 1; }
  .projekt .rahmen { padding: 0; }
  .projekt-raster { display: flex; flex-direction: column; gap: 16px; }
  .projekt-titel { display: contents; }
  .projekt-titel h3 { order: 1; font-size: 26px; line-height: 35.1px; }
  .projekt-leistungen { order: 2; }
  .projekt-text { display: none; }
  .projekt-bilder { order: 3; grid-template-rows: 1fr; }
  .projekt-bilder-reihe { grid-template-columns: 1fr; padding-top: 0; }
  .projekt-bilder-reihe img:not(:first-child) { display: none; }
  .projekt-link { order: 4; justify-content: space-between; width: 100%; opacity: 1; }
  /* Zettel bleiben schräg wie am Rechner und richten sich in der Bildschirmmitte auf (statt beim Drüberfahren) */
  .zettel { height: auto; margin-top: 44px; display: grid; }
  .zettel-karte { position: relative; inset: auto !important; width: 84%; min-height: 0; padding: 28px 24px; }
  .zettel-karte:nth-child(1) { justify-self: start; transform: rotate(-5deg); }
  .zettel-karte:nth-child(2) { justify-self: end; margin-top: -14px; transform: rotate(4deg); }
  .zettel-karte:nth-child(3) { justify-self: start; margin-top: -14px; transform: rotate(-3deg); }
  .zettel-karte.ist-mittig { transform: rotate(0) translateY(-6px); z-index: 2; }
  .zettel-karte .zahl { font-size: 48px; line-height: 48px; }
  .zettel-karte p { margin-top: 12px; font-size: 18px; line-height: 23px; }
  .project.ist-mittig .art img { transform: scale(1.04); }
  .fall-karte.ist-mittig .pfeil-ecke { transform: translate(4px, -4px); }
  .zahlen { grid-template-columns: 1fr; margin-top: 44px; }
  .zahl-karte, .zahl-karte:nth-child(n+4) { grid-column: auto; min-height: 180px; }
  .ablauf { padding: 84px 0 92px; }
  .ablauf + .dunkel.rund { margin-top: -36px; }
  .abschnitt-marke { font-size: 14.4px; line-height: 20px; }
  .ablauf-folge { gap: 4px 8px; font-size: 22px; line-height: 26px; }
  .ablauf-folge i { font-size: 18px; }
  .reiter { margin-top: 36px; }
  .reiter-leiste { grid-template-columns: 1fr 1fr; }
  .reiter-knopf { padding: 11px 14px; box-shadow: inset -1px -1px 0 rgb(12 26 36 / .08); }
  .reiter-knopf:last-child { grid-column: span 2; }
  .lk-kopf { padding: 92px 0 44px; }
  .lk-frage { margin-bottom: 12px; font-size: 18px; line-height: 25px; }
  .lk-kopf-satz { font-size: 40px; line-height: 44px; }
  .lk-kopf-unten { flex-direction: column; gap: 56px; margin-top: 28px; }
  .lk-kopf-text { flex: none; gap: 20px; }
  .lk-kopf-text p { font-size: 16.2px; line-height: 26px; }
  .lk-kopf-karte { width: 100%; }
  .lk-karte { padding: 20px; border-radius: 20px; font-size: 14px; }
  .lk-gross { font-size: 60px; line-height: 60px; }
  .g-name { font-size: 20px; line-height: 26px; }
  .g-knoepfe span { font-size: 12px; }
  .g-knoepfe svg { width: 36px; height: 36px; padding: 8px; }
  .lk-zahlen { grid-template-columns: 1fr; }
  .lk-zahl, .lk-zahl:first-child, .lk-zahl:last-child { padding: 44px var(--rand); }
  .lk-zahl + .lk-zahl { border-left: 0; border-top: 1px solid rgb(12 26 36 / .1); }
  .lk-zahl strong { font-size: 72px; line-height: 72px; }
  .lk-zwei, .lk-fragen { grid-template-columns: 1fr; gap: 44px; padding-block: 72px; }
  .lk-titel, .lk-richtig .lk-titel, .lk-fragen .lk-titel { font-size: 32px; line-height: 36px; }
  .lk-klebt { position: static; }
  .lk-dunkel-karte { padding: 24px; }
  .lk-dk-zeile.ihr::before { left: -24px; }
  .lk-dk-suche { gap: 10px; font-size: 24px; line-height: 30px; }
  .lk-dk-suche svg { width: 22px; height: 22px; }
  .lk-aussage { padding: 72px 0; }
  .lk-aussage-vor { margin-bottom: 24px; font-size: 16.2px; line-height: 26.4px; }
  .lk-aussage-satz { font-size: 36px; line-height: 44px; }
  .lk-vier { padding: 72px 0; }
  .lk-vier .lk-titel { font-size: 36px; line-height: 40px; }
  .lk-vier-raster { grid-template-columns: 1fr; margin-top: 40px; }
  .lk-ding { padding: 28px 24px; }
  .lk-ding svg { width: 72px; height: 72px; margin-bottom: 24px; padding: 12px; }
  .lk-liste li { padding: 20px 0; font-size: 16.2px; }
  .lk-aufruf-karte { grid-template-columns: 1fr; gap: 28px; padding: 44px 28px; }
  .lk-aufruf-karte h2 { font-size: 30px; line-height: 33px; }
  .lk-aufruf-karte::after { right: -40px; }
  .lk-fragen-liste summary { padding: 24px 0; }
  main > section.sk-kopf { padding-top: 44px; }
  .sk-kopf h1 { font-size: 40px; line-height: 44px; }
  .sk-kopf .sk-lead { font-size: 18px; line-height: 25px; }
  .sk-feld { margin: 56px calc(var(--rand) * -1) 0; padding: 0 var(--rand) 44px; }
  .sk-feld::before { border-radius: 32px; }
  .sk-karten { grid-template-columns: 1fr; gap: 36px; }
  .sk-karte { padding: 28px; }
  .sk-was { min-height: 0; }
  .sk-preis { font-size: 60px; line-height: 60px; }
  .sk-enthalten { grid-template-columns: 1fr; gap: 20px; margin-top: 44px; padding: 0 8px; }
  .sk-danach > p { margin-left: 0; }
  .sk-breit { grid-template-columns: 1fr; gap: 20px; padding: 32px 24px 36px; border-radius: 32px; }
  .sk-breit .sk-hinweis { margin-bottom: 20px; }
  main > section.sk-vergleich { padding-top: 72px; }
  .sk-vergleich h2.sk-titel, .sk-fragen h2.sk-titel { font-size: 36px; line-height: 40px; }
  .sk-tabelle col.sk-spalte-name { width: 40%; }
  .sk-tabelle thead th { padding: 12px 4px 16px; }
  .sk-tabelle thead th .sk-titel { font-size: 19px; line-height: 24px; }
  .sk-tabelle thead th small { font-size: 12px; }
  .sk-tabelle tbody th[colspan] { padding-top: 28px; }
  .sk-tabelle tbody th[scope="row"] { font-size: 14px; line-height: 20px; }
  .sk-tabelle td { padding: 6px 2px; font-size: 13px; line-height: 18px; }
  .sk-notiz { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 48px; padding: 24px; }
  main > section.sk-fragen { grid-template-columns: 1fr; gap: 32px; padding-top: 72px; }
  .sk-gruppe summary { padding: 16px 0; font-size: 16.2px; line-height: 24px; }
  main > section.dd-kopf { padding-top: 48px; }
  .dd-kopf-innen { padding-bottom: 40px; }
  .dd-titel, .dd-band blockquote { font-size: 32px; line-height: 34px; }
  .dd-kopf h1 { font-size: 40px; line-height: 44px; }
  .dd-kopf p { font-size: 18px; line-height: 25px; }
  main > section.dd-schritte { padding: 48px 0 72px; }
  .dd-schritt { grid-template-columns: 32px minmax(0, 1fr); row-gap: 20px; }
  .dd-nr, .dd-text { position: static; }
  .dd-text { gap: 10px; }
  .dd-text h2 { font-size: 22px; line-height: 26px; }
  .dd-zaehler { display: none; }
  .dd-bild { grid-column: 1 / -1; min-height: 0; margin-left: 0; padding: 24px 16px; border-radius: 16px; }
  .dd-bild .mini-karte { padding: 20px; font-size: 14px; }
  .dd-handys img { height: 260px; border-radius: 16px; }
  .dd-handys img + img { transform: translateY(20px); }
  .dd-band-innen { min-height: 0; padding: 18px 18px 200px; }
  .dd-zahlen { left: 18px; right: 18px; grid-template-columns: 1fr 1fr; }
  .dd-zahl { gap: 20px; padding: 20px 16px 16px; }
  .dd-zahl strong { font-size: 44px; line-height: 40px; }
  .dd-zahl > span { font-size: 14px; line-height: 18px; }
  main > section.dd-fragen { padding: 72px 0; }
  .dd-fragen .dd-titel { margin-bottom: 32px; }
  .dd-fragen-raster, .dd-fragen-raster > div { grid-template-columns: 1fr; gap: 16px; }
  .dd-fragen details { padding: 4px 20px 4px 24px; }
  .dd-fragen summary { padding: 16px 0; line-height: 22px; }
  .ablauf-text { font-size: 14px; line-height: 23.8px; }
  .reiter-nr { font-size: 10px; line-height: 13px; }
  .reiter-name { font-size: 13px; line-height: 16px; }
  .reiter-feld { grid-template-columns: 1fr; min-height: 0; }
  .reiter-text { padding: 32px 24px; }
  .reiter-text h3 { font-size: 22px; line-height: 25.3px; }
  .reiter-text p:not(.reiter-schritt) { font-size: 14px; line-height: 22.4px; }
  .reiter-text li { font-size: 15px; }
  .reiter-bild { display: none; }
  .reiter-leiste.reiter-vier .reiter-knopf:last-child { grid-column: auto; }
  .punkte-liste { grid-template-columns: 1fr; padding: 0 24px 16px; }
  .punkte-liste h4 { font-size: 16px; line-height: 21px; }
  .fragen summary { padding: 24px 0; font-size: 18px; line-height: 23px; }
  .schluss { padding: 90px 0 150px; }
  .schluss-text { font-size: 18px; line-height: 25px; }
  .phone { font-size: 34px; }
  .fuss { padding: 72px 0 120px; }
  .fuss-raster { grid-template-columns: 1fr; }
  .fuss-kontakt { flex-direction: column; gap: 36px; }
  .fuss-unten { flex-wrap: wrap; gap: 20px; }
  main > section { padding-top: 72px; }
  .page-hero { padding-top: 54px; }
  .page-hero h1 { font-size: 40px; line-height: 44px; }
  .page-hero .lead { font-size: 18px; line-height: 24px; }
  .page-hero .devices { margin-top: 44px; }
  .kopf-dunkel { padding: 90px 0 90px; }
  .kopf-dunkel .devices { margin-bottom: -120px; }
  .page-hero + section { padding-top: 72px !important; }
  .kopf-dunkel:has(.devices) + section { padding-top: 102px !important; }
  .statement-wrap, .spec-grid .card, .step { grid-template-columns: 1fr; }
  .statement-wrap > *, .spec-grid .card > *, .spec-grid .card > h3, .spec-grid .card > .tag { grid-column: 1; grid-row: auto; }
  p.statement.after-section { margin-left: 0; }
  .statement { font-size: 20px; line-height: 26px; }
  .spec-grid .card { gap: 10px; padding: 24px 0; }
  .section-head h2, .market-head h2 { font-size: 32px; line-height: 36px; }
  .stat-split, .bento, .project-grid { grid-template-columns: 1fr; }
  .project-grid { gap: 44px; }
  .bento .card { min-height: 0; padding: 28px 24px; }
  .price .amount, .stat .value { font-size: 44px; line-height: 46px; }
  .fall-kopf { min-height: 0; padding: 120px 0 44px; }
  .fall-titel { font-size: 60px; line-height: 58px; }
  .fall-meta, .fall-ergebnis-raster, .fall-weiter-raster { grid-template-columns: 1fr; gap: 24px; }
  /* Fallstudie: Bildschirmfoto wächst beim Scrollen auch auf dem Handy */
  /* größere Tippfläche für kleine Textlinks, ohne das Layout zu verschieben */
  .crumbs a, .fuss-unten a { display: inline-block; padding-block: 11px; margin-block: -11px; }
  .fall-zoom { height: 150vh; }
  .fall-zoom-innen { height: calc(100svh - 72px); padding: 0 var(--rand); }
  .fall-zoom-bild { width: 100%; }
  .fall-band-spur img { width: 140px; border-radius: 16px; }
  .fall-block { padding-top: 72px; }
  .fall-block h2 { font-size: 38px; line-height: 42px; }
  .fall-bild, .fall-bild-handys { margin-top: 44px; }
  .fall-bild-handys { padding: 20px; gap: 10px; }
  main > section.fall-ergebnis { margin-top: 72px; padding: 72px 0; }
  .fall-ergebnis p:not(.fall-marke) { font-size: 20px; line-height: 28px; }
  .fall-karte { min-height: 300px; }
  .fall-karte h2 { font-size: 52px; line-height: 54px; }
  .start-flagge { margin-bottom: 24px; font-size: 14px; }
  .beweise { flex-direction: column; align-items: center; gap: 8px; }
  .anfrage { padding-top: 72px; padding-bottom: 72px; }
  .quickstart { grid-template-columns: 1fr 1fr; }
  .quickstart-item { min-height: 130px; gap: 20px; padding: 20px; font-size: 18px; }
  .kontakt { padding: 44px 0 90px; }
  .kontakt-raster { grid-template-columns: 1fr; gap: 72px; }
  .kontakt-titel { font-size: 44px; line-height: 46px; }
  .kontakt-lede { font-size: 18px; line-height: 25px; }
  .anfrage-form { margin-top: 44px; gap: 36px; }
  .frage > legend, .frage > label { gap: 10px; font-size: 18px; line-height: 23px; }
  .frage input[type="text"] { font-size: 18px; }
  .wahl label { padding: 11px 16px; font-size: 16px; }
  .kontakt-tel { font-size: 34px; line-height: 38px; }
  .daumen { position: fixed; z-index: 90; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .daumen .pille { height: 50px; box-shadow: 0 8px 20px rgb(12 26 36 / .18); }
}
/* Geräte ohne Maus: Knöpfe und Karten zeigen beim Antippen dieselbe Füllung wie am Rechner beim Drüberfahren */
@media (hover: none) {
  .pille:active::before, .btn:active::before { transform: translateY(-100%); border-radius: 0; transition-duration: .3s; }
  .pille:active span { color: var(--fuell-text); }
  .btn:active { color: var(--fuell-text); }
  .quickstart-item:active { background: var(--nacht); color: var(--weiss); transform: translateY(-4px); }
  .reiter-knopf:active { background: #ebf0f6; }
  .text-link:active::after { transform: scaleX(1); }
  .text-link:active svg { transform: translateX(3px); }
  .mehr:active i { transform: rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .wort > span { transform: none; }
}