/* Aviation Helper - Website, Richtung "Flight Deck" in hellem Ton (Entscheid vom 02.09.2026)
   Helles Papier, dunkle Tinte, Amber als einzige Signalfarbe (Flaechen) mit einem dunkleren
   Amber fuer Text, Himmelblau als zweite Stimme. Bildsprache aus Richtung A: Screenshots in
   ruhigen Rahmen ohne Browser-Attrappe, nummerierte Kapitel.
   Kein Hell-/Dunkel-Umschalter - die Site hat genau eine Erscheinung. */

:root {
  --bg: #f6f8fa;
  --bg-2: #eef2f6;
  --surface: #ffffff;
  --surface-2: #e6ecf2;
  --ink: #0f1a26;
  --ink-2: #445260;
  --ink-3: #6f7d8c;
  --line: rgba(15, 26, 38, .12);
  --line-strong: rgba(15, 26, 38, .2);
  --amber: #ffb020;
  --amber-hover: #ffc247;
  --amber-ink: #0f1a26;
  --amber-text: #9a5300;
  --sky: #0b6e99;
  --sky-soft: rgba(11, 110, 153, .1);
  --link: #0b6e99;
  --good: #1e7a4b; --good-bg: rgba(30, 122, 75, .12);
  --warn: #9a5300; --warn-bg: rgba(255, 176, 32, .18);
  --glow: rgba(0, 144, 200, .18);
  --shadow: 0 24px 48px -28px rgba(15, 26, 38, .35);
  --radius: 16px;
  --pill: 999px;
  --maxw: 1200px;
  --measure: 64ch;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: light; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Manrope", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.6; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #08547a; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; font-weight: 700; line-height: 1.02; margin: 0 0 .5em; text-wrap: balance; letter-spacing: -.02em; font-variation-settings: "opsz" 96; }
h1 { font-size: clamp(42px, 6vw, 84px); }
/* Ein einzelnes langes Wort ("Datenschutzerklaerung") ist bei der Mindestgroesse breiter als 390 px
   Viewport - Silbentrennung (lang=de/en gesetzt) und als Rueckfall Umbruch im Wort statt Seiten-Ueberlauf. */
h1, h2, h3 { hyphens: auto; overflow-wrap: anywhere; }
h2 { font-size: clamp(30px, 3.6vw, 46px); }
h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; }
h4 { font-size: 19px; font-weight: 600; font-variation-settings: "opsz" 24; }
p { margin: 0 0 1em; }
p, li { max-width: var(--measure); }
ul, ol { padding-left: 1.3em; margin: 0 0 1em; }
li { margin-bottom: .4em; }
li::marker { color: var(--amber); }
strong { font-weight: 700; color: var(--ink); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--surface-2); padding: .1em .4em; border-radius: 4px; }
.eyebrow { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-text); margin: 0 0 14px; }
.eyebrow.sky { color: var(--sky); }
.lead { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.muted { color: var(--ink-2); }
.small { font-size: 15px; }
.tnum { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--amber); color: var(--amber-ink); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
@media (max-width: 600px) { .wrap { padding: 0 20px; } }

/* ---------- Kopfzeile ---------- */
.header { position: sticky; top: 0; z-index: 50; background: rgba(246, 248, 250, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.header .wrap { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: 12px; }
.nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: var(--pill); }
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lang { font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; padding: 8px 10px; border-radius: var(--pill); }
.lang:hover { color: var(--ink); background: var(--surface-2); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-strong); border-radius: 10px; width: 42px; height: 42px; color: var(--ink); cursor: pointer; }
.nav-toggle svg { width: 22px; height: 22px; }
@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px; background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 14px 16px; margin: 0; box-shadow: var(--shadow); }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 14px; font-size: 17px; border-radius: 10px; }
  .header-actions .btn-ghost { display: none; }
}
@media (max-width: 600px) { .header-actions .btn-primary { padding: 9px 14px; font-size: 14px; } .brand span { display: none; } }

/* ---------- Knoepfe ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 15px; padding: 12px 20px; border-radius: var(--pill); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.btn-primary { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); }
.btn-primary:hover { background: var(--amber-hover); border-color: var(--amber-hover); color: var(--amber-ink); }
.btn-secondary { background: var(--sky); color: #fff; border-color: var(--sky); }
.btn-secondary:hover { background: #08547a; border-color: #08547a; color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-lg { padding: 16px 28px; font-size: 17px; }
.btn-group { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(1000px 600px at 78% 35%, var(--glow), transparent 62%), var(--bg); }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1fr; gap: 56px; padding-top: 88px; padding-bottom: 72px; }
.hero-copy { max-width: 62ch; }
.hero h1 { margin-bottom: 24px; }
.hero h1 .accent { color: var(--sky); }
.hero .lead { margin-bottom: 32px; }
.hero-note { font-size: 15px; color: var(--ink-3); margin-top: 22px; }
.hero-note a { color: var(--ink-2); }
.hero-media { max-width: 1040px; }
@media (max-width: 900px) {
  .hero .wrap { gap: 36px; padding-top: 56px; padding-bottom: 48px; }
}
.hero-compact { background: radial-gradient(900px 400px at 85% 0%, var(--glow), transparent 60%), var(--bg); border-bottom: 1px solid var(--line); }
.hero-compact .wrap { grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 56px; }
.hero-compact h1 { font-size: clamp(36px, 4.6vw, 60px); }
.hero-compact p { max-width: 62ch; }

/* ---------- Bildrahmen: echte Screenshots mit Passepartout (Richtung A) ---------- */
.frame { border-radius: var(--radius); border: 1px solid var(--line-strong); background: #fff; box-shadow: var(--shadow); padding: 16px; }
.frame img { width: 100%; border-radius: 8px; border: 1px solid var(--line); }
.frame-tall { max-width: 520px; margin: 0 auto; }
.feature-media .frame { margin: 0 auto; }

/* ---------- Kennzahlen als Tabellenzeile ---------- */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 28px 24px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: none; padding-left: 0; }
.stat .v { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 40px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat .l { color: var(--ink-3); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin-top: 10px; }
@media (max-width: 760px) {
  .stats .wrap { grid-template-columns: 1fr 1fr; }
  .stat { padding: 20px 16px; }
  .stat:first-child { padding-left: 16px; }
  .stat:nth-child(3) { border-left: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- Abschnitte ---------- */
.section { padding: 96px 0; }
.section-alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 62ch; margin-bottom: 48px; }
.section-head p { color: var(--ink-2); font-size: 18px; }
@media (max-width: 700px) { .section { padding: 64px 0; } .section-head { margin-bottom: 32px; } }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.card h3 { margin: 0; font-size: 22px; }
.card p { color: var(--ink-2); margin: 0; font-size: 16px; }
.card .card-cta { margin-top: auto; padding-top: 14px; font-weight: 700; text-decoration: none; }
.card .card-cta:hover { text-decoration: underline; }
.card-role.amber h3 { color: var(--amber-text); }
.card-role.navy h3 { color: var(--sky); }

/* Kapitel: Nummer, Titel, Text - Bild daneben, abwechselnd */
.chapters { counter-reset: chapter; }
.chapters .feature-row { counter-increment: chapter; }
.feature-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; padding: 56px 0; }
.feature-row + .feature-row { border-top: 1px solid var(--line); }
.feature-row.flip .feature-media { order: -1; }
.feature-row h3 { font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; }
.feature-row p { color: var(--ink-2); }
.feature-row ul { margin-top: 14px; color: var(--ink-2); }
.feature-row .help-link { font-size: 15px; font-weight: 700; text-decoration: none; }
.feature-row .help-link:hover { text-decoration: underline; }
.chapters .feature-row .eyebrow::before { content: counter(chapter, decimal-leading-zero) " — "; }
@media (max-width: 900px) {
  .feature-row { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .feature-row.flip .feature-media { order: 0; }
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

.checks { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 32px; }
.checks li { position: relative; padding-left: 32px; max-width: none; color: var(--ink-2); }
.checks li strong { color: var(--ink); }
.checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--warn-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%239a5300' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M5 10.5l3 3 7-7'/%3E%3C/svg%3E"); background-size: 100%; }
@media (max-width: 700px) { .checks { grid-template-columns: 1fr; } }

.steps { counter-reset: step; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.steps li { counter-increment: step; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; max-width: none; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 28px; color: var(--amber-text); margin-bottom: 12px; letter-spacing: -.02em; }
.steps h4 { margin-bottom: 6px; }
.steps p { margin: 0; color: var(--ink-2); font-size: 16px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }


.band { background: radial-gradient(900px 400px at 20% 100%, var(--glow), transparent 60%), var(--bg-2); border-top: 1px solid var(--line); padding: 88px 0; }
.band h2 { color: var(--ink); }
.band p { color: var(--ink-2); font-size: 19px; }

.notice { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); padding: 16px 20px; border-radius: 12px; margin: 24px 0; max-width: var(--measure); }
.notice p { margin: 0; }
.tag { display: inline-block; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--pill); background: var(--sky-soft); color: var(--sky); }
.tag-amber { background: var(--warn-bg); color: var(--amber-text); }

/* ---------- Funktionen ---------- */
.module { padding: 40px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; }
.module:first-of-type { border-top: none; }
.module-head h3 { position: sticky; top: 96px; font-size: 28px; }
.module-head .tag { margin-top: 8px; }
.module-head p { color: var(--ink-3); }
.module-items { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.module-items div { max-width: none; }
.module-items h4 { margin: 0 0 4px; }
.module-items p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.module-items a { font-size: 14px; font-weight: 700; text-decoration: none; }
.module-items a:hover { text-decoration: underline; }
@media (max-width: 900px) { .module { grid-template-columns: 1fr; gap: 16px; } .module-head h3 { position: static; } }
@media (max-width: 640px) { .module-items { grid-template-columns: 1fr; } }

/* ---------- Preise ---------- */
.tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 28px 0; }
@media (max-width: 1050px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .tiers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .tiers { grid-template-columns: 1fr; } }
.tier { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.tier.highlight { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber), var(--shadow); }
.tier .name { font-weight: 700; letter-spacing: .12em; font-size: 12px; color: var(--ink-3); text-transform: uppercase; }
.tier .price { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 32px; line-height: 1; margin: 8px 0 2px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tier .price small { font-size: 14px; font-weight: 600; color: var(--ink-3); font-family: "Manrope", sans-serif; }
.tier .per { font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
.tier ul { list-style: none; padding: 0; margin: 0; font-size: 15px; color: var(--ink-2); }
.tier li { padding: 6px 0; border-top: 1px solid var(--line); margin: 0; max-width: none; }
/* Badge sitzt auf der Amber-Kontur der hervorgehobenen Staffel: gefuellt in Amber mit weissem Saum,
   damit die Linie nicht durch die Schrift laeuft (hell-blau auf Amber war unlesbar) */
.tier .badge { position: absolute; top: -14px; right: 14px; background: var(--amber); color: var(--amber-ink); box-shadow: 0 0 0 4px var(--surface); }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin: 20px 0 28px; }
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 16px; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); }
tr:last-child td { border-bottom: none; }
td.price { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--amber-text); }
/* Sub-Lizenz: zubuchbar zu ihrem Modul, nie einzeln - deshalb keine trennende Linie zur Zeile
   darueber, eingerueckt und leicht abgesetzt. Faellt :has() aus, bleibt nur eine Haarlinie
   zwischen Modul und Zusatz stehen, sonst nichts. */
tr:not(.submodule):has(+ tr.submodule) td { border-bottom: none; }
tr.submodule td { background: var(--surface-2); }
tr.submodule td:first-child { padding-left: 34px; border-left: 3px solid var(--amber); }
.faq details { border-top: 1px solid var(--line); padding: 16px 0; max-width: var(--measure); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { font-weight: 700; cursor: pointer; font-size: 18px; }
.faq details p { margin: 10px 0 0; color: var(--ink-2); }

/* ---------- Doku (Hilfe, Versionshinweise) ---------- */
/* Nur vertikal - das seitliche Padding kommt von .wrap (dieselbe Kurzform-Falle wie bei
   .prose: sie hatte es auf 0 ueberschrieben, der Text klebte auf dem Handy am Rand). */
.doc-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 48px; padding-bottom: 96px; }
@media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; gap: 24px; } }
.doc-nav { position: sticky; top: 96px; font-size: 14.5px; max-height: calc(100vh - 116px); overflow: auto; }
.doc-nav .eyebrow { margin-bottom: 10px; }
.doc-nav ol { list-style: none; padding: 0; margin: 0; }
.doc-nav li { margin: 0; max-width: none; }
.doc-nav a { display: block; color: var(--ink-2); text-decoration: none; padding: 6px 12px; border-left: 2px solid var(--line); }
.doc-nav a:hover { color: var(--ink); border-left-color: var(--sky); }
.doc-nav a[aria-current="page"] { color: var(--amber-text); border-left-color: var(--amber); font-weight: 700; }
.doc-nav .n { display: inline-block; width: 2em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* Auf schmalen Geraeten stand die ganze Kapitelliste zweispaltig ueber dem Text - 770px, bevor
   das Kapitel anfing. Dort ist sie hinter einem Knopf zugeklappt; ab 900px bleibt sie die
   Seitenspalte und der Knopf verschwindet. */
.doc-nav-toggle { display: none; }
@media (max-width: 900px) {
  .doc-nav { position: static; max-height: none; overflow: visible; }
  .doc-nav-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px;
    font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }
  .doc-nav-toggle svg { width: 20px; height: 20px; color: var(--ink-3); transition: transform .15s ease; }
  .doc-nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .doc-nav ol { display: none; margin-top: 10px; }
  .doc-nav ol.is-open { display: block; }
  .doc-nav a { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { .doc-nav-toggle svg { transition: none; } }
.doc { max-width: 76ch; }
.doc h2 { font-size: 34px; margin-top: 8px; }
.doc h3 { font-size: 24px; margin-top: 40px; }
.doc h4 { margin-top: 28px; }
.doc p, .doc li { color: var(--ink-2); }
.doc strong { color: var(--ink); }
.doc a.anchor { display: none; }
.doc img { border: 1px solid var(--line-strong); border-radius: 12px; margin: 16px 0 24px; background: #fff; box-shadow: var(--shadow); }
.doc table { min-width: 0; }
.doc code { font-size: .88em; }
.doc-toc { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.doc-toc li { max-width: none; margin: 0; }
.doc-toc a { display: flex; gap: 14px; align-items: baseline; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); }
.doc-toc a:hover { border-color: var(--sky); }
.doc-toc .n { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; color: var(--amber-text); min-width: 2em; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .doc-toc { grid-template-columns: 1fr; } }
.doc-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-weight: 700; }
.doc-pager a { text-decoration: none; }
.doc-pager .next { margin-left: auto; text-align: right; }

/* ---------- Text-Seiten ---------- */
.prose { padding-top: 56px; padding-bottom: 96px; } /* nur vertikal - das seitliche Padding kommt von .wrap (Kurzform hatte es auf 0 ueberschrieben, Text klebte auf dem Handy am Rand) */
.prose h2 { font-size: 28px; margin-top: 40px; }
.prose h3 { font-size: 21px; margin-top: 28px; }
.prose p, .prose li { color: var(--ink-2); }
.prose .meta { color: var(--ink-3); font-size: 15px; }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-grid .card p { color: var(--ink); }
.contact-grid .card .k { font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.video { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #000; margin: 28px 0; }
.video iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Fusszeile ---------- */
.footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: 56px 0 32px; font-size: 15px; color: var(--ink-2); }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { .footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer .cols { grid-template-columns: 1fr; } }
.footer h4 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; font-family: "Manrope", sans-serif; font-weight: 700; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin: 0 0 8px; max-width: none; }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--ink); text-decoration: underline; }
.footer .brand { margin-bottom: 12px; }
.footer .legal { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 14px; color: var(--ink-3); }