/* ═══════════════════════════════════════════════════════════════
   LAUTENSCHLÄGER OBJEKTEINRICHTUNG — Gestaltungsgrundlage

   Bewusst kategorisch anders als die beiden Umzugs-Websites:
   dort Orange auf Weiß, System-Sans, mittig, viele Abschnitte.
   Hier: Papier, Anthrazit, gedecktes Messing, Serif über Grotesk,
   asymmetrisches Raster, wenige Abschnitte, große Bilder.

   Alle Farbkombinationen sind mit tools/check_contrast.py gegen
   WCAG 2.1 AA geprüft. Der Messington existiert in zwei Varianten,
   weil ein einziger Ton auf hellem und dunklem Grund nicht beides
   leisten kann.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --paper:        #F6F3EE;   /* Grundfläche */
  --paper-2:      #EDE8E0;   /* abgesetzte Fläche */
  --white:        #FFFFFF;
  --ink:          #17191B;   /* Text, dunkle Vollflächen · 15.9:1 auf Papier */
  --ink-2:        #54585C;   /* Sekundärtext            ·  6.5:1 auf Papier */
  --line:         #DDD6CB;   /* dekorative Trennlinien */
  --border:       #8A8377;   /* Rahmen von Bedienelementen · 3.4:1 (WCAG 1.4.11) */
  --messing:      #856839;   /* Akzent auf hellem Grund ·  4.7:1 */
  --messing-hell: #C7A267;   /* Akzent auf dunklem Grund·  7.4:1 */

  /* Abstände — großzügig, Rhythmus über Weißraum statt Farbwechsel */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4.5rem; --s9: 7rem;

  /* Serif über Grotesk. Bewusst Systemschriften: kein externer Font-Abruf,
     dadurch schneller und ohne datenschutzrechtliche Fragen. */
  --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
           Arial, sans-serif;

  --maxw: 1240px;
  --radius: 3px;             /* nie mehr als 4px — Verzichtsliste */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Typografie ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em;
  line-height: 1.15; margin: 0 0 var(--s5); }
/* Deutsche Komposita sind lang. Am Desktop loesen wir das ueber die
   Schriftgroesse (siehe .split h1), auf schmalen Displays ueber echte
   Silbentrennung — ein Trennstrich ist richtig, ein harter Bruch mitten im
   Wort ist ein Fehler. */
h1, h2, h3, p, li, td { overflow-wrap: break-word; }
@media (max-width: 760px) {
  h1, h2, h3, summary, p, li { hyphens: auto; }
}
h1 { font-size: clamp(2.3rem, 1.6rem + 2.8vw, 3.9rem); line-height: 1.08; max-width: 20ch; }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.6rem); max-width: 24ch; }
h3 { font-size: 1.2rem; line-height: 1.3; margin-bottom: var(--s3); }

p { margin: 0 0 var(--s5); max-width: 68ch; }   /* Zeilenlänge hart begrenzt */

/* Das letzte Element eines Blocks traegt keinen eigenen unteren Abstand — der
   kommt vom Abschnitt. Sonst addieren sich beide und die Luecke vor dem
   naechsten Abschnitt wird groesser als zwischen allen anderen. */
.sec .wrap > :last-child,
.sec .split > div > :last-child,
.sec .prosa > :last-child,
.sec .formular > :last-child { margin-bottom: 0; }
a { color: inherit; }

.lead { font-size: clamp(1.1rem, 1.02rem + .4vw, 1.35rem); line-height: 1.55;
  color: var(--ink-2); max-width: 60ch; }
.eyebrow { font-family: var(--sans); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--messing);
  margin: 0 0 var(--s4); }

/* ---------- Raster ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5); }
.sec { padding: var(--s9) 0; }
.sec--tight { padding: var(--s8) 0; }
.sec--dark { background: var(--ink); color: var(--paper); }
.sec--dark h1, .sec--dark h2, .sec--dark h3 { color: var(--paper); }
.sec--dark p { color: rgba(246,243,238,.82); }
.sec--dark .eyebrow { color: var(--messing-hell); }
.sec--paper2 { background: var(--paper-2); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Asymmetrisches Zweispalten-Layout — Text schmal, Bild breit, im
   nächsten Abschnitt gespiegelt. Das ist der sichtbarste Unterschied
   zur mittig gesetzten Umzugsseite. */
.split { display: grid; gap: var(--s7); align-items: center;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
/* Ohne min-width:0 waechst ein Grid-Kind auf seine Mindestinhaltsbreite
   und schiebt auf schmalen Displays die ganze Seite auf. */
.split > * { min-width: 0; }
/* Im Split steht die Ueberschrift in einer schmalen Spalte. Die volle
   H1-Groesse sprengt dort jedes lange Wort. */
.split h1 { font-size: clamp(1.95rem, 1.15rem + 2.3vw, 2.9rem);
  /* Kein harter Notbruch: der wuerde das weiche Trennzeichen (­) in langen
     Komposita ueberstimmen und mitten im Wort trennen, ohne Trennstrich. */
  overflow-wrap: normal; }
.split--flip > *:first-child { order: 2; }
/* Wenn die Spalten unterschiedlich lang sind, wirkt zentriert wie ein Fehler. */
.split--top { align-items: start; }
/* Abstand zwischen mehreren gestapelten Splits im selben Abschnitt. */
.split--abstand { margin-top: var(--s7); }
.split--abstand-gross { margin-top: var(--s8); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--s6); }
  .split--flip > *:first-child { order: 0; }
}

/* ---------- Bilder ---------- */
figure { margin: 0; }
figure img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
figcaption { font-size: .8125rem; color: var(--ink-2); margin-top: var(--s3); }
.sec--dark figcaption { color: rgba(246,243,238,.66); }
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.bleed img { border-radius: 0; }

/* ---------- Bedienelemente ---------- */
.btn { display: inline-block; background: var(--messing); color: var(--white);
  font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1.2;
  padding: 1rem 1.6rem; border: 0; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; transition: background-color .2s; }
.btn:hover { background: #6E5530; color: var(--white); }
.sec--dark .btn { background: var(--messing-hell); color: var(--ink); }
.sec--dark .btn:hover { background: #D7B57C; }

/* Sekundäraktionen sind Textlinks, keine zweiten Buttons */
.link { font-weight: 600; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--messing); padding-bottom: 2px; }
.link:hover { border-bottom-width: 2px; }
.sec--dark .link { color: var(--paper); border-bottom-color: var(--messing-hell); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5);
  margin-top: var(--s6); }
@media (max-width: 560px) { .actions .btn { width: 100%; text-align: center; } }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--messing); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--paper);
  padding: .8rem 1.2rem; z-index: 100; text-decoration: none; }
.skip:focus { left: 0; top: 0; }

/* Bewegung nur als kurze Einblendung — Verzichtsliste */
@media (prefers-reduced-motion: no-preference) {
  .fade { opacity: 0; transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease; }
  .fade.in { opacity: 1; transform: none; }
}

/* ---------- Ablauf-Liste ---------- */
/* Wie ein Fahrplan: Nummer, Titel und Beschreibung nebeneinander. Untereinander
   ergaebe das eine schmale Kolonne mit leerer rechter Seitenhaelfte. */
.ablauf { list-style: none; margin: var(--s7) 0 var(--s7); padding: 0; }
.ablauf li { display: grid; align-items: start; gap: var(--s3) var(--s6);
  grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1.9fr);
  padding: var(--s5) 0; border-top: 1px solid var(--line); }
.ablauf li:last-child { border-bottom: 1px solid var(--line); }
.ablauf .nr { font-family: var(--serif); font-size: 1.6rem; line-height: 1.2;
  color: var(--messing); }
.ablauf h3 { margin: 0; }
.ablauf p { margin: 0 0 var(--s4); font-size: 1rem; color: var(--ink-2);
  max-width: 62ch; }
.ablauf p:last-child { margin-bottom: 0; }
.sec--dark .ablauf li { border-color: rgba(246,243,238,.18); }
@media (max-width: 900px) {
  /* Titel rueckt ueber den Text, die Nummer bleibt in ihrer Spalte. */
  .ablauf li { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .ablauf h3 { grid-column: 2; }
  .ablauf li > div { grid-column: 2; }
}
@media (max-width: 560px) {
  /* Nummer und Titel bleiben in einer Zeile, nur der Text nimmt die volle
     Breite. Die Nummer allein auf einer Zeile verschenkt zu viel Platz. */
  /* Titel und Text stehen auf derselben Achse rechts der Nummer — sonst
     springt die Textkante zwischen Überschrift und Absatz. */
  .ablauf li { grid-template-columns: 1.6rem minmax(0, 1fr);
    gap: var(--s2) var(--s3); padding: var(--s4) 0; }
  .ablauf .nr { grid-column: 1; font-size: 1.25rem; }
  .ablauf h3 { grid-column: 2; font-size: 1.1rem; }
  .ablauf li > div { grid-column: 2; }
  .ablauf p { margin-bottom: var(--s3); font-size: .9688rem; }
}

/* ---------- Gewerke ---------- */
.gewerke { list-style: none; margin: 0 0 var(--s5); padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gewerke li { padding: .7rem 0; border-top: 1px solid var(--line);
  font-size: 1rem; }
.sec--dark .gewerke li { border-top-color: rgba(246,243,238,.18); }

/* ---------- Galerie ----------
   Einheitliches Seitenverhältnis erzwingen: Sonst reißt ein hochformatiges
   Motiv das Raster auseinander, wie es beim Beleuchtungsdetail passiert ist. */
.galerie { display: grid; gap: var(--s5); margin-top: var(--s7);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.galerie figure img { aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Alternativen ---------- */
.alt { display: grid; gap: var(--s6); margin-top: var(--s7);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.alt > div { padding-top: var(--s4); border-top: 2px solid var(--line); }
.alt > div:last-child { border-top-color: var(--messing); }
.alt p { font-size: .9688rem; color: var(--ink-2); margin: 0; }

/* ---------- Häufige Fragen ---------- */
.faq { max-width: 78ch; margin-top: var(--s6); }
.faq details { border-top: 1px solid var(--line); padding: var(--s4) 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-family: var(--serif); font-size: 1.15rem;
  font-weight: 600; list-style: none; display: flex; justify-content: space-between;
  align-items: baseline; gap: var(--s4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--messing); font-family: var(--sans);
  font-size: 1.3rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: var(--s3) 0 0; font-size: 1rem; color: var(--ink-2); }

/* ---------- Kopfzeile ---------- */
.site-header { position: sticky; top: 0; z-index: 900; background: var(--paper);
  border-bottom: 1px solid var(--line); }
.site-header .hd { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5);
  display: flex; align-items: center; gap: var(--s5); min-height: 76px; }
.marke { display: flex; align-items: center; gap: .6rem; text-decoration: none;
  color: var(--ink); margin-right: auto; line-height: 1.1; }
.marke-signet { width: 1.85rem; height: 1.85rem; flex: none; color: var(--ink); }
.marke-text { display: flex; flex-direction: column; }
.marke b { font-family: var(--serif); font-size: 1.15rem; font-weight: 600;
  letter-spacing: -.01em; }
.marke span { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); margin-top: .2rem; }
.site-nav { display: flex; align-items: center; gap: var(--s2); list-style: none;
  margin: 0; padding: 0; }
.site-nav a { display: block; padding: .5rem .7rem; font-size: .9375rem;
  text-decoration: none; color: var(--ink); }
.site-nav a:hover { color: var(--messing); }
.site-nav li.aktiv a { border-bottom: 1px solid var(--messing); }
.hd-tel { font-size: .9375rem; font-weight: 600; text-decoration: none;
  white-space: nowrap; }
.hd-tel:hover { color: var(--messing); }
.nav-schalter { display: none; background: none; border: 1px solid var(--border);
  border-radius: var(--radius); padding: .5rem .8rem; font: inherit; font-size: .9rem;
  cursor: pointer; }
@media (max-width: 940px) {
  .nav-schalter { display: block; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; background: var(--paper);
    padding: var(--s4); border-bottom: 1px solid var(--line); gap: 0; }
  .site-nav.offen { display: flex; }
  .site-nav a { padding: .8rem .4rem; font-size: 1rem; }
  .hd-tel { display: none; }
  /* Der Kopf-Button brach sonst auf drei Zeilen und wurde zum Klotz. */
  .site-header .hd { gap: var(--s3); padding: 0 var(--s4); }
  .site-header .btn { font-size: .875rem; padding: .6rem .85rem; }
  .marke b { font-size: 1.05rem; }
  .marke-signet { width: 1.55rem; height: 1.55rem; }
}

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--ink); color: var(--paper); padding: var(--s8) 0 var(--s6); }
.site-footer .cols { display: grid; gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.site-footer h3 { font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--messing-hell);
  margin-bottom: var(--s4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: rgba(246,243,238,.82); text-decoration: none; font-size: .9375rem; }
.site-footer a:hover { color: var(--paper); }
.site-footer p { color: rgba(246,243,238,.82); font-size: .9375rem; margin: 0 0 var(--s3);
  max-width: none; }
.site-footer .unten { border-top: 1px solid rgba(246,243,238,.18);
  margin-top: var(--s7); padding-top: var(--s5); display: flex; flex-wrap: wrap;
  gap: .6rem 1.4rem; justify-content: space-between; }
.site-footer .unten p, .site-footer .unten a { font-size: .8125rem;
  color: rgba(246,243,238,.6); }
.site-footer .unten nav { display: flex; gap: 1.2rem; }

/* ---------- Aufzählung mit Beschreibung ---------- */
/* Fachvokabular-Listen: Begriff fett, danach der Satz, der beweist,
   dass wir den Raum kennen. Kein Icon, kein Kästchen. */
.liste { list-style: none; margin: var(--s5) 0 var(--s6); padding: 0;
  max-width: 72ch; }
.liste li { padding: var(--s4) 0; border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: 1rem; }
.liste li:last-child { border-bottom: 1px solid var(--line); }
.liste li strong { color: var(--ink); font-weight: 600; }
/* Schliesst die Liste den Abschnitt ab, traegt der Abschnitt den Abstand. */
.liste:last-child { margin-bottom: 0; }
.sec--dark .liste li { border-color: rgba(246,243,238,.18);
  color: rgba(246,243,238,.82); }
.sec--dark .liste li strong { color: var(--paper); }

/* ---------- Fließtextseiten (Über uns, Danke, Recht) ---------- */
/* Erbt max-width und margin von .wrap — beides muss zurueckgesetzt werden,
   sonst zentriert sich der Text und bricht die linksbuendige Bildsprache. */
.prosa { max-width: calc(74ch + 2 * var(--s5)); margin-left: 0; margin-right: auto; }
.prosa h2 { margin-top: var(--s7); }
.prosa h2:first-of-type { margin-top: var(--s6); }
.prosa h3 { margin-top: var(--s6); }

/* Rechtstexte: gleiche Schrift, kleinere Stufen. Ein Paragrafentitel in
   Plakatgroesse liest sich wie eine Werbeaussage. */
.prosa--recht h1 { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); }
.prosa--recht h2 { font-size: 1.35rem; max-width: none; margin-bottom: var(--s3); }
.prosa--recht p, .prosa--recht li { font-size: .9688rem; color: var(--ink-2); }

/* Einzelne Stelle, an der noch eine Angabe fehlt. Auffaellig genug, dass sie
   nicht versehentlich online geht. */
.ergaenzen { background: #F4E3C2; box-shadow: 0 0 0 2px #F4E3C2;
  color: var(--ink); font-weight: 600; }

/* ---------- Formular ---------- */
.formular { background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s6); }
.formular label { display: block; font-size: .875rem; font-weight: 600;
  margin: var(--s5) 0 var(--s2); }
.formular label:first-of-type { margin-top: 0; }
.formular input[type=text], .formular input[type=tel], .formular input[type=email],
.formular select, .formular textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .7rem .8rem; }
.formular textarea { resize: vertical; line-height: 1.5; }
.formular :focus-visible { outline: 2px solid var(--messing); outline-offset: 1px; }
.formular .hinweis { font-size: .875rem; color: var(--ink-2); margin: 0 0 var(--s5); }

.formular .check { display: grid; grid-template-columns: auto 1fr; gap: var(--s3);
  align-items: start; margin: var(--s5) 0; }
.formular .check input { margin-top: .35rem; width: 1.1rem; height: 1.1rem;
  accent-color: var(--messing); }
.formular .check label { margin: 0; font-weight: 400; font-size: .9375rem;
  color: var(--ink-2); }

.formular button { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.formular button[disabled] { opacity: .6; cursor: default; }
.formular .status { margin: var(--s4) 0 0; font-size: .9375rem; min-height: 1.4em; }
.formular .status.fehler { color: #8C2F1E; font-weight: 600; }

/* Honigtopf — für Menschen unsichtbar, für Bots ein Feld zum Ausfüllen */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; }

/* Kopf-Button: langes Label auf breiten Schirmen, kurzes auf schmalen.
   Ohne den Wechsel bricht er auf drei Zeilen oder schiebt die Seite auf. */
.btn--kopf { white-space: nowrap; }
.btn--kopf .kurz { display: none; }
@media (max-width: 560px) {
  .btn--kopf .lang { display: none; }
  .btn--kopf .kurz { display: inline; }
}
/* Unter 360px passt neben Marke und Menue nichts mehr. Termin und Telefon
   stehen dort im aufgeklappten Menue — dort sind sie mobil ohnehin besser. */
/* Bis 420 px passen Signet, Schriftzug, Menü und Termin-Knopf nicht
   nebeneinander — dann hat der Schriftzug Vorrang, er trägt den Namen. */
@media (max-width: 420px) { .marke-signet { display: none; } }

@media (max-width: 359px) {
  .btn--kopf { display: none; }
}
.site-nav .nur-mobil { display: none; }
@media (max-width: 940px) {
  .site-nav .nur-mobil { display: block; border-top: 1px solid var(--line); }
  .site-nav .nur-mobil:first-of-type { margin-top: var(--s2); }
  .site-nav .nur-mobil a { font-weight: 600; }
  /* Die Unterstreichung des aktiven Punkts liest sich in der Liste als
     Trennlinie. Mobil deshalb Markierung am linken Rand. */
  .site-nav li.aktiv a { border-bottom: 0; border-left: 2px solid var(--messing);
    padding-left: .8rem; font-weight: 600; }
}

/* ---------- Film ---------- */
/* Vier Clips laufen als eine Datei in Schleife. Schriftzug und Claim liegen
   als Textebene darueber — KI-erzeugte Schrift im Video waere fehlerhaft und
   bei einem Firmennamen nicht reparierbar. */
.film { position: relative; margin: 0; background: var(--ink); overflow: hidden; }
.film video, .film .film-standbild {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: 0; }
.film .film-standbild { display: none; }

/* Abdunkelung nur unten, damit der Text lesbar bleibt, ohne das Bild zu
   verschleiern. */
.film-buehne::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(23,25,27,.86) 0%, rgba(23,25,27,.45) 32%,
              rgba(23,25,27,0) 62%); }
.film-buehne { position: relative; }

.film-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--s7) var(--s6); display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: var(--s4); }
.film-marke { margin: 0; display: flex; flex-direction: column; align-items: center;
  line-height: 1.1; opacity: 0; }
.film-marke b { font-family: var(--serif); font-weight: 600; color: var(--paper);
  font-size: clamp(1.3rem, .9rem + 1.4vw, 2.1rem); letter-spacing: -.01em; }
.film-marke span { font-size: clamp(.6rem, .5rem + .3vw, .78rem); letter-spacing: .18em;
  text-transform: uppercase; color: var(--messing-hell); margin-top: .35em; }
.film-claim { margin: 0; max-width: none; font-family: var(--serif);
  font-size: clamp(1.1rem, .8rem + 1.2vw, 1.9rem); line-height: 1.25;
  color: var(--paper); opacity: 0; }
.film-claim span { display: block; opacity: 0; }

/* Der Claim erscheint erst, wenn die letzte Szene laeuft. Gestartet wird die
   Animation per Klasse, sobald das Video tatsaechlich abspielt. */
.film.laeuft .film-marke { animation: film-ein .9s ease-out 14.4s forwards; }
.film.laeuft .film-claim { opacity: 1; }
.film.laeuft .film-claim span:nth-child(1) { animation: film-ein .7s ease-out 15.2s forwards; }
.film.laeuft .film-claim span:nth-child(2) { animation: film-ein .7s ease-out 15.8s forwards; }
.film.laeuft .film-claim span:nth-child(3) { animation: film-ein .7s ease-out 16.4s forwards; }
@keyframes film-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.film figcaption { padding: var(--s4) var(--s5) 0; color: var(--ink-2);
  font-size: .875rem; background: var(--paper); }

/* Ohne Bewegung: Standbild statt Video, Text sofort sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .film video { display: none; }
  .film .film-standbild { display: block; }
  .film-marke, .film-claim, .film-claim span { opacity: 1; animation: none; }
}
@media (max-width: 640px) {
  .film-text { padding: var(--s6) var(--s5); gap: var(--s3); }
}


/* ═══════════════════════════════════════════════════════════════
   Schmale Displays
   Die Abstandsskala ist für den Desktop gemacht. Auf einem 390 px
   breiten Schirm stehen zwischen zwei Abschnitten sonst 224 px Luft —
   ein Viertel des Bildschirms, bevor überhaupt Text kommt.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  :root {
    --s6: 1.75rem;   /* 32 → 28 */
    --s7: 2.25rem;   /* 48 → 36 */
    --s8: 3rem;      /* 72 → 48 */
    --s9: 4rem;      /* 112 → 64 */
  }

  /* Der erste Abschnitt schließt direkt an die Kopfzeile an und braucht
     oben weniger Anlauf als ein Abschnitt mitten auf der Seite. */
  main > .sec:first-child,
  main > .sec:first-of-type { padding-top: var(--s7); }

  /* Einheitliche Überschriftengröße: Ohne das ist die Hero-Zeile auf
     Seiten mit Split kleiner als auf Seiten ohne — und in der grossen
     Stufe trennt fast jedes Kompositum. */
  h1, .split h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  .lead { font-size: 1.0625rem; }

  /* Farbige Flächen bekommen oben und unten denselben Innenabstand, damit der
     Inhalt mittig in der Fläche sitzt. */
  .sec--dark, .sec--paper2 { padding: var(--s8) 0; }

  /* Nur wenn Vorgänger UND Nachfolger dieselbe neutrale Fläche sind, reicht der
     untere Abstand des Vorgängers. Prüft man das nur an einer Seite, greift die
     Regel auch beim Farbwechsel — dann klebt der Text an der Kante. */
  .sec:not(.sec--dark):not(.sec--paper2) + .sec:not(.sec--dark):not(.sec--paper2) {
    padding-top: 0;
  }

  /* Nach einer farbigen Fläche braucht der Text Luft zur Kante. */
  .sec--dark + .sec, .sec--paper2 + .sec { padding-top: var(--s8); }

  /* Vor einem Farbwechsel derselbe untere Abstand wie oben in der farbigen
     Fläche — sonst ist die Lücke vor einem dunklen Block größer als danach. */
  .sec:has(+ .sec--dark), .sec:has(+ .sec--paper2) { padding-bottom: var(--s8); }

  /* Eine sichtbare Trennlinie trennt bereits — sie soll aber mittig zwischen
     den Abschnitten sitzen, nicht direkt über dem folgenden Text. */
  .sec:has(+ hr.rule) { padding-bottom: var(--s7); }
  hr.rule + .sec { padding-top: var(--s7); }

  /* Das Formular bricht aus dem Seitenrand aus und nutzt die volle Breite —
     sonst stehen die Eingabefelder auf einem 390-px-Schirm doppelt eingerückt. */
  .formular { padding: var(--s5); margin-inline: calc(-1 * var(--s5));
    border-left: 0; border-right: 0; border-radius: 0; }
  .site-footer { padding: var(--s8) 0 var(--s6); }
  /* Rechtsseiten auf dieselbe Überschriftengröße wie der Rest. */
  .prosa--recht h1 { font-size: 2rem; }
  .prosa--recht h2 { font-size: 1.2rem; }
  /* Der Claim im Film braucht auf schmalen Schirmen weniger Rand. */
  .film-text { padding: var(--s5) var(--s4); }
}

/* Sehr schmale Geräte: noch eine Stufe enger. */
@media (max-width: 400px) {
  .wrap { padding: 0 1.15rem; }
  .formular { padding: 1.15rem; margin-inline: -1.15rem; }
  h1, .split h1 { font-size: 1.85rem; }
}


/* ═══════════════════════════════════════════════════════════════
   Fingerbedienung
   Auf Touchgeräten braucht jedes eigenständige Ziel etwa 44 px Höhe.
   Verlinkte Wörter mitten im Fließtext sind davon ausgenommen — dort
   würde eine Vergrößerung den Zeilenfall zerstören.
   ═══════════════════════════════════════════════════════════════ */
@media (hover: none), (max-width: 900px) {
  .site-header .btn { padding-top: .9rem; padding-bottom: .9rem; }
  .nav-schalter { padding-top: .68rem; padding-bottom: .68rem; }

  /* Die Frage im Aufklapper ist das Hauptziel der FAQ-Liste. */
  .faq summary { min-height: 44px; padding: var(--s2) 0; }

  /* Eigenständige Aktionslinks — nicht die im Fließtext. */
  .actions .link { padding-top: .6rem; padding-bottom: .6rem; }

  /* Einwilligung: größeres Kästchen, und die ganze Zeile bleibt anklickbar. */
  .formular .check input { width: 1.4rem; height: 1.4rem; margin-top: .15rem; }
  .formular .check label { padding-top: .3rem; padding-bottom: .3rem; }

  .marke { padding-top: .45rem; padding-bottom: .45rem; }
}


/* ---------- Fragenblöcke im Seitenraster ---------- */
/* Überall sonst steht die Überschrift links und der Inhalt rechts. Ohne diese
   Regel liefen die Fragenlisten einspaltig und liessen ein Drittel der Breite
   ungenutzt. Greift ueber :has, damit keine Seite angefasst werden muss. */
@media (min-width: 900px) {
  .sec > .wrap:has(> .faq) {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--s7); row-gap: var(--s8);
  }
  .sec > .wrap:has(> .faq) > h2 { grid-column: 1; margin: 0; }
  .sec > .wrap:has(> .faq) > .faq { grid-column: 2; margin-top: 0; max-width: none; }
  /* Alles andere im selben Block läuft über die volle Breite. */
  .sec > .wrap:has(> .faq) > .eyebrow,
  .sec > .wrap:has(> .faq) > .lead,
  .sec > .wrap:has(> .faq) > .actions { grid-column: 1 / -1; }
}