/* ============================================================
   inTECHgritas — Version 4
   Dunkel, scharfkantig, Marken-Rot als einziger Akzent.

   Prinzipien (kommen aus der Referenz und sind nicht verhandelbar,
   sonst faellt der Look auseinander):

     1. RADIUS IST 0. Nichts ist rund ausser den Icon-Kacheln.
     2. UEBERSCHRIFTEN HABEN WEIGHT 400, nicht 700. Gross und leicht —
        genau das macht den modernen, ruhigen Eindruck. Fett waere
        wieder das Geschrei von vorher.
     3. SEKTIONEN TRENNEN NUR HAARLINIEN, keine Farbwechsel.
        Der Grund bleibt durchgehend dunkel; .sec--lift hebt jede zweite
        Sektion nur minimal an, um Tiefe zu erzeugen.
     4. AKZENT IST EIN KLEINES QUADRAT, kein Punkt und keine Flaeche.
     5. ZWEI FIXE LEITLINIEN links und rechts ueber die volle Hoehe.
     6. BUTTONS SIND WEISS, NICHT ROT. Rot ist der Marke vorbehalten
        (Wortmarke, Quadrate, Haken, Links). Einzige Ausnahme: der
        Absenden-Button im Formular.

   Abschnitte:
     1  Schriften     2  Tokens       3  Basis
     4  Leitlinien    5  Typo         6  Buttons
     7  Navigation    8  Hero         9  Kanalraster
    10  Chips        11  Loesung     12  Leistungen
    13  Zusagen      14  Modelle     15  FAQ
    16  Schlussbild  17  Footer      18  Formular
    19  Rechtstexte  20  Responsive  21  Reduzierte Bewegung
    22  Fehlerseite
   ============================================================ */

/* ---------- 1  Schriften (lokal, keine Fremdhosts) ---------- */
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/hostgrotesk-latin.woff2?v=2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/geistmono-latin.woff2?v=2') format('woff2');
}

/* ---------- 2  Tokens ---------- */
:root {
  /* Die drei Ebenen muessen deutlich auseinanderliegen. Liegen sie zu
     dicht beieinander, wirkt die Seite nicht dunkel-edel, sondern flach
     und "wie ein schwarzes Loch". Tiefe, nicht Helligkeit, ist der Hebel. */
  --bg:#1A1A1A;          /* Grund */
  --bg-lift:#202020;     /* jede zweite Sektion, minimal angehoben */
  --bg-2:#282828;        /* Karte */
  --bg-3:#323232;        /* Karte, hervorgehoben */

  --accent:#C81330;      /* Marken-Rot, wie im Portraet-Hintergrund */
  --accent-deep:#A50F27;
  --accent-bright:#E63247;
  --accent-wash:rgba(200,19,48,.13);

  --fg:#FFFFFF;
  --fg-2:#BDBDBD;        /* Fliesstext, 9.4:1 auf --bg */
  --fg-3:#909090;        /* Sekundaer, 5.4:1 */

  /* Deutlich kraeftiger als in der Vorlage. Die Haarlinien, die
     Leitlinien und das Kanalraster sind ein Gestaltungsmittel — sieht
     man sie kaum, verschenkt man sie. Sie sollen als weisse Linien
     lesbar sein, nicht als Ahnung. */
  --line:rgba(255,255,255,.62);
  --line-soft:rgba(255,255,255,.42);

  --maxw:1280px;
  --pad:24px;
  --ease:cubic-bezier(.22,1,.36,1);

  --font:'Host Grotesk',"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,"Cascadia Mono","Consolas",monospace;
}

/* ---------- 3  Basis ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; border-radius:0; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font); background:var(--bg); color:var(--fg-2);
  font-size:1rem; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:#FFFFFF; padding:12px 20px; font-weight:600;
}
.skip:focus{ left:0; }

/* Sektionen trennen sich nur durch Haarlinien. .sec--lift hebt jede
   zweite Sektion minimal an — das erzeugt Tiefe, ohne die Seite
   aufzuhellen. Der Unterschied ist bewusst klein (#141414 -> #191919). */
.sec{ position:relative; padding:96px 0; border-bottom:1px solid var(--line-soft); }
.sec--lift{ background:var(--bg-lift); }
.sec--tight{ padding:64px 0; }

/* ---------- 4  Fixe Leitlinien ----------
   Zwei 1px-Linien an den Raendern des Rasters, ueber die volle
   Viewporthoehe. Das ist das auffaelligste Detail der Vorlage. */
.rails{ position:fixed; inset:0; z-index:40; pointer-events:none; }
.rails > div{
  height:100%; max-width:var(--maxw); margin:0 auto; position:relative;
}
.rails i{
  position:absolute; top:0; height:100%; width:1px; background:var(--line-soft);
}
.rails i:first-child{ left:0; }
.rails i:last-child{ right:0; }

/* ---------- 4b  Stehende Wortmarke in der Marginalspalte ----------
   Sitzt fix an der linken Leitlinie und bleibt beim Scrollen stehen.
   Sie ist die logische Fortsetzung der Leitlinien, kein zusaetzliches
   Logo — deshalb gedaempft und aria-hidden. Die klickbare Marke bleibt
   die in der Navigation.

   Erscheint erst ab 1500px: neben dem 1280er-Raster bleiben darunter
   keine 100px Rand, und die Marke wuerde in den Inhalt laufen. */
.sidemark{ display:none; }
@media (min-width:1500px){
  .sidemark{
    /* --sm-h  Hoehe der Wortmarke (= ihre Breite nach der Drehung)
       --sm-w  zugehoerige Laenge, Seitenverhaeltnis der Datei ist 1895:313
       --sm-gap  freier Abstand zwischen Marke und Leitlinie */
    --sm-h:30px;
    --sm-w:calc(var(--sm-h) * 6.054);
    --sm-gap:10px;

    display:block; position:fixed; left:50%; top:50%; z-index:41;
    /* Nach der Drehung um den eigenen Mittelpunkt liegt die rechte
       Kante bei  left + --sm-w/2 + --sm-h/2. Damit genau diese Kante
       um --sm-gap LINKS der Leitlinie landet, muessen beide Haelften
       zusaetzlich abgezogen werden. Sonst sitzt die Marke auf der Linie. */
    margin-left:calc(
      var(--maxw) / -2 - var(--sm-gap) - var(--sm-w) / 2 - var(--sm-h) / 2
    );
    transform:translateY(-50%) rotate(-90deg);
    transform-origin:center center;
    pointer-events:none; user-select:none;
  }
  .sidemark img{
    height:var(--sm-h); width:auto; opacity:.55;
    transition:opacity .4s ease;
  }
}
@media (min-width:1800px){
  .sidemark{ --sm-h:36px; --sm-gap:16px; }
}

/* ---------- 5  Typografie ---------- */
h1,h2,h3,h4{ color:var(--fg); font-weight:400; letter-spacing:-.022em; line-height:1.1; }
.t-hero{ font-size:clamp(2.5rem,6vw,4.6rem); line-height:1.02; letter-spacing:-.03em; }
.t-xl{ font-size:clamp(2rem,4.2vw,3.3rem); }
.t-lg{ font-size:clamp(1.6rem,2.8vw,2.4rem); }
.t-md{ font-size:1.2rem; font-weight:500; }

.lead{ font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.7; color:var(--fg-2); max-width:62ch; }
.small{ font-size:.94rem; color:var(--fg-3); }

.prose p{ margin-bottom:1em; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--fg); font-weight:600; }

/* Ein hervorgehobenes Wort */
.mark{ color:var(--accent); }
/* Zweite Headline-Zeile gedaempft, wie in der Vorlage */
.dim{ color:var(--fg-3); }

/* Wortweises Einblenden aus der Unschaerfe — die Signatur der Vorlage.
   Die Woerter werden per JS in Spans zerlegt. Ohne JS bleibt der Text
   normal sichtbar. */
.js [data-words] .w{ display:inline-block; filter:blur(10px); opacity:0; }
.js [data-words].is-in .w{
  filter:blur(0); opacity:1;
  transition:filter .7s var(--ease), opacity .7s var(--ease);
}
.js .rise{ opacity:0; transform:translateY(18px); }
.js .rise.is-in{
  opacity:1; transform:none;
  transition:opacity .6s var(--ease), transform .7s var(--ease);
}
.js .stagger > *:nth-child(2){ transition-delay:.06s; }
.js .stagger > *:nth-child(3){ transition-delay:.12s; }
.js .stagger > *:nth-child(4){ transition-delay:.18s; }
.js .stagger > *:nth-child(5){ transition-delay:.24s; }
.js .stagger > *:nth-child(6){ transition-delay:.30s; }

/* ---------- 6  Buttons (scharfkantig) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 30px; font-size:.95rem; font-weight:500; line-height:1.2;
  border:1px solid transparent; transition:background .2s ease, color .2s ease,
  border-color .2s ease, transform .12s ease;
}
.btn:active{ transform:scale(.98); }
.btn svg{ width:16px; height:16px; flex:none; }
/* Der Haupt-CTA ist WEISS, nicht rot. Genau wie in der Vorlage: dort ist
   Amber nur ein winziges Quadrat, die Buttons sind weiss. Dadurch gehoert
   Rot allein der Marke und konkurriert mit nichts.
   .btn--accent ist bewusst die Ausnahme und steht nur EINMAL auf der
   Seite — auf dem Absenden-Button im Formular, also genau am Punkt der
   Conversion. Bitte nicht weiter verteilen, sonst ist der Effekt weg. */
.btn--solid{ background:var(--fg); color:#141414; }
.btn--solid:hover{ background:#E2E2E2; }
.btn--accent{ background:var(--accent); color:#fff; font-weight:600; }
.btn--accent:hover{ background:var(--accent-deep); }
.btn--line{ border-color:rgba(255,255,255,.28); color:var(--fg); }
.btn--line:hover{ background:rgba(255,255,255,.07); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

.arrow{ display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-weight:500; }
.arrow svg{ width:15px; height:15px; transition:transform .22s var(--ease); }
.arrow:hover svg{ transform:translateX(4px); }

/* ---------- 7  Navigation ---------- */
.nav{ position:relative; z-index:60; padding:22px 0; }
.nav--fixed{
  position:fixed; top:0; left:0; right:0;
  background:rgba(26,26,26,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav__in{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

/* Startseite: die Marke steht gross im Hero, die Navigation hat keine.
   Links links, Button rechts. */
.nav__in--nologo{ justify-content:flex-start; gap:40px; }
.nav__in--nologo .nav__cta{ margin-left:auto; }

/* Unterseiten: die Marke sitzt MITTIG oben.
   Drei Spalten, aussen je 1fr und in der Mitte auto — nur so steht sie
   exakt in der Fenstermitte, unabhaengig davon, wie breit die Links
   links und der Button rechts sind. Die Spalten werden ausdruecklich
   zugewiesen, damit die Reihenfolge im HTML unangetastet bleibt: die
   Marke steht dort zuerst, weil sie der Heimweg fuer Tastatur und
   Screenreader ist. */
@media (min-width:861px){
  .nav--fixed .nav__in{ display:grid; grid-template-columns:1fr auto 1fr; }
  /* grid-row:1 ist Pflicht. Ohne das schiebt die automatische
     Platzierung die Links in eine zweite Zeile, sobald die Marke
     bereits Spalte 2 belegt — die Navigation waere dann doppelt hoch. */
  .nav--fixed .nav__in > nav{ grid-column:1; grid-row:1; justify-self:start; }
  .nav--fixed .wordmark{ grid-column:2; grid-row:1; justify-self:center; }
  .nav--fixed .nav__cta{ grid-column:3; grid-row:1; justify-self:end; }
}
/* Die Wortmarke ist ein BILD, kein CSS-Text. Nur so entspricht sie der
   echten Marke. Die Quelldatei ist 1895px breit und wird auf 38px Hoehe
   gezeigt — dadurch ist sie auch auf Retina-Displays gestochen scharf. */
.wordmark{ display:inline-flex; align-items:center; line-height:0; }
.wordmark img{ height:38px; width:auto; }
.footer .wordmark img{ height:44px; }
@media (max-width:860px){ .wordmark img{ height:30px; } }

/* ---------- 7b  Wortmarke mit beweglichen i-Punkten ----------
   Die "ı" in der Wortmarke sind punktlos; die beiden Punkte sind
   eigene Kreise. logo-word.png enthaelt deshalb NUR die Buchstaben,
   die Punkte liegen als .wm-dot darueber und koennen sich bewegen.

   Die Positionen sind aus dem Bild ausgemessen und in Prozent
   angegeben — dadurch sitzen sie in jeder Groesse richtig:
     Punkt A  left 1.953%   Punkt B  left 74.776%
     beide    top 10.703%   Durchmesser 2.955% der Breite

   Die Wegstrecke zwischen beiden ist 72.823% der Bildbreite. In
   translate() beziehen sich Prozente auf das Element SELBST, und der
   Punkt ist 2.955% breit — also entspricht die Strecke 2464%.
   Deshalb funktioniert die Animation in jeder Groesse ohne Umrechnung. */
.wm{ position:relative; display:inline-block; line-height:0; }

/* Zwei verschachtelte Elemente, damit sich zwei Bewegungen nicht in die
   Quere kommen: aussen der Platzwechsel, innen das ruhige Wippen.
   Beide wollen transform — auf EINEM Element wuerde das eine das andere
   ueberschreiben. */
.wm-dot{
  position:absolute; top:10.703%; width:2.955%; aspect-ratio:1;
  transform:translate(-50%,-50%);
}
.wm-dot > b{ display:block; width:100%; height:100%; background:#fff; border-radius:50%; }
/* Die Werte sind die INK-Mitten der beiden Buchstabenstaemme, direkt
   aus logo-word.png ausgemessen. Nicht die Werte aus der Original-SVG
   uebernehmen: die rechnet mit der Mitte der Vorschubbreite
   ((getStartPositionOfChar + getEndPositionOfChar) / 2), und weil die
   punktlose "ı" ungleiche Seitenraender hat, sitzen die Punkte damit
   3,5 px zu weit links. */
.wm-dot--a{ left:1.953%; }
.wm-dot--b{ left:74.776%; }

/* --- Schweben, nur im Hero ---
   AUSSCHLIESSLICH SENKRECHT. Ein i-Punkt darf nie seitlich von
   seinem Stamm wegwandern — ein frueherer Stand hatte ein
   zusaetzliches Driften auf der Querachse, dadurch standen die
   Punkte sichtbar neben den Buchstaben. Nicht wieder einbauen.

   Die beiden Punkte haben unterschiedliche Perioden (2.7s und 3.2s)
   und eine negative Verzoegerung, damit sie nicht im Gleichschritt
   gehen. Gleiche Perioden wirken getaktet statt schwebend.

   In der Navigation der Unterseiten bewegt sich NICHTS: dauerhafte
   Bewegung in einem fixen Element zieht den Blick staendig vom
   Inhalt weg. Der Hero scrollt weg, dort darf die Marke leben. */
.wm--hero .wm-dot > b{ animation:wmFloat 2.7s ease-in-out infinite; }
.wm--hero .wm-dot--b > b{ animation-duration:3.2s; animation-delay:-1.1s; }

@keyframes wmFloat{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-42%); }
}

/* --- Auftritt: die Punkte fallen ein und federn aus --- */
.js .wm--hero .wm-dot{ opacity:0; }
.wm--hero.is-intro .wm-dot{ animation:wmDrop 1.1s cubic-bezier(.3,1.4,.5,1) both; }
.wm--hero.is-intro .wm-dot--b{ animation-delay:.14s; }
.wm--hero.is-ready .wm-dot{ opacity:1; }
@keyframes wmDrop{
  0%  { opacity:0; transform:translate(-50%,-50%) translate(0,-620%); }
  60% { opacity:1; transform:translate(-50%,-50%) translate(0,0); }
  76% { transform:translate(-50%,-50%) translate(0,-64%); }
  100%{ opacity:1; transform:translate(-50%,-50%) translate(0,0); }
}

/* Grosse Wortmarke ueber der Hero-Ueberschrift */
.wm--hero{ display:block; margin:0 auto 18px; width:min(820px,88vw); }
.wm--hero img{ width:100%; height:auto; }
/* Markenzeile unter der Wortmarke. Mono, gesperrt, gedaempft — dieselbe
   Stimme wie die Metazeile am Ende des Heros. Der Abstand zur Headline
   (44px) ist derselbe, den vorher die Wortmarke allein hatte. */
.hero__tag{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--fg-3); text-align:center; margin:0 auto 44px;
}
@media (max-width:600px){
  .hero__tag{ font-size:.66rem; letter-spacing:.2em; }
  /* Im Namens-Panel auf ueber-uns ist die Flaeche schmaler (Rahmen +
     40px Innenabstand) — enger sperren, damit die Zeile nicht bricht. */
  .panel .hero__tag{ font-size:.6rem; letter-spacing:.12em; }
}
.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__links a{ font-size:.92rem; color:rgba(255,255,255,.62); transition:color .2s ease; }
.nav__links a:hover,.nav__links a[aria-current="page"]{ color:var(--fg); }
.nav__cta{ display:flex; align-items:center; gap:12px; }

/* Heimweg. Auf der Startseite gibt es kein Logo in der Navigation,
   dort fehlte sonst jede sichtbare Moeglichkeit zurueckzukommen.
   Steht auf ALLEN Seiten an derselben Stelle.

   Beim Hover kehrt sich der Knopf um — dieselbe Geste wie bei
   .btn--line, nur konsequenter. Das passt zur scharfkantigen
   Formensprache besser als ein aufgehellter Hintergrund. */
.nav__home{
  display:inline-grid; place-items:center; width:46px; height:46px; flex:none;
  border:1px solid var(--line); color:var(--fg);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.nav__home:hover{ background:var(--fg); color:#1A1A1A; border-color:var(--fg); }
.nav__home svg{ width:19px; height:19px; }
.nav__toggle{ display:none; color:var(--fg); padding:6px; line-height:0; }
.nav__toggle svg{ width:24px; height:24px; }

/* ---------- 8  Hero ---------- */
/* 100svh: auf dem iPhone ist 100vh hoeher als der sichtbare Bereich,
   weil Safari die Adressleiste mitrechnet — der Hero-Inhalt rutschte
   unter die Leiste. svh = "small viewport height", der sichtbare Teil.
   Browser ohne svh behalten die 100vh-Zeile davor. */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; overflow:hidden; }
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background-image:url('assets/hero-bg.jpg?v=2');
  background-size:cover; background-position:center;
}
.hero__veil{
  position:absolute; inset:0; z-index:1;
  /* Oben dunkler fuer die Navigation, unten dunkler fuer den Uebergang
     in die naechste Sektion, in der Mitte darf das Bild durchkommen. */
  background:linear-gradient(rgba(12,12,12,.52), rgba(12,12,12,.14) 42%, rgba(26,26,26,.92));
}
.hero > .nav,.hero__body{ position:relative; z-index:10; }
/* Die Navigation MUSS ueber dem Hero-Inhalt liegen, sonst malt die
   Ueberschrift ueber das aufgeklappte Mobilmenue ("Schrift ueber
   Schrift", iPhone, 03.09.2026). Die Zeile darueber gibt ihr mit
   (0,1,1) sonst dieselben 10 wie dem Inhalt, und .nav{z-index:60}
   verliert — Stolperstelle (b) in STATUS.txt. */
.hero > .nav{ z-index:60; }
.hero__body{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:60px var(--pad) 90px;
}
.hero h1{ max-width:20ch; margin:0 auto; }
.hero__sub{ margin:26px auto 0; max-width:56ch; color:rgba(255,255,255,.76); font-size:1.05rem; }
.hero .btn-row{ margin-top:34px; justify-content:center; }
.hero__meta{
  margin-top:40px; display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}
.hero__meta li{ display:flex; align-items:center; gap:9px; }
.hero__meta li::before{ content:""; width:6px; height:6px; background:var(--accent); flex:none; }

/* ---------- 9  Kanalraster mit Plus-Kreuzungen ---------- */
.grid8{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr);
  border-left:1px solid var(--line-soft); border-top:1px solid var(--line-soft);
}
.grid8 .cell{
  position:relative; padding:34px 22px; text-align:center;
  border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.grid8 .cell b{ display:block; color:var(--fg); font-weight:500; font-size:1rem; }
.grid8 .cell span{
  display:block; margin-top:6px; font-family:var(--mono);
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3);
}
/* Plus-Zeichen an den inneren Kreuzungen */
.grid8 .cell::after{
  content:""; position:absolute; right:-5px; bottom:-5px; width:9px; height:9px; z-index:2;
  background:
    linear-gradient(var(--line) 0 0) center/9px 1px no-repeat,
    linear-gradient(var(--line) 0 0) center/1px 9px no-repeat;
}
.grid8 .cell:nth-child(4n)::after,
.grid8 .cell:nth-last-child(-n+4)::after{ display:none; }

/* ---------- 10  Label-Chip ---------- */
.chip{
  display:inline-flex; align-items:center; gap:11px;
  border:1px solid var(--line); padding:8px 16px; width:fit-content;
  font-size:.83rem; color:var(--fg-3); letter-spacing:.01em;
}
.chip i{ width:9px; height:9px; background:var(--accent); flex:none; }

.sec__head{ display:flex; flex-direction:column; gap:20px; margin-bottom:56px; max-width:62ch; }
.sec__head--center{ align-items:center; text-align:center; margin-inline:auto; }

/* ---------- 11  Loesung: Panel + Schrittliste ---------- */
.solution{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
/* Ansprechpartner-Block (Startseite und ueber-uns): Portraet links
   in fester Breite, Text rechts. Stand frueher als style-Attribut im
   HTML — ein Inline-Style schlaegt aber jede Media-Query, das Raster
   blieb auf dem Handy zweispaltig und der Text stand bei left=400px
   neben dem Bildschirm. Die Handy-Regel unten (.solution -> 1fr)
   greift jetzt, weil sie spaeter in der Datei steht. */
.solution--person{ grid-template-columns:320px 1fr; gap:56px; }
.panel{
  position:relative; aspect-ratio:4/3; border:1px solid var(--line);
  background:var(--bg-2); overflow:hidden; display:grid; place-items:center; padding:40px;
}
.panel::before{
  content:""; position:absolute; top:-30%; right:-20%; width:70%; height:80%;
  background:radial-gradient(circle,rgba(200,19,48,.24),transparent 68%); filter:blur(40px);
}
.panel__num{
  position:relative; font-family:var(--mono); font-size:clamp(4rem,10vw,7rem);
  line-height:1; color:var(--accent); font-weight:400;
}
.panel__cap{
  position:relative; margin:18px auto 0; text-align:center; color:var(--fg-2);
  max-width:34ch; font-size:1rem;
}
.panel__bars{ position:absolute; left:24px; right:24px; bottom:20px; display:flex; gap:8px; }
.panel__bars span{ flex:1; height:3px; background:rgba(255,255,255,.12); }
.panel__bars span.on{ background:var(--accent); }

.steps{ display:flex; flex-direction:column; }
.step{
  display:flex; gap:18px; align-items:flex-start; width:100%; text-align:left;
  padding:22px; border:1px solid transparent; transition:background .3s ease, border-color .3s ease;
}
.step:hover{ background:rgba(255,255,255,.02); }
.step[aria-selected="true"]{ background:rgba(255,255,255,.04); border-color:var(--line); }
.step__ico{
  flex:none; width:38px; height:38px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); color:var(--fg-3); transition:background .3s ease, color .3s ease;
}
.step[aria-selected="true"] .step__ico{ background:var(--accent); color:#FFFFFF; }
.step__ico svg{ width:18px; height:18px; }
.step h3{ font-size:1.15rem; font-weight:500; color:var(--fg-3); transition:color .3s ease; }
.step[aria-selected="true"] h3{ color:var(--fg); }
/* Nur der aktive Schritt zeigt seine Beschreibung — wie in der Vorlage.
   max-height statt height, damit der Text ohne feste Hoehe auskommt. */
.step p{
  font-size:.95rem; color:var(--fg-3);
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .35s var(--ease), opacity .3s ease, margin-top .35s var(--ease);
}
.step[aria-selected="true"] p{ max-height:8em; opacity:1; margin-top:8px; }

/* ---------- 12  Leistungen ---------- */
.feat{ display:grid; grid-template-columns:repeat(3,1fr); gap:56px 40px; }
.feat__ico{
  width:42px; height:42px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(to bottom,var(--accent),var(--accent-deep));
  box-shadow:0 8px 22px -8px rgba(200,19,48,.45); color:#FFFFFF; margin-bottom:26px;
  transition:transform .3s var(--ease);
}
.feat__item:hover .feat__ico{ transform:scale(1.08); }
.feat__ico svg{ width:20px; height:20px; }
.feat h3{ font-size:1.18rem; font-weight:500; margin-bottom:10px; }
.feat p{ font-size:.97rem; color:var(--fg-3); }

/* ---------- 12b  Gegenueberstellung ----------
   Links das Uebliche, rechts unseres. Die linke Spalte ist bewusst
   gedaempft, gestrichelt und ohne Akzentfarbe — sie soll gelesen,
   aber nicht beworben werden. Der Blick soll rechts haengenbleiben. */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.compare__head{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3);
  margin-bottom:18px;
}
.compare__col--ours .compare__head{ color:var(--accent); }
.compare__list{ display:flex; flex-direction:column; gap:12px; }
.cmp{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  border:1px solid var(--line-soft); padding:20px 22px; background:var(--bg-2);
}
.cmp__mark{
  width:26px; height:26px; flex:none; display:grid; place-items:center;
  background:var(--accent); color:#fff; margin-top:1px;
}
.cmp__mark svg{ width:14px; height:14px; }
.cmp b{ display:block; color:var(--fg); font-size:1.02rem; font-weight:500; margin-bottom:3px; }
.cmp span{ font-size:.95rem; color:var(--fg-2); }

.cmp--no{ background:transparent; border-style:dashed; }
.cmp--no .cmp__mark{ background:transparent; border:1px solid var(--line); color:var(--fg-3); }
.cmp--no b{ color:var(--fg-3); font-weight:400; }
.cmp--no span{ color:var(--fg-3); }

@media (max-width:860px){
  .compare{ grid-template-columns:1fr; gap:34px; }
}

/* ---------- 13  Zusagen (statt erfundener Kundenstimmen) ---------- */
.pledges{ display:grid; grid-template-columns:repeat(3,1fr); }
.pledge{ padding:36px 32px; border-right:1px solid var(--line-soft); }
.pledge:last-child{ border-right:0; }
.pledge__q{ font-family:var(--mono); font-size:1.6rem; color:var(--accent); line-height:1; margin-bottom:20px; }
/* :not([class]) trifft nur den Fliesstext. Ohne das greift die Regel auch
   auf .pledge__q und .pledge__by — die Nummer bekaeme dann 120px
   Mindesthoehe und es klafft eine Luecke darunter. */
.pledge p:not([class]){ color:var(--fg); font-size:1.02rem; margin-bottom:24px; min-height:130px; }
.pledge__by{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-3); }

/* ---------- 14  Einstiegsmodelle ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.plan{
  display:flex; flex-direction:column; gap:22px; padding:30px 28px;
  background:rgba(255,255,255,.02); border:1px solid var(--line-soft);
}
.plan--hero{ background:var(--bg-3); border-color:rgba(200,19,48,.38); }
.plan__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.plan__name{ font-size:1.15rem; color:var(--fg); }
.plan__tag{ border:1px solid rgba(200,19,48,.35); background:var(--accent-wash);
  padding:4px 10px; font-size:.72rem; color:var(--accent); }
.plan__price{ font-size:2rem; color:var(--fg); letter-spacing:-.03em; line-height:1.1; }
.plan__price small{ display:block; font-size:.85rem; color:var(--fg-3); letter-spacing:0; margin-top:4px; }
.plan > p{ font-size:.94rem; color:var(--fg-3); min-height:52px; }
.plan__rule{ display:flex; align-items:center; gap:12px; }
.plan__rule::before,.plan__rule::after{ content:""; flex:1; height:1px; background:var(--line-soft); }
.plan__rule span{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-3); }
.plan ul{ display:flex; flex-direction:column; gap:11px; }
.plan li{ display:flex; gap:10px; align-items:flex-start; font-size:.94rem; color:var(--fg-3); }
.plan li svg{ width:16px; height:16px; color:var(--accent); flex:none; margin-top:.28em; }

/* ---------- 15  FAQ ---------- */
.faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.faq{ display:flex; flex-direction:column; }
.faq details{ border-top:1px solid var(--line-soft); }
.faq details:last-child{ border-bottom:1px solid var(--line-soft); }
.faq summary{
  list-style:none; cursor:pointer; padding:24px 0;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  font-size:1.1rem; color:var(--fg); font-weight:400; transition:color .2s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent); }
.faq summary::after{
  content:""; flex:none; width:10px; height:10px;
  border-right:1.5px solid var(--fg-3); border-bottom:1.5px solid var(--fg-3);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .25s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(225deg) translate(-2px,-2px); }
.faq__a{ padding:0 0 26px; color:var(--fg-3); font-size:.98rem; max-width:60ch; }
.faq__a p{ margin-bottom:.8em; }
.faq__a p:last-child{ margin-bottom:0; }

/* ---------- 16  Schlussbild ---------- */
.closer{ position:relative; overflow:hidden; border-bottom:1px solid var(--line-soft); }
.closer__bg{
  position:absolute; inset:0; background-image:url('assets/hero-bg.jpg?v=2');
  background-size:cover; background-position:center 70%;
}
.closer__veil{ position:absolute; inset:0; background:rgba(8,10,9,.55); }
.closer__in{ position:relative; z-index:2; padding:120px 0; }
.closer h2{ max-width:18ch; }
.closer p{ margin-top:22px; max-width:52ch; color:rgba(255,255,255,.78); }

/* ---------- 17  Footer ---------- */
.footer{ padding:56px 0 40px; }
.footer__cols{
  display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:36px; padding-bottom:44px;
}
.footer__tag{ margin-top:16px; color:var(--fg-3); font-size:.94rem; max-width:38ch; }
.footer__cols h4{ font-size:.88rem; font-weight:500; color:var(--fg); margin-bottom:14px; }
.footer__cols li{ margin-bottom:10px; }
.footer__cols a{ font-size:.92rem; color:var(--fg-3); transition:color .2s ease; }
.footer__cols a:hover{ color:var(--accent); }
.footer__bar{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:24px; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:var(--fg-3);
}

/* ---------- 18  Kontakt & Formular ---------- */
.contact{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start; }
.cline{ display:flex; gap:14px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line-soft); }
.cline:first-of-type{ border-top:1px solid var(--line-soft); }
.cline__ico{ flex:none; width:38px; height:38px; display:grid; place-items:center;
  background:var(--accent-wash); color:var(--accent); }
.cline__ico svg{ width:17px; height:17px; }
.cline .lbl{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-3); display:block; }
.cline .val{ color:var(--fg); font-size:1rem; word-break:break-word; }
.cline .val a:hover{ color:var(--accent); }

.form{ border:1px solid var(--line-soft); background:rgba(255,255,255,.02); padding:34px 32px; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
/* Anrede · Vorname · Nachname: die Anrede braucht nur so viel Platz wie
   das laengste Wort im Auswahlfeld. Faellt unter 600px mit der
   Regel in Abschnitt 20 auf eine Spalte — die steht spaeter in der
   Datei und gewinnt bei gleicher Spezifitaet. */
.form .row--3{ grid-template-columns:minmax(150px,auto) 1fr 1fr; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:9px; }
.field input,.field textarea,.field select{
  width:100%; padding:13px 14px; background:rgba(255,255,255,.04);
  border:1px solid var(--line); color:var(--fg); font-family:inherit; font-size:.98rem;
  transition:border-color .2s ease, background .2s ease;
}
.field input::placeholder,.field textarea::placeholder{ color:#6E7874; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--accent); background:rgba(200,19,48,.07);
}
.field textarea{ resize:vertical; min-height:130px; }
/* Aufklappliste des Auswahlfelds ("Worum geht es?"): die malt der
   Browser mit eigenem weissen Hintergrund und uebernimmt dabei unsere
   weisse Schrift — die Eintraege waren unsichtbar, bis man drueberfuhr.
   color-scheme:dark schaltet die native Liste auf dunkel, die
   option-Regel deckt Browser ab, die das ignorieren. */
.field select{ color-scheme:dark; }
.field select option{ background:var(--bg-2); color:var(--fg); }
.form__note{ font-size:.84rem; color:var(--fg-3); margin-top:14px; }
.form__note a{ color:var(--accent); text-decoration:underline; }

/* Honigtopf gegen Bots. Nicht display:none — manche Bots erkennen das
   und lassen das Feld dann aus. Aus dem Bild schieben wirkt besser. */
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* Rueckmeldung nach dem Absenden. Steht nur da, wenn es etwas zu
   sagen gibt; ohne JavaScript uebernimmt danke.html diese Aufgabe. */
.form__status{ margin-top:16px; padding:14px 16px; font-size:.94rem; line-height:1.6;
  border:1px solid var(--line); color:var(--fg); }
.form__status--ok{ border-color:var(--accent); background:var(--accent-wash); }
.form__status--fehler{ border-style:dashed; border-color:rgba(200,19,48,.45);
  background:var(--accent-wash); }
.form__status a{ color:var(--accent); text-decoration:underline; }

/* ---------- 19  Rechtstexte ---------- */
.legal{ padding:150px 0 100px; }
.legal .wrap{ max-width:780px; }
.legal h1{ font-size:clamp(2rem,4vw,2.9rem); margin-bottom:10px; }
.legal .updated{ font-family:var(--mono); font-size:.76rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:48px; }
.legal h2{ font-size:1.2rem; font-weight:500; margin:44px 0 12px; }
.legal h3{ font-size:1rem; font-weight:500; margin:26px 0 8px; }
.legal p,.legal li{ margin-bottom:.9em; }
.legal ul{ list-style:disc; padding-left:22px; margin-bottom:1em; }
.legal a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.legal .addr{ border:1px solid var(--line-soft); background:rgba(255,255,255,.02);
  padding:22px 24px; font-family:var(--mono); font-size:.92rem; line-height:1.9; color:var(--fg); }
.backlink{ display:inline-flex; align-items:center; gap:8px; color:var(--fg-3);
  font-size:.9rem; margin-bottom:36px; }
.backlink:hover{ color:var(--accent); }

.todo{ border:1px dashed rgba(200,19,48,.45); background:var(--accent-wash); padding:22px 24px; margin:26px 0; }
.todo b{ display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.todo p{ font-size:.94rem; margin-bottom:8px; }
.todo p:last-child{ margin-bottom:0; }

/* ---------- 20  Responsive ---------- */
@media (max-width:1000px){
  .feat{ grid-template-columns:repeat(2,1fr); gap:44px 32px; }
  .plans{ grid-template-columns:1fr; }
  .pledges{ grid-template-columns:1fr; }
  .pledge{ border-right:0; border-bottom:1px solid var(--line-soft); }
  .pledge:last-child{ border-bottom:0; }
  .pledge p:not([class]){ min-height:0; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .rails{ display:none; }
  .nav__toggle{ display:block; }
  .nav__links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line-soft); padding:8px var(--pad) 18px; display:none;
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a{ padding:13px 0; font-size:1rem; }
  .nav{ position:relative; }
  .nav__cta .btn{ display:none; }

  .sec{ padding:70px 0; }
  .sec__head{ margin-bottom:38px; }
  .grid8{ grid-template-columns:repeat(2,1fr); }
  .grid8 .cell::after{ display:none; }
  .solution{ grid-template-columns:1fr; gap:32px; }
  .faq-grid{ grid-template-columns:1fr; gap:32px; }
  .contact{ grid-template-columns:1fr; gap:34px; }
  .closer__in{ padding:84px 0; }
  .legal{ padding:120px 0 80px; }
}
@media (max-width:600px){
  .feat{ grid-template-columns:1fr; }
  .form .row{ grid-template-columns:1fr; }
  .footer__cols{ grid-template-columns:1fr; }
  .btn{ width:100%; }
  .btn-row{ flex-direction:column; align-items:stretch; }
  .form{ padding:24px 20px; }
  .hero__body{ padding:40px var(--pad) 70px; }
}

/* ---------- 21  Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001s !important; animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
  .js [data-words] .w{ filter:none; opacity:1; }
  .js .rise{ opacity:1; transform:none; }
  .wm-dot,.wm-dot > b{ animation:none !important; opacity:1 !important; }
}

/* ---------- 22  Fehlerseite ----------
   Die 404-Seite nutzt das Leistungsraster (.feat) als Wegweiser.
   In der Basis gilt a{ color:inherit; text-decoration:none } — eine
   verlinkte Ueberschrift waere darin von normalem Text nicht zu
   unterscheiden, und genau davon lebt diese Seite. Deshalb bekommen
   NUR hier die Karten-Ueberschriften eine Haarlinie, die beim Hover
   auf den Akzent umspringt. Gerade Linie, kein Radius.
   Zur Spezifitaet (Stolperstelle b): .wegweiser h3 a ist (0,1,2) und
   schlaegt das nackte a (0,0,1) sicher. */
.wegweiser h3 a{
  border-bottom:1px solid var(--line-soft);
  padding-bottom:3px;
  transition:color .2s ease, border-color .2s ease;
}
.wegweiser h3 a:hover,
.wegweiser h3 a:focus-visible{
  color:var(--accent); border-bottom-color:var(--accent);
}
.wegweiser p a{ color:var(--accent); }

/* ---------- 15  Schwebende Tuer zum Formular ----------
   Die Startseite ist lang (rund 2.900 Woerter). Das ist bei dieser
   Entscheidung in Ordnung — was fehlte, war der Weg zum Formular:
   die Navigation sitzt im Hero und scrollt weg, und unten in dieser
   Datei (@media max-width:860px) wird der Kontakt-Knopf am Handy sogar
   ausgeblendet. Wer in der Mitte ueberzeugt war, hatte keine Tuer.

   Der Knopf haengt unten rechts, erscheint erst nach dem Hero und geht
   wieder weg, sobald das Formular im Bild ist — er soll es nicht
   verdecken. Geschaltet wird ueber das hidden-Attribut in site.js;
   ohne JavaScript bleibt er unsichtbar. */
.jump{
  position:fixed; z-index:70;
  right:var(--pad); bottom:calc(var(--pad) + 4px);
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 20px; border-radius:999px;
  background:var(--accent); color:#fff;
  font-size:.94rem; font-weight:600; line-height:1;
  text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,.42);
  /* Startzustand des Einblendens. site.js nimmt hidden weg und setzt
     im naechsten Bild is-on — sonst gaebe es keinen Uebergang, weil
     das Element aus display:none kommt. */
  opacity:0; transform:translateY(14px);
  transition:opacity .3s var(--ease), transform .3s var(--ease),
             background .2s var(--ease);
}
/* MUSS SEIN, nicht ueberfluessig: Das display:none, das der Browser an
   [hidden] haengt, steht im UA-Stylesheet und verliert deshalb gegen
   jede Autorenregel — unser display:inline-flex oben wuerde den Knopf
   trotz hidden anzeigen. Also hier ausdruecklich. */
.jump[hidden]{ display:none; }
.jump.is-on{ opacity:1; transform:none; }
.jump:hover{ background:var(--accent-deep); }
.jump:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.jump svg{ width:17px; height:17px; flex:none; }

/* Am Handy nur das Symbol — der Daumen erreicht die untere rechte Ecke,
   und ein breiter Balken wuerde ueber dem Inhalt kleben. */
@media (max-width:560px){
  .jump{ padding:14px; gap:0; }
  .jump span{ display:none; }
  .jump svg{ width:20px; height:20px; }
}

/* Wer Bewegung reduziert haben will, bekommt ihn ohne Einblenden. */
@media (prefers-reduced-motion: reduce){
  .jump{ transition:none; transform:none; }
}