/* Arcware Service Orbit - die neue Startseite. Look aus dem neuen Prototyp (_MVP/Arcware Service Orbit.html):
   weiss, Open Sans, Navy + Stahlblau. Die Orbit-Bühne ist in einer Scroll-Strecke angepinnt, die Karten drehen
   sich mit dem Scrollen (Ablauf aus prototype-v1).

   WordPress-tauglich gekapselt: Alle Regeln gelten nur innerhalb von .aw-home. Ausnahme sind drei Regeln, die
   am Dokument wirken MÜSSEN (Snap-Punkte, horizontaler Überlauf, Scrollbar-Platz) - sie greifen nur, wenn
   <body> die Klasse .aw-home-page trägt (WordPress: body_class im Startseiten-Template).
   Header, Footer und Menü des Prototyps stehen in prototype-shell.css (in WordPress kommen sie vom Theme). */

.aw-home {
  --bg: #FFFFFF;
  --navy: #105778;
  --heading: #165377;
  --sky: #7DA8BC;
  --btn: #88AEC4;
  --text: #797979;
  --text-soft: #8D8D8D;
  --line: rgba(16, 87, 120, .13);
  --line-strong: rgba(16, 87, 120, .26);
  --tint: #F4F8FA;
  --accent: #2E91D1;     /* wird von orbit.js je vorderer Karte gesetzt */
  --font: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --steps: 4;            /* Anzahl Snap-Abschnitte, wird von orbit.js gesetzt */
  --step: 70vh;          /* Scrollweg pro Abschnitt */
  --aw-fit-max: 1.15;    /* Orbit wächst auf hohen Fenstern bis 115 % (Kundenentscheid); 1 = wie ursprünglich */
  /* Höhe des fixierten Seiten-Headers, unter dem die Bühne pinnt. Prototyp: 66 px (kompakter Header aus
     prototype-shell.css); WordPress: im Template passend zum Theme-Header setzen. */
  --aw-head-offset: var(--aw-shell-head, 0px);
  /* Freiraum oben für einen Header, der sich ÜBER die Bühne legt (statt dass die Bühne darunter pinnt): Orbit und "A"
     werden im Bereich darunter zentriert. Prototyp: 0; WordPress: siehe aw-home-theme.css. */
  --aw-head-space: 0px;
  /* Schrift/Grundwerte hier statt auf body, damit Theme-Vorgaben die Startseite nicht verändern */
  font-family: var(--font); font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--text);
  color-scheme: light;
}
.aw-home * { box-sizing: border-box; }
.aw-home img { max-width: 100%; }
/* Überschriften/Buttons gegen typische Theme-Stile absichern (Werte = Browser-Standard, im Prototyp ohne Wirkung) */
.aw-home h1, .aw-home h3 { font-family: inherit; letter-spacing: normal; text-transform: none; }
.aw-home button { text-transform: none; letter-spacing: normal; }

/* Dokument-Regeln, nur auf der Startseite */
html:has(> body.aw-home-page) { scroll-snap-type: y proximity; scrollbar-gutter: stable; }
/* clip statt hidden: seitlich überstehende Karten verbreitern die Seite nicht (sonst zoomen Mobilbrowser heraus),
   und position: sticky der angepinnten Bühne funktioniert weiter */
html:has(> body.aw-home-page), body.aw-home-page { overflow-x: clip; }

/* Hintergrund-Ebene: fest hinter Hero + Orbit, blendet nach der Strecke aus (plexus.js).
   Prototyp: Partikelnetz #plexus. WordPress: hier liegt ggf. der Slider-Revolution-Hintergrund. */
.aw-home .aw-home-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.aw-home #plexus { display: block; width: 100%; height: 100%; }
.aw-home .wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* Story-Abschnitt (Ablauf aus prototype-v1): liegt zentriert über der Bühne in der angepinnten Strecke und
   wird von orbit.js scroll-synchron ausgeblendet (opacity + translateY). */
.aw-home .story { position: absolute; left: 50%; top: 50%; z-index: 3; width: min(760px, calc(100% - 32px)); transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.aw-home .story { will-change: opacity, transform; }
.aw-home .story h1 { color: var(--heading); font-weight: 700; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.1; margin: 0 0 14px; text-wrap: balance; }
.aw-home .story p { max-width: 60ch; margin: 0 auto; font-size: 17px; color: #5F6B72; text-wrap: pretty; }
.aw-home .story .how { margin-top: 18px; font-size: 13px; color: var(--sky); font-weight: 600; letter-spacing: .04em; }

/* Scroll-Hinweis: sitzt direkt unter dem Hero-Text (absolut an dessen Unterkante, der Text selbst bleibt, wo er ist) und ist
   gross genug, um auf den ersten Blick zu zeigen: hier wird gescrollt. Blendet beim Scrollen mit dem Hero aus. */
.aw-home .scroll-hint { position: absolute; left: 50%; top: 100%; margin-top: 40px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; color: var(--heading); }
.aw-home .scroll-hint-mouse { width: 36px; height: 58px; border: 3px solid currentColor; border-radius: 20px; position: relative; }
.aw-home .scroll-hint-mouse span { position: absolute; top: 9px; left: 50%; width: 6px; height: 13px; margin-left: -3px; border-radius: 3px; background: currentColor; animation: aw-scroll-hint-dot 1.6s ease-in-out infinite; }
.aw-home .scroll-hint-text { font-size: 14px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; }
@keyframes aw-scroll-hint-dot { 0% { opacity: 1; transform: translateY(0); } 70% { opacity: 0; transform: translateY(20px); } 100% { opacity: 0; transform: translateY(0); } }
/* Touch-Geräte (Handy, Tablet): statt der Maus ein Finger, der nach oben wischt. Nach Eingabeart, nicht nach Fensterbreite:
   ein schmales Browserfenster am Computer zeigt weiter die Maus. */
.aw-home .scroll-hint-finger { display: none; }
@media (hover: none) and (pointer: coarse) {
  .aw-home .scroll-hint-mouse { display: none; }
  .aw-home .scroll-hint-finger { display: block; width: 48px; height: 48px; animation: aw-scroll-hint-swipe 1.8s ease-in-out infinite; }
}
@keyframes aw-scroll-hint-swipe { 0% { opacity: 0; transform: translateY(22px); } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

/* Scroll-Strecke: Bühne bleibt angepinnt (unter dem Seiten-Header), pro Abschnitt --step Scrollweg */
.aw-home .track { position: relative; z-index: 1; height: calc(100vh - var(--aw-head-offset) + (var(--steps) - 1) * var(--step)); height: calc(100svh - var(--aw-head-offset) + (var(--steps) - 1) * var(--step)); }
.aw-home .snap { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; pointer-events: none; }
.aw-home .pin { position: sticky; top: var(--aw-head-offset); height: calc(100vh - var(--aw-head-offset)); height: calc(100svh - var(--aw-head-offset)); padding-top: var(--aw-head-space); display: flex; flex-direction: column; justify-content: center; }
.aw-home .pin .wrap { width: 100%; }
/* Bühne und Pfeile erscheinen erst nach dem Story-Abschnitt (orbit.js setzt die Deckkraft) */
.aw-home .pin > .wrap { opacity: 0; }
.aw-home .stage .hint { will-change: opacity; }

/* Stage */
.aw-home .stage { position: relative; height: min(calc(620px * var(--aw-fit-max, 1)), calc(100svh - var(--aw-head-offset) - var(--aw-head-space) - 80px)); perspective: 1100px; perspective-origin: 50% 36%; touch-action: pan-y; cursor: grab; outline: none; user-select: none; -webkit-user-select: none; }
.aw-home .stage.dragging { cursor: grabbing; }
.aw-home .stage:focus-visible { box-shadow: inset 0 0 0 1px var(--line-strong); border-radius: 18px; }
.aw-home #orbitLine, .aw-home #orbitFx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.aw-home .coreobj { position: absolute; left: 0; top: 0; pointer-events: none; }
.aw-home .ring { position: absolute; left: 50%; top: 36%; transform-style: preserve-3d; width: 0; height: 0; }
/* Karten werden intern --k-mal so gross aufgebaut und von orbit.js mit scale(1 / --k) auf die sichtbare Grösse gebracht.
   Grund: Der Browser rendert 3D-gedrehte Ebenen in ihrer eigenen Grösse und vergrössert sie danach (vordere Karte:
   Perspektive + 115 %). Bei --k: 1 werden Text und Illustration dadurch weich; mit 2 entstehen genug Pixel. Sichtbar
   ändert sich nichts. --k gilt nur hier und wird von orbit.js gelesen. */
.aw-home .ring { --k: 2; }
/* Safari und alle iOS-Browser (WebKit) skalieren den Inhalt so hochgerechneter Karten auf dem iPhone nicht zuverlässig mit
   (Text/Bilder doppelt gross) - und brauchen das Hochrechnen nicht, sie rendern die Karten von sich aus scharf.
   hanging-punctuation unterstützt nur WebKit. */
@supports (hanging-punctuation: first) {
  .aw-home .ring { --k: 1; }
}
.aw-home .card {
  position: absolute; left: 0; top: 0;
  width: calc(250px * var(--k)); height: calc(330px * var(--k)); margin: calc(-165px * var(--k)) 0 0 calc(-125px * var(--k));
  border: calc(1px * var(--k)) solid var(--line); border-radius: calc(6px * var(--k)); padding: calc(14px * var(--k)) calc(20px * var(--k)) calc(18px * var(--k));
  background: rgba(255, 255, 255, .94); color: var(--text); text-align: left; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; gap: calc(6px * var(--k));
  box-shadow: 0 calc(18px * var(--k)) calc(40px * var(--k)) calc(-22px * var(--k)) rgba(16, 87, 120, .35);
  will-change: transform, opacity; /* bewusst ohne preserve-3d: Safari skaliert sonst den Karteninhalt nicht mit */
  opacity: 0; /* bis zum Auftritt (Pop beim Erreichen der Strecke) unsichtbar */
}
.aw-home .card::before { content: ""; position: absolute; left: calc(-1px * var(--k)); right: calc(-1px * var(--k)); top: calc(-1px * var(--k)); height: calc(3px * var(--k)); border-radius: calc(6px * var(--k)) calc(6px * var(--k)) 0 0; background: var(--c); opacity: .35; transition: opacity .35s; }
.aw-home .card.front { border-color: var(--line-strong); box-shadow: 0 calc(30px * var(--k)) calc(60px * var(--k)) calc(-24px * var(--k)) rgba(16, 87, 120, .45), 0 0 0 calc(1px * var(--k)) var(--c); }
.aw-home .card.front::before { opacity: 1; }
.aw-home .card:focus-visible { outline: calc(2px * var(--k)) solid var(--c); outline-offset: calc(4px * var(--k)); }
/* Illustrationen liegen auf Weiss (siehe tools/cutout-cards.py); multiply lässt das Weiss im Kartengrund verschwinden */
.aw-home .card img { width: calc(150px * var(--k)); height: calc(150px * var(--k)); max-width: none; object-fit: contain; align-self: center; margin: calc(-4px * var(--k)) 0 0; pointer-events: none; -webkit-user-drag: none; mix-blend-mode: multiply; }
.aw-home .card h3 { color: var(--heading); font-weight: 700; font-size: calc(18.5px * var(--k)); line-height: 1.22; margin: 0; text-wrap: balance; }
.aw-home .card p { margin: 0; font-size: calc(13.5px * var(--k)); line-height: 1.5; color: var(--text); }
.aw-home .card .go { margin-top: auto; font-size: calc(13px * var(--k)); font-weight: 600; color: var(--navy); display: flex; justify-content: space-between; border-top: calc(1px * var(--k)) solid var(--line); padding-top: calc(9px * var(--k)); }
.aw-home .card .go i { font-style: normal; color: var(--c); transition: transform .3s; }
.aw-home .card.front:hover .go i { transform: translateX(calc(4px * var(--k))); }

.aw-home .hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; white-space: nowrap; font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.aw-home .arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; color: var(--heading); font-size: 16px; cursor: pointer; display: grid; place-items: center; }
.aw-home .arrow:hover { border-color: var(--accent); color: var(--accent); }
.aw-home .arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 560px) {
  .aw-home { --step: 60vh; }
  .aw-home .stage { height: min(540px, calc(100svh - var(--aw-head-offset) - var(--aw-head-space) - 100px)); }
  .aw-home .card { width: calc(208px * var(--k)); height: calc(290px * var(--k)); margin: calc(-145px * var(--k)) 0 0 calc(-104px * var(--k)); padding: calc(10px * var(--k)) calc(15px * var(--k)) calc(14px * var(--k)); }
  .aw-home .card img { width: calc(118px * var(--k)); height: calc(118px * var(--k)); }
  .aw-home .card h3 { font-size: calc(16px * var(--k)); }
  .aw-home .card p { font-size: calc(12.5px * var(--k)); }
  .aw-home .story p { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(> body.aw-home-page) { scroll-snap-type: none; }
  .aw-home .scroll-hint-mouse span, .aw-home .scroll-hint-finger { animation: none; }
}