@layer vendor, site;
@layer site {
/* NordFly Systeme v443 - styles scoped to the German/English systems pages */
.nf-systems-page{--nf-ink:#0b1d34;--nf-muted:#536a83;--nf-light:#eff6fc}
.nf-systems-page .nf-systems-hero{align-items:center;background-image:url("../img/systeme/hero-systeme.webp");background-position:center 48%}
.nf-systems-hero::before{background:linear-gradient(90deg,rgba(2,13,29,.92) 0%,rgba(2,20,39,.85) 38%,rgba(2,25,47,.65) 70%,rgba(2,23,47,.56) 100%)}
.nf-systems-page .nf-systems-section{padding:72px 0 78px}
.nf-systems-page .nf-systems-intro{padding-bottom:70px}
.nf-systems-page .nf-systems-section.cycle-light{background:linear-gradient(180deg,#f1f7fc,#eaf3fa)}
.nf-systems-page .nf-systems-section.cycle-dark{background:radial-gradient(circle at 90% 8%,rgba(27,157,228,.14),transparent 35%),linear-gradient(125deg,#031225,#08294a);color:#fff}
.nf-systems-page .nf-systems-section-heading{max-width:none;margin:0 0 34px}
.nf-systems-page .heading h2{font-size:clamp(2rem,3.2vw,3.0rem);line-height:1.15;letter-spacing:-.043em}
.nf-systems-page .nf-systems-section-heading h2{max-width:1100px}
.nf-systems-page .nf-systems-content{display:grid;}
.nf-systems-page .nf-systems-prose{min-width:0;color:var(--nf-muted)}
.nf-systems-page .nf-systems-prose p{margin:0 0 18px}
.nf-systems-page .nf-systems-prose p:last-child{margin-bottom:0}
.nf-systems-page .nf-systems-prose em{font-style:italic}
.nf-systems-page .nf-systems-prose h3{font-weight:850;letter-spacing:-.025em;margin:30px 0 10px;color:#0c263e}
.nf-systems-page .cycle-dark .nf-systems-prose{color:rgba(244,249,255,.85)}
.nf-systems-page .cycle-dark .nf-systems-prose :is(h3,strong){color:#fff}
.nf-systems-page .nf-systems-visual{position:static;align-self:start;min-width:0}
.nf-systems-page .nf-systems-shot{display:block;width:100%;height:auto;object-fit:contain;border-radius:13px;box-shadow:0 18px 36px rgba(8,34,63,.12);border:1px solid rgba(27,104,158,.14)}
.nf-systems-page .cycle-dark .nf-systems-shot{box-shadow:0 18px 50px rgba(0,0,0,.30);border-color:rgba(100,198,255,.27)}
.nf-systems-page .nf-systems-media-note{margin:10px 2px 0;font-size:.78rem;font-weight:750;letter-spacing:.02em}
.nf-systems-page .nf-systems-intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,5vw,88px);align-items:start}
.nf-systems-page .nf-systems-intro-grid .heading h2{max-width:590px}
.nf-systems-page .nf-systems-jump{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:31px}
.nf-systems-page .nf-systems-jump a{position:relative;display:flex;min-width:0;background:#f4f9fd;border:1px solid #dce9f4;border-radius:13px;text-decoration:none;transition:transform .18s ease,border-color .18s ease}
.nf-systems-page .nf-systems-jump a:hover{border-color:#35b8ef;transform:translateY(-2px)}
.nf-systems-page .nf-systems-jump strong{color:#0b2945;font-size:.99rem}
.nf-systems-page .nf-systems-jump span{color:#5b748b;font-size:.83rem;line-height:1.43}
.nf-systems-page .nf-systems-integration{padding:75px 0 84px}
.nf-systems-page .nf-systems-integration .heading{max-width:970px}
.nf-systems-page .nf-systems-integration .heading p{color:rgba(255,255,255,.82);}
.nf-systems-page .nf-systems-process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:32px}
.nf-systems-page .nf-systems-process>:is(div,a){display:flex;padding:20px 21px;border:1px solid rgba(111,195,242,.18);border-radius:13px;background:rgba(255,255,255,.047)}
.nf-systems-page .nf-systems-process strong{font-size:1.13rem;font-weight:800;color:#fff}
.nf-systems-page .nf-systems-process small{font-size:.86rem;color:#a9cadd}
@media(max-width:950px){.nf-systems-page .nf-systems-jump{grid-template-columns:repeat(2,minmax(0,1fr))}.nf-systems-page .nf-systems-visual{position:static}}
@media(max-width:720px){.nf-systems-page .nf-systems-section{padding:49px 0 55px}.nf-systems-page .nf-systems-intro-grid,.nf-systems-page .nf-systems-content{display:block}.nf-systems-page .nf-systems-intro-grid .heading{margin-bottom:18px}.nf-systems-page .nf-systems-visual{position:static;margin-bottom:23px}.nf-systems-page .nf-systems-shot{border-radius:9px}.nf-systems-page .heading h2{font-size:clamp(1.85rem,7vw,2.6rem)}.nf-systems-page .nf-systems-process{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.nf-systems-page .nf-systems-jump{grid-template-columns:1fr;gap:9px}.nf-systems-page .nf-systems-process{gap:9px}.nf-systems-page .nf-systems-process>:is(div,a){padding:14px}}

/* v445: Original hero (size, text arrangement, background), shared centered container. */

/* v446 – compact two-column editorial flow, based on the supplied layouts.
   Existing backgrounds, hero, image styles and color palette remain unchanged. */
.nf-systems-page .nf-systems-section:is(.nf-systems-discord,.nf-systems-opc,.nf-systems-installer,.nf-systems-acars){
    padding:58px 0 62px;
}
.nf-systems-page .nf-systems-section:is(.nf-systems-discord,.nf-systems-opc,.nf-systems-installer,.nf-systems-acars) .nf-systems-section-heading{
    margin-bottom:25px;
}
.nf-systems-page .nf-systems-content-balanced{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(26px,3.8vw,66px);
    align-items:start;
}
.nf-systems-page .nf-systems-content-balanced .nf-systems-column{
    min-width:0;
}
.nf-systems-page .nf-systems-content-balanced .nf-systems-column-left > .nf-systems-prose{
    margin-top:14px;
}
.nf-systems-page .nf-systems-content-balanced .nf-systems-prose p{
    margin-bottom:15px;
}
.nf-systems-page .nf-systems-content-balanced .nf-systems-prose h3{
    margin-top:23px;
    margin-bottom:9px;
}
@media(max-width:720px){
    .nf-systems-page .nf-systems-section:is(.nf-systems-discord,.nf-systems-opc,.nf-systems-installer,.nf-systems-acars){
        padding:42px 0 47px;
    }
    .nf-systems-page .nf-systems-content-balanced{
        display:block;
    }
    .nf-systems-page .nf-systems-content-balanced .nf-systems-column-right{
        margin-top:22px;
    }
}


/* v448 – Textgroessen der Inhaltsabschnitte an Geschichte angeglichen.
   Ausschliesslich Abschnittstypografie; Hero-Regeln bleiben unveraendert. */
.nf-systems-page .nf-systems-section .nf-systems-prose{
    font-size:.89rem;
    line-height:1.5;
}
.nf-systems-page .nf-systems-intro .nf-systems-prose{
    font-size:.89rem;
    line-height:1.5;
}
.nf-systems-page .nf-systems-section .nf-systems-prose h3{
    font-size:1.22rem;
    line-height:1.22;
}
.nf-systems-page .nf-systems-integration .heading p{
    font-size:.95rem;
    line-height:1.62;
}

/* v451: Original NordFly icons on the system overview cards. No arrows.
   Changes scoped strictly to the four navigational tiles; hero unchanged. */
.nf-systems-page .nf-systems-jump a{
  flex-direction:row;
  align-items:center;
  gap:16px;
  padding:18px;
}
.nf-systems-page .nf-systems-jump .nfi{
  display:inline-block;
  flex:0 0 42px;
  width:42px;
  height:42px;
  font-size:42px;
  color:#048bd1;
}
.nf-systems-page .nf-systems-jump-copy{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.nf-systems-page .nf-systems-jump-copy strong{
  display:block;
}
.nf-systems-page .nf-systems-jump-copy > span{
  display:block;
}
@media(max-width:480px){
  .nf-systems-page .nf-systems-jump a{gap:14px}
  .nf-systems-page .nf-systems-jump .nfi{
    flex-basis:38px;width:38px;height:38px;font-size:38px;
  }
}


/* v453 – OperationCenter-Abschnitt mit sehr dunklem Hintergrundbild-Overlay.
   Bild soll nur schemenhaft durchscheinen; Hero bleibt unberuehrt. */
.nf-systems-page .nf-systems-opc{
  position:relative;
  overflow:hidden;
}
.nf-systems-page .nf-systems-opc::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    linear-gradient(90deg,rgba(2,11,24,.95) 0%,rgba(3,19,39,.945) 36%,rgba(4,25,49,.935) 68%,rgba(5,28,54,.93) 100%),
    url("../img/systeme/opc-section-bg.webp");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
.nf-systems-page .nf-systems-opc > .container{
  position:relative;
  z-index:1;
}


/* v454 – Four-system integration: very dark blue photo overlay and original NFI icons.
   Only this closing section is affected; hero and earlier sections are untouched. */
.nf-systems-page .nf-systems-integration{
    position:relative;
    overflow:hidden;
    background-color:#020d1b;
    background-image:none;
}
.nf-systems-page .nf-systems-integration::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image:
        linear-gradient(105deg,rgba(1,10,24,.965) 0%,rgba(2,15,33,.958) 48%,rgba(2,12,29,.965) 100%),
        url('../img/systeme/integration-four-systems-bg.webp');
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
}
.nf-systems-page .nf-systems-integration > .container{
    position:relative;
    z-index:1;
}
.nf-systems-page .nf-systems-integration .nf-systems-process > .nf-systems-process-item{
    flex-direction:row;
    align-items:center;
    gap:15px;
}
.nf-systems-page .nf-systems-integration .nf-systems-process .nfi{
    display:inline-block;
    flex:0 0 42px;
    width:42px;
    height:42px;
    font-size:42px;
    line-height:1;
    color:#57cfff;
}
.nf-systems-page .nf-systems-integration .nf-systems-process-copy{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}
@media(max-width:480px){
    .nf-systems-page .nf-systems-integration .nf-systems-process > .nf-systems-process-item{gap:11px}
    .nf-systems-page .nf-systems-integration .nf-systems-process .nfi{flex-basis:34px;width:34px;height:34px;font-size:34px}
}


/* v456: Nur den sichtbaren Abstand zwischen Titel und Untertitel verkleinern.
   Keine Reflow-Aenderungen: Icons, Kartengroessen und Icon-Positionen bleiben exakt. */
.nf-systems-page .nf-systems-integration .nf-systems-process-copy small{
    transform:translateY(-4px);
}

/* v783: Hero-Bilder auf dem Handy (bis 768px) als 1024px-Fassung (Startseite 1280px). Nur background-image wird
   getauscht – Verläufe, Position und Größe bleiben. Auf dem Handy liegt ein 74–90 % deckender Verlauf über dem Foto. */
@media (max-width:768px){
  .nf-systems-page .nf-systems-hero{background-image:url("../img/systeme/hero-systeme-w1024.webp")}
}

/* v901/v902 (Wunsch NordFly): Systeme – (v902: Schriftgrößen wie vorher: h2 wie .heading h2, Text .89rem wie der Fließtext, Funktionstitel 1.22rem wie die früheren Zwischenüberschriften) – pro System großer Screenshot (Klick vergrößert), kurze Einleitung und 4 Kernfunktionen,
   Bild abwechselnd links/rechts, mitlaufende System-Leiste wie die Jahresleiste der Geschichte. Skript: assets/js/systeme.js. */
.nf-systems-page .nf-systems-timeline{position:relative}
.nf-systems-page .sx-bar{position:sticky;top:var(--header);z-index:60;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid #dce7f1;box-shadow:0 8px 24px rgba(3,18,37,.05)}
.nf-systems-page .sx-bar .container{display:flex;align-items:center;gap:14px;height:54px;transition:padding-left .22s cubic-bezier(.23,1,.32,1)}
.nf-systems-page .sx-bar-label{flex:none;color:#0a7fc5;font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.nf-systems-page .sx-bar-track{display:flex;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none;padding:4px 2px}
.nf-systems-page .sx-bar-track::-webkit-scrollbar{display:none}
.nf-systems-page .sx-bar a{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px 0 8px;border:1px solid #cfe0ed;border-radius:999px;background:#fff;color:#456177;font-size:.76rem;font-weight:850;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.nf-systems-page .sx-bar a:hover{border-color:#30aeea;color:#077fc7}
.nf-systems-page .sx-bar a .nfi{font-size:20px;width:22px;height:22px}
.nf-systems-page .sx-bar a.is-active{border-color:transparent;background:linear-gradient(135deg,#087fd0,#22b9ee);color:#fff}
.nf-systems-page .sx-bar a:focus-visible{outline:2px solid #087fd0;outline-offset:2px}
.nf-systems-page .sx-bar-progress{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:linear-gradient(90deg,#087fd0,#48d1ff);transform-origin:left;transform:scaleX(var(--sx-p,0))}
/* angeheftet: „Systeme“ bündig unter der sichtbaren Logo-Kante (Werte wie Geschichte v893/v896) */
@media(min-width:981px){.nf-systems-page .sx-bar.is-stuck .container{padding-left:16.7px}}
@media(min-width:1051px){.nf-systems-page .sx-bar.is-stuck .container{padding-left:calc(clamp(140px, 100vw - 926px, 222px) * .0303)}}
@media(min-width:1321px){.nf-systems-page .sx-bar.is-stuck .container{padding-left:23.4px}}
.nf-systems-page .sx-sec{scroll-margin-top:54px}
.nf-systems-page .sx-sec .nf-systems-section-heading{margin:0 0 24px}
.nf-systems-page .sx-sec .nf-systems-section-heading h2{max-width:none}
.nf-systems-page .sx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.nf-systems-page .sx-grid.sx-right .sx-shot{order:2}
.nf-systems-page .sx-shot{margin:0;min-width:0}
.nf-systems-page .sx-zoom{display:block;width:100%;padding:0;border:0;background:none;border-radius:18px;overflow:hidden;cursor:zoom-in;box-shadow:0 26px 60px rgba(3,18,37,.18);transition:transform .25s cubic-bezier(.23,1,.32,1),box-shadow .25s ease}
.nf-systems-page .sx-zoom:hover{transform:translateY(-3px);box-shadow:0 32px 70px rgba(3,18,37,.22)}
.nf-systems-page .sx-zoom:active{transform:scale(.99)}
.nf-systems-page .sx-zoom:focus-visible{outline:3px solid #087fd0;outline-offset:4px}
.nf-systems-page .sx-zoom img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top left}
/* v909: Hinweis als Schild auf dem Bild (spart eine Zeile); der Name bleibt für Screenreader im Text */
.nf-systems-page .sx-shot{position:relative}
.nf-systems-page .sx-shot figcaption{position:absolute;right:12px;bottom:12px;margin:0;font-size:0;line-height:0;pointer-events:none}
.nf-systems-page .sx-shot figcaption span{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(3,18,37,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:.74rem;font-weight:800;line-height:1.2}
.nf-systems-page .sx-shot figcaption span::before{content:"";width:12px;height:12px;border:2px solid currentColor;border-radius:50%;box-shadow:5px 5px 0 -3.5px currentColor}
.nf-systems-page .sx-lead{margin:0 0 18px;color:var(--nf-muted);font-size:.89rem;line-height:1.5}
.nf-systems-page .sx-features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;padding:0;list-style:none}
.nf-systems-page .sx-features li{display:block;padding:13px 15px 14px;border:1px solid #dce8f2;border-radius:16px;background:rgba(255,255,255,.82)}
.nf-systems-page .sx-features strong{display:flex;align-items:center;gap:12px;margin-bottom:7px;color:#0c263e;font-size:1.22rem;font-weight:850;letter-spacing:-.025em;line-height:1.22}
.nf-systems-page .sx-features li > span{display:block;color:var(--nf-muted);font-size:.89rem;line-height:1.5}
.nf-systems-page .sx-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:linear-gradient(145deg,#066fc3,#22b9ee);box-shadow:0 10px 22px rgba(8,127,208,.24)}
.nf-systems-page .sx-icon svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nf-systems-page .cycle-dark .sx-lead{color:rgba(244,249,255,.85)}
.nf-systems-page .cycle-dark .sx-features li{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
.nf-systems-page .cycle-dark .sx-features strong{color:#fff}
.nf-systems-page .cycle-dark .sx-features li > span{color:rgba(244,249,255,.85)}
/* Vergrößerte Ansicht */
.sx-lightbox{max-width:min(94vw,1600px);max-height:92vh;padding:0;border:0;border-radius:16px;background:#031225;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.5)}
.sx-lightbox::backdrop{background:rgba(2,10,22,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sx-lightbox img{display:block;max-width:min(94vw,1600px);max-height:92vh;width:auto;height:auto}
.sx-lightbox .sx-close{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:rgba(3,18,37,.72);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.sx-lightbox .sx-close:focus-visible{outline:2px solid #48d1ff;outline-offset:2px}
.sx-lightbox[open]{animation:sx-pop .2s cubic-bezier(.23,1,.32,1)}
@keyframes sx-pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
/* Hintergrundbild (OperationCenter) erst kurz vor dem Erreichen laden – die Abschnitte liegen jetzt in .nf-systems-timeline */
html.nf-lazy-bg .nf-systems-timeline > section:not(.nf-bg-ready)::before{background-image:none}
@media(min-width:981px) and (max-height:900px){
  .nf-systems-page .sx-sec.nf-systems-section{padding-top:44px;padding-bottom:46px}
  .nf-systems-page .sx-lead{margin-bottom:14px}
  .nf-systems-page .sx-features{gap:10px}
}
@media(min-width:981px) and (max-height:800px){
  .nf-systems-page .sx-sec.nf-systems-section{padding-top:34px;padding-bottom:36px}
  main.nf-systems-page .nf-systems-section.sx-sec .nf-systems-section-heading{margin-bottom:12px}
  .nf-systems-page .sx-lead{margin-bottom:10px}
  .nf-systems-page .sx-features{gap:8px}
  .nf-systems-page .sx-features li{padding:10px 13px 11px}
  .nf-systems-page .sx-features strong{margin-bottom:4px}
}
@media(max-width:980px){
  .nf-systems-page .sx-bar-label{display:none}
  .nf-systems-page .sx-bar .container{height:50px}
  .nf-systems-page .sx-grid{grid-template-columns:1fr;gap:24px}
  .nf-systems-page .sx-grid.sx-right{grid-template-columns:1fr}
  .nf-systems-page .sx-grid.sx-right .sx-shot{order:0}
}
@media(max-width:600px){
  .nf-systems-page .sx-features{grid-template-columns:1fr}
}
/* v909/v913 (Wunsch NordFly): Discord – Bild oben; darunter zwei weitere Karten, die in derselben Rasterzeile stehen wie
   die unteren zwei Karten rechts (gleiche Oberkante und gleiche Höhe). Auf dem Handy folgen sie am Ende. */
.nf-systems-page .sx-discord{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;row-gap:12px;align-items:stretch}
.nf-systems-page .sx-discord .sx-shot{align-self:start}
.nf-systems-page .sx-discord .sx-copy{align-self:end}
.nf-systems-page .sx-discord > .sx-features{grid-auto-rows:1fr}
@media(min-width:981px) and (max-height:900px){.nf-systems-page .sx-discord{row-gap:8px}.nf-systems-page .sx-discord .sx-features{gap:8px}}
@media(min-width:981px) and (max-height:800px){.nf-systems-page .sx-discord .sx-zoom img{aspect-ratio:16/7.4}}
@media(max-width:980px){
  .nf-systems-page .sx-discord .sx-shot{order:0}
  .nf-systems-page .sx-discord .sx-copy{order:1}
  .nf-systems-page .sx-discord .sx-features-more{order:2}
  .nf-systems-page .sx-discord .sx-features-media{order:3}
  .nf-systems-page .sx-discord{row-gap:24px}
  .nf-systems-page .sx-discord > .sx-features{grid-auto-rows:auto}
}

@media(prefers-reduced-motion:reduce){.nf-systems-page .sx-bar .container,.nf-systems-page .sx-bar a,.nf-systems-page .sx-zoom{transition:none}.sx-lightbox[open]{animation:none}}

/* v907: Icon-Kacheln wieder größer (44 px, Symbol 24 px – Wunsch NordFly). v903 (Wunsch NordFly): Systeme – Schrift wie auf der Startseite (gemessen bei 1700 px Breite):
   Abschnittsüberschrift 2.65rem/1.06, Gewicht 700, -.025em · Fließtext 1.04rem/1.65 in #607087 ·
   Kartentitel 1.3rem/1.2, Gewicht 700 · Kartentext .94rem/1.65 (wie die Karten „Sommer- & Winterflugplan“ usw.). */
main.nf-systems-page .heading h2{font-size:clamp(1.8rem,3vw,2.65rem);line-height:1.06;font-weight:700;letter-spacing:-.025em}
main.nf-systems-page .nf-systems-section .nf-systems-prose,
main.nf-systems-page .nf-systems-intro .nf-systems-prose{font-size:1.04rem;line-height:1.65;color:#607087}
main.nf-systems-page .sx-lead{font-size:1.04rem;line-height:1.65;color:#607087}
main.nf-systems-page .sx-features strong{font-size:1.3rem;line-height:1.2;font-weight:700;letter-spacing:normal;color:#0b1d34}
main.nf-systems-page .sx-features li > span{font-size:.94rem;line-height:1.65;color:#607087}
main.nf-systems-page .cycle-dark .sx-lead,
main.nf-systems-page .cycle-dark .sx-features li > span{color:rgba(255,255,255,.8)}
main.nf-systems-page .cycle-dark .sx-features strong{color:#fff}
main.nf-systems-page .nf-systems-integration .heading p{font-size:1.04rem;line-height:1.65}
@media(max-width:600px){main.nf-systems-page .heading h2{font-size:clamp(1.8rem,8vw,2.35rem)}}

/* v915 (Wunsch NordFly): Einstieg „Alles für deinen virtuellen Flugbetrieb.“ wie sonst auf der Website –
   Überschrift oben, darunter der Text in zwei gleich breiten Spalten (je ein Absatz). */
@media(min-width:721px){
  .nf-systems-page .nf-systems-intro-grid{grid-template-columns:1fr;gap:20px}
  /* v916 (Wunsch NordFly): Überschrift über die ganze Länge, die vier Systemkarten entfallen (die System-Leiste darunter übernimmt) */
  .nf-systems-page .nf-systems-intro-grid .heading,.nf-systems-page .nf-systems-intro-grid .heading h2{max-width:none}
  .nf-systems-page .nf-systems-intro-grid .nf-systems-prose{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:start}
  .nf-systems-page .nf-systems-intro-grid .nf-systems-prose p{margin:0}
}

/* v917 (Wunsch NordFly): 10 Karten pro Abschnitt. Desktop: Bild | Einleitung + 2 Karten, darunter zwei Reihen à 4 Karten –
   alle Karten mit gleichem Abstand (12 px). Die Liste .sx-deck ist auf dem Desktop display:contents, damit die Karten direkt
   im Raster liegen. Handy/Tablet: die Karten sind eine horizontal wischbare Reihe (Scroll-Snap, nächste Karte ragt ins Bild). */
main.nf-systems-page .sx-grid.sx-ten{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:1fr auto auto auto;gap:12px;align-items:stretch}
main.nf-systems-page .sx-ten > .sx-shot{grid-column:1/3;grid-row:1/3;align-self:end;margin:0 28px 0 0;order:0}
main.nf-systems-page .sx-ten.sx-right > .sx-shot{grid-column:3/5;margin:0 0 0 28px}
main.nf-systems-page .sx-ten > .sx-lead{grid-column:3/5;grid-row:1;align-self:end;margin:0 0 6px}
main.nf-systems-page .sx-ten.sx-right > .sx-lead{grid-column:1/3}
main.nf-systems-page .sx-ten > .sx-deck{display:contents}
@media(min-width:981px) and (max-height:900px){main.nf-systems-page .sx-grid.sx-ten{gap:10px}}
@media(min-width:981px) and (max-height:800px){main.nf-systems-page .sx-grid.sx-ten{gap:8px}}
@media(max-width:980px){
  main.nf-systems-page .sx-grid.sx-ten{display:block}
  main.nf-systems-page .sx-ten > .sx-shot,main.nf-systems-page .sx-ten.sx-right > .sx-shot{margin:0 0 22px}
  main.nf-systems-page .sx-ten > .sx-lead{margin:0 0 16px}
  main.nf-systems-page .sx-ten > .sx-deck{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(50% - 50vw);padding:2px calc(50vw - 50%) 8px;scroll-padding-inline:20px}
  main.nf-systems-page .sx-ten > .sx-deck::-webkit-scrollbar{display:none}
  main.nf-systems-page .sx-ten > .sx-deck > li{flex:0 0 min(82%,340px);scroll-snap-align:start}
}
/* Rand wie .container (≤680 px: 14 px) – scroll-padding in % würde sich auf die Liste selbst beziehen */
@media(max-width:680px){main.nf-systems-page .sx-ten > .sx-deck{scroll-padding-inline:14px}}

/* v923 (Wunsch NordFly): Das Bild füllt die Fläche neben Einleitung und erster Kartenreihe – oben bündig mit der Einleitung,
   unten bündig mit den Karten, Abstand zu den Karten wie zwischen den Karten. Die Höhe ergibt sich nur aus Text und Karten
   (Bild absolut, object-fit: cover). Dadurch rückt der Inhalt näher an die Überschrift. */
@media(min-width:981px){
  main.nf-systems-page .sx-ten > .sx-shot,main.nf-systems-page .sx-ten.sx-right > .sx-shot{align-self:stretch;margin:0;min-height:0}
  main.nf-systems-page .sx-ten > .sx-shot .sx-zoom{position:relative;height:100%}
  main.nf-systems-page .sx-ten > .sx-shot .sx-zoom img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:top left}
  main.nf-systems-page .sx-ten > .sx-lead{align-self:start;margin:-6px 0 6px}
}
@media(min-width:981px) and (min-height:801px){main.nf-systems-page .nf-systems-timeline > .sx-sec .nf-systems-section-heading{margin-bottom:16px}}
@media(min-width:981px) and (min-height:901px){main.nf-systems-page .nf-systems-timeline > .sx-sec.nf-systems-section{padding-top:44px;padding-bottom:48px}}
/* v926 (Wunsch NordFly): Icons in den Kacheln deutlich größer */.nf-systems-page .sx-icon svg{width:32px;height:32px;stroke-width:1.6}
/* v928 (Wunsch NordFly): Einleitung fließt gleichmäßig über zwei Spalten */@media(min-width:721px){.nf-systems-page .nf-systems-intro-grid .nf-systems-prose{display:block;column-count:2;column-gap:40px}.nf-systems-page .nf-systems-intro-grid .nf-systems-prose p + p{margin-top:18px}}
/* v931 (Fehler NordFly): iPhone/Safari zeigte die Masken-Icons der mitlaufenden Leiste nicht (Maske in angeheftetem Element mit backdrop-filter). Die vier Icons stehen jetzt als Inline-SVG im HTML. */.nf-systems-page .sx-bar a .sx-bar-ico{flex:none;display:block;width:22px;height:22px}
/* v932 (Wunsch NordFly): zwei Buttons links unter dem Zusammenspiel */.nf-systems-page .nf-systems-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
/* v933 (Wunsch NordFly): Zusammenspiel-Kacheln springen zum jeweiligen System */.nf-systems-page .nf-systems-process>a{color:inherit;text-decoration:none;transition:border-color .2s ease,background-color .2s ease,transform .16s cubic-bezier(.23,1,.32,1)}@media(hover:hover){.nf-systems-page .nf-systems-process>a:hover{border-color:rgba(111,195,242,.55);background-color:rgba(255,255,255,.085)}}.nf-systems-page .nf-systems-process>a:active{transform:scale(.98)}.nf-systems-page .nf-systems-process>a:focus-visible{outline:2px solid #57cfff;outline-offset:3px}
}