/* =========================================================================
   Flex-Kombi Planner - Variante C (Anbieter als Bereiche nebeneinander)
   Farbwelt wie Variante A (ard-media.de: Marine + Signalgruen). Jeder
   Anbieter ist ein eigener Bereich - bewusst OHNE Kasten: nur Ueberschrift,
   feine Grundlinie und Abstand halten ihn zusammen. Die Bereiche stehen im
   Spaltensatz nebeneinander und packen sich dicht, 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 fuer ALLE Varianten:

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

   Ausnahmen, bewusst kleiner: Icon-Glyphen (Haken im Regelkasten), die
   Kuerzel-Badges in der Handy-Leiste und der Varianten-Umschalter - alles
   kein Fliesstext, der Umschalter faellt vor dem Go-live ohnehin weg.

   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
   ========================================================================= */

.skin-c {
  --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 Planner 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-c::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-c .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-c .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-c .ext-footer { background: transparent; }

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

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

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

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

.skin-c .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-c .ext-btn:hover { border-color: var(--c-navy); }
/* CTA wie auf der Website: gruene Flaeche, marineblaue Schrift */
.skin-c .ext-btn--primary {
  background: var(--c-lime);
  border-color: var(--c-lime);
  color: var(--c-navy);
}
.skin-c .ext-btn--primary:hover { background: var(--c-lime-dark); border-color: var(--c-lime-dark); }
.skin-c .ext-btn:disabled { background: #e9edf2; border-color: #e9edf2; color: #9aa4b2; opacity: 1; }
.skin-c .ext-input { border-color: var(--c-line); border-radius: var(--c-radius); }
.skin-c .ext-input:focus { border-color: var(--c-navy); outline-color: rgba(190, 225, 32, 0.45); }
.skin-c .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;
  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; }
.fkp-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-bottom: 10px; }
.fkp-search { flex: 0 1 240px; }
.fkp-tools select { flex: 0 1 200px; }
#poolGroups { grid-column: 1 / -1; }
@media (max-width: 700px) {
  /* Auf schmalen Schirmen wieder untereinander - nebeneinander bliebe fuer
     beides zu wenig Platz. */
  .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; }

/* --- 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;
  }
  .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-c .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-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; }

/* --- Varianten-Umschalter (Abstimmungsphase) ------------------------------ */

.fkp-variants-select { display: none; }

.fkp-variants { align-items: center; display: flex; gap: 4px; }
.fkp-variants__label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  margin-right: 3px;
  text-transform: uppercase;
}
.fkp-variants__item {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--c-radius);
  color: #fff;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 700;
  height: 30px;
  justify-content: center;
  min-width: 30px;
  text-decoration: none;
}
.fkp-variants__item:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.fkp-variants__item.is-active {
  background: var(--c-lime);
  border-color: var(--c-lime);
  color: var(--c-navy);
}
/* =========================================================================
   Handy: aufgeraeumter Kopf, Sender als ruhige Liste
   ========================================================================= */

@media (max-width: 720px) {
  /* --- Kopf: nur Logo, Variantenwahl und Info-Symbol --------------------- */
  .skin-c .ext-header { padding: 10px 0; }
  .skin-c .ext-header__inner { gap: 10px; }
  .skin-c .ext-header__divider { display: none; }
  .skin-c .ext-brand__logo { height: 24px; }
  .skin-c .ext-header__subtitle { display: none; }
  .skin-c .ext-header__title { font-size: 15px; }

  /* Drei Knoepfe passen nicht - stattdessen ein schmales Auswahlfeld. */
  .fkp-variants { display: none; }
  .fkp-variants-select { align-items: center; display: flex; flex: 0 0 auto; gap: 5px; }
  .fkp-variants-select__caption {
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .fkp-variants-select__field {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--c-radius);
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 6px 6px 8px;
  }
  .fkp-variants-select__field option { color: var(--c-text); }

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

  /* --- Schnellstart: umbrechen statt seitwaerts scrollen ----------------- */
  .fkp-chiprow {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
  }
  .fkp-chip { 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; }
  .fkp-chip__count { margin-left: auto; }

  /* --- 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) {
  .fkp-chiprow { grid-template-columns: 1fr; }
  /* Der Schriftzug bleibt - er rutscht in eine eigene Zeile unter Logo und
     Bedienelemente, statt zu verschwinden. */
  .skin-c .ext-header__inner { flex-wrap: wrap; row-gap: 7px; }
  .skin-c .ext-header__titles { flex: 1 0 100%; order: 5; }
  .skin-c .ext-header__title {
    border-left: 3px solid var(--c-lime);
    font-size: 14px;
    letter-spacing: 0.01em;
    padding-left: 8px;
  }
}

/* =========================================================================
   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; }
}