/* EuroPilot Connect, Funktionsseite (Markenauftritt 2026-09).
   Grundlage in /assets/marke.css. Erzeugt von scripts/build-marketing.mjs. */

/* Kopf mit Foto so hoch wie das Fenster, bündig mit der Unterkante wie der
   Hero der Startseite (Tim, 23.09.2026). Unten Platz für das Kapitel-Dock
   (14 px Abstand + 56 px Platte + Luft), damit es den Text nie verdeckt. */
.seite-features .seitenkopf{min-height:100vh;min-height:100svh;display:flex;align-items:flex-end}
.seite-features .seitenkopf-inhalt{width:100%;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

/* ── Kapitel-Dock (Tim, 23.09.2026) ─────────────────────────────────────
   Glasplatte unten in der Mitte. Klein zeigt sie das Kapitel, in dem du
   gerade bist. Ein Tipp öffnet sie zur Leiste mit allen Kapiteln, die sich
   seitlich wischen lässt, ohne dass die Seite springt. Erst ein Tipp auf ein
   Kapitel fliegt dorthin, danach wird die Platte wieder klein. Ohne
   Berührung schliesst sie sich nach gut einer Sekunde von selbst
   (features.js). Rund ist sie, weil sie ein Bedienelement ist.
   KEIN filter:drop-shadow: Safari malt ihn als eckigen Kasten. */

/* Ohne Skript: schlichte Kapitelzeile unter dem Kopf */
.kapiteldock{background:var(--nacht);border-bottom:1px solid rgba(255,255,255,.14)}
.kapiteldock-spur{display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;touch-action:pan-x;scrollbar-width:none;padding:0 var(--rand);margin:0}
.kapiteldock-spur::-webkit-scrollbar{display:none}
.kapiteldock-spur li{flex:0 0 auto}
.kapiteldock-spur a{display:flex;align-items:baseline;gap:9px;padding:18px 22px 18px 0;white-space:nowrap;text-decoration:none;font-size:14px;font-weight:600;color:rgba(255,255,255,.72)}
.kapiteldock .nr{font-size:10.5px;font-weight:700;letter-spacing:.16em;font-variant-numeric:tabular-nums}

/* Mit Skript: die Glasplatte */
.kapiteldock.ist-bereit{
  --zu:216px;--auf:min(760px,calc(100vw - 24px));
  position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:60;
  width:var(--zu);height:56px;max-width:calc(100vw - 24px);
  transform:translateX(-50%);border-radius:999px;overflow:hidden;isolation:isolate;
  border:1px solid rgba(255,255,255,.3);
  background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 48%,rgba(255,255,255,.09)),rgba(14,24,40,.28);
  -webkit-backdrop-filter:blur(18px) saturate(1.8) brightness(1.06);backdrop-filter:blur(18px) saturate(1.8) brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.14),inset 0 0 22px rgba(255,255,255,.05),0 12px 36px rgba(3,10,22,.34),0 2px 6px rgba(3,10,22,.18);
  transition:width .52s cubic-bezier(.3,1.22,.45,1),height .52s cubic-bezier(.3,1.22,.45,1),transform .35s var(--weich),opacity .3s ease,box-shadow .4s ease;
}
/* Lichtkante oben, wie bei Glas, das von oben beleuchtet wird */
.kapiteldock.ist-bereit::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(120% 90% at 30% -20%,rgba(255,255,255,.26),transparent 55%),radial-gradient(80% 60% at 85% 120%,rgba(255,255,255,.08),transparent 60%)}
.kapiteldock.ist-bereit.ist-offen{width:var(--auf);height:92px;box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -1px 0 rgba(255,255,255,.16),inset 0 0 26px rgba(255,255,255,.06),0 22px 60px rgba(3,10,22,.42),0 3px 10px rgba(3,10,22,.2)}
.kapiteldock.ist-bereit.ist-gedrueckt{transform:translateX(-50%) scale(1.045)}
.kapiteldock.ist-bereit.ist-weg{opacity:0;transform:translate(-50%,28px) scale(.96);pointer-events:none}

/* Klein: aktuelles Kapitel */
.kapiteldock-knopf{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;padding:0 22px;border:0;border-radius:inherit;background:none;color:#fff;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .18s ease,transform .35s var(--weich)}
.kapiteldock-knopf-inhalt{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;font-size:14.5px;font-weight:600;letter-spacing:.005em}
.kapiteldock-knopf .nr{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);font-size:10px;letter-spacing:.04em;color:rgba(255,255,255,.92)}
.kapiteldock-pfeil{width:12px;height:12px;opacity:.8;margin-left:2px}
.kapiteldock.ist-offen .kapiteldock-knopf{opacity:0;transform:scale(.86);pointer-events:none}
.kapiteldock-knopf:focus-visible{outline:2px solid #fff;outline-offset:-4px}

/* Offen: Leiste mit allen Kapiteln */
.kapiteldock.ist-bereit .kapiteldock-spur{position:absolute;inset:0;z-index:2;align-items:center;gap:4px;padding:0 12px;scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
  opacity:0;visibility:hidden;transform:scale(.94);transition:opacity .2s ease,transform .4s var(--weich),visibility 0s .2s}
.kapiteldock.ist-offen .kapiteldock-spur{opacity:1;visibility:visible;transform:none;transition:opacity .28s ease .1s,transform .45s var(--weich) .06s,visibility 0s}
.kapiteldock.ist-bereit .kapiteldock-spur li{scroll-snap-align:center}
.kapiteldock.ist-bereit .kapiteldock-spur a{flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:112px;height:66px;padding:0 16px;border-radius:999px;color:rgba(255,255,255,.84);font-size:14px;-webkit-tap-highlight-color:transparent;transition:background-color .2s ease,color .2s ease,transform .25s var(--weich)}
.kapiteldock.ist-bereit .kapiteldock-spur a .nr{color:rgba(255,255,255,.6)}
.kapiteldock.ist-bereit .kapiteldock-spur a:hover{background:rgba(255,255,255,.1)}
.kapiteldock.ist-bereit .kapiteldock-spur a:active{transform:scale(.95)}
.kapiteldock.ist-bereit .kapiteldock-spur a[aria-current="true"]{background:rgba(255,255,255,.94);color:var(--navy);box-shadow:inset 0 1px 0 #fff,0 4px 14px rgba(3,10,22,.22)}
.kapiteldock.ist-bereit .kapiteldock-spur a[aria-current="true"] .nr{color:rgba(10,26,51,.55)}
.kapiteldock.ist-bereit .kapiteldock-spur a:focus-visible{outline:2px solid #fff;outline-offset:-3px}

@media (max-width:620px){
  .kapiteldock.ist-bereit.ist-offen{height:88px}
  .kapiteldock.ist-bereit .kapiteldock-spur a{min-width:104px;height:62px;padding:0 14px}
}
/* Ohne Glas im System (Transparenz reduziert, höherer Kontrast, alte Browser) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.kapiteldock.ist-bereit{background:rgba(12,22,38,.94)}}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){.kapiteldock.ist-bereit{background:#0c1626;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.kapiteldock.ist-bereit,.kapiteldock-knopf,.kapiteldock.ist-bereit .kapiteldock-spur,.kapiteldock.ist-bereit .kapiteldock-spur a{transition:none}}

/* Kapitel: abwechselnd hell und nachtblau, Bild und Text wechseln die Seite */
.kapitel{padding-block:clamp(88px,10vw,160px);scroll-margin-top:76px}
@media (max-width:859px){.kapitel{scroll-margin-top:64px}}
.kapitel-raster{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,96px);align-items:center}
.kapitel.rechts .kapitel-text{order:2}
/* Gespiegelt bekommt das Bild ebenfalls die breite Spalte, sonst war jedes
   zweite iPad kleiner (Tim, 23.09.2026: „alles muss gleich gross sein“). */
.kapitel.rechts .kapitel-raster{grid-template-columns:7fr 5fr}
.kapitel-text .titel-klein{margin-top:22px;font-size:clamp(32px,3.4vw,52px)}
.kapitel-text .lauf{margin-top:20px}
.kapitel-text .merkmale{margin-top:30px}
.kapitel-text .textlink{margin-top:32px}
/* KEIN filter:drop-shadow auf den iPad-Bildern: Safari auf dem iPhone malt den
   Schatten bei eingeblendeten Elementen als eckigen Kasten statt entlang der
   Geräteform (Tim, 23.09.2026). Auf der dunklen Karte braucht es ihn nicht. */
.kapitel .epc-app-shot > a::after{display:none}
.kapitel.dunkel .epc-app-shot figcaption,.kapitel.dunkel .epc-app-shot figcaption span{color:rgba(255,255,255,.72)}

/* Weitere Ansichten: Reihe unter dem Kapitel, abgesetzt mit Haarlinie */
.kapitel-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(56px,6vw,88px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--linie)}
.kapitel.dunkel .kapitel-galerie{border-top-color:var(--linie-hell)}
.kapitel-galerie .epc-app-shot > a{transition:transform .5s var(--weich)}
.kapitel-galerie .epc-app-shot > a:hover{transform:translateY(-4px)}
.kapitel-galerie figcaption{margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-3)}
.kapitel.dunkel .kapitel-galerie figcaption{color:var(--hell-3)}

.epc-feature-note{margin-block:clamp(56px,6vw,88px) 0;padding-top:24px;border-top:1px solid var(--linie);font-size:13.5px;line-height:1.65;color:var(--tinte-3);max-width:62em}

@media (max-width:900px){
  .kapitel-raster,.kapitel.rechts .kapitel-raster{grid-template-columns:1fr;gap:44px}
  .kapitel.rechts .kapitel-text{order:0}
}

/* ── Kartenkulisse (Tim, 23.09.2026: „die geblurte Karte, die beim Scrollen
   mitläuft, wieder mit rein“) ─────────────────────────────────────────
   Feste Ebene hinter den Kapiteln: weiche Kartenansicht der App, sehr gross,
   wandert beim Scrollen langsam nach oben (features.js setzt --karte-y).
   Die Kapitel sind durchsichtig, alles darunter (Fakten, Stimmen, Fuss)
   deckt die Karte wieder ab. */
.kartenkulisse{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#131b27}
.kartenkulisse-karte{position:absolute;left:50%;top:0;width:max(230vw,310vh);aspect-ratio:1660 / 790;transform:translate3d(-50%,var(--karte-y,0px),0);will-change:transform}
.kartenkulisse-karte::before{content:"";position:absolute;inset:-2px;background:url('/images/tour/karte-soft-navy.webp') 18% 75% / 123.37% 108.48% no-repeat;filter:blur(1.5px) saturate(.9)}
.kartenkulisse-ton{position:absolute;inset:0;background:linear-gradient(115deg,rgba(8,18,32,.6),rgba(10,22,36,.4) 70%),linear-gradient(180deg,rgba(8,18,32,.08),transparent 50%,rgba(8,18,32,.16))}
.seite-features .kapitel.dunkel{background:transparent}
.seite-features .seitenkopf,.seite-features .hinweis-flaeche,.seite-features .epc-facts,.seite-features .epc-guides,.seite-features .fuss{position:relative}
.hinweis-flaeche{background:var(--weiss);padding-bottom:clamp(40px,5vw,72px)}
.hinweis-flaeche .epc-feature-note{margin-top:0;padding-top:clamp(40px,5vw,72px);border-top:0}
.seite-features .epc-facts{background:var(--weiss);padding-bottom:clamp(64px,8vw,120px)}
.seite-features .epc-facts{margin-top:-1px}

@media (prefers-reduced-motion:reduce){.kartenkulisse-karte{transform:translate3d(-50%,0,0)}}

/* ── App-Aufnahmen im iPad-Rahmen (23.09.2026) ────────────────────────
   Gleiche Masse wie .geraet-schirm in home/home.css: Bildschirm des
   Mockups 101/102 bis 2632/1997 von 2732 x 2098, 3 px grösser, damit die
   Blende die Videokante deckt. Mehrere Clips liegen übereinander und
   blenden ineinander über. */
.geraet{position:relative}
.geraet-rahmen{position:relative;z-index:2;display:block;width:100%;height:auto;pointer-events:none}
.geraet-schirm{position:absolute;z-index:0;left:3.587%;top:4.719%;width:92.862%;height:90.610%;object-fit:cover;border-radius:2.48% / 3.31%;background:#0b1627;opacity:0;transition:opacity .5s ease}
.geraet-schirm.ist-an{z-index:1;opacity:1}

/* Reiter unter dem Gerät: Name und Fortschrittslinie je Clip */
.folge-reiter{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:20px 18px;margin-top:22px}
.folge-einzel{margin-top:22px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}

/* iPhone neben dem iPad (Tim, 23.09.2026: „nebeneinander, das Handy soll das
   iPad nicht überblenden“). Die Bühne hat die Höhe des vollen iPads; kommt
   das iPhone dazu, rückt das iPad schmaler, beide stehen mittig. Auf dem
   Telefon steht bei Clips mit iPhone-Aufnahme NUR das iPhone (features.js
   spielt dann das iPad-Video gar nicht erst).
   Bildschirm im iPhone-Rahmen (900 x 1856): 43/39 bis 853/1814, Eckradius
   100, 2 px grösser, damit die Blende die Videokante deckt. */
.geraet-buehne{position:relative}
.geraet-folge.mit-iphone .geraet-buehne{display:flex;align-items:center;justify-content:center;aspect-ratio:2732 / 2098}
.geraet-folge.mit-iphone .geraet{flex:0 1 100%;min-width:0;transition:flex-basis .6s var(--weich),opacity .4s ease}
.geraet-iphone{position:relative;flex:0 0 0%;margin-left:0;opacity:0;transition:flex-basis .6s var(--weich),margin-left .6s var(--weich),opacity .45s ease;pointer-events:none}
.geraet-folge.telefon-an .geraet{flex-basis:70%}
.geraet-folge.telefon-an .geraet-iphone{flex-basis:26%;margin-left:4%;opacity:1}
.iphone-rahmen{position:relative;z-index:2;display:block;width:100%;height:auto}
.iphone-schirm{position:absolute;z-index:0;left:4.556%;top:1.994%;width:90.556%;height:95.905%;object-fit:cover;border-radius:12.52% / 5.73%;background:#0b1627;opacity:0;transition:opacity .4s ease}
.iphone-schirm.ist-an{z-index:1;opacity:1}
@media (max-width:900px){
  .geraet-folge.mit-iphone .geraet-buehne{aspect-ratio:14 / 15}
  .geraet-folge.telefon-an .geraet{flex-basis:0%;opacity:0}
  .geraet-folge.telefon-an .geraet-iphone{flex-basis:52%;margin-left:0}
}
.folge-reiter button{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:0 0 4px;border:0;background:none;color:rgba(255,255,255,.56);font:inherit;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:left;cursor:pointer;transition:color .25s ease;-webkit-tap-highlight-color:transparent}
.folge-reiter button:hover,.folge-reiter button.ist-an{color:#fff}
.folge-balken{position:relative;display:block;width:100%;height:2px;background:rgba(255,255,255,.22);overflow:hidden}
.folge-balken i{position:absolute;inset:0;background:#fff;transform-origin:left center;transform:scaleX(var(--fortschritt,0))}
.folge-reiter button:not(.ist-an) .folge-balken i{transform:scaleX(0)}
.folge-reiter button:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media (max-width:620px){.folge-reiter{gap:16px 14px;grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}.folge-reiter button{font-size:11.5px;letter-spacing:.12em}}
@media (prefers-reduced-motion:reduce){.geraet-schirm,.geraet-iphone,.iphone-schirm{transition:none}}