/* ============================================================
   /starkregenalarmsystem/ - VOLLE Seitenhoehe am Original nachgemessen
   ============================================================
   Messung: /opt/tooling/anyel.mjs + pcol.mjs, Viewport 1440.

   Das Original fuehrt die GESAMTE Seite in EINER Spalte:
     Rahmen 1200px (x=120), Innenabstand 74px -> Inhaltsspalte
     1052px (x=194..1246), Fliesstext durchgehend LINKSBUENDIG.
   Zweispaltige Abschnitte teilen diese 1052px in 410px Text
   (davon 96px Innenabstand rechts -> 314px Textbreite) und
   642px Medien ab x=604.

   Vorher lag alles unterhalb des ersten Bildschirms in einer
   780px-Spalte mit zentriertem Text und abweichenden Bildgroessen -
   das war der komplette Rueckstand dieser Seite (17,6%).

   Gemessene Sektionsgrenzen (y, Original):
       0 .. 952   Kopf (Innenabstand 197/74/74)
     952 ..1340   Video 690x388, mittig
    1340 ..2221   Digitaler Zwilling (Innenabstand oben 123)
    2221 ..3155   IoT-Sensornetzwerk
    3155 ..4167   Praxis
    4168 ..5110   App (Innenabstand oben/unten 123)
   ============================================================ */

/* --- gemeinsame Spalte ------------------------------------ */
.fas-sec { max-width: 1200px; margin: 0 auto; padding: 0 74px; }
.fas-sec--intro   { padding-top: 123px; padding-bottom: 74px; }
.fas-sec--zwilling,
.fas-sec--iot,
.fas-sec--praxis  { padding-top: 123px; }
/* Das Original setzt den App-Abschnitt 1px tiefer an (Rundung der
   gebrochenen Abschnittshoehen) - ohne das laeuft der Rest der Seite
   durchgehend einen Pixel zu hoch. */
.fas-sec--app     { padding-top: 124px; padding-bottom: 123px; }

.fas-h2 {
  font-size: var(--fs-card); line-height: 28.8px;
  font-weight: var(--fw-bold); color: var(--color-text-subtle);
  text-align: center; margin: 0;
}

/* Fliesstext: linksbuendig ueber die volle Spaltenbreite, Absaetze
   durch genau eine Leerzeile (22,5px) getrennt - das Flussmodell des
   Originals, nicht der 16px-Standardabstand. */
.fas-prose { text-align: left; color: var(--color-text-muted); }
.fas-prose p { margin: 0 0 22.5px; color: var(--color-text-muted); }
.fas-prose p:last-child { margin-bottom: 0; }

/* Fliesstext dieser Seite laeuft im Original in POPPINS 15/400/22.5,
   nicht in Inter (per getComputedStyle am Original nachgemessen,
   /opt/tooling/linebreaks.mjs). Poppins laeuft breiter, dadurch brechen
   die Absaetze im Original frueher um und jeder Textblock ist einige
   Zeilen hoeher - mit Inter fehlten der Seite kumulativ 88px Hoehe und
   JEDE Zeile darunter stand versetzt (Differenzbild vollflaechig rot).
   Gilt fuer alle Absaetze der Inhaltssektionen inkl. Eyebrow. */
.fas-sec p { font-family: var(--font-heading); }

/* --- Kopfbereich ------------------------------------------ */
.fas-head { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 39px; }
.fas-head > * { margin: 0; }
.fas-head .hero__eyebrow {
  font-size: var(--fs-card); line-height: var(--lh-card); max-width: none;
  color: var(--color-text-muted);
}
.fas-head h1 { text-align: center; }

/* --- Videoblock unter dem Kopf ---------------------------- */
/* Eigener Abschnitt ohne Innenabstand: 690x388, mittig (y 952..1340). */
.fas-video { width: 690px; margin: 0 auto; }

.video-card__thumb {
  position: relative; border-radius: 18px; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--color-surface);
}
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--duration-hover) var(--ease-smooth); }
.video-card__thumb .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  transition: transform var(--duration-hover) var(--ease-smooth),
              background-color var(--duration-hover) var(--ease-smooth); }

/* Hover/Fokus-Rueckmeldung fuer die klickbaren Vorschaubilder: diese Kacheln
   werden von video.js zu einem role="button" aufgewertet (Klick oeffnet das
   YouTube-Video), gaben aber bisher keinerlei Rueckmeldung. Wir uebernehmen
   exakt die zurueckhaltende Gestik der Startseite (home.css): das Bild zoomt
   im overflow:hidden-Rahmen sanft, der Play-Knopf tritt hervor - eine
   lebendige, hochwertige Affordanz statt eines toten Standbilds. NUR bei
   Hover/Fokus; der Ruhezustand (und damit der Pixelvergleich zum Original)
   bleibt unveraendert. Tastaturnutzer bekommen dieselbe Rueckmeldung ueber
   :focus-visible. Bei prefers-reduced-motion neutralisiert base.css die
   Transition (sofort statt animiert). */
.video-card__thumb { cursor: pointer; }
.video-card__thumb:hover img,
.video-card__thumb:focus-visible img { transform: scale(1.05); }
.video-card__thumb:hover .play-btn,
.video-card__thumb:focus-visible .play-btn {
  transform: translate(-50%, -50%) scale(1.08); background: rgba(17,17,17,.72);
}

/* --- Digitaler Zwilling ----------------------------------- */
/* Zwei Kartenbilder 526x270 OHNE Zwischenraum, nur aussen gerundet -
   im Original ein durchgehendes Band ueber die volle Spaltenbreite. */
.fas-maps { display: flex; margin-top: 39px; }
.fas-maps img { width: 526px; height: 270px; object-fit: cover; display: block; }
.fas-maps img:first-child { border-radius: 18px 0 0 18px; }
.fas-maps img:last-child  { border-radius: 0 18px 18px 0; }
.fas-sec--zwilling .fas-prose { margin-top: 60px; }
/* Der Block endet im Original auf einer Leerzeile (gemessen: 360px
   Blockhoehe = 12 Zeilen + 3 Absatz- + 1 Schlussleerzeile). */
.fas-sec--zwilling .fas-prose p:last-child { margin-bottom: 22.5px; }

/* --- IoT-Sensornetzwerk ----------------------------------- */
.fas-sec--iot .fas-prose { margin-top: 15px; }
/* Zwei Videos 478x269, Zwischenraum 96px (194..672 | 768..1246). */
.fas-videos { display: flex; gap: 96px; margin-top: 60px; }
.fas-videos .video-card__thumb { width: 478px; }

/* Magenta-Knopf: 152x40, #e20074, Radius 6, Beschriftung 14px/700 weiss. */
.fas-btn-magenta {
  display: inline-block; margin-top: 38px;
  background: var(--color-brand-pink); color: #fff;
  border: 0; border-radius: 6px; padding: 11.5px 24px;
  font-size: var(--fs-cta); line-height: var(--lh-cta); font-weight: var(--fw-bold);
  text-decoration: none;
}
.fas-btn-magenta:hover { background: #b8005e; }
.fas-btn-magenta:active { background: #96004c; }

/* --- Praxis / App: zweispaltige Zeilen -------------------- */
.fas-sec--praxis .fas-prose { margin-top: 15px; }
.fas-row { display: flex; margin-top: 39px; align-items: flex-start; }
.fas-row__text {
  width: 410px; flex: 0 0 410px; padding-right: 96px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 23px;
  color: var(--color-text-muted); text-align: left;
}
.fas-row__text p { margin: 0; color: var(--color-text-muted); }
/* Leerzeile vor dem Projekthinweis (Original: Textblock 45px statt 23px). */
.fas-row__text p.fas-row__spaced { margin-top: 22.5px; }
/* Der App-Text folgt wieder dem Leerzeilen-Flussmodell. */
.fas-sec--app .fas-row__text .fas-prose p { margin: 0 0 22.5px; }
.fas-sec--app .fas-row__text .fas-prose p:last-child { margin-bottom: 0; }
.fas-row__media { width: 642px; flex: 0 0 642px; }
.fas-row__media .video-card__thumb { width: 642px; }

/* Weisser Knopf mit Dokumentsymbol: 169x47, Rahmen 1px #c9c9c9,
   Radius 9, Innenabstand 12, Abstand Symbol/Text 9px. */
.fas-btn-doc {
  /* Original: Poppins 15/700 (H3-Optik), nicht Inter. */
  font-family: var(--font-heading);
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--color-border); border-radius: 9px;
  padding: 12px; text-decoration: none;
  font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold);
  color: var(--color-text-muted);
}
.fas-btn-doc img { width: 20px; height: 23px; display: block; }
.fas-btn-doc:hover { border-color: var(--color-text-muted); }

/* --- App-Abschnitt ---------------------------------------- */
.fas-sec--app .fas-row { margin-top: 14px; }
.fas-approw__img {
  width: 642px; height: 535px; object-fit: cover; border-radius: 20px; display: block;
}
/* Zwei Markenzeichen 172x51, Abstand 47px, mittig unter dem Bild. */
.store-badges { display: flex; gap: 47px; justify-content: center; margin-top: 23px; }
.store-badges img { width: 172px; height: 51px; display: block; }

/* ============================================================
   Schmalere Ansichten: die feste 1052er-Spalte aufloesen.
   (Mobil/Tablet werden parallel separat abgeglichen - hier nur
   dafuer sorgen, dass nichts ueberlaeuft.)
   ============================================================ */
@media (max-width: 1199px) {
  .fas-sec { padding-left: var(--container-pad); padding-right: var(--container-pad); }
  /* Unterhalb 1200px setzt das Original diese Seite durchgaengig LINKSBUENDIG
     ueber die volle Spaltenbreite (nachgemessen @768: Eyebrow y=150, h1 y=184
     und alle Zwischenueberschriften jeweils x=23, Breite 722, text-align
     left). Bei uns waren Kopfgruppe und Zwischenueberschriften zentriert und
     der Videoblock auf 690px begrenzt und dadurch mittig eingerueckt. */
  /* Nicht randlos: das Original haelt den Videoblock @390 im 23px-Seitenrand
     (x=23, 344x193 im 16:9) - mit width:100% lief er bei uns von Kante zu
     Kante (390x219) und sass damit 26px zu hoch im Fluss (Lauf 5). */
  .fas-video { width: auto; max-width: none; margin: 0 var(--container-pad); }
  /* 21.6px = woertlich 18px * 1.2 wie im Original (getComputedStyle:
     H2/Eyebrow h=21.6 pro Zeile). Die frueheren gerundeten 22px schoben
     JEDE Zeile darunter um +0.4..0.8px - im Differenzbild war dadurch die
     komplette Textspalte rot (Lauf 5). */
  .fas-h2 { text-align: left; line-height: 21.6px; }
  .fas-head { align-items: flex-start; }
  .fas-head h1 { text-align: left; }
  .fas-head .hero__eyebrow { line-height: 21.6px; }
  .fas-maps img { width: 50%; height: auto; }
  .fas-videos { gap: var(--space-6); }
  .fas-videos .video-card__thumb { width: 50%; }
  .fas-row__text { width: 40%; flex: 0 0 40%; padding-right: var(--space-7); }
  .fas-row__media { width: 60%; flex: 0 0 60%; }
  .fas-row__media .video-card__thumb { width: 100%; }
  /* Original unterhalb 1200 (neu nachgemessen @390/768/1000, Stand
     2026-07-28): das App-Bild hat durchgehend 46px Seitenrand UND behaelt
     das 642:535-Formatfenster (object-fit cover; @390: 298x248). Ohne
     aspect-ratio nahm height:auto das intrinsische 1024x737-Format der
     Datei (nur 214 hoch, -34px). Die beiden Store-Plaketten zeigt das
     heutige Original auf ALLEN Breiten; unter 1200 vertikal gestapelt
     (172x51, Abstand 23, zentriert; @390 y=7627/7701, @768 y=7199/7273).
     Das fruehere display:none beruhte auf einem inzwischen ueberholten
     Stand des Originals und liess die Seite @390 ~148px zu kurz enden. */
  .fas-approw__img { width: calc(100% - 46px); margin: 0 auto; height: auto; aspect-ratio: 642 / 535; display: block; }
  .store-badges { flex-direction: column; align-items: center; gap: 23px; }
}

@media (max-width: 809px) {
  /* Unten 51px: Original @390 Text-Ende (1627) -> Videoblock (1678). */
  .fas-sec--intro { padding-top: 76px; padding-bottom: 51px; }
  /* Original @390: VOR jeder Abschnitts-H2 stehen woertlich 150px
     padding-top (Video-Ende 1871 -> H2 2021, Zwilling-Ende 3441 -> 3591,
     Knopf-Ende 5182 -> 5332, Praxis-Video-Ende 6478 -> 6628; Lauf 5).
     Die frueheren 123/136/149er-Werte kompensierten Zuvielabstaende
     INNERHALB der Abschnitte (randloser Videoblock, 12px-Kartenluecke,
     60er-Prosa-Rand, 26px-Videorand), die jetzt an der Quelle auf die
     Originalwerte stehen. */
  .fas-sec--zwilling, .fas-sec--iot, .fas-sec--praxis, .fas-sec--app { padding-top: 150px; }
  /* Zwilling-Fliesstext beginnt 39px unter den Kartenbildern (Original
     @390: 2457 -> 2496), nicht 60 wie auf dem Desktop. */
  .fas-sec--zwilling .fas-prose { margin-top: 39px; }
  /* H2 -> erste App-Zeile: 15px wie im Original (6672 -> 6687); die 14px des
     Desktops verrechneten die dort 1px hoehere H2. */
  .fas-sec--app .fas-row { margin-top: 15px; }
  /* IoT-Videokarten @390: Text-Ende (4638) -> Karte 1 (4677) = 39px, Karte 1
     -> Karte 2 ebenfalls 39px (4871 -> 4910); bei uns 60/32. */
  .fas-videos { margin-top: 39px; gap: 39px; }
  /* IoT-Magenta-Knopf: 39px ueber dem Knopf wie im Original (Video-Ende
     5103.5 -> Knopf 5142.5), nicht die 38px des Desktops. */
  .fas-btn-magenta { margin-top: 39px; }
  /* Unten 51px: Original-Abstand @390 von der letzten Store-Plakette
     (Ende y=7752) zur Pfadleiste (y=7803). Die frueheren 131px galten fuer
     den ueberholten Original-Stand ohne Plaketten. */
  .fas-sec--app { padding-bottom: 51px; }
  /* Gestapelt OHNE Zwischenraum - wie nebeneinander auch (Original @390:
     Karte 1 endet 2280, Karte 2 beginnt 2280; Lauf 5). */
  .fas-maps { flex-direction: column; gap: 0; }
  .fas-maps img { width: 100%; border-radius: 18px; }
  .fas-videos { flex-direction: column; }
  .fas-videos .video-card__thumb { width: 100%; }
  .fas-row { flex-direction: column; }
  .fas-row__text, .fas-row__media { width: 100%; flex: 0 0 auto; padding-right: 0; }
  /* Text -> Medium in ALLEN gestapelten Zeilen 39px wie im Original (@390:
     Bayern-Knopf-Ende 5724 -> Video 5763, App-Text-Ende 7316 -> Bild 7355).
     Die frueheren 24px (--space-5) plus 26px Kompensationsrand unter den
     Praxis-Videos erzeugten die dokumentierten 10-30px-Kettenversaetze. */
  .fas-row__text { margin-bottom: 39px; }
  /* Doc-Knopf: Original misst 47px Gesamthoehe (12px Innenabstand + 23px
     Inhalt, Rahmen nicht additiv). Bei uns kamen 2x1px Rahmen OBENDRAUF
     (49px) - jede Zeile darunter sass 2px zu tief. */
  .fas-btn-doc { padding: 11px 12px; }
  .store-badges img { max-width: 100%; height: auto; }
}

/* Seitenrand unterhalb 1200px: 23px statt der sitewide 39px (am Original
   gemessen, /opt/tooling/cpad.mjs). */
/* Auf `main` statt auf `.container`: der Seitenrand wird auf dieser Seite
   teils an anderen Elementen (z.B. .fas-sec) angewendet - so erben ihn alle. */
@media (max-width: 1199px) { main { --container-pad: 23px; } }