/* ==========================================================================
   VECOM DESIGN — app.css
   Design-DNA: filmisch · präzise · kühl-elegant
   Alle Werte kommen aus den Tokens unten. Nichts hart kodieren.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Farbe — Basis aus dem Logo abgeleitet (Blau #0648E8 → Cyan #1FE8FF) */
  --c-base:        #05070d;   /* tiefster Grund */
  --c-base-2:      #080b13;
  --c-surface:     #0c1119;   /* Karten, Flächen */
  --c-surface-2:   #111826;
  --c-line:        rgba(150, 180, 230, .13);
  --c-line-strong: rgba(150, 180, 230, .26);

  --c-text:        #e9eef8;
  --c-text-dim:    #97a5bf;
  --c-text-faint:  #808ea9;

  --c-blue-deep:   #0648e8;
  --c-blue:        #0a78f5;
  --c-cyan:        #1fe8ff;
  --grad-brand:    linear-gradient(135deg, var(--c-blue-deep) 0%, var(--c-blue) 45%, var(--c-cyan) 100%);
  --grad-text:     linear-gradient(100deg, #cfe0ff 0%, #ffffff 35%, #79c8ff 70%, #1fe8ff 100%);

  /* Typografie — Ratio 1.25, fluid */
  --f-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-text:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-xs:   clamp(.72rem, .70rem + .1vw, .78rem);
  --t-sm:   clamp(.84rem, .82rem + .12vw, .92rem);
  --t-base: clamp(1rem, .96rem + .2vw, 1.09rem);
  --t-md:   clamp(1.15rem, 1.06rem + .4vw, 1.4rem);
  --t-lg:   clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  --t-xl:   clamp(2rem, 1.5rem + 2.2vw, 3.4rem);
  --t-2xl:  clamp(2.6rem, 1.6rem + 4.4vw, 5.6rem);
  --t-3xl:  clamp(2.6rem, 1.6rem + 4.0vw, 5.2rem);
  /* DER BOGEN — vier Lautstärken statt einer
     ---------------------------------------------------------------------
     Neun Abschnittsüberschriften standen auf exakt derselben Größe (54px bei
     1440). Wo alles gleich laut ist, ist nichts wichtig: Der Leser hat kein
     Mittel zu erkennen, worauf es ankommt, und liest deshalb alles gleich
     flüchtig. Dazu kam eine Skala, die sich oben selbst widersprach —
     --t-2xl (89px) war größer als --t-3xl (83px), und weil der Kontaktblock
     auf 2xl saß, war die lauteste Type der ganzen Seite ihr letzter
     Abschnitt. Die Seite gipfelte im Formular.

     Die Leiter heißt jetzt, von oben nach unten:
       Hero            --t-3xl   das Versprechen
       Höhepunkt       --t-hoehe der Preis
       Hauptabschnitt  --t-xl    Arbeiten, Leistungen, Ablauf, Über mich
       Nebenabschnitt  --t-lg    Säulen, Partner, Fragen, Stimmen

     Warum eine eigene Stufe statt --t-2xl: Auf dem Handy stehen 3xl und 2xl
     beide auf ihrem Minimum von 2,6rem und wären wieder gleich groß. Der
     Hero darf dort nicht wachsen (die Zeile bricht sonst schlecht), also
     tritt der Höhepunkt zurück — die Leiter hält auf 390px genauso wie auf
     1440px. */
  --t-hoehe: clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem);

  /* Raster & Abstände — 8px-Skala */
  --s-1: .5rem;  --s-2: 1rem;   --s-3: 1.5rem; --s-4: 2rem;
  --s-5: 3rem;   --s-6: 4rem;   --s-7: 6rem;   --s-8: 8rem;
  --section-y: clamp(5rem, 9vw, 10rem);
  --page-x:    clamp(1.25rem, 5vw, 5.5rem);
  --maxw:      1320px;
  --radius:    18px;
  --radius-lg: 12px;   /* war 26px — grosse Radien lassen Bloecke aufgeblasen wirken */

  /* Höhenstufen — auf dunklem Grund macht nicht der Schatten allein die Höhe,
     sondern die Kombination aus Schatten unten und Lichtkante oben. */
  --elev-1:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 2px 6px -2px rgba(0, 0, 0, .7),
    0 20px 44px -22px rgba(0, 0, 0, .9);
  --elev-2:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 4px 10px -4px rgba(0, 0, 0, .75),
    0 34px 70px -28px rgba(0, 0, 0, .95);
  --elev-hover:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 6px 14px -5px rgba(0, 0, 0, .8),
    0 48px 90px -30px rgba(0, 0, 0, 1),
    0 0 60px -20px rgba(10, 120, 245, .5);

  /* Textschatten — Schrift liegt auf dem Grund, statt darin zu kleben */
  --ink-drop:   0 1px 1px rgba(0, 0, 0, .55), 0 14px 30px rgba(0, 0, 0, .5);
  --ink-drop-s: 0 1px 1px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .45);
  --ink-filter:
    drop-shadow(0 2px 1px rgba(0, 0, 0, .55))
    drop-shadow(0 0 26px rgba(0, 0, 0, .55))
    drop-shadow(0 26px 44px rgba(0, 0, 0, .75));

  /* Rahmenkante der Flächen. Standard: Markenlicht (blau → cyan).
     Für eine goldene Fassung genügt <body data-frame="gold"> — siehe README. */
  --frame-a: rgba(10, 120, 245, .55);
  --frame-b: rgba(31, 232, 255, .38);
  --frame-c: rgba(150, 180, 230, .10);

  /* Motion-Contract — projektweit ein Satz Werte */
  --d-snap:   120ms;
  --d-ui:     180ms;
  --d-move:   240ms;
  --d-reveal: 520ms;
  --d-scene:  900ms;
  --e-std:  cubic-bezier(.16, 1, .3, 1);
  --e-exit: cubic-bezier(.4, 0, 1, 1);
}

/* ---------- 2. Reset & Grundlagen --------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Eigene display-Regeln übersteuern sonst das hidden-Attribut — das hat im
   Formular das Adressfeld und den Zurück-Knopf zu früh sichtbar gemacht. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-base);
  color: var(--c-text);
  font-family: var(--f-text);
  font-size: var(--t-base);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-stretch: 110%;        /* Breitenachse: nimmt die Sperrung der Wortmarke auf */
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.028em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

/* Schrift liegt auf dem Grund. Verlaufstext braucht filter statt text-shadow:
   bei transparenter Füllung würde ein Textschatten durch die Buchstaben scheinen. */
h2, h3, h4 { text-shadow: var(--ink-drop-s); }
.hero h1 { text-shadow: none; filter: var(--ink-filter); }
.sechead h2, .contact h2 { text-shadow: var(--ink-drop); }
.step__no, .pillar strong { text-shadow: none; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)); }
.sechead p, .contact__lead { text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
/* Der Hero-Fließtext liegt als einziger Absatz direkt vor der Marke. Der weite
   Schatten trägt die Fläche, der enge zweite hält die Buchstabenkanten frei,
   wenn doch einmal ein Glanzlicht dahinter durchwandert. */
.hero__lead { text-shadow: 0 2px 8px rgba(0, 0, 0, .5), 0 0 3px rgba(0, 0, 0, .85); }
.eyebrow, .brand__name { text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
::selection { background: var(--c-blue); color: #fff; }

/* Goldfassung: eine Zeile am <body>, der Rest des Systems bleibt unberührt. */
body[data-frame="gold"] {
  --frame-a: rgba(201, 162, 39, .62);
  --frame-b: rgba(240, 217, 138, .42);
  --frame-c: rgba(201, 162, 39, .12);
}

/* Wiederverwendbare Lichtkante: 1px Verlauf entlang der Kante einer Fläche. */
.framed { position: relative; isolation: isolate; }
.framed::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, var(--frame-a), var(--frame-c) 42%, var(--frame-b));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .75;
  transition: opacity var(--d-move) var(--e-std);
}
.framed:hover::after { opacity: 1; }

:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: var(--s-2); top: -4rem; z-index: 200;
  background: var(--c-surface-2); color: var(--c-text);
  padding: .75rem 1.25rem; border-radius: 999px;
  border: 1px solid var(--c-line-strong);
  transition: top var(--d-ui) var(--e-std);
}
.skip-link/* Goldfassung: eine Zeile am <body>, der Rest des Systems bleibt unberührt. */
body[data-frame="gold"] {
  --frame-a: rgba(201, 162, 39, .62);
  --frame-b: rgba(240, 217, 138, .42);
  --frame-c: rgba(201, 162, 39, .12);
}

/* Wiederverwendbare Lichtkante: 1px Verlauf entlang der Kante einer Fläche. */
.framed { position: relative; isolation: isolate; }
.framed::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, var(--frame-a), var(--frame-c) 42%, var(--frame-b));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .75;
  transition: opacity var(--d-move) var(--e-std);
}
.framed:hover::after { opacity: 1; }

:focus-visible { top: var(--s-2); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--page-x); }
.section { padding-block: var(--section-y); position: relative; }

/* ---------- 3a. Die 3D-Schicht ------------------------------------------ */
/* Liegt hinter allem. Der Inhalt bleibt lesbar, auch wenn sie fehlt. */
#world {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--e-std);
}

/* ---------- 3. Filmische Grundschicht: Korn, Vignette, Licht ------------- */
.grain {
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 90;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 7s steps(6) infinite;
  will-change: transform;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 89;
  background: radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(0,0,0,.55) 100%);
}

/* Scroll-Fortschritt als dünne Lichtlinie */
.progress {
  position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 120;
  background: var(--grad-brand);
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  transition: transform 90ms linear;
}

/* Eigener Cursor (nur feine Zeiger) */
.cursor, .cursor-dot { display: none; }
@media (pointer: fine) {
  .cursor {
    display: block; opacity: 0; position: fixed; z-index: 130; top: 0; left: 0;
    width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
    border: 1px solid var(--c-line-strong);
    pointer-events: none;
    transition: width var(--d-move) var(--e-std), height var(--d-move) var(--e-std),
                margin var(--d-move) var(--e-std), border-color var(--d-ui) linear,
                opacity var(--d-ui) linear, background-color var(--d-ui) linear;
    mix-blend-mode: difference;
  }
  .cursor-dot {
    display: block; opacity: 0; position: fixed; z-index: 131; top: 0; left: 0;
    width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
    background: var(--c-cyan); pointer-events: none;
  }
  body.cursor-ready .cursor, body.cursor-ready .cursor-dot { opacity: 1; }
  body.is-hovering .cursor {
    width: 74px; height: 74px; margin: -37px 0 0 -37px;
    border-color: var(--c-cyan); background: rgba(31, 232, 255, .07);
  }
}

/* ---------- 4. Kopfzeile ------------------------------------------------- */
.header {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  padding-block: clamp(.9rem, 1.6vw, 1.4rem);
  transition: background-color var(--d-move) var(--e-std),
              backdrop-filter var(--d-move) var(--e-std),
              border-color var(--d-move) var(--e-std);
  border-bottom: 1px solid transparent;
}
/* Aus dem Weg beim Abwaertsscrollen. Nur transform, also auf der Grafikkarte;
   und da die Leiste fest steht, aendert sich am Fluss der Seite nichts. */
.header { transition: transform 320ms var(--e-std),
              background-color var(--d-move) var(--e-std),
              backdrop-filter var(--d-move) var(--e-std),
              border-color var(--d-move) var(--e-std); }
.header.ist-weg { transform: translateY(-104%); }
@media (prefers-reduced-motion: reduce) { .header { transition-duration: 1ms; } }
/* Sprungziele nicht unter die Leiste rutschen lassen */
html { scroll-padding-top: clamp(4.5rem, 8vw, 6rem); }

.header.is-stuck {
  background: rgba(5, 7, 13, .72);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--c-line);
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 1);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
/* Marke und Werkzeuge dürfen nicht schrumpfen: Sonst wird ihr Kasten kleiner,
   der Schriftzug läuft heraus und legt sich über das Menü. Nur das Menü in der
   Mitte gibt nach. */
.brand { display: flex; align-items: center; gap: .7rem; flex: 0 0 auto; min-height: 44px; min-width: 44px; }
.header__tools { flex: 0 0 auto; }
.header .nav { flex: 1 1 auto; min-width: 0; justify-content: center; }
.brand img { width: clamp(34px, 4vw, 44px); }
.brand__name {
  font-family: var(--f-display); font-stretch: 96%; font-weight: 600; font-size: var(--t-sm);
  letter-spacing: .34em; text-transform: uppercase; line-height: 1;
}
.brand__name span { display: block; font-size: .62em; letter-spacing: .5em; color: var(--c-text-faint); margin-top: .35em; }

.nav { display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(.75rem, 1.3vw, 1.6rem); }
.nav a {
  font-size: var(--t-sm); color: var(--c-text-dim); position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color var(--d-ui) linear;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--grad-brand); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform var(--d-move) var(--e-std);
}
.nav a:hover, .nav a[aria-current="true"] { color: var(--c-text); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); transform-origin: 0 50%; }
.header__tools { display: flex; align-items: center; gap: var(--s-2); }

/* Sprachwahl */
.lang { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--c-line); border-radius: 999px; }
.lang button {
  background: none; border: 0; cursor: pointer; border-radius: 999px;
  position: relative;
  padding: .34rem .82rem; font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-text-faint);
  transition: color var(--d-ui) linear, background-color var(--d-ui) linear;
}
/* Die Kapsel ist so groß, wie sie aussehen soll. Der Daumen bekommt trotzdem
   44px — aber nur in der Höhe: seitlich stehen die Pillen 2px auseinander, ein
   breiterer Bereich würde in den Nachbarn greifen und die falsche Sprache treffen. */
.lang button::before, .lang--links a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}
.lang button:hover { color: var(--c-text); }
.lang button[aria-pressed="true"] {
  background: var(--c-surface-2); color: var(--c-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 14px -8px rgba(0, 0, 0, .9);
}

.lang--links { align-items: center; }
.lang--links a, .lang--links .lang__current {
  border-radius: 999px; padding: .34rem .82rem; position: relative;
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text-faint); transition: color var(--d-ui) linear, background-color var(--d-ui) linear;
}
.lang--links a:hover { color: var(--c-text); }
.lang--links .lang__current {
  background: var(--c-surface-2); color: var(--c-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 14px -8px rgba(0, 0, 0, .9);
}

.burger {
  display: none; background: none; border: 0; cursor: pointer; padding: .5rem;
  min-width: 44px; min-height: 44px;
  flex-direction: column; justify-content: center; align-items: center;
}
.burger span { display: block; width: 24px; height: 1.5px; background: var(--c-text); transition: transform var(--d-move) var(--e-std), opacity var(--d-ui) linear; }
.burger span + span { margin-top: 6px; }
body.nav-open .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- 5. Buttons --------------------------------------------------- */
/* Ein Knopf, zwei Gewichte. Form aus der Kartenfamilie abgeleitet (weiche Ecke
   statt Vollrundung), damit er wie ein Bauteil der Seite wirkt und nicht wie
   ein zugekaufter Pillen-Button. */
.btn {
  --btn-radius: 14px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: .92rem 1.55rem; min-height: 50px;
  border-radius: var(--btn-radius); border: 0;
  font-size: var(--t-sm); font-weight: 500; letter-spacing: .005em; line-height: 1;
  color: var(--c-text); cursor: pointer; text-shadow: none;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 0 0 1px rgba(150, 180, 230, .16),
    0 2px 6px -3px rgba(0, 0, 0, .8),
    0 16px 30px -20px rgba(0, 0, 0, .95);
  transition: transform var(--d-move) var(--e-std), box-shadow var(--d-move) var(--e-std),
              color var(--d-ui) linear;
}
/* Markenfüllung fährt von unten ein */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-brand);
  transform: translateY(101%);
  transition: transform var(--d-move) var(--e-std);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover {
  color: #fff; transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 4px 10px -4px rgba(0, 0, 0, .85),
    0 22px 44px -20px rgba(10, 120, 245, .75);
}
.btn:active { transform: translateY(0); transition-duration: var(--d-snap); }

/* Hauptknopf: heller Körper mit Lichtkante oben und Kontaktschatten unten */
.btn--primary {
  color: var(--c-base); font-weight: 600;
  background: linear-gradient(180deg, #ffffff 0%, #eaeff9 52%, #d8e0f0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(10, 30, 70, .16),
    0 2px 5px -2px rgba(0, 0, 0, .75),
    0 20px 38px -22px rgba(0, 0, 0, 1);
}
.btn--primary:hover {
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    0 4px 10px -3px rgba(0, 0, 0, .8),
    0 26px 52px -20px rgba(10, 120, 245, .8);
}
/* Kurzer Glanz beim Überfahren — dieselbe Bewegung wie der Lichtstreifen im Hero */
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform var(--d-scene) var(--e-std);
}
.btn--primary:hover::after { transform: translateX(120%); }

/* Der Pfeil sitzt in einem eigenen Kreis — das kleine Detail, an dem man
   teure von schnellen Knöpfen unterscheidet. Beim Überfahren rollt er hinaus
   und ein zweiter kommt von links nach: das Auge liest „es geht weiter". */
.btn__ico {
  position: relative; flex: none; overflow: hidden;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; margin-right: -.35rem;
  background: rgba(10, 20, 40, .10);
  box-shadow: inset 0 0 0 1px rgba(10, 20, 40, .16);
  transition: background-color var(--d-move) var(--e-std), box-shadow var(--d-move) var(--e-std);
}
.btn:not(.btn--primary) .btn__ico {
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(150, 180, 230, .22);
}
.btn__arrow {
  grid-area: 1 / 1; flex: none;
  transition: transform var(--d-scene) var(--e-std), opacity var(--d-move) linear;
}
.btn__arrow--in { transform: translateX(-130%); opacity: 0; }
.btn:hover .btn__arrow--out { transform: translateX(130%); opacity: 0; }
.btn:hover .btn__arrow--in { transform: none; opacity: 1; }
.btn:hover .btn__ico { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.btn:active .btn__ico { transform: scale(.94); }

/* Kompakte Variante für die Kopfzeile */
.header .btn { min-height: 44px; padding: .7rem 1.25rem; }

/* ---------- 6. Hero ------------------------------------------------------ */
.hero {
  position: relative; min-height: 100svh;
  display: grid; align-items: center;
  padding-top: clamp(7rem, 14vh, 11rem); padding-bottom: clamp(6rem, 13vh, 9.5rem);
  overflow: hidden;
}
/* Lichtquelle hinter dem Logo — der einzige „Scheinwerfer" der Seite */
.hero__light {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(46% 38% at 50% 30%, rgba(10, 120, 245, .30), transparent 70%),
    radial-gradient(28% 22% at 50% 24%, rgba(31, 232, 255, .22), transparent 72%),
    radial-gradient(70% 55% at 78% 88%, rgba(6, 72, 232, .16), transparent 70%);
  filter: blur(6px);
}
/* Feines technisches Raster, klingt nach hinten aus */
.hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(150, 180, 230, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(150, 180, 230, .07) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(72% 62% at 50% 40%, #000 20%, transparent 78%);
  transform: perspective(700px) rotateX(0deg);
}
/* Das Logo als Bildmarke im Bildhintergrund — groß, ruhig, mit Parallaxe */
.hero__mark {
  position: absolute; z-index: 0; pointer-events: none;
  top: 46%; left: 50%;
  width: clamp(300px, 46vw, 660px);
  transform: translate3d(calc(-50% + var(--mx, 0px)), calc(-52% + var(--my, 0px)), 0) scale(var(--mk, 1));
  opacity: .17;
  filter: drop-shadow(0 0 90px rgba(10, 120, 245, .5));
  transition: opacity var(--d-scene) var(--e-std);
}
/* Lichtstreifen, der einmal über die Marke wandert */
.hero__sweep {
  position: absolute; z-index: 1; inset: 0; pointer-events: none; overflow: hidden;
  mask-image: radial-gradient(40% 34% at 50% 44%, #000 10%, transparent 72%);
}
/* Nur transform + opacity — `left` würde echte Layout-Verschiebungen erzeugen. */
.hero__sweep::after {
  content: ""; position: absolute; top: -20%; left: 0; width: 22%; height: 140%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
  transform: translate3d(-220%, 0, 0) skewX(-14deg);
  will-change: transform;
  animation: sweep 9s var(--e-std) 2.4s infinite;
}
@keyframes sweep {
  0%   { transform: translate3d(-220%, 0, 0) skewX(-14deg); opacity: 0; }
  8%   { opacity: 1; }
  38%  { transform: translate3d(560%, 0, 0) skewX(-14deg); opacity: 0; }
  100% { transform: translate3d(560%, 0, 0) skewX(-14deg); opacity: 0; }
}

.hero__inner { position: relative; z-index: 2; }
.eyebrow {
  font-family: var(--f-display); font-stretch: 92%;
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: var(--t-xs); letter-spacing: .28em; text-transform: uppercase;
  color: var(--c-text-dim);
}
.eyebrow::before {
  content: ""; width: 34px; height: 1px; background: var(--grad-brand);
}
.hero h1 {
  font-size: var(--t-3xl); font-weight: 700; letter-spacing: -.04em;
  margin-top: var(--s-3); max-width: 13ch;
}
.hero h1 .accent {
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead {
  margin-top: var(--s-3); max-width: 54ch; font-size: var(--t-md); color: var(--c-text-dim);
}
/* Auf breiten Bildschirmen bleibt die rechte Hälfte für die Marke frei.
   Dieser Block muss NACH den Grundregeln stehen: gleiche Spezifität, also
   entscheidet die Reihenfolge. Weiter oben stand er zwar da, wirkte aber nie —
   `max-width: 13ch` und `54ch` kamen danach und haben ihn überschrieben. */
@media (min-width: 900px) {
  .hero h1 { max-width: 52%; }
  .hero__lead { max-width: 54%; }
}
@media (min-width: 1200px) {
  .hero h1 { max-width: 42%; }
  .hero__lead { max-width: 44%; }
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.hero__meta {
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  display: flex; flex-wrap: wrap; gap: clamp(1rem, 4vw, 3.5rem);
  border-top: 1px solid var(--c-line); padding-top: var(--s-3);
}
.hero__meta div { min-width: 120px; }
.hero__meta dt { font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--c-text-faint); }
.hero__meta dd { margin: .45rem 0 0; font-family: var(--f-display); font-size: var(--t-md); }

.scrollcue {
  position: absolute; bottom: clamp(1.2rem, 3vh, 2.2rem); right: var(--page-x);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .7rem;
  transition: opacity var(--d-move) var(--e-std);
  font-size: var(--t-xs); letter-spacing: .24em; text-transform: uppercase; color: var(--c-text-faint);
}
body.scrolled .scrollcue { opacity: 0; }
.scrollcue i { display: block; width: 1px; height: 46px; background: linear-gradient(var(--c-cyan), transparent); animation: cue 2.4s var(--e-std) infinite; transform-origin: 50% 0; }
@keyframes cue { 0%, 100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- 7. Laufband -------------------------------------------------- */
.marquee {
  border-block: 1px solid var(--c-line);
  padding-block: clamp(1rem, 2vw, 1.6rem);
  overflow: hidden; white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track { display: inline-flex; gap: 3.5rem; animation: slide 38s linear infinite; will-change: transform; }
.marquee span {
  font-family: var(--f-display); font-size: var(--t-md); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-faint);
  display: inline-flex; align-items: center; gap: 3.5rem;
}
.marquee span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad-brand); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 8. Sektionskopf --------------------------------------------- */
.sechead { display: grid; gap: var(--s-2); max-width: 66ch; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.sechead h2 { font-size: var(--t-xl); }
/* Der Höhepunkt. Steht auf dem Preis, weil der offene Preis das Mutigste an
   diesem Auftritt ist: In dieser Branche nennt ihn sonst niemand vor dem
   Telefonat. Genau ein Abschnitt trägt diese Größe — zwei Höhepunkte sind
   keiner. */
.sechead--hoehepunkt h2 { font-size: var(--t-hoehe); letter-spacing: -.045em; }
/* Stille vor dem Höhepunkt. Vorher stieß der Preis unmittelbar an die
   Leistungen — zwei dichte Blöcke ohne Atemzug dazwischen, und der Leser kam
   im selben Tempo an, in dem er den vorigen Abschnitt überflogen hat. Ein
   Höhepunkt entsteht nicht durch Lautstärke allein, sondern durch die Pause
   davor. Das ist derselbe Grund, aus dem die beiden Zwischenrufe der Seite
   existieren; hier genügt Raum, weil danach ohnehin ein starker Satz steht. */
#plans { padding-top: calc(var(--section-y) * 1.65); }
/* Zuträger, keine Kapitel: Säulen, Partner, Fragen, Stimmen. Sie beantworten
   Fragen, die erst nach der Entscheidung kommen. */
.sechead--neben h2 { font-size: var(--t-lg); }
.sechead p { color: var(--c-text-dim); font-size: var(--t-md); }
.sechead--split { max-width: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .sechead--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; gap: var(--s-4); }
}

/* ---------- 9. Leistungen ------------------------------------------------ */
/* Kein aeusserer Rahmen mehr und keine Erhebung: der Container war ein Kasten,
   dessen Zellen nochmal Kaesten waren. Uebrig bleiben Haarlinien — die 1-px-
   Luecken zeigen die Linienfarbe, die Zellen tragen den Seitengrund. */
.services {
  display: grid; gap: 1px; background: var(--c-line);
  border-radius: 0; overflow: hidden;
  border-block: 1px solid var(--c-line);
}
@media (min-width: 760px)  { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .services { grid-template-columns: repeat(3, 1fr); } }
.service {
  background: var(--c-base); padding: clamp(1.5rem, 2.4vw, 2.1rem);
  display: grid; gap: .75rem; align-content: start;
  position: relative; isolation: isolate; min-height: 0;
  transition: background-color var(--d-move) var(--e-std);
}
.service::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(90% 120% at var(--gx, 50%) 0%, rgba(10, 120, 245, .16), transparent 70%);
  transition: opacity var(--d-move) var(--e-std);
}
.service:hover::before { opacity: 1; }
.service__no { font-family: var(--f-display); font-size: var(--t-xs); letter-spacing: .2em; color: var(--c-text-faint); }
/* War --t-lg (bis 2,1 rem) und damit fast so gross wie die Abschnitts-
   ueberschrift darueber. Wenn in der Karte dasselbe schreit wie ueber der
   Karte, wirkt jede Karte wie ein eigener Abschnitt. */
.service h3 { font-size: 1.24rem; line-height: 1.25; letter-spacing: -.015em; }
.service p { color: var(--c-text-dim); font-size: var(--t-sm); }
.service ul { margin: .4rem 0 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.service li { font-size: var(--t-sm); color: var(--c-text-faint); padding-left: 1.1rem; position: relative; }
.service li::before { content: ""; position: absolute; left: 0; top: .68em; width: 5px; height: 1px; background: var(--c-cyan); }

/* ---------- 10. Arbeiten ------------------------------------------------- */
.work { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
@media (min-width: 780px)  { .work { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .work { grid-template-columns: repeat(6, 1fr); } }
/* Medienkarten brauchen einen Traeger — ein Bildschirmfoto ohne Rand franst
   aus. Aber keine Erhebung und kein grosser Radius mehr: Haarlinie statt
   Schatten, 12 px statt 26 px. */
.card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--c-surface); box-shadow: none;
  border: 1px solid var(--c-line);
  display: grid; align-content: end; gap: .5rem;
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
  isolation: isolate;   /* keine Mindesthoehe: sie fuellte die Karten mit Leerraum */
  transition: transform var(--d-move) var(--e-std), border-color var(--d-ui) linear;
}
/* Asymmetrischer Rhythmus statt drei gleicher Kacheln: 4+2 / 2+4 / 3+3 */
@media (min-width: 1180px) {
  .card { grid-column: span 2; }
  .card--a    { grid-column: span 4; }
  .card--b    { grid-column: span 2; }
  .card--half { grid-column: span 3; }
  /* Volle Breite für die eine fertige Fremdreferenz: Sie führt den Abschnitt an,
     die eigenen Projekte kommen danach. Sechs Spalten, damit die Reihen darunter
     aufgehen. */
  .card--voll { grid-column: span 6; }
}
[id] { scroll-margin-top: 100px; }
.card:hover { transform: translateY(-4px); border-color: var(--c-line-strong); }
/* Poster-Fläche: prozedural aus Farbe statt Platzhalterbild */
.card > img.card__poster {
  position: relative; inset: auto; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.card__poster {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  background:
    radial-gradient(80% 65% at 22% 12%, var(--p1), transparent 62%),
    radial-gradient(70% 60% at 88% 78%, var(--p2), transparent 66%),
    linear-gradient(160deg, #0a0f19, #070a11);
  transform: scale(1.03);
  filter: saturate(.8) contrast(1.05) brightness(.72);
  transition: transform var(--d-scene) var(--e-std), filter var(--d-scene) var(--e-std);
}
.card:hover .card__poster { filter: saturate(.92) contrast(1.07) brightness(.9); }
.card:hover .card__poster { transform: scale(1.07); }
.card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(4, 6, 11, .96) 2%, rgba(4, 6, 11, .82) 26%, rgba(4, 6, 11, .3) 58%, transparent 86%);
}
.card__initial { display: none; }
.card__initial--unused {
  font-stretch: 118%;
  position: absolute; top: clamp(1.2rem, 2.4vw, 2rem); left: clamp(1.4rem, 2.4vw, 2.2rem); z-index: -1;
  font-family: var(--f-display); font-weight: 700; font-size: clamp(4rem, 9vw, 8rem);
  letter-spacing: -.06em; color: rgba(255, 255, 255, .05); line-height: .8;
  mix-blend-mode: overlay;
}
.card__tag { font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--c-cyan); }
/* War --t-lg (bis 2,1 rem) und damit auf Augenhoehe mit "Lavori realizzati"
   darueber. Ein Projektname darf etwas mehr Praesenz haben als eine
   Leistungsueberschrift, aber nicht die des Abschnitts. */
.card h3 { font-size: 1.35rem; line-height: 1.2; letter-spacing: -.02em; }
.card p { font-size: var(--t-sm); color: var(--c-text-dim); max-width: 46ch; }
.card__link { font-size: var(--t-sm); color: var(--c-text-faint); margin-top: .3rem; }

/* Karten, die auf eine erreichbare Seite zeigen, sind anklickbar — der Beleg für
   diese Arbeit ist die Seite selbst, nicht ihr Bild. Die übrigen bleiben Text. */
.card__link--live {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; margin-top: 0;
  color: var(--c-text); text-decoration: none;
  transition: color var(--d-ui) var(--e-std);
}
/* Diagonalpfeil statt Winkel: Er sagt „öffnet die fremde Seite", nicht
   „weiter im Text" — der Unterschied entscheidet, ob jemand klickt. */
.card__link--live::after {
  content: '\2197'; font-size: 1.05em; line-height: 1;
  text-decoration: none;   /* sonst zieht die Unterstreichung unter dem Pfeil mit */
  transition: transform var(--d-ui) var(--e-std);
}
/* Kein Unterstrich beim Überfahren: Der Pfeil ist ein Flex-Kind derselben
   Zeile, die Linie liefe unter ihm mit durch und sähe nach Versehen aus.
   Als Hinweis ohne Farbe trägt der Pfeil ohnehin — das genügt der Regel,
   dass ein Link nicht allein an der Farbe erkennbar sein darf. */
.card__link--live:hover { color: var(--c-cyan); }
.card__link--live:hover::after { transform: translate(.12em, -.12em); }
@media (prefers-reduced-motion: reduce) {
  .card__link--live, .card__link--live::after { transition: none; }
}
.work__note { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--c-text-faint); }

/* ---------- 11. Prozess -------------------------------------------------- */
.process {
  display: grid; gap: 0; border-top: 1px solid var(--c-line);
  position: relative; isolation: isolate;
}
/* Eigener Schleier hinter den Schritten: Im angehefteten Kapitel fährt die
   Kamera nah heran, dann reicht der allgemeine Schleier nicht. */
.process::before {
  content: ""; position: absolute; inset: -2rem -3vw; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 60% at 30% 50%, rgba(3, 5, 9, .92), rgba(3, 5, 9, .6) 60%, transparent 85%);
  filter: blur(4px);
}
/* Die vier Schritte sind aufklappbar — vier ausgeschriebene Absaetze
   untereinander sind viel Text an einer Stelle, an der der Leser eigentlich
   nur wissen will, wie es ablaeuft. Ueberschriften bleiben sichtbar, der
   Fliesstext kommt auf Wunsch. Gebaut mit <details>: das koennen Tastatur,
   Vorleseprogramm und die Suche des Browsers von Haus aus, ohne eine Zeile
   JavaScript. Der erste Schritt steht offen, damit der Abschnitt nicht wie
   eine leere Liste wirkt. */
.step {
  padding-block: clamp(1.4rem, 2.6vw, 2.2rem);
  border-bottom: 1px solid var(--c-line); position: relative;
  transition: padding-left var(--d-move) var(--e-std);
}
.step__kopf {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) 1.6rem;
  align-items: center; gap: var(--s-2);
  cursor: pointer; list-style: none;
  border-radius: 12px; outline-offset: 4px;
}
.step__kopf::-webkit-details-marker { display: none; }
.step__kopf:focus-visible { outline: 2px solid var(--c-cyan); }
.step__wort { display: flex; flex-direction: column; gap: .2rem; }
.step__no {
  font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step h3 { font-size: var(--t-md); margin: 0; }
.step p {
  color: var(--c-text-dim); font-size: var(--t-sm); max-width: 52ch;
  margin: var(--s-2) 0 0;
}
/* Das Zeichen ist ein Plus, das sich beim Oeffnen zum Minus dreht — kein
   Pfeil: ein Pfeil verspricht einen Sprung woandershin. */
.step__zeichen {
  position: relative; width: 1.15rem; height: 1.15rem; justify-self: end;
  opacity: .75; transition: opacity var(--d-ui) var(--e-std), transform var(--d-move) var(--e-std);
}
.step__zeichen::before, .step__zeichen::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; border-radius: 2px; background: var(--c-text-dim);
  transition: transform var(--d-move) var(--e-std);
}
.step__zeichen::after { transform: rotate(90deg); }
.step[open] .step__zeichen::after { transform: rotate(0deg); }
.step__kopf:hover .step__zeichen { opacity: 1; }

@media (min-width: 860px) {
  .step__kopf { grid-template-columns: 7rem minmax(0, 1fr) 1.6rem; gap: var(--s-4); }
  .step__wort { flex-direction: row; align-items: baseline; gap: var(--s-3); }
  .step__wort h3 { order: -1; flex: 0 0 auto; min-width: 12rem; }
  .step p { padding-left: calc(7rem + var(--s-4)); max-width: 68ch; }
  .step:hover { padding-left: 1rem; }
}

/* Weich auf- und zuklappen, wo der Browser es kann. Wo nicht, springt es
   auf — das ist kein Fehler, nur weniger huebsch. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .step::details-content {
    block-size: 0; overflow: hidden; opacity: 0;
    transition: block-size var(--d-move) var(--e-std),
                content-visibility var(--d-move) allow-discrete,
                opacity var(--d-move) var(--e-std);
  }
  .step[open]::details-content { block-size: auto; opacity: 1; }
}

/* ---------- 12. Prinzipien ----------------------------------------------- */
.pillars {
  display: grid; gap: 1px; background: var(--c-line);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--elev-1);
}
@media (min-width: 680px)  { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar { background: var(--c-base-2); padding: clamp(1.5rem, 2.6vw, 2.2rem); display: grid; gap: .6rem; align-content: start; }
.pillar strong {
  font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700; letter-spacing: -.03em;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pillar span { font-size: var(--t-sm); color: var(--c-text-dim); }

/* ---------- 13. Pakete --------------------------------------------------- */
.plans { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan {
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--c-surface-2) 0%, var(--c-base-2) 38%);
  box-shadow: none;
  padding: calc(clamp(1.6rem, 2.8vw, 2.4rem) + 1.1rem) clamp(1.6rem, 2.8vw, 2.4rem) clamp(1.6rem, 2.8vw, 2.4rem);
  display: flex; flex-direction: column; gap: var(--s-2);
  position: relative; isolation: isolate;
  transition: border-color var(--d-ui) linear, transform var(--d-move) var(--e-std);
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--elev-hover); }
/* Die empfohlene Karte steht eine Stufe höher und trägt eine deutlichere Kante. */
.plan--featured { box-shadow: var(--elev-hover); }
.plan--featured::after { opacity: 1; }
@media (min-width: 900px) { .plan--featured { transform: translateY(-10px); } }
.plan__badge {
  position: absolute; top: 1.1rem; right: 1.1rem; font-size: var(--t-xs);
  letter-spacing: .18em; text-transform: uppercase; color: var(--c-cyan);
}
.plan h3 { font-size: var(--t-lg); margin-bottom: -.4rem; }
.plan__sub { color: var(--c-text-dim); font-size: var(--t-sm); }
@media (min-width: 900px) { .plan__sub { min-height: 3.1em; } }
.plan__price { font-family: var(--f-display); font-stretch: 106%; font-size: var(--t-xl); font-weight: 700; letter-spacing: -.03em; }
.plan__price small { display: block; font-family: var(--f-text); font-size: var(--t-xs); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-faint); margin-top: .5rem; }
.plan__month {
  margin-top: -.4rem; font-size: var(--t-sm); font-weight: 500;
  color: var(--c-cyan);
}
.plan ul {
  margin: var(--s-1) 0 0; padding: var(--s-2) 0 0; list-style: none; display: grid; gap: .5rem;
  border-top: 1px solid var(--c-line);
}
.plan li.is-lead {
  padding-left: 0; color: var(--c-text); font-weight: 500;
  font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
}
.plan li.is-lead::before { content: none; }
.plan__ideal {
  margin-top: var(--s-1); padding-top: var(--s-2); border-top: 1px solid var(--c-line);
  font-size: var(--t-xs); color: var(--c-text-faint);
}
.plan .btn { margin-top: auto; justify-content: center; }
.plan__ideal { margin-bottom: var(--s-1); }
.plan li { font-size: var(--t-sm); color: var(--c-text-dim); padding-left: 1.4rem; position: relative; }
.plan li::before { content: "+"; position: absolute; left: 0; color: var(--c-cyan); }
.plan .btn { margin-top: auto; --btn-radius: 12px; }
.plans__note { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--c-text-faint); }

/* ---------- 14. Kontakt -------------------------------------------------- */
.contact { position: relative; overflow: hidden; }
.contact__light {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 78% 20%, rgba(6, 72, 232, .22), transparent 70%);
}
.contact__grid { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 940px) { .contact__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
/* War --t-2xl und damit die größte Type der Seite — größer als der Hero.
   Ein Schluss ist eine Auflösung, kein zweiter Höhepunkt: Wer hier ankommt,
   hat sich längst entschieden und braucht keinen Ruf mehr, sondern einen
   klaren Weg. */
.contact h2 { font-size: var(--t-xl); letter-spacing: -.045em; }
.contact__lead { margin-top: var(--s-2); color: var(--c-text-dim); font-size: var(--t-md); max-width: 42ch; }
.contact__data { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.contact__data div { display: grid; gap: .2rem; }
.contact__data dt { font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--c-text-faint); }
.contact__data dd { margin: 0; font-size: var(--t-base); }

/* align-content: start — sonst verteilt das Raster die Resthöhe der Spalte
   auf die Zeilen und der Absendeknopf wird unnatürlich hoch. */
.form { display: grid; gap: var(--s-2); align-content: start; }
.field { display: grid; gap: .45rem; }
.field label { font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-faint); }
.field input, .field textarea, .field select {
  background: rgba(255, 255, 255, .022);
  border: 1px solid var(--c-line); border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
  padding: .9rem 1rem; width: 100%; min-height: 46px;
  transition: border-color var(--d-ui) linear, background-color var(--d-ui) linear;
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--c-line-strong); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--c-cyan); background: rgba(31, 232, 255, .04); }
.field textarea { resize: vertical; min-height: 130px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-text-dim) 50%), linear-gradient(135deg, var(--c-text-dim) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field select option { background: var(--c-surface-2); }
.form__row { display: grid; gap: var(--s-2); }
@media (min-width: 620px) { .form__row { grid-template-columns: repeat(2, 1fr); } }
.form > .btn { justify-self: start; }
.form__hint { font-size: var(--t-xs); color: var(--c-text-faint); }
.form__hint a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 15. Fußzeile ------------------------------------------------- */
.footer {
  border-top: 1px solid var(--c-line); padding-block: var(--s-5) var(--s-4);
  /* Der Fuß schließt die Seite ab — dort soll die Bühne ausklingen, nicht
     weiterlaufen. */
  background: linear-gradient(to bottom, rgba(3, 5, 9, .82), #03050a 45%);
  backdrop-filter: blur(4px);
}
/* Zentrierte Fußzeile: Marke, ein Satz, eine Zeile Verweise. Die frühere
   dreispaltige Aufteilung ließ links eine große Leerfläche stehen. */
.footer__top { display: grid; justify-items: center; text-align: center; gap: var(--s-3); }
.footer__logo { width: clamp(150px, 18vw, 230px); opacity: .95; }
.footer__claim { color: var(--c-text-faint); font-size: var(--t-sm); max-width: 52ch; }
.footer__links {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .4rem clamp(1rem, 2.2vw, 2rem); margin-top: var(--s-1);
}
.footer__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t-sm); color: var(--c-text-dim);
  transition: color var(--d-ui) linear;
}
.footer__links a:hover { color: var(--c-text); }
.footer__sep { width: 5px; height: 5px; border-radius: 50%; background: var(--c-line-strong); }
@media (max-width: 560px) { .footer__sep { display: none; } }

.footer__bottom {
  margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--c-line);
  display: flex; flex-wrap: wrap; gap: .3rem clamp(1rem, 3vw, 2.5rem); justify-content: center;
  align-items: center;
  text-align: center; font-size: var(--t-xs); color: var(--c-text-faint);
}

/* Partnerbanner in der Fußzeile.
   Ein fremdes Logo in einem eigenen Auftritt ist immer ein kleiner Stilbruch;
   deshalb steht es gedämpft da und wird erst beim Darüberfahren ganz sichtbar.
   Die Fläche selbst bleibt unverändert groß — gedämpft heißt hier leiser,
   nicht schwerer zu treffen. */
.fusspartner {
  display: inline-flex; line-height: 0; border-radius: 3px;
  /* Das Banner hat einen hellen eigenen Grund und ist damit auf dieser
     dunklen Fußzeile von Natur aus das Lauteste. Weit heruntergedimmt steht
     es da wie ein Hinweis und nicht wie eine Anzeige — beim Darüberfahren
     kommt es ganz. */
  opacity: .3; filter: grayscale(1);
  transition: opacity var(--d-ui, .18s) var(--e-std, ease),
              filter var(--d-ui, .18s) var(--e-std, ease);
}
.fusspartner:hover, .fusspartner:focus-visible { opacity: 1; filter: none; }
.fusspartner img { display: block; width: 88px; height: 31px; }
@media (prefers-reduced-motion: reduce) { .fusspartner { transition: none; } }

/* ---------- 16. Reveal-Choreografie ------------------------------------- */
/* Endzustand ist Standard. Bewegung wird nur ergänzt, wenn JS + Motion erlaubt. */
[data-reveal] { will-change: transform, opacity; }
body.js [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); }
body.js [data-reveal].in {
  opacity: 1; transform: none;
  transition: opacity var(--d-reveal) var(--e-std), transform var(--d-reveal) var(--e-std);
  transition-delay: var(--delay, 0ms);
}
body.js [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 105% 0); }
body.js [data-reveal="mask"].in { clip-path: inset(0 0 -10% 0); transition: clip-path var(--d-scene) var(--e-std) var(--delay, 0ms); }
body.js .line-mask { display: block; overflow: hidden; padding-bottom: .06em; }
body.js .line-mask > span { display: block; transform: translate3d(0, 105%, 0); }
body.js .in .line-mask > span, body.js .line-mask.in > span {
  transform: none; transition: transform var(--d-scene) var(--e-std); transition-delay: var(--delay, 0ms);
}

/* ---------- 17. Mobile Navigation --------------------------------------- */
@media (max-width: 900px) {
  .burger { display: flex; }
  .nav {
    position: fixed; inset: 0; z-index: 99;
    background: rgba(5, 7, 13, .97); backdrop-filter: blur(20px);
    flex-direction: column; justify-content: center; gap: var(--s-3);
    opacity: 0; pointer-events: none; transform: translateY(-8px);
    transition: opacity var(--d-move) var(--e-std), transform var(--d-move) var(--e-std);
  }
  body.nav-open .nav { opacity: 1; pointer-events: auto; transform: none; }
  .nav a { font-family: var(--f-display); font-size: var(--t-lg); color: var(--c-text); }
  .header__tools .btn { display: none; }

  /* Die Überlagerung liegt im Header und ist sein Kind. z-index: 100 am Header
     gilt gegenüber der Seite, nicht gegenüber den eigenen Kindern — drinnen
     schlug die Fläche (99) Wortmarke und Werkzeuge (auto) und legte sich über
     den Knopf, der sie schließen soll. Beide gehören darüber: sonst lässt sich
     das geöffnete Menü weder schließen noch die Sprache wechseln. */
  .brand, .header__tools { position: relative; z-index: 100; }

  /* Und der Header darf, solange das Menü offen ist, kein backdrop-filter
     tragen: Ein Filter macht das Element zum Bezugsrahmen für alles, was
     darin `position: fixed` ist. Sobald man gescrollt hatte (.is-stuck), schrumpfte
     die Menüfläche damit auf die Höhe des Headers — die Einträge lagen ohne
     Grund über dem Seiteninhalt. Die Fläche selbst bringt ihre eigene
     Unschärfe mit, es geht optisch nichts verloren. */
  body.nav-open .header.is-stuck { backdrop-filter: none; background: transparent; border-bottom-color: transparent; box-shadow: none; }
}

/* ---------- 18. Reduzierte Bewegung ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  body.js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  body.js .line-mask > span { transform: none !important; }
  .grain, .hero__sweep::after, .scrollcue i { animation: none; }
  .marquee__track { animation: none; }
  .cursor, .cursor-dot { display: none !important; }
}

/* ---------- 19. Rechtstexte (legal.html) -------------------------------- */
.legal { padding-top: clamp(8rem, 16vh, 12rem); }
.legal__body { max-width: 72ch; display: grid; gap: var(--s-3); }
.legal__body h2 { font-size: var(--t-lg); margin-top: var(--s-3); }
.legal__body h3 { font-size: var(--t-md); margin-top: var(--s-2); }
.legal__body p, .legal__body li { color: var(--c-text-dim); font-size: var(--t-sm); }
.legal__body ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
.todo {
  display: inline-block; padding: .1rem .5rem; border-radius: 6px;
  background: rgba(31, 232, 255, .1); border: 1px dashed rgba(31, 232, 255, .45);
  color: var(--c-cyan); font-size: .92em; letter-spacing: .02em;
}

/* ---------- 20. Vorführung echter Projektseiten ------------------------- */
/* Der Rahmen sitzt als Hintergrund in der Projektkarte. Die Aufnahme scrollt,
   ein Zeiger bewegt sich, klickt, die Seite "lädt" — die Anmutung einer
   Bildschirmaufnahme, technisch ein einziges Bild. */
.screen {
  position: absolute; inset: 0; z-index: -2; margin: 0;
  container-type: size;                 /* cqw/cqh für die Zeigerposition */
  background: #070b13;
  overflow: hidden;
  display: grid; grid-template-rows: auto 1fr;
}
.screen__chrome {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem; min-height: 34px;
  background: linear-gradient(180deg, #131a28, #0c111b);
  box-shadow: inset 0 -1px 0 rgba(150, 180, 230, .16);
  position: relative; z-index: 2;
}
.screen__dots { display: flex; gap: 5px; flex: none; }
.screen__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(150, 180, 230, .28); }
.screen__url {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; letter-spacing: .04em; color: var(--c-text-faint);
  background: rgba(255, 255, 255, .04); border-radius: 6px; padding: .18rem .55rem;
  box-shadow: inset 0 0 0 1px rgba(150, 180, 230, .12);
}
.screen__url::before { content: "🔒"; font-size: 8px; margin-right: .4rem; opacity: .6; filter: grayscale(1); }
/* Ladebalken wie im echten Browser */
.screen__progress {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--grad-brand); transform: scaleX(0); transform-origin: 0 50%;
  opacity: 0;
}
.screen.is-loading .screen__progress { animation: screenLoad 700ms var(--e-std) forwards; }
@keyframes screenLoad {
  0% { transform: scaleX(0); opacity: 1; }
  70% { transform: scaleX(.85); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

.screen__viewport { position: relative; overflow: hidden; }
.screen__page {
  position: absolute; top: 0; left: 0; width: 100%; height: auto;
  will-change: transform;
}
/* Kurzes Aufblitzen beim „Laden" — wie ein Seitenwechsel */
.screen.is-loading .screen__page { filter: brightness(.82); transition: filter 200ms linear; }

.screen__cursor {
  position: absolute; top: 0; left: 0; width: 22px; height: 22px; margin: -2px 0 0 -2px;
  z-index: 3; pointer-events: none; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M5 2l14 9-6 1.2 3.2 6.4-2.6 1.3L10.4 13 5 17z' fill='%23fff' stroke='%23000' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .8));
  transition: opacity var(--d-move) var(--e-std);
}
.screen.is-playing .screen__cursor { opacity: 1; }
/* Klick: Ring läuft vom Zeiger weg */
.screen__cursor::after {
  content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid rgba(31, 232, 255, .9); opacity: 0;
}
.screen.is-clicking .screen__cursor::after { animation: screenClick 420ms var(--e-std); }
@keyframes screenClick {
  0% { transform: scale(.4); opacity: 1; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* Karten mit Vorführung: Text bleibt lesbar, Verlauf etwas kräftiger */
.card--live::after {
  background: linear-gradient(to top, rgba(4, 6, 11, .96) 6%, rgba(4, 6, 11, .55) 42%, rgba(4, 6, 11, .12) 72%);
}
.card--live .card__initial { display: none; }
.card__initial--unused { display: none; }
.card--live:hover .screen__page { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .screen__cursor { display: none; }
  .screen__page { transform: none !important; }
}

/* Karten mit Vorführung sind anders gebaut: oben der Browserrahmen, unten der
   Text auf eigener Fläche. Text über einer laufenden Aufnahme ist unlesbar. */
.card--live {
  padding: 0; gap: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  /* Diese Mindesthoehe bleibt: die Vorfuehrkarten haben oben einen
     Browserrahmen, der ohne sie auf null zusammenfaellt. Ein Versuch, die
     Hoehe ueber container queries an die Kartenbreite zu binden, hat es
     verschlimmert - im Raster gleichen sich Karten einer Reihe in der Hoehe
     an, dadurch wurde der ganze Abschnitt auf die groesste Karte gezogen. */
  min-height: clamp(340px, 38vw, 500px);
}
.card--live .screen { position: relative; inset: auto; z-index: 0; height: 100%; }
.card--live::after { display: none; }
.card--live .card__poster { display: none; }
/* Die eine volle Breite braucht mehr Hoehe als die schmalen Karten: Der Rahmen
   zeigt sonst nur den Navigationsstreifen. Muss nach .card--live stehen, sonst
   gewinnt dessen min-height. */
/* Die Fremdreferenz fuehrt den Abschnitt an und steht als einzige in ihrer
   Reihe - hier darf die Hoehe steigen, ohne dass Nachbarkarten mitgezogen
   werden. Mit der allgemeinen Mindesthoehe von 500 px blieb vom Bildschirm-
   foto nur ein Streifen uebrig, weil der Text darunter den Rest nahm. */
.card--live.card--voll { min-height: clamp(560px, 56vw, 880px); }
.card .card__body, .card--live .card__body {
  display: grid; gap: .45rem; align-content: start;
  padding: clamp(1.2rem, 2vw, 1.9rem);
  background: linear-gradient(180deg, rgba(9, 13, 22, .96), var(--c-surface));
  box-shadow: inset 0 1px 0 rgba(150, 180, 230, .14);
}

/* ---------- 21. Die Welt hinter der Seite ------------------------------- */
:root { --world-scrim: 0; }

.stage {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100svh; display: block;
  opacity: 0; transition: opacity 900ms var(--e-std);
  pointer-events: none;
}
[data-world="on"] .stage { opacity: 1; }
.stage[hidden] { display: none; }

/* Der Schleier dunkelt die Bühne genau dort ab, wo gelesen wird. Er ersetzt
   keinen Hintergrund — die Welt bleibt sichtbar, sie tritt nur zurück. */
.world-scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, rgba(3, 5, 9, .55), rgba(3, 5, 9, .92) 100%);
  opacity: var(--world-scrim);
  transition: opacity 400ms linear;
}

/* Alles Inhaltliche liegt über der Bühne. */
main, .footer { position: relative; z-index: 2; }
.progress, .grain, .vignette, .cursor, .cursor-dot { position: fixed; }
/* Die Kopfzeile liegt über dem Inhalt. Vorher hatten Kopfzeile und main
   denselben Stapelwert — dann gewinnt das spätere Element im Dokument, und
   der Hero-Abschnitt fing sämtliche Klicks auf Menü und Sprachwahl ab. */
.header { position: fixed; z-index: 100; }
.progress, .grain, .vignette, .cursor, .cursor-dot { position: fixed; }

/* Wenn die Welt läuft, braucht der Hero seine gemalten Ersatzteile nicht mehr:
   das Logo steht als Körper dahinter, das Licht kommt aus der Szene. */
[data-world="on"] .hero__mark,
[data-world="on"] .hero__light,
[data-world="on"] .hero__sweep { display: none; }
[data-world="on"] .hero__grid { opacity: .5; }

/* Ohne WebGL bleibt exakt die bisherige Seite übrig. */
[data-world="no-webgl"] .stage,
[data-world="reduced-motion"] .stage,
[data-world="save-data"] .stage,
[data-world="init-error"] .stage,
[data-world="context-lost"] .stage,
[data-world="no-gsap"] .stage,
[data-world="device"] .stage { display: none; }

@media (prefers-reduced-motion: reduce) { .stage, .world-scrim { display: none; } }

/* Ab hier wird es in der Kopfzeile eng — die deutschen Menüpunkte sind länger
   als die italienischen. Dann trägt die Marke nur noch das Zeichen. */
@media (max-width: 1200px) { .header .brand__name { display: none; } }

/* Qualitätswahl in der Kopfzeile — nur sichtbar, wenn die Bühne wirklich läuft */
.chip--quality { display: none; }
[data-world="on"] .chip--quality {
  display: none; align-items: center; gap: .5rem; min-height: 40px;
  padding: .45rem .8rem; border-radius: 12px;
  background: rgba(8, 12, 20, .55); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(150, 180, 230, .16);
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-dim);
}
.chip--quality select { background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; }
.chip--quality select option { background: #0c1119; color: #e9eef8; letter-spacing: 0; text-transform: none; }
@media (max-width: 1100px) { [data-world="on"] .chip--quality { display: none; } }

/* ---------- 22. Fragen ---------------------------------------------------- */
.faq { display: grid; gap: 1px; background: var(--c-line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--elev-1); }
.faq__item { background: var(--c-base-2); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.2rem, 2.4vw, 2rem);
  cursor: pointer; list-style: none;
  font-family: var(--f-display); font-stretch: 104%; font-weight: 600;
  font-size: var(--t-md); letter-spacing: -.015em;
  transition: color var(--d-ui) linear, background-color var(--d-ui) linear;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { background: rgba(255, 255, 255, .022); }
/* Plus/Minus statt Pfeil — dreht sich beim Öffnen */
.faq__sign { position: relative; flex: none; width: 16px; height: 16px; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: var(--c-cyan);
  transition: transform var(--d-move) var(--e-std);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }
.faq__item[open] summary { color: var(--c-text); }
.faq__item > p {
  padding: 0 clamp(1.2rem, 2.4vw, 2rem) clamp(1.3rem, 2.2vw, 1.8rem);
  max-width: 74ch; color: var(--c-text-dim); font-size: var(--t-sm);
}

/* Angeheftetes Kapitel „Ablauf": Der jeweils aktive Schritt tritt hervor,
   die anderen treten zurück. Ohne JS bleiben alle gleichwertig sichtbar. */
.step { transition: opacity var(--d-move) var(--e-std), transform var(--d-move) var(--e-std); }
#process:has(.is-active) .step { opacity: .45; }
#process:has(.is-active) .step.is-active { opacity: 1; transform: translateX(6px); }
/* Der aktive Schritt bekommt eine Kante statt nur mehr Deckkraft */
#process .step.is-active { position: relative; }
#process .step.is-active::before {
  content: ""; position: absolute; left: -1.2rem; top: 1.2rem; bottom: 1.2rem; width: 2px;
  background: var(--grad-brand); border-radius: 2px;
}
#process:has(.is-active) .step.is-active .step__no { filter: drop-shadow(0 0 18px rgba(31, 232, 255, .5)); }

/* ---------- 23. Feinschliff ---------------------------------------------- */
/* Wortweise Enthüllung (nur Überschriften) */
.sechead h2 .w, .contact h2 .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.sechead h2 .w > i, .contact h2 .w > i { display: inline-block; font-style: normal; }

/* Projektkarten neigen sich zum Zeiger */
.card {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
}
.card:hover { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
.card.is-tilted::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(30% 30% at var(--lx, 50%) var(--ly, 50%), rgba(120, 190, 255, .16), transparent 70%);
}

/* Preisumschalter */
.ptoggle {
  display: inline-flex; gap: 3px; padding: 4px; margin-bottom: var(--s-3);
  border-radius: 999px; background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.ptoggle button {
  border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: .5rem 1rem; min-height: 44px;
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-faint);
  transition: color var(--d-ui) linear, background-color var(--d-ui) linear;
}
.ptoggle button:hover { color: var(--c-text); }
.ptoggle button[aria-pressed="true"] {
  background: var(--c-surface-2); color: var(--c-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 14px -8px rgba(0, 0, 0, .9);
}
.plan__price > span { transition: opacity var(--d-move) var(--e-std); }

/* Filmischer Schnitt zwischen den Kapiteln */
.world-cut {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(120, 190, 255, .10) 50%, transparent 62%);
}
[data-cut] .world-cut { animation: worldCut 600ms var(--e-std); }
@keyframes worldCut {
  0% { opacity: 0; transform: translateX(-30%); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateX(30%); }
}

/* Sprachwechsel: Inhalt tritt kurz zurück statt schlagartig zu springen */
body.is-swapping main { opacity: .35; transform: translateY(4px); }
body main { transition: opacity 220ms var(--e-std), transform 220ms var(--e-std); }

@media (prefers-reduced-motion: reduce) {
  .card { transform: none !important; }
  .world-cut { display: none; }
  body.is-swapping main { opacity: 1; transform: none; }
}

/* Kinetische Titelzeilen: Startzustand hier, Endzustand über .hero-in.
   Reine CSS-Lösung — unabhängig von JS-Bibliotheken. */
.hero h1 .line-mask > span {
  transform: translate3d(0, 108%, 0);
  transition: transform 1.25s var(--e-std);
}
.hero h1 .line-mask:nth-of-type(2) > span { transition-delay: .12s; }
.hero h1 .line-mask:nth-of-type(3) > span { transition-delay: .24s; }
html.hero-in .hero h1 .line-mask > span { transform: none; }

/* Der Knopf in der Kopfzeile darf nicht umbrechen */
.header .btn { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .hero h1 .line-mask > span { transform: none !important; transition: none !important; }
}

/* ---------- 24. Rechtsseite ---------------------------------------------- */
.legal__lead { max-width: 70ch; color: var(--c-text-dim); margin-top: var(--s-2); }
.legal__updated { margin-top: .4rem; font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-faint); }
.legal__nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--s-4) 0 var(--s-3); }
.legal__nav a {
  padding: .55rem 1rem; border-radius: 999px; font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-dim);
  box-shadow: inset 0 0 0 1px var(--c-line);
  transition: color var(--d-ui) linear, box-shadow var(--d-ui) linear;
}
.legal__nav a:hover { color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.legal__sec { padding-top: var(--s-4); scroll-margin-top: 110px; }
.legal__sec + .legal__sec { border-top: 1px solid var(--c-line); margin-top: var(--s-4); }
.legal__sec h2 { font-size: var(--t-xl); margin-bottom: var(--s-2); }
.legal__sec h3 { font-size: var(--t-md); margin-top: var(--s-3); }
.legal__sec p { margin-top: .5rem; }
/* Zeilenumbrüche in der Anbieteranschrift bleiben erhalten */
.legal .pre { white-space: pre-line; }

/* Das Muster-Widerrufsformular ist ein Formular, kein Fliesstext: Die Linien
   zum Ausfuellen muessen ausgerichtet stehen, sonst sieht es aus wie ein
   Absatz mit Unterstrichen. */
.legal .widerrufsformular {
  font-family: var(--f-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: .875rem; line-height: 1.7;
  border: 1px solid var(--c-line); border-radius: 10px;
  padding: 1.1rem 1.2rem; margin-top: 1rem;
  overflow-x: auto;
}

/* ---------- 25. Partnermarke ---------------------------------------------- */
/* Zurückhaltend platziert: keine zweite Marke, die um Aufmerksamkeit kämpft,
   sondern eine ruhige Nennung mit einem einzigen filmischen Moment. */
.partner { padding-block: clamp(3.5rem, 7vw, 6rem); }
.partner__inner { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 1000px) { .partner__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } }
/* Zwei Marken nebeneinander, gleich große Felder — keine ist wichtiger. */
.partner__logos { display: grid; gap: clamp(.8rem, 1.6vw, 1.2rem); }
@media (min-width: 620px) { .partner__logos { grid-template-columns: 1fr 1fr; } }
.partner__logo > a { display: grid; place-items: center; min-height: 140px; }
.partner__logo img { max-height: 130px; width: auto; object-fit: contain; }

.partner__logo {
  position: relative; margin: 0; isolation: isolate;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: radial-gradient(70% 70% at 50% 45%, rgba(198, 160, 60, .10), transparent 72%);
  box-shadow: inset 0 0 0 1px rgba(198, 160, 60, .18);
}
.partner__logo img {
  width: 100%; max-width: 300px; margin-inline: auto; display: block;
  /* Gold auf dunklem Grund braucht einen warmen Schein, sonst wirkt es flach */
  filter: drop-shadow(0 0 26px rgba(198, 160, 60, .35)) drop-shadow(0 14px 30px rgba(0, 0, 0, .7));
  animation: partnerFloat 9s var(--e-std) infinite;
}
@keyframes partnerFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.012); }
}

/* Der filmische Moment: ein Goldschimmer läuft einmal über die Marke.
   Er liegt als Maske über dem Logo, nicht daneben — deshalb folgt er exakt
   den Schwüngen der Schrift statt als Rechteck darüberzuziehen. */
.partner__sheen {
  position: absolute; inset: clamp(1.5rem, 3vw, 2.5rem); z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 240, 200, .85) 50%, transparent 62%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  mix-blend-mode: screen; opacity: 0;
  transform: translateX(-60%);
}
.partner__sheen--tx { -webkit-mask-image: url("../img/trendonix.webp"); mask-image: url("../img/trendonix.webp"); }
.partner__sheen--jv { -webkit-mask-image: url("../img/jonika.webp"); mask-image: url("../img/jonika.webp"); }
.partner__logo.in .partner__sheen,
.partner__logo:hover .partner__sheen { animation: partnerSheen 2.6s var(--e-std) .4s; }
@keyframes partnerSheen {
  0% { transform: translateX(-60%); opacity: 0; }
  18% { opacity: 1; }
  70% { transform: translateX(60%); opacity: 0; }
  100% { transform: translateX(60%); opacity: 0; }
}

.partner__text h2 { font-size: var(--t-lg); letter-spacing: .04em; }
.partner__text > p:last-child { margin-top: var(--s-2); color: var(--c-text-dim); max-width: 46ch; }
.partner .eyebrow::before { background: linear-gradient(90deg, #c6a03c, #f0d98a); }

@media (prefers-reduced-motion: reduce) {
  .partner__logo img { animation: none; }
  .partner__sheen { display: none; }
}

/* Adresszeile unter der Marke — Serifenschrift und weite Sperrung nehmen den
   Schriftzug des Logos auf, der Goldverlauf die Farbe. */
.partner__url {
  margin-top: clamp(.9rem, 1.6vw, 1.4rem);
  text-align: center;
}
.partner__url a {
  display: inline-block;
  font-family: 'Marcellus', Georgia, 'Times New Roman', serif;
  font-size: clamp(.66rem, .58rem + .28vw, .82rem);
  letter-spacing: .12em; white-space: nowrap;
  /* Sperrung hängt auch hinter dem letzten Zeichen — ohne Ausgleich sitzt der
     sichtbare Text minimal links der Mitte. */
  text-indent: .12em;
  background: linear-gradient(100deg, #b8912f 0%, #f4e3a8 45%, #c9a227 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-block: .62rem;
  transition: filter var(--d-move) var(--e-std), letter-spacing var(--d-move) var(--e-std);
}
.partner__url a:hover {
  filter: drop-shadow(0 0 12px rgba(240, 217, 138, .55));
  letter-spacing: .26em;
}
/* Feine Goldlinie darunter, wie im Logo unter dem Schriftzug */
.partner__url a::after {
  content: ""; display: block; height: 1px; margin-top: .45rem;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, .7), transparent);
  transform: scaleX(.7); transform-origin: 50% 50%;
  transition: transform var(--d-move) var(--e-std);
}
.partner__url a:hover::after { transform: scaleX(1); }

/* ---------- 26. Anfrageformular in Schritten ----------------------------- */
.qform { display: grid; gap: var(--s-3); }
.qform__bar { height: 2px; background: var(--c-line); border-radius: 2px; overflow: hidden; }
.qform__bar i {
  display: block; height: 100%; background: var(--grad-brand);
  transform: scaleX(var(--p, .33)); transform-origin: 0 50%;
  transition: transform var(--d-scene) var(--e-std);
}
.qform__count { font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-faint); }
.qform__count b { color: var(--c-text); }

.qform__step { display: none; border: 0; padding: 0; margin: 0; }
.qform__step.is-active { display: grid; gap: var(--s-3); animation: qstep var(--d-reveal) var(--e-std); }
@keyframes qstep { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.qfield { display: grid; gap: .5rem; }
.qform__q {
  font-family: var(--f-display); font-stretch: 104%; font-weight: 600;
  font-size: var(--t-md); letter-spacing: -.015em; color: var(--c-text); padding: 0;
}
.qform__hint { font-size: var(--t-xs); color: var(--c-text-faint); }
.qform__label { font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-faint); }
.qform__label em { font-style: normal; opacity: .7; text-transform: none; letter-spacing: .04em; }
.qform__row { display: grid; gap: var(--s-2); }
@media (min-width: 620px) { .qform__row { grid-template-columns: 1fr 1fr; } }

/* Auswahlfelder: klicken statt tippen */
/* Dauer und Ablauf auf der Paketseite: Wer 899 € ausgibt, will vorher wissen,
   wie lange es dauert und was nach dem Ja passiert. */
.det__dauer { margin-top: var(--s-3); }
.det__dauer p { color: var(--c-text-dim); font-size: var(--t-sm); margin-top: .35rem; }
.det__ablauf {
  list-style: none; counter-reset: schritt; margin: var(--s-3) 0 var(--s-3); padding: 0;
  display: grid; gap: .9rem;
}
@media (min-width: 780px) { .det__ablauf { grid-template-columns: repeat(2, 1fr); gap: 1.1rem 2rem; align-items: start; } }
.det__ablauf li {
  counter-increment: schritt;
  display: grid; grid-template-columns: 30px 1fr; gap: .2rem .8rem; align-items: start;
}
.det__ablauf li::before {
  content: counter(schritt); grid-column: 1; grid-row: 1 / span 2;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-display); font-size: var(--t-xs); font-weight: 700;
  color: var(--c-cyan); background: rgba(31, 232, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(31, 232, 255, .28);
}
.det__ablauf li > * { grid-column: 2; }
.det__ablauf b { font-size: var(--t-sm); color: var(--c-text); }
.det__ablauf span { font-size: var(--t-sm); color: var(--c-text-dim); line-height: 1.5; }

/* Was nach dem Absenden passiert — unter dem Formular, an der Stelle, an der
   jemand zoegert. Die vierte Zeile ist die wichtigste: Geld erst am Schluss. */
.ablaufkopf {
  font-size: var(--t-sm); letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-text-faint); margin: var(--s-3) 0 var(--s-2);
}
.ablaufliste { list-style: none; counter-reset: ab; margin: 0 0 var(--s-2); padding: 0; display: grid; gap: .9rem; }
.ablaufliste li {
  counter-increment: ab; display: grid; grid-template-columns: 28px 1fr; gap: .15rem .8rem; align-items: start;
}
.ablaufliste li::before {
  content: counter(ab); grid-column: 1; grid-row: 1 / span 2;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-display); font-size: var(--t-xs); font-weight: 700;
  color: var(--c-cyan); background: rgba(31, 232, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(31, 232, 255, .26);
}
.ablaufliste li > * { grid-column: 2; }
.ablaufliste b { font-size: var(--t-sm); color: var(--c-text); }
.ablaufliste span { font-size: var(--t-sm); color: var(--c-text-dim); line-height: 1.5; }

/* Das gewählte Paket steht über den Fragen — die Entscheidung ist ja schon
   gefallen, sie soll nur nicht unterwegs verloren gehen. */
.qform__paket {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  margin: 0 0 var(--s-3); padding: .75rem 1.1rem;
  border-radius: 999px; background: rgba(10, 120, 245, .10);
  box-shadow: inset 0 0 0 1px rgba(31, 232, 255, .28);
  font-size: var(--t-sm);
}
.qform__paket-label {
  font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-text-faint);
}
.qform__paket strong { color: var(--c-text); font-weight: 600; }
.qform__paket-wechsel {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--c-cyan); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
}

.chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: .25rem; margin: -.25rem; border-radius: 14px; }
.chips.is-missing { box-shadow: inset 0 0 0 1px rgba(255, 120, 120, .55); }
.chip-opt {
  border: 0; cursor: pointer; border-radius: 999px;
  padding: .6rem 1.05rem; min-height: 44px;
  background: rgba(255, 255, 255, .035); color: var(--c-text-dim);
  box-shadow: inset 0 0 0 1px var(--c-line);
  font-size: var(--t-sm); line-height: 1.2; text-align: left;
  transition: color var(--d-ui) linear, background-color var(--d-ui) linear,
              box-shadow var(--d-ui) linear, transform var(--d-move) var(--e-std);
}
.chip-opt:hover { color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-line-strong); transform: translateY(-1px); }
.chip-opt[aria-pressed="true"] {
  color: #fff; background: rgba(10, 120, 245, .16);
  box-shadow: inset 0 0 0 1px rgba(31, 232, 255, .55), 0 8px 22px -14px rgba(10, 120, 245, .9);
}
.qform__url { display: grid; gap: .45rem; margin-top: .3rem; }
.qform__url span { font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-faint); }

.qform input, .qform textarea {
  background: rgba(255, 255, 255, .022);
  border: 1px solid var(--c-line); border-radius: 12px;
  padding: .9rem 1rem; width: 100%; min-height: 46px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
  transition: border-color var(--d-ui) linear, background-color var(--d-ui) linear;
}
.qform input:focus, .qform textarea:focus { outline: none; border-color: var(--c-cyan); background: rgba(31, 232, 255, .04); }
.qform input.is-missing, .qform textarea.is-missing { border-color: rgba(255, 120, 120, .7); }
.qform textarea { resize: vertical; min-height: 118px; }

.qform__nav { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.qform__nav[hidden] { display: none; }
.qform__trust { font-size: var(--t-xs); color: var(--c-text-faint); }

/* Bestätigung */
.qform__done { display: grid; gap: .7rem; justify-items: start; padding-top: var(--s-2); animation: qstep var(--d-scene) var(--e-std); }
.qform__done[hidden] { display: none; }
.qform__check {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  color: var(--c-cyan); background: rgba(31, 232, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(31, 232, 255, .4), 0 0 34px -10px rgba(31, 232, 255, .6);
}
.qform.is-sent .qform__done .qform__hint { display: none; }
.qform__done h3 { font-size: var(--t-lg); }
.qform__done p { color: var(--c-text-dim); font-size: var(--t-sm); max-width: 52ch; }

/* Fehlschlag — gleiche Form wie die Bestätigung, andere Farbe. Der Besucher
   soll auf den ersten Blick sehen, dass etwas anderes passiert ist. */
.qform__fail { display: grid; gap: .7rem; justify-items: start; padding-top: var(--s-2); animation: qstep var(--d-scene) var(--e-std); }
.qform__fail[hidden] { display: none; }
.qform__fail h3 { font-size: var(--t-lg); }
.qform__fail p { color: var(--c-text-dim); font-size: var(--t-sm); max-width: 52ch; }
.qform__warn {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  color: #ffb454; background: rgba(255, 180, 84, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 180, 84, .4), 0 0 34px -10px rgba(255, 180, 84, .55);
}

/* ---------- 27. Aufwertung: Rhythmus, Ergebnis, Vergleich ---------------- */

/* 1 — Leistungen: drei gleiche Spalten. Vier waren es, weil zwei Karten
   doppelt breit liefen; ohne die bleiben bei sechs Eintraegen zwei Zellen
   leer, und die schmalen Spalten brechen bei drei Woertern pro Zeile um.
   Drei Spalten gehen bei sechs Eintraegen glatt auf und geben jeder Karte
   rund 45 Zeichen pro Zeile. */
@media (min-width: 1120px) {
  .services { grid-template-columns: repeat(3, 1fr); }
}

/* 2 — Ergebniszeile: was das Projekt gebracht hat, nicht was es ist. */
.card__result {
  margin-top: .4rem; padding-top: .55rem;
  border-top: 1px solid var(--c-line);
  font-family: var(--f-display); font-stretch: 102%; font-weight: 600;
  font-size: var(--t-sm); color: var(--c-text);
}
.card__result::before { content: "→ "; color: var(--c-cyan); }

/* 3 — Dauer je Schritt: aus einem Versprechen wird ein Plan. */
.step__time {
  font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-cyan); align-self: start;
}
@media (min-width: 860px) {
  /* Zahl und Dauer schmal, Titel und Beschreibung nah beieinander — vorher
     stand die Beschreibung so weit rechts, dass sie zu einem eigenen Block wurde. */
  .step { grid-template-columns: 4rem 7rem minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--s-3); }
}

/* 4 — Vergleichszeile unter den Paketen */
.cmp { margin-top: var(--s-4); }
.cmp__head { font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--c-text-faint); margin-bottom: var(--s-2); }
.cmp__grid {
  display: grid; gap: 1px; background: var(--c-line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--elev-1);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) { .cmp__grid { grid-template-columns: 1.1fr 1fr 1fr 1fr; } }
.cmp__labels, .cmp__col ul { list-style: none; margin: 0; padding: 0; display: grid; }
/* Gleiche Zeilenhöhe in allen Spalten — sonst laufen Bezeichnung und Wert
   auseinander, weil die Bezeichnungen kleiner gesetzt sind. */
.cmp__labels li, .cmp__col li { display: flex; align-items: center; min-height: 2.1rem; }
.cmp__labels, .cmp__col { background: var(--c-base-2); padding: clamp(.9rem, 1.6vw, 1.3rem); display: grid; gap: .55rem; align-content: start; }
.cmp__labels li { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-faint); }
.cmp__labels { padding-top: calc(clamp(.9rem, 1.6vw, 1.3rem) + 1.9rem); }
.cmp__name {
  font-family: var(--f-display); font-stretch: 104%; font-weight: 600;
  font-size: var(--t-sm); letter-spacing: .04em; color: var(--c-text); margin-bottom: .35rem;
}
.cmp__col ul { gap: .55rem; }
.cmp__col li { font-size: var(--t-sm); color: var(--c-text-dim); }
.cmp__col--best { background: rgba(10, 120, 245, .07); box-shadow: inset 0 0 0 1px rgba(31, 232, 255, .22); }
.cmp__col--best .cmp__name { color: var(--c-cyan); }
@media (max-width: 779px) {
  .cmp__labels { display: none; }   /* auf schmalen Schirmen wären zwei Spalten unlesbar */
  .cmp__col li::before { content: attr(data-label) " "; color: var(--c-text-faint); }
}

/* 5 — Zwischenruf: ein Satz, viel Luft, die Marke dahinter sichtbar. */
.interlude {
  position: relative; z-index: 2;
  padding-block: clamp(5rem, 12vw, 11rem);
}
.interlude p {
  font-family: var(--f-display); font-stretch: 108%; font-weight: 600;
  font-size: clamp(1.5rem, .9rem + 2.2vw, 3rem);
  line-height: 1.18; letter-spacing: -.03em;
  max-width: 22ch; margin-inline: auto; text-align: center;
  text-shadow: 0 2px 2px rgba(0,0,0,.6), 0 18px 40px rgba(0,0,0,.75);
}

/* ---------- 28. Icons, Randnotizen, Kapitelleiste, Ladebild -------------- */

/* 6 — Eigene Strichzeichnungen, auf dasselbe Raster gezeichnet wie die Schrift */
.service__ico {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  color: var(--c-cyan); background: rgba(31, 232, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(31, 232, 255, .18);
  transition: transform var(--d-move) var(--e-std), background-color var(--d-ui) linear;
}
.service:hover .service__ico { transform: translateY(-2px); background: rgba(31, 232, 255, .12); }

/* 7 — Randnotiz: Kniff aus dem Buchsatz, wirkt sofort redaktionell */
.marg {
  display: block; margin-bottom: .5rem;
  font-size: var(--t-xs); letter-spacing: .28em; text-transform: uppercase;
  color: var(--c-text-faint);
}
.marg::before { content: "— "; color: var(--c-cyan); }
@media (min-width: 1400px) {
  .sechead { position: relative; }
  .marg { position: absolute; left: -9.5rem; top: .55rem; margin: 0; width: 8rem; text-align: right; }
  .marg::before { content: none; }
  .marg::after {
    content: ""; position: absolute; right: -1.6rem; top: .55em; width: 1.1rem; height: 1px;
    background: var(--c-cyan); opacity: .6;
  }
}

/* 8 — Kapitelleiste */
.rail {
  position: fixed; right: clamp(.8rem, 1.6vw, 1.6rem); top: 50%; transform: translateY(-50%);
  z-index: 40; display: grid; gap: .1rem;
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-move) var(--e-std);
}
.rail.is-on { opacity: 1; pointer-events: auto; }
.rail a {
  display: flex; align-items: center; gap: .6rem; justify-content: flex-end;
  padding: .2rem; min-height: 44px; color: var(--c-text-faint);
  font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
}
.rail span {
  opacity: 0; transform: translateX(6px);
  transition: opacity var(--d-move) var(--e-std), transform var(--d-move) var(--e-std);
}
.rail a:hover span, .rail a[aria-current="true"] span { opacity: 1; transform: none; }
.rail i {
  width: 22px; height: 1px; background: var(--c-line-strong); flex: none;
  transition: width var(--d-move) var(--e-std), background-color var(--d-ui) linear;
}
.rail a:hover i { width: 30px; background: var(--c-text-dim); }
.rail a[aria-current="true"] { color: var(--c-text); }
.rail a[aria-current="true"] i { width: 38px; background: var(--c-cyan); box-shadow: 0 0 10px rgba(31,232,255,.6); }
@media (max-width: 1100px) { .rail { display: none; } }

/* 12 — Ladebild: der Umriss zeichnet sich, dann übernimmt die Szene */
.boot {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  background: #03050a;
  animation: bootOut 600ms var(--e-std) 1900ms forwards;
}
.boot path {
  stroke-dasharray: 400; stroke-dashoffset: 400;
  animation: bootDraw 1500ms var(--e-std) 120ms forwards;
  filter: drop-shadow(0 0 12px rgba(31, 232, 255, .45));
}
.boot path:nth-child(2) { animation-delay: 320ms; }
@keyframes bootDraw { to { stroke-dashoffset: 0; } }
@keyframes bootOut { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .boot { display: none; } }

/* 11 — Fehlerseite */
.e404 { padding-top: clamp(9rem, 20vh, 14rem); padding-bottom: clamp(5rem, 12vh, 9rem); display: grid; gap: var(--s-2); justify-items: start; }
.e404__code {
  font-family: var(--f-display); font-stretch: 118%; font-weight: 800;
  font-size: clamp(5rem, 3rem + 12vw, 13rem); line-height: .85; letter-spacing: -.05em;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,.8));
}
.e404 h1 { font-size: var(--t-xl); }
.e404__lead { color: var(--c-text-dim); font-size: var(--t-md); max-width: 46ch; }
.e404__cta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }

/* ---------- 29. Videos ---------------------------------------------------- */
.vids { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
@media (min-width: 900px) { .vids { grid-template-columns: 1fr 1fr; } }
/* Ein einzelnes Video haelt die halbe Spalte nicht — es stuende links und
   liesse rechts ein Loch. Also mittig und breiter. */
@media (min-width: 900px) {
  .vids--eins { grid-template-columns: minmax(0, 780px); justify-content: center; }
}

/* ---------- Das Video im Ablauf ------------------------------------------
   Es stand vorher als eigener Abschnitt zwischen "Ueber mich" und den
   Prinzipien — mitten in der Strecke, in der sich der Leser ein Bild von der
   Person macht, und weit weg von der Frage, die es beantwortet.
   Jetzt schliesst es den Ablauf ab: oben die vier Schritte in einem Satz,
   darunter dieselbe Sache in Bewegung. Das spart ausserdem einen Abschnitt
   und einen Navigationspunkt — die Seite wirkt weniger voll, ohne dass etwas
   fehlt. Die Sprungmarke #video bleibt bestehen, damit alte Verweise aus
   E-Mails und Suchergebnissen weiter dort landen, wo sie sollen. */
.ablaufvideo {
  margin-top: clamp(2.4rem, 5vw, 4rem);
  scroll-margin-top: clamp(72px, 10vh, 110px);
}
.ablaufvideo__zu {
  max-width: 62ch; margin: 0 auto clamp(1.2rem, 2.5vw, 1.9rem);
  text-align: center; color: var(--c-text-dim);
  font-size: var(--t-sm); line-height: 1.65;
}
.vid {
  position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--c-surface); box-shadow: var(--elev-1);
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  transition: transform var(--d-move) var(--e-std), box-shadow var(--d-move) var(--e-std);
}
.vid:hover { transform: translateY(-4px); box-shadow: var(--elev-hover); }
.vid img, .vid video { width: 100%; height: auto; display: block; background: #05070d; }
.vid__play {
  /* Tief statt mittig: Das Vorschaubild ist die Titelkarte des Videos, und die
     traegt oben Logo und Ueberschrift. Ein Knopf in der Bildmitte lag genau
     darauf und sah aus wie ein Versehen. Unten ist die Flaeche frei. */
  position: absolute; left: 50%; top: 76%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .6rem; cursor: pointer;
  padding: .8rem 1.3rem .8rem 1.05rem; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #fff, #e2e9f7); color: var(--c-base);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.7), 0 22px 45px -20px rgba(0,0,0,1);
  transition: transform var(--d-move) var(--e-std), box-shadow var(--d-move) var(--e-std);
}
.vid__play:hover { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 4px 10px -2px rgba(0,0,0,.75), 0 28px 55px -18px rgba(10,120,245,.8); }
.vid.is-playing .vid__play { display: none; }
.vid figcaption {
  display: grid; gap: .25rem; padding: clamp(.75rem, 1.6vw, 1rem) clamp(1rem, 2vw, 1.4rem);
  background: linear-gradient(180deg, rgba(9, 13, 22, .96), var(--c-surface));
  box-shadow: inset 0 1px 0 rgba(150, 180, 230, .14);
}
.vid figcaption b { font-family: var(--f-display); font-stretch: 104%; font-size: var(--t-md); }
.vid figcaption span { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-faint); }

/* ---------- 30. Paketdetails ---------------------------------------------- */
.det-link { --btn-radius: 12px; }
.plan .det-link { margin-top: .5rem; }

.det-page .legal__nav { margin-bottom: var(--s-2); }
.det { padding-top: var(--s-5); scroll-margin-top: 110px; }
.det + .det { border-top: 1px solid var(--c-line); margin-top: var(--s-4); }
.det__head { display: grid; gap: var(--s-2); align-items: start; }
@media (min-width: 860px) { .det__head { grid-template-columns: 4rem minmax(0,1fr) auto; gap: var(--s-3); align-items: center; } }
.det__no {
  font-family: var(--f-display); font-stretch: 112%; font-weight: 700; font-size: var(--t-xl);
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.det__head h2 { font-size: var(--t-xl); }
.det__sub { color: var(--c-text-dim); font-size: var(--t-sm); margin-top: .2rem; }
.det__price { font-family: var(--f-display); font-stretch: 106%; font-weight: 700; font-size: var(--t-lg); white-space: nowrap; }
.det__price small { display: block; font-family: var(--f-text); font-size: var(--t-xs); font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-faint); margin-top: .3rem; }
.det__lead { margin-top: var(--s-3); font-size: var(--t-md); color: var(--c-text-dim); max-width: 62ch; }

.det__grid { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
@media (min-width: 900px) { .det__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
.det__col { display: grid; gap: .6rem; align-content: start; }
.det__col h3 { font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--c-text-faint); margin-top: var(--s-2); }
.det__col h3:first-child { margin-top: 0; }
.det__col p { font-size: var(--t-sm); color: var(--c-text-dim); }
.det__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.det__list li { font-size: var(--t-sm); color: var(--c-text-dim); padding-left: 1.5rem; position: relative; }
.det__list--yes li::before { content: "+"; position: absolute; left: 0; color: var(--c-cyan); }
.det__list--no li { color: var(--c-text-faint); }
.det__list--no li::before { content: "–"; position: absolute; left: 0; color: var(--c-text-faint); }
.det__list li.is-lead { padding-left: 0; color: var(--c-text); font-weight: 500;
  font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; }
.det__list li.is-lead::before { content: none; }
.det__ideal { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--c-line);
  font-size: var(--t-xs); color: var(--c-text-faint); }
.det__cta { margin-top: var(--s-4); }

/* ---------- 31. Tiefen-Parallaxe ----------------------------------------- */
/* Solange die Tiefenkarte nicht geladen ist, liegt das normale Bild oben.
   Danach übernimmt der Shader — der Wechsel ist unsichtbar. */
/* Eigene Zeile im Kartenraster: Ohne feste Höhe bliebe der Kasten 0 hoch,
   weil der Shader-Canvas selbst keine Ausdehnung mitbringt. */
.card > .depth { position: relative; width: 100%; aspect-ratio: 1400 / 939; overflow: hidden; }
.depth img, .depth canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.depth canvas { opacity: 0; transition: opacity 500ms var(--e-std); }
.depth.is-live canvas { opacity: 1; }
.depth.is-live img { opacity: 0; transition: opacity 500ms var(--e-std); }

/* ---------- 32. Über mich ------------------------------------------------ */
.about__grid { display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .about__grid { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); } }
.about__photo {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--elev-2); max-width: 420px;
}
.about__photo img { width: 100%; height: auto; display: block; }

/* ---------- Das Foto lebt ein wenig ---------------------------------------
   Ein Portrait neben drei Absaetzen Text ist die statischste Stelle der
   Seite — und ausgerechnet die, an der jemand entscheidet, ob er es mit
   einem Menschen zu tun hat. Also bewegt es sich. Aber so wenig, dass man
   es nicht als Animation wahrnimmt, sondern nur bemerkt, dass das Bild
   nicht tot ist.

   Drei Dinge, absichtlich getrennt gehalten:
     scale     — ein sehr langsames Atmen, 24 Sekunden je Richtung
     translate — beim Scrollen laeuft das Bild etwas langsamer als sein
                 Rahmen; das ist die Bewegung, die Tiefe erzeugt
     ::before  — ein Lichtstreifen, der einmal alle 14 Sekunden darueber geht

   Weil `scale` und `translate` in CSS eigene Eigenschaften sind, koennen
   zwei Animationen sie gleichzeitig steuern, ohne sich zu ueberschreiben.
   Frueher haette dafuer eine verschachtelte Huelle gebraucht. */
.about__photo { position: relative; isolation: isolate; }
.about__photo img {
  transform-origin: 50% 42%;   /* etwa auf Augenhoehe, nicht in der Bildmitte */
  will-change: scale, translate;
  animation: fotoAtmen 24s var(--e-std, ease-in-out) infinite alternate;
}
@keyframes fotoAtmen {
  from { scale: 1; }
  to   { scale: 1.045; }
}

/* Der Lichtstreifen. Er laeuft schraeg, weil senkrecht nach Scanner aussieht
   und waagerecht nach Ladebalken. */
.about__photo::before {
  content: ""; position: absolute; inset: -30% -60%; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 42%, rgba(255, 255, 255, .10) 50%, transparent 58%);
  translate: -60% 0;
  animation: fotoLicht 14s var(--e-std, ease-in-out) 3s infinite;
}
@keyframes fotoLicht {
  0%   { translate: -60% 0; opacity: 0; }
  8%   { opacity: 1; }
  26%  { translate: 60% 0; opacity: 0; }
  100% { translate: 60% 0; opacity: 0; }
}

/* Das Mitlaufen beim Scrollen — nur dort, wo der Browser Zeitleisten aus dem
   Scrollen bauen kann. Wo nicht, fehlt genau diese eine Feinheit und sonst
   nichts. */
@supports (animation-timeline: view()) {
  .about__photo img {
    animation: fotoAtmen 24s var(--e-std, ease-in-out) infinite alternate,
               fotoTiefe linear both;
    animation-timeline: auto, view();
    animation-range: normal, cover 0% cover 100%;
  }
  @keyframes fotoTiefe {
    from { translate: 0 -3.5%; }
    to   { translate: 0 3.5%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .about__photo img { animation: none !important; scale: 1 !important; translate: none !important; }
  .about__photo::before { animation: none !important; opacity: 0; }
}
.about__text { display: grid; gap: var(--s-2); }
.about__text h2 { font-size: var(--t-xl); }
.about__role {
  font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-text-faint); margin-top: -.4rem;
}
.about__text p { color: var(--c-text-dim); font-size: var(--t-sm); max-width: 58ch; }

/* Handschriftlicher Namenszug — wie mit der Feder geschrieben.
   Technik: Die Mittellinie der Schrift wurde aus dem gerenderten Zug
   errechnet (Skelettierung) und in einzelne Federzüge zerlegt. Jeder Zug
   zeichnet sich als Maske über der eigentlichen Buchstabenform — dadurch
   erscheint die volle Strichstärke genau dort, wo die Feder gerade war.
   Nicht ein Vorhang, der aufgeht, sondern ein Strich, der entsteht. */
.sig { position: relative; margin-top: var(--s-3); width: fit-content; max-width: 100%; }
.sig__svg { display: block; width: clamp(240px, 30vw, 420px); height: auto; overflow: visible; }
.sig__svg image { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .8)); }
.feder {
  fill: none; stroke: #fff; stroke-width: 46;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--zug); stroke-dashoffset: var(--zug);
}
.sig.is-writing .feder {
  animation: federZug var(--dauer) linear var(--start) forwards;
}
@keyframes federZug { to { stroke-dashoffset: 0; } }
/* Vor dem Schreiben ist nichts zu sehen; ohne JS erscheint alles sofort. */
.sig:not(.is-writing) .feder { stroke-dashoffset: var(--zug); }
@media (prefers-reduced-motion: reduce) {
  .feder { stroke-dashoffset: 0 !important; animation: none !important; }
}

.sig__note { font-size: var(--t-xs); color: var(--c-text-faint); margin-top: .2rem; }
@media (prefers-reduced-motion: reduce) {
  .sig__name { clip-path: none; animation: none; }
  .sig__pen { display: none; }
}

/* ---------- 33. Soziale Kanäle ------------------------------------------- */
.social { display: flex; justify-content: center; gap: .6rem; margin-top: var(--s-1); }
.social[hidden] { display: none; }
.social__a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  color: var(--c-text-dim);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px var(--c-line),
              0 10px 24px -18px rgba(0,0,0,.9);
  transition: color var(--d-ui) linear, transform var(--d-move) var(--e-std),
              box-shadow var(--d-move) var(--e-std);
}
.social__a:hover {
  color: #fff; transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(31,232,255,.45),
              0 16px 32px -16px rgba(10,120,245,.8);
}
.social__a:active { transform: translateY(0); }

/* Besucherzähler in der Fußzeile — gleiche Schriftgröße und Farbe wie das
   Copyright daneben, nur die Zahl im Markenton. */
.zaehler { font-size: var(--t-xs); color: var(--c-text-faint); font-variant-numeric: tabular-nums; }
.zaehler b { color: var(--c-cyan); font-weight: 600; }

/* Zugang zum Cockpit — bewusst klein und unbeschriftet. Er soll für dich
   erreichbar sein, ohne Besuchern ins Auge zu springen. */
.admin {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; color: var(--c-text-faint); opacity: .5;
  transition: opacity var(--d-ui) linear, color var(--d-ui) linear, background-color var(--d-ui) linear;
}
.admin:hover { opacity: 1; color: var(--c-cyan); background: rgba(31, 232, 255, .08); }


/* ---------- Betreuung als eigener Block ----------------------------------
   Sie ist ein eigener Vertrag, kein Aufschlag auf das Paket. Deshalb steht sie
   abgesetzt, mit einer Linie darueber — sichtbar getrennt, ohne einen zweiten
   Preisbereich zu erfinden. */
.care{scroll-margin-top:clamp(72px,10vh,110px);margin-top:clamp(48px,7vw,88px);padding-top:clamp(32px,5vw,56px);border-top:1px solid var(--c-line)}
.care__head{font-size:clamp(20px,2.4vw,26px);margin:0 0 8px}
.care__lead{max-width:62ch;color:var(--c-text-dim);line-height:1.65;margin:0 0 clamp(20px,3vw,32px)}

/* --------------------------------------------------------------------------
   Die zwei Monatsvertraege nebeneinander

   Solange die Festpreis-Karte da war, fiel es nicht auf: Betreuung und Hosting
   standen untereinander, jede in einem .plans-Raster, das fuer drei Karten
   gebaut ist — und in jedem stand eine. Zwei Drittel Leere, zweimal
   untereinander. Nebeneinander stimmt das Bild wieder, und es stimmt auch
   inhaltlich: Es sind die beiden Vertraege, die man hier monatlich und ohne
   Website abschliessen kann.

   Die Trennlinie zieht jetzt der Rahmen. Zoege sie jede Haelfte fuer sich,
   waeren es nebeneinander zwei Striche mit einer Luecke dazwischen.
   -------------------------------------------------------------------------- */
.monatlich{
  margin-top:clamp(48px,7vw,88px);
  padding-top:clamp(32px,5vw,56px);
  border-top:1px solid var(--c-line);
  display:grid; gap:clamp(28px,4vw,56px);
}
@media (min-width:900px){
  .monatlich{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start}
}
.monatlich .care{margin-top:0; padding-top:0; border-top:0}
@media (max-width:899px){
  .monatlich .care + .care{
    margin-top:clamp(28px,5vw,44px); padding-top:clamp(24px,4vw,36px);
    border-top:1px solid var(--c-line);
  }
}
/* Im halben Raum ist ein Dreispaltenraster sinnlos. Und die Karte darf nicht
   auf die volle Haelfte wachsen: Sie ist fuer rund 380px entworfen, alles
   darueber zieht Preis und Liste unnoetig auseinander.

   Nur ab 900px, also nur innerhalb des Zweispalters. Darunter steht jede
   Haelfte allein auf voller Breite — eine auf 420px gedeckelte Karte wirkt
   dort verloren statt aufgeraeumt. */
@media (min-width:900px){
  .monatlich .plans{grid-template-columns:minmax(0,clamp(260px,100%,420px))}
}


/* ---------- Kundenstimmen ------------------------------------------------
   Ruhige Karten, kein Karussell: Wer drei Zitate lesen will, soll sie
   nebeneinander sehen und nicht auf das naechste warten muessen. */
.stimmen{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.stimme{margin:0;padding:clamp(20px,2.4vw,28px);border:1px solid var(--linie,rgba(255,255,255,.1));border-radius:16px;background:var(--flaeche2,rgba(255,255,255,.02))}
.stimme__sterne{display:block;letter-spacing:2px;margin-bottom:12px;color:var(--cyan,#1fe8ff);font-size:14px}
.stimme__sterne i{color:var(--linie2,rgba(255,255,255,.18));font-style:normal}
.stimme blockquote{margin:0;font-size:clamp(15px,1.5vw,17px);line-height:1.65}
.stimme blockquote::before{content:"\201E"}
.stimme blockquote::after{content:"\201C"}
.stimme figcaption{margin-top:14px;font-size:13px;color:var(--leise,#6b7280)}


/* ---------- Individuelle Projekte ----------------------------------------
   Bewusst KEINE vierte Preiskarte, sondern eine andere Form: ein breites
   Feld, zweigeteilt. Der Grund ist nicht Geschmack. Neben drei Karten mit
   499, 899 und 1499 Euro liest sich eine Karte ohne Zahl als die teuerste —
   die Leerstelle wird gefuellt, und zwar mit dem schlimmsten Wert, den der
   Leser sich vorstellen kann. In eigener Form steht sie nicht im Vergleich,
   sondern daneben: ein anderer Weg, kein teureres Paket. */
.masz { padding-top: 0; }
.masz__panel {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 4vw, 68px);
  align-items: start;
  padding: clamp(26px, 4vw, 56px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-line);
  /* Der Schein war .17 und machte diese Fläche zur hellsten der ganzen
     Preisbewegung — heller als der Höhepunkt, den sie beantworten soll. Zwei
     Kästen sagen hier nacheinander dasselbe („dein Projekt ist besonders,
     rechne es dir aus"); der zweite darf den ersten nicht überstrahlen,
     sonst steigt die Bewegung nach ihrem Gipfel noch einmal an und der
     Leser weiß nicht mehr, worauf sie hinauswollte. */
  background:
    radial-gradient(130% 150% at 6% 0%, rgba(10, 120, 245, .07), transparent 60%),
    linear-gradient(180deg, var(--c-surface-2), var(--c-surface));
  box-shadow: var(--elev-1);
}
.masz__panel > * { min-width: 0; }
.masz__text h3 {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  line-height: 1.12;
  margin: .35rem 0 1rem;
  text-wrap: balance;
}
.masz__lead { font-size: var(--t-md); line-height: 1.5; margin: 0 0 1.1rem; max-width: 48ch; }
.masz__p    { color: var(--c-text-dim); line-height: 1.7; margin: 0 0 1.6rem; max-width: 56ch; }
.masz__tun  { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.masz__note {
  margin: 1rem 0 0; max-width: 52ch;
  font-size: var(--t-sm); line-height: 1.6; color: var(--c-text-faint);
}

/* Die rechte Spalte ist die Belegseite: was hier steht, beantwortet die
   Frage "bin ich damit gemeint?" schneller als jeder Fliesstext. */
.masz__liste {
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: rgba(150, 180, 230, .045);
}
.masz__listhead {
  margin: 0 0 .9rem;
  font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-text-faint);
}
.masz__liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.masz__liste li {
  position: relative; padding-left: 1.6rem;
  font-size: var(--t-sm); line-height: 1.55; color: var(--c-text-dim);
}
.masz__liste li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: .55rem; height: .55rem; border-radius: 2px;
  background: var(--grad-brand); opacity: .85;
}

@media (max-width: 900px) {
  .masz__panel { grid-template-columns: 1fr; }
}




/* ---------- 33. Karten beruhigt ------------------------------------------
   Gemessen war eine Leistungskarte 647 bis 1008 px hoch — fast ein ganzer
   Bildschirm pro Stueck. Der Grund war nicht die Groesse allein, sondern die
   Hierarchie: die Karten-Ueberschrift lag fast auf der Abschnitts-
   ueberschrift. Kleiner setzen, Icon-Chips raus, aeusseren Rahmen weg,
   gleiche Spalten, keine Fuellung.
   ------------------------------------------------------------------------ */
.service p { max-width: 52ch; }
.service ul { gap: .3rem; }
.service li { line-height: 1.5; }

/* Preiskarten: der zweite Knopf und der Zielgruppen-Absatz sind entfallen,
   die Vergleichstabelle darunter traegt beides ohnehin. */
.plan { gap: .55rem; }
.plan__sub { font-size: var(--t-sm); }
.plan ul { gap: .32rem; }
.plan .btn { margin-top: .6rem; }

/* ---------- 34. Buehne: ein Projekt in echten Geraeten --------------------
   Die Huellen sind Fotografien, die Bildschirminhalte echte Vollseiten-
   Aufnahmen der laufenden Kundenseite. Die Bildschirmflaechen sind aus den
   Fotos ausgemessen, nicht geschaetzt:
     Notebook  left 24.6 %  top 15.7 %  breit 50.8 %  hoch 62.6 %
     Telefon   left 19.6 %  top 19.3 %  breit 61.2 %  hoch 65.7 %
   -------------------------------------------------------------------------- */
.buehne { position: relative; }

/* Die Aufnahme laeuft bis an die Kartenkante — kein zweiter Rahmen um ein
   Bild, das selbst schon einen Rahmen zeigt. */
.buehne__szene {
  position: relative;
  /* Solange die Platte laedt, ist hier sonst ein Loch: die Karte ist
     durchscheinend, und man sieht die 3D-Welt hinter zwei schwarzen
     Rechtecken. Ein dunkler Grund macht daraus eine dunkle Buehne. */
  background: #0a0e16;
}
.buehne__platte { display: block; width: 100%; height: auto; }

.geraet { position: absolute; margin: 0; }
.geraet--laptop { left: 20.936%; top: 15.700%; width: 43.234%; height: 62.600%; }

/* Das Telefon ist eine eigene Ebene, weil es in der Szene VOR dem Notebook
   steht. Beim Neigen der Karte muss es sich deshalb weiter bewegen als der
   Hintergrund — das uebernimmt buehne.js. Sein Schatten bleibt in der Platte:
   ein paar Pixel Versatz gegen einen 30 px weichen Schatten sieht niemand. */
.buehne__vorn { position: absolute; left: 65.957%; top: 27.333%; width: 16.702%; }
.buehne__telefon { display: block; width: 100%; height: auto; }
.geraet--handy { left: 6.580%; top: 7.229%; width: 89.707%; height: 89.616%; border-radius: 3px; }

.geraet__schirm {
  position: absolute; inset: 0; overflow: hidden; background: #05070d; border-radius: inherit;
  /* Die Kundenseite hat lange weisse Abschnitte. Ohne Behandlung wird die
     Karte in dem Moment zu einem weissen Klotz — und ein Bildschirm in einem
     dunklen Raum sieht so nie aus. Drei Dinge fehlen einer eingesetzten
     Aufnahme: der Schein, den er in den Raum wirft, ein Hauch Schleier, und
     die dunkleren Ecken. Alle drei sind hier billig zu haben. */
  box-shadow: 0 0 52px 8px rgba(140, 180, 255, .12);
  filter: brightness(.95) saturate(1.03);
}
/* Die beiden Kundenseiten sind 7-mal auseinander: Cavaleri liegt im Mittel
   bei Helligkeit 156 (die Haelfte der Flaeche ist weisses Papier), Trendonix
   bei 22 (94 % dunkler als 60). Ein Schleier, der die eine rettet, erschlaegt
   die andere. Also zwei Belichtungen — ein Fotograf wuerde die beiden auch
   nicht gleich ausleuchten. */
[data-ton="dunkel"] .geraet__schirm {
  box-shadow: 0 0 58px 10px rgba(227, 200, 139, .13);   /* Gold, wie die Seite */
  filter: brightness(1.16) saturate(1.06);
}
[data-ton="dunkel"] .geraet__schirm::after {
  background:
    radial-gradient(126% 122% at 50% 44%, transparent 62%, rgba(2, 8, 20, .17) 100%),
    linear-gradient(112deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .016) 24%, transparent 48%);
}


/* Jonika liegt dazwischen: Mittel 87,2, ein Viertel der Flaeche heller als
   200, drei Fuenftel dunkler als 60 — die Seite hat eine dunkle Haelfte
   (das Sachbuch) und eine helle (die Kinderbuecher). Weder die eine noch die
   andere Belichtung passt, also eine dritte: kaum angehoben, halbe Vignette,
   und der Schein im Gold der Seite. */
[data-ton="gemischt"] .geraet__schirm {
  box-shadow: 0 0 54px 9px rgba(214, 169, 74, .12);
  filter: brightness(1.03) saturate(1.03);
}
[data-ton="gemischt"] .geraet__schirm::after {
  background:
    radial-gradient(124% 120% at 50% 44%, transparent 57%, rgba(2, 8, 20, .25) 100%),
    linear-gradient(112deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 24%, transparent 48%);
}.geraet__bahn { display: block; width: 100%; will-change: transform; }
/* Film statt Bildbahn: gleiche Flaeche, gleicher Ausschnitt. Die Aufnahme ist
   im Seitenverhaeltnis des Bildschirms gedreht, cover schneidet also nichts
   Wesentliches weg. */
.geraet__film { display: block; width: 100%; height: 100%; object-fit: cover; background: #05070d; }
.geraet__bahn img { display: block; width: 100%; height: auto; }

/* Glas: ohne diesen Streifen liest sich die Aufnahme als aufgeklebtes
   Rechteck, mit ihm als Bildschirm hinter einer Scheibe. */
.geraet__schirm::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 4;
  background:
    radial-gradient(122% 118% at 50% 44%, transparent 52%, rgba(2, 10, 26, .36) 100%),
    linear-gradient(112deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .022) 24%, transparent 48%);
}

/* Zeiger: kein nachgezeichneter Cursor, sondern ein kleiner heller Punkt mit
   Ring — auf einer Aufnahme liest sich das als Zeiger, ohne wie ein Fremd-
   koerper aus einem anderen Betriebssystem auszusehen. */
.geraet__zeiger {
  position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; pointer-events: none; z-index: 2;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 1px rgba(5, 7, 13, .55), 0 0 14px 2px rgba(31, 232, 255, .45);
  transition: transform 60ms linear, width 160ms var(--e-std), height 160ms var(--e-std);
}
.geraet__zeiger.ist-klick { width: 26px; height: 26px; margin: -13px 0 0 -13px; background: rgba(31, 232, 255, .35); }

/* Ladebalken oben im Bildschirm, wie im echten Browser */
.geraet--laptop::after {
  content: ""; position: absolute; left: 0; top: 0; width: 0; height: 2px; z-index: 3;
  background: var(--c-cyan); opacity: 0; pointer-events: none;
}
.geraet--laptop.laedt::after { animation: buehneLaden 600ms linear forwards; }
@keyframes buehneLaden {
  from { width: 0; opacity: 1; }
  to   { width: 100%; opacity: 0; }
}

/* Die Karte traegt die Aufnahme randlos; Text bekommt seine Polsterung selbst.
   Und sie nimmt IMMER die ganze Reihe: zwischen 780 und 1180 px stand sie
   sonst in einer halben Spalte, und dann ist der Notebook-Bildschirm 170 px
   breit — aus einer Aufnahme wird Grafik-Matsch. */
.card--buehne { padding: 0; gap: 0; grid-column: 1 / -1; }
.card--buehne .card__body {
  display: grid; gap: .5rem;
  padding: 0 clamp(1.4rem, 2.4vw, 2.2rem) clamp(1.4rem, 2.4vw, 2.2rem);
}
p.buehne__fuss {
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: baseline;
  /* .card p deckelt auf 46ch und ist spezifischer als eine Klasse allein —
     daher p davor, sonst brach die Adresse mitten im Wort um. */
  max-width: none;
  font-family: var(--f-display); font-size: var(--t-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-faint);
  padding: clamp(.5rem, 1.1vw, .8rem) clamp(1.4rem, 2.4vw, 2.2rem) clamp(.5rem, 1vw, .7rem);
}
p.buehne__fuss b { color: var(--c-cyan); font-weight: 600; }

/* Schmale Schirme: das Notebook faellt weg. Bei 350 px Kartenbreite waere
   sein Bildschirm 150 px breit — man saehe graue Flecken statt einer Website.
   Das Telefon dagegen zeigt auf einem Telefon genau das Richtige, gross und
   lesbar. Die Notebook-Aufnahme laedt dann gar nicht erst: ein lazy-Bild in
   einem display:none-Zweig holt der Browser nicht. */
@media (max-width: 779px) {
  .buehne__szene { padding-top: 126%; }
  .buehne__platte, .geraet--laptop { display: none; }
  .buehne__vorn { left: 19%; top: 1%; width: 62%; }
  .buehne__telefon { filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .62)); }
}

@media (prefers-reduced-motion: reduce) {
  .geraet__zeiger { display: none; }
  .geraet__bahn { will-change: auto; }
}

/* ---------- 35. Schaubuehne: zwei Karussells, echte 3D-Koerper -------------
   Vier Projekte, oben die Notebooks, unten die Telefone, beide am selben
   Zeiger. Das vordere Geraet kommt auf einen zu, die anderen weichen zurueck
   und drehen sich zur Mitte.

   Die Geraete sind Koerper, keine Bilder: Vorderseite ist die Aufnahme,
   Deckelkanten und Rueckseite sind eigene Flaechen in preserve-3d. Nur so
   stimmt die Perspektive, wenn man mit der Maus darueberfaehrt — ein
   gekipptes Foto schert, ein Koerper dreht sich.

   Der Grund bleibt durchsichtig: dahinter steht die feste Leinwand mit dem V,
   und die soll beim Scrollen durchscheinen. Nur der Tisch traegt.
   -------------------------------------------------------------------------- */
.card--schau { padding: 0; gap: 0; grid-column: 1 / -1; background: transparent; }
.schau { position: relative; isolation: isolate;
  /* Luft nach oben: das vordere Geraet neigt sich beim Ueberfahren, und die
     Karte schneidet ab (overflow: hidden). */
  padding-top: clamp(.5rem, 1.2vw, 1.1rem); }

/* Raum: Wand laeuft nach oben aus, Tisch traegt. Kein Bild noetig — die
   Vorlage war selbst ein glatter Verlauf. */
.schau__raum {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Nach oben laeuft der Grund aus, damit das V dahinter durchkommt. Keine
     durchgehende Tischkante: die beiden Reihen stehen nicht auf derselben
     Ebene, eine Kante quer durch beide waere gelogen. Jede Reihe bekommt
     stattdessen ihren eigenen Schattengrund. */
  background: linear-gradient(180deg,
    transparent 0%, rgba(8,12,20,.22) 30%, rgba(8,12,20,.55) 66%, rgba(9,13,21,.74) 100%);
}
.schau__gleis::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -6px; height: 26px;
  pointer-events: none; z-index: 0;
  background: radial-gradient(60% 100% at 50% 0%, rgba(150,170,205,.13), transparent 72%);
}

.schau__gleis {
  position: relative; z-index: 1;
  perspective: 1600px; perspective-origin: 50% 45%;
  height: var(--gleis-h); margin: 0 auto;
}
/* Beide Gleise gleich hoch: ein 480 px breites Notebook ist 337 px hoch, ein
   176 px breites Telefon genauso. So stehen beide Reihen auf einer Linie. */
.schau__gleis--laptop { --gleis-h: clamp(126px, 15.6vw, 224px); transform: translateX(-7%); }
/* Die Telefone stehen nicht unter den Notebooks, sondern versetzt davor —
   wie ein Telefon neben einem Notebook auf demselben Tisch liegt. Das spart
   die Haelfte der Hoehe und verdeckt keinen Bildschirm. */
.schau__gleis--handy  { --gleis-h: clamp(120px, 14.8vw, 213px);
  margin-top: calc(var(--gleis-h) * -.55); transform: translateX(19%); }

.stueck {
  position: absolute; left: 50%; bottom: 0; margin: 0;
  width: var(--st-b); margin-left: calc(var(--st-b) / -2);
  transform-origin: 50% 100%;      /* die Geraete stehen auf dem Tisch, sie schweben nicht */
  transform-style: preserve-3d; cursor: pointer;
  transition: transform 620ms var(--e-std), opacity 420ms linear, filter 420ms linear;
  will-change: transform;
}
/* Kleiner als zuvor: so passen beide Karussells samt Waehler auf einen
   Bildschirm, ohne dass man scrollen muss, um die Schau ganz zu sehen. */
.schau__gleis--laptop .stueck { --st-b: clamp(180px, 22.2vw, 319px); }
.schau__gleis--handy  .stueck { --st-b: clamp(63px, 7.8vw, 112px); }
.stueck.ist-vorn { cursor: default; }
.stueck:not(.ist-vorn) { filter: brightness(.62) saturate(.85); }
.stueck:not(.ist-vorn):hover { filter: brightness(.82) saturate(.95); }
.stueck:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 6px; border-radius: 8px; }

.stueck__koerper { position: relative; transform-style: preserve-3d; }
.stueck__foto { display: block; width: 100%; height: auto; position: relative; z-index: 2; }

/* Der Kasten umfasst nur den Deckel, nicht das ganze Foto — sonst stuenden
   die Kanten als helle Fluegel neben dem Geraet. */
.stueck__kasten { position: absolute; transform-style: preserve-3d; --t: 7px; }
.schau__gleis--laptop .stueck__kasten { left: 5.62%; right: 6.56%; top: .59%; bottom: 13.65%; }
.schau__gleis--handy  .stueck__kasten { left: 1.2%;  right: 1.2%;  top: .8%;  bottom: .8%; --t: 9px; }
.kante { position: absolute; background: linear-gradient(180deg, #3f454e, #20242b 40%, #171a20); }
.k-l { left: 0; top: 0; width: var(--t); height: 100%; transform-origin: left center;   transform: rotateY(-90deg) translateZ(calc(var(--t) / -2)); }
.k-r { right: 0; top: 0; width: var(--t); height: 100%; transform-origin: right center; transform: rotateY(90deg)  translateZ(calc(var(--t) / -2)); }
.k-o { left: 0; top: 0; width: 100%; height: var(--t); transform-origin: center top;    transform: rotateX(90deg)  translateZ(calc(var(--t) / -2));
       background: linear-gradient(90deg, #2a2f37, #5c636e 30%, #3a4049); }
.k-u { left: 0; bottom: 0; width: 100%; height: var(--t); transform-origin: center bottom; transform: rotateX(-90deg) translateZ(calc(var(--t) / -2));
       background: linear-gradient(90deg, #15181d, #23272e); }
.stueck__hinten { position: absolute; inset: 0; transform: translateZ(calc(var(--t) / -2));
  background: linear-gradient(160deg, #31363f, #1b1e24); border-radius: 5px; }

.stueck__schirm {
  position: absolute; overflow: hidden; background: #05070d; z-index: 3;
  box-shadow: 0 0 46px 8px rgba(140, 180, 255, .10);
}
.schau__gleis--laptop .stueck__schirm { left: 7.25%; top: 3.16%; width: 84.667%; height: 83.591%; }
.schau__gleis--handy  .stueck__schirm { left: 6.58%; top: 7.23%; width: 89.707%; height: 89.616%; border-radius: 3px; }
.stueck__schirm::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background:
    radial-gradient(122% 118% at 50% 44%, transparent 55%, rgba(2,10,26,.30) 100%),
    linear-gradient(112deg, rgba(255,255,255,.085), rgba(255,255,255,.02) 24%, transparent 48%);
}
.stueck__bahn { display: block; width: 100%; }
.stueck__bahn img, .stueck__film { display: block; width: 100%; }
.stueck__film { height: 100%; object-fit: cover; background: #05070d; }
[data-ton="dunkel"]   .stueck__schirm { filter: brightness(1.16) saturate(1.06); box-shadow: 0 0 52px 9px rgba(227,200,139,.12); }
[data-ton="gemischt"] .stueck__schirm { filter: brightness(1.03) saturate(1.03); box-shadow: 0 0 50px 9px rgba(214,169,74,.12); }

/* Waehler */
.schau__waehler {
  position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .4rem;
  justify-content: center; padding: clamp(.4rem, .9vw, .7rem) 1rem 0;
}
.schau__waehler button {
  border: 0; background: rgba(255,255,255,.04); color: var(--c-text-faint); cursor: pointer;
  border-radius: 999px; padding: .55rem 1rem; min-height: 44px;
  font-family: var(--f-display); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px var(--c-line);
  transition: color var(--d-ui) linear, background-color var(--d-ui) linear;
}
.schau__waehler button:hover { color: var(--c-text); }
.schau__waehler button[aria-current="true"] { background: var(--c-surface-2); color: var(--c-text); }
.card--schau .card__body { display: grid; gap: .5rem; padding: 0 clamp(1.4rem,2.4vw,2.2rem) clamp(1.4rem,2.4vw,2.2rem); }
.schau__text[hidden] { display: none; }

/* Ohne 3D, mit reduzierter Bewegung oder auf schmalen Schirmen: die Karussells
   werden zu einer schlichten Liste. Der Inhalt ist derselbe, er liegt im DOM. */
@media (max-width: 779px), (prefers-reduced-motion: reduce) {
  .schau__gleis { perspective: none; height: auto; transform: none; }
  .schau__gleis--handy { margin-top: clamp(.6rem, 2vw, 1rem); }
  .stueck { position: relative; left: auto; margin-left: auto; width: 100%; transform: none !important; transition: none; }
  .stueck:not(.ist-vorn) { display: none; }
  .schau__gleis--laptop .stueck { --st-b: 100%; }
  /* Das Telefon nicht auf Kartenbreite aufblasen — bei 350 px Karte waere es
     669 px hoch und die Schau allein so lang wie ein halber Bildschirm. */
  .schau__gleis--handy .stueck { width: 44%; margin: 0 auto; }
  .schau__gleis--handy { display: flex; justify-content: center; }
  .stueck__kasten { display: none; }
}
@media (prefers-reduced-motion: reduce) { .stueck { transition: none; } }

/* Standbild liegt immer, die laufende Aufnahme nur beim vorderen Geraet —
   so laden die schweren Dateien erst, wenn ein Projekt wirklich vorn steht. */
.stueck__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
.stueck__live  { position: absolute; inset: 0; z-index: 2; display: none; }
.stueck.ist-vorn .stueck__live { display: block; }
.stueck.ist-vorn .stueck__still { opacity: 0; transition: opacity 500ms linear 200ms; }

/* ==========================================================================
   Bedarfsweg — der eine Weg zum Preis

   Bis zum 12.09.2026 stand eine Festpreis-Karte daneben und dieser Block war
   "fuer alles Weitere". Jetzt ist er der Hauptakt: Wenn der Preis ohnehin aus
   dem Umfang entsteht, ist eine feste Zahl daneben keine Alternative, sondern
   ein Widerspruch.

   Zweispaltig ab 920px — links der Grund und der Knopf, rechts die drei
   Schritte. Getrennt durch eine Linie, nicht durch eine zweite Karte: Zwei
   Karten nebeneinander konkurrieren, eine Karte mit zwei Haelften fuehrt.

   Die Token hiessen hier --blau/--cyan/--dim/--leise/--r-lg und gibt es im
   System gar nicht; der Block lief seit jeher auf seinen Rueckfallwerten und
   war dadurch runder, anders blau und anders grau als alles daneben. Jetzt
   stehen die echten Namen da.
   ========================================================================== */
.bedarfsweg{
  position:relative; margin-top:clamp(28px,4vw,44px);
  padding:clamp(26px,4vw,44px) clamp(22px,4vw,48px);
  border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(180deg, var(--c-surface-2) 0%, var(--c-base-2) 46%);
  display:grid; gap:clamp(22px,3.4vw,44px);
}
@media (min-width:920px){
  .bedarfsweg{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); align-items:center}
}
.bedarfsweg::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px; z-index:1;
  background:linear-gradient(180deg,var(--c-blue),var(--c-cyan));
}
.bedarfsweg__text{max-width:62ch}
.bedarfsweg h3{
  font-size:clamp(21px,3.1vw,30px); line-height:1.22; margin:.5rem 0 .7rem;
  letter-spacing:-.01em;
}
.bedarfsweg p{color:var(--c-text-dim); line-height:1.7; margin:0}
.bedarfsweg__tun{margin-top:clamp(18px,2.4vw,26px); display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px,2vw,22px)}
.bedarfsweg__note{
  margin-top:14px !important; font-size:var(--t-xs); color:var(--c-text-faint); line-height:1.6;
}
@media (max-width:640px){
  .bedarfsweg::before{inset:0 0 auto 0; width:auto; height:3px;
    background:linear-gradient(90deg,var(--c-blue),var(--c-cyan));}
}

/* --------------------------------------------------------------------------
   Die drei Schritte — was nach dem Klick passiert

   Genummert, weil es wirklich eine Reihenfolge ist und nicht drei Argumente.
   Die Ziffer sitzt in einem eigenen Kreis statt als "01." im Satz: So ist sie
   eine Marke am Rand, an der das Auge die Zeilen abzaehlt.
   -------------------------------------------------------------------------- */
.schritte{
  list-style:none; margin:0; padding:0; align-content:center;
  display:grid; gap:clamp(14px,1.8vw,20px);
}
.schritte li{
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start;
  gap:14px; font-size:var(--t-sm); line-height:1.55; color:var(--c-text-dim);
}
.schritte b{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-display); font-size:var(--t-sm); font-weight:700;
  color:var(--c-cyan);
  background:color-mix(in oklab, var(--c-blue) 24%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c-cyan) 30%, transparent);
}
@media (min-width:920px){
  .schritte{
    padding-left:clamp(24px,3vw,40px);
    border-left:1px solid color-mix(in oklab, var(--c-cyan) 15%, transparent);
  }
}

/* --------------------------------------------------------------------------
   Orientierung — vier Zahlen statt einer Preiskarte

   Das eine, was die Festpreis-Karte konnte, war: eine Zahl nennen. Ohne jede
   Zahl nimmt der Leser das Schlimmste an. Vier Beispiele koennen dasselbe
   besser — sie geben einen Anker, ohne jemanden in ein Paket zu stecken.

   Bewusst kleiner als die alten Paketkarten und ohne Knopf: Das hier verkauft
   nichts, es beantwortet nur "und was heisst das in Euro". Wer geklickt hat,
   klickt oben.
   -------------------------------------------------------------------------- */
.orient{margin-top:clamp(30px,4.5vw,52px)}
.orient__head{font-size:var(--t-md); margin:0 0 .4rem}
.orient__lead{
  color:var(--c-text-dim); font-size:var(--t-sm); line-height:1.7;
  margin:0 0 clamp(16px,2.4vw,24px); max-width:62ch;
}
/* Feste Stufen statt auto-fit: Auf dem Tablet ergab auto-fit drei Kacheln und
   eine allein in der zweiten Reihe — vier Beispiele, die wie drei plus ein
   Nachzuegler aussehen. 1 / 2 / 4 geht immer auf. */
.orient__liste{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(10px,1.4vw,16px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:560px){.orient__liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.orient__liste{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ofall{
  display:flex; flex-direction:column; gap:.55rem; justify-content:space-between;
  padding:clamp(14px,1.8vw,20px);
  border-radius:var(--radius-lg);
  background:color-mix(in oklab, var(--c-surface-2) 62%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c-cyan) 12%, transparent);
  transition:box-shadow var(--d-ui) linear, transform var(--d-move) var(--e-std);
}
.ofall:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c-cyan) 30%, transparent);
}
.ofall__was{font-size:var(--t-sm); color:var(--c-text-dim); line-height:1.4}
.ofall__preis{
  font-family:var(--f-display); font-stretch:106%; font-weight:700;
  font-size:clamp(1.05rem,.95rem + .6vw,1.35rem); letter-spacing:-.02em;
  color:var(--c-text);
}
.orient__note{
  margin:clamp(14px,2vw,20px) 0 0; font-size:var(--t-xs);
  color:var(--c-text-faint); line-height:1.6;
}
@media (prefers-reduced-motion: reduce){
  .ofall, .ofall:hover{transition:none; transform:none}
}

/* --------------------------------------------------------------------------
   Sprachhinweis — ein Vorschlag, kein Riegel

   Sitzt ueber allem, ist aber bewusst leise: Er unterbricht nicht, er bietet
   an. Deshalb kein Modal, kein Overlay, keine Verdunklung — ein Streifen, der
   den Inhalt nach unten schiebt und sich mit einem Klick verabschiedet.
   -------------------------------------------------------------------------- */
.sprachhinweis{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px clamp(16px,4vw,32px);
  background:color-mix(in oklab, var(--blau,#0648e8) 12%, #0a0e14);
  border-bottom:1px solid color-mix(in oklab, var(--cyan,#1fe8ff) 26%, transparent);
  font-size:14px; line-height:1.45; color:var(--hell,#e8ecf1);
  /* Ueber der Kopfzeile, die fest bei z-index 100 steht. Ohne das liegt sie
     zwar sichtbar da, faengt aber keinen Klick mehr — die Kopfzeile schluckt
     ihn. Genau das ist beim Testen passiert. */
  position:sticky; top:0; z-index:110;
}
/* Solange die Leiste steht, rueckt die feste Kopfzeile um ihre Hoehe nach
   unten. Sonst legt sie sich darueber und beide streiten um dieselbe Zeile. */
html.hat-sprachhinweis .header{top:var(--sprachhinweis-h,0px)}
/* Die Kopfzeile faehrt beim Abwaertsscrollen aus dem Bild — mit
   translateY(-104%), gemessen an ihrer eigenen Hoehe. Das genuegt nur, solange
   sie bei top:0 sitzt. Steht die Sprachleiste darueber, beginnt sie 82 Pixel
   tiefer und bleibt nach demselben Weg zur Haelfte sichtbar: als Streifen, der
   quer ueber der Sprachleiste parkt. Also muss der Weg um genau diese Hoehe
   laenger werden. */
html.hat-sprachhinweis .header.ist-weg{transform:translateY(calc(-104% - var(--sprachhinweis-h,0px)))}
/* Sprungziele muessen auch an der Leiste vorbei. */
html.hat-sprachhinweis{scroll-padding-top:calc(clamp(4.5rem, 8vw, 6rem) + var(--sprachhinweis-h,0px))}
.sprachhinweis__text{flex:1 1 auto; min-width:12ch}
.sprachhinweis__ja{
  flex:0 0 auto; padding:7px 16px; border-radius:999px; text-decoration:none;
  background:linear-gradient(92deg,var(--blau,#0648e8),var(--cyan,#1fe8ff));
  color:#fff; font-weight:600; font-size:13.5px; white-space:nowrap;
}
.sprachhinweis__ja:hover{filter:brightness(1.08)}
.sprachhinweis__nein{
  flex:0 0 auto; background:none; border:0; cursor:pointer;
  color:var(--leise,#6b7280); font-size:13px; padding:7px 4px; white-space:nowrap;
}
.sprachhinweis__nein:hover{color:var(--dim,#9aa4b2)}
.sprachhinweis__ja:focus-visible,.sprachhinweis__nein:focus-visible{
  outline:2px solid var(--cyan,#1fe8ff); outline-offset:3px;
}
@media (max-width:520px){
  .sprachhinweis{font-size:13.5px; gap:8px}
  .sprachhinweis__text{flex:1 1 100%}
}

/* ==========================================================================
   PREISSEITE — /prezzi.html, /de/preise.html, /en/pricing.html

   Eine Textseite, keine Buehne. Sie hat genau eine Aufgabe: die Zahl zeigen,
   die jemand gesucht hat, und danach den Weg in den Baukasten. Deshalb kein
   Vorhang, kein 3D, keine Bewegung, die auf sich aufmerksam macht — hier
   liest jemand, und Lesen vertraegt keine Ablenkung.

   Der Rhythmus kommt aus zwei abwechselnden Gruenden (Basis / Surface). Das
   ersetzt Trennlinien und haelt lange Textstrecken lesbar, ohne dass ein
   einziges neues Farbtoken dazukommt.
   ========================================================================== */

.preisseite { padding-top: clamp(5rem, 9vw, 7rem); }
.preisseite .section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.preisseite .section--dunkel { background: var(--c-base-2); }

/* Ein Abstand fuer alle Abschnitte. Vorher hing er an dem, was zufaellig
   folgte: Karten mit Innenabstand sahen luftig aus, blanke Ueberschriften
   klebten am Vorspann. */
.preis-lead { color: var(--c-text-dim); font-size: var(--t-md); max-width: 62ch;
  margin-bottom: clamp(2rem, 4vw, 3rem); }
.preis-note { color: var(--c-text-faint); font-size: var(--t-sm); max-width: 68ch; margin-top: var(--s-3); line-height: 1.65; }
.preisseite h2 { font-size: var(--t-xl); margin-bottom: var(--s-2); }
.preisseite h3 { font-size: var(--t-base); }

/* ---------- Kopf: die Antwort steht ueber allem anderen ------------------ */
.preis-kopf h1 { font-size: var(--t-2xl); line-height: 1.02; letter-spacing: -.02em; margin-bottom: var(--s-2); }
.preis-kopf .preis-lead { font-size: var(--t-md); max-width: 58ch; }

.antwort {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: var(--elev-1);
  max-width: 74ch;
}
.antwort__titel {
  font-family: var(--f-display); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--c-cyan); margin-bottom: var(--s-1);
}
.antwort__text { font-size: var(--t-md); line-height: 1.55; color: var(--c-text); }
.antwort__note { font-size: var(--t-xs); color: var(--c-text-faint); margin-top: var(--s-2); }

/* ---------- Vier Faelle -------------------------------------------------- */
.faelle { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 620px) { .faelle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .faelle { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.fall {
  padding: var(--s-3); border-radius: var(--radius-lg);
  background: var(--c-surface); box-shadow: var(--elev-1);
  display: flex; flex-direction: column; gap: var(--s-1);
}
.fall h3 { color: var(--c-text-dim); font-weight: 500; font-size: var(--t-sm); }
/* Die Zahl ist der Grund, warum jemand hier ist — also traegt sie die Karte. */
.fall__preis {
  font-family: var(--f-display); font-size: var(--t-lg);
  line-height: 1.05; letter-spacing: -.015em; color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.fall__was { font-size: var(--t-sm); color: var(--c-text-faint); line-height: 1.6; }

/* ---------- Das Listenblatt ---------------------------------------------- */
.tabellenrahmen {
  border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  background: var(--c-surface); overflow-x: auto;
}
.listen { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.listen th, .listen td { text-align: left; padding: .85rem clamp(.9rem, 2vw, 1.4rem); vertical-align: top; }
.listen thead th {
  font-family: var(--f-display); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .12em; color: var(--c-text-faint);
  font-weight: 500; border-bottom: 1px solid var(--c-line);
}
.listen tbody tr + tr th, .listen tbody tr + tr td { border-top: 1px solid var(--c-line); }
.listen tbody th { font-weight: 400; }
.listen tbody th b { display: block; color: var(--c-text); font-weight: 600; }
.listen tbody th span { display: block; color: var(--c-text-faint); line-height: 1.55; margin-top: .15rem; max-width: 62ch; }
.listen .num {
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--c-text);
}
.listen .num small { display: block; color: var(--c-text-faint); font-size: var(--t-xs); }

/* ---------- Was jedes Jahr wiederkommt ----------------------------------- */
.laufend { display: grid; gap: var(--s-2); grid-template-columns: 1fr; margin: 0; }
@media (min-width: 780px) { .laufend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } }
.laufend__z { border-left: 2px solid var(--c-line-strong); padding-left: var(--s-2); }
.laufend dt { font-weight: 600; color: var(--c-text); margin-bottom: .2rem; }
.laufend dd { margin: 0; color: var(--c-text-dim); font-size: var(--t-sm); line-height: 1.65; }

/* ---------- Drei Wege ---------------------------------------------------- */
.vgle { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 900px) { .vgle { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vgl {
  padding: var(--s-3); border-radius: var(--radius-lg);
  background: var(--c-base); box-shadow: var(--elev-1);
  display: flex; flex-direction: column; gap: .6rem;
}
.vgl p:last-child { color: var(--c-text-faint); font-size: var(--t-sm); line-height: 1.65; margin: 0; }
.vgl__preis {
  font-family: var(--f-display); font-size: var(--t-md);
  color: var(--c-text); font-variant-numeric: tabular-nums;
}
/* Die eigene Zeile wird markiert, nicht angepriesen: eine Kante genuegt. */
.vgl--wir { box-shadow: var(--elev-2); }
.vgl--wir .vgl__preis { color: var(--c-cyan); }

/* ---------- Drei Gruende ------------------------------------------------- */
.gruende { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 900px) { .gruende { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grund h3 { color: var(--c-text); margin-bottom: .4rem; }
.grund p { color: var(--c-text-dim); font-size: var(--t-sm); line-height: 1.7; margin: 0; }
.grund__zaehler {
  margin-top: var(--s-2) !important; font-size: var(--t-xs) !important;
  color: var(--c-text-faint) !important;
}
.grund__zaehler b { color: var(--c-text); font-variant-numeric: tabular-nums; }

/* ---------- Fragen ------------------------------------------------------- */
.fragen { display: grid; gap: 0; max-width: 82ch; border-top: 1px solid var(--c-line); }
.frage { border-bottom: 1px solid var(--c-line); }
.frage summary {
  cursor: pointer; padding: var(--s-2) 0; list-style: none;
  font-size: var(--t-base); color: var(--c-text);
  display: flex; align-items: baseline; gap: var(--s-2);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+"; margin-left: auto; color: var(--c-text-faint);
  font-family: var(--f-display); transition: transform var(--d-ui) var(--e-std);
}
.frage[open] summary::after { content: "–"; }
.frage p { margin: 0 0 var(--s-2); color: var(--c-text-dim); font-size: var(--t-sm); line-height: 1.75; max-width: 72ch; }

/* ---------- Der Weg in den Baukasten ------------------------------------- */
.preis-cta { text-align: center; background: var(--c-surface); }
.preis-cta .preis-lead, .preis-cta .preis-note { margin-inline: auto; }
.preis-cta .preis-lead { max-width: 56ch; }
.preis-cta .preis-note { max-width: 56ch; }
/* Der eine Knopf, um den es auf dieser Seite geht. Er darf groesser sein
   als jeder andere - alles andere hier ist Text zum Lesen. */
.btn--gross { font-size: var(--t-md); padding: 1.15rem 2.6rem; margin-top: var(--s-1); }
.preis-alt { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--c-text-faint); }
.preis-alt a { color: var(--c-text-dim); text-decoration: underline; text-underline-offset: 3px; }
.preis-alt a:hover { color: var(--c-cyan); }

.preis-ort .preis-lead { max-width: 70ch; margin-bottom: var(--s-3); }

@media (prefers-reduced-motion: reduce) {
  .frage summary::after { transition: none; }
}

/* Der Verweis von der Startseite auf die Preisseite. Steht neben dem Knopf,
   nicht darunter: Es ist eine Alternative fuer den Zoegernden, kein zweiter
   Aufruf zum Handeln. */
.bedarfsweg__mehr {
  align-self: center;
  font-size: var(--t-sm); color: var(--c-text-dim);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--c-line-strong);
  transition: color var(--d-ui) var(--e-std);
}
.bedarfsweg__mehr:hover { color: var(--c-cyan); }

/* ---------- Der Weg in den Konfigurator, statt eines zweiten Formulars ----
   Er steht dort, wo bis heute das Formular stand: in der rechten Spalte des
   Kontaktbereichs. Ohne Kasten und ohne Rahmen — es ist ein Knopf und ein
   Versprechen, was danach passiert, und beides braucht keine Verpackung. */
.kontaktweg {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2);
  /* Das Formular stand hier vorher mit lauter undurchsichtigen Eingabefeldern
     und hat den Hintergrund gedeckt. Ohne es liegt die Grafik dahinter frei
     unter dem Text, und der Hinweis darunter war kaum noch zu lesen. Also
     eine eigene Flaeche — dieselbe, auf der auch sonst gelesen wird. */
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--elev-1);
}
.kontaktweg__note {
  color: var(--c-text-dim); font-size: var(--t-sm); line-height: 1.65;
  max-width: 46ch; margin: 0;
}
.kontaktweg .ablaufkopf { margin-top: var(--s-2); }
/* Ohne color-mix (aeltere Browser) lieber ganz deckend als unlesbar. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .kontaktweg { background: var(--c-surface); }
}

/* Der Weg von der einen Betreuungskarte auf der Startseite zur Seite mit
   allen drei Stufen. Bis heute stand dort keiner, weil es die Seite nicht
   gab — und pakete-live.js entfernte den Detailverweis sogar ausdruecklich. */
.betreuung__mehr { margin-top: var(--s-2); font-size: var(--t-sm); }
.betreuung__mehr a {
  color: var(--c-text-dim); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--c-line-strong); transition: color var(--d-ui) var(--e-std);
}
.betreuung__mehr a:hover { color: var(--c-cyan); }

/* Der Knopf, der den Telefonassistenten holt. Bewusst kein Primaerknopf:
   Der Weg zum Angebot bleibt der lauteste auf dieser Seite. */

/* ---------- 12b. Die Assistentin -----------------------------------------
   Gleiche Bauweise wie die Prinzipien: Zellen auf einer Linie, kein
   Kartenstapel. Drei Spalten statt vier, weil hier Saetze stehen und keine
   Zahlen — vier Spalten quetschten die Zeilen unter zehn Woerter. */
.ast {
  display: grid; gap: 1px; background: var(--c-line);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--elev-1);
}
@media (min-width: 680px)  { .ast { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .ast { grid-template-columns: repeat(3, 1fr); } }
.ast__p { background: var(--c-base-2); padding: clamp(1.4rem, 2.4vw, 2rem); display: grid; gap: .55rem; align-content: start; }
.ast__p h3 { font-size: var(--t-md); margin: 0; }
.ast__p p { margin: 0; font-size: var(--t-sm); color: var(--c-text-dim); }
.ast__cta { margin-top: clamp(1.6rem, 3vw, 2.4rem); max-width: 62ch; color: var(--c-text-dim); }
.ast__cta strong { color: var(--c-text); }