/* ==========================================================================
   eliomediaa – Landingpage
   Corporate Identity:
     Anthrazit  #2B2E33  – dominante Fläche
     Off-White  #EAEAEA  – Text auf dunklem Grund
     Akzent-Blau #4D80AF – nur Akzente: CTAs, Links, Zahlen, Logo-Punkt
   Schrift: Helvetica Neue / Helvetica / Arial (Systemstack, kein Webfont-Download)
   ========================================================================== */

:root {
  --anthrazit:       #2B2E33;
  --anthrazit-dark:  #232529;
  --anthrazit-light: #34383E;
  --offwhite:        #EAEAEA;
  --muted:           #9AA1AA;
  --line:            #3E434A;
  --akzent:          #4D80AF;
  --akzent-hover:    #5D93C4;

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Auf großen Bildschirmen blieben bei 1140 px links und rechts je knapp
     300 px ungenutzt. 1280 füllt spürbar besser, ohne dass die Textzeilen zu
     lang zum Lesen werden – die Fließtexte sind ohnehin zusätzlich begrenzt. */
  --wrap: 1280px;
  --gap: 24px;
  --radius: 10px;
}

/* --- Reset / Basis ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--anthrazit);
  color: var(--offwhite);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

a { color: var(--akzent); text-decoration: none; }
a:hover { color: var(--akzent-hover); text-decoration: underline; }

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.1rem, 6vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* --- Layout -------------------------------------------------------------- */

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

section { padding: 80px 0; }
@media (min-width: 768px) { section { padding: 112px 0; } }

/* Ankersprünge dürfen nicht hinter dem klebenden Header landen. */
section[id] { scroll-margin-top: 74px; }

.section-alt { background: var(--anthrazit-dark); }

.eyebrow {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 14px;
}

.lead { font-size: 1.12rem; color: var(--muted); max-width: 62ch; }

.section-head { margin-bottom: 48px; max-width: 70ch; }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn-primary {
  background: var(--akzent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--akzent-hover);
  color: #fff;
  text-decoration: none;
}

.btn-ghost {
  background: transparent;
  color: var(--offwhite);
  border-color: var(--line);
}
.btn-ghost:hover {
  border-color: var(--offwhite);
  color: var(--offwhite);
  text-decoration: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(43, 46, 51, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-height: 74px;
}

/* Logo-Wortmarke: Mindestbreite 80px laut Markenrichtlinien, hier deutlich darüber. */
.logo img { width: 150px; height: auto; }

.nav {
  display: flex;
  gap: 30px;
  align-items: center;
}

.nav a {
  color: var(--offwhite);
  font-size: 0.95rem;
  font-weight: 500;
}
.nav a:hover { color: var(--akzent); text-decoration: none; }

.nav .btn { padding: 11px 20px; font-size: 0.92rem; }

/* --- Menü fürs Handy ------------------------------------------------------
   Ab 900 px steht die Navigation waagerecht im Kopf. Darunter versteckt sie
   sich hinter dem Knopf: Die Seite ist lang, ohne Sprungmarken müsste man
   sich alles erscrollen. */

.menue-knopf {
  display: none;
  width: 42px;
  height: 42px;
  padding: 11px 9px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
}
.menue-knopf span {
  display: block;
  height: 2px;
  background: var(--offwhite);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
/* Aus den drei Strichen wird beim Öffnen ein Kreuz. */
body.menue-offen .menue-knopf span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menue-offen .menue-knopf span:nth-child(2) { opacity: 0; }
body.menue-offen .menue-knopf span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 899px) {
  .menue-knopf { display: flex; }
  .logo img { width: 124px; }

  /* Beim Nachuntenwischen fährt die Kopfzeile aus dem Bild, beim Zurückwischen
     kommt sie sofort wieder – auf dem schmalen Schirm ist jede Zeile Platz
     wertvoll. Am Rechner bleibt sie dauerhaft stehen. */
  .site-header {
    transition: transform .25s ease;
    will-change: transform;
  }
  body.kopf-versteckt .site-header { transform: translateY(-100%); }

  .header-inner { position: relative; }

  .nav {
    position: absolute;
    top: 100%;
    /* 0 statt -20px: Sonst stehen die Einträge weiter links als das Logo. */
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 20px;
    background: var(--anthrazit);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(0,0,0,.45);
    /* Zugeklappt: unsichtbar und nicht antippbar. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  body.menue-offen .nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav a:not(.btn) {
    padding: 15px 2px;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line);
  }
}

/* Der CTA steht auf jeder Breite im Kopf – er ist der wichtigste Knopf der
   Seite und darf nicht hinter dem Menü verschwinden. */
.header-inner .kopf-cta { padding: 11px 20px; font-size: 0.92rem; }
@media (max-width: 899px) {
  .header-inner { gap: 10px; }
  .header-inner .kopf-cta {
    padding: 10px 13px;
    font-size: 0.8rem;
    white-space: nowrap;
    /* Ohne diese Zeile verteilt der Kopf seine drei Elemente gleichmäßig und
       der Knopf landet in der Mitte. So rückt er an den Menü-Knopf heran und
       beide bilden rechts eine Gruppe. */
    margin-left: auto;
  }
}
/* Auf sehr schmalen Geräten wird der Text kürzer, sonst bricht die Zeile. */
@media (max-width: 400px) {
  .logo img { width: 104px; }
  .header-inner .kopf-cta { font-size: 0.75rem; padding: 10px 11px; }
}

/* --- Einklappbare Aufzählungen -------------------------------------------
   Auf dem Handy zugeklappt, ab 760 px per Skript geöffnet. */

details.klapp { margin: 0; }
details.klapp > summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 24px;
}
details.klapp > summary::-webkit-details-marker { display: none; }
details.klapp > summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--akzent);
  line-height: 1;
}
details.klapp[open] > summary::after { content: "–"; }

/* Zugeklappt fehlt die Liste als Abstandhalter – sonst klebt der Knopf darunter. */
details.klapp:not([open]) > summary { margin-bottom: 26px; }

/* Am Rechner ist ohnehin alles offen – dort soll der Knopf nicht ablenken. */
@media (min-width: 760px) {
  details.klapp > summary { cursor: default; padding-right: 0; }
  details.klapp > summary::after { display: none; }
}

.services-summary {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
@media (min-width: 760px) {
  .services-summary { display: none; }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 92px 0 84px;
  overflow: hidden;
}
@media (min-width: 768px) { .hero { padding: 140px 0 120px; } }

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg video,
.hero-bg .media-slot {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Abdunklung, damit der Text auf jedem Video lesbar bleibt. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(35,37,41,.95) 0%, rgba(35,37,41,.86) 45%, rgba(35,37,41,.62) 100%);
}

.hero .wrap { position: relative; z-index: 1; }
.hero h1 { max-width: 16ch; }
.hero .lead { font-size: 1.2rem; color: #C9CFD6; max-width: 54ch; }

/* Der Verkaufsbeleg steht über den Zahlen und bekommt mehr Gewicht als sie:
   Eine Aufrufzahl beeindruckt, ein verkauftes Auto überzeugt. */
.hero-beleg {
  margin: 44px 0 0;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--akzent);
  max-width: 54ch;
}
.hero-beleg p {
  margin: 0;
  font-size: 1.16rem;
  line-height: 1.5;
  color: var(--offwhite);
}
.hero-beleg cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 0.88rem;
  color: var(--muted);
}
@media (max-width: 699px) {
  .hero-beleg {
    margin-top: 34px;
    /* Im Hero ist auf dem Handy alles mittig – ein linker Balken bräche das.
       Deshalb hier oben statt links. */
    padding: 16px 0 0;
    border-left: 0;
    border-top: 3px solid var(--akzent);
    margin-left: auto;
    margin-right: auto;
  }
  .hero-beleg p { font-size: 1.04rem; }
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
  margin-top: 52px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.hero-stats .stat-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--akzent);
  line-height: 1.1;
}
.hero-stats .stat-label {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 4px;
}

/* --- Trust-Leiste -------------------------------------------------------- */

.trust {
  padding: 28px 0 30px;
  border-bottom: 1px solid var(--line);
  background: var(--anthrazit-dark);
}
/* Label und Laufband nebeneinander: dadurch bleibt der Abstand zwischen
   Beschriftung und Firmennamen immer gleich, statt mit der Animation zu
   wandern. Erst auf schmalen Schirmen rutscht das Label darüber. */
.trust-inner {
  display: grid;
  gap: 12px 28px;
  /* Beide Kanten auf der Fluchtlinie des übrigen Seiteninhalts. Vorher lief das
     Band rechts bis zum Fensterrand, begann links aber erst an der Inhaltskante
     – auf breiten Schirmen sah das aus, als hinge die Zeile schief. */
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 760px) {
  .trust-inner {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0 28px;
  }
}
.trust-label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}
/* Laufband: die Kundennamen ziehen langsam von links nach rechts durch.
   Die Spur enthält die Namen zweimal; die Animation verschiebt sie um genau
   eine Gruppenbreite, dadurch springt beim Neustart nichts. */
.ticker {
  overflow: hidden;
  /* Weiche Kante an beiden Enden – das Band endet jetzt innerhalb der Spalte,
     ohne Ausblendung wirkten die Namen dort abgeschnitten. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 94%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-lauf 52s linear infinite;
}
/* Beim Überfahren anhalten, sonst sind die Links kaum zu treffen. */
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track { animation-play-state: paused; }

.ticker-group {
  display: flex;
  align-items: center;
  gap: 52px;
  padding-right: 52px;
}
.ticker-group a {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--offwhite);
  text-decoration: none;
  white-space: nowrap;
}
.ticker-group a:hover { color: var(--akzent); }

@keyframes ticker-lauf {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Ohne Bewegung: normale, umbrechende Liste statt Laufband. */
@media (prefers-reduced-motion: reduce) {
  .trust-inner { grid-template-columns: 1fr; gap: 12px 0; padding-right: 20px; }
  .ticker { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .ticker-track { animation: none; width: auto; }
  .ticker-group { flex-wrap: wrap; gap: 12px 34px; padding-right: 0; }
  .ticker-group[aria-hidden="true"] { display: none; }
}

/* --- Karten / Raster ----------------------------------------------------- */

.grid { display: grid; gap: var(--gap); }
@media (min-width: 760px)  { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--anthrazit-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
}

.card-featured { border-color: var(--akzent); }

.card .tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 12px;
}

.card .price {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 1.05rem;
  font-weight: 700;
}
.card .price span { color: var(--akzent); }

/* --- Preiskarten --------------------------------------------------------- */

.group-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 64px 0 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.group-title:first-of-type { margin-top: 0; }

.price-card { position: relative; display: flex; flex-direction: column; }

.badge {
  position: absolute;
  top: -13px;
  left: 28px;
  background: var(--akzent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 99px;
}

.plan-name {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.plan-price {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--offwhite);
}
.plan-price .per {
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted);
  margin-left: 4px;
}

.plan-volume {
  margin-top: 10px;
  font-weight: 700;
  color: var(--akzent);
}

.plan-desc { margin-top: 14px; color: #C9CFD6; }

.plan-includes {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 26px 0 0;
}

/* Der Button klebt bei unterschiedlich langen Karten immer unten. */
.price-card .btn { margin-top: auto; }
.price-card .check-list { margin-bottom: 28px; }

/* Tagessätze: Bezeichnung links, Preis rechts */
.rate-list { list-style: none; padding: 0; margin: 22px 0 0; }
.rate-list li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.rate-list li:last-child { border-bottom: 0; }
.rate-list .rate-value { font-weight: 700; color: var(--akzent); white-space: nowrap; }

/* Einzelleistungen als Preisleiste: feste Zahlen nebeneinander statt
   „ab“-Preisen mit Fußnote. */
.rate-strip {
  margin-top: 24px;
  padding: 26px 28px;
  background: var(--anthrazit-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 20px 40px;
}
@media (min-width: 900px) {
  .rate-strip { grid-template-columns: auto 1fr; align-items: center; }
}
.rate-strip-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.rate-strip-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 32px;
}
@media (min-width: 700px)  { .rate-strip-items { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .rate-strip-items { grid-template-columns: repeat(5, 1fr); } }

.rate-item-name {
  display: block;
  font-size: 0.86rem;
  color: var(--muted);
  margin-bottom: 4px;
}
.rate-item-price {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--offwhite);
  line-height: 1.1;
}

/* Zwischen-CTA nach den Preisen, für alle, die sich nicht zuordnen können. */
.unsure {
  margin-top: 40px;
  padding: 32px;
  border: 1px solid var(--akzent);
  border-radius: var(--radius);
  display: grid;
  gap: 24px;
  align-items: center;
}
@media (min-width: 820px) {
  .unsure { grid-template-columns: 1fr auto; gap: 40px; }
}
.unsure h3 { font-size: 1.5rem; margin-bottom: 10px; }
.unsure p { color: #C9CFD6; max-width: 62ch; }
.unsure .btn { white-space: nowrap; }

.price-note {
  margin-top: 32px;
  font-size: 0.92rem;
  color: var(--muted);
  max-width: 78ch;
}

/* Häkchen-Listen */
.check-list { list-style: none; padding: 0; margin: 18px 0 0; }
.check-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: #C9CFD6;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--akzent);
}

/* --- Ablauf-Schritte ----------------------------------------------------- */

.step-num {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--akzent);
  line-height: 1;
  margin-bottom: 14px;
}

/* --- Leistungsübersicht (im Ablauf-Abschnitt) ---------------------------- */

.services {
  margin-top: 72px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
}
.services-title { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 12px; }
.services-lead { color: var(--muted); max-width: 62ch; margin-bottom: 36px; }

.service-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px 48px;
}
@media (min-width: 800px) { .service-list { grid-template-columns: 1fr 1fr; } }

.service-list li {
  position: relative;
  padding-left: 34px;
  color: #C9CFD6;
  line-height: 1.5;
}
/* Weicher Punkt statt Häkchen – ruhiger als die Listen in den Preiskarten. */
.service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(77, 128, 175, 0.22);
  border: 1px solid rgba(77, 128, 175, 0.5);
}
.service-list strong { color: var(--offwhite); font-weight: 700; }

.services-note {
  margin-top: 34px;
  font-size: 0.92rem;
  color: var(--muted);
}

/* --- Case Studies -------------------------------------------------------- */

/* Jede Referenz bekommt das Bild ihres Unternehmens als eigenen Hintergrund.
   Das Bild trägt das Firmenlogo bereits in sich und ersetzt damit das frühere
   Querformat-Titelbild.

   Warum zwei Schichten statt eines einfachen background-image auf dem Band:
   Die Bilder sind 16:9, das Band ist deutlich höher. Mit "cover" auf der
   vollen Bandhöhe würde so stark in die Bildmitte gezoomt, dass Logo und
   Bildaufbau verschwinden. Darum liegt das Bild in einer eigenen Schicht mit
   gedeckelter Höhe oben im Band, darunter ein Verlauf in die Seitenfarbe. */
/* Der Stapel: Jedes Band bleibt kleben, sobald sein unterer Rand den unteren
   Bildschirmrand erreicht. Das folgende Band schiebt sich dann von unten
   darüber – beim Zurückscrollen läuft es rückwärts.

   Der Haltepunkt steht nicht hier, sondern wird vom Skript je Band gesetzt:
   top = Bildschirmhöhe minus Bandhöhe, also ein negativer Wert. Damit läuft
   das Band erst vollständig durch und bleibt genau dann stehen, wenn sein
   unterer Rand den unteren Bildschirmrand erreicht.

   "bottom: 0" wäre der naheliegende Weg, ist aber falsch: Das zöge jedes Band
   sofort nach oben, alle drei lägen von Anfang an übereinander. */
.case-stapel { position: relative; }

/* Kennzeichnung der künstlich erzeugten Titelbilder. Sie sitzt an der unteren
   Kante des Bildes, wo der Verlauf ohnehin schon dunkel ist – gut lesbar, ohne
   das Motiv zu zerschneiden. Ein Hinweis nur im Impressum wäre zwar formal
   erfüllt, aber praktisch übersieht ihn jeder. */
.ki-hinweis {
  position: absolute;
  top: calc(var(--bildhoehe) - 28px);
  right: 20px;
  z-index: 2;
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(234, 234, 234, 0.6);
  pointer-events: none;
}
@media (max-width: 699px) {
  .ki-hinweis { right: 14px; font-size: 0.64rem; top: calc(var(--bildhoehe) - 22px); }
}

.footer-ki { color: var(--muted); }

.case-band {
  --bildhoehe: min(56.25vw, 560px);
  position: relative;
  isolation: isolate;
  padding-bottom: 56px;
  /* Deckend sein ist Pflicht – sonst schiene das darunterliegende Band durch
     die freien Flächen hindurch. */
  background: var(--anthrazit);
  border-top: 1px solid var(--line);
  /* Abgerundete Oberkante und Schlagschatten nach oben: Daran erkennt man,
     dass das Band über dem vorherigen liegt und nicht daneben. */
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -20px 44px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* Verweildauer zwischen den Firmen: Ohne diesen Abstand beginnt die nächste
   Firma in dem Moment aufzusteigen, in dem die vorherige stehen bleibt – die
   Reels ganz unten im Band wären dann sofort wieder verdeckt. Der Abstand
   liegt unterhalb des Bildschirmrands und ist deshalb nie als Lücke zu sehen;
   er sorgt nur dafür, dass man ein gutes Stück weiterscrollen kann, während
   das Band still steht. */
.case-stapel.stapel-aktiv > .case-band:not(:last-child) { margin-bottom: 46vh; }

/* Geklebt wird erst, wenn das Skript die Haltepunkte gesetzt hat. Ohne
   JavaScript stünden die Bänder sonst mit top: 0 fest und ihr unterer Teil
   wäre nie zu sehen – dann lieber schlicht untereinander. */
.case-stapel.stapel-aktiv > .case-band { position: sticky; }

/* Das erste Band braucht die Rundung nicht – über ihm liegt nichts. */
.case-stapel > .case-band:first-child {
  border-radius: 0;
  box-shadow: none;
}
.case-band::before,
.case-band::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--bildhoehe);
}
.case-band::before {
  background-image: var(--case-bg);
  border-radius: inherit;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: -2;
}
/* Der Verlauf lässt das Bild nach unten in die Seitenfarbe auslaufen, damit
   es keine harte Kante zum Inhalt gibt. */
.case-band::after {
  background: linear-gradient(180deg,
    rgba(28, 30, 34, 0.14) 0%,
    rgba(28, 30, 34, 0.30) 48%,
    rgba(28, 30, 34, 0.86) 86%,
    var(--anthrazit) 100%);
  z-index: -1;
}
.case-band > * {
  position: relative;
  z-index: 1;
}

/* Der Inhalt beginnt unterhalb des Bildes. */
.case-band .case {
  border-top: none;
  padding-top: var(--bildhoehe);
}

/* Der Inhalt steht vollständig unterhalb des Bildes, deshalb braucht der Text
   keine eigene Fläche zur Abgrenzung – er säße sonst als Kasten im Nichts. */

@media (max-width: 699px) {
  /* Kein Abstand zwischen den Bändern – sie liegen übereinander, ein Spalt
     wäre beim Überschieben als Naht zu sehen. */
  .case-band { padding-bottom: 40px; }
}

.case { border-top: 1px solid var(--line); }

.case-grid { display: grid; gap: 40px; align-items: start; }
/* Ohne das dürfen die Rasterspalten so breit werden wie ihr Inhalt. Die
   Reel-Reihe ist in voller Länge über 3000 px breit – die Spalte würde
   ausbrechen und die Textspalte zusammenquetschen. */
.case-grid > * { min-width: 0; }
.reel-carousel { max-width: 100%; }
@media (min-width: 900px) {
  .case-grid {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    /* Text- und Medienspalte sind je nach Kunde unterschiedlich lang – mal ist
       der Text länger, mal die Videos. Gleiche Höhen gäbe es nur durch
       Beschneiden oder Verzerren. Mittig zueinander gesetzt wirken beide
       ausgewogen, statt dass eine Spalte unten heraushängt. */
    align-items: center;
  }
}

/* Gestapelt gehört die Überschrift nach oben. Ohne diese Umkehrung folgen bei
   Trinita die Videos direkt auf die des vorherigen Kunden – man weiß dann
   nicht mehr, zu wem sie gehören. */
@media (max-width: 899px) {
  .case-grid.medien-zuerst > div:first-child { order: 2; }
}

.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 32px 0;
}
@media (min-width: 560px) { .metrics { grid-template-columns: repeat(3, 1fr); } }

.metric {
  border-left: 3px solid var(--akzent);
  padding-left: 16px;
}
.metric .m-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}
.metric .m-label {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 4px;
}

blockquote.quote {
  margin: 0;
  padding: 30px 32px;
  background: var(--anthrazit-light);
  border-left: 3px solid var(--akzent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
blockquote.quote .quote-lead {
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 14px;
}
blockquote.quote p { color: #C9CFD6; }
blockquote.quote cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--muted);
}

/* --- Medien-Slots -------------------------------------------------------- */
/* Solange keine Datei hinterlegt ist, bleibt der beschriftete Platzhalter
   sichtbar. Sobald das Video/Bild lädt, deckt es ihn vollständig ab.        */

.media-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--anthrazit-light);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.media-slot > video,
.media-slot > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.media-slot .slot-hint {
  position: absolute;
  z-index: 0;
  padding: 20px;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}
.media-slot .slot-hint code {
  display: block;
  margin-top: 6px;
  color: var(--akzent);
  font-size: 0.8rem;
  word-break: break-all;
}

.media-slot > video[hidden],
.media-slot > img[hidden] { display: none; }

.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-9x16 { aspect-ratio: 9 / 16; }
.ratio-4x5  { aspect-ratio: 4 / 5; }

/* Die drei Reels stehen nicht nebeneinander, sondern hintereinander: eines
   groß in der Mitte, die Nachbarn schauen links und rechts hervor und sind
   abgedunkelt. Damit ist auf einen Blick klar, dass es mehrere Videos zum
   Durchwechseln sind – gewechselt wird per Wischen, Pfeil oder Punkt. */
.reel-carousel { position: relative; }

/* Am Rechner steht der Text neben den Reels, dort ist immer klar, worum es
   geht. Auf schmalen Bildschirmen ist er nach oben weggescrollt, sobald man
   bei den Videos ankommt – deshalb dort eine Beschriftung direkt darüber. */
.reel-hinweis { display: none; }
@media (max-width: 899px) {
  .reel-hinweis {
    display: block;
    margin: 26px 0 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

.reel-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Wichtig: Die stillen Sprünge des Endlos-Umlaufs dürfen nicht animiert
     werden, sonst sieht man sie. Das weiche Scrollen beim Klick auf Pfeil
     oder Punkt wird stattdessen einzeln angefordert. */
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.reel-row::-webkit-scrollbar { display: none; }

.reel-row > .media-slot {
  flex: 0 0 55%;
  scroll-snap-align: center;
}

/* Am Rechner richtet sich die Höhe nach dem Text daneben. Die Klasse und der
   Wert kommen aus dem Skript – ohne JavaScript bleibt es beim Maß oben. */
@media (min-width: 900px) {
  .case-grid.reel-nach-text .reel-row > .media-slot {
    flex: 0 0 auto;
    height: var(--reel-hoehe);
    width: calc(var(--reel-hoehe) * 9 / 16);
  }
  /* Die Breite des Fensters wird an die Kachel gekoppelt. Sonst schauen die
     Nachbarn je nach Textlänge mal 13, mal 53 Prozent hervor – bei kurzem
     Text wird die Kachel schmal, das Fenster bliebe aber spaltenbreit. */
  .case-grid.reel-nach-text .reel-carousel {
    max-width: calc(var(--reel-hoehe) * 9 / 16 * 1.66);
    margin-left: auto;
    margin-right: auto;
  }
}

/* Die Abdunklung der Nachbarn hängt an einer Klasse, die das Skript setzt.
   Ohne JavaScript bliebe sonst jede Kachel blass. */
.reel-row.karussell-bereit > .media-slot {
  transform: scale(0.9);
  opacity: 0.45;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.reel-row.karussell-bereit > .media-slot.ist-aktiv {
  transform: scale(1);
  opacity: 1;
}

/* Pfeile – am Rechner sichtbar, auf dem Handy genügt das Wischen. */
.reel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(22, 24, 28, 0.85);
  color: var(--offwhite);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.reel-nav:hover {
  background: var(--anthrazit-light);
  border-color: var(--akzent);
}
.reel-nav:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}
.reel-nav.zurueck { left: -8px; }
.reel-nav.vor { right: -8px; }

/* Punkte als Standanzeige: Sie zeigen, wie viele Reels es gibt und bei
   welchem man gerade ist. */
.reel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.reel-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}
.reel-dot:hover { background: var(--muted); }
.reel-dot.ist-aktiv {
  width: 22px;
  border-radius: 4px;
  background: var(--akzent);
}
.reel-dot:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}

@media (max-width: 699px) {
  .reel-row {
    gap: 12px;
    /* Über die Ränder hinaus, damit das aktive Reel wirklich mittig im Bild
       sitzt und die Nachbarn an beiden Seiten hervorschauen. */
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .reel-row > .media-slot { flex: 0 0 70%; }
  .reel-nav { display: none; }
}

/* Wer Bewegung abbestellt hat, bekommt den Wechsel ohne Überblendung. */
@media (prefers-reduced-motion: reduce) {
  .reel-row.karussell-bereit > .media-slot,
  .reel-nav,
  .reel-dot { transition: none; }
}

/* --- Über mich ----------------------------------------------------------- */

.about-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 860px) {
  .about-grid { grid-template-columns: 380px 1fr; gap: 56px; }
}

/* --- FAQ ----------------------------------------------------------------- */

/* Die Fragen brauchen keine 1140 Pixel – lange Zeilen liest niemand gern.
   Statt den Block links stehen zu lassen und rechts 378 Pixel leer, steht die
   schmalere Spalte mittig. Überschrift und Fragen teilen sich dieselbe Spalte,
   damit beide auf einer Kante beginnen. */
#faq .wrap { max-width: 860px; }


.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 44px 22px 0;
  position: relative;
  font-size: 1.08rem;
  font-weight: 700;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--akzent);
  line-height: 1;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item .faq-body {
  padding: 0 0 24px;
  color: #C9CFD6;
  max-width: 75ch;
}

/* --- CTA ----------------------------------------------------------------- */

.cta { background: var(--anthrazit-dark); text-align: center; }
.cta .wrap { max-width: 780px; }
.cta .lead { margin: 0 auto; }
.cta .btn-row { justify-content: center; }

/* Terminbuchung als Zwei-Klick-Lösung: Der Google-Kalender wird erst nach
   ausdrücklichem Klick geladen. Vorher geht keine Anfrage an Google – damit
   ist kein Einwilligungsbanner nötig. */
.calendar-box {
  margin-top: 40px;
  padding: 34px 30px;
  background: var(--anthrazit);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.calendar-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.calendar-note {
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 auto 22px;
}
/* Die Google-Buchungsseite ist hell gestaltet. Damit sie auf dem dunklen
   Hintergrund nicht wie ein Fehler wirkt, bekommt sie eine eigene helle
   Fläche mit etwas Luft ringsum. */
.calendar-box iframe {
  width: 100%;
  min-height: 640px;
  border: 0;
  border-radius: var(--radius);
  background: #fff;
}
@media (min-width: 768px) {
  .calendar-box iframe { min-height: 720px; }
}
.calendar-fallback {
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--muted);
}

.contact-direct {
  margin-top: 34px;
  font-size: 0.95rem;
  color: var(--muted);
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--anthrazit);
  border-top: 1px solid var(--line);
  padding: 56px 0 40px;
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  gap: 32px;
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
/* Logo braucht laut Markenrichtlinien eigenen Freiraum nach oben. */
.footer-logo img { width: 160px; height: auto; margin-bottom: 20px; }

.footer-grid h3 {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid a { color: var(--offwhite); }
.footer-grid a:hover { color: var(--akzent); }

.footer-bottom {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
}

/* --- Rechtstexte (Impressum / Datenschutz) ------------------------------- */

.legal { padding: 64px 0 88px; }
.legal .wrap { max-width: 760px; }
.legal h2 { font-size: 1.4rem; margin-top: 44px; }
.legal h3 { font-size: 1.05rem; margin-top: 30px; }
.legal p, .legal li { color: #C9CFD6; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }

/* --- TODO-Marker ---------------------------------------------------------
   Alles, wofür mir noch eine Angabe von Elias fehlt. Im Browser deutlich
   sichtbar, im Code per `grep -rn "todo"` auffindbar. Vor dem Livegang
   müssen ALLE verschwunden sein.
   ------------------------------------------------------------------------- */

.todo {
  background: rgba(77, 128, 175, 0.18);
  border-bottom: 2px dotted var(--akzent);
  color: var(--akzent);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
}

/* --- Handy: Ausrichtung ---------------------------------------------------
   Regel: Ein Block ist entweder vollständig mittig oder vollständig links.
   Gemischt wirkt es schief – genau das war vorher das Problem.

   Mittig ist nur der Kopfbereich. Er ist kurz, steht für sich und wirkt so
   wie ein Titelblatt. Alles darunter ist durchgehend linksbündig, weil dort
   längere Texte stehen: Zentrierte Absätze haben keine feste Lesekante, das
   Auge muss bei jeder Zeile neu suchen. */

@media (max-width: 699px) {

  /* --- Kopfbereich: geschlossen mittig --- */
  .hero .wrap { text-align: center; }
  /* Ohne die automatischen Ränder bliebe der begrenzte Kasten links kleben –
     der Text wäre darin zwar zentriert, der Block aber nicht. */
  .hero h1,
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero .btn-row { justify-content: center; }
  /* Nicht über die volle Breite: Sonst wirken die Knöpfe so gewichtig wie die
     Überschrift darüber. Etwas schmaler und kleiner gesetzt ordnen sie sich
     ihr unter, ohne an Auffälligkeit zu verlieren. */
  .hero .btn {
    width: auto;
    font-size: 0.92rem;
    padding: 13px 22px;
  }

  /* Auf dem Handy darf der Slogan deutlich größer sein – er ist das Erste,
     was man sieht, und muss dort mit nichts konkurrieren. Am Rechner bleibt
     es bei der bisherigen Größe. */
  .hero h1 {
    font-size: 2.7rem;
    line-height: 1.08;
    /* Ohne diese Zeile würde die Begrenzung auf 16 Zeichen den Text bei
       dieser Größe unnatürlich früh umbrechen. */
    max-width: 100%;
  }

  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 8px;
    text-align: center;
  }
  .hero-stats .stat-value { font-size: 1.3rem; }
  .hero-stats .stat-label { font-size: 0.72rem; line-height: 1.3; }

  /* --- Alles darunter: durchgehend links --- */

  /* Kennzahlen lagen zweispaltig, die dritte hing allein darunter. Drei
     Spalten lösen das, die Gestaltung bleibt wie am Rechner. */
  .metrics {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 10px;
  }
  .metric { padding-left: 11px; border-left-width: 2px; }
  .metrics .m-value { font-size: 1.2rem; }
  .metrics .m-label { font-size: 0.72rem; line-height: 1.3; }
}

/* --- Zugänglichkeit ------------------------------------------------------ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--akzent);
  color: #fff;
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--akzent-hover);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}