/* ==========================================================================
   flowcontrol — Brand-Layer für die Beweis-Abschnitte der Produktseiten
   --------------------------------------------------------------------------
   Hybrid-Ansatz: Hero, Video und Navigation bleiben im bestehenden
   Tailwind-Look. Alles, was BELEGEN soll — Kennzahlen, Rechner, Preisrahmen,
   Voraussetzungen, Methodik — bekommt hier die ruhige, editoriale Sprache der
   Berichtsseiten (/berichte/…), weil genau die Vertrauen erzeugt.

   Alle Klassen sind mit `fc-` präfixiert und kollidieren daher nicht mit
   Tailwind-Utilities oder styles.css.

   Dark Mode: Die Tokens sind bewusst als austauschbarer Block angelegt, aber
   noch NICHT auf prefers-color-scheme umgeschaltet — die umgebenden
   Tailwind-Seiten sind reine Light-Seiten, ein dunkler Beweisblock in einer
   hellen Seite würde brechen. Sobald die Seiten vollständig tokenisiert sind,
   genügt hier ein Media-Query-Block.
   ========================================================================== */

:root {
  /* Flächen und Text */
  --fc-page: #f4f7f7;
  --fc-surface: #ffffff;
  --fc-ink: #171d34;
  --fc-ink-2: #4b5165;
  --fc-muted: #7d8494;
  --fc-hairline: rgba(23, 29, 52, 0.10);

  /* Marke */
  --fc-accent: #12857a;
  --fc-accent-deep: #0e7264;
  --fc-accent-wash: rgba(63, 181, 168, 0.10);

  /* Signale */
  --fc-good: #086b2d;
  --fc-warn: #8a5300;
  --fc-risk: #99310f;
  --fc-risk-wash: rgba(153, 49, 15, 0.07);

  /* Rhythmus */
  --fc-radius: 12px;
  --fc-radius-sm: 10px;
  --fc-gap: 14px;
}

/* --------------------------------------------------------------------------
   1. Sektionsrahmen
   Setzt den ruhigen Grundton gegen die kräftigen Tailwind-Sektionen darüber.
   -------------------------------------------------------------------------- */

.fc-section {
  background: var(--fc-page);
  color: var(--fc-ink);
  padding: 72px 24px;
}

.fc-section--surface {
  background: var(--fc-surface);
}

/* Für den Übergang direkt unter einer dunklen Sektion */
.fc-section--tight {
  padding-top: 48px;
}

.fc-wrap {
  max-width: 1080px;
  margin: 0 auto;
}

.fc-wrap--narrow {
  max-width: 920px;
}

/* --------------------------------------------------------------------------
   2. Typografie
   Aussagesätze statt Fragen, ruhige Größen, lesbare Zeilenlänge.
   -------------------------------------------------------------------------- */

.fc-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fc-accent-deep);
  margin: 0 0 8px;
}

.fc-h2 {
  font-size: clamp(23px, 3.1vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.018em;
  font-weight: 700;
  color: var(--fc-ink);
  margin: 0 0 12px;
  text-wrap: balance;
  max-width: 24ch;
}

.fc-h2--wide {
  max-width: 34ch;
}

.fc-h3 {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--fc-ink);
  margin: 0 0 6px;
}

.fc-lede {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--fc-ink-2);
  max-width: 68ch;
  margin: 0 0 32px;
}

.fc-lede strong,
.fc-prose strong {
  color: var(--fc-ink);
  font-weight: 600;
}

.fc-prose {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--fc-ink-2);
  max-width: 68ch;
}

.fc-prose p {
  margin: 0 0 14px;
}

.fc-prose p:last-child {
  margin-bottom: 0;
}

/* Links im Fließtext.
   Tailwinds Preflight setzt `a{color:inherit;text-decoration:inherit}` — ohne
   die folgenden Regeln sind Querverweise vom Fließtext nicht zu unterscheiden
   und werden schlicht nicht geklickt. */

.fc-lede a,
.fc-prose a,
.fc-callout a,
.fc-note a,
.fc-card__body a,
.fc-card__list a,
.fc-faq__a a,
.fc-kpi__label a {
  color: var(--fc-accent-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(18, 133, 122, 0.35);
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.fc-lede a:hover,
.fc-prose a:hover,
.fc-callout a:hover,
.fc-note a:hover,
.fc-card__body a:hover,
.fc-card__list a:hover,
.fc-faq__a a:hover,
.fc-kpi__label a:hover {
  color: var(--fc-accent);
  text-decoration-color: currentColor;
}

.fc-lede a:focus-visible,
.fc-prose a:focus-visible,
.fc-callout a:focus-visible,
.fc-note a:focus-visible,
.fc-card__body a:focus-visible,
.fc-card__list a:focus-visible,
.fc-faq__a a:focus-visible {
  outline: 2px solid var(--fc-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Im dunklen CTA-Band braucht der Link den umgekehrten Kontrast. */
.fc-cta a:not(.fc-btn) {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 2px;
}

.fc-cta a:not(.fc-btn):hover {
  text-decoration-color: #ffffff;
}

/* --------------------------------------------------------------------------
   3. Kennzahlen-Strip
   Die stärkste Einzelkomponente der Berichte: harte Zahlen, sofort sichtbar.
   -------------------------------------------------------------------------- */

.fc-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--fc-gap);
  margin: 0 0 40px;
  list-style: none;
  padding: 0;
}

.fc-kpi {
  background: var(--fc-surface);
  border: 1px solid var(--fc-hairline);
  border-radius: var(--fc-radius-sm);
  padding: 18px 20px 16px;
}

.fc-kpi__value {
  font-size: clamp(24px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--fc-ink);
  font-variant-numeric: tabular-nums;
}

.fc-kpi__value--accent {
  color: var(--fc-accent);
}

.fc-kpi__label {
  font-size: 13px;
  line-height: 1.45;
  color: var(--fc-ink-2);
  margin-top: 6px;
}

.fc-kpi__note {
  font-size: 12px;
  color: var(--fc-muted);
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   4. Karten
   -------------------------------------------------------------------------- */

.fc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--fc-gap);
}

.fc-cards--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.fc-card {
  background: var(--fc-surface);
  border: 1px solid var(--fc-hairline);
  border-radius: var(--fc-radius);
  padding: 20px 22px 18px;
}

.fc-card__tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fc-accent-deep);
  background: var(--fc-accent-wash);
  border-radius: 999px;
  padding: 3px 10px;
  margin: 0 0 12px;
}

.fc-card__tag--neutral {
  color: var(--fc-muted);
  background: rgba(23, 29, 52, 0.06);
}

.fc-card__price {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fc-accent);
  font-variant-numeric: tabular-nums;
  margin: 2px 0 8px;
}

.fc-card__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fc-ink-2);
  margin: 0;
}

.fc-card__list {
  margin: 10px 0 0;
  /* Tailwinds Preflight setzt `ol,ul{list-style:none}` — ohne diese Zeile
     stehen die Einträge ohne Aufzählungszeichen im Einzug. */
  list-style: disc outside;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fc-ink-2);
}

.fc-card__list::marker,
.fc-card__list li::marker {
  color: var(--fc-accent);
}

.fc-card__list li {
  margin: 0 0 6px;
}

.fc-card__list li strong {
  color: var(--fc-ink);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Ablauf in Schritten
   -------------------------------------------------------------------------- */

.fc-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--fc-gap);
  counter-reset: fc-step;
  list-style: none;
  padding: 0;
  margin: 0;
}

.fc-step {
  background: var(--fc-surface);
  border: 1px solid var(--fc-hairline);
  border-radius: var(--fc-radius);
  padding: 20px 22px 18px;
  counter-increment: fc-step;
}

.fc-step::before {
  content: counter(fc-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--fc-accent-wash);
  color: var(--fc-accent-deep);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   6. Tabelle
   -------------------------------------------------------------------------- */

.fc-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fc-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  background: var(--fc-surface);
  border: 1px solid var(--fc-hairline);
  border-radius: var(--fc-radius);
  overflow: hidden;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}

.fc-table th,
.fc-table td {
  padding: 11px 16px;
  text-align: right;
}

.fc-table th:first-child,
.fc-table td:first-child {
  text-align: left;
}

.fc-table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fc-muted);
  border-bottom: 1px solid var(--fc-hairline);
  font-weight: 600;
}

.fc-table tbody tr + tr td {
  border-top: 1px solid var(--fc-hairline);
}

.fc-table td.fc-best {
  color: var(--fc-good);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. Hinweisblöcke
   -------------------------------------------------------------------------- */

.fc-callout {
  background: var(--fc-accent-wash);
  border-left: 3px solid var(--fc-accent);
  border-radius: 0 var(--fc-radius-sm) var(--fc-radius-sm) 0;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fc-ink-2);
  max-width: 72ch;
  margin: 24px 0 0;
}

.fc-callout strong {
  color: var(--fc-ink);
}

.fc-callout--risk {
  background: var(--fc-risk-wash);
  border-left-color: var(--fc-risk);
}

/* Methodik-/Quellenblock am Fuß eines Beweisabschnitts */
.fc-note {
  border-top: 1px solid var(--fc-hairline);
  margin-top: 40px;
  padding-top: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fc-muted);
  max-width: 78ch;
}

.fc-note strong {
  color: var(--fc-ink-2);
}

/* --------------------------------------------------------------------------
   8. Rechner
   Der Leser stellt seine EIGENEN Annahmen ein — das ist der Grund, warum die
   Berichtsseiten überzeugen. Kein Ergebnis ohne sichtbare Annahme.
   -------------------------------------------------------------------------- */

.fc-calc {
  background: var(--fc-surface);
  border: 1px solid var(--fc-hairline);
  border-radius: var(--fc-radius);
  padding: 24px;
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 860px) {
  .fc-calc {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 34px;
    padding: 28px 30px;
  }
}

.fc-calc__controls {
  display: grid;
  gap: 22px;
  align-content: start;
}

.fc-field__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: var(--fc-ink-2);
  margin-bottom: 10px;
}

.fc-field__value {
  font-size: 16px;
  font-weight: 700;
  color: var(--fc-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fc-field__hint {
  font-size: 12.5px;
  color: var(--fc-muted);
  margin-top: 8px;
}

/* Slider — in beiden Engines identisch gezeichnet */
.fc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(23, 29, 52, 0.14);
  outline: none;
  margin: 0;
}

.fc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--fc-accent);
  border: 3px solid var(--fc-surface);
  box-shadow: 0 1px 4px rgba(23, 29, 52, 0.28);
  cursor: pointer;
}

.fc-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--fc-accent);
  border: 3px solid var(--fc-surface);
  box-shadow: 0 1px 4px rgba(23, 29, 52, 0.28);
  cursor: pointer;
}

.fc-range:focus-visible {
  outline: 2px solid var(--fc-accent);
  outline-offset: 4px;
}

.fc-number {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fc-ink);
  background: var(--fc-page);
  border: 1px solid var(--fc-hairline);
  border-radius: 8px;
  padding: 10px 12px;
}

.fc-number:focus-visible {
  outline: 2px solid var(--fc-accent);
  outline-offset: 1px;
  border-color: transparent;
}

/* Ergebnisseite des Rechners */
.fc-calc__result {
  background: var(--fc-page);
  border: 1px solid var(--fc-hairline);
  border-radius: var(--fc-radius-sm);
  padding: 22px 24px;
  align-self: start;
}

.fc-result__primary {
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fc-accent);
  font-variant-numeric: tabular-nums;
}

.fc-result__caption {
  font-size: 14px;
  color: var(--fc-ink-2);
  margin-top: 6px;
}

.fc-result__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--fc-hairline);
  margin-top: 18px;
  padding-top: 14px;
  font-size: 14px;
  color: var(--fc-ink-2);
}

.fc-result__row b {
  font-size: 17px;
  font-weight: 700;
  color: var(--fc-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   9. Preisbausteine
   -------------------------------------------------------------------------- */

.fc-price-note {
  font-size: 13px;
  color: var(--fc-muted);
  margin-top: 16px;
}

/* --------------------------------------------------------------------------
   10. Einwand-FAQ
   Details/Summary statt JS — funktioniert auch ohne Skript und ist
   von Suchmaschinen wie von Screenreadern zuverlässig lesbar.
   -------------------------------------------------------------------------- */

.fc-faq {
  display: grid;
  gap: 10px;
  max-width: 860px;
}

.fc-faq__item {
  background: var(--fc-surface);
  border: 1px solid var(--fc-hairline);
  border-radius: var(--fc-radius-sm);
  overflow: hidden;
}

.fc-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--fc-ink);
  cursor: pointer;
  list-style: none;
}

.fc-faq__q::-webkit-details-marker {
  display: none;
}

.fc-faq__q::after {
  content: "+";
  flex: none;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--fc-accent);
  transition: transform 0.18s ease;
}

.fc-faq__item[open] .fc-faq__q::after {
  content: "−";
}

.fc-faq__q:focus-visible {
  outline: 2px solid var(--fc-accent);
  outline-offset: -2px;
}

.fc-faq__a {
  padding: 0 20px 18px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--fc-ink-2);
  max-width: 74ch;
}

.fc-faq__a p {
  margin: 0 0 12px;
}

.fc-faq__a p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   11. Abschluss-Band und Querverweise
   -------------------------------------------------------------------------- */

.fc-cta {
  background: var(--fc-ink);
  color: #ffffff;
  border-radius: var(--fc-radius);
  padding: 34px 32px;
  display: grid;
  gap: 24px;
  align-items: center;
}

@media (min-width: 820px) {
  .fc-cta {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    padding: 38px 40px;
  }
}

.fc-cta__title {
  font-size: clamp(21px, 2.8vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 10px;
  text-wrap: balance;
}

.fc-cta__body {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.76);
  margin: 0;
  max-width: 56ch;
}

.fc-cta__list {
  margin: 12px 0 0;
  /* siehe .fc-card__list — Preflight entfernt sonst die Nummerierung */
  list-style: decimal outside;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.76);
}

.fc-cta__list li::marker {
  color: var(--fc-accent);
  font-weight: 700;
}

/* Eine ungeordnete Liste im CTA-Band bekommt Punkte statt Ziffern. */
ul.fc-cta__list {
  list-style: disc outside;
}

.fc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.fc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.fc-btn--primary {
  background: var(--fc-accent);
  color: #ffffff;
}

.fc-btn--primary:hover {
  background: #0f9a8c;
}

.fc-btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: #ffffff;
}

.fc-btn--ghost:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.fc-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* Querverweise auf die anderen Produktseiten */
.fc-crosslinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--fc-gap);
}

.fc-crosslink {
  display: block;
  background: var(--fc-surface);
  border: 1px solid var(--fc-hairline);
  border-radius: var(--fc-radius);
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.fc-crosslink:hover {
  border-color: var(--fc-accent);
  transform: translateY(-2px);
}

.fc-crosslink__title {
  font-size: 16px;
  font-weight: 650;
  color: var(--fc-ink);
  margin: 0 0 6px;
}

.fc-crosslink__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fc-ink-2);
  margin: 0;
}

.fc-crosslink__more {
  display: inline-block;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fc-accent-deep);
}

/* --------------------------------------------------------------------------
   11b. Sprachumschalter
   Wird von scripts/i18n_build.py als <details> in die Kopfzeile gesetzt —
   nicht von Hand ins Markup schreiben.

   Ein Markup, zwei Zustände:
   · ab 768 px  — Flaggen dauerhaft sichtbar, bündig an der rechten
                  Bildschirmkante. Die Weltkugel ist ausgeblendet.
   · darunter   — nur die Weltkugel links oben in der Ecke; ein Klick klappt
                  die Flaggen darunter auf.
   Das kommt ohne JavaScript aus und ist per Tastatur bedienbar.
   -------------------------------------------------------------------------- */

.fc-lang {
  position: absolute;
  z-index: 50;
  /* Die Kopfzeile ist `sticky` und damit der Bezugsrahmen — die Flaggen sitzen
     deshalb an der Kante des Bildschirms, nicht an der des Inhaltscontainers. */
  top: 0;
}

.fc-lang--fest {
  right: 0;
}

.fc-lang--klapp {
  left: 0;
}

.fc-lang__name {
  /* Sprachname für Screenreader und Suchmaschinen; sichtbar ist die Flagge. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fc-lang__liste {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fc-lang__flagge {
  display: block;
  width: 26px;
  line-height: 0;
  border-radius: 2px;
  overflow: hidden;
  opacity: 0.55;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
  transition: opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.fc-lang__flagge svg {
  display: block;
  width: 100%;
  height: auto;
  /* Rahmen und Rundung sitzen an der Flagge selbst, nicht am Link. So kann der
     Link eine groessere Tippflaeche bekommen, ohne dass die Flagge waechst. */
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* Tippflaeche auf das von WCAG 2.2 geforderte Mass bringen. Die Flaggen sind
   30 px breit, aber nur 15 bis 20 px hoch — die Hoehe folgt dem Seitenverhaeltnis,
   und der Union Jack ist mit 2:1 der flachste. Ohne Polsterung liegt das Ziel
   unter den geforderten 24 x 24 px, und bei vier gestapelten Flaggen landet man
   leicht auf der falschen Sprache. Die Polsterung veraendert die Breite nicht —
   davon haengt die Reserve in der Kopfzeile ab. */
.fc-lang__flagge {
  padding: 6px 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

a.fc-lang__flagge:hover {
  opacity: 1;
  transform: translateY(1px);
}

/* Beim Ueberfahren tritt die Flaggenkante staerker hervor. Der Rahmen sitzt an
   der Flagge, nicht am Link — sonst umschliesst er die vergroesserte
   Tippflaeche statt der Flagge. */
a.fc-lang__flagge:hover svg {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
}

a.fc-lang__flagge:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  opacity: 1;
}

/* Die aktive Sprache ist keine Schaltfläche, sondern eine Anzeige. */
.fc-lang__flagge--aktiv {
  opacity: 1;
  cursor: default;
}

/* --- ab 1280 px: Flaggen dauerhaft, rechte Bildschirmkante ---------------- */

/* Warum nicht schon ab 768 px, wie bei zwei Sprachen: Vier Flaggen sind rund
   154 px breit, und die Kopfzeile muss dafuer denselben Platz freihalten. Die
   deutsche Fassung braucht fuer Logo, sechs Menuepunkte und die Telefonnummer
   rund 944 px; der Inhaltscontainer ist auf 1280 px gedeckelt und laesst nach
   Abzug der Reserve 1040 px. Unterhalb von 1280 px geht diese Rechnung nicht
   mehr auf — dort bleibt es deshalb bei der Weltkugel, die nur 34 px kostet.
   Mit jeder weiteren Sprache verschiebt sich diese Grenze; sie steht deshalb
   an einer Stelle und ist hier begruendet. */
@media (min-width: 1280px) {
  .fc-lang--klapp {
    display: none;
  }

  .fc-lang--fest .fc-lang__liste {
    padding: 6px 14px 6px 12px;
    background: rgba(0, 0, 0, 0.22);
    border-bottom-left-radius: 10px;
  }
}

/* Zwischen Tablet und breitem Desktop reicht der Inhalt bis nahe an den
   Bildschirmrand — dort würde die Telefonnummer unter den Flaggenstreifen
   laufen. Die nötige Reserve wächst mit jeder Sprache: eine Flagge ist rund
   38 px breit, und je breiter der Streifen, desto weiter reicht der Bereich,
   in dem sich beide ins Gehege kommen. Die Kennung `fc-lang--nX` setzt
   i18n_build.py aus der Zahl der aktiven Sprachen — die Regeln stehen
   absteigend, damit die passendste zuletzt gewinnt.

   Oberhalb der jeweiligen Grenze deckelt `max-w-7xl` den Inhalt, links und
   rechts bleibt genug Rand, und die Reserve wäre nur noch eine Verschiebung
   der Kopfzeile aus der Mitte. */
@media (min-width: 1280px) and (max-width: 1459px) {
  .fc-lang--fest ~ .fc-kopfzeile {
    padding-right: 6rem;          /* zwei Sprachen: Streifen ~77 px */
  }
}

@media (min-width: 1280px) and (max-width: 1519px) {
  .fc-lang--n3 ~ .fc-kopfzeile {
    padding-right: 8.5rem;        /* ~116 px */
  }
}

@media (min-width: 1280px) and (max-width: 1599px) {
  .fc-lang--n4 ~ .fc-kopfzeile {
    padding-right: 11rem;         /* ~154 px */
  }
}

@media (min-width: 1280px) and (max-width: 1679px) {
  .fc-lang--n5 ~ .fc-kopfzeile {
    padding-right: 13.5rem;       /* ~193 px */
  }
}

/* Die Weltkugel bleibt zwischen 768 und 1279 px links oben, so wie auf dem
   Telefon. Rechts ist kein Platz: Bei 1024 px bleiben zwischen dem Bedarf der
   Kopfzeile (946 px) und dem verfuegbaren Raum (960 px) nur 14 px uebrig — zu
   wenig fuer die 34 px der Weltkugel, und eine Reserve wuerde die Navigation
   umbrechen lassen. Links steht nur das Logo. Die Weltkugel endet bei 34 px,
   der Inhalt beginnt bei 32 px (lg:px-8) — zwei Pixel Ueberschneidung, die im
   Weissraum des Logos verschwinden. Unter 900 px waeren es zehn, dort ist die
   Kopfzeile aber ohnehin zu eng; siehe den Hinweis in UEBERSETZUNGEN.md. */

/* --- unter 1280 px: Flaggenstreifen aus, Weltkugel an --------------------- */

@media (max-width: 1279px) {
  .fc-lang--fest {
    display: none;
  }

  .fc-lang__globus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.22);
    border-bottom-right-radius: 10px;
    cursor: pointer;
    list-style: none;
    transition: color 0.15s ease, background-color 0.15s ease;
  }

  .fc-lang__globus::-webkit-details-marker {
    display: none;
  }

  .fc-lang__globus svg {
    width: 19px;
    height: 19px;
    /* Ohne das faengt das SVG den Klick ab und <summary> klappt nicht auf. */
    pointer-events: none;
  }

  .fc-lang__globus:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -2px;
  }

  .fc-lang[open] .fc-lang__globus {
    color: #ffffff;
    background: var(--fc-ink);
  }

  /* Geschlossen unsichtbar, offen als kleine Klappe unter der Weltkugel. */
  .fc-lang__liste {
    display: none;
  }

  .fc-lang--klapp .fc-lang__flagge {
    /* Im Klappmenue ist Platz fuer das empfohlene Mass von 44 px. */
    padding: 12px 7px;
    width: 44px;
  }

  .fc-lang[open] .fc-lang__liste {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--fc-ink);
    border-bottom-right-radius: 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  }

  .fc-lang__flagge {
    width: 30px;
  }
}

/* --------------------------------------------------------------------------
   12. Kleinteile
   -------------------------------------------------------------------------- */

/* Faktenchips unter dem Hero — der einzige fc-Baustein im hellen Hero-Bereich */
.fc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.fc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(6px);
}

.fc-chip--light {
  color: var(--fc-ink-2);
  background: var(--fc-surface);
  border-color: var(--fc-hairline);
  backdrop-filter: none;
}

/* Auf dem Telefon gibt styles.css dem Hero feste `height: 100vh` bei
   `overflow: hidden`. Alles, was nicht in einen Bildschirm passt, verschwindet
   damit hinter der Unterkante — gemessen auf 320x568 bis zu 300 px, auf
   /products/individuelles-system einschliesslich des Hauptknopfs. `min-height`
   erfuellt dieselbe Absicht — der Hero fuellt den Schirm —, waechst aber mit,
   statt abzuschneiden. Das Video liegt absolut auf `inset-0` und deckt die
   groessere Flaeche von selbst ab. */
.hero-section {
  height: auto;
  min-height: 100vh;
  padding-bottom: 3rem;
}

@media (max-width: 480px) {
  /* Oben faellt die Polsterung von 192 px auf 112 px: Die Kopfzeile ist nur
     88 px hoch, der Rest war Luft, die auf einem kleinen Schirm unten fehlt. */
  .hero-section {
    padding-top: 7rem;
  }

  /* Die Faktenchips standen als unterstes Element im Hero und waren damit als
     Erstes abgeschnitten. Auf dem Telefon entfallen sie: Sie sind ein
     Vertrauenshinweis, keine Kernaussage, und stehen weiter unten im Fliesstext
     ohnehin noch einmal. */
  .hero-section .fc-chips {
    display: none;
  }
}

/* Zweispaltiges Layout für „Was Sie mitbringen / Was wir mitbringen" */
.fc-split {
  display: grid;
  gap: var(--fc-gap);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 800px) {
  .fc-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Abstandshalter innerhalb einer Sektion */
.fc-stack > * + * {
  margin-top: 40px;
}

.fc-stack--tight > * + * {
  margin-top: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .fc-crosslink,
  .fc-btn,
  .fc-faq__q::after {
    transition: none;
  }

  .fc-crosslink:hover {
    transform: none;
  }
}


/* Solange der Flaggenstreifen Platz beansprucht, ist die Kopfzeile zu eng fuer
   das Wort vor der Telefonnummer. Die Nummer selbst bleibt stehen und
   anklickbar — nur die Anrede weicht. Oberhalb von 1600 px entfaellt die
   Reserve, dann ist wieder Platz fuer beides. */
@media (max-width: 1599px) {
  .fc-anruf-wort {
    display: none;
  }
}