/* =========================================================================
   Flex-Kombi Planer - das Stylesheet der Kundenseite (index.php)

   Bis zum 21.08.2026 waren es zwei Dateien: planner-shared.css (was alle
   vier Designentwuerfe gleich brauchten) und planner-c.css (die Optik des
   Entwurfs C). Seit nur noch ein Entwurf uebrig ist, hat die Trennung
   nichts mehr getrennt - beide liegen jetzt hier.

   Farbwelt ard-media.de: Marine + Signalgruen. Jeder Anbieter ist eine
   eigene Karte - zusammengehalten durch ihren Schatten, nicht durch Farbe
   oder Rahmen. Die Karten liegen in einem mitwachsenden Raster, ihre Sender
   stehen darin untereinander.

   LESBARKEIT GEHT VOR DICHTE (Korrektur vom 2026-08-07, zweiter Durchgang).
   Der erste Anlauf hat den Wunsch "weniger scrollen" mit Schrumpfen
   beantwortet - bis auf 10,5px Schrift und 34px Klickflaeche. Das ist
   zurueckgenommen. Verbindliche Untergrenzen:

     Sendername        14px
     Anbietername      13px
     Sekundaertext     12px   (Bestandteile, Zaehler, Hinweise)
     Klickflaeche      40px   (Sender, Chips, Knoepfe)
     Senderlogo        30px

   Ausnahmen, bewusst kleiner: Icon-Glyphen (Haken im Regelkasten) und die
   Kuerzel-Badges in der Handy-Leiste - beides kein Fliesstext.

   Der Platz kommt stattdessen aus dem Rahmen: Fortschrittsleiste,
   Schnellstart und Werkzeugzeile sind gestrafft. Vorher gingen 354px von
   900px drauf, bevor der erste Sender zu sehen war.

     Marine  #002C6B (Flaeche) / #003480 (Blau) / #002353 (dunkelste Stufe)
     Gruen   #BEE120 (CTA, Schrift darauf marine, Radius 6px)
     Flaeche #F2F4F6 / #F3F3F3, Text #323232
   ========================================================================= */

/* =========================================================================
   Grundgeruest: Embed-Modus
   Steht bewusst vorn - es geht um Rahmenbedingungen, nicht um Farbe.
   ========================================================================= */

/* --- Embed-Modus: Innenabstand -------------------------------------------
   Eingebettet faellt die helle Platte weg (siehe extern-core.css). Ihr
   Innenabstand darf nicht mitverschwinden, sonst klebt der Planer an der
   Kante der einbindenden Seite - gemessen am 10.08.2026: erster Block bei
   0px links statt 28px.

   Die Rechner brauchen das nicht (randlose Bloecke mit eigenem Abstand),
   deshalb steht in extern-core.css nur der Standard 0 und der Wert fuer den
   Planer hier. */

body.ext-embed { --ext-embed-padding: 18px 20px 26px; }

@media (max-width: 899px) {
  body.ext-embed { --ext-embed-padding: 12px 12px 18px; }
}

/* --- Embed-Modus mit Kopfzeile (?embed=1&kopf=1) --------------------------
   Seit 24.09.2026 kann eine Einbindung den Kopf behalten. Ohne helle Flaeche
   richtet er sich nicht nach deren Massen (siehe "buendig mit der hellen
   Flaeche" weiter unten), sondern nach dem Innenabstand des eingebetteten
   Inhalts - Logo und Info-Knopf fluchten mit dem ersten Block darunter.
   body + Klasse im Selektor, damit die Regel die Flaechen-Masse auf jeder
   Breite schlaegt. */
body.ext-embed-kopf .ext-header__inner { max-width: none; width: calc(100% - 40px); }
/* ?kopf=transparent: nur die Marine-Flaeche faellt weg, der Hintergrund der
   Wirtsseite scheint durch. Schrift, Logos, Info-Knopf und die gruene Linie
   bleiben - gedacht fuer dunkle Seiten wie ard-media.de (Wunsch 24.09.2026:
   "nur die blaue Farbe soll weg"). Auf hellem Grund waere die weisse Schrift
   unlesbar. */
body.ext-embed-kopf-transparent .ext-header { background: transparent; }
@media (max-width: 899px) {
  body.ext-embed-kopf .ext-header__inner { width: calc(100% - 24px); }
}

/* --- Embed-Modus: "So funktioniert's" ------------------------------------
   Der Knopf sitzt normalerweise im Aktionsbereich der Kopfzeile. Die gibt es
   eingebettet nicht, also wandert er in die Fortschrittszeile - und steht
   dort auf heller Flaeche statt auf Marine. Deshalb marineblau auf weiss
   statt weiss auf transparent.

   Ohne ihn waere der Hilfetext eingebettet gar nicht erreichbar; das
   Markup (#howtoBackdrop) liegt im Inhalt und bleibt vorhanden. */

.fkp-progress__row .fkp-info {
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 6px;
  color: #002c6b;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  margin-left: auto;
  padding: 8px 14px;
  white-space: nowrap;
}
.fkp-progress__row .fkp-info:hover {
  background: #f2f4f6;
  border-color: #002c6b;
}

/* Steht der Zuruecksetzen-Knopf daneben, traegt er den automatischen
   Aussenabstand - sonst schoebe der Info-Knopf ihn nach links weg. */
.fkp-progress__row .fkp-progress__reset:not([hidden]) ~ .fkp-info { margin-left: 10px; }

@media (max-width: 599px) {
  .fkp-progress__row .fkp-info__label { display: none; }
  .fkp-progress__row .fkp-info { padding: 8px 10px; }
}

/* =========================================================================
   Optik
   ========================================================================= */

.skin-planer {
  --c-navy: #002c6b;
  --c-navy-deep: #002353;
  --c-blue: #003480;
  --c-lime: #bee120;
  --c-lime-dark: #a4c412;
  --c-surface: #ffffff;
  --c-page: #f2f4f6;
  --c-line: #dfe4ea;
  --c-text: #323232;
  --c-text-soft: #6b7280;
  --c-radius: 6px;
  --c-shadow: 0 2px 10px rgba(0, 44, 107, 0.06);
  --c-shadow-lift: 0 8px 26px rgba(0, 44, 107, 0.12);

  /* Marine als Buehne: die Seite traegt die Hausfarbe, der Planer sitzt als
     helle Flaeche darauf - sichtbar ein Werkzeug, das aus der Website heraus
     geoeffnet wurde. Marine bleibt als Grundfarbe stehen: so gibt es beim
     Laden kein weisses Aufblitzen, und fehlt die Bilddatei, sieht die Seite
     unveraendert aus. */
  background: var(--c-navy);
  color: var(--c-text);
  min-height: 100vh;
}

/* Der Hintergrund der Website (weicher Lichtkegel in Marine, 1920x1440).
   Als festes Element hinter dem Inhalt statt als background-attachment:fixed -
   letzteres ruckelt auf iOS spuerbar. */
.skin-planer::before {
  background: var(--c-navy) url("../../../public/assets/bg-ard-media.jpg") center / cover no-repeat;
  content: "";
  inset: 0;
  position: fixed;
  z-index: -1;
}

.skin-planer .ext-main {
  background: var(--c-page);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 20, 50, 0.28);
  margin: 14px auto 20px;
  max-width: 1500px;
  padding: 14px clamp(14px, 2.5vw, 24px) 20px;
  width: calc(100% - clamp(20px, 5vw, 56px));
}
@media (max-width: 899px) {
  .skin-planer .ext-main {
    border-radius: 8px;
    margin: 12px auto 16px;
    padding: 16px 14px 22px;
    width: calc(100% - 20px);
  }
}
/* Der Fuss steht wieder auf der Buehne, nicht auf der hellen Flaeche. */
.skin-planer .ext-footer { background: transparent; }

/* --- Kopf und Fuss in Marine --------------------------------------------- */

.skin-planer .ext-header {
  background: var(--c-navy);
  border-bottom: 3px solid var(--c-lime);
  padding-bottom: 10px;
  padding-top: 10px;
}
.skin-planer .ext-header__title { color: #fff; font-size: 20px; letter-spacing: -0.01em; }
.skin-planer .ext-header__subtitle { color: rgba(255, 255, 255, 0.72); }
.skin-planer .ext-header__divider { background: rgba(255, 255, 255, 0.22); }
.skin-planer .ext-brand__logo { height: 30px; }
.skin-planer .ext-header .ext-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.skin-planer .ext-header .ext-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

/* Produktlogo "Flex Kombi" links neben dem Schriftzug. Es kommt ueber den
   Aktionsbereich der Huelle, also HINTER dem Abstandhalter. Die order-Werte
   ruecken Titel, Abstandhalter und Info-Knopf nach hinten; das Logo bleibt
   auf 0 und steht damit zwischen Trenner und Titel. */
.skin-planer .ext-header__titles { order: 1; }
.skin-planer .ext-header__spacer { order: 2; }
.skin-planer .ext-header .fkp-info { order: 3; }
.fkp-brandmark { border-radius: 3px; display: block; flex: 0 0 auto; height: 44px; width: auto; }

.skin-planer .ext-footer { border-top: 0; color: rgba(255, 255, 255, 0.66); }
.skin-planer .ext-footer a { color: var(--c-lime); }

/* --- Kopf und Fuss buendig mit der hellen Flaeche -------------------------
   Die Huelle gibt Kopf und Fuss ihre eigenen Masse (max. 1560px, 16-40px
   Innenabstand), die Flaeche hat andere (max. 1500px, 10-28px Rand). Die
   Kanten liefen deshalb je nach Schirmbreite auseinander: bei 1920px stand
   das ARD-Logo 30px AUSSERHALB der Flaeche, bei 1400px 12px innerhalb.
   Jetzt uebernehmen die inneren Zeilen exakt Breite und Hoechstmass der
   Flaeche (.skin-planer .ext-main) - wer dort etwas aendert, muss es hier
   mitaendern. Der seitliche Innenabstand entfaellt, den Rand macht die
   Breite. */
.skin-planer .ext-header,
.skin-planer .ext-footer { padding-left: 0; padding-right: 0; }
.skin-planer .ext-header__inner,
.skin-planer .ext-footer__inner {
  max-width: 1500px;
  width: calc(100% - clamp(20px, 5vw, 56px));
}
/* Schmal hat die Flaeche nur 10px Rand - buendig dazu stuende das Logo zu
   nah am Schirmrand. Kopf und Fuss halten hier 16px. */
@media (max-width: 899px) {
  .skin-planer .ext-header__inner,
  .skin-planer .ext-footer__inner { width: calc(100% - 32px); }
}

/* --- Bausteine ------------------------------------------------------------ */

.skin-planer .ext-btn {
  background: #fff;
  border-color: var(--c-line);
  border-radius: var(--c-radius);
  color: var(--c-navy);
  font-weight: 600;
  padding: 11px 20px;
}
.skin-planer .ext-btn:hover { border-color: var(--c-navy); }
/* CTA wie auf der Website: gruene Flaeche, marineblaue Schrift */
.skin-planer .ext-btn--primary {
  background: var(--c-lime);
  border-color: var(--c-lime);
  color: var(--c-navy);
}
.skin-planer .ext-btn--primary:hover { background: var(--c-lime-dark); border-color: var(--c-lime-dark); }
.skin-planer .ext-btn:disabled { background: #e9edf2; border-color: #e9edf2; color: #9aa4b2; opacity: 1; }
.skin-planer .ext-input { border-color: var(--c-line); border-radius: var(--c-radius); }
.skin-planer .ext-input:focus { border-color: var(--c-navy); outline-color: rgba(190, 225, 32, 0.45); }
.skin-planer .ext-banner { border-radius: var(--c-radius); }

.fkp-h2 { color: var(--c-navy); font-size: 15px; font-weight: 700; margin: 0; }

/* --- Fortschritt ---------------------------------------------------------- */

/* Messpunkt: verlaesst er das Bild, klebt die Leiste. */
.fkp-progress-sentinel { display: block; height: 1px; }

.fkp-progress {
  background: var(--c-navy);
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
  color: #fff;
  margin-bottom: 12px;
  padding: 11px 16px;
  transition: padding 0.22s ease, box-shadow 0.28s ease,
              background-color 0.28s ease, color 0.22s ease;
}
.fkp-progress__lead,
.fkp-progress__sub,
.fkp-progress__bar,
.fkp-progress__fill,
.fkp-progress__reset { transition: color 0.22s ease, background-color 0.28s ease, border-color 0.22s ease; }
/* Klebend nur auf schmalen Schirmen: dort scrollt der Hinweis sonst weg.
   Auf dem Desktop haengt die Seitenspalte selbst schon fest - zwei klebende
   Elemente wuerden sich beim Scrollen ueberlagern. */
@media (max-width: 899px) {
  .fkp-progress { position: sticky; top: 8px; z-index: 6; }
}
/* Klebend zurueckhaltender: etwas flacher, duennerer Balken. Die Unterzeile
   bleibt - sie traegt den eigentlichen Rat. Die Farbwelt dreht sich dabei um
   (siehe Milchglas-Block weiter unten). */
.fkp-progress.is-stuck {
  box-shadow: 0 8px 22px rgba(0, 20, 50, 0.22);
  padding: 11px 16px;
}
.fkp-progress.is-stuck .fkp-progress__row { margin-top: 8px; }
.fkp-progress.is-stuck .fkp-progress__lead { font-size: 15px; }
.fkp-progress.is-stuck .fkp-progress__sub { font-size: 12.5px; }
.fkp-progress.is-stuck .fkp-progress__bar { height: 6px; }
/* Milchglas statt gedeckeltem Marine: Ueber einer hellen Seite muss das Glas
   HELL sein - dunkles Glas auf hellem Grund bleibt immer ein Block. Hell
   getoent traegt es dunkle Schrift mit hohem Kontrast (Marine auf ~weiss
   ueber 12:1) und laesst die Senderliste sichtbar durchscheinen.
   Ohne Weichzeichner bliebe der Text unruhig - dann bleibt es deckend. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .fkp-progress.is-stuck {
    background: rgba(255, 255, 255, 0.38);
    -webkit-backdrop-filter: blur(26px) saturate(1.9);
    backdrop-filter: blur(26px) saturate(1.9);
    /* Rahmen als inset-Schatten, damit sich die Groesse nicht aendert. */
    box-shadow: 0 10px 30px rgba(0, 20, 50, 0.14),
                inset 0 0 0 1px rgba(255, 255, 255, 0.8),
                inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }
  .fkp-progress.is-stuck .fkp-progress__lead { color: var(--c-navy); }
  .fkp-progress.is-stuck.is-done .fkp-progress__lead { color: #55760a; }
  .fkp-progress.is-stuck .fkp-progress__sub { color: var(--c-text-soft); }
  .fkp-progress.is-stuck .fkp-progress__bar { background: rgba(0, 44, 107, 0.13); }
  .fkp-progress.is-stuck .fkp-progress__fill { background: var(--c-lime-dark); }
  .fkp-progress.is-stuck .fkp-progress__reset {
    border-color: rgba(0, 44, 107, 0.28);
    color: var(--c-navy);
  }
  .fkp-progress.is-stuck .fkp-progress__reset:hover {
    background: rgba(0, 44, 107, 0.07);
    border-color: var(--c-navy);
  }
}

.fkp-progress__reset {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--c-radius);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  margin-left: auto;
  padding: 5px 11px;
  white-space: nowrap;
}
.fkp-progress__reset:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.fkp-progress__reset[hidden] { display: none; }
.fkp-progress__bar { background: rgba(255, 255, 255, 0.18); border-radius: 99px; height: 8px; overflow: hidden; }
.fkp-progress__fill {
  background: var(--c-lime);
  border-radius: 99px;
  display: block;
  height: 100%;
  transition: width 0.35s ease;
  width: 0;
}
/* Fuehrungstext und Zusatz stehen nebeneinander in EINER Zeile - vorher
   zwei Zeilen uebereinander, die zusammen mit dem Balken 62px kosteten. */
.fkp-progress__row { align-items: baseline; display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 7px; }
.fkp-progress__lead { color: #fff; font-size: 15px; font-weight: 700; margin: 0; }
.fkp-progress.is-done .fkp-progress__lead { color: var(--c-lime); }
.fkp-progress__sub { color: rgba(255, 255, 255, 0.72); font-size: 13px; margin: 0; }

/* --- Schnellstart --------------------------------------------------------- */

/* Ueberschrift steht in derselben Zeile wie die Pakete statt darueber. */
.fkp-presets {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}
.fkp-presets .fkp-h2 { flex: 0 0 auto; margin-bottom: 0; }
.fkp-chiprow { display: flex; flex: 1; gap: 8px; min-width: 0; overflow-x: auto; padding: 2px 0; scrollbar-width: thin; }
.fkp-chip {
  align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  color: var(--c-navy);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  /* 40px Klickflaeche laut Kopf dieser Datei. Ohne min-height werden die
     Pakete nur 34px hoch: die dokumentierte Untergrenze setzt das Symbol
     voraus, und gepflegte Symbole traegt derzeit kein Pre-Set. */
  min-height: 40px;
  padding: 6px 12px 6px 8px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.fkp-chip:hover { border-color: var(--c-navy); box-shadow: var(--c-shadow-lift); transform: translateY(-1px); }
/* Aktives Pre-Set: kraeftig marineblau umrandet und getoent - der Wunsch aus
   der Rueckmeldung ("Button wird blau/fett blau umrandet"). Der doppelte
   Rahmen kommt als inset-Schatten, damit sich die Groesse nicht aendert. */
.fkp-chip.is-active {
  background: #eaf0fa;
  border-color: var(--c-navy);
  box-shadow: inset 0 0 0 1px var(--c-navy);
}
.fkp-chip.is-active .fkp-chip__name { font-weight: 800; }
.fkp-chip.is-active .fkp-chip__count { color: var(--c-navy); }
.fkp-chip__icon {
  align-items: center;
  background: var(--c-lime);
  border-radius: 4px;
  color: var(--c-navy);
  display: inline-flex;
  height: 26px;
  justify-content: center;
  width: 26px;
}
.fkp-chip__name { font-size: 13.5px; font-weight: 700; }
.fkp-chip__count { color: var(--c-text-soft); font-size: 12px; }
.fkp-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- Layout --------------------------------------------------------------- */

/* minmax(0, 1fr) statt 1fr: eine Grid-Spalte hat sonst min-width:auto und
   wird von ihrem Inhalt aufgeblaeht - der Pool ragte dadurch aus dem Bild. */
.fkp-layout { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .fkp-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .fkp-side { position: sticky; top: 14px; }
}

.fkp-pool {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
  padding: 12px 16px;
}
.fkp-pool { min-width: 0; }
/* Ueberschrift samt Zaehler links, Suche und Anbieterfilter rechts - alles
   in EINER Zeile. Vorher zwei Zeilen mit zusammen 66px. Die beiden Bloecke
   sind im HTML Geschwister, deshalb ueber das Raster des Pools gesetzt. */
.fkp-pool { display: grid; gap: 0 16px; grid-template-columns: auto minmax(0, 1fr); }
.fkp-pool__head { align-items: baseline; display: flex; gap: 4px 10px; margin-bottom: 10px; }
.fkp-pool__count { color: var(--c-text-soft); font-size: 12.5px; }
/* nowrap, nicht wrap: Suche und Filter sollen SCHRUMPFEN, statt in eine
   zweite Zeile zu rutschen. Mit wrap zaehlt der Browser ihre Wunschbreiten
   zusammen (240 + 200 + 8 = 448px) und bricht um, sobald weniger uebrig
   ist - und im zweispaltigen Aufbau ist der Pool nur rund 620px breit,
   abzueglich Ueberschrift und Zaehler bleiben davon keine 448px.

   Die Wunschbreiten bleiben als Obergrenze stehen; min-width: 0 erlaubt das
   Schrumpfen darunter (ohne das haelt ein Eingabefeld an seiner
   Standardbreite fest). Untergrenze 96px, damit die Felder bedienbar
   bleiben - reicht der Platz dafuer nicht, greift ohnehin das einspaltige
   Layout unter 700px. */
.fkp-tools { display: flex; flex-wrap: nowrap; gap: 8px; justify-content: flex-end; margin-bottom: 10px; }
.fkp-search { flex: 0 1 240px; min-width: 96px; }
.fkp-tools select { flex: 0 1 200px; min-width: 96px; }
#poolGroups { grid-column: 1 / -1; }
@media (max-width: 999px) {
  /* Untereinander statt nebeneinander - nebeneinander bliebe fuer beides zu
     wenig Platz.

     Die Schwelle lag bis zum 21.08.2026 bei 700px und war zu niedrig: Der
     Pool ist im zweispaltigen Aufbau nur so breit wie die linke Spalte,
     nicht wie der Schirm. Knapp ueber 900px sind das rund 460px - davon
     nimmt die Ueberschrift mit Zaehler schon 250px, und Suche und Filter
     schoben sich mit ihren Mindestbreiten UEBER die Ueberschrift. Ab hier
     bekommt jeder Block seine eigene volle Zeile, dann passen Suche und
     Filter in ihrer Wunschbreite nebeneinander. */
  .fkp-pool { display: block; }
  .fkp-pool__head { margin-bottom: 8px; }
}

/* =========================================================================
   Anbieter als Karten in einem dynamischen Raster
   -------------------------------------------------------------------------
   Zwei Anlaeufe davor waren daneben, beide aus demselben Grund: Der Versuch,
   die Bereiche moeglichst dicht zu packen (erst Spaltensatz, dann ein
   starres Zeilenraster mit Zeilenspruengen), setzte die Anbieter-
   Ueberschriften auf lauter verschiedene Hoehen. Weil sie zusaetzlich
   farbig hinterlegt waren, sprangen sie als bunte Bloecke ins Auge - das
   war das "unruhig".

   Jetzt umgekehrt gedacht: Jeder Anbieter ist eine eigene Karte, und die
   Karten liegen in einem gewoehnlichen, mitwachsenden Raster. Dadurch
   beginnen alle Karten einer Rasterzeile auf **derselben Hoehe** - die
   Ueberschriften fluchten von allein und brauchen keine Farbe mehr, um
   gefunden zu werden. Zusammengehalten wird eine Gruppe durch ihren
   Schatten, nicht durch Farbe oder Rahmen.
   ========================================================================= */

#poolGroups {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(222px, 1fr));
  /* Kein align-items: start - die Karten einer Reihe strecken sich auf die
     Hoehe der hoechsten. Das ergibt saubere Reihen statt ausgefranster
     Unterkanten; der Inhalt bleibt oben stehen. */
}

/* Die Karte: helle Flaeche mit weichem Schatten, kein Rahmen. Der Schatten
   macht die Gruppe sichtbar, ohne einen harten Kasten zu zeichnen. */
.fkp-group {
  background: var(--c-surface);
  border-radius: var(--c-radius);
  box-shadow: 0 1px 2px rgba(0, 44, 107, 0.08), 0 4px 14px rgba(0, 44, 107, 0.07);
  padding: 2px 5px 5px;
}

/* Ueberschrift ohne Farbflaeche: Der Schatten der Karte sagt bereits, wo
   die Gruppe anfaengt und aufhoert - eine getoente Flaeche waere ein
   zweites Signal fuer dieselbe Aussage. Es bleibt der Name in Marine und
   eine feine Grundlinie. */
.fkp-group__head {
  align-items: baseline;
  border-bottom: 1px solid var(--c-line);
  display: flex;
  gap: 8px;
  margin: 0 3px 3px;
  padding: 5px 2px 5px;
}
.fkp-group__name {
  color: var(--c-navy);
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fkp-group__count { color: var(--c-text-soft); font-size: 12px; white-space: nowrap; }

/* Sender untereinander innerhalb ihrer Karte. */
.fkp-grid { display: flex; flex-direction: column; }

/* Senderzeile: Haken, Logo, Name - 40px hoch, das ist die Klickflaeche.
   Kein Rahmen: die Zeilen liegen ruhig untereinander. Innerhalb der Karte
   ist jede zweite Zeile hauchfein getoent - das macht die Zeilen ablesbar
   und funktioniert hier sauber, weil jede Karte bei null anfaengt. */
.fkp-tile {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  gap: 9px;
  min-height: 40px;
  overflow: hidden;
  padding: 0 8px 0 6px;
  position: relative;
  text-align: left;
  transition: background-color 0.2s ease;
  width: 100%;
}
.fkp-tile:nth-child(even) { background: rgba(0, 44, 107, 0.028); }
.fkp-tile:hover { background: rgba(0, 44, 107, 0.06); }
/* Ausgewaehlt: EIN ruhiges Signal - hell gruen getoente Flaeche mit
   marineblauer Kante links. Kein Rahmen rundum, keine umgefaerbten Badges;
   mehrere Marker gleichzeitig wirken unruhig. */
.fkp-tile.is-selected { background: #f1f7dc; }
.fkp-tile.is-selected::before {
  background: var(--c-navy);
  border-radius: 2px;
  bottom: 4px;
  content: "";
  left: 0;
  position: absolute;
  top: 4px;
  width: 3px;
}
.fkp-tile__logo { align-items: center; display: flex; flex: 0 0 auto; height: 30px; justify-content: center; width: 52px; }
.fkp-tile__logo img { max-height: 30px; max-width: 100%; object-fit: contain; }
.fkp-tile__fallback { color: var(--c-navy); font-size: 12px; font-weight: 700; }
.fkp-tile__foot { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.fkp-tile__name { color: var(--c-text); font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Kombipartner (Pflegefeld "Bestandteile") als leise Unterzeile. */
.fkp-tile__parts { color: var(--c-text-soft); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fkp-tile__check {
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 4px;
  display: flex;
  flex: 0 0 auto;
  height: 20px;
  justify-content: center;
  order: 3;
  transition: background 0.15s, border-color 0.15s;
  width: 20px;
}
.fkp-tile.is-selected .fkp-tile__check { background: var(--c-lime); border-color: var(--c-lime); color: var(--c-navy); }
/* Haken federt herein, statt hart umzuspringen. */
.fkp-tile__check::after {
  content: "\2713";
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.3);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.14s ease;
}
.fkp-tile.is-selected .fkp-tile__check::after { opacity: 1; transform: scale(1); }

/* --- Seitenspalte --------------------------------------------------------- */

/* flex-shrink aus: sonst quetscht der Flex-Container die Ergebniskarte
   zusammen, sobald der Inhalt hoeher ist als das Blatt - der Ring wird dann
   von overflow:hidden abgeschnitten. */
.fkp-side { display: flex; flex-direction: column; gap: 11px; }
.fkp-side > * { flex: 0 0 auto; }
/* Die Blatt-Kopfzeile gibt es nur in der Blatt-Ansicht (schmal). */
.fkp-sheet-head { display: none; }
.fkp-rules, .fkp-selection, .fkp-actions {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
  padding: 13px 15px;
}

/* Ergebnis als marineblaue Karte - der Blickfang der Seite */
.fkp-result {
  background: var(--c-navy);
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow-lift);
  color: #fff;
  padding: 15px 15px 13px;
  position: relative;
  overflow: hidden;
}
.fkp-result::after {
  background: var(--c-lime);
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.fkp-ring { margin: 0 auto; position: relative; width: 132px; }
.fkp-ring svg { display: block; transform: rotate(-90deg); width: 100%; }
.fkp-ring__track { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 9; }
.fkp-ring__fill {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-linecap: round;
  stroke-width: 9;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  transition: stroke-dashoffset 0.5s ease, stroke 0.3s;
}
.fkp-ring.is-done .fkp-ring__fill { stroke: var(--c-lime); }
.fkp-ring__center { align-items: center; display: flex; flex-direction: column; inset: 0; justify-content: center; position: absolute; }
.fkp-ring__value { color: rgba(255, 255, 255, 0.55); font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.fkp-ring.is-done .fkp-ring__value { color: var(--c-lime); }
.fkp-ring__caption { color: rgba(255, 255, 255, 0.66); font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; }
.fkp-result__hint { color: rgba(255, 255, 255, 0.62); font-size: 12.5px; margin: 13px 0 0; text-align: center; }

/* Reichweiten-Anzeigen gibt es seit 2026-08-07 nicht mehr - die Reichweite
   bleibt reine Rechengroesse im Hintergrund. */

.fkp-rules { display: flex; flex-direction: column; gap: 10px; }
.fkp-rule { align-items: flex-start; display: flex; font-size: 13px; gap: 10px; }
.fkp-rule__icon {
  align-items: center;
  border: 1.5px solid var(--c-line);
  border-radius: 4px;
  color: transparent;
  display: flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  height: 19px;
  justify-content: center;
  margin-top: 1px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  width: 19px;
}
.fkp-rule.is-ok .fkp-rule__icon { background: var(--c-lime); border-color: var(--c-lime); color: var(--c-navy); }
.fkp-rule__label { flex: 1; }
.fkp-rule.is-ok .fkp-rule__label { color: var(--c-text-soft); }
.fkp-rule__value { color: var(--c-text-soft); font-size: 12px; white-space: nowrap; }

.fkp-selection__head { align-items: center; display: flex; gap: 10px; margin-bottom: 8px; }
/* "Alle abwaehlen" als echter Knopf statt Textlink - die Rueckmeldung wollte
   die Funktion praesenter. */
.fkp-clearbtn {
  background: #fff;
  border: 1px solid var(--c-navy);
  border-radius: var(--c-radius);
  color: var(--c-navy);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  margin-left: auto;
  padding: 6px 12px;
  white-space: nowrap;
}
.fkp-clearbtn:hover { background: rgba(0, 44, 107, 0.07); }
.fkp-clearbtn[hidden] { display: none; }
.fkp-selection__list { display: flex; flex-direction: column; }
.fkp-selrow { align-items: center; border-bottom: 1px solid var(--c-line); display: flex; gap: 10px; padding: 8px 0; }
.fkp-selrow:last-child { border-bottom: 0; }
.fkp-selrow__logo { height: 24px; object-fit: contain; width: 56px; }
.fkp-selrow__name { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fkp-selrow__x {
  background: none; border: 0; border-radius: 4px; color: var(--c-text-soft);
  cursor: pointer; font-size: 17px; line-height: 1; padding: 3px 8px;
}
.fkp-selrow__x:hover { background: #fdecec; color: #c23c3c; }
.fkp-empty { color: var(--c-text-soft); font-size: 13px; margin: 4px 0; }

.fkp-actions { display: flex; flex-direction: column; gap: 10px; }
.fkp-actions .ext-btn { width: 100%; }
.fkp-pricenote { color: var(--c-text-soft); font-size: 12px; margin: 2px 0 0; text-align: center; }

/* --- Weiterfuehrende Informationen ----------------------------------------
   Dezent: keine Karte, kein Rahmen, keine Knopfoptik - kleine Textlinks auf
   dem Seitengrund, damit die Export-Knoepfe die einzigen Aufforderungen
   bleiben. Sekundaertext-Untergrenze 12px (siehe Kopf der Datei). */
.fkp-infolinks { padding: 2px 4px 0; }
/* Zwei Gruppen untereinander ("Weiterfuehrende Informationen", "Planung"),
   getrennt nur durch Luft - keine Linie, keine Karte. */
.fkp-infolinks__group + .fkp-infolinks__group { margin-top: 10px; }
.fkp-infolinks__title {
  color: var(--c-text-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
  text-transform: uppercase;
}
.fkp-infolinks ul { display: flex; flex-wrap: wrap; gap: 0 14px; list-style: none; margin: 0; padding: 0; }
.fkp-infolinks a {
  align-items: center;
  color: var(--c-navy);
  display: inline-flex;
  font-size: 12.5px;
  gap: 4px;
  min-height: 28px;
  text-decoration: none;
}
.fkp-infolinks a:hover { text-decoration: underline; }
.fkp-infolinks a:focus-visible { outline: 2px solid var(--c-lime-dark); outline-offset: 2px; }
/* Symbol hinter dem Linktext: Download (PDF) oder Pfeil nach rechts oben
   (externe Seite). Gezeichnet mit currentColor, in Sekundaerfarbe - beim
   Ueberfahren nimmt es die Linkfarbe an. */
.fkp-infolinks__icon {
  color: var(--c-text-soft);
  fill: none;
  flex: 0 0 auto;
  height: 13px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  width: 13px;
}
.fkp-infolinks a:hover .fkp-infolinks__icon { color: var(--c-navy); }
/* Nur fuer Screenreader: sagt, ob der Link ein PDF laedt oder hinausfuehrt. */
.fkp-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
/* Die Leiste unter dem Planer gibt es nur, solange die Seitenspalte im
   Blatt steckt (gleiche Schwelle wie dort). */
.fkp-infolinks--strip { display: none; }
@media (max-width: 899px) {
  .fkp-infolinks--strip { border-top: 1px solid var(--c-line); display: block; margin-top: 16px; padding-top: 10px; }
}
/* Eingebettet faellt die helle Flaeche weg (extern-core.css), der Block
   laege dann ohne eigenen Grund auf der Farbe der Wirtsseite - auf dem Blau
   von ard-media.de unlesbar (gemeldet 24.09.2026). Dort bekommt er deshalb
   dieselbe Karte wie seine Nachbarn in der Seitenspalte; ohne Einbettung
   bleibt er bewusst ohne Karte. */
body.ext-embed .fkp-infolinks {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
  padding: 11px 15px 7px;
}
body.ext-embed .fkp-infolinks--strip { margin-top: 16px; }

/* --- Handy ---------------------------------------------------------------- */

.fkp-bottombar { display: none; }
.fkp-sheet-backdrop { display: none; }

@media (max-width: 899px) {
  .fkp-side {
    background: var(--c-page);
    border-radius: 12px 12px 0 0;
    bottom: 0;
    box-shadow: 0 -12px 40px rgba(0, 35, 83, 0.28);
    left: 0;
    max-height: 82vh;
    overflow-y: auto;
    padding: 14px 16px 20px;
    position: fixed;
    right: 0;
    transform: translateY(100%);
    transition: transform 0.28s ease;
    z-index: 40;
  }
  .fkp-side.is-open { transform: translateY(0); }
  .fkp-sheet-head { display: flex; }
  /* Kopfzeile des Blattes: der Zuggriff. Tippen darauf schliesst ebenfalls. */
  .fkp-sheet-head {
    align-items: center;
    cursor: pointer;
    background: var(--c-page);
    display: flex;
    margin: -14px -16px 8px;
    padding: 8px 12px 6px;
    position: sticky;
    top: -14px;
    z-index: 2;
  }
  .fkp-sheet-grab {
    background: #c3cbd6;
    border-radius: 99px;
    height: 4px;
    left: 50%;
    position: absolute;
    top: 8px;
    transform: translateX(-50%);
    width: 40px;
  }
  .fkp-rules, .fkp-selection, .fkp-actions { box-shadow: none; }

  .fkp-sheet-backdrop { background: rgba(0, 35, 83, 0.42); display: block; inset: 0; position: fixed; z-index: 39; }

  .fkp-bottombar {
    align-items: center;
    background: var(--c-navy);
    border-top: 3px solid var(--c-lime);
    bottom: 0;
    display: flex;
    gap: 12px;
    left: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    position: fixed;
    right: 0;
    z-index: 38;
  }
  /* Die Leiste liegt fest ueber dem Seitenende. Ohne Platzhalter verdeckt
     sie das Letzte auf der Seite - die Fusszeile, im Embed-Modus das Ende
     des Planers. Hoehe der Leiste: 3px Rand + 2 x 10px Innenabstand + gut
     40px Inhalt, dazu Luft. Der Innenabstand am body statt an der Fusszeile,
     damit es auch ohne Fusszeile (Embed) greift. */
  body.skin-planer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  .fkp-bottombar {
    border: 0;
    border-top: 3px solid var(--c-lime);
    cursor: pointer;
    font: inherit;
    text-align: left;
    width: 100%;
  }
  .fkp-bottombar__value { display: flex; flex: 0 0 auto; flex-direction: column; line-height: 1.25; }
  .fkp-bottombar__value strong { color: var(--c-lime); font-size: 20px; font-weight: 800; }
  .fkp-bottombar__value span { color: rgba(255, 255, 255, 0.8); font-size: 12px; }
  .fkp-bottombar__logos { display: flex; flex: 1; gap: 4px; justify-content: flex-end; overflow: hidden; }
  .fkp-barlogo {
    align-items: center;
    background: #fff;
    border-radius: 4px;
    display: inline-flex;
    flex: 0 0 auto;
    height: 26px;
    justify-content: center;
    padding: 2px 4px;
    width: 42px;
  }
  .fkp-barlogo img { max-height: 22px; max-width: 100%; object-fit: contain; }
  .fkp-barlogo__txt { color: var(--c-navy); font-size: 11px; font-weight: 700; }
  .fkp-barlogo--more {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    width: 32px;
  }
  .fkp-bottombar__chev { align-items: center; color: var(--c-lime); display: flex; flex: 0 0 auto; }
  .fkp-bottombar__chev svg {
    width: 20px; height: 20px; fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.25s ease;
  }
  .fkp-bottombar.is-open .fkp-bottombar__chev svg { transform: rotate(180deg); }

  .skin-planer .ext-main { margin-bottom: 90px; }
  .fkp-progress { padding: 10px 14px; }
  .fkp-progress__lead { font-size: 15px; }
}

/* --- So funktioniert's ----------------------------------------------------- */

.howto-backdrop {
  align-items: center;
  background: rgba(0, 35, 83, 0.45);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 50;
}
/* Das hidden-Attribut muss alle display-Regeln oben stechen - sonst legt sich
   z. B. der Blatt-Hintergrund dauerhaft ueber die Seite und blockiert Klicks. */
.fkp-planner[hidden],
.howto-backdrop[hidden],
.fkp-sheet-backdrop[hidden],
.fkp-presets[hidden],
.fkp-bottombar[hidden] { display: none; }
.howto {
  background: #fff;
  border-radius: var(--c-radius);
  border-top: 4px solid var(--c-lime);
  box-shadow: 0 24px 80px rgba(0, 35, 83, 0.32);
  max-height: 86vh;
  max-width: 560px;
  overflow-y: auto;
  padding: 24px 28px;
}
.howto h2 { color: var(--c-navy); font-size: 19px; margin: 0 0 12px; }
.howto ol { margin: 0 0 18px; padding-left: 20px; }
.howto li { margin-bottom: 8px; }
/* Jeder Schritt traegt seit 21.08.2026 eine eigene Ueberschrift ueber dem
   Fliesstext - deshalb Block statt Fliess. */
.howto__steps li { margin-bottom: 12px; }
.howto__steps li > strong { color: var(--c-navy); display: block; }
.howto__steps li > span { display: block; }

/* =========================================================================
   Handy: aufgeraeumter Kopf, Sender als ruhige Liste
   ========================================================================= */

@media (max-width: 720px) {
  /* --- Kopf: nur Logo und Info-Symbol ----------------------------------- */
  /* Nur oben/unten: den seitlichen Rand (16px) macht seit dem 24.09.2026 die
     Breite von .ext-header__inner (siehe "buendig mit der hellen Flaeche"). */
  .skin-planer .ext-header { padding-bottom: 10px; padding-top: 10px; }
  .skin-planer .ext-header__inner { gap: 10px; }
  .skin-planer .ext-header__divider { display: none; }
  .skin-planer .ext-brand__logo { height: 24px; }
  .skin-planer .ext-header__subtitle { display: none; }
  .skin-planer .ext-header__title { font-size: 15px; }
  .fkp-brandmark { height: 34px; }

  /* Info-Knopf auf das Symbol reduzieren. */
  .skin-planer .fkp-info { min-width: 38px; padding: 8px 10px; }
  .fkp-info__label { display: none; }
  .fkp-info__icon { font-size: 17px; line-height: 1; }

  /* --- Schnellstart: Ueberschrift ueber die Pakete ------------------------
     Nebeneinander geht nur, solange die Pakete eine Zeile hoch sind. Hier
     stehen sie in zwei Spalten und damit mehrere Zeilen hoch - die
     Ueberschrift stuende dann mittig daneben und liesse links viel Luft
     stehen. Also uebereinander statt nebeneinander. */
  .fkp-presets { display: block; }
  .fkp-presets .fkp-h2 { margin-bottom: 7px; }

  /* --- Schnellstart: umbrechen statt seitwaerts scrollen -----------------
     Die Pakete bleiben nebeneinander und sind so breit wie ihr Name; was
     nicht mehr in die Zeile passt, rutscht in die naechste. Ein festes
     Zweispalten-Raster waere hier falsch: es zwingt kurze Namen auf halbe
     Zeilenbreite und macht den Block hoeher als noetig. */
  .fkp-chiprow {
    flex-wrap: wrap;
    gap: 7px;
    overflow-x: visible;
  }
  .fkp-chip { max-width: 100%; padding: 8px 10px; }
  .fkp-chip__name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fkp-chip__icon { height: 24px; width: 24px; }

  /* --- Suche und Filter gleich breit nebeneinander ----------------------- */
  .fkp-tools { flex-wrap: nowrap; gap: 7px; }
  .fkp-search, .fkp-tools select { flex: 1 1 0; min-width: 0; }

  /* --- Bereiche untereinander statt nebeneinander ------------------------ */
  /* Nur die Spaltenzahl aendert sich - das Zeilenraster bleibt. Ein
     Aussenabstand am Bereich wuerde ihn hier gegen seine Rasterzeilen
     druecken (der Inhalt wird dann flacher als die Zeile); der Abstand
     zwischen den Bereichen kommt deshalb aus der Ueberschrift. */
  #poolGroups { grid-template-columns: minmax(0, 1fr); }
  .fkp-pool { padding: 12px 14px; }
}

@media (max-width: 400px) {
  /* Zwei Zeilen: oben die Absendermarke (ARD MEDIA) und der Info-Knopf,
     darunter das Produkt - Flex-Kombi-Logo NEBEN dem Schriftzug, wie auf
     allen breiteren Ansichten (seit 24.09.2026; vorher stand das Logo oben
     beim Firmenlogo und der Schriftzug allein darunter).

     Den Umbruch erzwingt der Abstandhalter der Huelle: volle Breite, Hoehe
     0. Der Info-Knopf steht davor und wird per margin-left: auto nach rechts
     geschoben. row-gap bleibt 0 - sonst zaehlte die unsichtbare Zeile des
     Abstandhalters doppelt; den Abstand zur zweiten Zeile geben Logo und
     Titel selbst. Der gruene Balken vor dem Schriftzug entfaellt: den
     Akzent setzt jetzt das Logo. */
  .skin-planer .ext-header__inner { flex-wrap: wrap; row-gap: 0; }
  .skin-planer .ext-header .fkp-info { margin-left: auto; order: 3; }
  .skin-planer .ext-header__spacer { flex: 1 0 100%; height: 0; order: 4; }
  .fkp-brandmark { height: 28px; margin-top: 7px; order: 5; }
  .skin-planer .ext-header__titles { flex: 1 1 0; margin-top: 7px; min-width: 0; order: 6; }
  .skin-planer .ext-header__title { font-size: 14px; letter-spacing: 0.01em; }
}

/* =========================================================================
   Bewegung
   Sparsam eingesetzt: nur dort, wo sie eine Zustandsaenderung erklaert.
   Alles laesst sich per Systemeinstellung abschalten (siehe unten).
   ========================================================================= */

/* Regel hakt sich sichtbar ab, statt umzuspringen. */
.fkp-rule__icon { transform: scale(1); }
.fkp-rule.is-ok .fkp-rule__icon { animation: fkp-tick 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes fkp-tick {
  0% { transform: scale(0.5); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Zuletzt gewaehlter Sender huepft in die untere Leiste. */
.fkp-barlogo.is-new { animation: fkp-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes fkp-pop {
  0% { opacity: 0; transform: translateY(6px) scale(0.7); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Einmaliger Glanz, wenn die Regeln aufgehen - danach Ruhe. */
.fkp-result.is-celebrating { animation: fkp-glow 0.9s ease-out; }
@keyframes fkp-glow {
  0% { box-shadow: var(--c-shadow-lift), 0 0 0 0 rgba(190, 225, 32, 0.55); }
  70% { box-shadow: var(--c-shadow-lift), 0 0 0 12px rgba(190, 225, 32, 0); }
  100% { box-shadow: var(--c-shadow-lift), 0 0 0 0 rgba(190, 225, 32, 0); }
}

/* Auswahlzeilen und Schnellstart-Kacheln reagieren weich. */
.fkp-selrow { transition: background-color 0.2s ease; }
.fkp-selrow:hover { background: rgba(0, 44, 107, 0.03); }
.fkp-chip:active { transform: translateY(0) scale(0.98); }
.fkp-ring__value { transition: color 0.25s ease; }

/* Wer weniger Bewegung wuenscht, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .fkp-tile,
  .fkp-tile__check::after,
  .fkp-progress,
  .fkp-progress__fill,
  .fkp-ring__fill,
  .fkp-side,
  .fkp-selrow,
  .fkp-chip { transition: none !important; }
  .fkp-rule.is-ok .fkp-rule__icon,
  .fkp-barlogo.is-new,
  .fkp-result.is-celebrating { animation: none !important; }
}