/* Airflight · Frühzugang
   Fast schwarz, Haarlinien statt Karten und Schatten, echte Bildschirme als Beweis.
   Ein heller Knopf, Indigo nur für Links, Fokus und Checkbox, Ampelfarben nur in den Bildern.
   Eine Schrift (Archivo), zwei Radien (6 und 10 px), keine Bewegung beim Laden.
   Farben in OKLCH, Neutraltöne leicht kühl auf Farbton 270. */

:root {
  --grund:       oklch(14.5% 0.006 270);
  --flaeche:     oklch(18.5% 0.008 270);
  --flaeche-2:   oklch(22.5% 0.010 270);
  --linie:       oklch(30% 0.010 270);
  --feldrand:    oklch(56% 0.012 270);
  --text:        oklch(94% 0.004 270);
  --text-2:      oklch(80% 0.008 270);
  --text-3:      oklch(66% 0.010 270);
  --akzent:      oklch(72% 0.110 270);
  --knopf:       oklch(94% 0.004 270);
  --knopf-hover: oklch(86% 0.004 270);
  --fehler:      oklch(72% 0.150 25);

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --abschnitt: clamp(72px, 10vw, 128px);

  --schrift: "Archivo", ui-sans-serif, system-ui, sans-serif;

  --breite: 1120px;
  --r-klein: 6px;
  --r-gross: 10px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--grund); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 960px) { body { font-size: 1.125rem; } }

img { display: block; max-width: 100%; height: auto; }
a { color: var(--akzent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 2px; }
::selection { background: oklch(72% 0.11 270 / 0.35); }

.wrap { width: min(100% - 40px, var(--breite)); margin-inline: auto; }
@media (min-width: 700px) { .wrap { width: min(100% - 64px, var(--breite)); } }

.skip {
  position: absolute; left: var(--space-md); top: -100px;
  background: var(--knopf); color: var(--grund); padding: var(--space-xs) var(--space-md);
  z-index: 10;
}
.skip:focus { top: var(--space-md); }

/* Typografie ------------------------------------------------------------ */

h1, h2, h3 { margin: 0; color: var(--text); text-wrap: balance; }
h1 {
  font-size: clamp(2.125rem, 1.1rem + 3.3vw, 3.875rem);
  line-height: 1.05;
  font-weight: 640;
  font-stretch: 100%;
  letter-spacing: -0.022em;
  max-width: 17ch;
}
@media (min-width: 700px) { h1 { font-stretch: 110%; } }
h2 {
  font-size: clamp(1.625rem, 1.1rem + 2vw, 2.5rem);
  line-height: 1.1;
  font-weight: 600;
  font-stretch: 106%;
  letter-spacing: -0.015em;
}
h3 { font-size: 1.1875rem; line-height: 1.3; font-weight: 600; }
p { margin: 0; max-width: 62ch; text-wrap: pretty; }
/* Am Handy trennen, damit lange Wörter wie Landesluftfahrtbehörde nicht überstehen */
@media (max-width: 699px) { p, dd, summary { hyphens: auto; overflow-wrap: break-word; } }

.lead { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem); line-height: 1.55; color: var(--text-2); max-width: 44ch; }
.leise { color: var(--text-2); }

/* Bildunterschriften, Kleintext, Tabellenköpfe: schmale Archivo, normale Schreibung */
.meta {
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 500;
  font-stretch: 85%;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

/* Kopf ------------------------------------------------------------------ */

.kopf__inner { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
@media (min-width: 700px) { .kopf__inner { min-height: 80px; } }
.marke {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  color: var(--text); text-decoration: none;
  font-weight: 600; font-stretch: 112%; font-size: 1.08rem; letter-spacing: -0.01em;
}
.marke:hover { color: var(--text); }
/* Das Logo hat keinen Alphakanal: Schwarz verschwindet im Grund */
.marke img { width: 28px; height: 28px; mix-blend-mode: lighten; }
.kopf__link { font-size: 0.95rem; font-weight: 560; color: var(--text); text-decoration: none; }
.kopf__link:hover { color: var(--text-2); }

/* Knöpfe ---------------------------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--space-lg);
  background: var(--knopf); color: var(--grund);
  border: 0; border-radius: var(--r-klein);
  font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms var(--ease);
}
.knopf:hover { background: var(--knopf-hover); color: var(--grund); }
.knopf[disabled] { opacity: 0.6; cursor: progress; }
.knopf--gross { min-height: 56px; padding: 0 var(--space-xl); font-size: 1.0625rem; }
.knopf--voll { width: 100%; margin-top: var(--space-xs); }

.textknopf {
  appearance: none; background: none; border: 0; padding: var(--space-sm) var(--space-2xs); min-height: 48px;
  font: inherit; font-size: 1rem; color: var(--text-2); cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--linie);
}
.textknopf:hover { color: var(--text); text-decoration-color: var(--text-3); }

/* Hero ------------------------------------------------------------------
   Bild füllt die rechte Seite und läuft zum Text hin in den Grund aus. */

.hero { position: relative; overflow: hidden; }
.hero__bild { position: relative; margin: 0; height: clamp(190px, 52vw, 440px); }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.hero__bild::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, var(--grund) 0%, oklch(14.5% 0.006 270 / 0) 45%),
    linear-gradient(to bottom, var(--grund) 0%, oklch(14.5% 0.006 270 / 0) 22%);
}
.hero__quelle { position: absolute; right: 12px; top: 10px; z-index: 1; font-size: 0.6875rem; line-height: 1.3; color: var(--text-3); font-stretch: 85%; }
.hero__inner { position: relative; z-index: 1; margin-top: calc(-1 * clamp(40px, 10vw, 96px)); padding-bottom: var(--abschnitt); }
.hero__text { display: grid; gap: var(--space-md); align-content: start; max-width: 640px; }
@media (min-width: 700px) { .hero__text { gap: var(--space-lg); } }
.hero__fuer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); color: var(--text-2); font-size: 0.9375rem; hyphens: manual; }
.pille { display: inline-block; padding: 2px 10px; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); color: var(--text); font-size: 0.8125rem; font-weight: 560; line-height: 1.6; vertical-align: 1px; }
/* Die Überschrift ist ein ganzer Satz, deshalb etwas kleiner als die Standard-h1 */
.hero h1 { font-size: clamp(1.875rem, 1.15rem + 1.9vw, 2.625rem); line-height: 1.1; max-width: 24ch; }
.hero__aktion { display: grid; gap: var(--space-sm); justify-items: start; margin-top: var(--space-xs); }

@media (min-width: 900px) {
  .hero { min-height: min(calc(100svh - 80px), 860px); display: flex; align-items: center; }
  .hero__bild { position: absolute; inset: 0 0 0 auto; width: 62%; height: auto; }
  .hero__bild img { object-position: 92% 50%; }
  .hero__bild::after {
    background:
      linear-gradient(to right, var(--grund) 0%, oklch(14.5% 0.006 270 / 0.85) 18%, oklch(14.5% 0.006 270 / 0) 55%),
      linear-gradient(to top, var(--grund) 0%, oklch(14.5% 0.006 270 / 0) 30%),
      linear-gradient(to bottom, var(--grund) 0%, oklch(14.5% 0.006 270 / 0) 20%);
  }
  .hero__quelle { top: auto; bottom: 14px; right: 20px; }
  .hero__inner { margin-top: 0; padding-block: var(--space-3xl) var(--space-4xl); width: min(100% - 64px, var(--breite)); }
  .hero__text { max-width: 640px; }
}

/* Das Angebot, groß gesetzt */
.hundert {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-md) var(--space-lg);
  padding: var(--space-md) var(--space-lg); margin-top: var(--space-xs);
  background: oklch(18.5% 0.008 270 / 0.88); border: 1px solid var(--linie); border-radius: var(--r-gross);
}
.hundert__zahl { font-size: clamp(3.25rem, 2rem + 4vw, 4.75rem); line-height: 0.9; font-weight: 700; font-stretch: 112%; letter-spacing: -0.045em; color: var(--text); font-variant-numeric: lining-nums; }
.hundert__text { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.4; color: var(--text-2); }
.hundert__text strong { display: block; color: var(--text); font-weight: 620; }
.hundert__text, .hundert__text strong { hyphens: manual; }
@media (max-width: 699px) {
  .hundert { padding: 14px 16px; gap: 14px; }
  .hundert__zahl { font-size: 2.875rem; }
  .hundert__text { font-size: 1rem; }
}

/* Formular --------------------------------------------------------------
   Steht direkt unter dem Hero. Desktop: links Überschrift und Regeln, rechts
   das Formular. Handy: Überschrift, Formular, danach die Regeln. */

.zugang { background: var(--flaeche); border-block: 1px solid var(--linie); scroll-margin-top: 0; padding-block: clamp(48px, 7vw, 96px); }
.zugang__grid { display: grid; gap: var(--space-xl); align-items: start; }
.zugang__kopf { display: grid; gap: var(--space-md); }
.zugang__kopf h2 { max-width: 20ch; }
.zugang__regeln { display: grid; gap: var(--space-md); align-content: start; }
@media (min-width: 960px) {
  .zugang__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "kopf form" "regeln form";
    column-gap: var(--space-3xl); row-gap: var(--space-xl);
  }
  .zugang__kopf { grid-area: kopf; }
  .zugang__grid > .formular { grid-area: form; }
  .zugang__regeln { grid-area: regeln; }
}
.regeln { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); max-width: 56ch; }
.regeln li { padding-block: var(--space-sm); border-bottom: 1px solid var(--linie); color: var(--text-2); font-size: 1rem; }

.formular { background: var(--grund); border: 1px solid var(--linie); border-radius: var(--r-gross); padding: clamp(20px, 3vw, 32px); }
#warteliste { display: grid; gap: var(--space-md); }
.formular__felder { display: grid; gap: var(--space-md); }
@media (min-width: 600px) {
  .formular__felder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .feld--breit, .formular__hinweis { grid-column: 1 / -1; }
}
.formular__hinweis { font-size: 0.875rem; line-height: 1.5; color: var(--text-3); border-top: 1px solid var(--linie); padding-top: var(--space-md); margin-top: var(--space-xs); max-width: none; }

.feld { display: grid; gap: 6px; align-content: start; }
.feld label { font-size: 0.9375rem; font-weight: 560; color: var(--text); line-height: 1.35; }
.optional { font-weight: 400; color: var(--text-3); }

.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld select {
  width: 100%; min-height: 48px; padding: 11px 14px;
  font: inherit; font-size: 1rem; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--feldrand); border-radius: var(--r-klein);
  transition: border-color 150ms var(--ease);
}
.feld select {
  appearance: none; -webkit-appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23bcbec3' stroke-width='1.5'/%3E%3C/svg%3E");
  background-position: right 16px center; background-size: 12px 8px; background-repeat: no-repeat;
}
.feld select option { background: var(--flaeche); color: var(--text); }
.feld input:hover, .feld select:hover { border-color: var(--text-3); }
.feld input:focus-visible, .feld select:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-color: var(--feldrand); }
.feld input[aria-invalid="true"] { border-color: var(--fehler); }
.feld input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--flaeche) inset; -webkit-text-fill-color: var(--text); caret-color: var(--text); }
.feld__hilfe { font-size: 0.875rem; color: var(--text-3); }
.feld__fehler { font-size: 0.875rem; color: var(--fehler); font-weight: 520; }

.feld--check { grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: var(--space-sm); }
.feld--check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--akzent); }
.feld--check label { font-weight: 400; font-size: 0.875rem; color: var(--text-2); line-height: 1.5; }
.feld--check .feld__fehler { grid-column: 2; }

.feld--falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.meldung { font-size: 0.9375rem; color: var(--fehler); border: 1px solid var(--linie); background: var(--flaeche); border-radius: var(--r-klein); padding: var(--space-sm) var(--space-md); max-width: none; }

.danke { display: grid; gap: var(--space-md); }
.danke:focus { outline: none; }
.danke h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); line-height: 1.15; }

/* Abschnitte ------------------------------------------------------------ */

.abschnitt { padding-block: var(--abschnitt); }
.abschnitt--linie { border-top: 1px solid var(--linie); }
.abschnitt__titel { max-width: 22ch; margin-bottom: clamp(32px, 5vw, 64px); }

.zweispaltig { display: grid; gap: var(--space-lg); }
@media (min-width: 960px) { .zweispaltig { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); } }
.gross { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); line-height: 1.55; }

/* Problem und Gegenüberstellung */
.problem__text { display: grid; gap: var(--space-md); }
.problem__satz { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); line-height: 1.45; font-weight: 560; color: var(--text); }
.vergleich { display: grid; gap: var(--space-xl); margin-top: clamp(40px, 6vw, 72px); }
@media (min-width: 800px) { .vergleich { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.vergleich__spalte { display: grid; gap: var(--space-md); align-content: start; border-top: 1px solid var(--linie); padding-top: var(--space-lg); }
.vergleich__spalte h3 { font-size: 0.9375rem; font-weight: 560; font-stretch: 85%; color: var(--text-3); }
.vergleich ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.vergleich li { position: relative; padding-left: 1.5rem; color: var(--text-3); }
.vergleich li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.75rem; height: 1px; background: var(--text-3); }
.vergleich__spalte--mit h3 { color: var(--text); }
.vergleich__spalte--mit li { color: var(--text); }
.vergleich__spalte--mit li::before { background: var(--text); }

/* Angebot als Band nach dem Ablauf */
.angebot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl);
  margin-top: clamp(48px, 7vw, 88px); padding: var(--space-lg) clamp(20px, 3vw, 32px);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-gross);
}
.angebot__text { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); line-height: 1.3; font-weight: 600; color: var(--text); max-width: 34ch; }

/* Ablauf */
.ablauf__grid { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 960px) {
  .ablauf__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); }
  .ablauf__bild { position: sticky; top: 40px; }
}
.schritte { list-style: none; margin: 0; padding: 0; display: grid; }
.schritte li {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-md);
  padding-block: var(--space-xl); border-top: 1px solid var(--linie);
}
.schritte li:last-child { border-bottom: 1px solid var(--linie); }
.schritte__nr { font-size: 1.1875rem; line-height: 1.3; font-weight: 600; font-stretch: 85%; color: var(--text-3); }
.schritte h3 { margin-bottom: var(--space-xs); }
.schritte p { color: var(--text-2); }
.vorbehalt { margin-top: var(--space-md); padding: var(--space-md); font-size: 0.9375rem; line-height: 1.55; color: var(--text-2); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-klein); }

.schirm { margin: 0; }
.schirm img { width: 100%; border-radius: var(--r-gross); border: 1px solid var(--linie); background: var(--grund); }
.schirm figcaption { margin-top: var(--space-sm); }

/* Definitionslisten */
.fakten { display: grid; margin: 0; border-top: 1px solid var(--linie); }
.fakten > div { display: grid; gap: var(--space-2xs); padding-block: var(--space-lg); border-bottom: 1px solid var(--linie); }
@media (min-width: 800px) { .fakten > div { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-xl); } }
.fakten dt { font-size: 0.9375rem; font-weight: 560; font-stretch: 85%; color: var(--text-3); padding-top: 2px; }
.fakten dd { margin: 0; color: var(--text-2); max-width: 62ch; }
.fakten--eng > div { padding-block: var(--space-md); }
@media (min-width: 800px) { .fakten--eng > div { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-lg); } }

/* Fragen ---------------------------------------------------------------- */

.fragen__grid { display: grid; gap: var(--space-xl); }
@media (min-width: 960px) { .fragen__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); } }
.fragen__liste { border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
  min-height: 56px; padding-block: var(--space-md);
  font-weight: 560; font-size: 1.0625rem; color: var(--text);
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ""; flex: none; width: 9px; height: 9px;
  border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 200ms var(--ease);
}
.fragen details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.fragen summary:hover { color: var(--text-2); }
.fragen details p { padding-bottom: var(--space-lg); color: var(--text-2); }

/* Fuß ------------------------------------------------------------------- */

.fuss { border-top: 1px solid var(--linie); padding-block: var(--space-2xl) max(var(--space-xl), env(safe-area-inset-bottom)); font-size: 0.875rem; color: var(--text-3); }
.fuss__inner { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); align-items: center; }
.fuss nav { display: flex; gap: var(--space-lg); }
.fuss a { color: var(--text-2); }
.fuss a:hover { color: var(--text); }
.fuss__quellen { margin-left: auto; }
@media (max-width: 700px) { .fuss__quellen { margin-left: 0; } }

/* Rechtstexte ----------------------------------------------------------- */

.recht { padding-block: clamp(24px, 6vw, 80px) var(--abschnitt); }
.recht__inhalt { max-width: 72ch; display: grid; gap: var(--space-md); }
.recht h1 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem); max-width: none; margin-bottom: var(--space-md); }
.recht h2 { font-size: 1.3rem; margin-top: var(--space-xl); }
.recht h3 { font-size: 1.05rem; margin-top: var(--space-md); }
.recht p, .recht li { color: var(--text-2); }
.recht ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-xs); }
.recht strong { color: var(--text); font-weight: 600; }
.recht .stand { font-size: 0.875rem; color: var(--text-3); margin-top: var(--space-xl); }
.offen { background: oklch(35% 0.08 90); color: var(--text); padding: 0 4px; border-radius: 3px; }