/* Flowlee · Desktop „Seite in der Seite“ (Desktop-Gesamtrunde 20.10.2026)
   Wird NUR ab 1024 px geladen (<link media="(min-width: 1024px)">) – Handy und Tablet bleiben exakt wie abgenommen.
   Prinzip (freigegebener Konzeptentwurf /desktop-konzept/): außen eine farbige Bühne (Farbe von desktop.js zwischen
   Stationen weich überblendet), innen ein kompakter Seitenkörper (max. 1120 px) aus großen, weich gerundeten Flächen.
   Jeder Abschnitt der Seite ist eine Fläche; gleichfarbige Nachbarn wachsen zu einer Fläche zusammen.
   Bewegung nur unter html.d-bewegt (desktop.js: ≥ 1024 px, keine reduzierte Bewegung) – ohne Skript, bei reduzierter
   Bewegung und im Ausgangszustand steht alles ruhig im Endzustand. */

:root {
  --koerper: min(1120px, calc(100vw - 144px));
  --d-rund: 40px;
  --d-innen: 56px;
  --d-abstand: 20px;
  --d-kopf-oben: 14px;
  --d-kopf-h: 64px;
  --d-lavendel: #E5E2EE;
  --d-warm: #FAF8F4;
}

/* ---------- Bühne ---------- */
html[data-desktop] { background: var(--d-lavendel); overflow-x: clip; scroll-padding-top: 104px; }
html[data-desktop] body { background: transparent; overflow-x: clip; }

/* ---------- Kopfleiste: am Körper ausgerichtet, schwebend, immer dunkel ---------- */
html[data-desktop] .site-header,
html[data-desktop] .site-header.is-scrolled,
html[data-desktop] .site-header.ist-hell {
  --kopf-h: var(--d-kopf-h);
  top: var(--d-kopf-oben);
  left: 0;
  right: 0;
  width: var(--koerper);
  height: var(--d-kopf-h);
  margin: 0 auto;
  padding: 0 12px 0 28px;
  gap: 24px;
  border-radius: 20px;
  background: rgb(32 33 36 / .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #FFFFFF;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .06), 0 14px 32px -20px rgb(0 0 0 / .55);
  view-transition-name: kopf;
}
html[data-desktop] .site-header.ist-hell .site-header__logo-hell { display: block !important; }
html[data-desktop] .site-header.ist-hell .site-header__logo-dunkel { display: none !important; }
html[data-desktop] .site-header.ist-hell .site-header__call { border-color: var(--tuerkis); }
html[data-desktop] .site-header.ist-hell .site-header__cta { border-color: rgb(255 255 255 / .24); }
html[data-desktop] .site-header.ist-hell .site-header__cta:hover,
html[data-desktop] .site-header.ist-hell .kopf-nav a:hover { background: rgb(255 255 255 / .08); }
html[data-desktop] .site-header__cta { height: 44px; border-radius: 10px; }
html[data-desktop] .site-header__call { width: 44px; height: 44px; }
html[data-desktop] .kopf-nav a { white-space: nowrap; }
@media (max-width: 1180px) {
  html[data-desktop] .site-header,
  html[data-desktop] .site-header.is-scrolled,
  html[data-desktop] .site-header.ist-hell { gap: 12px; padding-left: 22px; }
  html[data-desktop] .kopf-nav ul { gap: 0; }
  html[data-desktop] .kopf-nav a { padding: 10px 7px; font-size: 14px; }
  html[data-desktop] .kopf-nav a[aria-current="page"]::after { left: 7px; right: 7px; }
  html[data-desktop] .site-header__actions { gap: 8px; margin-left: 4px; }
  html[data-desktop] .site-header__cta { padding: 0 12px; }
}

/* ---------- Seitenkörper und Flächen ---------- */
html[data-desktop] main {
  display: flex;
  flex-direction: column;
  gap: var(--d-abstand);
  width: var(--koerper);
  margin: 0 auto;
  padding-top: calc(var(--d-kopf-oben) + var(--d-kopf-h) + var(--d-abstand));
}
html[data-desktop] main > section {
  --pad: var(--d-innen);
  --innen: var(--d-innen);
  --rhythmus: 88px;
  --kopf-start: 0px;
  position: relative;
  border-radius: var(--d-rund);
  overflow: clip;
}
/* gleichfarbige Nachbarn: eine zusammenhängende Fläche (die Haarlinie dazwischen bleibt) */
html[data-desktop] main > .teil--hell + .teil--hell,
html[data-desktop] main > .teil--grau + .teil--grau,
html[data-desktop] main > .teil--dunkel + .teil--dunkel { margin-top: calc(-1 * var(--d-abstand)); border-top-left-radius: 0; border-top-right-radius: 0; }
html[data-desktop] main > .teil--hell:has(+ .teil--hell),
html[data-desktop] main > .teil--grau:has(+ .teil--grau),
html[data-desktop] main > .teil--dunkel:has(+ .teil--dunkel) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
html[data-desktop] main > .teil--hell + .teil--hell > :first-child,
html[data-desktop] main > .teil--grau + .teil--grau > :first-child { padding-top: 72px; }

/* Rhythmus innerhalb der Flächen */
html[data-desktop] .teil { padding: 80px var(--d-innen); }
html[data-desktop] .teil--hell + .teil--hell, html[data-desktop] .teil--grau + .teil--grau { padding-top: 0; }
html[data-desktop] .einstieg { padding: 72px var(--d-innen) 72px; }
html[data-desktop] .schluss { padding: 80px var(--d-innen) 80px; }
html[data-desktop] .kontakt { padding: 72px var(--d-innen); }

/* ---------- Typografie: kleiner, ruhiger (Konzept: H1 68–80, H2 36–44) ---------- */
html[data-desktop] .einstieg__titel { font-size: clamp(52px, 4.9vw, 74px); line-height: 1; letter-spacing: -.035em; }
html[data-desktop] .einstieg--mit-bild .einstieg__titel { font-size: clamp(46px, 4.3vw, 64px); }
html[data-desktop] .einstieg__text { font-size: 18px; max-width: 32em; }
html[data-desktop] .teil__titel { font-size: clamp(34px, 3.1vw, 44px); line-height: 1.05; }
html[data-desktop] .seitlich > .teil__kopf { top: 104px; }
html[data-desktop] .seitlich > .teil__kopf .teil__titel { font-size: clamp(32px, 2.9vw, 42px); }
html[data-desktop] .teil__vorspann, html[data-desktop] .fliess p { font-size: 18px; }
html[data-desktop] .schluss__titel { font-size: clamp(44px, 4.3vw, 62px); max-width: 13em; }
html[data-desktop] .schluss__text { font-size: 18px; }
html[data-desktop] .kontakt__titel { font-size: clamp(42px, 3.9vw, 56px); }
html[data-desktop] .kontakt__text { font-size: 18px; }
html[data-desktop] .stufe__betrag { font-size: clamp(44px, 4vw, 58px); }
html[data-desktop] .tafel__betrag { font-size: 64px; }
html[data-desktop] .tafel { border-radius: 28px; }

/* ---------- Fuß: letzte, dunkle Fläche im Körper ---------- */
html[data-desktop] body > .fuss {
  --innen: var(--d-innen);
  width: var(--koerper);
  margin: var(--d-abstand) auto 24px;
  padding: 56px var(--d-innen) 28px;
  border-radius: 32px;
}
html[data-desktop] body > .fuss--knapp { padding: 18px var(--d-innen); border-radius: 22px; }

/* =====================================================================
   STARTSEITE
   ===================================================================== */

/* 1 · Einstieg (freigegeben): dunkle Fläche, Text links, FastTuning rechts über die Kante, Beschriftung darunter */
html[data-desktop] main > .hero {
  min-height: 0;
  overflow: visible;
  isolation: isolate;
  background: transparent;
  container-type: normal;
}
html[data-desktop] .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--d-rund); background: #202124; transform-origin: 50% 50%; }
html[data-desktop][data-background="anthrazit"] .hero__stage {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  grid-template-areas: "intro show" "cta show" "ctx show";
  align-content: center;
  align-items: start;
  column-gap: 44px;
  row-gap: 0;
  padding: 72px 0 64px var(--d-innen);
  overflow: visible;
}
html[data-desktop][data-background="anthrazit"] .hero__intro { align-self: end; }
html[data-desktop][data-background="anthrazit"] .hero__title { font-weight: 850; font-size: clamp(60px, 5.3vw, 78px); line-height: .98; letter-spacing: -.042em; }
html[data-desktop][data-background="anthrazit"] .hero__sub { max-width: 24em; margin-top: 22px; font-size: 18px; line-height: 1.55; color: #E4E5E8; }
html[data-desktop][data-background="anthrazit"] .hero__cta { margin-top: 28px; min-width: 0; min-height: 54px; gap: 22px; padding: 14px 18px 14px 22px; border-radius: 12px; }
html[data-desktop][data-background="anthrazit"] .hero__cta-label { font-size: 18px; font-weight: 800; }
html[data-desktop][data-background="anthrazit"] .hero__cta-arrow { width: 22px; }
html[data-desktop][data-background="anthrazit"] .hero__context { margin-top: 16px; font-size: 14px; }
html[data-desktop][data-background="anthrazit"] .hero .website-showcase { grid-area: show; align-self: center; width: auto; max-width: none; margin: 0 -48px 0 0; padding: 0; overflow: visible; }
html[data-desktop] .hero .ws-stage { aspect-ratio: auto; height: auto; width: 100%; max-width: none; margin: 0; }
html[data-desktop] .hero .ws-scene { position: static; perspective: none; transform-style: flat; }
html[data-desktop] .hero .ws-item--left, html[data-desktop] .hero .ws-item--right { display: none; }
html[data-desktop] .hero .ws-item--front { position: static; width: 100%; transform: none; }
html[data-desktop] .hero .ws-float { animation: none !important; transform: none !important; translate: none !important; }
html[data-desktop] .hero .ws-item--front .ws-window {
  --bar: 22px;
  padding: 0 2px 2px;
  border-radius: 14px;
  background: #2A2B30;
  transform: none;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 28px 50px -30px rgb(0 0 0 / .75);
}
html[data-desktop] .hero .ws-item--front .ws-window::after { display: none; }
html[data-desktop] .hero .ws-bar { height: 22px; margin: 0; padding: 0 11px; background: #2A2B30; border: 0; box-shadow: none; }
html[data-desktop] .hero .ws-dots { gap: 5px; }
html[data-desktop] .hero .ws-dots i { width: 6px; height: 6px; background: rgb(255 255 255 / .28) !important; }
html[data-desktop] .hero .ws-address { display: none; }
html[data-desktop] .hero .ws-screen { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 0 0 12px 12px; }
html[data-desktop] .ws-unterschrift[hidden] { display: block; }
html[data-desktop] .ws-unterschrift { width: fit-content; margin: 8px 48px 0 auto; padding: 6px 10px; border-radius: 10px; background: #202124; font-size: 14px; line-height: 1.45; color: #B8BAC0; text-align: right; text-wrap: balance; }
html[data-desktop] .ws-unterschrift strong { color: #FFFFFF; font-weight: 800; }

/* 2 · Leistungen: warme Fläche, Liste links, eingebettete Zone rechts */
html[data-desktop] .leistungen {
  --l-gross: clamp(28px, 2.3vw, 33px);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: 44px;
  align-items: start;
  padding: 56px var(--d-innen);
  background: var(--d-warm);
  color: #202124;
}
html[data-desktop] .leistungen__kopf { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 44px; align-items: end; max-width: none; margin: 0 0 36px; }
html[data-desktop] .leistungen__titel { margin: 0; font-size: clamp(34px, 3vw, 42px); line-height: 1.04; letter-spacing: -.028em; }
html[data-desktop] .leistungen__intro { max-width: none; font-size: 17px; line-height: 1.6; color: #3A3B40; }
html[data-desktop] .kette { grid-column: 1; max-width: none; margin: 0; padding: 0; border-top: 2px solid #202124; }
html[data-desktop] .kette::before, html[data-desktop] .kette__linie, html[data-desktop] .kette__icon { display: none; }
html[data-desktop] .kette__station { padding: 26px 56px 26px 22px; border-bottom: 1px solid rgb(0 0 0 / .12); }
html[data-desktop] .kette__station + .kette__station { margin-top: 0; }
html[data-desktop] .kette__station::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px; border-radius: 2px; background: #641AFF; transform: scaleY(0); transform-origin: top; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
html[data-desktop] .kette__station.ist-aktiv::before { transform: scaleY(1); }
html[data-desktop] .kette__name { font-size: var(--l-gross); line-height: 1.05; letter-spacing: -.025em; }
html[data-desktop] .kette__station.ist-aktiv .kette__name,
html[data-desktop] .kette__station:hover .kette__name,
html[data-desktop] .kette__station:focus-visible .kette__name { color: #641AFF; transform: none; }
html[data-desktop] .kette__satz { margin-top: 8px; padding-right: 0; font-size: 17px; line-height: 1.5; color: #3A3B40; }
html[data-desktop] .kette__pfeil { right: 0; top: 50%; bottom: auto; margin-top: -20px; }
html[data-desktop] .lz-zone[hidden] { display: block; }

/* die Zone (nur Desktop, aria-hidden): vier gekennzeichnete Beispiele */
html[data-desktop] .lz-zone { grid-column: 2; position: sticky; top: 104px; height: 400px; border-radius: 28px; background: #ECEDEF; overflow: hidden; transition: background-color .7s cubic-bezier(.2, .7, .2, 1); }
.lz-zone[data-aktiv="web"] { background: #202124; }
.lz-zone[data-aktiv="auto"] { background: #2A2B30; }
.lz-zone[data-aktiv="kunden"] { background: #F1EBFF; }
.lz-zustand { position: absolute; inset: 30px; opacity: 0; visibility: hidden; transform: translateY(20px) scale(.98); transition: opacity .35s ease, transform .7s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .7s; }
.lz-zone[data-aktiv="ads"] .lz-zustand--ads, .lz-zone[data-aktiv="web"] .lz-zustand--web, .lz-zone[data-aktiv="auto"] .lz-zustand--auto, .lz-zone[data-aktiv="kunden"] .lz-zustand--kunden { opacity: 1; visibility: visible; transform: none; transition: opacity .7s ease .1s, transform .7s cubic-bezier(.2, .7, .2, 1) .1s, visibility 0s; }
.lz-marke { display: inline-block; margin: 0 0 14px; padding: 4px 11px; border: 1px dashed currentColor; border-radius: 999px; font-size: 12px; font-weight: 700; color: #3A3B40; }
.lz-zustand--auto .lz-marke { color: #B8BAC0; }
.lz-such { padding: 18px; border-radius: 18px; background: #FFFFFF; box-shadow: 0 20px 40px -26px rgb(32 33 36 / .5); }
.lz-such__feld { display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(32 33 36 / .14); font-weight: 650; font-size: 16px; }
.lz-such__feld svg { width: 18px; height: 18px; fill: none; stroke: #5C5E66; stroke-width: 1.6; stroke-linecap: round; }
.lz-such__treffer { display: block; margin-top: 14px; padding: 16px; border-radius: 12px; background: #ECEDEF; }
.lz-such__kennung { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; }
.lz-z { display: block; height: 8px; margin-top: 8px; border-radius: 4px; background: rgb(32 33 36 / .14); width: 92%; }
.lz-z--titel { height: 12px; width: 66%; background: #641AFF; }
.lz-z--kurz { width: 50%; }
.lz-such__knoepfe { display: flex; gap: 8px; margin-top: 14px; }
.lz-such__knoepfe b { padding: 8px 14px; border-radius: 999px; font-size: 13px; box-shadow: inset 0 0 0 1px rgb(32 33 36 / .18); }
.lz-such__knoepfe .lz-anruf { background: #00C8BE; color: #0D0E11; box-shadow: none; }
.lz-zustand--web { inset: 0; }
.lz-fenster { position: absolute; left: 30px; top: 40px; width: 80%; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 24px 50px -26px rgb(0 0 0 / .9); }
.lz-fenster img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.lz-handy { position: absolute; right: 30px; bottom: 28px; width: 24%; padding: 4px; border-radius: 16px; background: #0D0E11; box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 24px 40px -20px rgb(0 0 0 / .95); }
.lz-handy img { display: block; width: 100%; height: auto; border-radius: 12px; aspect-ratio: 390 / 760; object-fit: cover; object-position: top; }
.lz-liste { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); overflow: hidden; color: #FFFFFF; }
.lz-liste li { display: grid; grid-template-columns: 26px 1fr auto; column-gap: 12px; align-items: center; padding: 14px 16px; border-top: 1px solid rgb(255 255 255 / .1); font-size: 14px; }
.lz-liste li:first-child { border-top: 0; }
.lz-liste b { font-weight: 750; }
.lz-liste em { font-style: normal; color: #A9ACB3; font-size: 13px; }
.lz-haken { position: relative; width: 24px; height: 24px; border-radius: 50%; background: #00C8BE; }
.lz-haken::after { content: ""; position: absolute; left: 8px; top: 5px; width: 6px; height: 11px; border: solid #0D0E11; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.lz-liste .lz-offen { background: #641AFF; border-top: 0; padding: 18px 16px; }
.lz-offen em { color: rgb(255 255 255 / .85); }
.lz-glocke { width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; }
.lz-form { padding: 18px; border-radius: 18px; background: #FFFFFF; box-shadow: 0 20px 40px -26px rgb(32 33 36 / .5); color: #202124; }
.lz-form p { margin: 0 0 7px; font-weight: 750; font-size: 14px; }
.lz-form span { display: inline-block; margin: 0 4px 10px 0; padding: 7px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18); font-size: 13px; }
.lz-form .lz-an { background: #641AFF; color: #FFFFFF; box-shadow: none; }
.lz-karte { position: relative; margin: -22px -8px 0 auto; width: 76%; padding: 16px 18px; border-radius: 14px; background: #202124; color: #FFFFFF; box-shadow: 0 26px 46px -22px rgb(32 33 36 / .7); }
.lz-karte b { display: block; margin-bottom: 3px; font-size: 15px; }
.lz-karte span { font-size: 14px; color: #B8BAC0; }
@keyframes lz-von-unten { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lz-von-links { from { transform: translateX(-48px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lz-von-rechts { from { transform: translateX(48px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lz-haken-fuellt { from { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .4); } to { background: #00C8BE; box-shadow: none; } }
@keyframes lz-anruf { 0%, 40% { background: transparent; color: #202124; box-shadow: inset 0 0 0 1px rgb(32 33 36 / .18); } 100% { background: #00C8BE; box-shadow: 0 0 0 5px rgb(0 200 190 / .18); } }
html.d-bewegt .lz-zone[data-aktiv="ads"] .lz-such__treffer { animation: lz-von-unten .7s cubic-bezier(.2, .7, .2, 1) .25s both; }
html.d-bewegt .lz-zone[data-aktiv="ads"] .lz-anruf { animation: lz-anruf 1.1s ease .5s both; }
html.d-bewegt .lz-zone[data-aktiv="web"] .lz-fenster { animation: lz-von-links 1.1s cubic-bezier(.2, .7, .2, 1) .1s both; }
html.d-bewegt .lz-zone[data-aktiv="web"] .lz-handy { animation: lz-von-unten .7s cubic-bezier(.2, .7, .2, 1) .45s both; }
html.d-bewegt .lz-zone[data-aktiv="auto"] .lz-liste li:not(.lz-offen) .lz-haken { animation: lz-haken-fuellt .35s ease both; }
html.d-bewegt .lz-zone[data-aktiv="auto"] .lz-liste li:nth-child(1) .lz-haken { animation-delay: .3s; }
html.d-bewegt .lz-zone[data-aktiv="auto"] .lz-liste li:nth-child(2) .lz-haken { animation-delay: .6s; }
html.d-bewegt .lz-zone[data-aktiv="auto"] .lz-liste li:nth-child(3) .lz-haken { animation-delay: .9s; }
html.d-bewegt .lz-zone[data-aktiv="auto"] .lz-offen { animation: lz-von-unten .7s cubic-bezier(.2, .7, .2, 1) 1.1s both; }
html.d-bewegt .lz-zone[data-aktiv="kunden"] .lz-karte { animation: lz-von-rechts .7s cubic-bezier(.2, .7, .2, 1) .45s both; }

/* 3 · Projekte: helle Fläche, drei Arbeiten versetzt statt Wischspur; Logos ruhig in einer Reihe */
html[data-desktop] .galerie {
  --g-grund: #ECEDEF;
  --g-text: #202124;
  --g-grau: #5C5E66;
  padding: 56px var(--d-innen) 48px;
  background: var(--g-grund);
}
html[data-desktop] .galerie__titel { max-width: none; margin: 0 0 36px; padding: 0; font-size: clamp(34px, 3vw, 42px); line-height: 1.04; letter-spacing: -.028em; }
html[data-desktop] .galerie__spur {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 48px;
  align-items: start;
  overflow: visible;
  padding: 0;
  scroll-snap-type: none;
}
html[data-desktop] .galerie__spur::after { display: none; }
html[data-desktop] .projekt { min-width: 0; }
html[data-desktop] .projekt:nth-child(1) { grid-column: 1 / 8; }
html[data-desktop] .projekt:nth-child(2) { grid-column: 8 / 13; margin-top: 96px; }
html[data-desktop] .projekt:nth-child(3) { grid-column: 4 / 11; }
html[data-desktop] .projekt__link,
html[data-desktop] .galerie:not(.hat-skript) .projekt__link { transform: none; opacity: 1; }
html[data-desktop] .projekt__link:focus-visible { outline-color: #202124; }
html[data-desktop] .projekt__buehne,
html[data-desktop] .projekt:first-child .projekt__buehne { position: relative; aspect-ratio: auto; transform: none; padding-right: 13%; }
html[data-desktop] .projekt__desktop { position: relative; width: 100%; border-radius: 14px; background: #2A2B30; box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 28px 50px -30px rgb(0 0 0 / .6); }
html[data-desktop] .projekt__bar { height: 22px; padding: 0 11px; background: #2A2B30; }
html[data-desktop] .projekt__desktop img { height: auto; border-radius: 0 0 12px 12px; }
html[data-desktop] .projekt__handy { right: 0; top: 22%; bottom: auto; width: 24%; height: auto; border-radius: 20px; }
html[data-desktop] .projekt__handy img { height: auto; aspect-ratio: 390 / 760; border-radius: 16px; }
html[data-desktop] .projekt__text { position: static; width: auto; margin: 18px 0 0; padding-top: 14px; border-top: 2px solid #202124; gap: 3px; }
html[data-desktop] .projekt__name { font-weight: 900; font-size: 20px; color: #202124; }
html[data-desktop] .projekt__branche { font-size: 15px; color: #5C5E66; }
html[data-desktop] .projekt__live { margin-top: 6px; font-size: 15px; font-weight: 700; color: #641AFF; border-bottom-color: #641AFF; }
html[data-desktop] .projekt__link:hover .projekt__live { color: #0A8F88; border-bottom-color: #0A8F88; }
/* die zweite Arbeit ragt über die rechte Innenkante */
html[data-desktop] .projekt:nth-child(2) .projekt__buehne { margin-right: -48px; padding-right: 0; }
html[data-desktop] .projekt:nth-child(2) .projekt__desktop { width: 86%; }
html[data-desktop] .projekt:nth-child(2) .projekt__text { margin-right: 48px; }
html[data-desktop] main > .galerie { overflow: visible; }
/* Logos: dunkles Band (Originalfarben bleiben lesbar); laufen seit 20.10.2026 wie mobil (Dennis: „muss laufen wie bei mobile“).
   Die Ausblendung an den Rändern liegt auf der Spur, nicht auf dem Band – so bleiben die runden Ecken des Bandes sichtbar. */
html[data-desktop] .vertrauen { margin-top: 56px; padding: 26px 0; border-radius: 22px; background: #202124; -webkit-mask-image: none; mask-image: none; overflow: hidden; }
html[data-desktop] .vertrauen__lauf { gap: 72px; padding-right: 72px; }
html[data-desktop] .vertrauen__fenster { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%); }

/* 4 · Person: kompakter, freundlicher Abschluss der Arbeit – weiße Fläche, Foto links */
html[data-desktop] .person { --p-grund: #FFFFFF; --p-text: #202124; --p-fliess: #3A3B40; padding: 56px var(--d-innen); background: #FFFFFF; color: #202124; }
html[data-desktop] .person__raster { max-width: none; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 48px; row-gap: 18px; align-items: start; }
html[data-desktop] .person__foto { grid-column: 1; grid-row: 1 / 3; aspect-ratio: 4 / 4.6; border-radius: 28px; overflow: hidden; }
html[data-desktop] .person__titel { grid-column: 2; grid-row: 1; margin-top: 24px; font-size: clamp(34px, 3vw, 42px); line-height: 1.04; letter-spacing: -.028em; max-width: none; }
html[data-desktop] .person__titel span { display: block; }
html[data-desktop] .person__text { grid-column: 2; grid-row: 2; }
html[data-desktop] .person__text p { max-width: 36em; font-size: 17px; line-height: 1.6; color: #3A3B40; }
html[data-desktop] .person__cta { background: #641AFF; color: #FFFFFF; }
html[data-desktop] .person__cta:hover { background: #7334FF; }
html[data-desktop] .person__cta:focus-visible { outline-color: #202124; }

/* 5 · Kundenstimmen: violette Fläche */
html[data-desktop] .stimmen { --s-pad: var(--d-innen); --aufstieg: 1; background: #641AFF; }
html[data-desktop] .stimmen__flaeche, html[data-desktop] .stimmen__inhalt { transform: none; will-change: auto; }
html[data-desktop] .stimmen__inhalt { max-width: none; padding: 64px 0 56px; }
html[data-desktop] .stimmen__titel { font-size: clamp(34px, 3vw, 42px); line-height: 1.04; margin-bottom: 40px; max-width: 16em; }

/* 6–8 · Preise, Fragen, Abschluss: Systemflächen; Abschluss mit Karte */
html[data-desktop] .preise-titel { font-size: clamp(40px, 3.6vw, 52px); }

/* =====================================================================
   UNTERSEITEN – eigene Kompositionen in derselben Sprache
   ===================================================================== */
/* Einstieg ohne Bild (Ads, Google Ads, Relaunch, SHK): editorial – Titel links unten, Satz und Knopf rechts */
html[data-desktop] main > section[class="einstieg"] {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto 1fr auto auto auto auto;
  column-gap: 64px;
  min-height: 500px;
  padding-top: 64px;
  padding-bottom: 64px;
}
html[data-desktop] main > section[class="einstieg"] > * { grid-column: 2; }
html[data-desktop] main > section[class="einstieg"] > .einstieg__marke { grid-column: 1 / -1; grid-row: 1; }
html[data-desktop] main > section[class="einstieg"] > .einstieg__titel { grid-column: 1; grid-row: 2 / 7; align-self: end; margin: 0; }
html[data-desktop] main > section[class="einstieg"] > .einstieg__text { grid-row: 3; margin-bottom: 26px; font-size: 17px; }
html[data-desktop] main > section[class="einstieg"] > .knopf { grid-row: 4; width: auto; max-width: none; justify-self: start; gap: 22px; white-space: nowrap; font-size: 18px; }
html[data-desktop] main > section[class="einstieg"] > .knopf__mikro { grid-row: 5; }
html[data-desktop] main > section[class="einstieg"] > .einstieg__zweit { grid-row: 6; margin-top: 8px; }
html[data-desktop] main > section[class="einstieg"] .einstieg__unterzeile { display: block; margin-top: 14px; font-size: .42em; line-height: 1.15; letter-spacing: -.015em; color: var(--hell-text); }
/* violetter Akzentstrich als ruhiger Anker oben rechts */
html[data-desktop] main > section[class="einstieg"]::after { content: ""; position: absolute; right: var(--d-innen); top: 64px; width: 56px; height: 4px; border-radius: 2px; background: var(--tuerkis); }

/* Automatisierung: Titel kleiner, damit der Ablauf rechts das Gewicht trägt */
html[data-desktop] .einstieg--ablauf { padding-bottom: 72px; column-gap: 56px; }
html[data-desktop] .einstieg--ablauf .einstieg__titel { font-size: clamp(46px, 4.1vw, 60px); }

/* Webdesign: Einstieg und Projektraum bilden eine dunkle Fläche; der Raum bleibt in der Fläche */
html[data-desktop] main > .einstieg--raum { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 40px; }
html[data-desktop] main > .einstieg--raum + .raum { margin-top: calc(-1 * var(--d-abstand)); border-top-left-radius: 0; border-top-right-radius: 0; }
html[data-desktop] .einstieg--raum .einstieg__titel { font-size: clamp(56px, 5.4vw, 80px); margin-bottom: 32px; }
html[data-desktop] .raum { padding: 0 0 56px; }
html[data-desktop] .raum__buehne { aspect-ratio: 16 / 9.4; max-width: none; margin: 0 var(--d-innen); width: auto; }
html[data-desktop] .raum__ebene--hinten { right: 0; top: 2%; width: 58%; }
html[data-desktop] .raum__ebene--vorn { left: 0; top: 20%; width: 64%; }
html[data-desktop] .raum__ebene--handy { right: 9%; bottom: 2%; width: 15%; }
html[data-desktop] .raum__ebene--vorn .raum__marke { left: 16px; }
html[data-desktop] .raum__legende { margin: 40px var(--d-innen) 0; }

/* Themen (Webdesign, Website erstellen lassen): Akzentwörter kleiner – keine Riesenzeilen */
html[data-desktop] .thema__titel { font-size: clamp(42px, 3.9vw, 56px); }
html[data-desktop] .themen .thema--akzent .thema__titel { font-size: clamp(64px, 6vw, 88px); margin-bottom: 28px; }

/* Werbeanzeigen: zwei Kanäle als zwei Hälften einer Fläche */
html[data-desktop] main > .kanaele { background: #FFFFFF; }
html[data-desktop] .kanaele__kopf { padding-bottom: 36px; }
html[data-desktop] .kanal { padding: 56px var(--d-innen) 64px; }
html[data-desktop] .kanal--google { padding-left: var(--d-innen); }
html[data-desktop] .kanal--meta { padding-right: var(--d-innen); }
html[data-desktop] .kanal__satz { font-size: clamp(34px, 3.1vw, 44px); }
html[data-desktop] .kanal__text { font-size: 17px; }
html[data-desktop] .kanaele__start { font-size: 19px; }

/* Zielseite /anfragen/ (ohne Kopfleiste): Bühne als erste dunkle Fläche */
html[data-desktop] body.seite-anfragen main { padding-top: var(--d-abstand); }
html[data-desktop] main > .an-buehne { min-height: min(820px, calc(100svh - 40px)); background: #0B0A0F; }
html[data-desktop] .an-dreiklang { font-size: clamp(48px, 4.6vw, 68px); }
html[data-desktop] .an-inhalt { min-height: min(820px, calc(100svh - 40px)); }

/* Rechtliches, Formulare, Bestätigung: ruhig – keine Flächenbewegung (desktop.js liest data-d-ruhig) */
html[data-desktop] .recht { padding-top: 64px; }

/* =====================================================================
   MOTION (nur html.d-bewegt) – bewegt werden Flächenränder, Hintergrundebenen und Bilder, nie laufender Text
   ===================================================================== */
/* Flächen: ziehen sich beim Ein- und Austreten leicht von den Seiten zusammen (--z 0…1, desktop.js) */
html.d-bewegt main > [data-d-flaeche] { clip-path: inset(calc(var(--z, 0) * 10px) calc(var(--z, 0) * 22px) round calc(var(--d-rund) + var(--z, 0) * 26px)); }
/* Einstieg Start: Grundfläche zieht sich zusammen, Bild + Beschriftung wandern gemeinsam über die untere Rundung */
html.d-bewegt .hero::before { transform: scale(calc(1 - var(--p, 0) * .05)); border-radius: calc(var(--d-rund) + var(--p, 0) * 28px); }
html.d-bewegt[data-background="anthrazit"] .hero .website-showcase { transform: translate3d(calc(var(--p, 0) * -32px), calc(var(--p, 0) * 92px), 0); }
html.d-bewegt .hero .ws-item--front .ws-window { transform-origin: 0 100%; transform: rotate(calc(var(--p, 0) * -1.5deg)); }
/* einmaliger Einstieg je Sitzung: das Fenster legt sich an */
@keyframes d-anlegen { from { opacity: 0; translate: 40px 0; } to { opacity: 1; translate: 0 0; } }
html.d-bewegt.d-erstmals .hero .ws-stage { animation: d-anlegen .9s cubic-bezier(.2, .7, .2, 1) .15s both; }
/* Projekte: die erste Arbeit öffnet sich aus einem Ausschnitt, die zweite tritt über die Kante (galerie.js: --eintritt) */
html.d-bewegt .galerie.hat-skript .projekt:nth-child(1) .projekt__desktop { clip-path: inset(calc((1 - var(--eintritt, 1)) * 14%) calc((1 - var(--eintritt, 1)) * 20%) round 14px); }
html.d-bewegt .galerie.hat-skript .projekt:nth-child(2) .projekt__buehne { transform: translate3d(calc((1 - var(--eintritt, 1)) * min(48px, (100vw - var(--koerper)) / 2 - 60px)), calc((1 - var(--eintritt, 1)) * 48px), 0); }

/* Seitenwechsel: Inhalt blendet weich über, die Kopfleiste bleibt stehen */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: d-vt-raus .28s cubic-bezier(.2, .7, .2, 1) both; }
::view-transition-new(root) { animation: d-vt-rein .42s cubic-bezier(.2, .7, .2, 1) .04s both; }
@keyframes d-vt-raus { to { opacity: 0; transform: translateY(-16px); } }
@keyframes d-vt-rein { from { opacity: 0; transform: translateY(18px); } }

@media (prefers-reduced-motion: reduce) {
  .lz-zone, .lz-zustand, .kette__station::before { transition: none !important; }
}