/* ============================================================================
   BBN-RAHMEN v2.1 (Schicht 2) | S409 | A-2026-0171
   v2.1 (31.07.2026, Volker-Freigabe): Lesbarkeit. Sieben Schriftgroessen hoch,
   zwei Farben getauscht, die Handy-Verkleinerung raus. Werte-Quelle ist jetzt
   Standard-Blatt v1.3, Abschnitt "Die Mindestgroessen" und "Die Kontrast-Regel".
   Vorfassung: data-werkstatt/_lesbarkeit-rahmen-s409/sicherung/
   Der EINE Kopf, der optionale Aktionsbalken, der EINE Sechs-Zeilen-Fuss.
   Werte-Quelle: Standard-Blatt v1.3 (FREIGEGEBEN S409, Groessen und Kontrast).
   Schlanker Nachfolger von bbn-rahmen.css v1.0: gleiche gerenderte Werte,
   OHNE !important-Schichten und ID-Selektoren (die Gewalt-Regeln galten dem
   SIO-Gestruepp; die schlanken Seiten laden nur unsere drei Schichten).
   Aenderungen am Rahmen NUR hier (Regelwerk Abschnitt 5). Voraussetzung:
   Schicht 1 bbn-grund.css ist geladen (Variablen, Schriften).
   Die Fortschritts-Anzeige der Buchungs-Strecke zieht beim Buchungs-Umbau
   als Aktionsbalken-Inhalt hierher (Regelwerk 2b).
   ============================================================================ */

/* ---- Der Kopf (ueberall identisch: Logo plus Wortmarke) ---- */
.bbn-header{position:sticky;top:0;z-index:9999;background:var(--bbn-midnight);border-bottom:1px solid rgba(201,163,92,.35);padding:14px 0}
.bbn-header__inner{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.bbn-wordmark{display:inline-flex;align-items:center;gap:10px;font-family:var(--bbn-edel);font-size:22px;font-weight:500;color:var(--bbn-gold-soft);text-decoration:none;flex-shrink:0}
.bbn-wordmark__butterfly{width:24px;height:24px}

/* ---- Der Aktionsbalken (optional, direkt unter dem Kopf; Volker S356) ---- */
.bbn-aktionsbalken{background:var(--bbn-gold-soft);color:var(--bbn-midnight);padding:10px 0}
.bbn-aktionsbalken__inner{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;justify-content:center;align-items:center;gap:10px;font-family:var(--bbn-klar);font-size:18px;font-weight:600;text-align:center}

/* Fortschritts-Pille als Aktionsbalken-Inhalt (Buchungs-Strecke, S357: zieht
   aus dem Kopf-Slot hierher, Regelwerk 2b). Gestaltung auf Gold-Grund.
   S409: auf Gold gilt Mitternachtsblau, Gold auf Gold ist unlesbar. */
.bbn-status-pille{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;font-family:var(--bbn-klar);font-size:16px;font-weight:600;color:var(--bbn-midnight);letter-spacing:.02em}
.bbn-step{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.bbn-step__check{width:22px;height:22px;border-radius:50%;background:var(--bbn-midnight);color:var(--bbn-gold-soft);display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.bbn-step__arrow{color:var(--bbn-midnight);font-size:16px}
.bbn-step__badge{display:inline-flex;align-items:center;gap:4px;background:rgba(250,245,236,.6);color:var(--bbn-midnight);padding:5px 14px;border-radius:999px;font-weight:700;font-size:14px;border:1px solid var(--bbn-gold-linie,#A78341)}
.bbn-step--success .bbn-step__check{background:#fff;border:2px solid var(--bbn-success);color:var(--bbn-success-deep)}
.bbn-step--success .bbn-step__label{color:var(--bbn-midnight)}
@keyframes bbn-badge-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(76,175,80,.55)}50%{transform:scale(1.05);box-shadow:0 0 0 8px rgba(76,175,80,0)}}
.bbn-step__badge--pulse{background:var(--bbn-success-tint);color:var(--bbn-success-deep);border:1px solid var(--bbn-success);animation:bbn-badge-pulse 2s ease-in-out infinite}
/* S409: auf dem Handy wird NIE verkleinert. Abstaende duerfen enger werden,
   Schrift nicht. Die alte Fassung schrumpfte hier auf 12, 13 und 11 Pixel. */
@media(max-width:480px){.bbn-status-pille{gap:10px}.bbn-step__badge{padding:4px 12px}}

/* ---- Der Fuss (sechs Zeilen, feste Reihenfolge, dunkelblau, zentriert) ---- */
.bbn-footer{background:var(--bbn-midnight);color:var(--bbn-cream);padding:48px 0 32px;text-align:center}
.bbn-footer__inner{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;align-items:center;gap:10px}
/* Zeile 1: Marke */
.bbn-footer__brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--bbn-edel);font-size:22px;font-weight:500;color:var(--bbn-gold-soft);margin:0}
.bbn-footer__butterfly{width:24px;height:24px}
/* Zeile 2: Anita */
.bbn-footer__desc{font-family:var(--bbn-edel);font-size:19px;font-style:italic;font-weight:400;color:rgba(250,245,236,.85);margin:4px 0}
/* Zeile 3: Rechts-Links */
.bbn-footer__links{font-family:var(--bbn-klar);font-size:16px;margin:4px 0}
.bbn-footer__link-btn{background:transparent;border:none;color:var(--bbn-gold-soft);cursor:pointer;font-family:inherit;font-size:inherit;padding:0 8px;text-decoration:none;transition:color .18s ease}
.bbn-footer__link-btn:hover{color:var(--bbn-gold);text-decoration:underline}
.bbn-footer__sep{color:var(--bbn-gold-deep);margin:0 4px}
/* Zeile 4: Copyright */
.bbn-footer__copy{font-family:var(--bbn-klar);font-size:16px;color:rgba(250,245,236,.72);margin:8px 0 0}
/* Zeile 5: Goldstrich plus Schluss-Satz (Personalisierung schlaegt Standard) */
.bbn-footer__personal{font-family:var(--bbn-edel);font-size:18px;font-style:italic;font-weight:400;color:rgba(250,245,236,.85);margin:24px auto 0;max-width:720px;padding:24px 16px 0;border-top:1px solid rgba(201,163,92,.25);text-align:center;line-height:1.6}
/* Zeile 6: Beratungs-Hinweis, gedimmt, aber NICHT mehr klein (S409) */
.bbn-footer__hinweis{font-family:var(--bbn-klar);font-size:16px;color:rgba(250,245,236,.72);margin:14px auto 0;padding:0 16px}

/* ---- Wortmarken-Branding: "Bye Bye" fett GOLD, "Narzisst" duenn kursiv
   SILBER. Auf hellem Grund dunkle Toene, auf dunklem Grund helle. ---- */
.bbn-wm__strong{font-weight:700;font-style:normal;color:var(--bbn-gold-deep)}
.bbn-wm__weak{font-weight:300;font-style:italic;color:var(--bbn-silber-dunkel)}
.bbn-header .bbn-wm__strong,.bbn-footer .bbn-wm__strong{color:var(--bbn-gold-soft)}
.bbn-header .bbn-wm__weak,.bbn-footer .bbn-wm__weak{color:var(--bbn-silber-hell)}


/* ---- Glanz-Gold A (S409): Aktionsbalken und Wortmarke ----
   Der Aktionsbalken bekommt den Verlauf als Flaeche. Die Schrift darauf bleibt
   Mitternachtsblau und erreicht ueber den ganzen Verlauf mindestens 5,97.
   Die Wortmarke glaenzt in Kopf UND Fuss, mit flachem Gold als Rueckfall. */
.bbn-aktionsbalken{background:var(--bbn-gold-glanz,linear-gradient(135deg,#C9A35C 0%,#D9BE7E 40%,#F2DFA6 50%,#D9BE7E 60%,#C9A35C 100%))}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .bbn-header .bbn-wm__strong,
  .bbn-footer .bbn-wm__strong{
    background-image:var(--bbn-gold-glanz-schrift,linear-gradient(100deg,#D9BE7E 0%,#EFE0AE 45%,#FBF0C9 52%,#EFE0AE 60%,#D9BE7E 100%));
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
}