/* ===========================================================================
   XSTNT Cockpit - Schulungsplattform der Content Airline

   Gleicher Look wie Ticket und boarding.xstnt.media: Schwarz, Lime, Papier.
   Space Grotesk fuer Headlines (fett, Versalien), Inter fuer Text,
   JetBrains Mono fuer die Bordsprache. Orange nur fuer Stoerungen.
   Bewegung nur, wo sie etwas zeigt (Lucas, 01.11.2026). Am Handy nichts
   stapeln, was man nicht braucht (04.11.2026). Kein Tailwind, kein Build.
   =========================================================================== */

@font-face {
  font-family: "Space Grotesk Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("schrift/space-grotesk-latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("schrift/inter-latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("schrift/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  --schwarz: #0a0a0a;
  --flaeche: #131312;
  --flaeche-2: #1c1c1b;
  --tafel: #0f0f0e;
  --linie: #2a2a28;
  --grau: #8c8c86;
  --grau-hell: #b9b7b2;
  --text: #cfcdc8;
  --papier: #f4f2ee;
  --papier-2: #e4e1db;
  --tinte: #4a4945;
  --lime: #d4ff3a;
  --lime-dunkel: #3d4a0e;
  --stoerung: #ff5a00;

  --grotesk: "Space Grotesk Variable", "Arial Narrow", sans-serif;
  --sans: "Inter Variable", system-ui, sans-serif;
  --mono: "JetBrains Mono Variable", ui-monospace, monospace;

  --rand: clamp(1rem, 4.5vw, 4rem);
  --kopf: 4.25rem;
  --ease-raus: cubic-bezier(0.23, 1, 0.32, 1);

  color-scheme: dark;
}

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

html {
  background: var(--schwarz);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf) + 4.5rem);
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--schwarz);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.08rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--grotesk);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--papier);
  text-wrap: balance;
  hyphens: auto;
}

h1 em,
h2 em,
h3 em {
  font-style: normal;
  color: var(--lime);
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

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

::selection {
  background: var(--lime);
  color: var(--schwarz);
}

.sym {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

.mono {
  font-family: var(--mono);
}

.grau {
  color: var(--grau);
}

.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===========================================================================
   Bausteine aus dem Ticket: Schild, Durchsage, Knoepfe, Tafel, Marke
   =========================================================================== */

.schild {
  display: inline-flex;
  overflow: hidden;
  margin: 0;
  border-radius: 4px;
  font: 800 0.72rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.schild-nr {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.65rem;
  background: var(--lime);
  color: var(--schwarz);
}

.schild-nr .sym {
  width: 1rem;
  height: 1rem;
}

.schild-nr .flieger {
  transform: rotate(90deg);
}

.schild-txt {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.7rem;
  background: var(--flaeche-2);
  color: var(--papier);
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.durchsage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.8rem;
  margin-bottom: 1rem;
  font: 700 0.74rem/1.25 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}

.durchsage-ding {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem 0.3rem 0.4rem;
  border-radius: 3px;
  background: var(--lime);
  color: var(--schwarz);
  font-weight: 800;
}

.durchsage-ding .sym {
  width: 1rem;
  height: 1rem;
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 3.1rem;
  max-width: 100%;
  padding: 0 1.1rem 0 1.35rem;
  border: 1.5px solid var(--lime);
  border-radius: 999px;
  background: var(--lime);
  color: var(--schwarz);
  font: 800 0.8rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 160ms var(--ease-raus),
    background-color 220ms var(--ease-raus),
    color 220ms var(--ease-raus),
    border-color 220ms var(--ease-raus),
    box-shadow 300ms var(--ease-raus);
}

.knopf .sym {
  transition: transform 300ms var(--ease-raus);
}

.knopf:hover {
  box-shadow: 0 0 36px 2px rgb(212 255 58 / 0.32);
}

.knopf:hover .sym:last-child {
  transform: translateX(3px);
}

.knopf:active {
  transform: scale(0.97);
}

.knopf-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knopf-gross {
  min-height: 3.6rem;
  padding: 0 1.3rem 0 1.6rem;
  font-size: 0.86rem;
}

.knopf-klein {
  min-height: 2.4rem;
  padding: 0 0.85rem;
  font-size: 0.68rem;
  gap: 0.4rem;
}

.knopf-klein .sym {
  width: 1.05rem;
  height: 1.05rem;
}

.knopf-kontur {
  background: transparent;
  color: var(--papier);
  border-color: var(--linie);
}

.knopf-kontur:hover {
  border-color: var(--lime);
  color: var(--lime);
  box-shadow: none;
}

.knopf-kontur .sym:first-child {
  margin-left: -0.3rem;
}

.gefahr:hover,
.gefahr:focus-visible {
  border-color: var(--stoerung);
  color: var(--stoerung);
}

.rund {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--linie);
  border-radius: 999px;
  background: transparent;
  color: var(--papier);
  text-decoration: none;
  transition: border-color 200ms var(--ease-raus), color 200ms var(--ease-raus);
}

.rund:hover {
  border-color: var(--lime);
  color: var(--lime);
}

.rund.klein {
  width: 2.3rem;
  height: 2.3rem;
}

.rund.klein .sym {
  width: 1.1rem;
  height: 1.1rem;
}

.link-knopf {
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: var(--lime);
  font: 700 0.7rem/1.2 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.marke {
  display: inline-flex;
  align-items: center;
  padding: 0.24rem 0.45rem;
  border: 1px solid var(--linie);
  border-radius: 3px;
  font: 800 0.6rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grau-hell);
  white-space: nowrap;
}

.marke-lime {
  border-color: var(--lime);
  background: var(--lime);
  color: var(--schwarz);
}

.marke-gut {
  border-color: var(--lime-dunkel);
  color: var(--lime);
}

.marke-warnung {
  border-color: rgb(255 90 0 / 0.5);
  color: #ff8a40;
}

.marke-stoerung {
  border-color: var(--stoerung);
  background: var(--stoerung);
  color: var(--schwarz);
}

/* Abflugtafel */
.tafel {
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--tafel);
  padding: 0.85rem 1rem 0.6rem;
}

.tafel-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  margin: 0;
  border-bottom: 1px solid var(--linie);
  font: 800 0.72rem/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papier);
}

.tafel-kopf > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.tafel-kopf .sym {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--lime);
}

.tafel-kopf .rechts {
  color: var(--lime);
  text-align: right;
}

.zeile {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto 1.4rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.35rem;
  border-top: 1px solid var(--linie);
  color: inherit;
  text-decoration: none;
  transition: background-color 180ms var(--ease-raus);
}

.tafel-kopf + .zeile,
summary + .zeile {
  border-top: 0;
}

.zeile:hover {
  background: var(--flaeche-2);
}

.zeile:hover .zeile-pfeil {
  transform: translateX(3px);
}

.zeile-nr {
  font: 800 0.86rem/1 var(--mono);
  color: var(--lime);
}

.zeile-titel {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.zeile-titel small {
  font: 700 0.6rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau);
}

.zeile-titel b {
  font-weight: 600;
  color: var(--papier);
  line-height: 1.3;
}

.zeile-info {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.zeile-dauer {
  font: 600 0.7rem/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--grau);
  text-transform: uppercase;
  white-space: nowrap;
}

.zeile-pfeil {
  color: var(--lime);
  transition: transform 220ms var(--ease-raus);
}

.zeile-pfeil .sym {
  width: 1.15rem;
  height: 1.15rem;
}

.zeile.hier {
  background: rgb(212 255 58 / 0.07);
}

.zeile.gesehen .zeile-titel b {
  color: var(--grau-hell);
}

.zeile.gesehen .zeile-pfeil .sym {
  width: 1.3rem;
  height: 1.3rem;
}

.zeile.gesehen:hover .zeile-pfeil {
  transform: none;
}

/* Am Handy nur Nummer, Titel, Dauer: Marken weg, "Hier warst du" als Kante. */
@media (max-width: 560px) {
  .zeile {
    grid-template-columns: 2.3rem minmax(0, 1fr) auto 1.2rem;
    gap: 0.6rem;
  }

  .zeile-info .marke {
    display: none;
  }

  .zeile.hier {
    box-shadow: inset 3px 0 0 var(--lime);
  }
}

.tafel-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin: 0;
  padding: 0.75rem 0.35rem 0.35rem;
  border-top: 1px solid var(--linie);
  font: 600 0.7rem/1.4 var(--mono);
  letter-spacing: 0.06em;
  color: var(--grau);
}

.tafel-fuss b {
  color: var(--papier);
}

/* Kasten: ruhige Flaeche in der Seitenspalte */
.kasten {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  justify-items: start;
  padding: 1.2rem 1.25rem 1.3rem;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--tafel);
}

.kasten-etikett {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 800 0.7rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}

.kasten-etikett .sym {
  width: 1.1rem;
  height: 1.1rem;
}

.kasten-titel {
  font-size: 1.35rem;
  line-height: 1;
}

.kasten-text {
  color: var(--grau-hell);
  font-size: 0.95rem;
}

.kasten-text b {
  color: var(--papier);
}

.kasten-liste {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.kasten-liste li {
  position: relative;
  padding-left: 1.1rem;
}

.kasten-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--lime);
}

/* ===========================================================================
   Bordkarte mit Zackenkante (aus der Landingpage). Die Kerben sind
   Verlaufsflaechen in der Hintergrundfarbe, beide Teile greifen ineinander.
   =========================================================================== */

.bordkarte {
  --karte: var(--papier);
  --grund: var(--schwarz);
  --zacke: 7px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 28%);
  border-radius: 16px;
  color: var(--schwarz);
}

.bordkarte.lime {
  --karte: var(--lime);
}

.bordkarte-haupt {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  min-width: 0;
  padding: 1.3rem 1.6rem 1.4rem 1.4rem;
  border-radius: 16px 0 0 16px;
  background:
    linear-gradient(45deg, transparent 66.67%, var(--grund) 66.67%) right 0 top 0 / var(--zacke) calc(var(--zacke) * 2) repeat-y,
    linear-gradient(135deg, transparent 66.67%, var(--grund) 66.67%) right 0 top 0 / var(--zacke) calc(var(--zacke) * 2) repeat-y,
    var(--karte);
}

.bordkarte-stub {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  padding: 1.3rem 1.1rem 1.3rem 1.5rem;
  border-radius: 0 16px 16px 0;
  background:
    linear-gradient(315deg, transparent 66.67%, var(--grund) 66.67%) left 0 top var(--zacke) / var(--zacke) calc(var(--zacke) * 2) repeat-y,
    linear-gradient(225deg, transparent 66.67%, var(--grund) 66.67%) left 0 top var(--zacke) / var(--zacke) calc(var(--zacke) * 2) repeat-y,
    var(--karte);
}

.stub-etikett,
.karte-etikett,
.feld-etikett,
.flug-etikett {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: 800 0.62rem/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte);
}

.bordkarte.lime .stub-etikett,
.bordkarte.lime .karte-etikett {
  color: var(--lime-dunkel);
}

.karte-etikett .sym {
  width: 1.05rem;
  height: 1.05rem;
}

.stub-wert {
  margin-bottom: 0.45rem;
  font: 700 1.05rem/1.05 var(--grotesk);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.stub-gross {
  margin-bottom: 0;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  line-height: 0.95;
}

.stub-klein {
  margin-bottom: 0.7rem;
  font: 700 0.68rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stub-flieger {
  margin-top: auto;
}

.stub-flieger .sym {
  width: 2rem;
  height: 2rem;
  transform: rotate(90deg);
}

.karte-gross {
  font: 700 clamp(1.3rem, 2.6vw, 1.7rem)/1 var(--grotesk);
  text-transform: uppercase;
}

.karte-riesig {
  font: 700 clamp(2.4rem, 7vw, 3.8rem)/0.9 var(--grotesk);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.karte-text {
  font-size: 0.92rem;
  line-height: 1.4;
}

.karte-link {
  text-decoration: none;
  transition: transform 220ms var(--ease-raus);
}

.karte-link:hover {
  transform: translateY(-2px);
}

.bordkarte.klein .bordkarte-haupt,
.bordkarte.klein .bordkarte-stub {
  padding-block: 1.05rem;
}

.bordkarte.klein {
  grid-template-columns: minmax(0, 1fr) 6.5rem;
}

.bordkarte .knopf {
  border-color: var(--schwarz);
  background: var(--schwarz);
  color: var(--lime);
}

.bordkarte .knopf:hover {
  box-shadow: 0 10px 28px -10px rgb(0 0 0 / 0.6);
}

/* Schmal: Abschnitt unter die Karte, Zacken quer. */
@media (max-width: 560px) {
  .bordkarte:not(.klein):not(.boarding-karte) {
    grid-template-columns: minmax(0, 1fr);
  }

  .bordkarte:not(.klein):not(.boarding-karte) > .bordkarte-haupt {
    padding: 1.2rem 1.2rem 1.5rem;
    border-radius: 16px 16px 0 0;
    background:
      linear-gradient(135deg, transparent 66.67%, var(--grund) 66.67%) left 0 bottom 0 / calc(var(--zacke) * 2) var(--zacke) repeat-x,
      linear-gradient(225deg, transparent 66.67%, var(--grund) 66.67%) left 0 bottom 0 / calc(var(--zacke) * 2) var(--zacke) repeat-x,
      var(--karte);
  }

  .bordkarte:not(.klein):not(.boarding-karte) > .bordkarte-stub {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.7rem;
    padding: 1.3rem 1.2rem 1.1rem;
    border-radius: 0 0 16px 16px;
    background:
      linear-gradient(45deg, transparent 66.67%, var(--grund) 66.67%) left var(--zacke) top 0 / calc(var(--zacke) * 2) var(--zacke) repeat-x,
      linear-gradient(315deg, transparent 66.67%, var(--grund) 66.67%) left var(--zacke) top 0 / calc(var(--zacke) * 2) var(--zacke) repeat-x,
      var(--karte);
  }

  .bordkarte:not(.klein):not(.boarding-karte) .stub-flieger {
    display: none;
  }
}

/* ===========================================================================
   Boarding: persoenliche Bordkarte in 3D (stil/bordkarte3d.js). Die
   HTML-Karte gibt Platz und Groesse vor und steht da, bis die 3D-Karte
   gezeichnet ist; ohne WebGL bleibt sie.
   =========================================================================== */

.boarding {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(1.2rem, 3.5vh, 2.4rem);
  width: 100%;
  min-height: 100svh;
  padding: calc(env(safe-area-inset-top) + 1.6rem) var(--rand) calc(env(safe-area-inset-bottom) + 1.6rem);
  overflow: hidden;
  text-align: center;
}

.boarding-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.boarding > :not(.boarding-canvas):not(.glow) {
  position: relative;
  z-index: 1;
}

.boarding-logo {
  height: 1.9rem;
  width: auto;
}

.boarding-kopf .durchsage {
  justify-content: center;
}

.boarding-titel {
  font-size: clamp(2.3rem, 7vw, 5.2rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.boarding-karte {
  container-type: inline-size;
  width: min(100%, 50rem);
  aspect-ratio: 3.6 / 1.4;
  grid-template-columns: minmax(0, 1fr) 31.4%;
  text-align: left;
}

html.ticket-3d .boarding-karte {
  visibility: hidden;
}

.boarding-karte .bordkarte-haupt {
  gap: 0;
  align-content: stretch;
  grid-template-rows: auto auto 1fr auto auto;
  padding: 0 2.6cqw 2.2cqw 3cqw;
  overflow: hidden;
}

.boarding-karte .bordkarte-stub {
  padding: 3cqw 2.4cqw 2.4cqw 3cqw;
}

.bk-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 -2.6cqw 0 -3cqw;
  padding: 1.6cqw 2.6cqw 1.6cqw 3cqw;
  background: var(--schwarz);
  color: var(--lime);
  font: 800 1.3cqw/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.bk-band span:last-child {
  color: var(--grau);
}

.bk-etikett {
  margin-top: 2.6cqw;
  font: 600 1.15cqw/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinte);
}

.bk-name {
  align-self: center;
  overflow: hidden;
  font: 700 7.2cqw/1 var(--grotesk);
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bk-firma {
  margin-bottom: 1.6cqw;
  font: 700 1.4cqw/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinte);
}

.bk-felder {
  display: flex;
  gap: 3.4cqw;
  padding-top: 1.4cqw;
  border-top: 2px solid rgb(10 10 10 / 0.14);
  font: 800 1.8cqw/1.1 var(--mono);
  white-space: nowrap;
}

.bk-felder small {
  display: block;
  margin-bottom: 0.6cqw;
  font: 600 1cqw/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte);
}

.boarding-karte .stub-gross {
  font-size: 4.4cqw;
}

.boarding-karte .stub-flieger .sym {
  width: 4cqw;
  height: 4cqw;
}

.boarding-fuss {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
}

.boarding-text {
  font-size: 0.9rem;
  color: var(--grau);
}

/* Einsteigen: waehrend der Abschnitt abreisst, blendet der Rest leise aus. */
html.abriss .boarding-fuss,
html.abriss .boarding-kopf {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--ease-raus), transform 500ms var(--ease-raus);
}

/* ===========================================================================
   Kopf: Logo, Gate-Schild, drei Reiter, Abmelden.
   Am Handy zwei Zeilen: Logo und Abmelden, darunter die Reiter. Kein
   schwebender Knopf unten.
   =========================================================================== */

.kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "logo leer ab"
    "reiter reiter reiter";
  align-items: center;
  gap: 0.55rem 0.75rem;
  padding: calc(env(safe-area-inset-top) + 0.6rem) var(--rand) 0.6rem;
  border-bottom: 1px solid var(--linie);
  background: rgb(10 10 10 / 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}

.kopf-logo {
  grid-area: logo;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.kopf-logo img {
  width: auto;
  height: 1.6rem;
}

.kopf-schild {
  display: none;
  text-decoration: none;
  transition: transform 200ms var(--ease-raus);
}

.kopf-schild:hover {
  transform: translateY(-1px);
}

.reiter {
  grid-area: reiter;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.reiter-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.6rem;
  padding: 0 0.7rem;
  border: 1.5px solid var(--linie);
  border-radius: 999px;
  font: 800 0.68rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--papier);
  white-space: nowrap;
  transition: border-color 200ms var(--ease-raus), color 200ms var(--ease-raus), background-color 200ms var(--ease-raus);
}

.reiter-link .sym {
  width: 1.05rem;
  height: 1.05rem;
}

.reiter-link:hover {
  border-color: var(--lime);
  color: var(--lime);
}

.reiter-link.aktiv {
  border-color: var(--lime);
  background: var(--lime);
  color: var(--schwarz);
}

.kopf-ab {
  grid-area: ab;
  justify-self: end;
}

@media (max-width: 380px) {
  .reiter-link .sym {
    display: none;
  }
}

@media (min-width: 768px) {
  .kopf {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "logo schild reiter ab";
    height: var(--kopf);
    padding-block: env(safe-area-inset-top) 0;
  }

  .kopf-logo img {
    height: 1.9rem;
  }

  .kopf-schild {
    grid-area: schild;
    display: inline-flex;
  }

  .reiter {
    display: flex;
    justify-content: flex-end;
  }

  .reiter-link {
    padding: 0 1rem;
  }
}

/* Zwischen 768 und 900 px: Schild nur mit "Cockpit", ohne Namen. */
@media (min-width: 768px) and (max-width: 899px) {
  .kopf-schild .schild-txt {
    display: none;
  }
}

/* ===========================================================================
   Seite, Buehne, Fuss
   =========================================================================== */

.seite {
  flex: 1;
  width: 100%;
  max-width: 84rem;
  margin: 0 auto;
  padding: 1.6rem var(--rand) 4rem;
}

.buehne {
  padding: 1.6rem 0 2rem;
}

.buehne-klein {
  padding-bottom: 1.6rem;
}

.titel-riesig {
  font-size: clamp(2.7rem, 8vw, 6.4rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
}

.titel-gross {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 0.92;
}

.lead {
  max-width: 40rem;
  margin-top: 1rem;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--grau-hell);
}

.buehne-knopf {
  margin-top: 1.6rem;
}

/* ===========================================================================
   Hoehenmesser: rundes Instrument wie im Cockpit. Lime-Ring = Fortschritt,
   Nadel und Fenster = Flughoehe. Reiseflughoehe (10.000 ft) = startklar.
   =========================================================================== */

.buehne-cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem;
  align-items: center;
}

.buehne-text {
  min-width: 0;
}

.hoehenmesser {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: center;
  gap: 1.1rem;
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--linie);
  border-radius: 16px;
  background: radial-gradient(90% 80% at 20% 30%, rgb(212 255 58 / 0.07), transparent 70%), var(--tafel);
}

.hm-uhr {
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 12px 28px rgb(0 0 0 / 0.55));
}

.hm-rand {
  fill: #1c1c1b;
  stroke: #333331;
  stroke-width: 1.5;
}

.hm-spur {
  fill: none;
  stroke: #2a2a28;
  stroke-width: 7;
}

.hm-ring {
  fill: none;
  stroke: var(--lime);
  stroke-width: 7;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgb(212 255 58 / 0.6));
}

.hm-blatt {
  fill: #070707;
  stroke: #262624;
  stroke-width: 1.5;
}

.hm-strich {
  stroke: var(--grau);
  stroke-width: 1.6;
}

.hm-strich.gross {
  stroke: var(--papier);
  stroke-width: 3;
}

.hm-ziffer {
  fill: var(--papier);
  font: 800 19px var(--mono);
  text-anchor: middle;
  dominant-baseline: central;
}

.hm-klein {
  fill: var(--grau);
  font: 700 9px var(--mono);
  letter-spacing: 0.14em;
  text-anchor: middle;
  dominant-baseline: central;
}

.hm-fenster {
  fill: #000;
  stroke: #3a3a37;
  stroke-width: 1.5;
}

.hm-wert {
  fill: var(--lime);
  font: 800 15px var(--mono);
  letter-spacing: 0.04em;
  text-anchor: middle;
  dominant-baseline: central;
}

.hm-nadel {
  fill: var(--lime);
  stroke: var(--schwarz);
  stroke-width: 1;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.8));
}

.hm-nabe {
  fill: #1c1c1b;
  stroke: var(--lime);
  stroke-width: 2;
}

.hm-punkt {
  fill: var(--lime);
}

.hm-text {
  display: grid;
  gap: 0.35rem;
  justify-items: start;
  min-width: 0;
}

.hm-phase {
  font: 700 clamp(1.5rem, 3.2vw, 2.3rem)/0.95 var(--grotesk);
  text-transform: uppercase;
  color: var(--papier);
}

.hm-stand {
  font: 700 0.72rem/1.35 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau-hell);
}

.hm-stand b {
  color: var(--lime);
}

.hm-satz {
  font-size: 0.92rem;
  color: var(--grau);
}

@media (min-width: 900px) {
  .buehne-cockpit {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
    column-gap: 1.8rem;
  }

  .hoehenmesser {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 1.4rem 1.4rem 1.5rem;
    text-align: center;
  }

  .hm-uhr {
    width: min(100%, 15.5rem);
  }

  .hm-text {
    justify-items: center;
  }
}

.block-titel {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-bottom: 0.6rem;
}

.block-text {
  max-width: 44rem;
  color: var(--grau-hell);
}

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  margin-bottom: 0.6rem;
  font: 700 0.7rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--grau);
}

.zurueck:hover {
  color: var(--lime);
}

.zurueck .sym {
  width: 1.1rem;
  height: 1.1rem;
}

.fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  width: 100%;
  max-width: 84rem;
  margin: 0 auto;
  padding: 1.6rem var(--rand) calc(1.6rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linie);
  font-size: 0.85rem;
  color: var(--grau);
}

.fuss .mono {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fuss a {
  color: var(--grau-hell);
}

.fuss-recht {
  display: flex;
  gap: 1rem;
}

/* Meldungen und Stoerungen */
.meldung {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.4rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--lime-dunkel);
  border-radius: 10px;
  background: rgb(212 255 58 / 0.07);
  color: var(--lime);
  font-weight: 600;
}

.meldung-stoerung,
.meldung-warnung {
  border-color: rgb(255 90 0 / 0.55);
  background: rgb(255 90 0 / 0.08);
  color: #ff8a40;
}

.stoerung {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  width: 100%;
  padding: 1rem 1.15rem;
  border: 1.5px solid var(--stoerung);
  border-radius: 12px;
  background: rgb(255 90 0 / 0.08);
  color: var(--papier);
}

.stoerung-ding {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem 0.3rem 0.4rem;
  border-radius: 3px;
  background: var(--stoerung);
  color: var(--schwarz);
  font: 800 0.7rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.stoerung-ding .sym {
  width: 1rem;
  height: 1rem;
}

.leer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.2rem;
  padding: 1.3rem 1.4rem;
  border: 1.5px dashed var(--linie);
  border-radius: 12px;
  color: var(--grau-hell);
}

.leer p,
.leer > span {
  flex: 1 1 18rem;
}

.leer b {
  color: var(--papier);
}

.leer-sym {
  width: 2.4rem;
  height: 2.4rem;
  color: var(--lime);
}

.glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(55% 45% at 75% 15%, rgb(212 255 58 / 0.12), transparent 70%);
}

/* ===========================================================================
   Anmeldung: Bordkarte mit dem Code
   =========================================================================== */

.einstieg {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  width: 100%;
  max-width: 42rem;
  min-height: 100svh;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 2rem) var(--rand) calc(env(safe-area-inset-bottom) + 2rem);
  text-align: center;
}

.einstieg .durchsage {
  justify-content: center;
  margin: 0.4rem 0 -0.4rem;
}

.einstieg-logo {
  height: 2rem;
  width: auto;
}

.einstieg-titel {
  font-size: clamp(2.5rem, 9vw, 4.6rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
}

.einstieg-karte {
  width: 100%;
  text-align: left;
}

.einstieg-karte .bordkarte-haupt {
  gap: 0.75rem;
}

.code-feld {
  width: 100%;
  padding: 0.35rem 0 0.45rem;
  border: 0;
  border-bottom: 3px solid var(--schwarz);
  border-radius: 0;
  background: transparent;
  color: var(--schwarz);
  font: 800 clamp(2rem, 8.5vw, 2.9rem)/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.code-feld::placeholder {
  color: rgb(10 10 10 / 0.2);
}

.code-feld:focus {
  outline: none;
  border-bottom-color: var(--lime-dunkel);
  box-shadow: 0 3px 0 0 var(--lime);
}

.code-feld.falsch {
  border-bottom-color: var(--stoerung);
}

.einstieg-hinweis {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--tinte);
}

.einstieg-karte .knopf {
  justify-self: start;
  margin-top: 0.3rem;
}

.einstieg-fuss {
  font-size: 0.82rem;
  color: var(--grau);
}

.einstieg-fuss a {
  color: var(--grau-hell);
}

.stoerung-gross {
  justify-items: center;
  text-align: center;
  padding: 1.6rem;
}

/* ===========================================================================
   Start: Pflichtteil, Seitenspalte, Bibliothek, Flugrouten
   =========================================================================== */

.wahl {
  margin-bottom: 2rem;
  padding: 1.4rem;
  border: 1.5px solid var(--lime);
  border-radius: 14px;
  background: rgb(212 255 58 / 0.05);
}

.wahl-knoepfe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.8rem;
  margin-top: 1.1rem;
}

.wahl-knopf {
  display: grid;
  justify-items: start;
  gap: 0.35rem;
  padding: 1.2rem 1.3rem;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: var(--tafel);
  text-align: left;
  transition: border-color 200ms var(--ease-raus), transform 160ms var(--ease-raus);
}

.wahl-knopf:hover {
  border-color: var(--lime);
}

.wahl-knopf:active {
  transform: scale(0.98);
}

.wahl-knopf .sym {
  width: 2.3rem;
  height: 2.3rem;
  margin-bottom: 0.4rem;
  color: var(--lime);
}

.wahl-knopf b {
  font: 700 1.5rem/1 var(--grotesk);
  text-transform: uppercase;
  color: var(--papier);
}

.wahl-knopf small {
  font: 600 0.7rem/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
}

.start-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem;
}

.seitenspalte {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.bibliothek {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.bibliothek .block-titel {
  margin-top: 0.8rem;
}

details.tafel {
  padding-bottom: 0;
}

details.tafel[open] {
  padding-bottom: 0.4rem;
}

details.tafel > summary {
  cursor: pointer;
  list-style: none;
  padding-bottom: 0.85rem;
  border-bottom: 0;
}

details.tafel[open] > summary {
  border-bottom: 1px solid var(--linie);
  padding-bottom: 0.7rem;
}

details.tafel > summary::-webkit-details-marker {
  display: none;
}

.sym.auf {
  width: 1.15rem;
  height: 1.15rem;
  transition: transform 220ms var(--ease-raus);
}

details[open] > summary .sym.auf {
  transform: rotate(90deg);
}

.routen {
  margin-top: 1rem;
}

.routen-raster {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(9.5rem, 44%);
  gap: 0.8rem;
  margin: 1.1rem calc(var(--rand) * -1) 0;
  padding: 0 var(--rand) 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rand);
  scrollbar-width: thin;
}

.route {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  scroll-snap-align: start;
  color: inherit;
  text-decoration: none;
}

.route-bild {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
}

.route-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-raus);
}

.route:hover .route-bild img {
  transform: scale(1.04);
}

.route-nr {
  position: absolute;
  left: 0.55rem;
  top: 0.55rem;
  padding: 0.3rem 0.45rem;
  border-radius: 3px;
  background: var(--lime);
  color: var(--schwarz);
  font: 800 0.68rem/1 var(--mono);
  letter-spacing: 0.08em;
}

.route-text {
  display: grid;
  gap: 0.2rem;
}

.route-text b {
  font: 700 1.15rem/1 var(--grotesk);
  text-transform: uppercase;
  color: var(--papier);
}

.route-text small {
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--grau);
}

@media (min-width: 640px) {
  .routen-raster {
    grid-auto-columns: minmax(9.5rem, 30%);
  }
}

@media (min-width: 900px) {
  .start-raster {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
    grid-template-areas:
      "pflicht seite"
      "biblio seite"
      "routen seite";
    grid-template-rows: auto auto 1fr;
    column-gap: 1.8rem;
  }

  .pflichtteil {
    grid-area: pflicht;
  }

  .seitenspalte {
    grid-area: seite;
    position: sticky;
    top: calc(var(--kopf) + 1.2rem);
    align-self: start;
  }

  .bibliothek {
    grid-area: biblio;
  }

  .routen {
    grid-area: routen;
  }

  .routen-raster {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

/* ===========================================================================
   Lektion: Video im Hochformat, daneben Text
   =========================================================================== */

.lektion-raster {
  display: grid;
  gap: 1.6rem;
}

.lektion-medien {
  display: grid;
  justify-items: center;
}

.clip {
  width: min(100%, calc(74svh * 9 / 16));
  aspect-ratio: 9 / 16;
  border: 1px solid var(--linie);
  border-radius: 16px;
  background: #000;
  object-fit: cover;
}

.clip-rahmen,
.vorbild {
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  margin: 0;
}

.vorbild {
  justify-items: start;
  margin-top: 1.8rem;
}

.vorbild .clip {
  width: min(100%, 15rem);
}

.clip-etikett {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: 800 0.66rem/1.3 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
}

.clip-etikett .sym {
  width: 1.05rem;
  height: 1.05rem;
}

.video-folgt {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.6rem;
  padding: 1.5rem;
  text-align: center;
  background:
    radial-gradient(70% 45% at 50% 40%, rgb(212 255 58 / 0.1), transparent 70%),
    repeating-linear-gradient(135deg, #111110 0 14px, #0d0d0c 14px 28px);
  color: var(--grau-hell);
}

.video-folgt-nr {
  position: absolute;
  left: 0.9rem;
  top: 0.9rem;
  padding: 0.35rem 0.5rem;
  border-radius: 3px;
  background: var(--lime);
  color: var(--schwarz);
  font: 800 0.8rem/1 var(--mono);
}

.video-folgt-sym {
  width: 3.4rem;
  height: 3.4rem;
  color: var(--lime);
}

.video-folgt b {
  font: 700 1.7rem/1 var(--grotesk);
  text-transform: uppercase;
  color: var(--papier);
}

.video-folgt span:last-child {
  font: 600 0.72rem/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Am Handy ohne Video kein bildschirmhoher Platzhalter: flacher Streifen,
   damit Titel und Notizen sofort im Bild sind. */
@media (max-width: 899px) {
  .video-folgt {
    width: 100%;
    aspect-ratio: auto;
    min-height: 0;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 0.9rem;
    row-gap: 0.15rem;
    padding: 1.1rem 1.2rem 1.1rem 4.2rem;
    text-align: left;
    justify-content: start;
    justify-items: start;
  }

  .video-folgt-nr {
    top: 50%;
    transform: translateY(-50%);
  }

  .video-folgt-sym {
    grid-row: span 2;
    width: 2.2rem;
    height: 2.2rem;
  }

  .video-folgt b {
    font-size: 1.25rem;
  }
}

.lektion-text {
  min-width: 0;
}

.lektion-text h1 {
  margin-bottom: 1.4rem;
}

.notizen {
  max-width: 42rem;
}

.notizen > * + * {
  margin-top: 0.9rem;
}

.notizen h3 {
  margin-top: 1.6rem;
  padding-left: 0.7rem;
  border-left: 4px solid var(--lime);
  font-size: 1.15rem;
  line-height: 1.05;
}

.notizen h3:first-child {
  margin-top: 0;
}

.notizen strong {
  color: var(--papier);
  font-weight: 650;
}

.notizen ul,
.notizen ol {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.notizen ul li {
  position: relative;
  padding-left: 1.3rem;
}

.notizen ul li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.58em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--lime);
}

.notizen ol {
  counter-reset: schritt;
}

.notizen ol li {
  position: relative;
  padding-left: 2.3rem;
  counter-increment: schritt;
}

.notizen ol li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 0.05em;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 4px;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  color: var(--lime);
  font: 800 0.75rem/1 var(--mono);
}

.notizen .merke {
  margin-block: 1.4rem;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  background: var(--lime);
  color: var(--schwarz);
  font: 700 clamp(1.05rem, 1.6vw, 1.25rem)/1.15 var(--grotesk);
  text-transform: uppercase;
}

.notizen .merke strong {
  color: inherit;
}

.lektion-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
}

.lektion-nav .knopf-gross {
  flex: 1 1 18rem;
  justify-content: space-between;
}

@media (min-width: 900px) {
  .lektion-raster {
    grid-template-columns: minmax(15rem, 23rem) minmax(0, 1fr);
    gap: 2.6rem;
    align-items: start;
  }

  .lektion-medien {
    position: sticky;
    top: calc(var(--kopf) + 1.2rem);
  }

  .clip {
    width: min(100%, calc((100svh - var(--kopf) - 3rem) * 9 / 16));
  }

  .vorbild .clip {
    width: min(100%, 15rem);
  }

  .lektion-nav .knopf-gross {
    flex: 0 1 auto;
  }
}

/* ===========================================================================
   Flugplan: Monate und Fluege als Bordkarten
   =========================================================================== */

.monate {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.4rem;
}

.monat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.4rem;
  padding: 0 0.95rem;
  border: 1.5px solid var(--linie);
  border-radius: 999px;
  font: 800 0.68rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--papier);
}

.monat .sym {
  width: 1rem;
  height: 1rem;
}

.monat:hover {
  border-color: var(--lime);
  color: var(--lime);
}

.monat.aktiv {
  border-color: var(--lime);
  background: var(--lime);
  color: var(--schwarz);
}

.fluege {
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flug-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
}

.flug-nr {
  font: 800 0.7rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.flug-route {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: var(--schwarz);
  color: var(--lime);
  font: 800 0.64rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.flug-route .sym {
  width: 0.95rem;
  height: 0.95rem;
}

.flug-status {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border: 1.5px solid var(--schwarz);
  border-radius: 999px;
  font: 800 0.62rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.flug-status-geschnitten,
.flug-status-freigabe {
  background: var(--schwarz);
  color: var(--papier);
}

.flug-status-veroeffentlicht {
  border-color: var(--schwarz);
  background: var(--schwarz);
  color: var(--lime);
}

.flug.gelandet {
  opacity: 0.72;
}

.flug .flug-route {
  justify-self: start;
}

.flug-hinweis {
  margin-top: 1.4rem;
}

.flug-hinweis a {
  color: var(--lime);
}

.flug-titel {
  margin: 0.15rem 0 0.4rem;
  color: var(--schwarz);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.flug-etikett {
  margin-top: 0.3rem;
}

.flug-hook {
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
}

.flug-shots {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flug-shots li {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.4;
}

.flug-shots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid var(--schwarz);
  border-radius: 3px;
}

.stub-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.6rem;
  margin-top: auto;
  padding: 0 0.9rem;
  border-radius: 999px;
  background: var(--schwarz);
  color: var(--lime);
  font: 800 0.66rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.stub-knopf .sym {
  width: 1rem;
  height: 1rem;
}

/* Knopf als Formular (Einmal-Link aus dem Brain): sitzt wie der Link unten */
.stub-form {
  display: flex;
  margin-top: auto;
}

.stub-form .stub-knopf {
  margin-top: 0;
}

@media (max-width: 560px) {
  .bordkarte .stub-knopf,
  .bordkarte .stub-form {
    margin-left: auto;
  }
}

/* ===========================================================================
   Checkflug: drei Schritte, freie Zeiten, gebuchte Bordkarte
   =========================================================================== */

.checkflug-raster {
  display: grid;
  gap: 2rem;
}

.schritte {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.schritte li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  column-gap: 0.9rem;
  row-gap: 0.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--tafel);
}

.schritt-nr {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 6px;
  background: var(--lime);
  color: var(--schwarz);
  font: 800 1rem/1 var(--mono);
}

.schritte b {
  font: 700 1.2rem/1 var(--grotesk);
  text-transform: uppercase;
  color: var(--papier);
  align-self: end;
}

.schritte span:last-child {
  color: var(--grau-hell);
  font-size: 0.95rem;
}

.schritte a {
  color: var(--lime);
}

.termine {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.tage {
  display: grid;
  gap: 0.9rem;
}

.tag {
  margin: 0;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--tafel);
}

.tag legend {
  padding: 0 0.4rem;
  font: 700 0.72rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grau-hell);
}

.tag legend b {
  color: var(--lime);
}

.zeiten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.3rem;
}

.zeit {
  min-height: 3rem;
  border: 1.5px solid var(--linie);
  border-radius: 10px;
  background: var(--flaeche);
  color: var(--papier);
  font: 800 1rem/1 var(--mono);
  letter-spacing: 0.04em;
  transition: border-color 180ms var(--ease-raus), color 180ms var(--ease-raus), background-color 180ms var(--ease-raus);
}

.zeit:hover,
.zeit:focus-visible {
  border-color: var(--lime);
  background: var(--lime);
  color: var(--schwarz);
}

.tage-hinweis {
  font: 600 0.7rem/1.4 var(--mono);
  letter-spacing: 0.06em;
  color: var(--grau);
}

.termin-karte .bordkarte-haupt {
  gap: 0.4rem;
}

.termin-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.2rem;
}

.termin-absagen {
  margin: 0;
}

@media (min-width: 900px) {
  .checkflug-raster {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
    align-items: start;
  }
}

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