@layer vendor, site;
@layer site {
/* NordFly v700 – Feinschliff-Ebene für alle deutschen und englischen Seiten.
   Wird als letztes Stylesheet geladen. Ändert keine Inhalte, Bilder, Navigation
   oder Footer-Aufbau, sondern nur Schrift, Lesbarkeit, Kontrast, Zustände und
   Bewegung. v720: ohne !important – wo eine Regel gegen spezifischere Selektoren
   aus site.css antritt, nutzt sie denselben Kontext. */

/* 1 · Schrift: Inter Variable (wght + opsz) selbst gehostet, OFL-1.1.
   Vorher war „Inter“ nur angegeben, aber nie geladen. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  /* v721: block statt swap/optional – der Text erscheint direkt in Inter, ohne sichtbaren Wechsel
     und ohne Seiten, die in der Ersatzschrift hängen bleiben. Inter wird ganz oben im <head> mit
     hoher Priorität vorgeladen, die Wartezeit liegt damit im Bereich weniger Millisekunden. */
  font-display: block;
  src: url("../fonts/inter-latin-opsz-normal.woff2?v=965") format("woff2-variations"),
       url("../fonts/inter-latin-opsz-normal.woff2?v=965") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metrisch angeglichene Ersatzschrift: verhindert Layoutsprünge, bis Inter geladen ist. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT");
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
  size-adjust: 107.06%;
}
/* v720: Eigener fetter Ersatzschnitt. Ohne ihn wurde Arial für Navigation und Buttons künstlich
   gefettet und lief rund 2 % schmaler als Inter 750–850 → die Navigation sprang beim Schriftwechsel. */
@font-face {
  font-family: "Inter Fallback";
  font-weight: 600 900;
  src: local("Arial Bold"), local("Arial-BoldMT");
  ascent-override: 93.6%;
  descent-override: 23.4%;
  line-gap-override: 0%;
  size-adjust: 103.5%;
}

:root {
  --nf-ease-out: cubic-bezier(.23, 1, .32, 1);
  --nf-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --nf-focus: #0789df;
  --nf-accent-on-light: #0670b3;
  --nf-press: .97;
}

html {
  text-size-adjust: 100%;
  scrollbar-color: #b6c5d5 #f2f6fa;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: Inter, "Inter Fallback", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-optical-sizing: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  caret-color: var(--nf-focus);
  accent-color: var(--nf-focus);
}

/* 2 · Satz: ausgewogene Überschriften, keine Einzelwörter am Absatzende. */
h1, h2, h3, h4 {
  text-wrap: balance;
  font-optical-sizing: auto;
}
p, li, dd, figcaption, blockquote {
  text-wrap: pretty;
}

/* Inter mit Display-Optik braucht weniger negatives Tracking als die Systemschrift.
   Untergrenze -0.04em, damit große Titel nicht zusammenlaufen. */
body .nf-subpage-hero h1.nf-subpage-hero-title {
  letter-spacing: -.038em;
  text-wrap: balance;
}
.heading h2,
.page-hero h1 {
  letter-spacing: -.032em;
}

/* Zahlen in Kennzahlen, Zählern und Tabellen stehen ruhig untereinander. */
.metric strong,
.seo-stat-card strong,
.livemap-stat-card strong,
.fleet-counter,
.screenshot-counter,
.network-page-number,
.seo-registration-main,
.seo-facts-updated time,
table td,
table th,
[data-nfg-stat] {
  font-variant-numeric: tabular-nums;
}

/* v710: Hintergrundbilder unterhalb des Sichtbereichs laden erst, wenn der Abschnitt bis auf
   1200 px herankommt (Inline-Skript im <head> setzt .nf-lazy-bg und .nf-bg-ready).
   Heros sind ausgenommen. Ohne IntersectionObserver greift nichts davon. */
html.nf-lazy-bg main > section:not(.hero):not(.page-hero):not(.nf-subpage-hero):not(.nf-bg-ready),
html.nf-lazy-bg main > section:not(.hero):not(.page-hero):not(.nf-subpage-hero):not(.nf-bg-ready)::before,
html.nf-lazy-bg main > section:not(.hero):not(.page-hero):not(.nf-subpage-hero):not(.nf-bg-ready)::after,
html.nf-lazy-bg main > section:not(.nf-bg-ready) .hub::before,
html.nf-lazy-bg main > section:not(.nf-bg-ready) .entry-channel {
  background-image: none;
}
/* Abschnitte, deren Bild über ID-Selektoren gesetzt ist, brauchen ID-Spezifität. */
html.nf-lazy-bg main > section:is(#software-ecosystem, #bases, #ablauf, #freiheit, #how, #freedom, #jahr-2020, #year-2020, #jahr-2023, #year-2023, #jahr-2026, #year-2026, #flugzeuge, #aircraft, #netzwerke, #networks):not(.nf-bg-ready),
html.nf-lazy-bg main > section:is(#software-ecosystem, #bases, #ablauf, #freiheit, #how, #freedom, #jahr-2020, #year-2020, #jahr-2023, #year-2023, #jahr-2026, #year-2026, #flugzeuge, #aircraft, #netzwerke, #networks):not(.nf-bg-ready)::before,
html.nf-lazy-bg main > section:is(#software-ecosystem, #bases, #ablauf, #freiheit, #how, #freedom, #jahr-2020, #year-2020, #jahr-2023, #year-2023, #jahr-2026, #year-2026, #flugzeuge, #aircraft, #netzwerke, #networks):not(.nf-bg-ready)::after {
  background-image: none;
}

/* v709: ICAO-Wasserzeichen der Basen-Karten (EDDH, EDDB, EDDM, ESSA). Das Tracking von -0.08em
   war auf die schmalere Systemschrift abgestimmt; mit Inter liefen die Buchstaben ineinander. */
.hub::after {
  letter-spacing: -.01em;
}

/* 3 · Browser-Oberflächen im Markenstil. */
::selection {
  background: rgba(66, 201, 255, .3);
  color: inherit;
}
.dark ::selection,
.cycle-dark ::selection,
.hero ::selection,
.nf-subpage-hero ::selection,
footer ::selection {
  background: rgba(66, 201, 255, .38);
  color: #fff;
}

main p a:not([class]),
main li a:not([class]) {
  text-underline-offset: .22em;
  text-decoration-thickness: from-font;
}

/* Sichtbarer, einheitlicher Tastaturfokus. #0789df erreicht ≥3:1 auf Weiß und auf Navy. */
:where(a, button, summary, [tabindex]:not([tabindex="-1"]), input, select, textarea):focus-visible {
  outline: 2px solid var(--nf-focus);
  outline-offset: 3px;
}
:where(.dark, .cycle-dark, .hero, .nf-subpage-hero, .header, footer) :where(a, button, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline-color: #42c9ff;
}
:where(a, button, summary):focus:not(:focus-visible) {
  outline: none;
}

/* 4 · Kontrast: Akzentblau auf hellen Flächen auf ≥4.5:1 angehoben (vorher 4.0–4.3:1). */
.kicker,
.social-media-section .kicker {
  color: var(--nf-accent-on-light);
}
.nf-home-bases-link {
  color: var(--nf-accent-on-light);
}

/* Akzentblau als Text auf Weiß und hellblauen Flächen: #066aa8 erreicht ≥5:1 auf allen
   hellen Tönen der Seite (vorher #0789df–#0a86d1, 3.3–4.3:1). */
.intro-kicker,
.intro-partner-heading,
.fleet-slide-body > small,
.home-faq-number,
.community-section-header .kicker,
.community-related-links > a,
.community-meet-feature-copy > span,
.community-day,
.fleet-livery-label,
.faq-inline-link,
.faq-category-backlink > a,
.entry-panel-label,
.team-mini-link,
.rank-card-meta .rank-hours,
.rank-card:not(.is-upgrade) .rank-card-meta .rank-type.team-rank-type,
.team-rank-subhead span,
.network-base-copy > small,
.requirements-values-small,
.requirements-check-label,
.requirements-policy-label,
.requirements-learning-link > a,
.requirement-detail-more > a,
.history-era:not(.dark) .history-marker span,
.history-future-signoff,
.vf-job-type,
.vf-job-foot > a,
.vf-shortcuts > a > b,
.entry-software-grid article > div > small,
.social-media-head .kicker,
.va-nordfly-pillars article > span,
.va-brand-types-grid article > span {
  color: #066aa8;
}
.nf-home-bases-arrow,
#main .nf-home-bases-link .nf-home-bases-arrow {
  background-color: #0670b3;
}

/* Weiße Schrift auf blauen Flächen (aktive Filter, Nummern-Badges): Fläche auf #0670b3 (5.3:1). */
.network-explorer-section .network-hub-filter.is-active,
.network-page-numbers .network-page-number[aria-current="page"] {
  background-color: #0670b3;
  border-color: #0670b3;
}

/* Team: Rollentext und Pillen auf hellgrauen Karten. */
.team-page .team-person-card.team-person-card:not(.team-ceo-card):not(.is-vacant) .team-role-pill.team-role-pill {
  color: #06649e;
}
/* Unbesetzte Stellen bleiben bewusst gedämpft, erreichen aber 4.5:1. */
.team-page .team-person-card.team-person-card.is-vacant .team-role-pill.team-role-pill {
  color: #45525f;
}
.team-page .team-person-card.team-person-card.is-vacant .team-person-body p.team-role-title,
.team-page .team-person-card.team-person-card.is-vacant .team-person-body p {
  color: #586a7c;
}

/* Gedämpfte Grautöne als Text: #566a7f statt #6a8096–#8094a7 (vorher 3.1–4.2:1). */
.social-media-note,
.discord-community-stop,
.va-origin-summary > div > span,
.va-spectrum-labels > span,
.va-comparison-note,
.fleet-model-support-chip > small,
.flotte-detail-page table th,
.rank-card:not(.is-upgrade) .rank-card-meta .rank-type:not(.team-rank-type),
.network-base-copy > span,
.network-map-hub-btn > small,
.nf-systems-media-note,
.requirements-live-stat > small,
.requirements-figure-footnote,
.entry-dark-quote > small,
.team-person-body > p,
.team-person-body > .team-role-title,
.nfgfn-atlas-note,
.vacancies-page .vf-apply .vf-apply-panel p.vf-fineprint {
  color: #566a7f;
}

/* Primärbutton: Verlauf bleibt, die Fläche unter dem Text ist nun dunkel genug für weiße
   Schrift (≥4.5:1). Der helle Cyan-Ausläufer bleibt am rechten Rand sichtbar. */
.btn-primary {
  background: linear-gradient(110deg, #0561ad, #0a7bc3 55%, #2a9fe0);
}

/* 5 · Mindestgrößen für Beschriftungen (vorher 9–11 px). */
.kicker,
.community-kicker,
.intro-kicker {
  font-size: .78rem;
  letter-spacing: .12em;
}

/* Hero-Kennzahlen */
.hero .metric .metric-copy-stacked > span,
.hero .metric .metric-headline {
  font-size: .75rem;
  letter-spacing: .06em;
}
.hero .metric .metric-copy-stacked > small,
.hero .metric .metric-detail {
  font-size: .6875rem;
  letter-spacing: .03em;
}
.hero .hero-metrics-footnote {
  font-size: .75rem;
}
@media (max-width: 600px) {
  .hero .metric .metric-copy-stacked > span,
  .hero .metric .metric-headline {
    font-size: .6875rem;
    letter-spacing: .04em;
  }
  .hero .metric .metric-copy-stacked > small,
  .hero .metric .metric-detail {
    font-size: .65rem;
    letter-spacing: .02em;
  }

  /* Partner-Zeile: Beim Umbruch beginnt jede Zeile mit einem Punkt statt willkürlich. */
    .hero-clean-copy .proof span::before,
  .hero-clean-copy .proof span + span::before {
    content: "•";
    margin-right: 7px;
    color: #3bc5ff;
  }
}

/* Startseite: Zahlen, Daten, Fakten · Livemap · Discord · Screenshot Contest */
.seo-stat-card > span,
.seo-registration-label {
  font-size: .72rem;
  letter-spacing: .06em;
}
.seo-registration-exact > span,
.seo-facts-updated,
.seo-facts-updated > span,
.seo-facts-updated time {
  font-size: .72rem;
}
.livemap-stat-note,
.intro-wrap .intro-partner-note,
.social-media-note {
  font-size: .78rem;
}
.discord-community-stop,
.screenshot-winner-tag > span,
.fleet-counter,
.screenshot-place small,
.screenshot-counter {
  font-size: .75rem;
}

/* Konzept (v934: Nummernkreise jetzt im Startseiten-Stil, siehe site.css) */
.va-origin-summary > div > span,
.va-brand-types-head span,
.va-brand-types-grid article > span,
.va-nordfly-pillars article > span,
.va-nordfly-editorial-head > span {
  font-size: .72rem;
}

/* Flotte */
.fleet-model-support-chip small,
.fleet-model-count small {
  font-size: .69rem;
}
.fleet-model-code,
.flotte-detail-page .fleet-tab .fleet-tab-code,
.flotte-detail-page table th {
  font-size: .72rem;
}

/* Ränge */
.rank-card-meta .rank-hours,
.rank-card-meta .rank-type,
.team-rank-subhead span {
  font-size: .69rem;
}

/* Streckennetz */
.network-base-copy > span,
.network-map-hub-btn,
.network-map-hub-btn > span,
.network-hub-filter > small,
.route-flight > span {
  font-size: .72rem;
}
.network-map-hub-btn > small,
td > small,
.nfgfn-map-hud,
.nfgfn-map-corner,
.nfgfn-selection-kicker,
.nfgfn-selection-copy {
  font-size: .69rem;
}

/* Weitere Unterseiten */
.history-visual figcaption,
.history-subyear,
.vf-job-type,
.vf-mentor-tag,
.requirements-values-small,
.requirements-check-label,
.requirements-policy-label,
.entry-channel-content small {
  font-size: .72rem;
}

/* 6 · Bewegung: klare Eigenschaften, kräftiges Ease-out, spürbares Drücken. */
.btn {
  transition:
    transform 180ms var(--nf-ease-out),
    scale 140ms var(--nf-ease-out),
    box-shadow 220ms var(--nf-ease-out),
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    filter 200ms ease;
}
.btn:active {
  scale: var(--nf-press);
  transition-duration: 180ms, 90ms, 220ms, 200ms, 200ms, 200ms, 200ms;
}

/* Hover-Anheben nur bei echtem Zeiger: auf Touchgeräten bleibt kein „hängender“ Hover-Zustand. */
@media (hover: none) {
  .btn:hover {
    transform: none;
  }
}

/* Weitere Bedienelemente bekommen dieselbe Druckrückmeldung. „scale“ wirkt zusätzlich zu
   vorhandenen transform-Positionierungen, deshalb springt nichts. */
.fleet-control,
.screenshot-nav,
.screenshot-dot,
.social-pill,
.social-elm-btn,
.fleet-tab,
.fleet-expanded-zoom,
.rank-image-button,
.community-gallery-link,
.network-season-tab,
.network-hub-filter,
.network-page-number,
.network-map-season-btn,
.network-map-hub-btn,
.nfgfn-region-btn,
.intro-partner-link,
.group-airline-link,
.partner-brand-link,
.team-mini-link,
.fleet-livery-logo,
.mobile-toggle {
  transition-property: transform, scale, background-color, background, border-color, color, box-shadow, filter, opacity, width;
  transition-duration: 180ms;
  transition-timing-function: var(--nf-ease-out);
}
.fleet-control:active,
.screenshot-nav:active,
.screenshot-dot:active,
.social-pill:active,
.social-elm-btn:active,
.fleet-tab:active,
.fleet-expanded-zoom:active,
.rank-image-button:active,
.community-gallery-link:active,
.network-season-tab:active,
.network-hub-filter:active,
.network-page-number:active,
.network-map-season-btn:active,
.network-map-hub-btn:active,
.nfgfn-region-btn:active,
.intro-partner-link:active,
.group-airline-link:active,
.partner-brand-link:active,
.team-mini-link:active,
.fleet-livery-logo:active,
.mobile-toggle:active {
  scale: var(--nf-press);
  transition-duration: 90ms;
}

/* FAQ und aufklappbare Bereiche: der Zeiger zeigt die Klickbarkeit. */
summary::-webkit-details-marker {
  display: none;
}

/* Abschnitts-Reveal: kürzer und ruhiger (vorher 720 ms / 24 px). */
html.nf-reveal-enabled .nf-scroll-reveal {
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 560ms var(--nf-ease-out),
    transform 640ms var(--nf-ease-out);
  transition-delay: var(--nf-reveal-delay, 0ms);
}

/* 7 · Reduzierte Bewegung: Bewegungen entfallen, Farb- und Deckkraftwechsel bleiben. */
@media (prefers-reduced-motion: reduce) {
    
  .btn:hover,
  .btn:active {
    transform: none;
    scale: none;
  }
}
}

/* Bewegung reduzieren: außerhalb der Ebene „site", gewinnt dadurch ohne !important. */
@media (prefers-reduced-motion: reduce){*, *::before, *::after{animation-duration:1ms;animation-iteration-count:1;transition-duration:1ms;scroll-behavior:auto}}