/* ══════════════════════════════════════════════════════════════════════════
   EINHEITLICHE OBERFLÄCHE FÜR ALLE EINGEBETTETEN SEITEN
   Stand 30.08.2026 · reine Kosmetik

   WAS DIESE DATEI TUT: Ecken, Schatten, Abstände und Zeilenabstände über alle
   Embeds hinweg auf dieselben Werte bringen. Wer von Themen zum Fragebogen zur
   Auswertung zum Cockpit ins Portal geht, soll nie denken, er sei in einer
   anderen Software.

   WAS SIE NICHT TUT: keine Formel, keine Schwelle, kein JavaScript, keine
   Farbe erfinden. Die Farben kommen aus den Seiten selbst — es gibt bewusst
   KEIN zweites Farbsystem, sonst laufen die beiden beim naechsten Gold-Wechsel
   auseinander.

   JE SEITE EINE KLASSE. Die Embeds benutzen dieselben kurzen Klassennamen fuer
   verschiedene Dinge: «et» ist in «Starten» eine Etappe und im Cockpit ein
   Ereignistext, «card» ist im Fragebogen der Seitenrahmen und im Cockpit eine
   Diagrammkachel. Eine flache Datei ohne Abgrenzung blaest deshalb im Cockpit
   die Ereigniszeilen zu Kaesten auf. Darum haengt jede Regel an der Klasse
   ihrer Seite.

   DREI STUFEN, mehr nicht:
     Karte/Container  14 px + Schatten
     inneres Element  10 px, ohne Schatten
     Knopf             9 px
   Marken und Pillen (999 px) bleiben, wie sie sind — das sind keine Knoepfe.
   ══════════════════════════════════════════════════════════════════════════ */

.bbe{
  --bbe-r-karte:14px;
  --bbe-r-innen:10px;
  --bbe-r-knopf:9px;
  --bbe-schatten:0 9px 28px rgba(15,31,56,.055);
  --bbe-schatten-hoch:0 13px 34px rgba(15,31,56,.085);
  /* Gold aus der Seite selbst; die Namen unterscheiden sich je Embed. */
  --bbe-gold:var(--teal, var(--gold, #B09E80));
}

/* ── gilt überall ──────────────────────────────────────────────────────── */
.bbe button, .bbe a, .bbe input, .bbe select, .bbe textarea, .bbe summary{
  transition:border-color .16s ease, box-shadow .16s ease,
             background-color .16s ease, color .16s ease, transform .16s ease;
}
/* Tastaturbedienung sichtbar machen — heute fehlt das an mehreren Stellen. */
.bbe :focus-visible{ outline:2px solid var(--bbe-gold); outline-offset:3px }

@media(prefers-reduced-motion:reduce){
  .bbe *, .bbe *::before, .bbe *::after{
    transition:none !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}

/* Ruhiger lesen: 1.5 ist dicht bedruckt, 1.68 atmet. Nur Fliesstext,
   nicht Zahlen und nicht Beschriftungen — dort verschoebe es die Kacheln. */
.bbe .lead, .bbe .hint, .bbe .info-box, .bbe .an-legend, .bbe .doc-note,
.bbe .weg, .bbe .tx-lead, .bbe .tx-karte p, .bbe .pw-wert, .bbe .pw-fuss,
.bbe .et-txt, .bbe .se-lead, .bbe .bb-anm-sub, .bbe .an-card-sub{
  line-height:1.68;
}
.bbe .eyebrow, .bbe .sec-label, .bbe .an-card-label, .bbe .kpi .lbl{
  letter-spacing:.09em;
}

/* ── FRAGEBOGEN und AUSWERTUNG ─────────────────────────────────────────── */
.bbe-fragebogen .an-chart-wrap{
  border-radius:var(--bbe-r-karte);
  box-shadow:var(--bbe-schatten);
}
.bbe-fragebogen .an-card{ border-radius:var(--bbe-r-innen) }
.bbe-fragebogen .bb-anm{ border-radius:var(--bbe-r-karte) }
.bbe-fragebogen #an-comment,
.bbe-fragebogen #ck-eingabe>summary,
.bbe-fragebogen .ck-speicher button,
.bbe-fragebogen .ck-prosa-akt button{ border-radius:var(--bbe-r-knopf) }
.bbe-fragebogen .doc-form{ border-radius:var(--bbe-r-knopf) }
.bbe-fragebogen .an-var-zeile{ padding-top:11px; padding-bottom:11px }

/* ── KUNDENPORTAL «Mein Bild» ──────────────────────────────────────────── */
.bbe-portal .karte{
  border-radius:var(--bbe-r-karte);
  box-shadow:var(--bbe-schatten);
}
.bbe-portal .rahmen{ border-radius:var(--bbe-r-innen) }
.bbe-portal .doc{ border-radius:var(--bbe-r-innen) }
.bbe-portal .knopf,
.bbe-portal .pnav a{ border-radius:var(--bbe-r-knopf) }
.bbe-portal .pgrid{ gap:18px }

/* ── THEMEN ────────────────────────────────────────────────────────────── */
.bbe-themen .tx-karte{
  border-radius:var(--bbe-r-karte);
  box-shadow:var(--bbe-schatten);
}
.bbe-themen .tx-karte:hover{ box-shadow:var(--bbe-schatten-hoch); transform:translateY(-1px) }
.bbe-themen .tx-karten{ gap:13px }
.bbe-themen .tx-gruppe{ margin-top:34px }

/* ── STARTEN ───────────────────────────────────────────────────────────── */
/* «et» heisst hier Etappe. Ohne die Seitenklasse traefe diese Regel im
   Cockpit den Ereignistext und machte Kaesten aus schlanken Zeilen. */
.bbe-starten .et{
  border-radius:var(--bbe-r-karte);
  box-shadow:var(--bbe-schatten);
}
.bbe-starten .et:hover{ box-shadow:var(--bbe-schatten-hoch) }
.bbe-starten .et-cta{ border-radius:var(--bbe-r-knopf) }
.bbe-starten .et-zeile{ padding-top:10px; padding-bottom:10px }

/* ── PLATTFORM ─────────────────────────────────────────────────────────── */
.bbe-plattform .pw-etappe{
  border-radius:var(--bbe-r-karte);
  box-shadow:var(--bbe-schatten);
}
.bbe-plattform .pw-etappe:hover{ box-shadow:var(--bbe-schatten-hoch) }
.bbe-plattform .pw-akt a{ border-radius:var(--bbe-r-knopf) }
.bbe-plattform .pw-zeile{ padding:10px 0 }

/* ── INFOTHEK ──────────────────────────────────────────────────────────── */
.bbe-infothek .ix-item{
  border-radius:var(--bbe-r-karte);
  box-shadow:var(--bbe-schatten);
}
.bbe-infothek .ix-dl-a{ border-radius:var(--bbe-r-knopf) }

/* ── am Handy etwas mehr Rand ──────────────────────────────────────────── */
@media(max-width:600px){
  .bbe-starten .et{ padding-left:20px; padding-right:20px }
  .bbe-plattform .pw-etappe{ padding-left:18px; padding-right:18px }
}

/* ── MEDIATHEK ─────────────────────────────────────────────────────────── */
/* Der Umschalter «Hell / Dunkel» hat kein Ziel mehr, seit die Seite auf das
   Haus-CI gebracht ist. Entfernen ginge nicht: das Skript greift ungeprueft
   auf den Knopf zu und wuerde beim Fehlen abbrechen. Deshalb ausgeblendet —
   ein Bedienelement, das nichts tut, ist schlimmer als keines. */
.bbe-mediathek #theme{ display:none !important }
.bbe-mediathek .card{
  border-radius:var(--bbe-r-karte);
  box-shadow:var(--bbe-schatten);
}
.bbe-mediathek .card:hover{ box-shadow:var(--bbe-schatten-hoch) }
.bbe-mediathek .chip,
.bbe-mediathek .seg button,
.bbe-mediathek .iconbtn,
.bbe-mediathek .search input{ border-radius:var(--bbe-r-knopf) }
.bbe-mediathek .poster{ border-radius:var(--bbe-r-karte) var(--bbe-r-karte) 0 0 }

/* ── BLOG · GLOSSAR · KOMPASS ──────────────────────────────────────────── */
.bbe-blog .bz-list > *,
.bbe-glossar .gx-item,
.bbe-kompass .kx-card,
.bbe-kompass .kx-box{
  border-radius:var(--bbe-r-karte);
  box-shadow:var(--bbe-schatten);
}
.bbe-glossar .gx-cat,
.bbe-kompass .kx-cat,
.bbe-kompass .kx-cta,
.bbe-kompass .kx-back{ border-radius:var(--bbe-r-knopf) }

/* ── BUDGET und CHECKLISTEN ────────────────────────────────────────────── */
.bbe-budget .karte,
.bbe-liste .gruppe,
.bbe-liste .karte{
  border-radius:var(--bbe-r-karte);
  box-shadow:var(--bbe-schatten);
}
.bbe-budget .knopf,
.bbe-liste .knopf{ border-radius:var(--bbe-r-knopf) }

/* ── PERSONALIEN und FEHLJAHR-CHECK ────────────────────────────────────── */
.bbe-personalien .card,
.bbe-fehljahr .card{
  border-radius:var(--bbe-r-karte);
  box-shadow:var(--bbe-schatten);
}
.bbe-personalien .btn,
.bbe-fehljahr .btn,
.bbe-fehljahr .btn-gold,
.bbe-fehljahr .btn-outline{ border-radius:var(--bbe-r-knopf) }


/* ══════════════════════════════════════════════════════════════════════
   PORTAL-POLISH, 06.09.2026 — Impeccable-Durchgang über alle Einbettungen.
   Befund in 375 px: Sprachknöpfe 45×28, Listenlinks 19 px hoch, Glossar-
   Buchstaben 20 px, Etiketten 9.5–12 px. Regel wie auf der Startseite:
   Fingerziele mindestens 44 px, Lesetext mindestens 13 px, Etiketten 11 px.
   Nur Masse, keine Farbe, keine Struktur. Hängt an der Klasse der Seite.
   ══════════════════════════════════════════════════════════════════════ */
.bbe button[data-l] { min-height:44px; min-width:44px; padding:10px 14px; font-size:13px; }
.bbe-portal .pnav a { display:flex; align-items:center; min-height:44px; }
.bbe-portal .postfach { display:inline-flex; align-items:center; min-height:44px; padding:10px 14px; }
.bbe-plattform .pw-akt a { display:inline-flex; align-items:center; min-height:44px; }
.bbe-themen .tx-karte a { display:inline-flex; align-items:center; min-height:44px; padding:8px 0; }
.bbe-themen .tx-karte p { font-size:13.5px; line-height:1.6; }
.bbe-infothek .ix-dl-a { min-height:44px; }
.bbe-infothek a[target="_blank"] { display:inline-block; padding:12px 0; }
.bbe-infothek .ix-woher { font-size:13px !important; }
.bbe-infothek .ix-note { font-size:13px; }
.bbe-infothek .ix-fuss { font-size:12.5px; }
.bbe-glossar .gx-cat { min-height:44px; padding:10px 14px; font-size:13px; }
.bbe-glossar .gx-alpha a { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
.bbe-glossar .gx-more { font-size:13.5px; display:inline-flex; align-items:center; min-height:44px; }
.bbe-glossar .gx-tag { font-size:11px; }
.bbe-glossar .gx-item p { font-size:14px; line-height:1.55; }
.bbe-kompass .kx-card p { font-size:13.5px; line-height:1.55; }
.bbe-kompass .kx-search { min-height:44px; }


/* ══ SPRACHWAHL DEZENT (06.09.2026, Entscheid Nicolas): statt drei Knöpfen eine
   runde Kugel mit der aktiven Sprache; auf Tipp oder Fokus klappt das Menü mit
   den drei Sprachen auf — wie die Sprachkugel im Handy-Kopf der Startseite.
   Gleiche Knöpfe, gleiche Skripte, nur die Darstellung. ══ */
.bbe .p-lang, .bbe .pw-lang, .bbe .se-lang, .bbe .tx-lang, .bbe .ix-lang, .bbe .be-lang, .bbe .gx-lang, .bbe .kx-lang, .bbe .lang-sw {
  position:relative; display:inline-flex; flex-direction:column; align-items:flex-end; gap:0; border:0; background:transparent; overflow:visible; padding:0; margin:0 0 0 auto; z-index:5; }
.bbe :is(.p-lang,.pw-lang,.se-lang,.tx-lang,.ix-lang,.be-lang,.gx-lang,.kx-lang,.lang-sw) button {
  display:none; min-width:44px; min-height:44px; padding:0 14px; border:1px solid rgba(29,58,101,0.22); border-radius:22px; background:#fff; color:#1D3A65; font-weight:700; font-size:12.5px; letter-spacing:.06em; cursor:pointer; margin:0; }
.bbe :is(.p-lang,.pw-lang,.se-lang,.tx-lang,.ix-lang,.be-lang,.gx-lang,.kx-lang,.lang-sw) button.on {
  display:inline-flex; align-items:center; justify-content:center; gap:5px; width:auto; }
.bbe :is(.p-lang,.pw-lang,.se-lang,.tx-lang,.ix-lang,.be-lang,.gx-lang,.kx-lang,.lang-sw) button.on::after { content:'▾'; font-size:11px; opacity:.7; }
.bbe :is(.p-lang,.pw-lang,.se-lang,.tx-lang,.ix-lang,.be-lang,.gx-lang,.kx-lang,.lang-sw):is(:hover,:focus-within) button { display:inline-flex; align-items:center; justify-content:center; }
.bbe :is(.p-lang,.pw-lang,.se-lang,.tx-lang,.ix-lang,.be-lang,.gx-lang,.kx-lang,.lang-sw):is(:hover,:focus-within) button.on { background:#1D3A65; color:#fff; border-color:#1D3A65; }
.bbe :is(.p-lang,.pw-lang,.se-lang,.tx-lang,.ix-lang,.be-lang,.gx-lang,.kx-lang,.lang-sw):is(:hover,:focus-within) button:not(.on) { margin-top:6px; }

/* ══ GLOSSAR EINGEKLAPPT (06.09.2026): 180 Begriffe waren 70 Bildschirmhöhen.
   Titel und Etikett bleiben sichtbar, der Text öffnet auf Tipp; bei einer
   Suche öffnen die Treffer von selbst (Skript in glossar-embed.html). ══ */
.bbe-glossar .gx-item { position:relative; cursor:pointer; padding-right:44px; }
.bbe-glossar .gx-item::after { content:'▾'; position:absolute; right:16px; top:14px; color:#7d6a4c; font-size:15px; }
.bbe-glossar .gx-item.auf::after { content:'▴'; }
.bbe-glossar .gx-item:not(.auf) .gx-def, .bbe-glossar .gx-item:not(.auf) .gx-more { display:none; }
.bbe-glossar .gx-item .gx-more { cursor:pointer; }

/* ══ STANDZEILE auf Plattform und Starten (06.09.2026) ══ */
.bbe .bb-stand { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:0 0 22px; padding:14px 18px; border-radius:12px; background:#F1F6F3; border:1px solid rgba(29,122,110,.28); border-left:3px solid #1D7A6E; font-size:14px; color:#1c2a3a; }
.bbe .bb-stand-t { font-weight:600; }
.bbe .bb-stand-a { display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; border-radius:10px; background:#1D3A65; color:#fff; text-decoration:none; font-weight:700; font-size:13.5px; }
.bbe .bb-stand-a:hover { background:#0f1f38; }
.bbe .bb-stand-h { flex-basis:100%; font-size:12.5px; color:#5f6b7c; }