/* =========================================================================
   Flex-Kombi Planner - gemeinsam fuer alle vier Varianten
   =========================================================================

   Hier steht, was ALLE Varianten gleich brauchen und was deshalb nicht
   viermal in planner.css / planner-b.css / planner-c.css / planner-d.css
   stehen soll. Die Optik der einzelnen Variante bleibt in ihrem eigenen
   Stylesheet - diese Datei wird davor geladen, die Skins koennen also
   ueberschreiben.

   Bewusst klein halten: alles, was nur eine Variante betrifft, gehoert
   nicht hierher.
   ========================================================================= */

/* --- Embed-Modus: Innenabstand -------------------------------------------
   Eingebettet faellt die helle Platte weg (siehe extern-core.css). Ihr
   Innenabstand darf nicht mitverschwinden, sonst klebt der Planner 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
   Planner 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: "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; }
}