/* ==========================================================================
   AI-WORKS – Lionel Hansen
   Struktur & Motion nach dem Vorbild fynnroeber.com (Webflow/Client-First),
   neu gebaut in Vanilla CSS. Palette: tiefes Grün auf Weiß.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Schriften – beide lokal gehostet, keine externen Requests.
      Glancyr  → Überschriften und Zahlen (die Wortmarke ist ein Bild)
      DIN 2014 → Fließtext, Buttons, Navigation, Labels
      Aus den gekauften OTF-Dateien als Subset (Latin + Latin Ext-A +
      Interpunktion) nach woff2 konvertiert. Eingebunden sind nur die
      Schnitte, die die Seite tatsächlich nutzt.
      Achtung: Glancyr endet bei Bold – im ganzen Stylesheet ist 700 die
      schwerste Stufe, es gibt bewusst kein font-weight: 800.
   -------------------------------------------------------------------------- */

/* Fließtext ------------------------------------------------------------ */
@font-face {
  font-family: "DIN 2014";
  src: url("fonts/DIN2014-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Demi deckt 500 und 600 ab – DIN 2014 hat dazwischen keinen Schnitt */
@font-face {
  font-family: "DIN 2014";
  src: url("fonts/DIN2014-Demi.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN 2014";
  src: url("fonts/DIN2014-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Überschriften -------------------------------------------------------- */
@font-face {
  font-family: "Glancyr";
  src: url("fonts/Glancyr-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Glancyr";
  src: url("fonts/Glancyr-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marke */
  --primary:        #0E6B63;   /* Petrolgrün – Ankersektionen, Buttons */
  --primary-deep:   #0A4E48;   /* dunkles Petrol – Verläufe, Nav */
  --accent:         #14837A;   /* helles Petrol – Hover, Icons, Linien */
  --accent-bright:  #3CBBAC;   /* nur für Glows und Hairlines */
  --ink:            #171F1E;   /* Anthrazit mit Petrolstich – Fließtext */
  --ink-soft:       #4F605E;   /* Sekundärtext auf Weiß */
  --white:          #FFFFFF;
  --paper:          #F3F8F7;   /* minimal abgesetztes Weiß für Karten */
  --hairline:       #DEE9E7;
  --hairline-strong:#C7D9D6;   /* etwas kräftiger – Karten auf Weiß */
  --star:           #E4B10A;
  --negative:       #B4463C;   /* gedecktes Ziegelrot – nur für „brauchst du nicht" */

  /* Typo */
  --font-body: "DIN 2014", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-head: "Glancyr", "DIN 2014", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Raster – entspricht Client-First padding-global / container / section */
  --pad-global: 10%;
  --container:  80rem;
  --section-y:  3.75rem;
  --radius:     12px;
  --radius-lg:  20px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 991px) {
  :root { --pad-global: 5%; --section-y: 3.25rem; }
}
@media (max-width: 767px) {
  :root { --section-y: 2.5rem; }
}
@media (max-width: 479px) {
  :root { --pad-global: 5%; }
}

/* --------------------------------------------------------------------------
   2. Reset & Basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

/* Sobald das sanfte Scrollen aus main.js läuft, übernimmt es auch die
   Sprungmarken. Zwei Animationen übereinander würden sich verhaken. */
html.smooth-js { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--primary); color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout-Primitives (Client-First-Äquivalente)
   -------------------------------------------------------------------------- */
.padding-global {
  position: relative;
  z-index: 20;
  padding-left: var(--pad-global);
  padding-right: var(--pad-global);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.container--narrow { max-width: 52rem; }

.section-y {
  position: relative;
  z-index: 20;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.section-y--tight { padding-top: 3rem; }

.stack-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.max-w-head { max-width: 52rem; }
.max-w-text { max-width: 44rem; }

/* Hält Wortgruppen zusammen – vor allem den Markennamen AI-WORKS, der
   sonst am Bindestrich umbricht. */
.nobr { white-space: nowrap; }

/* ADMIND im Fließtext: statt des Wortes ein kleiner anklickbarer Knopf mit
   der Wortmarke. Alle Maße in em, damit er sich der Textgröße anpasst –
   er steht in Sätzen unterschiedlicher Größe. */
.admind {
  display: inline-flex;
  align-items: center;
  /* hebt den Knopf auf die Schriftlinie. Gemessen: bei -.22em saß er
     0,2 em zu tief, bei -.02em liegt seine Mitte auf der Textmitte. */
  vertical-align: -.02em;
  padding: .2em .5em;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: rgba(20, 131, 122, .06);
  /* verhindert, dass der Knopf die Zeilenhöhe des Absatzes aufbläht */
  line-height: 1;
  white-space: nowrap;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}

.admind img {
  display: block;
  height: .62em;
  width: auto;
  opacity: .85;
  transition: opacity .2s var(--ease);
}

.admind:hover {
  border-color: var(--accent);
  background: rgba(20, 131, 122, .12);
}

.admind:hover img { opacity: 1; }

.admind:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Hervorhebung innerhalb einer Überschrift.
   Glancyr endet bei Bold, und 700 steht in den Überschriften schon –
   fetter geht also nicht. Die Betonung kommt deshalb über etwas mehr
   Größe, nicht über mehr Gewicht. */
.h1 .em,
.h2 .em,
.h3 .em { font-size: 1.14em; }

/* --------------------------------------------------------------------------
   3b. Linienband im Hintergrund
   -------------------------------------------------------------------------- */
/* Senkrechte Haarlinien, über die beim Scrollen helle Abschnitte nach unten
   wandern. Der Trick: die Linien selbst sind gleichförmig, sichtbar wird nur,
   was die Maske freigibt – und die verschiebt sich mit.
   Bewegt wird per transform, nicht per background-position: das übernimmt
   die Grafikkarte und kostet beim Scrollen nichts. */
.rays {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  /* Im Hero liegt schon das diagonale Linienband. Zwei Muster übereinander
     wirken unruhig, deshalb blendet main.js diese Ebene erst danach ein. */
  opacity: var(--ray-op, 1);
}

.rays__move {
  position: absolute;
  left: 0;
  right: 0;
  top: -100%;
  height: 300%;
  background-image: repeating-linear-gradient(90deg,
    transparent 0 5.5rem,
    var(--ray-farbe, rgba(20, 131, 122, .085)) 5.5rem,
    var(--ray-farbe, rgba(20, 131, 122, .085)) calc(5.5rem + 1px));
  /* Die Maske erzeugt die wandernden Abschnitte. Ihre Länge (40rem) ist
     zugleich die Strecke, nach der sich das Muster wiederholt. */
  -webkit-mask-image: repeating-linear-gradient(180deg,
    transparent 0, rgba(0,0,0,.9) 14rem, rgba(0,0,0,.9) 22rem, transparent 40rem);
  mask-image: repeating-linear-gradient(180deg,
    transparent 0, rgba(0,0,0,.9) 14rem, rgba(0,0,0,.9) 22rem, transparent 40rem);
  transform: translate3d(0, var(--ray-y, 0px), 0);
  will-change: transform;
}

/* Ohne JS steht das Band still – das ist in Ordnung, es bleibt ein
   ruhiges Muster. Bei reduzierter Bewegung bleibt es ebenfalls stehen. */
@media (prefers-reduced-motion: reduce) {
  .rays__move { transform: none; }
}

/* --------------------------------------------------------------------------
   4. Sektions-Themes – die Seite ist durchgehend weiß.
      Tiefe entsteht über sehr zarte Grün-Glows, nicht über dunkle Flächen.
   -------------------------------------------------------------------------- */
.theme-light { background: var(--white); color: var(--ink); }

/* Radialer Grün-Hauch – helles Pendant zum roten Glow der Referenz.
   Die Ellipse läuft innerhalb der Sektion auf 0 aus, sonst entsteht an der
   Sektionsgrenze zum reinen Weiß eine sichtbare Kante. */
.theme-glow-bottom {
  background-image:
    radial-gradient(ellipse 78% 58% at 50% 80%,
      rgba(20, 131, 122, .13) 0%,
      rgba(20, 131, 122, .05) 45%,
      rgba(20, 131, 122, 0) 72%);
}

.theme-glow-top {
  background-image:
    radial-gradient(ellipse 78% 58% at 50% 20%,
      rgba(20, 131, 122, .12) 0%,
      rgba(20, 131, 122, .045) 45%,
      rgba(20, 131, 122, 0) 72%);
}
/* Früher leicht abgesetztes Weiß. Auf Wunsch durchgehend reines Weiß –
   hier ist der einzige Schalter, falls je wieder Kontrast gewünscht ist. */
.theme-paper { background: var(--white); color: var(--ink); }

/* Dunkle Sektion (Works-AI) --------------------------------------------------
   Die einzige dunkle Fläche der Seite. Sie ist kein Sektionshintergrund,
   sondern eine eigene Ebene: nur so liegt sie über dem festen Linienband
   und kann an den Rändern weich auslaufen. */
.theme-dark {
  position: relative;
  color: #fff;
  /* Länge des Übergangs oben und unten. Größer = die Seite wird langsamer
     dunkler, man scrollt länger durch den Verlauf. */
  --dunkel-lauf: 26vh;
}

/* Der Inhalt muss unterhalb des Verlaufs beginnen, sonst stünde die
   Überschrift im halbdunklen Bereich. */
.theme-dark .section-y {
  padding-top: calc(var(--dunkel-lauf) + 2rem);
  padding-bottom: calc(var(--dunkel-lauf) + 2rem);
}

@media (max-width: 767px) {
  .theme-dark { --dunkel-lauf: 17vh; }
}

.dunkel {
  position: absolute;
  /* Bleibt in den Grenzen der Sektion. Der Verlauf liegt in deren eigenem
     Innenabstand – so wird beim Scrollen über eine lange Strecke nach und
     nach dunkler, ohne dass Text der Nachbarsektionen im Verlauf landet
     und unlesbar wird. */
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(20, 131, 122, .28), transparent 70%),
    linear-gradient(180deg, #0A312E, #061F1D);
  /* Der Verlauf ist in absoluten Längen angegeben, nicht in Prozent –
     so ist er immer genau so lang wie der Überstand oben. */
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0,
    #000 var(--dunkel-lauf),
    #000 calc(100% - var(--dunkel-lauf)),
    transparent 100%);
  mask-image: linear-gradient(180deg,
    transparent 0,
    #000 var(--dunkel-lauf),
    #000 calc(100% - var(--dunkel-lauf)),
    transparent 100%);
}

/* Dieselben Linien wie im Rest der Seite, nur heller – auf Dunkel tragen
   sie mehr. Sie bewegen sich über dieselbe Variable, laufen also synchron. */
.dunkel__linien {
  position: absolute;
  left: 0;
  right: 0;
  top: -100%;
  height: 300%;
  background-image: repeating-linear-gradient(90deg,
    transparent 0 5.5rem,
    rgba(255, 255, 255, .13) 5.5rem,
    rgba(255, 255, 255, .13) calc(5.5rem + 1px));
  -webkit-mask-image: repeating-linear-gradient(180deg,
    transparent 0, rgba(0,0,0,.9) 14rem, rgba(0,0,0,.9) 22rem, transparent 40rem);
  mask-image: repeating-linear-gradient(180deg,
    transparent 0, rgba(0,0,0,.9) 14rem, rgba(0,0,0,.9) 22rem, transparent 40rem);
  transform: translate3d(0, var(--ray-y, 0px), 0);
  will-change: transform;
}

/* Der ADMIND-Knopf trägt eine dunkle Wortmarke – auf Dunkel verschwindet
   sie. brightness(0) invert(1) macht daraus eine weiße Silhouette. */
.theme-dark .admind {
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
}

.theme-dark .admind img { filter: brightness(0) invert(1); opacity: .9; }

.theme-dark .admind:hover {
  border-color: var(--accent-bright);
  background: rgba(255, 255, 255, .16);
}

.theme-dark .admind:hover img { opacity: 1; }

/* Schrift auf dunklem Grund ------------------------------------------------ */
.theme-dark .eyebrow { color: var(--accent-bright); }
.theme-dark .lead { color: rgba(255, 255, 255, .78); }
.theme-dark .hairline { opacity: .55; }

/* Die Verlaufs-Überschrift muss umgekehrt laufen: von Weiß ins helle Petrol. */
.theme-dark .h2 {
  background-image: radial-gradient(circle farthest-corner at 50% 130%,
    #FFFFFF 0%, var(--accent-bright) 100%);
}

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

/* --------------------------------------------------------------------------
   5. Typografie
   -------------------------------------------------------------------------- */
/* Vertrauens-Badge im Hero: minimal umrahmt, dünner grüner Haken links.
   inline-flex, damit die Pille nur so breit wird wie ihr Inhalt und in der
   zentrierten Spalte mittig sitzt. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.25rem;
  padding: .42rem .9rem .42rem .75rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  font-size: .82rem;
  line-height: 1;
  color: var(--ink);
}

.badge__check {
  flex: none;
  color: var(--accent);
}

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

/* Gradient-Headline – der Signature-Effekt der Referenz.
   Hell: Anthrazit → Grün. Dunkel: Weiß → gedämpftes Weißgrün. */
.h1, .h2, .h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.12;
  /* Glancyr ist geometrisch und läuft von Haus aus eng – Versalien
     brauchen hier neutrale bis leicht offene Laufweite, kein negatives Tracking. */
  letter-spacing: .005em;
  text-transform: uppercase;
  background-image: radial-gradient(circle farthest-corner at 50% 130%,
    var(--ink) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.h1 {
  font-size: clamp(1.85rem, 4.2vw, 3.25rem);
  /* „KI-Werbeanzeigenerstellung" ist ein Wort und passt auf schmalen
     Displays in keine Zeile. Die Seite ist als de-AT ausgezeichnet,
     der Browser trennt also nach deutschen Regeln.
     break-word greift nur, falls ein Browser keine Trennmuster hat –
     dann bricht er hart statt über den Rand zu laufen. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* Ein Satz pro Zeile. Auf schmalen Displays darf ein langer Satz
   trotzdem normal umbrechen. */
.h1 .line,
.h2 .line { display: block; }
.h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }
.h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: .02em; }

/* Karten-Überschriften bleiben solide – Gradient nur für Sektions-Headlines */
.card-title {
  margin: 0 0 .6rem;
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ink);
}

.lead {
  max-width: 46rem;
  margin: 0;
  font-size: 1.075rem;
  color: var(--ink-soft);
}

.body-sm { font-size: .95rem; color: var(--ink-soft); }

/* Feine Trennlinie über den Headlines – .sub_line der Referenz */
.hairline {
  width: 100%;
  max-width: 680px;
  height: 1px;
  margin: 0 auto 2.5rem;
  background-image: linear-gradient(90deg,
    transparent, var(--accent) 50%, transparent);
  opacity: .45;
}

.hairline--short { max-width: 240px; margin-bottom: 1.25rem; }

/* --------------------------------------------------------------------------
   6. Buttons – mehrschichtiger CTA mit unscharfen Farbbällen
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-block;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1.05rem;
  transition: transform .18s var(--ease);
}

.btn:active { transform: translateY(1px); }

/* Flach und ruhig: dünner grüner Rahmen, satte Markenfarbe, kein Glanz.
   Bewusst ohne Verlauf, ohne Innenlicht, ohne Schlagschatten. */
.btn__inner {
  display: block;
  padding: 1.05rem 2rem;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}

.btn:hover .btn__inner {
  background: var(--accent);
  border-color: var(--accent);
}

.btn__label { display: block; text-align: center; }

.btn--sm .btn__inner { padding: .7rem 1.35rem; }
/* Der Nav-Button darf nicht mitten im Wort umbrechen – das macht die
   ganze Kopfzeile höher. */
.btn--sm .btn__label { font-size: .95rem; white-space: nowrap; }

/* Sekundärer Button – outline */
.btn-ghost {
  display: inline-block;
  padding: 1rem 1.9rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--ink);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}

.btn-ghost:hover { border-color: var(--accent); background: var(--paper); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.75rem;
}

/* --------------------------------------------------------------------------
   7. Navigation – sticky Pill mit Blur
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 1rem;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: min(80%, 76rem);
  min-height: 4.5rem;
  margin: 1rem auto 0;
  padding: .55rem 1.25rem .55rem 1.75rem;
  border-radius: 1.25rem;
  /* Glaskachel wie das App-Icon, in Schichten nachgebaut (oberste zuerst):
     1 – grüner Randschimmer rechts
     2 – Sage-Fläche rechts, durch eine sehr hohe Ellipse weich gekrümmt
     3 – diagonaler Lichtstreif über der linken Hälfte
     4 – Grundton von hellweiß nach silbergrau
     Farbwerte aus dem Icon abgegriffen. Als Verlauf statt als Bild, damit
     die Diagonale beim Strecken auf die breite Pille nicht verzerrt. */
  background:
    /* 1 – schmaler grüner Rand rechts, wie der Lichtsaum am Icon */
    radial-gradient(ellipse 6% 130% at 100% 58%,
      rgba(198, 232, 146, .95) 0%, rgba(198, 232, 146, .45) 45%,
      rgba(198, 232, 146, 0) 78%),
    /* 2 – Sage-Wedge mit gekrümmter Kante */
    radial-gradient(ellipse 34% 165% at 108% 50%,
      rgba(155, 160, 150, .88) 0%, rgba(169, 174, 164, .82) 26%,
      rgba(186, 190, 179, .72) 52%, rgba(186, 190, 179, .4) 68%,
      rgba(186, 190, 179, 0) 76%),
    /* 3 – diagonaler Lichtstreif mit klarer Kante */
    linear-gradient(106deg,
      rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .95) 21%,
      rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 55%,
      rgba(255, 255, 255, .75) 56%, rgba(255, 255, 255, .1) 68%,
      rgba(255, 255, 255, 0) 72%),
    /* 4 – Grundton, leicht durchscheinend: zusammen mit dem backdrop-filter
       ergibt das Milchglas – der Inhalt darunter bleibt erahnbar. */
    linear-gradient(158deg,
      rgba(252, 251, 251, .82) 0%,
      rgba(239, 240, 238, .8) 48%,
      rgba(221, 224, 218, .82) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .85),
    inset 0 1px 1px rgba(255, 255, 255, .95),
    0 1px 0 rgba(0, 0, 0, .04),
    0 14px 34px rgba(14, 107, 99, .12),
    0 2px 10px rgba(164, 169, 160, .25);
  color: var(--ink);
  overflow: hidden;
}

@media (max-width: 991px) { .nav { width: 90%; min-height: 4rem; } }
@media (max-width: 479px) { .nav { width: 94%; } }

/* Marke ist jetzt eine Bilddatei – kein Text, keine Schrifteinstellungen */
.nav__left {
  display: flex;
  /* Unten bündig: der Vermerk sitzt auf der Grundlinie der Wortmarke,
     nicht auf halber Höhe daneben. */
  align-items: flex-end;
  gap: .6rem;
  flex: none;
  min-width: 0;
}

.nav__brand {
  display: flex;
  align-items: center;
  flex: none;
}

/* Agentur-Vermerk neben der Marke – bewusst klein und zurückgenommen,
   damit er die eigene Marke nicht bedrängt. */
.nav__by {
  display: flex;
  align-items: baseline;
  gap: .28rem;
  /* Feinjustierung, damit die Unterkanten optisch bündig liegen */
  padding-bottom: .08rem;
  font-size: .54rem;
  line-height: 1;
  color: var(--ink-soft);
  white-space: nowrap;
}

.nav__by-logo {
  display: block;
  width: auto;
  height: .52rem;
  opacity: .8;
  align-self: flex-end;
  transition: opacity .2s var(--ease);
}

/* Der Vermerk führt zu admind.dev. Der Hinweis darauf bleibt zurückhaltend:
   die Wortmarke wird beim Überfahren nur etwas kräftiger. */
a.nav__by { transition: color .2s var(--ease); }
a.nav__by:hover { color: var(--accent); }
a.nav__by:hover .nav__by-logo { opacity: 1; }

a.nav__by:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Auf schmalen Displays teilen sich Marke, Vermerk und Burger eine Zeile.
   Ohne diese Verkleinerung bricht die Kopfzeile auf zwei Zeilen um. */
@media (max-width: 560px) {
  /* Der 2rem-Abstand der Kopfzeile ist hier der größte Platzfresser */
  .nav { gap: 1rem; }
  .nav__left { gap: .55rem; }
  .nav__by { gap: .22rem; font-size: .52rem; }
  .nav__by-logo { height: .5rem; }
}

/* Unter ~340 px reicht der Platz nicht mehr für beide Marken. */
@media (max-width: 339px) {
  .nav__by { display: none; }
}

.nav__logo {
  display: block;
  width: auto;
  height: 1.4rem;   /* Breite ergibt sich aus dem Seitenverhältnis 455:120 */
}

@media (max-width: 479px) { .nav__logo { height: 1.25rem; } }

.nav__menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-left: auto;
}

.nav__links { display: flex; gap: 1.75rem; }

.nav__link {
  position: relative;
  font-size: .95rem;
  font-weight: 500;
  /* Dunkler als der übrige Sekundärtext: die rechten Menüpunkte liegen auf
     der Sage-Fläche der Glaskachel. Mit --ink-soft wären es dort nur
     3,1:1 Kontrast, mit --ink sind es 9,7:1. */
  color: var(--ink);
  /* Mehrwortige Menüpunkte dürfen nicht mitten im Namen umbrechen */
  white-space: nowrap;
  transition: color .2s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}

.nav__link:hover { color: var(--primary); }
.nav__link:hover::after { transform: scaleX(1); }

/* Burger */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 .6rem;
  border-radius: 10px;
}

.nav__burger span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}

.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Burger-Schwelle liegt über dem üblichen Tablet-Breakpoint: Marke,
   Agentur-Vermerk, fünf Menüpunkte und CTA brauchen zusammen mehr als
   1024 px Innenbreite. Gemessen, nicht geschätzt. */
@media (max-width: 1150px) {
  /* row-gap: 0 – das eingeklappte Menü liegt in einer eigenen Flex-Zeile.
     Ohne diese Null würde der 2rem-Abstand die Kopfzeile aufblähen,
     obwohl die Zeile selbst 0 hoch ist. */
  .nav { flex-wrap: wrap; row-gap: 0; }
  .nav__burger { display: flex; }
  .nav__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .35s var(--ease), opacity .25s var(--ease), padding .35s var(--ease);
  }
  .nav.is-open .nav__menu {
    max-height: 26rem;
    opacity: 1;
    padding: 1rem 0 1.25rem;
  }
  .nav__links { flex-direction: column; gap: 1rem; }
  .nav__menu .btn { width: 100%; }
  .btn--sm .btn__label { white-space: normal; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; margin-top: -5.5rem; padding-top: 5.5rem; }

/* Linienband hinter dem Hero-Inhalt. Liegt unter allem (.padding-global
   hat z-index 20) und fängt keine Klicks ab. */
.hero__lines {
  position: absolute;
  top: -6%;
  right: -12%;
  width: 118%;
  height: 116%;
  background: url("assets/pattern-lines.svg") no-repeat center;
  background-size: cover;
  opacity: 1;
  pointer-events: none;
  /* Zu den Rändern hin auslaufen, damit es nirgends hart abschneidet */
  -webkit-mask-image: radial-gradient(ellipse 88% 82% at 58% 40%, #000 52%, transparent 92%);
  mask-image: radial-gradient(ellipse 88% 82% at 58% 40%, #000 52%, transparent 92%);
}

@media (max-width: 767px) {
  .hero__lines { top: -2%; right: -40%; width: 175%; height: 70%; opacity: .7; }
}

.hero__inner { padding-top: 3.5rem; padding-bottom: 4rem; }

.hero .h1 { margin-bottom: 1.25rem; }

/* „KI-Werbeanzeigenerstellung" ist 26 Zeichen lang und passt bei voller
   Schriftgröße nicht in die sonst übliche Spaltenbreite von 52rem – dann
   trennt der Browser mitten im Wort. Nur im Hero mehr Breite geben. */
.hero .max-w-head { max-width: 64rem; }

.hero__sub {
  max-width: 40rem;
  margin: 0 auto;
  font-size: 1.1rem;
  color: var(--ink-soft);
}

.hero__sub strong { color: var(--ink); font-weight: 600; }

/* Video-Platzhalter im 16:9-Format (Wistia-Slot der Referenz) */
.video-frame {
  position: relative;
  width: 100%;
  max-width: 56rem;
  margin: 3rem auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(60, 187, 172, .35), transparent 60%),
    linear-gradient(160deg, #0F544D, #06322D);
  box-shadow: 0 30px 80px rgba(8, 30, 23, .45),
              inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.video-frame__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 1.5rem;
}

.video-frame__play {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25),
              0 0 0 14px rgba(255, 255, 255, .05);
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}

.video-frame__play:hover { transform: scale(1.06); background: rgba(255, 255, 255, .18); }
.video-frame__play svg { margin-left: 4px; }

.video-frame__hint {
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

/* Vertrauensleiste unter dem Video */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 2.5rem;
  margin-top: 2.5rem;
  font-size: .9rem;
  color: var(--ink-soft);
}

.hero__trust li { display: flex; align-items: center; gap: .5rem; }
.hero__trust svg { flex: none; color: var(--accent); }

/* --------------------------------------------------------------------------
   9. Marquee – Endlosband
   -------------------------------------------------------------------------- */
.marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  flex: none;
  gap: 3.5rem;
  padding-right: 3.5rem;
  animation: marquee 32s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  flex: none;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  opacity: .55;
  white-space: nowrap;
  transition: opacity .25s var(--ease);
}

.marquee__item:hover { opacity: 1; }
.marquee__item svg { color: var(--accent); flex: none; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* --------------------------------------------------------------------------
   10. Karten-Raster
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 3.5rem;
}

.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 991px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
}

.card {
  padding: 1.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}

.card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(14, 107, 99, .09);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.25rem;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(20, 131, 122, .14), rgba(20, 131, 122, .05));
  color: var(--primary);
}

/* Vorteilskarten tragen statt des grünen Kastens nur einen dünnen Haken.
   Damit stehen alle vier Karten ruhiger nebeneinander. */
.card__check,
.card__cross {
  width: 1.3rem;
  height: 1.3rem;
  margin-bottom: 1rem;
}

.card__check { color: var(--accent); }

/* Kein Signalrot: der Ton ist gedeckt, damit er neben dem Grün nicht schreit. */
.card__cross { color: var(--negative); }

.card p { margin: 0; font-size: .95rem; color: var(--ink-soft); }

/* Kompakte Variante für das 8er-Raster */
.card--compact { padding: 1.5rem; }
.card--compact .card__icon { width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; }
.card--compact .card-title { font-size: 1rem; }
.card--compact p { font-size: .9rem; }

/* --------------------------------------------------------------------------
   11. Zahlen-Showcase (Counter)
   -------------------------------------------------------------------------- */
/* Drei Beispiele nebeneinander – bewusst nur eine Zahl pro Karte.
   Mehr Werte haben den Abschnitt unübersichtlich gemacht. */
.results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 860px)  { .results { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .results { grid-template-columns: 1fr; } }

.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 2.25rem 1.5rem;
  text-align: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 2px 10px rgba(14, 107, 99, .04);
}

.result__who {
  margin: 0;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.result__value {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--primary);
}

/* Spanne statt Einzelwert: „2.000–3.000 €" braucht mehr Platz als eine
   Zahl, deshalb eine Stufe kleiner – sonst bricht sie in der Karte um. */
.result__value--range { font-size: clamp(1.7rem, 2.9vw, 2.15rem); }

.result__note {
  margin: 0;
  max-width: 18rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Lionels Einordnung unter den Beispielen */
.result-quote {
  max-width: 42rem;
  margin: 3.5rem auto 0;
  text-align: center;
}

.result-quote blockquote { margin: 0; }

.result-quote p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink);
}

/* Anführungszeichen kommen aus dem Stylesheet, nicht aus dem Text –
   so bleibt das Zitat im Markup sauber. */
.result-quote p::before { content: "\201E"; }
.result-quote p::after  { content: "\201C"; }

.result-quote figcaption {
  margin-top: .85rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--accent);
}

.result-quote figcaption::before { content: "\2014\00A0"; }

.disclaimer {
  max-width: 50rem;
  margin: 2.5rem auto 0;
  font-size: .82rem;
  line-height: 1.6;
  text-align: center;
  color: var(--ink-soft);
  opacity: .8;
}

/* --------------------------------------------------------------------------
   11b. Aufnahme aus dem Tool
   -------------------------------------------------------------------------- */
.workflow {
  width: 100%;
  max-width: 64rem;
  margin: 2.5rem auto 0;
}

.workflow__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1668 / 1080;
  border-radius: var(--radius-lg);
  background: var(--primary-deep);
  box-shadow: 0 30px 80px rgba(8, 30, 23, .3),
              inset 0 0 0 1px rgba(255, 255, 255, .12);
}


/* --------------------------------------------------------------------------
   12. Steckkarten – Sticky-Stack
        Jede Karte klebt oben fest, die nächste schiebt sich darüber.
        Der Versatz kommt aus --i (im HTML gesetzt), so bleibt von jeder
        darunterliegenden Karte ein schmaler Rand sichtbar.
   -------------------------------------------------------------------------- */
.stack {
  --stack-top: 6.5rem;    /* Abstand zur klebenden Kopfzeile */
  --stack-step: 1.15rem;  /* sichtbarer Rand je Karte im Stapel */
  max-width: 52rem;
  margin: 2.5rem auto 0;
  /* Scroll-Strecke, damit die Karten nach oben wandern können. Sieht in
     einem Standbild wie eine Lücke aus, ist aber der Auslauf des Effekts.
     Achtung: schon dieser Wert reicht nicht ganz — die letzten beiden
     Karten kommen oben nicht an. Mehr Strecke hieße mehr Leerraum. */
  padding-bottom: 4rem;
}

.stack__item {
  position: sticky;
  top: calc(var(--stack-top) + var(--i) * var(--stack-step));
  padding-bottom: 1.5rem;
}

.stack__card {
  position: relative;
  min-height: 15rem;
  padding: 2.25rem 2.5rem;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  /* Deckend, sonst scheinen die Karten darunter durch */
  background: var(--white);
  box-shadow: 0 2px 4px rgba(14, 107, 99, .04),
              0 18px 40px rgba(14, 107, 99, .09);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  transform-origin: top center;
}

/* Karten, die bereits überdeckt sind, treten leicht zurück */
.stack__item.is-stacked .stack__card {
  transform: scale(.975);
  box-shadow: 0 1px 3px rgba(14, 107, 99, .05);
}

.stack__no {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .9rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}

.stack__no span {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: rgba(20, 131, 122, .1);
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--primary);
}

.stack__title {
  margin: 0 0 .75rem;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--ink);
}

.stack__card p:last-child {
  margin: 0;
  max-width: 40rem;
  color: var(--ink-soft);
}

@media (max-width: 767px) {
  .stack { --stack-top: 5.5rem; --stack-step: .8rem; padding-bottom: 4rem; }
  .stack__card { min-height: 13rem; padding: 1.75rem 1.5rem; }
}

/* --------------------------------------------------------------------------
   13. Testimonial-Wall
   -------------------------------------------------------------------------- */
.wall {
  columns: 3;
  column-gap: 1.25rem;
  margin-top: 3.5rem;
}

@media (max-width: 991px) { .wall { columns: 2; } }
@media (max-width: 640px) { .wall { columns: 1; } }

.quote {
  break-inside: avoid;
  margin-bottom: 1.25rem;
  padding: 1.6rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--white);
}

.quote__stars { display: flex; gap: 2px; margin-bottom: .85rem; color: var(--star); }

.quote__title {
  margin: 0 0 .5rem;
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
}

.quote p { margin: 0; font-size: .94rem; color: var(--ink-soft); }

.quote__author {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
}

.quote__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent), var(--primary));
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}

.quote__name { font-size: .9rem; font-weight: 600; color: var(--ink); }
.quote__role { font-size: .8rem; color: var(--ink-soft); }

/* Hinweis-Banner für Platzhalterinhalte */
.placeholder-note {
  max-width: 44rem;
  margin: 2rem auto 0;
  padding: .85rem 1.15rem;
  border: 1px dashed var(--accent);
  border-radius: 10px;
  background: rgba(20, 131, 122, .06);
  font-size: .85rem;
  text-align: center;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   14. Leistungspaket (3 Säulen)
   -------------------------------------------------------------------------- */
.pillar {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 4px 18px rgba(14, 107, 99, .05);
}

.pillar__intro { margin: 0; font-size: .95rem; color: var(--ink-soft); }

.pillar__no {
  font-family: var(--font-head);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--hairline-strong);
  margin-bottom: 1.25rem;
}

.pillar ul { margin-top: 1.25rem; display: grid; gap: .6rem; }

.pillar li {
  display: flex;
  gap: .6rem;
  font-size: .92rem;
  color: var(--ink-soft);
}

.pillar li svg { flex: none; margin-top: .28rem; color: var(--accent); }
/* Der Text liegt in einem eigenen Element, sonst würde ein darin
   stehender Knopf zum eigenen Flex-Element und zusammengedrückt. */
.pillar li > span { min-width: 0; }

/* --------------------------------------------------------------------------
   15. Über mich
   -------------------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 3.5rem;
  align-items: center;
}

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

.about__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(60, 187, 172, .4), transparent 60%),
    linear-gradient(160deg, #135A53, #093F3A);
  box-shadow: 0 24px 60px rgba(14, 107, 99, .18);
}

.about__portrait span {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.25rem;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  background: linear-gradient(180deg, transparent, rgba(8, 30, 23, .8));
}

/* Gestapelt liegt das Portrait quer, sonst füllt es die halbe Seite.
   Muss nach der Basisregel stehen, sonst gewinnt diese. */
@media (max-width: 860px) {
  .about__portrait { aspect-ratio: 16 / 9; }
}

.about__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}

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

.about__fact strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--primary);
}

.about__fact span { font-size: .85rem; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 52rem; margin: 3.5rem auto 0; }

.faq__item {
  border-bottom: 1px solid var(--hairline);
}

.faq__item:first-child { border-top: 1px solid var(--hairline); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.5rem 0;
  text-align: left;
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  transition: color .2s var(--ease);
}

.faq__q:hover { color: var(--accent); }

.faq__plus {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

.faq__plus::before,
.faq__plus::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: translateY(-50%);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}

.faq__plus::after { transform: translateY(-50%) rotate(90deg); }

.faq__item.is-open .faq__plus::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .4s var(--ease);
}

.faq__a p {
  margin: 0;
  padding: 0 3rem 1.75rem 0;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   16b. Opt-in-Formular – Name + E-Mail, dann kommt das Videotraining
   -------------------------------------------------------------------------- */
.optin {
  width: 100%;
  max-width: 34rem;
  margin: 2.25rem auto 0;
  text-align: left;
}

.optin__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}

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

.optin__field { display: block; }

.optin__label {
  display: block;
  margin-bottom: .4rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
}

.optin__input {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .85);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.optin__input::placeholder { color: #9AA49E; }

.optin__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(20, 131, 122, .14);
}

/* Rot erst zeigen, wenn wirklich abgeschickt wurde – nicht beim Tippen */
.optin.is-checked .optin__input:invalid {
  border-color: #B4551E;
  box-shadow: 0 0 0 3px rgba(180, 85, 30, .12);
}

/* Der Absende-Button ist ein <button>, kein <a> – Browser-Defaults abräumen */
.optin__submit {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.optin__hint {
  min-height: 1.25rem;
  margin: .75rem 0 0;
  font-size: .85rem;
  text-align: center;
  color: #B4551E;
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.footer { color: var(--ink-soft); border-top: 1px solid var(--hairline); }

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  padding-bottom: 3rem;
}

.footer__links { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-left: auto; }

.footer__links a { font-size: .95rem; transition: color .2s var(--ease); }
.footer__links a:hover { color: var(--primary); }

.footer__social { display: flex; gap: .75rem; }

.footer__social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}

.footer__social a:hover { border-color: var(--accent); background: var(--paper); }

.footer__divider { height: 1px; background: var(--hairline); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  padding-top: 1.75rem;
  font-size: .85rem;
  color: var(--ink-soft);
}

.footer__bottom a:hover { color: var(--primary); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-left: auto; }

/* Agentur-Signatur ---------------------------------------------------------
   Eigene, mittig gesetzte Zeile ganz unten. Die Kachel ist auf Weiß nur durch
   eine Haarlinie angedeutet und hebt sich erst beim Überfahren leicht ab. */
.footer__agency {
  display: flex;
  justify-content: center;
  padding-top: 2.25rem;
}

.agency {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .68rem 1.15rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--white);
  line-height: 1;
  transition:
    border-color .25s var(--ease),
    background-color .25s var(--ease),
    transform .25s var(--ease),
    box-shadow .25s var(--ease);
}

.agency:hover {
  border-color: var(--hairline-strong);
  background: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -16px rgba(14, 107, 99, .45);
}

.agency:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.agency__label {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .25s var(--ease);
}

.agency:hover .agency__label { color: var(--accent); }

.agency__sep {
  width: 1px;
  height: .85rem;
  background: var(--hairline-strong);
}

/* Wortmarke und Pfeil gehören zusammen – als Gruppe brechen sie beim
   Umbruch gemeinsam um, statt der Pfeil allein. */
.agency__mark {
  display: inline-flex;
  align-items: center;
  /* Die Wortmarke endet bündig am Bildrand – ohne diesen Abstand
     klebt der Pfeil am „D". */
  gap: .32rem;
}

.agency__logo {
  display: block;
  width: auto;
  height: .7rem;   /* Breite ergibt sich aus dem Seitenverhältnis 359:40 */
  opacity: .85;
  transition: opacity .25s var(--ease);
}

.agency:hover .agency__logo { opacity: 1; }

.agency__arrow {
  width: .72rem;
  height: .72rem;
  color: var(--ink-soft);
  transition: transform .25s var(--ease), color .25s var(--ease);
}

.agency:hover .agency__arrow {
  transform: translate(2px, -2px);
  color: var(--accent);
}

/* Auf schmalen Displays wird die Kachel schmaler statt zweizeilig. */
@media (max-width: 479px) {
  .footer__agency { padding-top: 1.75rem; }
  .agency { gap: .6rem; padding: .6rem .9rem; }
  .agency__label { font-size: .66rem; letter-spacing: .06em; }
}

/* Variante im Hero -----------------------------------------------------------
   Gegenstück zum Vertrauens-Badge über der Headline: gleiche Pillenform,
   nur etwas größer. Der Text steht hier in normaler Schreibweise, weil
   Versalien auf dieser Länge zu laut wirken. */
/* Steht über der Headline und soll dort auffallen: grün getönt statt weiß,
   damit die Kachel sich vom hellen Hintergrund absetzt. Bewusst getönt und
   nicht gefüllt – ein zweiter dunkler Block würde dem Haupt-Button
   „Videotraining freischalten" die Aufmerksamkeit wegnehmen. */
.agency--hero {
  /* Eigene Zeile statt neben dem Vertrauens-Badge: als Block mit
     automatischen Seitenrändern steht die Kachel überall mittig allein. */
  display: flex;
  width: fit-content;
  margin: 0 auto 1.15rem;
  padding: .8rem 1.35rem;
  border-color: rgba(20, 131, 122, .3);
  background: rgba(20, 131, 122, .07);
}

.agency--hero:hover {
  border-color: rgba(20, 131, 122, .55);
  background: rgba(20, 131, 122, .12);
}

.agency--hero .agency__label {
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--primary);
}

.agency--hero:hover .agency__label { color: var(--primary); }

.agency--hero .agency__sep { background: rgba(20, 131, 122, .35); }
.agency--hero .agency__logo { opacity: 1; }
.agency--hero .agency__arrow { color: var(--accent); }

.agency--hero .agency__logo { height: .78rem; }
.agency--hero .agency__arrow { width: .78rem; height: .78rem; }
.agency--hero .agency__mark { gap: .4rem; }

/* Zwischenstufe: eine Zeile passt noch, aber knapper gesetzt. */
@media (max-width: 560px) {
  .agency--hero { gap: .55rem; padding: .7rem 1.05rem; }
  .agency--hero .agency__label { font-size: .82rem; }
  .agency--hero .agency__logo { height: .7rem; }
}

/* Auf dem Handy reicht die Breite für eine Zeile nicht mehr. Statt den Text
   zerfransen zu lassen, steht die Wortmarke bewusst darunter – aus der Pille
   wird dabei eine abgerundete Kachel. */
@media (max-width: 479px) {
  .agency--hero {
    flex-direction: column;
    gap: .5rem;
    padding: .8rem 1.1rem;
    border-radius: var(--radius-lg);
  }
  .agency--hero .agency__sep { display: none; }
  .agency--hero .agency__label { font-size: .84rem; }
  .agency--hero .agency__logo { height: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .agency,
  .agency__arrow { transition: none; }
  .agency:hover { transform: none; }
  .agency:hover .agency__arrow { transform: none; }
}

/* --------------------------------------------------------------------------
   18. Scroll-Reveal – opacity 0 + scale .95 → 1 (Signature der Referenz)
   -------------------------------------------------------------------------- */
/* Der versteckte Ausgangszustand gilt nur, wenn JS wirklich läuft.
   Ohne JS bleibt die Seite vollständig lesbar. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale3d(.96, .96, 1);
  transition:
    opacity .7s var(--ease),
    transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
}