/* ===========================================================
   flyinglimburg.com — Gestaltung „Flugbahn", abgeleitet von feeschwaiger.de
   Schriften liegen im Ordner /schriften und werden selbst
   ausgeliefert. Es geht keine Anfrage an Google.
   =========================================================== */

@font-face{
  font-family:'Archivo';
  src:url('schriften/Archivo.woff2') format('woff2-variations');
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Archivo Narrow';
  src:url('schriften/ArchivoNarrow.woff2') format('woff2-variations');
  font-weight:400 600; font-style:normal; font-display:swap;
}

:root{
  --nacht:#0a0d12;
  --band:#121821;
  --band2:#18202b;
  --ink:#f3f1ec;
  --dim:#8791a0;
  --dimmer:#5d6776;
  --line:#1f2833;
  --line-hell:#33404f;
  --signal:#d3b06f;

  --eo:cubic-bezier(.23,1,.32,1);
  --sanft:cubic-bezier(.16,1,.3,1);
  --eio:cubic-bezier(.77,0,.175,1);

  --rand:clamp(18px,3.4vw,52px);
  --breite:1360px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--nacht); color:var(--ink);
  font-family:'Archivo',system-ui,-apple-system,sans-serif; font-weight:300;
  font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}

.bahn{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.eng{max-width:760px}
.schmal{font-family:'Archivo Narrow',sans-serif}
.caps{font-family:'Archivo Narrow',sans-serif;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim)}

/* Tastaturbedienung sichtbar machen */
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.sprung{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--nacht);
  padding:10px 18px;z-index:200}
.sprung:focus{left:var(--rand);top:10px}

/* ===================== Kopfzeile ===================== */
.kopf{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;
  transition:background-color 320ms var(--eo),border-color 320ms var(--eo),padding 320ms var(--eo);
  border-bottom:1px solid transparent;background:none}
.kopf::before{content:'';position:absolute;left:0;right:0;top:0;height:230%;
  z-index:-1;pointer-events:none;transition:opacity 320ms var(--eo);
  background:linear-gradient(to bottom,rgba(10,13,18,.96) 0%,rgba(10,13,18,.93) 34%,
    rgba(10,13,18,.58) 62%,rgba(10,13,18,0) 100%)}
.kopf[data-fest]::before{opacity:0}
.kopf[data-fest]{background:rgba(10,13,18,.94);backdrop-filter:blur(12px) saturate(1.3);
  border-bottom-color:var(--line);padding:11px 0}
.kopf .bahn{display:flex;align-items:center;justify-content:space-between;gap:16px}
.marke{font-family:'Archivo Narrow',sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.hauptnav{display:flex;align-items:center;gap:clamp(16px,2.2vw,28px)}
.hauptnav a{font-family:'Archivo Narrow',sans-serif;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:#a2a5aa;position:relative;
  padding:6px 0;transition:color 220ms var(--eo)}
/* Unterstrich: die Linie zieht von links unter das Wort und
   verlässt es nach rechts, wie eine Pistenmarkierung beim Rollen. */
.hauptnav a:not(.knopf-anfrage)::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--signal);transform:scaleX(0);transform-origin:right center;
  transition:transform 380ms var(--eio)}
.hauptnav a[aria-current]{color:var(--ink)}
.hauptnav a[aria-current]:not(.knopf-anfrage)::after{transform:scaleX(1);transform-origin:left center;
  background:var(--line-hell)}
.hauptnav a:hover{color:var(--ink)}
.hauptnav a:not(.knopf-anfrage):hover::after{transform:scaleX(1);transform-origin:left center;background:var(--signal)}
.knopf-anfrage,button[type=submit]{border:1px solid transparent;color:var(--ink)!important;
  padding:9px 17px!important;border-radius:3px;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.028) 46%,rgba(211,176,111,.14) 100%);
  backdrop-filter:blur(12px) saturate(1.25);-webkit-backdrop-filter:blur(12px) saturate(1.25);
  transition:color 320ms var(--eo),transform 140ms var(--eo),background 320ms var(--eo)}
/* Der Rahmen: Verlaufsfläche, Mitte ausgeschnitten. */
.knopf-anfrage::after,button[type=submit]::after{content:'';position:absolute;inset:0;border-radius:3px;padding:1px;
  pointer-events:none;transition:background 320ms var(--eo);
  background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.09) 44%,rgba(211,176,111,.5) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
/* Die Tönung fährt von links ein, als Verlauf aus Glut und Schwarz. */
.knopf-anfrage::before,button[type=submit]::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(118deg,rgba(211,176,111,.26) 0%,rgba(176,140,74,.17) 55%,rgba(92,70,32,.1) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transform:scaleX(0);transform-origin:left center;transition:transform 420ms var(--eio)}
/* .hauptnav a setzt weiter unten eine eigene Übergangsliste und
   gewinnt über die Spezifität. Ohne diese Zeile springt der Knopf oben
   beim Drücken, statt zu federn wie der im Formular. */
.hauptnav .knopf-anfrage{transition:color 320ms var(--eo),transform 140ms var(--eo),background 320ms var(--eo)}
.knopf-anfrage:active,button[type=submit]:active{transform:scale(.97)}
.knopf-anfrage:hover::after,button[type=submit]:hover::after{background:linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.15) 44%,rgba(211,176,111,.62) 100%)}
.knopf-anfrage:hover::before,button[type=submit]:hover::before,
.knopf-anfrage:active::before,button[type=submit]:active::before{transform:scaleX(1)}

/* Kontaktzeilen im Menü: auf dem Rechner verborgen, dort ist der
   Knopf „Anfragen" richtig, Wählen wäre dort kein sinnvoller Vorgang. */
.cta-zeilen{display:none}

/* Menü auf dem Telefon */
.menuknopf{display:none;background:none;border:0;color:var(--ink);padding:8px;cursor:pointer;
  transition:transform 140ms var(--eo)}
.menuknopf:active{transform:scale(.94)}
.menuknopf svg{display:block}
.menuknopf .zu{display:none}
.menuknopf[aria-expanded=true] .auf{display:none}
.menuknopf[aria-expanded=true] .zu{display:block}

/* ===================== Aufmacher ===================== */
.buehne{min-height:92svh;display:flex;align-items:flex-end;
  padding:clamp(110px,16vh,150px) 0 clamp(40px,7vh,78px);position:relative;overflow:hidden}
.buehne .grund{position:absolute;inset:0}
.buehne .grund picture{display:contents}
.buehne .grund img{width:100%;height:100%;object-fit:cover;object-position:50% 66%;
  filter:saturate(1.04) contrast(1.02) brightness(.98);
  transform:scale(1.11);animation:heranziehen 14s var(--sanft) forwards;will-change:transform}
@keyframes heranziehen{to{transform:scale(1)}}
.buehne .grund::after{content:'';position:absolute;inset:0;background:
  linear-gradient(to top,var(--nacht) 1%,rgba(10,13,18,.3) 30%,rgba(10,13,18,.08) 100%),
  linear-gradient(100deg,rgba(10,13,18,.6) 0%,rgba(10,13,18,.16) 46%,rgba(10,13,18,0) 70%)}
.buehne .bahn{position:relative;width:100%}

@keyframes steigen{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
.buehne .bahn>.caps{color:rgba(244,243,241,.84)}
.buehne .bahn>.caps,.titel>*,.buehne .unten{opacity:0;
  animation:steigen 780ms var(--sanft) forwards}
.buehne .bahn>.caps{animation-duration:700ms;animation-delay:120ms}
.titel>*:nth-child(1){animation-delay:220ms}
.titel>*:nth-child(2){animation-delay:300ms}
.titel>*:nth-child(3){animation-delay:380ms}
.buehne .unten{animation-delay:520ms}
.titel>span{display:block}
.titel{font-family:'Archivo Narrow',sans-serif;font-weight:600;
  font-size:clamp(42px,10.2vw,164px);line-height:.86;letter-spacing:-.028em;text-transform:uppercase}
.titel em{font-style:normal;display:block;
  -webkit-text-stroke:2px rgba(244,243,241,.92);color:rgba(244,243,241,.06);paint-order:stroke fill}
.buehne .unten{margin-top:clamp(22px,3.4vh,32px);display:flex;flex-wrap:wrap;
  gap:22px 40px;align-items:flex-end}
.buehne .unten p{max-width:44ch;color:#c5c7cb;line-height:1.68;font-size:15.5px}
.zaehler{margin-left:auto;display:flex;gap:clamp(18px,2.6vw,34px)}
.zaehler b{display:block;font-family:'Archivo Narrow',sans-serif;font-weight:600;
  font-size:clamp(20px,2.3vw,28px);line-height:1.1}

/* ===================== Querstrecke ===================== */
.strecke{position:relative;
  /* Platz, den sich die Überschrift nimmt. Alles andere rechnet damit. */
  --kopfzone:clamp(150px,18vh,206px)}
.strecke .halt{position:sticky;top:0;height:100svh;display:flex;align-items:center;
  overflow:hidden;padding-top:var(--kopfzone);box-sizing:border-box}
.schiene{display:flex;gap:clamp(14px,2vw,28px);padding:0 var(--rand);will-change:transform}
.etappe{flex:0 0 clamp(248px,31vw,420px);position:relative}
.etappe .bild{display:block;position:relative;overflow:hidden;aspect-ratio:3/4;
  /* 220 = Titelzeile und Untertitel der Karte, plus zweimal der untere
     Freiraum. Zweimal, weil die Karte mittig sitzt und jeder Zuschlag
     nur zur Hälfte nach unten wirkt. */
  max-height:calc(100svh - var(--kopfzone) - 220px);background:var(--band)}
.etappe .bild img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) brightness(.8);transform:scale(1.03);
  transition:transform 900ms var(--eo),filter 500ms var(--eo)}
.etappe .nr{position:absolute;top:12px;left:14px;font-family:'Archivo Narrow',sans-serif;
  font-size:11px;letter-spacing:.2em;color:var(--signal)}
.etappe h3{margin-top:14px;font-family:'Archivo Narrow',sans-serif;font-weight:500;
  font-size:clamp(15px,1.5vw,20px);text-transform:uppercase;line-height:1.16}
.etappe p{margin-top:5px;font-size:12.5px;color:var(--dim)}
.etappe a{text-decoration:none;color:inherit;display:block}
@media(hover:hover)and(pointer:fine){
  .etappe a:hover .bild img{transform:scale(1.07);filter:saturate(1) brightness(1)}
  .etappe a:hover h3{color:var(--ink)}
}
.streckenkopf{position:absolute;top:clamp(78px,12vh,120px);left:0;right:0;pointer-events:none;z-index:2}
.streckenkopf .bahn{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.streckenkopf h2{font-family:'Archivo Narrow',sans-serif;font-weight:600;
  font-size:clamp(20px,2.6vw,34px);text-transform:uppercase;letter-spacing:-.01em}
.streckenkopf a{pointer-events:auto;text-decoration:none}
.wischen{display:none}
@media(hover:hover)and(pointer:fine){.streckenkopf a:hover{color:var(--ink)}}
.fortschritt{position:absolute;left:var(--rand);right:var(--rand);bottom:clamp(36px,6vh,64px);
  height:1px;background:var(--line);z-index:2}
.fortschritt i{display:block;height:1px;background:var(--signal);transform-origin:left;transform:scaleX(0)}

/* ===================== Abschnitte ===================== */
section{padding:clamp(60px,10vh,118px) 0}
.abschnittskopf{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin-bottom:clamp(24px,4vh,40px);border-top:1px solid var(--line);padding-top:16px}
.abschnittskopf h2{font-family:'Archivo Narrow',sans-serif;font-weight:600;
  font-size:clamp(22px,3.2vw,40px);text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.abschnittskopf .rechts{margin-left:auto}

/* Über mich */
.person{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,76px);align-items:start}
.person p{color:#b6b9bd;line-height:1.82;font-size:15.5px}
.person p+p{margin-top:16px}
.person .spruch{margin-top:28px;border-left:2px solid var(--signal);padding-left:20px;
  font-family:'Archivo Narrow',sans-serif;font-size:clamp(17px,2.1vw,23px);line-height:1.4;color:var(--ink)}
.person .portraet{aspect-ratio:3/2;overflow:hidden;background:var(--band)}
.person .portraet img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(.9)}

/* Leistungen als Akkordeon.
   Sechs Zeilen statt sechs Kästen. Wer mehr wissen will, klappt auf.
   Gebaut mit details/summary, damit es ohne JavaScript und mit der
   Tastatur funktioniert. Der erste Punkt steht offen, sonst sieht
   niemand, dass sich hier etwas öffnen lässt. */
.leistungen{border-top:1px solid var(--line)}
.leistungen details{border-bottom:1px solid var(--line)}
.leistungen summary{display:flex;align-items:center;gap:clamp(14px,2vw,28px);
  padding:clamp(17px,2.2vw,24px) 0;cursor:pointer;list-style:none;
  transition:padding-left 300ms var(--eo)}
.leistungen summary::-webkit-details-marker{display:none}
.leistungen summary::marker{content:''}
.leistungen .nr{flex:0 0 auto;font-family:'Archivo Narrow',sans-serif;font-size:12px;
  letter-spacing:.2em;color:var(--signal)}
.leistungen h3{flex:1;min-width:0;margin:0;font-family:'Archivo Narrow',sans-serif;
  font-weight:500;font-size:clamp(17px,2.1vw,25px);text-transform:uppercase;
  line-height:1.14;transition:color 200ms var(--eo)}
@media(hover:hover)and(pointer:fine){
  .leistungen summary:hover{padding-left:10px}
  .leistungen summary:hover h3{color:#fff}
}
.leistungen summary:active{transform:scale(.998)}

/* Das Kreuz dreht sich zum Strich, statt ein Zeichen auszutauschen */
.plus{position:relative;flex:0 0 auto;width:14px;height:14px}
.plus::before,.plus::after{content:'';position:absolute;background:var(--signal)}
.plus::before{left:0;top:6px;width:14px;height:2px}
.plus::after{left:6px;top:0;width:2px;height:14px;
  transition:transform 320ms var(--eo)}
.leistungen details[open] .plus::after{transform:rotate(90deg)}

.klappe{padding:0 0 clamp(18px,2.4vw,28px) calc(clamp(14px,2vw,28px) + 22px);
  display:grid;grid-template-rows:1fr}
.leistungen details[open] .klappe{animation:aufklappen 320ms var(--eo)}
@keyframes aufklappen{from{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}
.klappe ul{min-height:0;overflow:hidden;list-style:none;color:#9da0a5;
  font-size:14.2px;line-height:1.7;
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px clamp(18px,2.6vw,44px)}
.klappe li{padding-left:15px;position:relative}
.klappe li::before{content:'';position:absolute;left:0;top:.76em;width:7px;height:1px;
  background:var(--line-hell)}

/* Marken, nach Feld gruppiert.
   Eine reine Liste aus 26 Namen liest sich wie ein Telefonbuch. Die vier
   Felder machen daraus eine Aussage darüber, wo sie zu Hause ist. */
.marken{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,40px)}
.marken .feld h3{font-family:'Archivo Narrow',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--signal);text-align:center;
  padding-bottom:11px;border-bottom:1px solid var(--line);margin-bottom:6px}
.marken .feld span{display:block;font-family:'Archivo Narrow',sans-serif;font-size:14.5px;
  text-transform:uppercase;letter-spacing:.04em;color:#a9acb1;padding:8px 0;text-align:center;
  transition:color 200ms var(--eo)}
@media(hover:hover)and(pointer:fine){.marken .feld span:hover{color:var(--ink)}}

/* ===================== Kontakt =====================
   Geteilter Schirm: links das Bild, rechts das Formular als Glasfeld.
   Das Bild läuft über die ganze Breite und wird nach rechts abgedunkelt,
   damit das Glas etwas hinter sich hat und nicht auf schwarzer Fläche
   schwebt. */
.kontakt{position:relative;overflow:hidden;padding:0;
  background:var(--nacht);border-top:1px solid var(--line)}
.kontakt::before{content:'';position:absolute;inset:0;
  background:url('bilder/kontakt-cockpit.jpg') center 42%/cover;
  transform:scale(1.04)}
.kontakt::after{content:'';position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(10,13,18,.28) 0%,rgba(10,13,18,.46) 34%,
    rgba(10,13,18,.86) 56%,rgba(10,13,18,.95) 100%),
  linear-gradient(to bottom,rgba(10,13,18,.42),rgba(10,13,18,.1) 34%,rgba(10,13,18,.6))}
.kontakt .bahn{position:relative;z-index:2;max-width:none;padding:0}
.kontaktraster{display:grid;grid-template-columns:1fr 1fr;gap:0;
  align-items:stretch;min-height:min(680px,86vh)}
.kontaktraster>div:first-child{display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(30px,4.6vw,76px)}
.kontaktraster .caps{color:rgba(244,243,241,.8)}
.kontaktraster h2{font-family:'Archivo Narrow',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(26px,4.2vw,54px);line-height:.94;letter-spacing:-.022em;
  text-shadow:0 2px 26px rgba(0,0,0,.5)}
.kontaktraster .direkt{margin-top:26px;display:flex;flex-direction:column;gap:11px}
.kontaktraster .direkt a{font-family:'Archivo Narrow',sans-serif;font-size:clamp(16px,1.8vw,20px);
  text-decoration:none;display:inline-flex;align-items:center;gap:10px;width:fit-content;
  border-bottom:1px solid var(--line-hell);padding-bottom:3px;
  transition:border-color 220ms var(--eo),color 220ms var(--eo)}
.kontaktraster .direkt .kreis,.kontaktraster .direkt .pf,.kontaktraster .direkt .txt b{display:none}
@media(hover:hover)and(pointer:fine){.kontaktraster .direkt a:hover{border-color:var(--signal)}}

form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#anfrage{align-self:center;margin:clamp(20px,3vw,54px);
  background:rgba(19,21,24,.56);backdrop-filter:blur(22px) saturate(1.35);
  -webkit-backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid rgba(255,255,255,.14);border-radius:16px;
  padding:clamp(22px,2.6vw,36px);
  box-shadow:0 26px 60px rgba(0,0,0,.42)}
#anfrage input,#anfrage select,#anfrage textarea{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.17);border-radius:7px}
#anfrage input:hover,#anfrage select:hover,#anfrage textarea:hover{border-color:rgba(255,255,255,.3)}
#anfrage input:focus,#anfrage select:focus,#anfrage textarea:focus{
  background:rgba(255,255,255,.12);border-color:var(--signal)}
#anfrage .hinweis{color:rgba(244,243,241,.62)}
#anfrage .hinweis a{color:rgba(244,243,241,.85)}
.feld{display:flex;flex-direction:column;gap:7px}
.feld.voll{grid-column:1/-1}
label{font-family:'Archivo Narrow',sans-serif;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim)}
input,select,textarea{
  font-family:'Archivo',sans-serif;font-size:15px;font-weight:300;color:var(--ink);
  background:var(--nacht);border:1px solid var(--line);border-radius:2px;
  padding:12px 13px;width:100%;
  transition:border-color 200ms var(--eo),background-color 200ms var(--eo)}
textarea{resize:vertical;min-height:120px;line-height:1.6}
input:hover,select:hover,textarea:hover{border-color:var(--line-hell)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--signal);background:#070a0e}
select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 17px) 20px,calc(100% - 12px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.absenden{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
button[type=submit]{
  font-family:'Archivo Narrow',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:14px 26px!important;cursor:pointer}
/* Der Rahmen: Verlaufsfläche, Mitte ausgeschnitten. */
/* Kräftiger als oben: der Grund unter diesem Knopf ist fast schwarz,
   dieselbe Tönung wäre dort nicht zu sehen. */
button[type=submit]::before{
  background:linear-gradient(118deg,rgba(211,176,111,.42) 0%,rgba(176,140,74,.28) 55%,rgba(92,70,32,.15) 100%)}
.hinweis{font-size:12.5px;color:var(--dimmer);max-width:42ch;line-height:1.6}
.hinweis a{color:var(--dim)}

/* ===================== Fußzeile ===================== */
.fuss{border-top:1px solid var(--line);padding:clamp(34px,5vh,54px) 0 30px;background:var(--nacht)}
.fussraster{display:flex;flex-wrap:wrap;gap:16px 34px;justify-content:space-between;align-items:baseline}
.fussraster a{text-decoration:none;color:var(--dim);transition:color 180ms var(--eo)}
@media(hover:hover)and(pointer:fine){.fussraster a:hover{color:var(--ink)}}
.fussnav{display:flex;flex-wrap:wrap;gap:8px 20px}

/* ===================== Projektseite ===================== */
.seitenkopf{padding:clamp(120px,18vh,180px) 0 clamp(26px,4vh,44px);border-bottom:1px solid var(--line)}
.seitenkopf h1{font-family:'Archivo Narrow',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(36px,7.4vw,104px);line-height:.88;letter-spacing:-.025em}
.seitenkopf p{margin-top:20px;max-width:56ch;color:#b6b9bd;line-height:1.74}

.filter{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  padding:clamp(22px,3.4vh,34px) 0 clamp(18px,3vh,28px)}
/* Der Schalter für die Formate. Gestrichelt, weil dahinter noch etwas
   liegt, das man erst holen muss. */
.filter .mehr{display:inline-flex;align-items:center;gap:9px;
  margin-left:12px;border-style:dashed;color:var(--signal)}
.filter .mehr .plus{width:11px;height:11px}
.filter .mehr .plus::before{top:5px;width:11px}
.filter .mehr .plus::after{left:5px;height:11px}
.filter .mehr[aria-expanded=true] .plus::after{transform:rotate(90deg)}
.filter .formatliste{display:none;width:100%;flex-wrap:wrap;gap:7px;
  padding:14px 0 2px;margin-top:11px;border-top:1px solid var(--line)}
.filter .formatliste[data-auf]{display:flex}
.filter button{font-family:'Archivo Narrow',sans-serif;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);background:transparent;
  border:1px solid var(--line);border-radius:2px;padding:8px 14px;cursor:pointer;
  transition:transform 140ms var(--eo),border-color 200ms var(--eo),color 200ms var(--eo),background-color 200ms var(--eo)}
.filter button:active{transform:scale(.97)}
@media(hover:hover)and(pointer:fine){.filter button:hover{border-color:var(--line-hell);color:var(--ink)}}
.filter button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--nacht)}

.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,22px);
  padding-bottom:clamp(50px,9vh,110px)}
.tafel{display:block;text-decoration:none;color:inherit;
  transition:opacity 340ms var(--eo),transform 340ms var(--eo)}
.tafel[hidden]{display:none}
.tafel .bild{display:block;overflow:hidden;aspect-ratio:4/3;background:var(--band);position:relative}
.tafel .bild img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) brightness(.84);
  transform:scale(1.02);transition:transform 820ms var(--eo),filter 460ms var(--eo)}
.tafel .marke{position:absolute;left:0;bottom:0;color:var(--ink);
  background:linear-gradient(130deg,rgba(211,176,111,.32) 0%,rgba(211,176,111,.09) 58%,rgba(211,176,111,0) 100%),
    linear-gradient(130deg,rgba(10,13,18,.72) 0%,rgba(10,13,18,.8) 100%);
  backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset -1px 0 0 rgba(211,176,111,.45),
    0 6px 18px rgba(0,0,0,.35);
  font-family:'Archivo Narrow',sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;clip-path:inset(0 100% 0 0);transition:clip-path 380ms var(--eo)}
.tafel h2{font-family:'Archivo Narrow',sans-serif;font-weight:500;font-size:clamp(16px,1.7vw,21px);
  text-transform:uppercase;line-height:1.16;margin:13px 0 4px}
.tafel .meta{display:block;font-size:12.5px;color:var(--dim)}
.tafel .orte{display:block;margin-top:4px;font-size:12.5px;color:var(--dimmer)}
.tafel .text{display:block;margin-top:8px;font-size:13.4px;color:#9da0a5;line-height:1.62}
@media(hover:hover)and(pointer:fine){
  .tafel:hover .bild img{transform:scale(1.05);filter:saturate(1) brightness(1)}
  .tafel:hover .marke{clip-path:inset(0 0 0 0)}
}
.leermeldung{padding:40px 0;color:var(--dim)}

/* ===================== Rechtstexte ===================== */
.rechtstext{padding:clamp(110px,16vh,170px) 0 clamp(60px,9vh,110px)}
.rechtstext h1{font-family:'Archivo Narrow',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(30px,5.4vw,64px);line-height:.94;letter-spacing:-.02em;margin-bottom:clamp(24px,4vh,40px)}
.rechtstext h2{font-family:'Archivo Narrow',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:19px;letter-spacing:.02em;margin:34px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.rechtstext h3{font-family:'Archivo Narrow',sans-serif;font-weight:500;font-size:16px;margin:20px 0 8px}
.rechtstext p,.rechtstext li{color:#b1b4b9;line-height:1.78;font-size:14.8px}
.rechtstext p+p{margin-top:12px}
.rechtstext ul{margin:10px 0 0 18px}
.rechtstext li{margin-bottom:6px}
.rechtstext a{color:var(--ink)}
.offen::after{content:'';position:absolute;inset:0;border-radius:3px;padding:1px;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 44%,rgba(211,176,111,.5) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
.offen{position:relative;border:1px solid transparent;border-radius:3px;
  background:linear-gradient(135deg,rgba(211,176,111,.12) 0%,rgba(211,176,111,.035) 52%,rgba(255,255,255,.022) 100%);
  padding:16px 18px;margin:18px 0;
  font-size:13.6px;color:#d9c0b6}



/* ===================== Bedienung mit dem Finger =====================
   Apple rechnet mit mindestens 44px Kantenlänge. Gemessen waren es
   vorher 18 bis 34px. Außerdem zoomt iOS beim Hineintippen in ein Feld,
   dessen Schrift kleiner als 16px ist. */
@media (pointer:coarse), (max-width:760px){
  a,button{-webkit-tap-highlight-color:transparent}
  .marke{display:inline-block;padding:10px 0}
  .menuknopf{padding:15px}
  .hauptnav a{padding:14px 0}
  .fussnav a,.fussraster a{display:inline-block;padding:13px 0}
  .kontaktraster .direkt a{padding-top:10px;padding-bottom:11px}
  .streckenkopf a{display:inline-block;padding:13px 0}
  .filter button{min-height:44px;padding:11px 16px;font-size:12.5px}
  input,select,textarea{font-size:16px;padding:14px 13px}
  button[type=submit]{min-height:50px}
  .tafel,.etappe a{-webkit-touch-callout:none}
}

/* ===================== Kacheln ohne Foto =====================
   Solange kein Bild vorliegt, tritt eine gesetzte Schrifttafel an
   seine Stelle. Sie füllt dasselbe Seitenverhältnis, damit das
   Raster nicht springt, wenn die Fotos später nachkommen. */
.platzhalter{display:flex!important;flex-direction:column;justify-content:flex-end;
  gap:6px;padding:clamp(14px,2vw,24px);
  background:linear-gradient(158deg,var(--band2) 0%,var(--band) 62%,#0e131a 100%)}
.platzhalter::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,transparent 0 16px,rgba(244,243,241,.022) 16px 32px)}
.platzhalter::after{content:'';position:absolute;left:0;top:0;width:3px;height:44px;background:var(--signal)}
.ph-jahr{position:relative;font-family:'Archivo Narrow',sans-serif;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--signal)}
.ph-titel{position:relative;font-family:'Archivo Narrow',sans-serif;font-weight:600;
  text-transform:uppercase;font-size:clamp(22px,2.8vw,42px);line-height:.94;
  letter-spacing:-.022em;color:rgba(244,243,241,.34)}
.etappe .platzhalter .nr,.tafel .platzhalter .marke{z-index:2}
/* Platz für das Schildchen, sonst liegt es auf dem Kundennamen */
.tafel .platzhalter{padding-bottom:46px}
.tafel .platzhalter .marke{clip-path:inset(0 0 0 0)}

/* Kundenname über dem Projekttitel */
.etappe .kunde,.tafel .kunde{display:block;font-family:'Archivo Narrow',sans-serif;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--signal);
  margin-top:13px}
.etappe .kunde+h3,.tafel .kunde+h2{margin-top:4px}

/* ===================== Einblenden ===================== */
.zeig{opacity:0;transform:translateY(16px);
  transition:opacity 620ms var(--eo),transform 620ms var(--eo)}
.zeig.da{opacity:1;transform:none}

/* ===================== Schmale Geräte ===================== */
@media(max-width:900px){
  .person{display:flex;flex-direction:column}
  .person .portraet{order:-2;max-width:none;aspect-ratio:4/5;
    margin:0 calc(-1 * var(--rand)) 24px}
  .person #persontext{display:contents}
  .person .spruch{order:-1;margin:0 0 26px;font-size:17px}
  .person .portraet img{object-position:41% 46%}
  .klappe ul{grid-template-columns:1fr 1fr}
  /* Das Kontaktbild ist quer aufgebaut. Über die ganze hohe Fläche
     gezogen sähe man nur Instrumente. Auf dem Telefon läuft es als
     Streifen im eigenen Seitenverhältnis. */
  .kontakt{background:var(--nacht)}
  .kontakt::before{inset:0 0 auto;height:min(100vw,460px);transform:none;
    background-position:55% 50%;
    /* Dieselbe Behandlung wie die Projektfotos auf der Seite, eine Spur
       tiefer, weil es hier Grund ist und nicht Motiv. */
    filter:saturate(.82) brightness(.74)}
  /* Der Schleier bleibt bis 78 Prozent fast durchsichtig, erst darunter
     läuft der Streifen in den Grund aus. */
  .kontakt::after{inset:0 0 auto;height:calc(min(100vw,460px) + 60px);background:
    linear-gradient(to bottom,rgba(10,13,18,.5) 0%,rgba(10,13,18,.24) 26%,
      rgba(10,13,18,.3) 70%,rgba(10,13,18,.72) 88%,var(--nacht) 100%)}
  .kontaktraster{grid-template-columns:1fr;min-height:0}
  /* ============ 4. Kontaktwege als Karten wie im Menü ============ */
  .kontaktraster .direkt{margin-top:22px;gap:0;
    border-top:1px solid rgba(255,255,255,.14)}
  .kontaktraster .direkt a{display:flex;align-items:center;gap:14px;width:auto;
    padding:15px 0!important;border-bottom:1px solid rgba(255,255,255,.14);
    transition:padding-left 240ms var(--eo)}
  .kontaktraster .direkt a:active{padding-left:6px}
  .kontaktraster .direkt .kreis{display:grid;flex:0 0 auto;width:38px;height:38px;
    border-radius:50%;position:relative;border:1px solid transparent;place-items:center;
    color:var(--signal);
    background:linear-gradient(135deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.025) 48%,rgba(211,176,111,.16) 100%)}
  .kontaktraster .direkt .kreis::after{content:'';position:absolute;inset:0;border-radius:50%;
    padding:1px;pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 44%,rgba(211,176,111,.5) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude}
  .kontaktraster .direkt .txt{flex:1;min-width:0}
  .kontaktraster .direkt .txt b{display:block;font-family:'Archivo Narrow',sans-serif;
    font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
  .kontaktraster .direkt .txt span{display:block;font-size:16px;margin-top:2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kontaktraster .direkt .pf{display:block;color:var(--dim);font-size:18px}
  .kontaktraster>div:first-child{padding:calc(min(100vw,460px) + 30px) var(--rand) clamp(22px,4vh,34px)}
  #anfrage{margin:0 var(--rand) clamp(34px,6vh,60px);backdrop-filter:blur(14px)}
  .galerie{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  /* Kleinste Schriften eine Spur größer, 10,5px liest auf dem Telefon niemand */
  .caps{font-size:12px}
  .etappe p,.tafel .meta{font-size:13px}
  .tafel .marke{font-size:11.5px;padding:6px 11px}
  .ph-jahr{font-size:12px}
  section{padding:clamp(48px,8vh,118px) 0}
  /* Die Konturschrift wird bei 42px sonst zu fett */
  .titel em{-webkit-text-stroke-width:1.5px}

  .menuknopf{display:block}
  .hauptnav{position:fixed;inset:0 0 auto 0;top:0;padding:74px var(--rand) 28px;
    flex-direction:column;align-items:flex-start;gap:4px;
    background:var(--nacht);
    border-bottom:1px solid var(--line);box-shadow:0 22px 40px rgba(0,0,0,.45);
    clip-path:inset(0 0 100% 0);transition:clip-path 380ms var(--eo);z-index:-1}
  .hauptnav[data-offen]{clip-path:inset(0 0 0 0)}
  .hauptnav a{font-size:19px;letter-spacing:.06em;padding:11px 0;color:var(--ink)}
  .hauptnav .knopf-anfrage{display:none}
  .cta-zeilen{display:block;width:100%;margin-top:20px;border-top:1px solid var(--line)}
  .cta-zeilen a{display:flex;align-items:center;gap:14px;padding:17px 0;
    border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);
    transition:padding-left 240ms var(--eo)}
  .cta-zeilen a:active{padding-left:6px}
  .cta-zeilen .kreis{flex:0 0 auto;width:38px;height:38px;border-radius:50%;position:relative;
    border:1px solid transparent;display:grid;place-items:center;color:var(--signal);
    background:linear-gradient(135deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.025) 48%,rgba(211,176,111,.16) 100%)}
  .cta-zeilen .kreis::after{content:'';position:absolute;inset:0;border-radius:50%;padding:1px;
    pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 44%,rgba(211,176,111,.5) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude}
  .cta-zeilen .txt{flex:1;min-width:0}
  .cta-zeilen .txt b{display:block;font-family:'Archivo Narrow',sans-serif;font-weight:600;
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
  .cta-zeilen .txt span{display:block;font-size:16px;margin-top:2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cta-zeilen .pf{color:var(--dim);font-size:18px}
  .zaehler{margin-left:0;width:100%;flex-wrap:wrap;gap:16px 26px}
  .klappe ul{grid-template-columns:1fr}
  .klappe{padding-left:0}
  .galerie{grid-template-columns:1fr}
  .marken{grid-template-columns:1fr 1fr}
  form{grid-template-columns:1fr}
  /* Querstrecke: auf dem Telefon wischt man seitwärts, statt zu stapeln.
     Das hält die Idee der Fahrspur und spart rund 2700px Scrollweg. */
  .strecke{height:auto!important}
  .strecke .halt{position:static;height:auto;display:block;overflow:visible;padding:30px 0 6px}
  .schiene{flex-wrap:nowrap;width:100%;gap:12px;transform:none!important;
    padding:0 0 0 var(--rand);
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-left:var(--rand);
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .schiene::-webkit-scrollbar{display:none}
  .etappe{flex:0 0 min(74vw,300px);scroll-snap-align:start}
  .etappe:last-child{margin-right:var(--rand)}
  .streckenkopf{position:static;margin-bottom:16px}
  .streckenkopf .bahn{flex-wrap:wrap;align-items:baseline;gap:6px 14px}
  .streckenkopf h2{width:100%}
  .wischen{display:inline;color:var(--signal)}
  .fortschritt{display:none}
  .buehne{min-height:86svh}
  /* Handy: eigener Zuschnitt im Hochformat 2:3. Das Flugzeug steht
     oben, darunter bleibt Vorfeld für den Textblock. */
  .buehne .grund img{object-position:50% 25%}
  .buehne .grund::after{background:
    linear-gradient(to top,var(--nacht) 3%,rgba(10,13,18,.88) 30%,rgba(10,13,18,.44) 56%,rgba(10,13,18,.1) 100%),
    linear-gradient(to bottom,rgba(10,13,18,.5) 0%,rgba(10,13,18,.26) 26%,rgba(10,13,18,0) 44%)}
  /* Der Einleitungsabsatz steht sinngemäß noch einmal unter „Über mich“
     und würde auf dem Telefon über dem Flugzeug liegen. */
  .buehne .unten p{display:none}
  .buehne .unten{margin-top:clamp(26px,4vh,38px)}

  /* Filterzeile war 413px hoch, also ein halbes Telefon voller Knöpfe.
     Jetzt eine Zeile zum Wischen, mit weichem Rand. */
  .filter{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:16px var(--rand);margin:0 calc(-1 * var(--rand));
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 34px),transparent 100%);
    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 34px),transparent 100%)}
  .filter::-webkit-scrollbar{display:none}
  .filter button{flex:0 0 auto}
  .filter .mehr{display:none}
  .filter .formatliste,.filter .formatliste[data-auf]{display:contents}

  /* Kennzahlen als festes Zweierraster, sonst rutschen sie ungleich */
  .zaehler{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-left:0;width:100%}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important}
  .zeig{opacity:1;transform:none}
}


/* ===================== Weniger Bewegung =====================
   Wer im Betriebssystem „Bewegung reduzieren“ gewählt hat, bekommt die
   Seite ohne Heranziehen, ohne Staffelung und ohne hochzählende Zahlen.
   seite.js fragt dieselbe Einstellung ab. */
@media(prefers-reduced-motion:reduce){
  .buehne .grund img{animation:none!important;transform:none!important}
  .buehne .bahn>.caps,.titel>*,.buehne .unten{opacity:1!important;animation:none!important}
  .zeig{opacity:1!important;transform:none!important}
  *{scroll-behavior:auto!important}
}


/* =====================================================================
   Eigene Bausteine für Flying Limburg
   ===================================================================== */

/* Streifengold: vier Töne wie auf der Schulterklappe, statt einer
   flachen Farbe. Nur für wenige Stellen, sonst wird es Messing. */
:root{
  --gold-verlauf:linear-gradient(100deg,#8c6c34 0%,#e9d09a 28%,#c79d56 52%,#f3e2b6 70%,#a8813f 100%);
  --fl-glas:linear-gradient(135deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.025) 46%,rgba(211,176,111,.12) 100%);
}
body{background:
  radial-gradient(1200px 600px at 80% -10%,rgba(40,64,98,.18),transparent 60%),var(--nacht)}
.gold{background:var(--gold-verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Marke im Kopf: kleines Leitwerk vor dem Namen */
.marke{display:inline-flex;align-items:center;gap:10px}
.marke svg{flex:0 0 auto;color:var(--signal)}

/* ---------- Aufmacher: Kopfzeile mit Fallblattanzeige ---------- */
.buehne .grund img{object-position:50% 58%}
.buehne .grund::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Warmer Hauch der Landescheinwerfer, damit Titel und Bild zusammengehören */
  background:radial-gradient(60% 45% at 52% 56%,rgba(255,196,120,.10),transparent 70%)}
.buehne .grund::after{z-index:2}
.leitzeile{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 30px;
  flex-wrap:wrap;margin-bottom:clamp(14px,2.4vh,22px);
  opacity:0;animation:steigen 700ms var(--sanft) 120ms forwards}
.leitzeile .caps{color:rgba(243,241,236,.84)}

.anzeige{display:flex;align-items:center;gap:12px}
.anzeige .caps{font-size:10.5px;color:var(--dim);line-height:1.3;text-align:right}
.anzeige .code{font-family:'Archivo Narrow',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.2em;color:var(--dim);padding-right:2px}
.blaetter{display:flex;gap:3px}
.blatt{position:relative;display:grid;place-items:center;width:clamp(20px,1.8vw,26px);
  height:clamp(28px,2.5vw,36px);border-radius:3px;
  background:linear-gradient(to bottom,#1b222c 0%,#141a22 49.5%,#0b0f15 50.5%,#121820 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 6px rgba(0,0,0,.45);
  font-family:'Archivo Narrow',sans-serif;font-weight:600;font-size:clamp(15px,1.4vw,20px);
  color:#ecd6a4;text-transform:uppercase;overflow:hidden}
.blatt::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(0,0,0,.7);box-shadow:0 1px 0 rgba(255,255,255,.04)}
.blatt.klappt{animation:klappen 70ms linear}
@keyframes klappen{0%{transform:scaleY(1)}50%{transform:scaleY(.18)}100%{transform:scaleY(1)}}

/* ---------- Aufmacher: Kursband wie im Head-up-Display ----------
   Liegt oben über dem Bild, sehr zurückhaltend. Es dreht mit der Maus
   und mit dem Scrollen ein paar Grad, mehr nicht. */
.kurs{position:absolute;z-index:3;left:50%;top:clamp(70px,10vh,104px);
  width:min(620px,74vw);height:70px;transform:translateX(-50%);pointer-events:none;
  opacity:0;animation:einblenden 1400ms var(--sanft) 900ms forwards;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 78%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 78%,transparent 100%)}
@keyframes einblenden{to{opacity:1}}
.kurs .band{position:absolute;left:0;top:24px;height:30px;will-change:transform}
.kurs .band i{position:absolute;bottom:0;width:1px;height:7px;background:rgba(236,214,164,.55)}
.kurs .band i.lang{height:12px;background:rgba(236,214,164,.8)}
.kurs .band b{position:absolute;bottom:15px;transform:translateX(-50%);
  font-family:'Archivo Narrow',sans-serif;font-weight:500;font-size:11px;letter-spacing:.08em;
  color:rgba(236,214,164,.78)}
.kurs .grundlinie{position:absolute;left:0;right:0;top:54px;height:1px;background:rgba(236,214,164,.3)}
.kurs .zeiger{position:absolute;left:50%;top:55px;width:0;height:0;transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:7px solid #ecd6a4}
.kurs .wert{position:absolute;left:50%;top:0;transform:translateX(-50%);
  font-family:'Archivo Narrow',sans-serif;font-weight:600;font-size:12px;letter-spacing:.2em;
  color:#ecd6a4;padding:2px 8px;border:1px solid rgba(236,214,164,.5);border-radius:2px;
  background:rgba(10,13,18,.35);white-space:nowrap}
.kurs .rwy{position:absolute;right:23%;top:4px;font-family:'Archivo Narrow',sans-serif;
  font-size:10px;letter-spacing:.24em;color:rgba(236,214,164,.6);white-space:nowrap}

/* ---------- Querstrecke: Ortszeile in Gold ---------- */
.etappe .kunde{color:var(--signal)}

/* ---------- Pilot werden: Etappen als Akkordeon ---------- */
.klappe .text{min-height:0;overflow:hidden;color:#a3aab5;font-size:14.6px;line-height:1.74;
  max-width:70ch}
.klappe .text p+p{margin-top:10px}
.leistungen .jahr{flex:0 0 auto;font-family:'Archivo Narrow',sans-serif;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.weiter{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(20px,3vh,30px);
  font-family:'Archivo Narrow',sans-serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line-hell);padding-bottom:4px;
  transition:border-color 220ms var(--eo),gap 260ms var(--eo)}
@media(hover:hover)and(pointer:fine){.weiter:hover{border-color:var(--signal);gap:14px}}

/* ---------- Simulatorflug ---------- */
.simulator{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(24px,5vw,76px);align-items:start}
.simulator .bild{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--band);border-radius:2px}
.simulator .bild img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.86)}
.simulator .bild::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,13,18,.72) 0%,rgba(10,13,18,0) 42%)}
.simulator .bild figcaption{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;
  font-family:'Archivo Narrow',sans-serif;font-size:clamp(18px,1.9vw,24px);line-height:1.25;color:var(--ink)}
.simulator .bild figcaption span{display:block;margin-top:6px;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--signal)}
.status{display:inline-flex;align-items:center;gap:10px;font-family:'Archivo Narrow',sans-serif;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#e0c79a;
  border:1px solid rgba(211,176,111,.36);border-radius:99px;padding:7px 14px 7px 12px;
  background:rgba(211,176,111,.07)}
.status::before{content:'';width:7px;height:7px;border-radius:50%;background:#d3b06f;
  box-shadow:0 0 0 3px rgba(211,176,111,.18)}
.simulator h3{margin-top:18px;font-family:'Archivo Narrow',sans-serif;font-weight:600;
  font-size:clamp(24px,3.2vw,40px);line-height:1;text-transform:uppercase;letter-spacing:-.015em}
.simulator .einleitung{margin-top:14px;color:#b3b9c2;line-height:1.78;font-size:15.5px;max-width:52ch}
.eckdaten{margin-top:clamp(22px,3.4vh,34px);border-top:1px solid var(--line)}
.eckdaten div{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:16px 0;
  border-bottom:1px solid var(--line)}
.eckdaten dt{font-family:'Archivo Narrow',sans-serif;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--signal);padding-top:3px}
.eckdaten dt span{display:block;margin-top:3px;color:var(--dim);letter-spacing:.14em}
.eckdaten dd{color:#a3aab5;font-size:14.4px;line-height:1.7}

.muster{margin-top:clamp(24px,3.6vh,36px);display:grid;grid-template-columns:1fr 1fr;gap:14px}
.muster article{position:relative;overflow:hidden;border-radius:10px;padding:22px 22px 20px;
  border:1px solid transparent;background:var(--fl-glas)}
.muster article::after{content:'';position:absolute;inset:0;border-radius:10px;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 44%,rgba(211,176,111,.42) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
.muster .typ{display:block;font-family:'Archivo Narrow',sans-serif;font-weight:600;
  font-size:clamp(46px,5.4vw,74px);line-height:.9;letter-spacing:-.03em;
  -webkit-text-stroke:1.5px rgba(236,214,164,.8);color:rgba(236,214,164,.05)}
.muster .caps{display:block;margin-top:12px;color:var(--signal)}
.muster h4{margin-top:4px;font-family:'Archivo Narrow',sans-serif;font-weight:500;font-size:19px;
  text-transform:uppercase}
.muster p{margin-top:8px;color:#9ea6b1;font-size:13.8px;line-height:1.66}
.preiszeile{margin-top:clamp(22px,3.4vh,32px);display:flex;align-items:center;flex-wrap:wrap;gap:16px 26px}
.preiszeile p{color:#a3aab5;font-size:14px;line-height:1.66;max-width:46ch;flex:1 1 280px}
.preiszeile p b{display:block;font-family:'Archivo Narrow',sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:3px}
a.knopf-anfrage{position:relative;display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-family:'Archivo Narrow',sans-serif;font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.preiszeile .knopf-anfrage{padding:14px 24px!important}

/* ---------- Fragen ---------- */
.fragen-raster{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(24px,5vw,76px)}
.fragen-raster .seite p{color:#a3aab5;line-height:1.74;font-size:14.8px;max-width:34ch}
.fragen-raster .seite .weiter{margin-top:18px}
.gruppe+.gruppe{margin-top:clamp(26px,4vh,40px)}
.gruppe>.caps{display:block;margin-bottom:10px;color:var(--signal)}
.fragen h3{text-transform:none;letter-spacing:0;font-size:clamp(16px,1.8vw,21px)}

/* ---------- Partner ---------- */
.marken{grid-template-columns:repeat(3,1fr)}
.marken .feld a{display:block;text-decoration:none;font-family:'Archivo Narrow',sans-serif;font-size:14.5px;
  text-transform:uppercase;letter-spacing:.06em;color:#a7afba;padding:9px 0;text-align:center;
  transition:color 200ms var(--eo),letter-spacing 300ms var(--eo)}
@media(hover:hover)and(pointer:fine){.marken .feld a:hover{color:var(--ink);letter-spacing:.1em}}

/* ---------- Kontakt: Instagramzeile ---------- */
.kontaktraster .kennzahl{margin-top:22px;display:flex;align-items:baseline;gap:12px}
.kontaktraster .kennzahl b{font-family:'Archivo Narrow',sans-serif;font-weight:600;
  font-size:clamp(34px,4vw,52px);line-height:1;letter-spacing:-.02em}
.kontaktraster .kennzahl span{color:rgba(243,241,236,.7);font-size:13.5px}
.kontaktraster .einl{margin-top:16px;max-width:40ch;color:rgba(243,241,236,.78);line-height:1.7;font-size:15px}

/* ---------- Artikelseite „Wie ich Pilot wurde“ ---------- */
.artikelkopf{position:relative;min-height:74svh;display:flex;align-items:flex-end;overflow:hidden;
  padding:clamp(120px,18vh,170px) 0 clamp(34px,6vh,60px)}
.artikelkopf .grund{position:absolute;inset:0}
.artikelkopf .grund img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  filter:saturate(1) brightness(1.15)}
.artikelkopf .grund::after{content:'';position:absolute;inset:0;background:
  linear-gradient(to top,var(--nacht) 2%,rgba(10,13,18,.55) 40%,rgba(10,13,18,.2) 100%),
  linear-gradient(100deg,rgba(10,13,18,.7) 0%,rgba(10,13,18,.1) 60%)}
.artikelkopf .bahn{position:relative;width:100%}
.artikelkopf h1{font-family:'Archivo Narrow',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(40px,8.4vw,128px);line-height:.86;letter-spacing:-.028em;margin-top:12px}
.artikelkopf h1 em{font-style:normal;display:block;-webkit-text-stroke:2px rgba(243,241,236,.92);
  color:rgba(243,241,236,.05)}
.artikelkopf .unter{margin-top:18px;color:#c5cad2;max-width:48ch;line-height:1.7}
.artikelraster{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,5vw,80px);
  padding-top:clamp(44px,8vh,90px);padding-bottom:clamp(44px,8vh,90px)}
.stationen{position:sticky;top:96px;align-self:start;list-style:none;border-left:1px solid var(--line)}
.stationen li a{display:block;padding:8px 0 8px 18px;margin-left:-1px;border-left:1px solid transparent;
  text-decoration:none;font-family:'Archivo Narrow',sans-serif;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);transition:color 200ms var(--eo),border-color 200ms var(--eo)}
.stationen li a[aria-current]{color:var(--ink);border-left-color:var(--signal)}
@media(hover:hover)and(pointer:fine){.stationen li a:hover{color:var(--ink)}}
.artikel{max-width:68ch}
.artikel h2{font-family:'Archivo Narrow',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(22px,2.6vw,32px);line-height:1.04;letter-spacing:-.01em;
  margin:clamp(40px,6vh,64px) 0 16px;scroll-margin-top:100px}
.artikel h2:first-child{margin-top:0}
.artikel h2 small{display:block;font-size:11px;letter-spacing:.24em;color:var(--signal);margin-bottom:8px;font-weight:500}
.artikel p,.artikel li{color:#b3b9c2;line-height:1.84;font-size:16px}
.artikel p+p{margin-top:16px}
.artikel ul{margin:14px 0 0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.artikel ul li{font-family:'Archivo Narrow',sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-hell);border-radius:99px;padding:5px 13px;line-height:1.4;color:#c8ced6}
.artikel .einstieg::first-letter{float:left;font-family:'Archivo Narrow',sans-serif;font-weight:600;
  font-size:74px;line-height:.8;padding:6px 12px 0 0;color:var(--signal)}
.artikel figure{margin:clamp(28px,4vh,40px) 0}
.artikel figure img{width:100%;border-radius:2px}
.artikel figcaption{margin-top:10px;font-size:12.5px;color:var(--dim)}
.funfact{position:relative;margin:clamp(34px,5vh,50px) 0;padding:24px 26px;border-radius:10px;
  border:1px solid transparent;background:var(--fl-glas)}
.funfact::after{content:'';position:absolute;inset:0;border-radius:10px;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 44%,rgba(211,176,111,.5) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
.funfact .caps{color:var(--signal)}
.funfact p{margin-top:8px;color:#d6dbe2}
.abschluss{margin-top:clamp(40px,6vh,60px);padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;justify-content:space-between}
.abschluss .gruss{font-family:'Archivo Narrow',sans-serif;font-weight:600;font-size:clamp(24px,3vw,36px);
  text-transform:uppercase;letter-spacing:-.01em}

@media(max-width:900px){
  .simulator,.fragen-raster{grid-template-columns:1fr}
  .simulator .bild{aspect-ratio:4/3;margin:0 calc(-1 * var(--rand))}
  .artikelraster{grid-template-columns:1fr}
  .stationen{display:none}
}
@media(max-width:760px){
  .leitzeile{flex-direction:column;align-items:flex-start}
  .anzeige{flex-wrap:wrap}
  .anzeige .caps{text-align:left}
  .kurs{width:86vw;top:70px;animation-delay:600ms}
  .kurs .rwy{display:none}
  .muster{grid-template-columns:1fr}
  .eckdaten div{grid-template-columns:1fr;gap:6px}
  .marken{grid-template-columns:1fr}
  /* Auf dem Telefon steht das Flugzeug oben, der Textblock darunter
     auf dunklem Grund. Das Bild endet bei 68 Prozent und läuft aus. */
  .buehne .grund img{height:68%;object-position:50% 72%}
  .buehne .grund::before{background:radial-gradient(70% 30% at 50% 45%,rgba(255,196,120,.12),transparent 70%)}
  .buehne .grund::after{background:
    linear-gradient(to top,var(--nacht) 34%,rgba(10,13,18,.7) 46%,rgba(10,13,18,.12) 62%,rgba(10,13,18,0) 76%),
    linear-gradient(to bottom,rgba(10,13,18,.55) 0%,rgba(10,13,18,0) 22%)}
  .artikelkopf h1 em{-webkit-text-stroke-width:1.5px}
}
@media(prefers-reduced-motion:reduce){
  .leitzeile,.kurs{opacity:1!important;animation:none!important}
  .blatt.klappt{animation:none}
}
.person .portraet{aspect-ratio:1586/1409}
.person .portraet img{object-position:50% 30%}
/* Eigene Stapelebene für den Grund, sonst legen sich Schleier und
   Lichthauch über Titel und Zahlen. */
.buehne .grund{z-index:0}
/* Das Nachtcockpit ist unten voller Anzeigen. Links unten, wo der Text
   steht, braucht es mehr Ruhe als bei einem Landschaftsbild. */
.kontakt::after{background:
  radial-gradient(90% 80% at 0% 100%,rgba(10,13,18,.9) 0%,rgba(10,13,18,.55) 45%,rgba(10,13,18,0) 75%),
  linear-gradient(100deg,rgba(10,13,18,.3) 0%,rgba(10,13,18,.46) 34%,rgba(10,13,18,.86) 56%,rgba(10,13,18,.95) 100%),
  linear-gradient(to bottom,rgba(10,13,18,.42),rgba(10,13,18,.1) 34%,rgba(10,13,18,.6))}
.kontakt::before{background-position:center 30%}
.kontaktraster .kennzahl span{white-space:nowrap}
@media(max-width:900px){
  .kontakt::after{background:
    linear-gradient(to bottom,rgba(10,13,18,.3) 0%,rgba(10,13,18,0) 24%,
      rgba(10,13,18,0) 70%,rgba(10,13,18,.5) 88%,var(--nacht) 100%)}
}
@media(max-width:760px){
  .zaehler .caps{letter-spacing:.14em;line-height:1.45;display:block;margin-top:3px}
  .buehne{padding-bottom:26px}
}

/* ---------- Simulator: derzeit nicht buchbar ----------
   Gold las sich wie eine Auszeichnung. Rot wie die Warnleuchten im
   Cockpit, dazu ein INOP-Schild auf dem Bild und abgeblendete Angebote. */
:root{--warn:#e5564b}
.sperre{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:16px 18px;border-radius:10px;border:1px solid rgba(229,86,75,.38);
  background:linear-gradient(135deg,rgba(229,86,75,.14) 0%,rgba(229,86,75,.05) 60%,rgba(229,86,75,.02) 100%)}
.sperre p{color:#e9cfcb;font-size:14.6px;line-height:1.6;max-width:52ch}
.status.aus{font-size:13px;font-weight:600;letter-spacing:.18em;color:#ffd9d4;
  border-color:rgba(229,86,75,.7);background:rgba(229,86,75,.18);padding:8px 16px 8px 13px}
.status.aus::before{background:var(--warn);box-shadow:0 0 0 3px rgba(229,86,75,.25),0 0 12px rgba(229,86,75,.8);
  animation:warnblink 1.6s ease-in-out infinite}
@keyframes warnblink{0%,100%{opacity:1}50%{opacity:.25}}
.inop{position:absolute;z-index:3;top:18px;left:18px;display:flex;flex-direction:column;
  align-items:center;padding:10px 14px 9px;background:#f3f1ec;color:#0a0d12;border-radius:3px;
  transform:rotate(-4deg);box-shadow:0 10px 26px rgba(0,0,0,.5);border-top:10px solid var(--warn)}
.inop::before{content:'';position:absolute;top:-6px;left:50%;width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;background:#0a0d12;box-shadow:inset 0 0 0 2px #b9b4aa}
.inop b{font-family:'Archivo Narrow',sans-serif;font-weight:600;font-size:30px;line-height:1;
  letter-spacing:.06em;color:var(--warn)}
.inop span{margin-top:4px;font-family:'Archivo Narrow',sans-serif;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:#3b4350}
.simulator .bild img{filter:saturate(.55) brightness(.62)}
.ruht{opacity:.5;filter:grayscale(.7);transition:opacity 300ms var(--eo),filter 300ms var(--eo)}
@media(hover:hover)and(pointer:fine){.ruht:hover{opacity:.8;filter:grayscale(.3)}}
@media(prefers-reduced-motion:reduce){.status.aus::before{animation:none}}

/* Partner in vier Feldern, auf dem Telefon zwei mal zwei */
.marken{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.marken{grid-template-columns:1fr 1fr}}
.marken{row-gap:clamp(34px,5vh,52px)}

/* ===================== Meine App =====================
   Eigenes Produkt, eigene Farbe: das App-Blau als Schein hinter
   den Telefonen, Gold bleibt für Beschriftungen. */
:root{--ns:#3478f6}
.app{position:relative;overflow:hidden}
.app::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 60% at 76% 58%,rgba(52,120,246,.16),transparent 70%),
    radial-gradient(30% 40% at 12% 30%,rgba(211,176,111,.05),transparent 70%)}
.app .bahn{position:relative}
.app-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center}
.app-marke{display:flex;align-items:center;gap:12px}
.app-marke img{width:46px;height:auto}
.app-marke span{font-family:'Archivo Narrow',sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.3em;text-transform:uppercase;color:#cfe0f6}
.app-titel{margin-top:18px;font-family:'Archivo Narrow',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(34px,4.8vw,66px);line-height:.9;letter-spacing:-.024em}
.app-titel>*{display:block}
.app-titel em{font-style:normal;-webkit-text-stroke:1.5px rgba(207,224,246,.9);color:rgba(52,120,246,.08)}
.app-einl{margin-top:18px;color:#b3b9c2;line-height:1.78;font-size:15.5px;max-width:50ch}
.app-liste{list-style:none;margin-top:clamp(20px,3vh,30px);display:grid;grid-template-columns:1fr 1fr;
  gap:0 26px;border-top:1px solid var(--line)}
.app-liste li{padding:13px 0;border-bottom:1px solid var(--line);color:#9ea6b1;font-size:13.6px;line-height:1.55}
.app-liste b{display:block;font-family:'Archivo Narrow',sans-serif;font-weight:600;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--signal);margin-bottom:3px}
.app-aktion{margin-top:clamp(22px,3.4vh,32px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.app-status{display:inline-flex;align-items:center;gap:10px;font-family:'Archivo Narrow',sans-serif;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#cfe0f6;
  border:1px solid rgba(52,120,246,.5);border-radius:99px;padding:8px 15px 8px 12px;background:rgba(52,120,246,.12)}
.app-status::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ns);
  box-shadow:0 0 0 3px rgba(52,120,246,.22),0 0 12px rgba(52,120,246,.8)}
.app-aktion .knopf-anfrage{padding:13px 22px!important}
.app-fuss{margin-top:16px;font-size:12.5px;color:var(--dimmer);max-width:52ch;line-height:1.6}

/* Drei Telefone. Sie liegen erst übereinander und fächern auf,
   sobald der Abschnitt ins Bild kommt. */
.faecher{position:relative;height:clamp(460px,48vw,640px)}
.telefon{position:absolute;left:50%;top:50%;width:clamp(170px,17vw,248px);aspect-ratio:786/1704;
  padding:7px;border-radius:clamp(30px,3vw,42px);
  background:linear-gradient(146deg,#9aa2ad 0%,#5e6773 7%,#2a3038 18%,#1a1e25 34%,#2a3038 50%,#6e7783 62%,#343a43 74%,#12161b 100%);
  box-shadow:0 0 0 .5px rgba(0,0,0,.8),0 30px 60px -16px rgba(0,0,0,.75),0 80px 110px -50px rgba(0,0,0,.6);
  transform:translate(-50%,-50%);transition:transform 1100ms var(--sanft),opacity 700ms var(--eo)}
.telefon img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;
  border-radius:clamp(24px,2.4vw,35px);background:#05070a}
.telefon::after{content:'';position:absolute;inset:7px;border-radius:clamp(24px,2.4vw,35px);pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 32%)}
.telefon.mitte{z-index:3}
.telefon.links,.telefon.rechts{z-index:2;opacity:.0}
.faecher.da .telefon.mitte{transform:translate(-50%,-50%) scale(1.04)}
.faecher.da .telefon.links{opacity:1;transform:translate(-118%,-46%) rotate(-7deg) scale(.9)}
.faecher.da .telefon.rechts{opacity:1;transform:translate(18%,-46%) rotate(7deg) scale(.9)}
.faecher-schein{position:absolute;left:50%;bottom:4%;width:70%;height:40px;transform:translateX(-50%);
  border-radius:50%;filter:blur(22px);background:radial-gradient(ellipse,rgba(0,0,0,.7),transparent 70%);z-index:1}
@media(max-width:900px){
  .app-raster{grid-template-columns:1fr}
  .faecher{order:-1;height:clamp(400px,110vw,560px)}
  .telefon{width:clamp(150px,40vw,220px)}
}
@media(max-width:760px){
  .app-liste{grid-template-columns:1fr}
  .faecher.da .telefon.links{transform:translate(-100%,-46%) rotate(-6deg) scale(.84)}
  .faecher.da .telefon.rechts{transform:translate(0%,-46%) rotate(6deg) scale(.84)}
}
@media(prefers-reduced-motion:reduce){.telefon{transition:none}}

/* Telefon: Partner bleiben zwei mal zwei, sonst wird die Liste ein
   langer Streifen. Zusätze im Abschnittskopf stehen links unter der
   Überschrift, rechtsbündig umbrochen sahen sie verrutscht aus. */
@media(max-width:760px){
  .abschnittskopf{gap:8px}
  .abschnittskopf .rechts{margin-left:0;width:100%;font-size:11px;letter-spacing:.2em}
  .marken{grid-template-columns:1fr 1fr;column-gap:16px;row-gap:30px}
  .marken .feld h3{font-size:10.5px;letter-spacing:.18em;text-align:left}
  .marken .feld a{font-size:13px;letter-spacing:.03em;padding:8px 0;text-align:left;line-height:1.3}
}

/* ===================== Sprachen =====================
   Arabische Zeichen laufen unter demselben Familiennamen, kommen aber
   aus Noto Sans Arabic. Die Datei lädt nur, wenn arabischer Text auf
   der Seite steht (unicode-range). */
@font-face{font-family:'Archivo';src:url('schriften/NotoSansArabic.woff2') format('woff2-variations');
  font-weight:300 700;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC}
@font-face{font-family:'Archivo Narrow';src:url('schriften/NotoSansArabic.woff2') format('woff2-variations');
  font-weight:300 700;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC}

/* Sprachwahl im Kopf: klein, aufklappbar, ohne JavaScript bedienbar */
.sprachwahl{position:relative}
.sprachwahl summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  font-family:'Archivo Narrow',sans-serif;font-size:12.5px;letter-spacing:.16em;color:#a2a5aa;
  padding:6px 2px;transition:color 220ms var(--eo)}
.sprachwahl summary::-webkit-details-marker{display:none}
.sprachwahl summary svg{transition:transform 260ms var(--eo)}
.sprachwahl[open] summary svg{transform:rotate(180deg)}
@media(hover:hover)and(pointer:fine){.sprachwahl summary:hover{color:var(--ink)}}
.sprachliste{position:absolute;top:calc(100% + 10px);right:-10px;min-width:176px;z-index:5;
  padding:6px;border-radius:10px;border:1px solid rgba(255,255,255,.12);
  background:rgba(12,16,22,.94);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 20px 44px rgba(0,0,0,.5);transform-origin:top right;animation:sprachauf 220ms var(--eo)}
@keyframes sprachauf{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}
.hauptnav .sprachliste a{display:flex;align-items:baseline;gap:12px;padding:9px 12px;border-radius:6px;
  font-family:'Archivo',sans-serif;font-size:14px;letter-spacing:0;text-transform:none;color:#c8ced6}
.hauptnav .sprachliste a::after{display:none}
.sprachliste a b{font-family:'Archivo Narrow',sans-serif;font-weight:600;font-size:11px;letter-spacing:.16em;
  color:var(--dim);width:22px}
.sprachliste a[aria-current]{background:rgba(211,176,111,.1);color:var(--ink)}
.sprachliste a[aria-current] b{color:var(--signal)}
@media(hover:hover)and(pointer:fine){.hauptnav .sprachliste a:hover{background:rgba(255,255,255,.06);color:var(--ink)}}
@media(max-width:760px){
  .sprachwahl{order:5;width:100%;margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
  .sprachwahl summary{display:none}
  .sprachwahl .sprachliste,.sprachwahl:not([open]) .sprachliste{display:flex;flex-wrap:wrap;gap:6px;position:static;
    min-width:0;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;animation:none}
  .hauptnav .sprachliste a{padding:9px 12px;border:1px solid var(--line);font-size:13px}
  .hauptnav .sprachliste a b{display:none}
  .cta-zeilen{order:6}
}

/* ===================== Arabisch: von rechts nach links =====================
   Das Raster spiegelt sich von selbst. Nachgezogen werden nur feste
   Seiten, Verläufe, die den Text abdunkeln, und die Bausteine, die
   technisch links nach rechts bleiben müssen: Kursband, Fallblatt,
   Querstrecke. Sperrsatz zerreißt arabische Schrift, deshalb aus. */
[dir=rtl] body *{letter-spacing:0!important}
[dir=rtl] body{line-height:1.8}
[dir=rtl] .titel,[dir=rtl] .app-titel,[dir=rtl] .artikelkopf h1{line-height:1.08}
[dir=rtl] .titel[lang=en]{line-height:.86}
[dir=rtl] .kurs,[dir=rtl] .anzeige,[dir=rtl] .blaetter{direction:ltr}
[dir=rtl] .anzeige{flex-direction:row-reverse}
[dir=rtl] .schiene{direction:ltr}
[dir=rtl] .etappe{direction:rtl;text-align:right}
[dir=rtl] .etappe .nr{left:auto;right:14px}
[dir=rtl] .zaehler{margin-left:0;margin-right:auto}
[dir=rtl] .abschnittskopf .rechts{margin-left:0;margin-right:auto}
[dir=rtl] .person .spruch{border-left:0;border-right:2px solid var(--signal);padding-left:0;padding-right:20px}
[dir=rtl] .klappe{padding-left:0;padding-right:calc(clamp(14px,2vw,28px) + 22px)}
[dir=rtl] .klappe li{padding-left:0;padding-right:15px}
[dir=rtl] .klappe li::before{left:auto;right:0}
@media(hover:hover)and(pointer:fine){[dir=rtl] .leistungen summary:hover{padding-left:0;padding-right:10px}}
[dir=rtl] .stationen{border-left:0;border-right:1px solid var(--line)}
[dir=rtl] .stationen li a{padding:8px 18px 8px 0;margin-left:0;margin-right:-1px;border-left:0;border-right:1px solid transparent}
[dir=rtl] .stationen li a[aria-current]{border-right-color:var(--signal)}
[dir=rtl] .artikel .einstieg::first-letter{float:none;font-size:inherit;padding:0;color:inherit}
[dir=rtl] .buehne .grund::after{background:
  linear-gradient(to top,var(--nacht) 1%,rgba(10,13,18,.3) 30%,rgba(10,13,18,.08) 100%),
  linear-gradient(260deg,rgba(10,13,18,.6) 0%,rgba(10,13,18,.16) 46%,rgba(10,13,18,0) 70%)}
[dir=rtl] .kontakt::before{transform:scale(1.04) scaleX(-1)}
[dir=rtl] select{background-position:17px 20px,12px 20px}
[dir=rtl] .inop{left:auto;right:18px;transform:rotate(4deg)}
[dir=rtl] .sprachliste{right:auto;left:-10px;transform-origin:top left}
[dir=rtl] .cta-zeilen .pf,[dir=rtl] .kontaktraster .direkt .pf{transform:scaleX(-1)}
[dir=rtl] .faecher{direction:ltr}
@media(max-width:760px){
  [dir=rtl] .buehne .grund::after{background:
    linear-gradient(to top,var(--nacht) 34%,rgba(10,13,18,.7) 46%,rgba(10,13,18,.12) 62%,rgba(10,13,18,0) 76%),
    linear-gradient(to bottom,rgba(10,13,18,.55) 0%,rgba(10,13,18,0) 22%)}
  [dir=rtl] .klappe{padding-right:0}
}
/* Links außerhalb liegt bei Schreibrichtung rechts nach links im
   scrollbaren Bereich. Der Sprunglink hat die Seite so 10.000 px breit
   gemacht, das Telefon hat herausgezoomt. */
[dir=rtl] .sprung{left:auto;right:-9999px}
[dir=rtl] .sprung:focus{right:var(--rand)}
[dir=rtl] .caps{font-size:12.5px}
[dir=rtl] .hauptnav a{font-size:14.5px}
[dir=rtl] .zaehler .caps,[dir=rtl] .leistungen .jahr,[dir=rtl] .eckdaten dt,[dir=rtl] .app-liste b,
[dir=rtl] .marken .feld h3,[dir=rtl] .etappe .kunde,[dir=rtl] label{font-size:13px}
[dir=rtl] .etappe p,[dir=rtl] .hinweis{font-size:13.5px}

/* ---------- Aufmacher auf dem Telefon: Anflug aus dem Cockpit ----------
   Standbild und Film haben denselben Ausschnitt. Das Standbild ist
   sofort da, der Film legt sich darüber, sobald er läuft. Auf dem
   Rechner bleibt der Film verborgen und wird nie geladen. */
.grundfilm{display:none}
@media(max-width:760px){
  .buehne .grund img{object-position:50% 42%}
  .grundfilm{display:block;position:absolute;left:0;top:0;width:100%;height:68%;
    object-fit:cover;object-position:50% 42%;opacity:0;transition:opacity 900ms var(--eo)}
  .grundfilm.laeuft{opacity:1}
  .buehne .grund::after{z-index:2}
  .buehne .grund::before{background:none}
}

/* ===================== Aufmacher auf dem Rechner: Band (Weg 2) =====================
   Das Hochkantvideo füllt rechts ein Band in voller Höhe und läuft zum
   Text hin ins Dunkle aus. Das Standbild liegt an derselben Stelle
   darunter, falls der Film nicht läuft. Das Kursband sitzt als
   Head-up-Display über dem Film. */
@media(min-width:761px){
  .buehne{background:var(--nacht)}
  .buehne .grund img,.grundfilm{display:block;position:absolute;top:0;right:0;bottom:0;left:auto;
    width:min(48vw,800px);height:100%;object-fit:cover;object-position:50% 40%;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 36%);mask-image:linear-gradient(to right,transparent 0%,#000 36%)}
  .buehne .grund img{filter:saturate(1.02) brightness(.9)}
  .grundfilm{opacity:0;transition:opacity 1100ms var(--eo);filter:saturate(1.02) brightness(.9)}
  .grundfilm.laeuft{opacity:1}
  .buehne .grund::before{background:none}
  .buehne .grund::after{z-index:2;background:
    linear-gradient(to top,var(--nacht) 0%,rgba(10,13,18,.5) 16%,rgba(10,13,18,0) 34%),
    linear-gradient(to bottom,rgba(10,13,18,.62) 0%,rgba(10,13,18,0) 22%)}
  .kurs{left:auto;right:calc(min(48vw,800px) * .42);transform:translateX(50%);width:min(440px,30vw)}
  .kurs .rwy{right:4%}
  .buehne .unten{flex-direction:column;align-items:flex-start;gap:26px;max-width:min(54%,640px)}
  .zaehler{margin-left:0}
  [dir=rtl] .buehne .grund img,[dir=rtl] .grundfilm{right:auto;left:0;
    -webkit-mask-image:linear-gradient(to left,transparent 0%,#000 36%);mask-image:linear-gradient(to left,transparent 0%,#000 36%)}
  [dir=rtl] .kurs{right:auto;left:calc(min(48vw,800px) * .42);transform:translateX(-50%)}
  [dir=rtl] .zaehler{margin-right:0}
  /* Beim Scrollen öffnet sich das Band (--auf von 0 bis 1 aus seite.js),
     die Überschrift gleitet dann über die Aussicht. */
  .buehne .grund img,.grundfilm{width:calc(min(48vw,800px) + (100% - min(48vw,800px)) * var(--auf,0));
    transform-origin:100% 40%}
  [dir=rtl] .buehne .grund img,[dir=rtl] .grundfilm{transform-origin:0 40%}
}
@media(min-width:761px){
  /* Fallblatt in die Textspalte, das Band gehört dem Kursband */
  .leitzeile{flex-direction:column;align-items:flex-start;gap:16px}
  .anzeige{flex-direction:row}
  .anzeige .caps{text-align:left}
  [dir=rtl] .leitzeile{align-items:flex-start}
  [dir=rtl] .anzeige{flex-direction:row-reverse}
  [dir=rtl] .anzeige .caps{text-align:right}
  .buehne .unten{max-width:min(62%,860px)}
  .zaehler .caps{white-space:nowrap}
}

/* ---------- Meine App: Name noch geheim ----------
   Ring mit Schloss statt Logo, dazu eine Fallblattreihe aus
   Fragezeichen. Ab und zu blättert sie durch und fällt zurück. */
.app-marke.geheim{gap:14px;flex-wrap:wrap}
.schloss{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  color:#cfe0f6;background:radial-gradient(circle at 50% 35%,rgba(52,120,246,.22),rgba(52,120,246,.04) 70%)}
.schloss::after{content:'';position:absolute;inset:0;border-radius:50%;padding:1.2px;pointer-events:none;
  background:linear-gradient(140deg,#eef5fd 0%,#8db2d9 40%,#3a5d8a 70%,#a9c7e7 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.geheimtafel{direction:ltr}
.geheimtafel .blatt{width:26px;height:34px;font-size:18px;color:#cfe0f6;
  background:linear-gradient(to bottom,#18222f 0%,#121a25 49.5%,#0a0f16 50.5%,#101824 100%)}
.geheimtafel .blatt.frage{color:rgba(207,224,246,.55)}
.app-marke.geheim .caps{color:var(--dim);letter-spacing:.24em}

/* ---------- Meine App: Name als ECAM-Meldung ----------
   Wie auf dem Airbus-Bildschirm: Bernstein für die Einschränkung,
   Grün für das, was geht, Cyan für Hinweise, Magenta für den
   Start-Memo. Bleibt in jeder Sprache englisch und links nach rechts. */
.ecam{display:inline-block;direction:ltr;text-align:left;padding:14px 18px 13px;border-radius:6px;
  background:#020304;border:1px solid #1c232c;
  box-shadow:inset 0 0 0 3px #0b0f14,inset 0 0 22px rgba(47,224,106,.04),0 18px 40px rgba(0,0,0,.45);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:1.75;letter-spacing:.04em;
  white-space:nowrap}
.ecam .g{color:#2fe06a}.ecam .a{color:#ffb000}.ecam .w{color:#e9eef3}.ecam .c{color:#39c6ff}.ecam .m{color:#ff5ce1}
.ecam .blinkt{animation:ecamblink 1.2s steps(1) infinite}
@keyframes ecamblink{50%{opacity:.18}}
@media(max-width:760px){.ecam{font-size:12px;padding:12px 14px}}
[dir=rtl] .ecam{letter-spacing:.04em!important}
@media(prefers-reduced-motion:reduce){.ecam .blinkt{animation:none}}

/* ---------- Warteliste für die App ----------
   Ein Feld, ein Knopf, ein Häkchen. Die Meldung erscheint darunter,
   ohne dass die Seite neu lädt. */
form.warteliste{display:block;margin-top:clamp(18px,2.6vh,24px);max-width:520px}
.w-titel{display:block;margin-bottom:10px;font-family:'Archivo Narrow',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.w-zeile{display:flex;gap:8px}
.w-zeile input{flex:1;min-width:0;border-radius:7px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.w-zeile input:focus{border-color:var(--ns);background:rgba(52,120,246,.08)}
.w-zeile button{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border-radius:7px}
.w-ok{display:flex;gap:10px;align-items:flex-start;margin-top:12px;cursor:pointer;
  font-family:'Archivo',sans-serif;font-size:12.8px;letter-spacing:0;text-transform:none;color:#9ea6b1;line-height:1.55}
.w-ok input{flex:0 0 auto;width:17px;height:17px;margin-top:1px;accent-color:var(--ns);padding:0}
.w-ok a{color:#cfd6df}
.honig{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
[dir=rtl] .honig{left:auto!important;right:-9999px!important}
.w-meldung{margin-top:10px;font-size:13.5px;line-height:1.55;min-height:1px}
.w-meldung[data-art=ok]{color:#8fd18a}
.w-meldung[data-art=fehler]{color:#f0a39c}
form.warteliste[data-laeuft] button{opacity:.6;pointer-events:none}
@media(max-width:520px){.w-zeile{flex-direction:column}.w-zeile button{justify-content:center}}

/* Die Zeile über dem Claim ist die H1 der Seite: Name, Beruf, Ort.
   Sie behält die Gestalt der kleinen Kopfzeile. */
.leitzeile h1.caps{font-weight:inherit;line-height:1.5}
.leitzeile h1.caps .name{color:var(--ink)}