/* ==========================================================================
   Energy Xpress - Lead-Landingpage
   Marken-Tokens uebernommen von energyxpress.de (Gold #d6a62e auf Ink #050505)

   Feste Systementscheidungen:
   - Theme: dauerhaft dunkel (Markenvorgabe, kein Light-Mode-Umschalter)
   - Akzentfarbe: ausschliesslich Gold, keine zweite Akzentfarbe
   - Radien: Buttons pill (999px) / Panels 14px / Inputs 10px
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, kein Google-Fonts-Request) -------- */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-var-latin.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dmsans-var-latin.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------- Tokens -------------------------------- */
:root {
  /* Flaechen */
  --ink:        #050505;
  --ink-2:      #0c0c0f;
  --ink-3:      #141418;
  --line:       rgb(240 240 237 / .11);
  --line-strong:rgb(240 240 237 / .22);

  /* Text */
  --paper:      #f0f0ed;
  /* Beide Stufen liegen ueber WCAG AA gegen --ink (rund 7.4:1 und 6.1:1). */
  --muted:      rgb(240 240 237 / .64);
  --muted-soft: rgb(240 240 237 / .58);

  /* Akzent (einzige Akzentfarbe der Seite) */
  --gold:       #d6a62e;
  --gold-soft:  #f2d788;
  --gold-dim:   rgb(214 166 46 / .16);

  /* Status */
  --error:      #ff8b7a;

  /* Radien */
  --r-pill:     999px;
  --r-panel:    14px;
  --r-input:    10px;

  /* Raster */
  --wrap:       1240px;
  --gutter:     clamp(1.25rem, 4vw, 2.5rem);
  --section-y:  clamp(4.5rem, 9vw, 7.5rem);

  /* Typo */
  --font-display: 'Manrope', 'Segoe UI', Arial, sans-serif;
  --font-body:    'DM Sans', 'Segoe UI', Arial, sans-serif;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t:    .32s var(--ease);

  /* Ebenen */
  --z-header: 100;
  --z-grain:  60;
}

/* ---------------------------------- Reset --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

:where(a, button, input, select, textarea, summary, details):focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: #1a1300;
  padding: .75rem 1.25rem; font-weight: 700; border-radius: 0 0 var(--r-input) 0;
}
.skip:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------- Layout --------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: var(--section-y); position: relative; }

/* Die Kopfzeile klebt oben und wuerde sonst die Zielueberschrift eines Sprungs
   verdecken. Betrifft jeden Aufruf, der auf #anfrage oder #arbeiten springt. */
section[id], [id^="aufruf"], #faq { scroll-margin-top: calc(88px + 1rem); }
@media (max-width: 620px) { section[id], #faq { scroll-margin-top: calc(72px + 1rem); } }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head p { color: var(--muted); margin-top: 1rem; }

.eyebrow {
  font-family: var(--font-display);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.25rem;
}

/* Obergrenze auf 54px: daneben steht das Formular, die Textspalte ist damit
   rund 650px breit. Groesser gesetzt braeche die Zeile "Content, der auffaellt." um. */
h1 {
  font-size: clamp(2.25rem, 1.35rem + 2.9vw, 3.375rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.05;
}
h2 {
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 2.875rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
}
h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }

.gold { color: var(--gold); }

/* ---------------------------------- Grain --------------------------------- */
/* Fixiert und pointer-events:none, damit kein Repaint beim Scrollen entsteht. */
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain);
  pointer-events: none; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%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");
}

/* --------------------------------- Buttons -------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem; white-space: nowrap;
  font-family: var(--font-display); font-size: .9375rem; font-weight: 700;
  letter-spacing: -.01em; text-decoration: none; cursor: pointer;
  padding: .875rem 1.625rem; border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: background-color var(--t), border-color var(--t), color var(--t), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Gold mit dunkler Schrift: Kontrast rund 8.9:1 */
.btn--primary { background: var(--gold); color: #1a1300; }
.btn--primary:hover { background: var(--gold-soft); }

.btn--ghost { border-color: var(--line-strong); color: var(--paper); background: transparent; }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

/* --------------------------------- Header --------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: 88px; display: flex; align-items: center;
  background: rgb(5 5 5 / .78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

/* Markenzeichen bewusst gross gesetzt. Auf schmalen Displays skaliert es mit,
   sonst bliebe fuer die Rufnummer und den Knopf kein Platz. */
.brand img { width: auto; height: 52px; }
/* Alle Handy-Regeln der Kopfzeile stehen bewusst in EINEM Block. Vorher waren es
   drei getrennte @media (max-width: 620px), die sich gegenseitig ueberschrieben
   haben: die Verkleinerung des Knopfes war dadurch wirkungslos. */
@media (max-width: 620px) {
  .site-header { height: 72px; }
  .brand img { height: 34px; }

  .header-actions { gap: .5rem; }
  .header-phone { display: none; }

  .quicklinks { gap: .375rem; }
  /* Tippflaeche bleibt bei 42 px, der Platz kommt aus dem gekuerzten Knopftext */
  .quicklink { padding: .5625rem; }
  .quicklink__symbol { width: 22px; height: 22px; }

  .site-header .btn { padding: .6875rem 1.0625rem; font-size: .8125rem; }
  .site-header .btn__lang { display: none; }
  .site-header .btn__kurz { display: inline; }
}
.header-actions { display: flex; align-items: center; gap: 1.25rem; }
.header-phone {
  font-family: var(--font-display); font-weight: 700; font-size: .9375rem;
  text-decoration: none; color: var(--paper); white-space: nowrap;
  transition: color var(--t);
}
.header-phone:hover { color: var(--gold); }

/* --------------------------- Zugaenge in der Kopfzeile -------------------- */
/* Kundenbereich und Intelligence, uebernommen aus der Bestandsseite.
   Im Ruhezustand bewusst leise: dunkle Pille, schwacher Goldrand, kein Blinken.
   Die Einladung entsteht erst beim Ueberfahren, dafuer aber deutlich:
   der Schlossbuegel hebt sich und der Rand geht auf Gold. */

.quicklinks { display: flex; align-items: center; gap: .5rem; }

.quicklink {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4375rem .8125rem .4375rem .4375rem;
  border: 1px solid rgb(214 166 46 / .34);
  border-radius: var(--r-pill);
  background: rgb(3 3 5 / .55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-decoration: none; white-space: nowrap;
  transition: border-color var(--t), background-color var(--t), transform .18s var(--ease);
}
.quicklink:hover, .quicklink:focus-visible {
  border-color: var(--gold);
  background: rgb(20 15 4 / .8);
  transform: translateY(-1px);
}
.quicklink:active { transform: translateY(0); }

/* Kontur statt Fuellung. In der Kopfzeile darf nur eine einzige gefuellte
   Goldflaeche stehen, und das ist der Hauptaufruf. Drei goldene Flecken
   nebeneinander nehmen dem Knopf die Fuehrung. */
.quicklink__symbol {
  display: grid; place-items: center; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: var(--r-pill);
  background: transparent; color: var(--gold);
  border: 1px solid rgb(214 166 46 / .5);
  transition: border-color var(--t), background-color var(--t), color var(--t);
}
.quicklink:hover .quicklink__symbol,
.quicklink:focus-visible .quicklink__symbol {
  border-color: var(--gold);
  background: rgb(214 166 46 / .14);
  color: var(--gold-soft);
}
.quicklink__symbol svg { width: 13px; height: 13px; }

.quicklink__text {
  font-family: var(--font-display); font-size: .625rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-soft);
  transition: color var(--t);
}
.quicklink:hover .quicklink__text { color: var(--paper); }

/* Das Schloss geht beim Ueberfahren sichtbar auf. Genau diese eine Bewegung
   traegt die Einladung, deshalb sonst nichts blinken lassen. */
.schloss__buegel {
  transform-origin: 12px 10.5px;
  transition: transform .34s var(--ease);
}
.quicklink:hover .schloss__buegel,
.quicklink:focus-visible .schloss__buegel {
  transform: translateY(-2.1px) rotate(-9deg);
}

/* Die Balken wachsen leicht nach oben, passend zum Auswertungs-Gedanken */
.balken path { transition: transform .34s var(--ease); }
.quicklink:hover .balken__a { transform: translateY(-1.6px); }
.quicklink:hover .balken__b { transform: translateY(-.7px); transition-delay: .04s; }
.quicklink:hover .balken__c { transform: translateY(-2.2px); transition-delay: .08s; }

@media (prefers-reduced-motion: reduce) {
  .quicklink, .quicklink__symbol, .schloss__buegel, .balken path { transition: none; }
  .quicklink:hover { transform: none; }
  .quicklink:hover .schloss__buegel,
  .quicklink:hover .balken__a,
  .quicklink:hover .balken__b,
  .quicklink:hover .balken__c { transform: none; }
}

/* Ab mittlerer Breite nur noch die Symbole, sonst wird die Kopfzeile zu voll */
@media (max-width: 1180px) {
  .quicklink { padding: .4375rem; gap: 0; }
  .quicklink__text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
/* Auf dem Handy bleiben beide Zugaenge erreichbar. Der Kundenbereich ist eine
   echte Funktion, die dort niemand missen will. Platz kommt aus dem Logo,
   den Abstaenden und der Rufnummer, die ohnehin als Anruf-Knopf fehlt. */
/* Knopfbeschriftung: lang auf dem Rechner, kurz auf dem Handy.
   Der kurze Text ist fuer Screenreader ausgeblendet, damit die Beschriftung
   nicht doppelt vorgelesen wird. */
.btn__kurz { display: none; }


/* Auf schmalen Displays weicht die Rufnummer dem Button. Der Button selbst wird
   etwas kompakter, damit er nicht die halbe Kopfzeile einnimmt. */

/* ---------------------------------- Hero ---------------------------------- */
/* Polsterung knapp gehalten, damit die Vertrauensleiste am unteren Rand des
   Heros noch ohne Scrollen sichtbar bleibt. */
.hero { padding-top: clamp(1.25rem, 2.2vw, 2rem); padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -30% 0 auto -10%;
  height: 90%; pointer-events: none; z-index: -1;
  background: radial-gradient(58% 52% at 22% 34%, rgb(214 166 46 / .13), transparent 68%);
}

/* Echtes Produktionsbild als Tiefenebene. Per Maske laeuft es in den
   Seitenhintergrund aus, damit Text und Formular davor lesbar bleiben. */
.hero__bg {
  position: absolute; inset: 0 0 0 auto; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%;
  opacity: .3; pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgb(0 0 0 / .5) 42%, transparent 78%);
          mask-image: linear-gradient(to left, #000 0%, rgb(0 0 0 / .5) 42%, transparent 78%);
}
@media (min-width: 1000px) {
  .hero__bg { width: 62%; opacity: .38; }
}
.hero__grid {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
/* Der Hero traegt jetzt drei Dinge nebeneinander: Ansprache, Aussage, Formular.
   Alle drei zugleich brauchen Platz, deshalb in drei Stufen:
     unter 1000px  alles untereinander, Film zuerst
     1000-1279px   zwei Spalten, links Film ueber Text, rechts das Formular
     ab 1280px     drei Spalten nebeneinander, wie gewuenscht  */
.hero__grid { grid-template-areas: "film" "text" "form"; }
.hero__film { grid-area: film; }
.hero__text { grid-area: text; }
.hero__grid > .lead-card { grid-area: form; }

@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: 1fr minmax(400px, 440px);
    grid-template-areas: "film form" "text form";
    gap: clamp(2rem, 3vw, 2.75rem) clamp(3rem, 5vw, 5rem);
    align-items: start;
  }
}

@media (min-width: 1280px) {
  /* Nur hier wird der Hero breiter als der Rest der Seite. Bei 1160px
     Innenbreite blieben fuer den Film rund 340px, der Sprechende waere
     daumennagelgross. Die zusaetzliche Breite geht komplett an den Film. */
  .hero .wrap { max-width: 1440px; }
  .hero__grid {
    grid-template-columns: minmax(260px, 340px) minmax(300px, 1fr) minmax(400px, 440px);
    grid-template-areas: "film text form";
    gap: clamp(1.75rem, 2.6vw, 2.75rem);
    align-items: center;
  }
}

/* ---- Die Ansprache ------------------------------------------------------ */
.hero__film {
  position: relative; margin: 0;
  /* Hochformat: bei voller Spaltenbreite waere der Film ueber 700px hoch und
     wuerde den Hero sprengen. 340px entspricht etwa einer Handybreite, damit
     bleibt er unter der Hoehe des Formulars daneben. */
  max-width: 340px; width: 100%;
  border-radius: 14px; overflow: hidden;
  background: #0a0a0c;
  border: 1px solid rgb(255 255 255 / .08);
  box-shadow: 0 18px 40px rgb(0 0 0 / .45);
}
.hero__film-video {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16;
  object-fit: cover; background: #0a0a0c;
}

/* Der Knopf liegt ueber dem ganzen Bild: die Flaeche selbst schaltet um.
   Eine controls-Leiste gibt es bewusst nicht, damit niemand spulen kann. */
.film__knopf {
  position: absolute; inset: 0; width: 100%;
  display: grid; place-items: center;
  border: 0; padding: 0; cursor: pointer;
  background: radial-gradient(38% 38% at 50% 50%, rgb(0 0 0 / .34), transparent 70%);
  color: var(--gold);
  transition: background .25s ease, opacity .25s ease;
}
.film__knopf::before {
  content: ""; position: absolute;
  width: 62px; height: 62px; border-radius: 50%;
  background: rgb(10 10 12 / .62);
  border: 1.5px solid rgb(214 166 46 / .55);
  backdrop-filter: blur(3px);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.film__knopf:hover::before,
.film__knopf:focus-visible::before {
  transform: scale(1.08);
  border-color: rgb(214 166 46 / .95);
  background: rgb(10 10 12 / .78);
}
.film__zeichen { position: relative; width: 26px; height: 26px; fill: currentColor; }
.film__zeichen--play { margin-left: 3px; }
.film__zeichen--pause { display: none; }

/* Waehrend das Video laeuft tritt der Knopf zurueck, bleibt aber bedienbar. */
.hero__film.laeuft .film__knopf { background: none; opacity: 0; }
.hero__film.laeuft .film__knopf:hover,
.hero__film.laeuft .film__knopf:focus-visible { opacity: 1; }
.hero__film.laeuft .film__zeichen--play { display: none; }
.hero__film.laeuft .film__zeichen--pause { display: block; }

.film__fuss {
  display: flex; align-items: center; gap: .4rem;
  position: absolute; left: .75rem; bottom: .625rem;
  margin: 0; padding: .25rem .5rem;
  font-size: .75rem; letter-spacing: .01em;
  color: var(--paper);
  background: rgb(10 10 12 / .6);
  border-radius: 999px;
  backdrop-filter: blur(3px);
  pointer-events: none;
  transition: opacity .25s ease;
}
.film__ton { display: inline-flex; color: var(--gold); }
.hero__film.laeuft .film__fuss { opacity: 0; }

/* ---- Farbspiel auf dem hervorgehobenen Wort ----------------------------- */
.gold--spiel { color: var(--gold); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold--spiel {
    background-image: linear-gradient(100deg,
      #d6a62e 0%, #f6e3a6 18%, #d6a62e 38%,
      #d6a62e 62%, #f6e3a6 82%, #d6a62e 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: goldspiel 8s linear infinite;
  }
}
@keyframes goldspiel { from { background-position: 130% 0; } to { background-position: -130% 0; } }
@media (prefers-reduced-motion: reduce) { .gold--spiel { animation: none; } }
.hero__lede { color: var(--muted); font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); max-width: 42ch; margin-top: 1.5rem; }

/* Vertrauensbelege im Hero. Stehen bewusst oberhalb der Falte, weil die Seite
   keine Preise mehr nennt und die Glaubwuerdigkeit sofort tragen muss. */
/* Die Liste richtet sich nach dem Platz, den sie hat, nicht nach der
   Fensterbreite. Eine feste Grenze ging hier schief: ab 1024px stellt sich der
   Hero auf zwei Spalten um, die Textspalte wird schmal, und die starre
   Zweispaltigkeit liess dort alle vier Zeilen umbrechen. auto-fit legt nur so
   viele Spalten an, wie mit 16rem Mindestbreite nebeneinander Platz haben. */
.trustpoints {
  display: grid; gap: .625rem 1.5rem; margin-top: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.trustpoints li {
  position: relative; padding-left: 1.75rem;
  font-size: .9375rem; color: var(--paper);
}
.trustpoints li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: 1rem; height: .55rem;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

/* Harte Eckdaten als schmale Leiste unter den Vertrauensbelegen */
.hero__facts {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.hero__facts dt {
  font-family: var(--font-display); font-size: .6875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-soft);
  margin-bottom: .25rem;
}
.hero__facts dd {
  margin: 0; font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
}

/* ------------------------------- Lead-Formular ---------------------------- */
.lead-card {
  background: linear-gradient(168deg, var(--ink-2), #08080a);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-panel);
  padding: clamp(1.375rem, 2.5vw, 1.75rem);
  box-shadow: 0 28px 70px rgb(0 0 0 / .55), inset 0 1px 0 rgb(240 240 237 / .07);
}
/* Traegt die Zeichenflaeche fuer den Zerfall und den Wiederholknopf. */
.lead-card { position: relative; }

/* ---------------------------- Zerfall des Formulars ----------------------- */
/* Die fallenden Buchstaben werden auf eine Zeichenflaeche gemalt, nicht als
   einzelne Elemente gebaut. Bei rund 500 Zeichen waeren 500 Elemente pro Bild
   zu teuer, auf der Zeichenflaeche kostet dasselbe fast nichts. */
.zerfall-flaeche {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 3;
  border-radius: var(--r-panel);
}
/* Die Bauteile behalten ihr Aussehen und werden nur bewegt. Nichts wird
   versteckt: ein fallendes Eingabefeld soll wie ein Eingabefeld aussehen. */

/* Einzelne Buchstaben, aus ihrem Text geloest. Im Ruhezustand bleiben sie
   inline, damit sich der Textumbruch nicht veraendert. Erst das absolute
   Setzen macht sie zu Bloecken, und dann greift auch transform. */
.zerfall-wort { white-space: pre; }

/* Dank nach dem Absenden, mittig ueber dem Haufen. */
.lead-danke {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -46%);
  width: min(88%, 22rem); z-index: 5;
  text-align: center;
  padding: 1.5rem 1.375rem;
  border: 1px solid rgb(214 166 46 / .42);
  border-radius: var(--r-panel);
  background: rgb(8 8 10 / .93);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 24px 60px rgb(0 0 0 / .6);
  opacity: 0;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.lead-danke.ist-da { opacity: 1; transform: translate(-50%, -50%); }
.lead-danke h3 { font-size: 1.1875rem; margin-bottom: .5rem; }
.lead-danke p { color: var(--muted); font-size: .875rem; line-height: 1.55; }
.lead-danke .lead-done__mark { margin: 0 auto .875rem; }

@media (prefers-reduced-motion: reduce) {
  .lead-danke { transition: none; opacity: 1; transform: translate(-50%, -50%); }
}

/* hidden schlaegt sonst die Autoren-Regel nicht: der Knopf bliebe
   bei reduzierter Bewegung sichtbar, ohne etwas zu tun. */
.zerfall-knopf[hidden] { display: none; }

.zerfall-knopf {
  position: absolute; top: .625rem; right: .625rem; z-index: 4;
  display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  color: var(--muted); background: rgb(3 3 5 / .6);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  cursor: pointer; opacity: .45;
  transition: opacity var(--t), color var(--t), border-color var(--t), transform .4s var(--ease);
}
.lead-card:hover .zerfall-knopf { opacity: 1; }
.zerfall-knopf:hover { color: var(--gold); border-color: var(--gold); }
.zerfall-knopf:focus-visible { opacity: 1; }
.zerfall-knopf:active { transform: rotate(90deg); }
.zerfall-knopf[disabled] { opacity: .25; cursor: default; }

@media (max-width: 620px) { .zerfall-knopf { top: .5rem; right: .5rem; } }

.lead-card__head { margin-bottom: 1.5rem; }
.lead-card__head h2 { font-size: 1.375rem; letter-spacing: -.02em; }
.lead-card__head p { color: var(--muted); font-size: .875rem; margin-top: .4rem; }

.field { display: grid; gap: .5rem; margin-bottom: 1rem; }

/* Im Hero sitzt die Karte enger: sie muss vollstaendig ins erste Fenster
   passen, samt Absendeknopf und Zusicherung. Im Schlussabschnitt ist Platz,
   dort bleibt die normale Spannung. */
.hero .lead-card { padding: 1.375rem 1.5rem 1.5rem; }
.hero .lead-card__head { margin-bottom: 1.125rem; }
.hero .field { gap: .375rem; margin-bottom: .8125rem; }
.hero .field--consent { margin-block: .9375rem; }
.hero .field__hinweis { font-size: .78125rem; line-height: 1.35; }
.hero .zusicherung { gap: .3125rem; margin-top: .875rem; }
.hero .zusicherung li { font-size: .78125rem; line-height: 1.4; }

/* Flache Fenster, vor allem das sehr verbreitete 1366x768. Dort fehlten ohne
   diese Regel elf Pixel und die Zusicherung waere unten abgeschnitten worden.
   Gilt nur, solange Text und Formular nebeneinander stehen. */
@media (min-width: 1000px) and (max-height: 820px) {
  .hero { padding-top: .75rem; }
  .hero .lead-card { padding: 1.125rem 1.375rem 1.25rem; }
  .hero .lead-card__head { margin-bottom: .875rem; }
  .hero .lead-card__head h2 { font-size: 1.25rem; }
  .hero .field { margin-bottom: .625rem; }
  .hero .field--consent { margin-block: .75rem; }
  .hero .zusicherung { margin-top: .75rem; }
}
.field > label {
  font-family: var(--font-display); font-size: .8125rem; font-weight: 600;
  color: var(--paper); letter-spacing: .01em;
}
.field .req { color: var(--gold); }

.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: .9375rem; color: var(--paper);
  background: var(--ink-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-input);
  padding: .8125rem .9375rem;
  transition: border-color var(--t), background-color var(--t);
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23f0f0ed' stroke-opacity='.6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem;
}
.field select option { background: var(--ink-3); color: var(--paper); }

/* Platzhalter erreichen rund 4.6:1 gegen --ink-3 */
.field ::placeholder { color: rgb(240 240 237 / .46); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgb(240 240 237 / .32); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold); outline: none; background: #17171c;
  box-shadow: 0 0 0 3px var(--gold-dim);
}
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--error); }
.field__error { font-size: .8125rem; color: var(--error); }
.field:not(.field--invalid) .field__error { display: none; }

.field--consent { grid-template-columns: auto 1fr; align-items: start; gap: .75rem; margin-block: 1.25rem; }
.field--consent input[type="checkbox"] {
  width: 1.125rem; height: 1.125rem; margin-top: .2rem;
  accent-color: var(--gold); cursor: pointer; flex-shrink: 0;
}
.field--consent label { font-family: var(--font-body); font-size: .8125rem; font-weight: 400; color: var(--muted); line-height: 1.5; }
.field--consent label a { color: var(--gold); text-underline-offset: 3px; }
.field--consent .field__error { grid-column: 1 / -1; }

/* Honeypot: fuer Menschen unsichtbar, fuer Bots ausfuellbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: .8125rem; color: var(--muted-soft); margin-top: .875rem; text-align: center; }

/* Hilfstext unter einem Feld. Erklaert, wozu die Angabe gebraucht wird. */
.field__hinweis { font-size: .8125rem; color: var(--muted-soft); line-height: 1.45; }

/* Zusicherungsblock. Steht wortgleich unter jedem Aufruf der Seite und ist
   bewusst NICHT in der kleinsten Schrift gesetzt, sondern lesbar. Die woertliche
   Wiederholung ist der Mechanismus, nicht die Formulierung. */
.zusicherung { display: grid; gap: .4375rem; margin-top: 1.125rem; }
.zusicherung li {
  position: relative; padding-left: 1.125rem;
  font-size: .8125rem; line-height: 1.5; color: var(--muted);
}
.zusicherung li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--gold);
}

/* Leiser Nebenweg im Hero. Bewusst Textlink, kein zweiter Knopf, damit der
   Hauptaufruf allein die gefuellte Flaeche behaelt. */
.hero__nebenlink { margin-top: 1.5rem; }
.hero__nebenlink a {
  font-family: var(--font-display); font-size: .875rem; font-weight: 600;
  color: var(--muted); text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px; transition: color var(--t), border-color var(--t);
}
.hero__nebenlink a:hover { color: var(--gold); border-color: var(--gold); }
.hero__nebenlink a::after { content: " \2193"; }

/* Formular-Status */
.form-status { border-radius: var(--r-input); padding: .875rem 1rem; font-size: .875rem; margin-bottom: 1rem; }
.form-status[hidden] { display: none; }
.form-status--error   { background: rgb(255 139 122 / .1); border: 1px solid rgb(255 139 122 / .38); color: var(--error); }

/* Erfolgs-Zustand ersetzt das Formular */
.lead-done { text-align: center; padding: 1.5rem .5rem; }
.lead-done h3 { font-size: 1.25rem; margin-bottom: .625rem; }
.lead-done p { color: var(--muted); font-size: .9375rem; }
.lead-done__mark {
  width: 46px; height: 46px; margin: 0 auto 1.125rem;
  border-radius: var(--r-pill); background: var(--gold-dim);
  border: 1px solid rgb(214 166 46 / .5);
  display: grid; place-items: center; color: var(--gold);
}

/* Ladezustand: Schimmern statt Spinner */
.btn--loading { position: relative; color: transparent !important; overflow: hidden; }
.btn--loading::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgb(26 19 0 / .28), transparent);
  animation: shimmer 1.05s linear infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .btn--loading::after { animation: none; background: rgb(26 19 0 / .18); }
}

/* ----------------------------- Vertrauensleiste --------------------------- */
/* Sitzt am unteren Rand des Heros, also noch ohne Scrollen sichtbar.
   Die Plattform-Logos stehen in ihren Markenfarben und verteilen sich ueber
   die volle Breite. Das ist eine Leistungsbeschreibung, keine Partnerschaft:
   die Bestandsseite nennt Meta Ads, Reels, Shorts und die Ausspielung in
   9:16 und 1:1. Die Formulierung darf nicht in Richtung "Partner" oder
   "zertifiziert" geaendert werden, das waere eine andere und nicht belegte
   Aussage. */
.trustbar {
  display: flex; align-items: center;
  gap: clamp(1rem, 3vw, 2.25rem);
  margin-top: clamp(1.25rem, 2vw, 1.5rem);
  padding-top: clamp(.875rem, 1.5vw, 1.125rem);
  border-top: 1px solid var(--line);
}

.trustbar__titel {
  font-family: var(--font-display); font-size: .6875rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted-soft);
  white-space: nowrap; flex-shrink: 0;
}

/* Nimmt die restliche Breite und verteilt die Marken darueber. */
.trustbar__marken {
  display: flex; align-items: center;
  flex: 1; justify-content: space-between;
  gap: 1rem;
}
.trustbar__marken li { display: flex; }

/* Kein Farbfilter: die Zeichen liegen bereits in ihren Markenfarben vor.
   TikToks Markenfarbe ist Schwarz und waere hier unsichtbar, dort gilt die
   helle Fassung als offizielle Variante fuer dunkle Hintergruende.
   Gemessen gegen den Seitenhintergrund liegen alle vier ueber 5:1. */
.trustbar__marken img {
  height: 26px; width: auto; object-fit: contain;
  opacity: .92; transition: opacity var(--t), transform .25s var(--ease);
}
.trustbar__marken img:hover { opacity: 1; transform: translateY(-2px); }

/* Der Google-Knopf bleibt versteckt, solange keine Profiladresse hinterlegt ist.
   Ohne diese Regel wuerde das display:inline-flex das hidden-Attribut aushebeln. */
.trustbar__google[hidden] { display: none; }
.trustbar__google {
  display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0;
  font-family: var(--font-display); font-size: .8125rem; font-weight: 700;
  color: var(--paper); text-decoration: none;
  background: rgb(240 240 237 / .05);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: .5rem .9375rem;
  transition: border-color var(--t), background-color var(--t);
}
.trustbar__google:hover { border-color: var(--gold); background: rgb(214 166 46 / .1); }
.trustbar__google img { width: 18px; height: 18px; flex-shrink: 0; }

/* Schmale Displays: Beschriftung ueber die Marken, diese weiter ueber die
   ganze Breite verteilt. */
@media (max-width: 760px) {
  .trustbar { flex-wrap: wrap; gap: .875rem; }
  .trustbar__titel { flex-basis: 100%; }
  .trustbar__marken { flex-basis: 100%; }
  .trustbar__marken img { height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .trustbar__marken img:hover { transform: none; }
}


/* ------------------------------- Kundenband ------------------------------- */
/* Zwei gegenlaeufige Reihen. Der Lauf schliesst nahtlos, weil das Skript je
   Reihe eine zweite, identische Spur anhaengt: sobald die erste ganz nach links
   gelaufen ist, steht die zweite exakt an ihrer Ausgangsposition. */

.band { padding-block: clamp(2.75rem, 5vw, 4rem); border-block: 1px solid var(--line); }
.band__label {
  font-family: var(--font-display); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-soft);
  text-align: center; margin-bottom: 2.25rem;
}

.band__row {
  display: flex; overflow: hidden;
  /* Raender ausblenden, damit die Logos nicht hart abgeschnitten einlaufen */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.band__row + .band__row { margin-top: clamp(1rem, 2vw, 1.75rem); }

.band__track {
  display: flex; align-items: center; flex-shrink: 0;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-right: clamp(2.5rem, 5vw, 4.5rem);
  /* 32s auf 1442px Spurbreite sind rund 45 px/s. Mit zwei Reihen zu je
     fuenf Logos waren es 19 px/s je Reihe - zusammen wirkte das unruhig,
     einzeln zu traege. Eine Spur, spuerbar schneller, aber noch lesbar. */
  animation: band-lauf 32s linear infinite;
  will-change: transform;
}
[data-richtung="rechts"] .band__track { animation-direction: reverse; }
@keyframes band-lauf {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Anhalten, sobald jemand hinsehen will */
.band__row:hover .band__track { animation-play-state: paused; }

.band__track li { display: flex; align-items: center; flex-shrink: 0; }

/* Alle Marken werden auf denselben hellen Ton gebracht. Die Dateien liegen in
   ihren Markenfarben vor, nebeneinander auf dunklem Grund ergibt das sonst ein
   buntes Durcheinander, das der Vertrauenswirkung entgegenarbeitet.
   Voraussetzung dafuer ist, dass jede Datei einen freien Hintergrund hat.
   ergo.png war ein rotes E auf weissem Kasten und wurde dafuer freigestellt,
   das Original liegt daneben als ergo-original.png. */
/* Marken in ihren Originalfarben. Ausdrueckliche Kundenentscheidung, der
   Graustufenfilter ist deshalb entfernt. Damit das auf dunklem Grund traegt,
   braucht jede Datei einen freien Hintergrund: ergo.png war ein rotes E auf
   weissem Kasten und wurde dafuer freigestellt, das Original liegt daneben
   als ergo-original.png. Die Deckkraft bleibt knapp unter voll, damit die
   Reihe nicht lauter wirkt als die Ueberschriften daneben. */
.band__track img {
  width: auto; object-fit: contain;
  opacity: .88; transition: opacity var(--t);
}
.band__track img:hover { opacity: 1; }

/* Hoehe ausdruecklich setzen, nicht nur begrenzen: microsoft.svg bringt keine
   eigenen Masse mit und fiele sonst auf null Breite zusammen. */
.band__track img { height: 32px; max-width: 170px; }
.band__track img.is-mark { height: 42px; max-width: 42px; }

/* Was wir koennen, als Kacheln mit Bild statt als Textschildchen.

   Die Aufteilung folgt den Seitenverhaeltnissen des Materials, nicht dem
   Zufall: die beiden Querformat-Aufnahmen bekommen breite Zellen, die vier
   hochformatigen Inhalte bekommen hohe. So wird nichts sinnlos beschnitten. */
.koennen {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(2rem, 4vw, 2.75rem);
}
@media (min-width: 760px) { .koennen { grid-template-columns: repeat(4, 1fr); } }

.koennen__kachel {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 4 / 5;                 /* Hochformat, passend zu Portrait und Reel */
  border: 1px solid var(--line); border-radius: var(--r-panel);
  background: var(--ink-2);
  display: flex; align-items: flex-end;
  padding: .875rem;
  transition: border-color var(--t);
}
.koennen__kachel:hover { border-color: var(--line-strong); }

/* Zwei Spalten breit, im Verhaeltnis der Querformat-Aufnahmen. */
.koennen__kachel--breit { grid-column: span 2; aspect-ratio: 16 / 9; }

.koennen__kachel img,
.koennen__kachel video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* Verlauf, damit die Beschriftung auf jedem Bild lesbar bleibt. */
.koennen__kachel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(5 5 5 / .92) 8%, rgb(5 5 5 / .55) 46%, rgb(5 5 5 / .12));
}
.koennen__kachel h3 {
  font-size: .9375rem; font-weight: 700; letter-spacing: -.01em;
  line-height: 1.25; position: relative;
}

/* Kacheln, fuer die noch kein Bildmaterial vorliegt. Bewusst gestaltet statt
   mit einem fremden Bild gefuellt: lieber eine ruhige Flaeche als ein Motiv,
   das die Arbeit falsch darstellt. Sobald ein Bild da ist, ersetzt es nur den
   Hintergrund, die Kachel bleibt wie sie ist. */
.koennen__kachel--leer {
  background:
    radial-gradient(120% 90% at 22% 108%, rgb(214 166 46 / .16), transparent 62%),
    linear-gradient(168deg, #101014, #0a0a0c);
}
.koennen__kachel--leer::after { display: none; }
.koennen__kachel--leer h3 { color: var(--paper); }

/* Videokachel: alle Aufnahmen liegen uebereinander, sichtbar ist genau eine. */
.koennen__kachel--video video { opacity: 0; transition: opacity .5s var(--ease); }
.koennen__kachel--video video.ist-dran { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .koennen__kachel--video video { transition: none; }
}

/* ------------------------------- Kundenband ------------------------------- */
/* Zwei gegenlaeufige Reihen. Der Lauf schliesst nahtlos, weil das Skript je
   Reihe eine zweite, identische Spur anhaengt: sobald die erste ganz nach links
   gelaufen ist, steht die zweite exakt an ihrer Ausgangsposition. */

.band { padding-block: clamp(2.75rem, 5vw, 4rem); border-block: 1px solid var(--line); }
/* ------------------------------- Bewertungen ------------------------------ */
.reviews { max-width: 46rem; }
.reviews__viewport { position: relative; min-height: 15rem; }

.review {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(12px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  pointer-events: none;
}
.review.is-aktiv { opacity: 1; transform: none; pointer-events: auto; }

.review__sterne { display: flex; gap: .1875rem; margin-bottom: 1.125rem; }
.review__sterne svg { width: 18px; height: 18px; color: var(--gold); }
.review__sterne .ist-leer { color: var(--line-strong); }

.review__text {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  font-weight: 600; letter-spacing: -.015em; line-height: 1.45;
  max-width: 34ch;
}
.review__wer { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.review__name { font-family: var(--font-display); font-weight: 700; font-size: .9375rem; }
.review__meta { font-size: .8125rem; color: var(--muted-soft); }

.reviews__nav { display: flex; align-items: center; gap: .75rem; margin-top: 2rem; }
.reviews__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  color: var(--paper); background: transparent; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  transition: border-color var(--t), color var(--t);
}
.reviews__btn:hover { border-color: var(--gold); color: var(--gold); }
.reviews__btn:active { transform: translateY(1px); }

.reviews__dots { display: flex; gap: .5rem; }
.reviews__dot {
  width: 30px; height: 3px; padding: 0; cursor: pointer;
  background: var(--line-strong); border: 0; border-radius: var(--r-pill);
  transition: background-color var(--t);
}
.reviews__dot[aria-selected="true"] { background: var(--gold); }
.reviews__dot:hover { background: var(--muted); }

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

/* -------------------------------- Zusagen --------------------------------- */
.promises { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 760px) { .promises { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5vw, 4.5rem); } }
.promise { padding-block: 1.625rem; border-top: 1px solid var(--line); }
.promise:first-child { border-top: 0; }
@media (min-width: 760px) { .promise:nth-child(2) { border-top: 0; } }
.promise p { color: var(--muted); font-size: .9375rem; margin-top: .4375rem; }

/* --------------------------------- Ablauf --------------------------------- */
.flow { display: grid; gap: 1.75rem; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 900px) { .flow { grid-template-columns: repeat(5, 1fr); gap: 1.25rem; } }
.flow__step { position: relative; padding-top: 2.25rem; counter-increment: step; }
.flow__step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-display); font-size: .8125rem; font-weight: 700;
  letter-spacing: .1em; color: var(--gold);
}
/* Verbindungslinie nur dort, wo die Schritte nebeneinander stehen */
@media (min-width: 900px) {
  .flow__step::after {
    content: ""; position: absolute; top: .5rem; left: 2.25rem; right: 0;
    height: 1px; background: var(--line);
  }
  .flow__step:last-child::after { display: none; }
}
.flow__step h3 { margin-bottom: .4375rem; }
.flow__step p { color: var(--muted); font-size: .875rem; }

/* ====================== Rotierender 3D-Ring der Projekte ==================== */
/* Sechs Karten stehen im Kreis, der Ring dreht sich langsam um die Y-Achse.
   Aufbau wie auf der Bestandsseite: Buehne mit Perspektive, Orbit mit
   preserve-3d, jede Karte per rotateY plus translateZ auf ihre Position.
   Die Drehung haelt an, sobald der Zeiger darauf liegt oder ein Bedienelement
   den Fokus hat, damit man die Referenzen in Ruhe ansehen kann. */

/* overflow am aeusseren Rahmen, damit hereinragende Karten waehrend der Drehung
   hier geklammert werden und nicht erst vom body abgefangen werden muessen.
   Die Perspektive sitzt eine Ebene tiefer, die 3D-Darstellung bleibt also intakt. */
.vortex { position: relative; margin-top: clamp(1.5rem, 3vw, 2.5rem); overflow: hidden; }

.vortex__stage {
  --karte:  clamp(220px, 25vw, 330px);
  /* Acht Karten stehen 45 Grad auseinander. Der Radius muss mitwachsen,
     sonst schneiden sich die Karten gegenseitig. */
  --winkel: 45deg;
  --radius: calc(var(--karte) * 1.25);
  position: relative;
  height: clamp(310px, 32vw, 400px);
  perspective: 1400px;
  perspective-origin: 50% 44%;
  /* Karten laufen zu den Seiten weich aus, statt hart abgeschnitten zu werden */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
}

.vortex__orbit {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  animation: vortex-drehen 46s linear infinite;
}
@keyframes vortex-drehen {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-360deg); }
}

.vortex:hover  .vortex__orbit,
.vortex:focus-within .vortex__orbit,
.vortex.is-angehalten .vortex__orbit { animation-play-state: paused; }

/* Handbetrieb ueber die Pfeiltasten: Animation aus, Winkel kommt aus --schritt */
.vortex.is-manuell .vortex__orbit {
  animation: none;
  transform: rotateY(calc(var(--schritt, 0) * var(--winkel, 45deg) * -1));
  transition: transform .75s var(--ease);
}

.vortex__card {
  position: absolute; top: 50%; left: 50%;
  width: var(--karte);
  transform:
    translate(-50%, -50%)
    rotateY(calc(var(--i) * var(--winkel, 45deg)))
    translateZ(var(--radius));
  backface-visibility: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: 0 26px 64px rgb(0 0 0 / .62);
}

/* Bild und Bewegtbild bekommen dasselbe Fenster, damit die unterschiedlichen
   Seitenverhaeltnisse der Aufnahmen den Ring nicht ungleichmaessig machen.
   Die Aufnahmen liegen in 16:9 und 2:1 vor. */
/* Die Aufnahmen liegen nach dem Entfernen der schwarzen Balken in 2.71:1 und
   2.00:1 vor, die Bildschirmfotos in 16:9. Ein Fenster von 21:9 liegt dazwischen
   und beschneidet beide Extreme etwa gleich stark, statt eines davon zu
   zerschneiden. */
.vortex__card img,
.vortex__card video {
  width: 100%; display: block;
  aspect-ratio: 21 / 9; object-fit: cover; object-position: center;
  background: var(--ink-3);
}
.vortex__name {
  font-family: var(--font-display); font-size: .8125rem; font-weight: 700;
  letter-spacing: .04em; padding: .75rem .9375rem;
  border-top: 1px solid var(--line);
}

/* Abspielknopf. Erscheint nur, wenn der Browser das automatische Abspielen
   verweigert hat, damit dort kein totes Standbild stehen bleibt. */
.klip__start {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  color: #1a1300; background: var(--gold);
  border: 0; border-radius: var(--r-pill);
  cursor: pointer;
  box-shadow: 0 6px 20px rgb(0 0 0 / .45);
  transition: transform .18s var(--ease), background-color var(--t);
}
.klip__start:hover { background: var(--gold-soft); transform: translate(-50%, -50%) scale(1.06); }
.klip__start:active { transform: translate(-50%, -50%) scale(.97); }

/* Bedienelemente */
.vortex__controls {
  display: flex; align-items: center; justify-content: center; gap: .625rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.vortex__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 .875rem;
  font-family: var(--font-display); font-size: .8125rem; font-weight: 700;
  color: var(--paper); background: transparent; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  transition: border-color var(--t), color var(--t);
}
.vortex__btn:hover { border-color: var(--gold); color: var(--gold); }
.vortex__btn:active { transform: translateY(1px); }
.vortex__btn--wide { min-width: 160px; }

/* Schmale Displays: kein 3D, stattdessen eine wischbare Reihe.
   Auf Touch ist ein rotierender Ring schwer zu bedienen. */
@media (max-width: 759px) {
  .vortex__stage {
    perspective: none; height: auto;
    -webkit-mask-image: none; mask-image: none;
  }
  .vortex__orbit {
    position: static; animation: none; transform: none !important;
    display: flex; gap: 1rem; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: .25rem var(--gutter) 1rem;
  }
  .vortex__card {
    position: static; transform: none; flex: 0 0 auto;
    width: min(78vw, 320px); scroll-snap-align: center;
    backface-visibility: visible;
  }
  .vortex__controls { display: none; }
}

/* Reduzierte Bewegung: statt eines eingefrorenen Rings, bei dem die haelfte
   der Karten unsichtbar waere, ein ruhiges Raster. */
@media (prefers-reduced-motion: reduce) and (min-width: 760px) {
  .vortex__stage {
    perspective: none; height: auto;
    -webkit-mask-image: none; mask-image: none;
  }
  .vortex__orbit {
    position: static; animation: none; transform: none !important;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    padding-inline: var(--gutter);
  }
  .vortex__card {
    position: static; transform: none; width: auto;
    backface-visibility: visible;
  }
  .vortex__controls { display: none; }
}

/* ------------------------- Wiederkehrender Aufruf ------------------------- */
/* Steht achtmal auf der Seite, immer mit demselben Knopftext und demselben
   Zusicherungsblock darunter. Die Wiederholung traegt die Verbindlichkeit. */
.aufruf {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
  max-width: 40rem;
}
.aufruf__vorlauf {
  font-family: var(--font-display); font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  font-weight: 700; letter-spacing: -.015em; line-height: 1.4;
  margin-bottom: 1.25rem; max-width: 34ch;
}
.aufruf .zusicherung { margin-top: 1.25rem; }

/* --------------------- Lieferumfang des Entwurfs -------------------------- */
.leistungsliste { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .leistungsliste { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.leistungsliste__punkt { padding-block: 1.625rem; border-top: 1px solid var(--line); }
.leistungsliste__punkt:first-child { border-top: 0; }
@media (min-width: 760px) { .leistungsliste__punkt:nth-child(2) { border-top: 0; } }
.leistungsliste__punkt h3 { position: relative; padding-left: 1.75rem; }
.leistungsliste__punkt h3::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: 1rem; height: .55rem;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.leistungsliste__punkt p { color: var(--muted); font-size: .9375rem; margin-top: .4375rem; padding-left: 1.75rem; }

/* Abgrenzung und Haken. Bewusst als eigene Kaesten, damit die unangenehmen
   Antworten nicht zwischen den Verkaufsargumenten verschwinden. */
.abgrenzung, .haken {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--r-panel); max-width: 46rem;
}
.abgrenzung { border: 1px solid var(--line-strong); background: var(--ink-2); }
.haken { border: 1px solid rgb(214 166 46 / .38); background: linear-gradient(168deg, rgb(214 166 46 / .09), rgb(12 12 15 / .9)); }
.abgrenzung h3, .haken h3 { font-size: 1.125rem; margin-bottom: .75rem; }
.haken h3 { color: var(--gold); }
.abgrenzung p, .haken p { color: var(--muted); font-size: .9375rem; }
.haken p + p { margin-top: .875rem; }

/* ----------------------------- Belegabschnitt ----------------------------- */

/* ------------------------------ Unsere Zusage ----------------------------- */
.zusagekasten {
  max-width: 46rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid rgb(214 166 46 / .42);
  border-radius: var(--r-panel);
  background: linear-gradient(168deg, rgb(214 166 46 / .1), rgb(12 12 15 / .92));
}
.zusagekasten h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: 1rem; }
.zusagekasten > p { color: var(--muted); font-size: 1.0625rem; line-height: 1.7; }
.zusagekasten .aufruf { border-top-color: rgb(214 166 46 / .28); }

/* ---------------------------------- FAQ ----------------------------------- */
.faq { max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.375rem;
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em;
  transition: color var(--t);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold); }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 13px; height: 13px; margin-top: .4rem;
  background: currentColor; opacity: .7;
  clip-path: polygon(46% 0, 54% 0, 54% 46%, 100% 46%, 100% 54%, 54% 54%, 54% 100%, 46% 100%, 46% 54%, 0 54%, 0 46%, 46% 46%);
  transition: transform var(--t);
}
.faq details[open] summary { color: var(--gold); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__body { padding-bottom: 1.5rem; color: var(--muted); font-size: .9375rem; max-width: 62ch; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* Kleinere Fassung. Die Fragen stehen jetzt in der linken Spalte neben dem
   Formular statt ueber die volle Breite, also duerfen sie weniger Platz und
   weniger Gewicht bekommen: sie beantworten den letzten Zweifel, sie sind
   nicht mehr ein eigener Halt auf der Seite. */
.faq--klein { max-width: none; margin-top: 2.5rem; }
.faq--klein .faq__titel {
  margin: 0; padding-bottom: .75rem;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-display); font-size: .8125rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.faq--klein summary {
  padding-block: .8125rem; gap: 1rem;
  font-size: .9375rem; font-weight: 600;
}
.faq--klein summary::after { width: 11px; height: 11px; margin-top: .3rem; }
.faq--klein .faq__body {
  padding-bottom: .9375rem; font-size: .84375rem; line-height: 1.55; max-width: none;
}

/* ------------------------------- Kontaktteil ------------------------------ */
.contact { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .contact { grid-template-columns: 1fr minmax(420px, 480px); } }
.contact__direct { display: grid; gap: 1.5rem; margin-top: 2.25rem; }
.contact__item { display: grid; gap: .1875rem; }
.contact__item dt {
  font-family: var(--font-display); font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-soft);
}
.contact__item dd { margin: 0; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; }
.contact__item a { text-decoration: none; transition: color var(--t); }
.contact__item a:hover { color: var(--gold); }

/* ------------------------------- Rechtstexte ------------------------------ */
/* Impressum, Datenschutz und AGB. Inhalte wortgleich von energyxpress.de
   uebernommen, nur in das Layout dieser Seite gesetzt. */

.rechtstext { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem); }
.rechtstext__zurueck { margin-bottom: clamp(2rem, 4vw, 3rem); }
.rechtstext__zurueck a {
  font-family: var(--font-display); font-size: .875rem; font-weight: 600;
  color: var(--muted); text-decoration: none; transition: color var(--t);
}
.rechtstext__zurueck a::before { content: "\2190"; margin-right: .5rem; }
.rechtstext__zurueck a:hover { color: var(--gold); }

/* Zeilenlaenge begrenzt, damit Paragrafentexte lesbar bleiben */
.prosa { max-width: 46rem; }
.prosa h1 { margin-bottom: 1rem; }
.prosa > p:first-of-type { color: var(--muted); font-size: 1.0625rem; }

.prosa h2 {
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
  letter-spacing: -.02em; line-height: 1.25;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); margin-bottom: .875rem;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
  scroll-margin-top: 110px;
}
.prosa h3 {
  font-size: 1.0625rem; margin-top: 2rem; margin-bottom: .625rem;
  scroll-margin-top: 110px;
}

.prosa p, .prosa li { color: var(--muted); font-size: .9375rem; line-height: 1.7; }
.prosa p + p { margin-top: .875rem; }
.prosa strong { color: var(--paper); font-weight: 700; }

/* Klauselnummern der AGB, zum Beispiel 10.1, als ruhige Marke am Absatzanfang */
.prosa .klausel {
  display: inline-block; min-width: 2.75rem;
  font-family: var(--font-display); font-weight: 700;
  color: var(--gold); font-variant-numeric: tabular-nums;
}

.prosa ul, .prosa ol { margin: 1rem 0; padding-left: 1.375rem; }
.prosa ul { list-style: disc; }
.prosa ol { list-style: decimal; }
.prosa li { margin-bottom: .5rem; padding-left: .25rem; }
.prosa li::marker { color: var(--gold); }

.prosa address { font-style: normal; color: var(--muted); line-height: 1.8; }
.prosa a { color: var(--gold); text-underline-offset: 3px; }
.prosa hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.prosa table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0;
  font-size: .875rem; display: block; overflow-x: auto;
}
.prosa th, .prosa td {
  text-align: left; padding: .75rem .875rem;
  border-bottom: 1px solid var(--line); color: var(--muted);
}
.prosa th { font-family: var(--font-display); font-weight: 700; color: var(--paper); }

/* Inhaltsverzeichnis am Anfang jeder Rechtsseite */
.prosa__toc {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 1.5rem 1.625rem;
  border: 1px solid var(--line); border-radius: var(--r-panel);
  background: var(--ink-2);
}
.prosa__toc-titel {
  font-family: var(--font-display); font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-soft);
  margin-bottom: .875rem;
}
.prosa__toc ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem 1.5rem;
}
@media (min-width: 620px) { .prosa__toc ul { grid-template-columns: 1fr 1fr; } }
.prosa__toc li { margin: 0; padding: 0; }
.prosa__toc a {
  font-size: .875rem; color: var(--muted); text-decoration: none;
  transition: color var(--t);
}
.prosa__toc a:hover { color: var(--gold); text-decoration: underline; }

/* --------------------------------- Footer --------------------------------- */
/* Aufbau wie im Fuss der Bestandsseite: Marke mit Claim, dann die Spalten
   Rechtliches und Kontakt. */
.site-footer { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem; }

.site-footer__grid {
  display: grid; gap: clamp(2.25rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr 1fr; } }

.site-footer__marke img { height: 38px; width: auto; margin-bottom: 1.25rem; }
.site-footer__claim {
  font-family: var(--font-display); font-size: .75rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-soft);
  line-height: 1.9;
}

.site-footer__spalte h2 {
  font-family: var(--font-display); font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-soft);
  margin-bottom: 1.125rem;
}
.site-footer__spalte ul { display: grid; gap: .625rem; }
.site-footer__spalte a {
  font-size: .9375rem; color: var(--muted); text-decoration: none;
  transition: color var(--t);
}
.site-footer__spalte a:hover { color: var(--gold); }

.site-footer__kontakt dt {
  font-family: var(--font-display); font-size: .6875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-soft);
  margin-top: .875rem;
}
.site-footer__kontakt dt:first-child { margin-top: 0; }
.site-footer__kontakt dd { margin: .1875rem 0 0; font-size: .9375rem; color: var(--muted); }
.site-footer__kontakt address { font-style: normal; line-height: 1.6; }
.site-footer__kontakt a { color: var(--muted); text-decoration: none; transition: color var(--t); }
.site-footer__kontakt a:hover { color: var(--gold); }

.site-footer__base {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .8125rem; color: var(--muted-soft);
}

/* ------------------------------ Scroll-Reveal ----------------------------- */
/* Wird per IntersectionObserver freigeschaltet, kein Scroll-Listener. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
}