/* =========================================================================
   Lukomatic Vending KG — Onepager
   Leitgedanke: "Sie geben den Platz. Wir kümmern uns um den Rest."
   Die Seite ist die beleuchtete Front eines laufenden Automaten: dunkler
   Petrol-Raum, warmes Amber-Licht hinter Glas, Mono-Wahlcodes (A1 … E5).
   Ein Akzent (Amber #C2751B) = das Licht, das an ist / der aktive Zustand.
   Fonts: System-Stack (kein CDN). Bilder: echte Standortfotos, LOKAL und OHNE
   Filter -- die Farbe gehoert hinter das Glas des Automaten, nicht auf das Foto
   (Cengiz 05.08.2026, konzept-natuerliche-fotos.md). Die Seite bleibt monochrom,
   die vier Fotos sind die einzigen bunten Flaechen im Dokument.
   ========================================================================= */

/* ---- tokens ------------------------------------------------------------- */
:root{
  --bone:#FAFAF8;            /* warmes Off-White, Grundfläche hell */
  --bone-2:#F1F0EB;          /* zweite helle Fläche (Rhythmuswechsel)   */
  --ink:#161A1B;             /* Off-Black, Text auf hell                */
  --ink-soft:#5A6A6C;        /* gedämpfter Fließtext / Meta            */
  --stone:#7C8A8B;           /* noch leiser                            */
  --line:rgba(15,32,39,.12); /* Haarlinie auf hell                     */

  --petrol:#0F2027;          /* dunkler Anker (Hero/Finale/Nav)        */
  --petrol-900:#0A171B;      /* tiefste Fläche                         */
  --petrol-700:#16323A;      /* Panel im Dunkeln                       */
  /* .86 statt .72: ueber den hellen Sektionen blieben die Nav-Labels sonst bei
     rund 3:1 haengen (AA verfehlt). Der Glaseffekt bleibt, die Schrift traegt. */
  --petrol-glass:rgba(15,32,39,.86);
  --on-dark:#DBE4E2;         /* Text auf dunkel                        */
  --on-dark-soft:#9FB0AE;    /* gedämpft auf dunkel                    */
  --line-dark:rgba(219,228,226,.14);

  --amber:#C2751B;           /* DER eine Akzent                        */
  --amber-cta:#A9631A;       /* abgedunkelt für weißen Text (AA)       */
  --amber-glow:rgba(194,117,27,.42);

  --display:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  /* fluid type */
  --t-meta:clamp(.68rem,.64rem + .18vw,.76rem);
  --t-body:clamp(1rem,.97rem + .18vw,1.09rem);
  --t-lead:clamp(1.08rem,1rem + .5vw,1.3rem);
  --t-h3:clamp(1.2rem,1.08rem + .55vw,1.5rem);
  --t-h2:clamp(1.95rem,1.4rem + 2.5vw,3.3rem);
  --t-h1:clamp(1.75rem,1.3rem + 2vw,3.6rem);
  --t-monument:clamp(4.5rem,2rem + 13vw,12rem);

  --pad:clamp(1.25rem,5vw,3rem);      /* inline gutter */
  --sec:clamp(4.5rem,3.2rem + 7vw,9rem); /* section block padding */
  --maxw:1200px;
  --maxw-wide:1380px;        /* nur die Automatenreihe (B2)             */

  --r:1.4rem;
  --r-lg:2rem;
  --r-sm:.85rem;
  --shadow-soft:0 34px 70px -34px rgba(10,23,27,.55);
  --shadow-card:0 20px 44px -26px rgba(10,23,27,.4);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---- reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4,p,dl,dd,figure,blockquote{margin:0}
ol,ul{margin:0;padding:0;list-style:none}

body{
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.62;
  color:var(--ink);
  background:var(--bone);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
/* Nur fuer die Automatenreihe: sie tritt aus der Textspalte heraus. Kein
   Full-Bleed -- das Gehaeuse hat Radius und Rahmen und braucht Luft am Rand. */
.wrap-wide{max-width:var(--maxw-wide)}

/* ---- typography helpers ------------------------------------------------- */
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.02;letter-spacing:-.028em}
h1{font-size:var(--t-h1);letter-spacing:-.038em}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:-.02em}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--ink-soft)}

.kicker{
  font-family:var(--mono);font-size:var(--t-meta);font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--amber);
  display:inline-flex;align-items:center;gap:.6em;
}
.kicker::before{content:"";width:1.6em;height:1px;background:currentColor;opacity:.7}
.amber{color:var(--amber)}

.skip{position:absolute;left:-999px;top:0;background:var(--petrol);color:var(--on-dark);
  padding:.7rem 1rem;border-radius:.6rem;z-index:200}
.skip:focus{left:1rem;top:1rem}

/* ---- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--sans);font-weight:600;font-size:1rem;
  padding:.72rem .78rem .72rem 1.3rem;border-radius:999px;border:0;
  cursor:pointer;text-decoration:none;position:relative;
  transition:transform .5s var(--ease),background-color .5s var(--ease),box-shadow .5s var(--ease);
}
.btn .ic{
  width:2rem;height:2rem;border-radius:999px;display:grid;place-items:center;
  transition:transform .5s var(--ease);flex:none;
}
.btn svg{width:1rem;height:1rem}
.btn-primary{background:var(--amber-cta);color:#fff;box-shadow:0 12px 30px -12px rgba(169,99,26,.75)}
.btn-primary .ic{background:rgba(255,255,255,.16)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-primary:hover .ic{transform:translate(3px,-2px)}
.btn-primary:active{transform:scale(.985)}
.btn-ghost{background:transparent;color:inherit;padding-left:1.1rem}
.btn-ghost .ic{background:rgba(219,228,226,.10);border:1px solid var(--line-dark)}
.btn-ghost:hover .ic{transform:translate(3px,-2px)}

/* ---- nav (floating petrol pill) ---------------------------------------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;display:flex;justify-content:center;
  padding:clamp(.8rem,2vw,1.4rem) var(--pad);pointer-events:none;
}
.nav-inner{
  pointer-events:auto;width:min(var(--maxw),100%);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--petrol-glass);backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--line-dark);border-radius:999px;
  padding:.5rem .55rem .5rem 1.15rem;color:var(--on-dark);
  box-shadow:0 18px 40px -24px rgba(10,23,27,.7);
}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);
  font-weight:600;letter-spacing:-.02em;font-size:1.02rem;text-decoration:none;color:var(--on-dark)}
.brand img{width:1.6rem;height:1.6rem;border-radius:.4rem}
.brand b{font-weight:600}
.brand span{color:var(--on-dark-soft);font-weight:500}
.nav-links{display:flex;align-items:center;gap:.3rem}
.nav-links a{
  text-decoration:none;color:var(--on-dark-soft);font-size:.92rem;font-weight:500;
  padding:.5rem .85rem;border-radius:999px;position:relative;
  transition:color .35s var(--ease),background-color .35s var(--ease);
}
.nav-links a:hover{color:var(--on-dark);background:rgba(219,228,226,.07)}
.nav-cta{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  background:var(--amber-cta);color:#fff;font-weight:600;font-size:.92rem;
  padding:.6rem 1.1rem;border-radius:999px;
  transition:transform .5s var(--ease);
}
.nav-cta:hover{transform:translateY(-1px)}
.nav-toggle{display:none}

/* ---- generic section ---------------------------------------------------- */
section{position:relative}
.sec-head{max-width:46rem;margin-bottom:clamp(2.2rem,4vw,3.6rem)}
.sec-head .kicker{margin-bottom:1.1rem}
.sec-head p{margin-top:1.1rem;color:var(--ink-soft);font-size:var(--t-lead);line-height:1.5}

/* =========================================================================
   HERO — dark petrol, editorial split, die lit machine als Blickfang
   ========================================================================= */
.hero{
  background:
    radial-gradient(90% 60% at 82% 22%, rgba(194,117,27,.16), transparent 58%),
    radial-gradient(120% 90% at 15% 0%, #14303a 0%, var(--petrol) 42%, var(--petrol-900) 100%);
  color:var(--on-dark);padding-top:clamp(8rem,14vh,11rem);padding-bottom:var(--sec);
  overflow:hidden;
}
/* Bildspalte von .84fr auf .90fr: das Hochformat zeigt den ganzen Automaten und
   braucht dafuer Breite. Die Textspalte bleibt breit genug, dass die Headline
   in zwei Zeilen steht (gemessen bei 1024/1280/1440/1920). */
.hero-grid{display:grid;grid-template-columns:1fr .90fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1{color:#fff;margin:1.4rem 0 0}
.hero h1 .amber{color:var(--amber)}
.hero-sub{margin-top:1.5rem;max-width:34rem;color:var(--on-dark-soft);font-size:var(--t-lead);line-height:1.5}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem;align-items:center}

/* Blickfang: das echte Standortfoto im Sichtfenster (Doppelrand: aeussere
   Petrol-Schale mit Haarlinie, innerer Bildkern mit kleinerem Radius) */
.machine-stage{position:relative;display:flex;justify-content:center;align-items:center}
.machine-stage::before{ /* Amber-Lichtkante (der eine Akzent) */
  content:"";position:absolute;inset:-9% -8%;pointer-events:none;
  background:radial-gradient(58% 52% at 64% 26%, var(--amber-glow), transparent 64%);
  filter:blur(6px);
}
.viewport{
  position:relative;width:100%;max-width:34rem;padding:.5rem;
  border-radius:calc(var(--r-lg) + .5rem);
  background:linear-gradient(180deg,rgba(219,228,226,.10),rgba(219,228,226,.028));
  border:1px solid var(--line-dark);
  box-shadow:var(--shadow-soft),inset 0 1px 0 rgba(255,255,255,.09);
}
.vp-glass{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--petrol-900)}
/* Nur noch die Kante des Sichtfensters: eine Haarlinie NACH INNEN. Der weisse
   Verlauf, der hier als "Glasreflex" ueber dem oberen Bilddrittel lag, ist
   entfallen (Cengiz 05.08.: die Bilder sollen nicht behandelt aussehen). Das
   Glas des Automaten spiegelt selbst -- ein zweites Glas darueber war
   Behauptung. Ein Rahmen ist kein Filter: er beruehrt genau 1 px. */
.vp-glass::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.machine-img{position:relative;display:block;width:100%;height:auto}
/* Die Bildunterschrift ist der Beleg -- sie sitzt als Museumsschild auf dem
   Rahmen UNTER dem Bild, nicht mehr als Verlauf darauf. Grund: der Verlauf lag
   ueber dem Sockel des Automaten, und genau der Sockel zeigt, dass das Geraet
   auf einem Boden steht (Kundenwunsch: ganzer Automat, nichts verdeckt).
   Seit 05.08. traegt dasselbe Schild auch den Betriebszustand: die Status-Pille
   lag vorher auf dem Bild. Zwei Angaben, eine Zeile, beide auf dem Rahmen. */
.vp-cap{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.5rem 1rem;
  padding:.9rem .4rem .2rem;
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-dark);
}
.vp-cap .cap-txt{display:flex;align-items:center;gap:.7rem;min-width:0}
.vp-cap .cap-txt::before{content:"";width:1.5em;height:1px;background:var(--amber);flex:none;opacity:.9}
/* Kein Glas-Overlay mehr, kein backdrop-filter: die Pille liegt auf dem Rahmen,
   nicht ueber dem Foto. Damit sie dort nicht als zweite Karte auftritt, ist sie
   auf eine Zeile mit Punkt reduziert. */
.status{
  display:inline-flex;align-items:center;gap:.55rem;flex:none;
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.12em;color:var(--on-dark-soft);
}
.status .dot{width:.55rem;height:.55rem;border-radius:999px;background:var(--amber);
  box-shadow:0 0 0 0 var(--amber-glow);animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(194,117,27,.5)}70%{box-shadow:0 0 0 .7rem rgba(194,117,27,0)}100%{box-shadow:0 0 0 0 rgba(194,117,27,0)}}

/* Fakten-Sockel unter dem Text der Hero-Spalte. Zweispaltig, weil die Spalte
   rund 540 px breit ist -- vier Zahlen nebeneinander waeren dort 135 px schmal
   und "seit 10/2025" wuerde umbrechen (gemessen bei 1024 bis 1920). */
.stats{
  margin-top:clamp(2.2rem,3.5vw,3rem);border-top:1px solid var(--line-dark);
  display:grid;grid-template-columns:repeat(2,1fr);column-gap:1.4rem;
}
.stat{padding:1.5rem 1.4rem 0 0}
/* Kleinere Kurve als vorher (war 1.5–2.3rem bei 2vw): im zweispaltigen Sockel
   ist die Zelle rund 219 css px breit (1024) bzw. 260 px (1440), und
   "seit 10/2025" brach dort in zwei Zeilen um. Mit dieser Kurve passt der
   laengste Wert bei 320, 390, 768, 1024, 1280, 1440 und 1920 einzeilig. */
.stat b{font-family:var(--display);font-weight:600;font-size:clamp(1.45rem,.9rem + 1.4vw,2.1rem);
  color:#fff;letter-spacing:-.02em;display:block;line-height:1}
.stat b .amber{color:var(--amber)}
/* Direktes Kind: sonst greift die Label-Regel auch auf das <span class="amber">
   IM <b> zu und die wichtigste Zahl der Seite ("0 €") rendert in Label-Groesse. */
.stat > span{display:block;margin-top:.55rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.08em;color:var(--on-dark-soft);text-transform:uppercase;line-height:1.5}

/* =========================================================================
   LEISTUNGEN — die "Automaten-Front": drei beleuchtete Schächte im Gehäuse
   ========================================================================= */
.leistungen{background:var(--bone);padding-block:var(--sec)}
.machine-front{
  background:linear-gradient(180deg,#12272e,var(--petrol-900));
  border:1px solid rgba(219,228,226,.08);border-radius:var(--r-lg);
  padding:clamp(.7rem,1.4vw,1.1rem);box-shadow:var(--shadow-soft);position:relative;
}
.mf-rail{display:flex;align-items:center;justify-content:space-between;
  padding:.6rem 1rem 1rem;color:var(--on-dark-soft)}
.mf-rail .mf-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase}
.mf-rail .mf-dots{display:flex;gap:.4rem}
.mf-rail .mf-dots i{width:.5rem;height:.5rem;border-radius:999px;background:rgba(219,228,226,.18)}
.mf-rail .mf-dots i:first-child{background:var(--amber);box-shadow:0 0 7px var(--amber-glow)}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,1.4vw,1.1rem)}
/* Schacht mit Sockel: oben das freie Bild, darunter der Textsockel. Vorher lag
   der Text IM Bild und brauchte dafuer einen dichten Verlauf ueber der unteren
   Bildhaelfte -- der hat den halben Automaten verschluckt. Jetzt liegt nichts
   mehr auf dem Geraet. Alle drei Fotos sind 3:4, die Kacheln stehen deshalb
   ohne Zutun exakt gleich hoch. */
.slot{
  position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--petrol-700);border:1px solid rgba(219,228,226,.07);
  display:grid;grid-template-rows:auto 1fr;
}
.slot-glass{position:relative;overflow:hidden}
.slot-glass img{display:block;width:100%;height:auto}
/* Wie im Hero: nur die Kante des Schachts, nichts auf dem Bild. Der weisse
   Verlauf ("Glasreflex") ist am 05.08. entfallen -- er lag ueber der oberen
   Warenreihe und war genau die Behandlung, die auffiel. */
.slot-glass::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
/* Der Wahlcode bleibt Wahlcode, sitzt aber im Sockel statt auf dem Geraet. Er
   uebernimmt dort den Platz der alten Amber-Marke (.u) und wird zur Ziffer der
   Zeile: [A] ECHTES GERAET · KOMBIGERAET. Nur noch der Buchstabe, weil die
   Ueberschrift zwei Zeilen darunter denselben Namen ohnehin traegt. */
.slot-code{
  display:inline-grid;place-items:center;flex:none;
  min-width:1.35rem;height:1.35rem;padding:0 .35rem;
  font-family:var(--mono);font-size:.72rem;line-height:1;letter-spacing:0;
  color:var(--petrol-900);background:var(--amber);border-radius:.4rem;font-weight:600;
}
.slot-body{padding:1.15rem 1.25rem 1.35rem;border-top:1px solid rgba(219,228,226,.09)}
.slot-body h3{color:#fff}
.slot-body p{margin-top:.5rem;color:var(--on-dark-soft);font-size:.95rem;line-height:1.5}
/* Bildzeile je Kachel, im Stil der Wahlcodes: sagt, was fuer dieses Foto BELEGT
   ist. "Im Einsatz" nur dort, wo das Geraet schon bei einem Kunden steht, sonst
   "Echtes Gerät" -- ohne Ortsangabe, weil dafuer kein Beleg vorliegt. Vor der
   Zeile steht seit 05.08. der Wahlcode (vorher die Amber-Marke .u, davor lag er
   auf dem Bild).
   Muss auch in der schmalsten Dreispalter-Kachel (1024 px Viewport, ~219 px
   Textbreite) einzeilig bleiben -- geprueft mit _build/check-meta.mjs +
   check-meta.py.
   Selektor bewusst zweistufig: '.slot-body p' weiter oben ist spezifischer als
   eine einzelne Klasse und hat sonst Groesse und Farbe dieser Zeile gewonnen
   (die Zeile rendert dann 15,2 px statt 10 px und bricht um). */
.slot-body .slot-meta{
  display:flex;align-items:center;gap:.55rem;margin:0 0 .8rem;
  font-family:var(--mono);font-size:.63rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-dark);line-height:1;
}
/* Bildnachweis zum ganzen Gehaeuse: der Beleg in einem Satz */
.front-note{
  display:flex;gap:.9rem;align-items:baseline;
  margin-top:1.5rem;max-width:52rem;
  font-family:var(--mono);font-size:.74rem;line-height:1.85;letter-spacing:.02em;
  color:var(--ink-soft);
}
.front-note::before{content:"";width:1.6rem;height:1px;background:var(--amber);flex:none;transform:translateY(-.35rem)}

/* =========================================================================
   SO LÄUFT ES — der "Ausgabeweg": vertikaler Amber-Faden, große Mono-Ziffern
   ========================================================================= */
.ablauf{background:var(--bone-2);padding-block:var(--sec)}
.ablauf-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:start}
.aufwand{position:sticky;top:6.5rem;background:linear-gradient(180deg,#12272e,var(--petrol-900));
  color:var(--on-dark);border:1px solid rgba(219,228,226,.08);border-radius:var(--r);
  padding:clamp(1.5rem,2.4vw,2rem);box-shadow:var(--shadow-card)}
.au-k{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-soft);display:block}
.au-split{margin-top:1.4rem;display:flex;flex-direction:column;gap:1rem}
.au-row{display:grid;grid-template-columns:3.4rem 1fr;gap:1rem;align-items:baseline}
.au-row p{color:var(--on-dark);font-size:.98rem;line-height:1.5}
.au-row p b{color:#fff;font-weight:600}
.au-who{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber);border:1px solid rgba(194,117,27,.5);border-radius:.4rem;
  padding:.26rem 0;text-align:center;align-self:start}
.au-who.wir{color:var(--on-dark-soft);border-color:var(--line-dark)}
.au-facts{margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--line-dark);
  display:flex;flex-direction:column;gap:.9rem}
.au-fact{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.au-fact dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-soft)}
.au-fact dd{color:var(--on-dark);font-weight:500;text-align:right}
.au-fact dd .amber{font-family:var(--display);font-weight:600;font-size:1.4rem;letter-spacing:-.02em}
.path{position:relative;max-width:none}
.path::before{ /* der Faden */
  content:"";position:absolute;left:calc(1.4rem - 1px);top:1.4rem;bottom:2.4rem;width:2px;
  background:linear-gradient(180deg,var(--amber),rgba(194,117,27,.25));
}
.step{position:relative;display:grid;grid-template-columns:2.8rem 1fr;gap:clamp(1rem,3vw,2rem);
  padding-block:clamp(1.4rem,2.5vw,2.1rem)}
.step:first-child{padding-top:0}
.step-num{
  position:relative;z-index:1;width:2.8rem;height:2.8rem;border-radius:999px;
  display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:.95rem;
  color:var(--amber);background:var(--bone-2);border:1.5px solid var(--amber);
}
.step-content h3{color:var(--ink)}
.step-content p{margin-top:.5rem;color:var(--ink-soft);max-width:34rem}
.step-content .tag{display:inline-block;margin-top:.7rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber);
  border:1px solid var(--line);border-radius:999px;padding:.24rem .7rem}

/* =========================================================================
   ÜBER — ehrlich klein: große Aussage + Mono-Datenblatt (dunkler Inset)
   ========================================================================= */
.ueber{background:var(--bone);padding-block:var(--sec)}
.ueber-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.ueber-statement{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(1.7rem,1.15rem + 2.2vw,2.9rem);color:var(--ink)}
.ueber-statement .amber{color:var(--amber)}
.ueber-body{margin-top:1.5rem;color:var(--ink-soft);max-width:36rem}
.ueber-points{margin-top:2.2rem;border-top:1px solid var(--line);max-width:36rem}
.ueber-points li{display:grid;grid-template-columns:8.5rem 1fr;gap:1.3rem;align-items:baseline;
  padding:1.05rem 0;border-bottom:1px solid var(--line)}
.up-k{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--amber)}
.ueber-points p{color:var(--ink-soft);font-size:.96rem;line-height:1.5}
.ledger{
  background:linear-gradient(180deg,#12272e,var(--petrol-900));color:var(--on-dark);
  border-radius:var(--r);padding:1.6rem 1.7rem;box-shadow:var(--shadow-card);
  border:1px solid rgba(219,228,226,.08);
}
.ledger .lh{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-soft);padding-bottom:1rem;margin-bottom:.4rem;border-bottom:1px solid var(--line-dark)}
.krow{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line-dark)}
.krow:last-child{border-bottom:0;padding-bottom:0}
.krow dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--amber);text-transform:uppercase;padding-top:.15rem}
.krow dd{text-align:right;color:var(--on-dark);font-size:.98rem;font-weight:500}

/* =========================================================================
   FINALE / KONTAKT — dunkel, Monument "0 €", zwei gleichwertige Kontaktwege
   ========================================================================= */
.finale{
  background:
    radial-gradient(80% 60% at 78% 12%, rgba(194,117,27,.14), transparent 60%),
    linear-gradient(180deg,var(--petrol) 0%,var(--petrol-900) 100%);
  color:var(--on-dark);padding-block:clamp(4.5rem,3rem + 7vw,8rem);overflow:hidden;
}
.finale .kicker{color:var(--amber)}
.monument{font-family:var(--display);font-weight:600;font-size:var(--t-monument);line-height:.86;
  letter-spacing:-.05em;color:var(--amber);margin:.4rem 0 .2rem;position:relative}
.monument small{display:block;font-family:var(--mono);font-size:clamp(.7rem,.6rem + .4vw,.85rem);
  letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-soft);font-weight:500;margin-top:1.2rem}
.finale h2{color:#fff;max-width:20rem;margin-top:2rem}
.finale-lead{margin-top:1.2rem;max-width:34rem;color:var(--on-dark-soft);font-size:var(--t-lead);line-height:1.5}
.finale-grid{display:grid;grid-template-columns:1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.contact-cards{display:grid;gap:1rem;margin-top:.4rem}
.ccard{
  display:flex;align-items:center;gap:1.1rem;text-decoration:none;color:var(--on-dark);
  background:rgba(219,228,226,.05);border:1px solid var(--line-dark);border-radius:var(--r);
  padding:1.15rem 1.3rem;transition:transform .5s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease);
}
.ccard:hover{transform:translateY(-2px);background:rgba(219,228,226,.09);border-color:rgba(194,117,27,.5)}
.ccard .ci{width:2.9rem;height:2.9rem;border-radius:.9rem;display:grid;place-items:center;flex:none;
  background:var(--amber-cta);color:#fff}
.ccard .ci svg{width:1.35rem;height:1.35rem}
.cc-txt{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.ccard .cl{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-soft)}
.ccard .cv{font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,.9rem + .6vw,1.2rem);letter-spacing:-.01em;color:#fff;overflow-wrap:anywhere}
.finale-note{margin-top:1.3rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--on-dark-soft)}

/* =========================================================================
   FOOTER — Impressum (Lücken als {{PLATZHALTER}}) + Datenschutz
   ========================================================================= */
.footer{background:var(--petrol-900);color:var(--on-dark-soft);padding-block:clamp(3rem,5vw,4.5rem);
  border-top:1px solid var(--line-dark)}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(1.6rem,4vw,3rem);
  padding-bottom:2.4rem;border-bottom:1px solid var(--line-dark)}
.footer .brand{color:var(--on-dark);margin-bottom:1rem}
.footer-blurb{font-size:.92rem;line-height:1.6;max-width:22rem}
.footer h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);margin-bottom:1rem;font-weight:500}
.footer dl{font-size:.88rem;line-height:1.5}
.footer .frow{display:flex;gap:.6rem;padding:.28rem 0}
.footer .frow dt{color:var(--stone);min-width:8.5rem;flex:none;font-size:.82rem}
.footer .frow dd{color:var(--on-dark)}
.footer a{color:var(--on-dark);text-decoration:none;border-bottom:1px solid var(--line-dark)}
.footer a:hover{border-color:var(--amber)}
.ph{color:var(--on-dark-soft);background:rgba(194,117,27,.12);border:1px dashed rgba(194,117,27,.4);
  border-radius:.35rem;padding:0 .35rem;font-family:var(--mono);font-size:.82em}
.footer-note{font-size:.86rem;line-height:1.6;max-width:32rem}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  padding-top:1.8rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--stone)}

/* =========================================================================
   MOTION — dezenter Scroll-Reveal, rein additiv (script.js, WAAPI).
   BEWUSST kein CSS-opacity:0 als Ruhezustand: das Gate rendert bei 'load'
   ohne Scroll — ein vor-verborgenes Element waere im Screenshot leer. Der
   Ruhezustand ist daher immer sichtbar; JS legt die Bewegung nur darueber.
   ========================================================================= */

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
/* Tablet und schmaler Desktop: drei Vollformate nebeneinander waeren
   Briefmarken, drei gestapelte waeren 2700 px Sektion. Also eine Kachel pro
   Zeile, Bild links, Sockel rechts -- das Bild wird dabei GROESSER als in der
   Dreierreihe, nicht kleiner. */
@media (max-width:1023px){
  .slots{grid-template-columns:1fr}
  .slot{grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);grid-template-rows:auto;align-items:center}
  .slot-body{border-top:0;border-left:1px solid rgba(219,228,226,.09)}
}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  /* Das Bild steht jetzt UNTER dem Text (kein order:-1 mehr). Ein 530 px hohes
     Hochformat ueber der Headline schoebe den CTA unter den Fold; darunter
     belohnt es den Text, statt ihn zu verstecken. Und: kein aspect-ratio +
     object-fit:cover mehr -- das war ein Zuschnitt zur Laufzeit und genau das,
     was der Kunde nicht will. Das Foto laeuft im eigenen Format. */
  .hero{padding-top:clamp(7rem,12vh,9rem)}
  .machine-stage{margin-top:.5rem}
  .viewport{max-width:26rem;margin-inline:auto}
  .ueber-grid,.finale-grid{grid-template-columns:1fr;gap:2rem}
  .ablauf-grid{grid-template-columns:1fr;gap:2rem}
  .aufwand{position:static}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;align-items:stretch;gap:.2rem;
    position:absolute;top:calc(100% + .6rem);left:0;right:0;
    background:var(--petrol);border:1px solid var(--line-dark);border-radius:1.4rem;
    padding:.7rem;box-shadow:var(--shadow-soft);
  }
  .nav-links.open a{padding:.85rem 1rem;font-size:1rem}
  .nav-inner{position:relative}
  .nav-cta{display:none}
  .nav-toggle{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;
    background:rgba(219,228,226,.08);border:1px solid var(--line-dark);border-radius:999px;cursor:pointer}
  .nav-toggle span{position:relative;width:1.1rem;height:2px;background:var(--on-dark);border-radius:2px;
    transition:transform .4s var(--ease),background-color .2s}
  .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:1.1rem;height:2px;
    background:var(--on-dark);border-radius:2px;transition:transform .4s var(--ease)}
  .nav-toggle span::before{top:-.36rem}.nav-toggle span::after{top:.36rem}
  .nav-toggle[aria-expanded="true"] span{background:transparent}
  .nav-toggle[aria-expanded="true"] span::before{transform:translateY(.36rem) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span::after{transform:translateY(-.36rem) rotate(-45deg)}

  .ueber-points li{grid-template-columns:1fr;gap:.3rem}
  .stat{padding-right:1rem}
  .footer-top{grid-template-columns:1fr}
  .footer .frow{flex-wrap:wrap}
}
/* Telefon: Bild volle Breite ueber dem Sockel. Unter ~640 px waere das
   nebeneinander gestellte Bild schmaler als 300 px -- dann gewinnt die Hoehe. */
@media (max-width:639px){
  .slot{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .slot-body{border-left:0;border-top:1px solid rgba(219,228,226,.09)}
}
/* Erst ab 360 px einspaltig, nicht schon ab 420: bei 390 passen die vier Zahlen
   zweispaltig (laengstes Label 150 px in 164 px Spalte, gemessen) und sparen
   rund 150 px Hoehe -- genug, dass der Automat am Fold schon hereinragt. Bei
   320 px wuerden die Mono-Labels zweizeilig brechen, dort bleibt es einspaltig. */
@media (max-width:359px){
  .stats{grid-template-columns:1fr}
  /* Die beiden Mono-Zeilen, die seit 05.08. auf dem Rahmen (Bildunterschrift)
     bzw. im Sockel (Bildzeile) stehen statt auf dem Foto, muessen dort
     einzeilig bleiben. Bei 320 px reicht der Platz mit .2em/.13em Sperrung
     nicht; die Sperrung ist der einzige Wert, an dem man drehen kann, ohne die
     Schrift unter 10 px zu druecken. Gemessen mit _build/check-zeilen.mjs. */
  .vp-cap{letter-spacing:.12em}
  .vp-cap .cap-txt::before{width:1.2em}
  .slot-body .slot-meta{letter-spacing:.06em}
}
@media (max-width:420px){
  .hero-cta{gap:.7rem}
}

/* ---- accessibility ------------------------------------------------------ */
:where(a,button,input):focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:.3rem}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
  .status .dot{animation:none}
}
html{scroll-behavior:smooth}