/* ═══════════════════════════════════════════════════════════════
   glass.css — Glass-Designsystem Baeriswyl Beratungen
   Eine Quelle für alle Seiten. Enthält NUR Optik (Buttons, Karten,
   Bänder, Formularfelder) — keine Layout- oder Strukturregeln.
   Erstellt 18.08.2026 im Zuge des Korb-1-Umbaus.
   ═══════════════════════════════════════════════════════════════ */
/* ══ First-Class Button-System (Glass / Apple-Stil) ══════════════════ */
:root{--g1:#C8B694;--g2:#B09E80;--g3:#8a7a61}

/* Sekundär: gold getöntes Glas — auf hellem Grund klar sichtbar */
.btn-gold,.btn-onwhite,.btn-outline,.btn-outline-d{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(145deg,rgba(200,182,148,.30),rgba(176,158,128,.16))!important;
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  color:var(--navy-d,#0f1f38)!important;
  border:1.5px solid rgba(138,122,97,.95)!important;
  border-radius:14px;padding:15px 28px;font-weight:700;letter-spacing:.01em;text-decoration:none;
  box-shadow:0 4px 16px rgba(138,122,97,.16),inset 0 1px 0 rgba(255,255,255,.75)!important;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,border-color .22s,background .22s;
  overflow:hidden;
}
.btn-gold::after,.btn-onwhite::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(160deg,rgba(255,255,255,.48) 0%,rgba(255,255,255,0) 45%);pointer-events:none}
.btn-gold:hover,.btn-onwhite:hover,.btn-outline:hover,.btn-outline-d:hover{
  transform:translateY(-2px);
  background:linear-gradient(145deg,rgba(200,182,148,.44),rgba(176,158,128,.26))!important;
  border-color:rgba(138,122,97,.85)!important;
  box-shadow:0 12px 30px rgba(138,122,97,.24),inset 0 1px 0 rgba(255,255,255,.9)!important}
.btn-gold:active{transform:translateY(0) scale(.985)}

/* Auf dunklem Grund: Glas dreht ins Dunkle */
.hero .btn-gold,.hero .btn-onwhite,.fb-band .btn-gold,footer .btn-gold,.ft .btn-gold,
.b2b .btn-onwhite,.firmen .btn-onwhite{
  background:linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,.07))!important;
  color:#fff!important;border:1px solid rgba(255,255,255,.42)!important;
  box-shadow:0 6px 20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.35)!important}
.hero .btn-gold:hover,.fb-band .btn-gold:hover{border-color:rgba(255,255,255,.85)!important}

/* Primär: gold, mit Glaskante, Innenglanz und Lichtwisch */
.btn-cta{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(145deg,var(--g1) 0%,var(--g2) 52%,var(--g3) 100%);
  color:#fff!important;border:1px solid rgba(255,255,255,.42);border-radius:14px;
  padding:17px 34px;font-weight:800;font-size:15.5px;letter-spacing:.012em;text-decoration:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(138,122,97,.38),0 2px 6px rgba(15,31,56,.14),
             inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.10);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s;overflow:hidden;isolation:isolate}
.btn-cta::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(165deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.10) 38%,rgba(255,255,255,0) 62%);pointer-events:none}
.btn-cta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .6s cubic-bezier(.2,.8,.3,1);pointer-events:none}
.btn-cta:hover{transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(138,122,97,.48),0 3px 8px rgba(15,31,56,.18),
             inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,0,0,.10)}
.btn-cta:hover::after{left:120%}
.btn-cta:active{transform:translateY(0) scale(.985)}
.btn-cta:focus-visible,.btn-gold:focus-visible{outline:2px solid var(--g2);outline-offset:3px}
.nav-cta{padding:11px 20px;font-size:13.5px;border-radius:11px;margin-left:10px;white-space:nowrap}
.hero-quiet{display:inline-block;margin:14px 20px 0 0;color:rgba(255,255,255,.92);font-size:14px;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;transition:border-color .2s}
.hero-quiet:hover{border-color:rgba(255,255,255,.9)}

/* ══ Fehljahr-Band ══ */
.fb-band{background:linear-gradient(135deg,var(--navy-d,#0f1f38),var(--navy,#1D3A65));color:#fff;padding:60px 5%;position:relative;overflow:hidden}
.fb-band::before{content:"";position:absolute;top:-40%;right:-10%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(200,182,148,.18),transparent 68%);pointer-events:none}
.fb-in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;position:relative}
.fb-num{font-size:66px;font-weight:800;color:var(--g1,#C8B694);line-height:1;font-family:'DM Serif Display',serif;white-space:nowrap;text-shadow:0 2px 20px rgba(200,182,148,.3)}
.fb-t h3{font-size:23px;margin:0 0 7px;color:#fff}.fb-t p{margin:0;color:rgba(255,255,255,.84);font-size:14.5px;max-width:58ch}
.fb-urg{color:var(--g1,#C8B694);font-weight:700}
.fb-btn{display:inline-flex;align-items:center;padding:15px 26px;border-radius:14px;color:#fff;font-weight:700;text-decoration:none;white-space:nowrap;
  background:linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.45);box-shadow:0 6px 22px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .22s,border-color .22s,box-shadow .22s}
.fb-btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.9);box-shadow:0 14px 34px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.5)}
@media(max-width:860px){.fb-in{grid-template-columns:1fr;text-align:center;gap:22px}.fb-num{font-size:54px}}

/* ══ Proof-Band ══ */
.pb-band{background:linear-gradient(180deg,#faf9f6,#f2f0ea);padding:58px 5%;text-align:center}
.pb-q{max-width:760px;margin:0 auto 14px;font-size:21px;line-height:1.55;color:var(--navy-d,#0f1f38);font-family:'DM Serif Display',serif}
.pb-a{color:var(--g3,#8a7a61);font-weight:700;font-size:13.5px;margin-bottom:8px;letter-spacing:.02em}
.pb-stars{color:var(--g2,#B09E80);font-size:18px;letter-spacing:3px;margin-bottom:22px}

/* ══ Partner: Glaskarten in Kategorien ══ */
.pw-cats{max-width:1080px;margin:6px auto 0}
.pw-cat{margin-bottom:26px}
.pw-cat-h{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.pw-cat-h h3{font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--g3,#8a7a61);margin:0;font-weight:700;white-space:nowrap}
.pw-cat-h i{flex:1;height:1px;background:linear-gradient(90deg,rgba(176,158,128,.5),transparent);display:block}
.pw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.pw-card{display:flex;align-items:center;gap:12px;padding:15px 17px;border-radius:15px;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,255,255,.66));
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 3px 14px rgba(15,31,56,.07),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s}
.pw-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(15,31,56,.13),inset 0 1px 0 #fff}
.pw-mono{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--g1,#C8B694),var(--g3,#8a7a61));color:#fff;font-weight:800;font-size:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.pw-name{font-size:13.5px;font-weight:700;color:var(--navy-d,#0f1f38);line-height:1.3}
.pw-note{max-width:1080px;margin:6px auto 16px;text-align:center;color:var(--g3,#8a7a61);font-size:13.5px;font-weight:600}
.pw-more{display:inline-flex;align-items:center;gap:7px;color:var(--navy-d,#0f1f38);font-size:13.5px;font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(176,158,128,.6);padding-bottom:2px}
.pw-more:hover{border-color:var(--g2,#B09E80)}
.pw-foot{text-align:center;margin-top:6px}

/* ══ Lead-Box ══ */
.ld-box{max-width:660px;margin:22px auto 0;padding:22px 24px;border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(250,248,244,.85));
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid rgba(176,158,128,.45);box-shadow:0 8px 30px rgba(15,31,56,.09),inset 0 1px 0 #fff}
.ld-box h4{margin:0 0 5px;font-size:16px;color:var(--navy-d,#0f1f38)}
.ld-box p{margin:0 0 14px;font-size:12.5px;color:#5A6A7E}
.ld-row{display:flex;gap:10px;flex-wrap:wrap}
.ld-row input{flex:1;min-width:170px;padding:13px 15px;border:1px solid rgba(15,31,56,.14);border-radius:12px;font-size:14px;font-family:inherit;background:rgba(255,255,255,.8);transition:border-color .2s,box-shadow .2s}
.ld-row input:focus{outline:0;border-color:var(--g2,#B09E80);box-shadow:0 0 0 3px rgba(176,158,128,.18)}
.ld-btn{padding:13px 24px;border:0;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;color:#fff;
  background:linear-gradient(145deg,var(--navy,#1D3A65),var(--navy-d,#0f1f38));
  box-shadow:0 6px 18px rgba(29,58,101,.28),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .2s,box-shadow .2s}
.ld-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(29,58,101,.36),inset 0 1px 0 rgba(255,255,255,.28)}

details.calc-legal summary{cursor:pointer;font-size:12px;color:#8a8578;font-weight:600;padding:8px 0;list-style:none}
details.calc-legal summary::-webkit-details-marker{display:none}
details.calc-legal summary:hover{color:var(--g3,#8a7a61)}

/* ══ Mobile Sticky ══ */
.sticky-cta{display:none}
@media(max-width:820px){.sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:999;padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.94));
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.9);box-shadow:0 -6px 24px rgba(15,31,56,.10)}
.sticky-cta .btn-cta{width:100%;padding:15px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.btn-cta,.btn-gold,.pw-card,.fb-btn,.ld-btn{transition:none}.btn-cta::after{display:none}}

/* ══ Übrige Button-Varianten der Sprachseiten ══════════════════════ */
.btn-onwhite{
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,255,255,.72))!important;
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  color:var(--navy-d,#0f1f38)!important;border:1px solid rgba(255,255,255,.9)!important;
  border-radius:14px;font-weight:700;
  box-shadow:0 4px 16px rgba(15,31,56,.10),inset 0 1px 0 #fff!important;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s}
.btn-onwhite:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(15,31,56,.16),inset 0 1px 0 #fff!important}
.btn-onbrown{
  background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.08))!important;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  color:#fff!important;border:1px solid rgba(255,255,255,.45)!important;border-radius:14px;font-weight:700;
  box-shadow:0 6px 20px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.35)!important;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),border-color .22s}
.btn-onbrown:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.9)!important}
.btn-outline,.btn-outline-d{
  background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.25))!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-radius:14px;font-weight:700;
  box-shadow:0 3px 12px rgba(15,31,56,.08),inset 0 1px 0 rgba(255,255,255,.8)!important;
  transition:transform .22s,box-shadow .22s,border-color .22s}
.btn-outline:hover,.btn-outline-d:hover{transform:translateY(-2px);border-color:rgba(176,158,128,.7)!important}

/* ══ Wissensbereich (Blog, FAQ, Kompass, Leistungen, Videos) ══════ */
.kw-btn,.kb-bot-btn{
  background:linear-gradient(145deg,var(--g1,#C8B694) 0%,var(--g2,#B09E80) 52%,var(--g3,#8a7a61) 100%)!important;
  color:#fff!important;border:1px solid rgba(255,255,255,.42)!important;border-radius:13px;font-weight:700;
  box-shadow:0 8px 24px rgba(138,122,97,.32),inset 0 1px 0 rgba(255,255,255,.5)!important;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s;position:relative;overflow:hidden}
.kw-btn:hover,.kb-bot-btn:hover{transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(138,122,97,.42),inset 0 1px 0 rgba(255,255,255,.65)!important}
.kw-back{transition:opacity .2s}.kw-back:hover{opacity:.72}

/* ══ Fragebogen & Personalien: dezente Glaskanten ══════════════════ */
.btn-next,.dl-act{
  background:linear-gradient(145deg,var(--g1,#C8B694),var(--g3,#8a7a61))!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.4)!important;border-radius:12px;
  box-shadow:0 8px 22px rgba(138,122,97,.34),inset 0 1px 0 rgba(255,255,255,.5)!important;
  transition:transform .2s,box-shadow .2s}
.btn-next:hover,.dl-act:hover{transform:translateY(-2px);box-shadow:0 13px 30px rgba(138,122,97,.44),inset 0 1px 0 rgba(255,255,255,.62)!important}
.btn-back,.add-btn,.remove-btn,.smallbtn,.addbtn{
  background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,255,255,.6))!important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(15,31,56,.12)!important;border-radius:11px;
  box-shadow:0 2px 8px rgba(15,31,56,.07),inset 0 1px 0 #fff!important;transition:transform .18s,border-color .18s}
.btn-back:hover,.add-btn:hover,.remove-btn:hover,.smallbtn:hover,.addbtn:hover{transform:translateY(-1px);border-color:rgba(176,158,128,.6)!important}

/* ══ Formularfelder: einheitlicher Fokus-Ring ═════════════════════ */
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:0;border-color:var(--g2,#B09E80)!important;
  box-shadow:0 0 0 3px rgba(176,158,128,.20)!important}

/* ══ Kompass-Embed (Odoo) ════════════════════════════════════════ */
.kx-cta{
  background:linear-gradient(145deg,#25497b,#1D3A65)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.28);border-radius:12px;
  box-shadow:0 8px 22px rgba(29,58,101,.30),inset 0 1px 0 rgba(255,255,255,.24);
  transition:transform .2s,box-shadow .2s}
.kx-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(29,58,101,.40),inset 0 1px 0 rgba(255,255,255,.34)}
.kx-card{transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s}
.kx-card:hover{transform:translateY(-3px)}

@media(prefers-reduced-motion:reduce){
  .btn-onwhite,.btn-onbrown,.btn-outline,.btn-outline-d,.kw-btn,.kb-bot-btn,
  .btn-next,.btn-back,.add-btn,.remove-btn,.kx-cta,.kx-card,.dl-act{transition:none!important}
}


/* ══ Finanzcockpit: Tabs, Rechner-Chrome ═════════════════════════ */
.tab{
  background:linear-gradient(145deg,rgba(255,255,255,.85),rgba(250,248,244,.6))!important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(176,158,128,.32)!important;border-radius:12px;
  color:var(--navy-d,#0f1f38)!important;font-weight:600;
  box-shadow:0 2px 8px rgba(15,31,56,.06),inset 0 1px 0 rgba(255,255,255,.85)!important;
  transition:transform .18s,border-color .2s,box-shadow .2s,background .2s}
.tab:hover{transform:translateY(-1px);border-color:rgba(176,158,128,.7)!important}
.tab.active{
  background:linear-gradient(145deg,var(--g1,#C8B694),var(--g3,#8a7a61))!important;
  color:#fff!important;border-color:rgba(255,255,255,.4)!important;font-weight:700;
  box-shadow:0 8px 22px rgba(138,122,97,.34),inset 0 1px 0 rgba(255,255,255,.5)!important}
.calc-cta{
  background:linear-gradient(145deg,var(--g1,#C8B694) 0%,var(--g2,#B09E80) 52%,var(--g3,#8a7a61) 100%)!important;
  color:#fff!important;border:1px solid rgba(255,255,255,.42)!important;border-radius:14px;font-weight:800;
  box-shadow:0 10px 28px rgba(138,122,97,.36),inset 0 1px 0 rgba(255,255,255,.55)!important;
  transition:transform .22s,box-shadow .22s}
.calc-cta:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(138,122,97,.46),inset 0 1px 0 rgba(255,255,255,.68)!important}
.rch-back,.ob-back,.rch-newtab,.ob-newtab{
  background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(250,248,244,.66))!important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(176,158,128,.45)!important;border-radius:11px;
  color:var(--navy-d,#0f1f38)!important;font-weight:600;
  box-shadow:0 2px 10px rgba(15,31,56,.07),inset 0 1px 0 #fff!important;transition:transform .18s,border-color .2s}
.rch-back:hover,.ob-back:hover,.rch-newtab:hover,.ob-newtab:hover{transform:translateY(-1px);border-color:rgba(138,122,97,.8)!important}

/* ══ Karten (Dienstleistungen, Wissen, Angebot) ══════════════════ */
.card,.kw-card,.ang-card,.pa-card{
  transition:transform .24s cubic-bezier(.2,.8,.3,1),box-shadow .24s,border-color .24s}
.card:hover,.kw-card:hover,.ang-card:hover,.pa-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 38px rgba(15,31,56,.13)!important;
  border-color:rgba(176,158,128,.55)!important}

/* ══ Fragebogen: Navigation & Hilfsknöpfe ═══════════════════════ */
.btn-next{
  background:linear-gradient(145deg,#25497b,var(--navy,#1D3A65))!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.24)!important;border-radius:11px;font-weight:700;
  box-shadow:0 8px 22px rgba(29,58,101,.30),inset 0 1px 0 rgba(255,255,255,.22)!important;
  transition:transform .2s,box-shadow .2s}
.btn-next:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(29,58,101,.42),inset 0 1px 0 rgba(255,255,255,.3)!important}
.btn-back,.add-btn,.remove-btn,.smallbtn,.addbtn,.sc-btn,.rate-btn{
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(250,248,244,.7))!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(176,158,128,.45)!important;border-radius:10px;
  color:var(--navy-d,#0f1f38)!important;
  box-shadow:0 2px 8px rgba(15,31,56,.06),inset 0 1px 0 #fff!important;transition:transform .18s,border-color .18s}
.btn-back:hover,.add-btn:hover,.remove-btn:hover,.smallbtn:hover,.addbtn:hover,.sc-btn:hover,.rate-btn:hover{
  transform:translateY(-1px);border-color:rgba(138,122,97,.8)!important}
.rate-btn.on,.sc-btn.on,.abo-btn.on{
  background:linear-gradient(145deg,var(--g1,#C8B694),var(--g3,#8a7a61))!important;color:#fff!important;
  border-color:rgba(255,255,255,.4)!important;
  box-shadow:0 6px 18px rgba(138,122,97,.32),inset 0 1px 0 rgba(255,255,255,.45)!important}
.asst-nav-btn{
  background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(250,248,244,.66))!important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(176,158,128,.45)!important;
  box-shadow:0 3px 12px rgba(15,31,56,.09),inset 0 1px 0 #fff!important;transition:transform .18s,border-color .2s}
.asst-nav-btn:hover{transform:translateY(-1px);border-color:rgba(138,122,97,.85)!important}
.asst-nav-next{
  background:linear-gradient(145deg,var(--g1,#C8B694),var(--g3,#8a7a61))!important;color:#fff!important;
  border-color:rgba(255,255,255,.4)!important;
  box-shadow:0 6px 18px rgba(138,122,97,.34),inset 0 1px 0 rgba(255,255,255,.45)!important}

@media(prefers-reduced-motion:reduce){
  .tab,.calc-cta,.rch-back,.ob-back,.card,.kw-card,.btn-next,.btn-back,.asst-nav-btn{transition:none!important}
}


/* ═══════════════════════════════════════════════════════════════════════
   TEIL 2 — Glas flächendeckend + Lesbarkeit          (18.08.2026)

   GRUNDSATZ DIESER DATEI:
   Die Button-Devise aus styles.css bleibt unangetastet.
       Privat  #leistungen (dunkel) → Gold,  Hover Weiss
       Firmen  #firmen     (sand)   → Weiss, Hover Blau
       B2B     #b2b        (weiss)  → Blau,  Hover Braun
   Diese drei Regeln und die Farben von .btn-cta, .tab.active, .ob-cta,
   .kw-btn, den Badges und .pw-mono werden hier NICHT verändert.

   Behoben werden nur echte Defekte:
     A) Knöpfe auf dunklen Flächen trugen dunkle Schrift (unlesbar).
     B) `.calc-cta` ist ein Container, wurde aber wie ein Knopf gestylt.
     C) Glas fehlte auf Karten, Panels, Unterseiten, Onboarding, Videos.
     D) Etliche Texte standen mit 25–60 % Deckung auf dunklem Grund.

   REGEL GEGEN DEN HÄUFIGSTEN FEHLER:
   Helles Milchglas darf NUR auf helle Flächen. Dunkle Inseln in hellen
   Sektionen (.rc, .ob-left, .pe-right, .pa-note) und Zeilen darin
   (.pe-item, .ob-check) bekommen niemals helles Glas. Am Ende steht
   dafür ein Sicherheitsnetz.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --glass-blur:   blur(16px) saturate(170%);
  --glass-blur-s: blur(11px) saturate(150%);

  /* Milchglas auf HELLEM Grund */
  --gl-card:    linear-gradient(150deg, rgba(255,255,255,.94), rgba(255,255,255,.72));
  --gl-card-bd: rgba(255,255,255,.92);
  --gl-card-sh: 0 4px 18px rgba(15,31,56,.08), inset 0 1px 0 rgba(255,255,255,.95);

  /* Milchglas auf DUNKLEM Grund */
  --gd-card:    linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.045));
  --gd-card-h:  linear-gradient(150deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
  --gd-card-bd: rgba(255,255,255,.20);
  --gd-card-sh: 0 10px 30px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.26);

  /* Navy-Glas für dunkle Inseln in hellen Sektionen */
  --nv-card:    linear-gradient(150deg, rgba(35,66,116,.97), rgba(15,31,56,.94));
  --nv-card-bd: rgba(255,255,255,.18);
  --nv-card-sh: 0 16px 44px rgba(15,31,56,.28), inset 0 1px 0 rgba(255,255,255,.22);
}

/* ═══ B) Der CTA-Balken im Finanzcockpit ══════════════════════════════
   `.calc-cta` ist die Zeile «Möchten Sie eine detaillierte Analyse…»
   samt Knopf — ein Container, kein Knopf. Teil 1 gab ihm den vollen
   Goldverlauf; dadurch klebte der Text direkt auf einem braunen Riegel.
   Jetzt: helle Glasfläche, der Knopf darin bleibt der reguläre Knopf. */
#tools .calc-cta{
  background:linear-gradient(150deg, rgba(255,255,255,.94), rgba(250,248,244,.76)) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border:1px solid rgba(176,158,128,.38) !important;
  border-radius:16px !important;
  box-shadow:0 6px 22px rgba(15,31,56,.09), inset 0 1px 0 #fff !important;
  padding:14px 16px !important; margin-top:14px;
  color:var(--navy-d,#0f1f38) !important; font-weight:400 !important;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
/* Text schrumpft mit, damit der Knopf wie bisher auf derselben Zeile
   bleibt — das Panel darf die Zeile nicht auseinanderreissen.        */
#tools .calc-cta p{ color:var(--navy-d,#0f1f38) !important; margin:0; flex:1 1 auto; min-width:0; }
#tools .calc-cta a{ flex:0 0 auto; }

/* ═══ C) Glas auf allen Flächen ═══════════════════════════════════════ */

/* Karten auf dunklen Sektionen → Milchglas statt flacher 4-%-Fläche */
#leistungen .svc, #team .tc, #team .finma-box,
#kontakt .member-bar, #kontakt .kt-form-wrap, .dark-bg .card{
  background: var(--gd-card) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border:1px solid var(--gd-card-bd) !important;
  box-shadow: var(--gd-card-sh) !important;
}
#leistungen .svc:hover, #team .tc:hover{
  background: var(--gd-card-h) !important;
  border-color:rgba(233,222,200,.46) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.34) !important;
}

/* Dunkle INSELN in hellen Sektionen → Navy-Glas mit Goldschimmer */
#tools .rc, #tools .ob-left, #tools .pe-right, #partner .pa-note,
#prozess .pt-img-illus, #prozess .article-teaser, #team .article-teaser{
  background: var(--nv-card) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border:1px solid var(--nv-card-bd) !important;
  box-shadow: var(--nv-card-sh) !important;
  position:relative; overflow:hidden;
}
#partner .pa-note{ border-left:5px solid var(--gold,#B09E80) !important; }
#tools .rc::after, #tools .ob-left::after, #tools .pe-right::after,
#partner .pa-note::after{
  content:""; position:absolute; top:-55%; right:-14%; width:340px; height:340px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(200,182,148,.20), transparent 70%);
}
#tools .rc > *, #tools .ob-left > *, #tools .pe-right > *,
#partner .pa-note > *{ position:relative; z-index:1; }

/* Karten auf hellen Sektionen → Milchglas */
#firmen .b2b-card, #b2b .b2b-card,
#reviews .rv-card, .ds-card, .imp-card, .rev-modal-box,
#tools .calc-inputs, #tools .ob-step, #tools .rch-card,
#tools .ob-launcher, #tools .ob-viewer, #tools .rch-viewer,
#angebot .tile, .kw-card, .kw-kurz, .kw-related a, .kw-search, .kw-cat:not(.active){
  background: var(--gl-card) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border:1px solid var(--gl-card-bd) !important;
  box-shadow: var(--gl-card-sh) !important;
}
#firmen .b2b-card:hover, #b2b .b2b-card:hover, .kw-card:hover,
#tools .ob-step:hover, #angebot .tile:hover{
  transform:translateY(-3px);
  border-color:rgba(194,175,140,.72) !important;
  box-shadow:0 16px 40px rgba(15,31,56,.14), inset 0 1px 0 #fff !important;
}
.kw-kurz{ border-left:3px solid var(--gold,#B09E80) !important; }
/* WICHTIG: `:not(.active)` — der aktive Reiter behält sein Navy aus
   styles.css. Ohne diese Einschränkung überschreibt das Glas ihn und
   die weisse Schrift stünde auf hellem Glas.                          */
#tools .tab:not(.active){
  background:linear-gradient(150deg, rgba(255,255,255,.92), rgba(250,248,244,.70)) !important;
  -webkit-backdrop-filter: var(--glass-blur-s); backdrop-filter: var(--glass-blur-s);
  border:1px solid rgba(194,175,140,.34) !important;
  box-shadow:0 2px 10px rgba(15,31,56,.06), inset 0 1px 0 #fff !important;
}
#tools .tab.active{
  border:1px solid rgba(255,255,255,.28) !important;
  box-shadow:0 8px 22px rgba(29,58,101,.28), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
#tools .ob-after{
  background:linear-gradient(150deg, rgba(255,255,255,.88), rgba(248,247,244,.66)) !important;
  -webkit-backdrop-filter: var(--glass-blur-s); backdrop-filter: var(--glass-blur-s);
  border:1px solid rgba(138,122,97,.34) !important;
  box-shadow:0 3px 14px rgba(15,31,56,.07), inset 0 1px 0 #fff !important;
}
#tools .rc-gap{
  background:linear-gradient(150deg, rgba(255,242,240,.90), rgba(255,248,246,.70)) !important;
  -webkit-backdrop-filter: var(--glass-blur-s); backdrop-filter: var(--glass-blur-s);
  border:1px solid rgba(163,46,34,.28) !important;
  box-shadow:0 4px 16px rgba(163,46,34,.09), inset 0 1px 0 #fff !important;
}

/* Pillen und Punkte im Onboarding (dunkles Panel) */
#tools .ob-pill{
  background:linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.07)) !important;
  -webkit-backdrop-filter: var(--glass-blur-s); backdrop-filter: var(--glass-blur-s);
  border:1px solid rgba(255,255,255,.30) !important; color:#EBDCC0 !important;
}
#tools .ob-dot{
  background:linear-gradient(145deg, rgba(220,203,168,.40), rgba(194,175,140,.18)) !important;
  border:1px solid rgba(220,203,168,.55) !important; color:#F4EAD6 !important;
}

/* KEIN Glas auf Textlabels.
   `.eyebrow` und `.svc-tag` sind Block-Elemente. Eine Glasfläche darauf
   wird zu einem Balken über die volle Spaltenbreite — genau das ist bei
   «UNSER ANSATZ» passiert. Labels behalten ihre Typografie, sie bekommen
   höchstens eine Farbkorrektur. Glas gehört auf Karten, Panels, Knöpfe
   und Eingabefelder — nicht auf Beschriftungen.                        */
#leistungen .acc-trigger{ border-bottom-color:rgba(255,255,255,.16) !important; }

/* Formularfelder auf dunklem Grund */
#kontakt .kt-field input, #kontakt .kt-field textarea, #kontakt .kt-field select{
  background:rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter: var(--glass-blur-s); backdrop-filter: var(--glass-blur-s);
  border:1px solid rgba(255,255,255,.26) !important; color:#fff !important;
}
#kontakt .kt-field input::placeholder, #kontakt .kt-field textarea::placeholder{
  color:rgba(255,255,255,.62) !important;
}

/* Navigationsleisten als Glas */
.nav, header.nav{
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
.kw-nav{
  background:linear-gradient(180deg, rgba(15,31,56,.97), rgba(15,31,56,.92)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.kw-hero{ position:relative; overflow:hidden; }
.kw-hero::before{
  content:""; position:absolute; top:-45%; right:-8%; width:520px; height:520px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(200,182,148,.20), transparent 68%);
}
.kw-hero-in{ position:relative; }
.kw-contact{
  background:linear-gradient(140deg, var(--navy,#1D3A65), var(--navy-d,#0f1f38)) !important;
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 40px rgba(15,31,56,.24), inset 0 1px 0 rgba(255,255,255,.16);
}
.kw-contact::before{
  content:""; position:absolute; top:-60%; right:-12%; width:380px; height:380px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(200,182,148,.22), transparent 70%);
}
.kw-contact > *{ position:relative; }

/* Chatbot */
.kb-bot-panel{
  background:linear-gradient(160deg, rgba(255,255,255,.96), rgba(248,247,244,.90)) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 28px 70px rgba(15,31,56,.34) !important;
}
.kb-bot-head{
  background:linear-gradient(140deg, var(--navy,#1D3A65), var(--navy-d,#0f1f38)) !important;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.kb-bot{
  background:linear-gradient(150deg, rgba(255,255,255,.95), rgba(255,255,255,.78)) !important;
  -webkit-backdrop-filter: var(--glass-blur-s); backdrop-filter: var(--glass-blur-s);
  border:1px solid rgba(255,255,255,.9) !important;
  box-shadow:0 2px 10px rgba(15,31,56,.07) !important;
}
.kb-bot-chips button, .kb-bot-input input{
  background:linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.70)) !important;
  -webkit-backdrop-filter: var(--glass-blur-s); backdrop-filter: var(--glass-blur-s);
  border:1px solid rgba(176,158,128,.40) !important;
}

/* Fragebogen / Personalien / Cockpit: echte Karten auf hellem Grund */
.q-card, .fb-card, .step-card, .sec-card, .form-card, .asst-card{
  background: var(--gl-card);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border:1px solid rgba(255,255,255,.90);
  box-shadow: var(--gl-card-sh);
}
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=date], select, textarea{
  background:linear-gradient(150deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
  -webkit-backdrop-filter: var(--glass-blur-s); backdrop-filter: var(--glass-blur-s);
}

/* ═══ D) Lesbarkeit: zu blasse Texte ══════════════════════════════════
   Viele Texte standen mit 25–60 % Deckung auf dunklem Grund.          */

#tools .rc-label, #tools .rc-sub,
#tools .ob-price-label, #tools .ob-body, #tools .ob-check-text, #tools .ob-note,
#tools .pe-right .pe-text,
#leistungen .acc-label, #leistungen .svc-benefit,
#prozess .pstep-desc, #prozess .pstep-incl,
#team .tc-bio, #team .tc-role, #team .tc-reg-text,
#kontakt .kt-ch-label, #kontakt .kt-form-note, #kontakt .kt-form-sub,
#kontakt .member-sub, #kontakt .rev-note,
#reviews .rv-score-meta, #reviews .rv-recommend-label,
.fb-t p, .kw-contact p{
  color:rgba(255,255,255,.92) !important;
}
#tools .ob-title, #tools .rc-value{ color:#fff !important; }
#tools .pe-right .pe-right-title, #tools .ob-price sup{ color:#E6D8BC !important; }
#tools .pe-right .pe-dot{ background:#DCCBA8 !important; opacity:1 !important; }
#tools .pe-right .pe-free{
  background:linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.06)) !important;
  -webkit-backdrop-filter: var(--glass-blur-s); backdrop-filter: var(--glass-blur-s);
  border:1px solid rgba(255,255,255,.28) !important; color:#F2E9D7 !important;
}

/* Gedämpftes Gold auf hellem Grund lag bei 3,9–4,1:1 → ein Ton dunkler */
#angebot .ang-head .eyebrow, #partner .eyebrow, #prozess .eyebrow,
#firmen .eyebrow.on-dark, #b2b .eyebrow.on-dark,
.pw-cat-h h3, .pw-note, .pb-a, .tile-eyebrow, .flow-h, .pt-meta,
.tag, .back a, .kw-sec h2, .kw-crumb a, .kw-article .kw-tag, .kw-card .kw-tag{
  color:#665A42 !important;
}
/* Auf dunklen Sektionen bleiben die Eyebrows hell */
:is(#hero, #leistungen, #team, #reviews, .dark-bg, .hero, .fb-band) .eyebrow,
:is(#hero, #leistungen, #team, #reviews, .dark-bg, .hero, .fb-band) .eyebrow span{
  color:#D8C9AC !important;
}

/* Signalfarben und Kleinstschrift auf hellem Grund */
#tools .gap-value, #tools .gap-label{ color:#A32E22 !important; }
#tools .rc .rc-value.warning{ color:#FF9E8A !important; }
#tools .calc-disc, .calc-disc, details.calc-legal summary{ color:#6B7280 !important; }
#tools .sg-mm span, #tools .calc-inputs .sg-mm span{ color:#5A6472 !important; }
#reviews .rv-card .rv-card-stars, #reviews .rv-card .rv-stars{ color:#6E5426 !important; }
#reviews .rv-author-role{ color:#4C5666 !important; }
.pb-stars{ color:#7A5F30 !important; }
#firmen .b2b-sub, #b2b .b2b-sub{ color:#3A3427 !important; }
#firmen .b2b-tag, #b2b .b2b-tag{ color:#4F4534 !important; border-color:rgba(79,69,52,.55) !important; }
.kw-article .disc, .disc{ color:#5F6B78 !important; }
.lb{ color:#4A5568 !important; }
.lb.active{ color:#665A42 !important; font-weight:700; }

/* Footer: liegt auf einem Foto mit hellem Schleier. Der Schleier wird zur
   Milchglasscheibe, damit dunkle Schrift unabhängig vom Bild trägt.    */
#kontakt .ft{
  background-image:
    linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.92)),
    url("../assets/asset-4d027785.jpg") !important;
  background-size:cover !important; background-position:center 68% !important;
  border-top:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
#kontakt .ft, #kontakt .ft p, #kontakt .ft span, #kontakt .ft div,
#kontakt .ft a{ color:#2B3A50 !important; }
#kontakt .ft a:hover{ color:#665A42 !important; }
#kontakt .ft-col-title{ color:#665A42 !important; }
#kontakt .ft-desc, #kontakt .ft-copy, #kontakt .ft-legal{ color:#3C4A5E !important; }
#kontakt .ft-logo{ color:#1B2A40 !important; }
#kontakt .ft-logo span:last-child{ color:#665A42 !important; }
#kontakt .ft-social a{
  background:linear-gradient(150deg, rgba(255,255,255,.90), rgba(255,255,255,.66)) !important;
  -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px);
  border:1px solid rgba(43,58,80,.22) !important; color:#2B3A50 !important;
  box-shadow:0 2px 8px rgba(15,31,56,.10), inset 0 1px 0 #fff !important;
}
#kontakt .ft-social a:hover{
  background:linear-gradient(150deg, var(--navy,#1D3A65), var(--navy-d,#0f1f38)) !important;
  border-color:rgba(255,255,255,.4) !important; color:#fff !important;
}

/* ═══ SICHERHEITSNETZ ═════════════════════════════════════════════════
   Nichts, was auf einer dunklen Fläche liegt, darf helles Milchglas
   bekommen. Das war der Fehler beim Panel «So läuft der Check».       */
:is(#leistungen, #ansatz, #prozess, #team, #kontakt, #reviews, .hero,
    .dark-bg, .fb-band, .rc, .ob-left, .pe-right, .pa-note, .kw-contact,
    .at-visual)
 :is(.q-card, .fb-card, .step-card, .sec-card, .form-card, .asst-card,
     .dl-inner, .panel, .pe-item, .ob-check, .pf, .rch-card, .tile){
  background:transparent !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:none !important;
}
#tools .pe-right .pe-item{
  border:0 !important; border-bottom:1px solid rgba(255,255,255,.14) !important;
}
#tools .pe-right .pe-item:last-of-type{ border-bottom:0 !important; }

/* ═══ Fallback ohne backdrop-filter ═══════════════════════════════════ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  #leistungen .svc, #team .tc{ background:rgba(255,255,255,.09) !important; }
  #firmen .b2b-card, #b2b .b2b-card, .kw-card, .kw-kurz, .kb-bot-panel,
  #tools .calc-inputs, #tools .ob-step, #tools .calc-cta{ background:#fff !important; }
  :is(#leistungen, #prozess, #team, #kontakt, .dark-bg)
   :is(.btn-gold, .btn-onwhite, .btn-outline, .btn-outline-d){
    background:#33445f !important; }
}

@media (prefers-reduced-motion: reduce){
  #leistungen .svc, #team .tc, .kw-card, #firmen .b2b-card,
  #tools .ob-step, #angebot .tile{ transition:none !important; }
}


/* ═══ Die einzige Farbentscheidung, die ich getroffen habe ════════════
   `.btn-cta` («Erstgespräch») ist Gold mit weisser Schrift — das ergibt
   rund 2,6:1 und ist zu wenig. Der Goldton BLEIBT unverändert; lesbar
   wird der Knopf über dunkelblaue Schrift. Das ist keine neue Erfindung,
   sondern genau die Kombination, die `#leistungen .dl-more` schon immer
   verwendet: Gold mit `var(--navy-d)`. Ergibt rund 8:1.

   Falls dir Weiss lieber ist: diesen Block löschen, dann ist alles wie
   vorher.                                                              */
.btn-cta, .nav-cta{ color:var(--navy-d,#0f1f38) !important; text-shadow:none !important; }
.btn-cta span, .btn-cta strong, .nav-cta span{ color:var(--navy-d,#0f1f38) !important; }
.btn-cta svg, .nav-cta svg{ stroke:var(--navy-d,#0f1f38); }
.btn-cta::before{
  background:linear-gradient(165deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 40%, rgba(255,255,255,0) 64%) !important; }
.btn-cta:hover, .nav-cta:hover{ color:var(--navy-d,#0f1f38) !important; }

/* ═══ Nachmessung: letzte Fundstellen ═════════════════════════════════ */

/* `.tab.active` — eure styles.css sagt `background:var(--navy); color:#fff`.
   Teil 1 hatte das auf einen Goldverlauf umgebogen; weisse Schrift darauf
   ergab 2,0:1. Hier wird EUER Wert wiederhergestellt, nichts Neues.    */
#tools .tab.active, .tab.active{
  background:linear-gradient(180deg, var(--navy,#1D3A65), var(--navy-d,#0f1f38)) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.26) !important;
  box-shadow:0 8px 22px rgba(29,58,101,.30), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
#tools .tab.active .tab-price{ color:#E6D8BC !important; opacity:1 !important; }

/* Eyebrow im dunklen #ansatz mitaufnehmen */
#ansatz .eyebrow, #ansatz .eyebrow span{ color:#D8C9AC !important; }

/* Trenner «— oder —» im dunklen Kontaktformular */
#kontakt .kt-form-wrap > div, #kontakt .kt-form-wrap > div > span{
  color:rgba(255,255,255,.88) !important;
}

/* Gold auf hellen Flächen, das noch zu blass war */
#prozess .pt-label, #prozess .pt-label span{ color:#665A42 !important; }
.rel a{ color:#665A42 !important; }
#leistungen .num, .num{ color:#665A42 !important; }

/* Auf dem SANDBAND braucht es deutlich mehr Tiefe als auf Weiss */
#firmen .flow-h, #firmen .flow-doc, #firmen .flow-num, #firmen .flow-step p,
#firmen .b2b-sub, #firmen .b2b-tag,
#b2b .b2b-sub, #b2b .b2b-tag,
#firmen .b2b-tags span, #b2b .b2b-tags span{
  color:#2A2317 !important;
}
#firmen .b2b-tag, #b2b .b2b-tag, #firmen .b2b-tags span, #b2b .b2b-tags span{
  border-color:rgba(42,35,23,.45) !important;
}

/* Formularbeschriftungen im dunklen Kontaktbereich */
#kontakt label, #kontakt .kt-field label{ color:rgba(255,255,255,.93) !important; }

/* Bewertungskarten etwas dichter, damit die Grautöne darauf tragen */
#reviews .rv-card{
  background:linear-gradient(150deg, rgba(255,255,255,.985), rgba(255,255,255,.94)) !important;
}

/* Restliche gedämpfte Weisstöne auf Navy */
#team .tc-reg-text, .ht-s, #reviews .rv-recommend-label, #reviews .rv-score-meta,
#kontakt .ht-s{ color:rgba(255,255,255,.93) !important; }

/* Restliches Gold auf weissem Grund */
#tools .eyebrow, #tools .eyebrow span, #tools .sg-unit,
.at-pill, .at-pill span, #angebot .eyebrow, #angebot .eyebrow span{
  color:#665A42 !important;
}

/* ═══ Wichtige Grundregel, zweimal schmerzhaft gelernt ════════════════
   Aktive/ausgewählte Zustände (.active, .on) tragen ihre eigene Farbe
   aus styles.css bzw. wiki.css. Das Glas darf sie nicht überschreiben,
   sonst steht weisse Schrift auf hellem Glas.                         */
.kw-cat.active{
  background:linear-gradient(180deg, var(--navy,#1D3A65), var(--navy-d,#0f1f38)) !important;
  color:#fff !important; border-color:rgba(255,255,255,.28) !important;
  box-shadow:0 8px 22px rgba(29,58,101,.28), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

/* Die Navigationsleiste der Wissens-Seiten ist DUNKEL — helle Schrift */
.kw-nav .kw-links a, .kw-nav .kw-links a span{ color:rgba(255,255,255,.90) !important; }
.kw-nav .kw-links a:hover, .kw-nav .kw-links a.active,
.kw-nav .kw-links a.active span{ color:#EBDCC0 !important; }
.kw-nav .kw-logo{ color:#fff !important; }
.kw-nav .kw-logo span:last-child{ color:#EBDCC0 !important; }
.kw-foot, .kw-foot a{ color:rgba(255,255,255,.86) !important; }
.kw-foot a:hover{ color:#EBDCC0 !important; }
.kw-back, .kw-nav .kw-back{ color:#EBDCC0 !important; }


/* ═══ Gold als TEXTFARBE auf hellen Flächen ═══════════════════════════
   `var(--gold-d)` = #8a7a61 ergibt auf Weiss 4,06:1 und auf dem Sandband
   nur 3,5:1 — beides unter der Schwelle. Die folgenden Stellen benutzen
   Gold als Schriftfarbe (nicht als Fläche) und werden deshalb einen Ton
   tiefer gestellt. Gold als HINTERGRUND bleibt überall unverändert.   */

/* auf weissen/hellen Flächen → #665A42 (rund 6:1) */
#angebot .ang-head .eyebrow, #angebot .tile-eyebrow, #angebot .tile-link,
#angebot .tile:hover .tile-link, #angebot .h-sec em,
#partner .eyebrow, #partner .h-sec em, #partner a.pa-logo-name,
#prozess .eyebrow, #prozess .h-sec em, #prozess .pstep-num, #prozess .pt-meta,
#prozess .pt-label, #prozess .pstep-tag, #prozess .at-pill,
#tools .ob-newtab, #tools .rch-newtab, #tools .rch-open, #tools .rch-more a,
#tools .pe-left h3 em, #tools .sg-unit, #tools .rch-theme-head,
#team .at-pill, #team .at-title em,
.more, .tile-link, .vw-open, .vw-more,
.kw-card .kw-tag, .kw-card.stub .kw-soon, .kw-crumb a, .kw-article .kw-tag,
.kw-sec h2, .kw-post .kw-meta, .kb-link, .kw-related a,
.kw-wrap .tag, .wk .tag, .back a, .disc a{
  color:#665A42 !important;
}

/* auf dem SANDBAND braucht es mehr Tiefe → #2A2317 (rund 6:1 auf Sand) */
#firmen .eyebrow.on-dark, #firmen .h-sec.on-dark em, #firmen .firmen-cap,
#firmen .b2b-sub, #firmen .b2b-tag, #firmen .b2b-num,
#firmen .flow-h, #firmen .flow-doc, #firmen .flow-num,
#b2b .eyebrow.on-dark, #b2b .h-sec.on-dark em,
#b2b .b2b-sub, #b2b .b2b-tag, #b2b .b2b-num{
  color:#2A2317 !important;
}

/* Bleibt hell: diese Gold-Texte stehen auf DUNKLEM Grund */
#reviews .rv-score-box .rv-recommend, #reviews .rv-score-box .rv-recommend-label,
#reviews .rv-score-box .rv-score-n,
#leistungen .svc-tag, #leistungen .svc-link,
#ansatz .num-eyebrow, #ansatz .card-pill{
  color:#E0D0AE !important;
}

/* ═══ Seiten mit eigenem Stylesheet ═══════════════════════════════════

   `fehljahr-check.html`, `videos.html`, `faq.html` und `finanzkompass.html`
   bringen eigene Styles mit und benutzen darin `var(--gold-d)` als
   Schriftfarbe. Statt jede Klasse einzeln nachzuziehen, wird der Wert
   innerhalb dieser hellen Inhaltsbereiche gesetzt. Dort gibt es keine
   Gold-FLÄCHEN, also ändert das ausschliesslich Schriftfarben.        */
.vw-wrap, .faq-wrap, .kw-wrap, .stp, .wz-index,
section.section, .fjc-wrap{
  --gold-d:#665A42;
}

/* `.hero` gibt es nur auf fehljahr-check.html — und dort ist sie HELL
   (`linear-gradient(165deg, var(--bg), #EFEAE0)`). Teil 1 behandelt
   `.hero` aber als dunkel und setzt weisse Schrift. Auf dieser Seite
   also zurück auf dunkle Schrift.
   Die dunkle Startseiten-Hero heisst `#hero` und ist nicht betroffen. */
header.hero .hero-quiet{ color:var(--navy-d,#0f1f38) !important; border-bottom-color:rgba(15,31,56,.35) !important; }

/* Die Pille `.tag` auf fehljahr-check hat einen NAVY-Hintergrund —
   dort bleibt die Schrift hell.                                       */
header.hero .tag, header.hero .tag span{ color:var(--gold-l,#cfc0a6) !important; }

/* Letzte zwei Fundstellen aus der Messung */

/* `--txt-l` (#718096) wird ausschliesslich als Schriftfarbe verwendet
   (nirgends als Fläche) und lag auf Weiss bei 3,9:1. Ein Ton tiefer.  */
:root{ --txt-l:#5F6B78 !important; }

/* Personalien-Formular: Abschnittstitel in Gold auf weissem Grund */
.wrap, .card, .sec{ --gold-d:#665A42; }

/* ═══ Abschluss der Messreihe ═════════════════════════════════════════ */

/* Reiter-Zusatzzeile: nur der AKTIVE Reiter ist dunkel, die übrigen hell */
#tools .tab:not(.active) .tab-price{ color:#5A6472 !important; opacity:1 !important; }


/* KEINE Farbregel für .hero-trust.
   Ich hatte sie versehentlich dunkelbraun gesetzt (eine Fehlmessung liess
   den Hero-Hintergrund sandfarben erscheinen). `#hero` ist aber DUNKELBLAU
   — dadurch war die ganze linke Hero-Spalte unsichtbar: FINMA-Zeile,
   Ausbildung, Bewertungen und die Beschriftung der Knöpfe.
   Die Originalfarben aus styles.css sind hier richtig.                  */

/* Gold auf dunklem Grund etwas heller (lag bei 4,3:1) */
.fb-urg, .fb-band .fb-urg{ color:#E4D6B4 !important; }

/* Verbliebene gedämpfte Weisstöne auf Navy */
#firmen .qa-role, .qa-role, #kontakt .qa-role,
#prozess .proz-cta-text, #prozess .proz-cta-text strong{
  color:rgba(255,255,255,.95) !important;
}

/* Fragebogen und Assistent: Gold- und Grautöne auf hellem Grund */
.step-badge, .asst-name, .asst-role, .q-hint, .fb-hint{ color:#665A42 !important; }
.fb-sub, .q-sub, .asst-sub, .guest-note{ color:#5F6B78 !important; }

/* Eyebrow-Reste, die noch golden auf Weiss standen */
#faq .eyebrow, #faq .eyebrow span, .faq-head .eyebrow, .faq-head .eyebrow span,
.sec-eyebrow, .sec-eyebrow span{ color:#665A42 !important; }

/* Sterne auf den hellen Bewertungskarten einen Hauch tiefer */
#reviews .rv-card .rv-card-stars, #reviews .rv-card .rv-stars{ color:#63491F !important; }

/* Seiten, die `--txt-l` lokal neu setzen, ziehen die Definition aus
   :root nicht — deshalb hier zusätzlich auf den Seitenwurzeln.       */
body, .wrap, .fjc-wrap, .stp, .q-wrap, .fb-wrap, main{ --txt-l:#5F6B78 !important; }
p.guest-note, .guest-note, .fb-guest, .q-guest{ color:#5F6B78 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   BUTTON-DEVISE — ein System für die ganze Seite

     Untergrund          Knopf                    Hover
     ─────────────────────────────────────────────────────────────
     Dunkelblau          braunes Glas, weiss      weiss, blaue Schrift
     Braun / Sand        weiss, blaue Schrift     blau, weisse Schrift
     Weiss               blau, weisse Schrift     braun, blaue Schrift
     Helleres Blau       blaues Glas bleibt       —

   Die Reihenfolge unten ist bewusst: erst die grossen Flächen, dann die
   hellen INSELN darin (weisse Karten in blauen Sektionen), zuletzt die
   blauen Inseln in hellen Karten. Später = gewinnt bei gleicher Stärke.

   `.dl-more` aus styles.css folgt derselben Devise und bleibt unberührt.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Braunes Glas — über Navy so gewählt, dass es wirklich braun wirkt
     und Weiss darauf bei rund 5,1:1 liegt.                            */
  /* Bewusst weitgehend deckend: `backdrop-filter` rendert je nach Browser
     unterschiedlich stark. Ein durchscheinendes Braun kann dadurch grau
     ausbleichen — dann steht Weiss auf Hellgrau. So bleibt der Knopf
     immer braun, die Glaswirkung kommt aus Verlauf, Kante und Innenglanz.
     Weiss darauf liegt zwischen 4,8:1 und 6,9:1.                       */
  --bt-brown:    linear-gradient(150deg, rgba(128,104,64,.96), rgba(98,80,50,.96));
  --bt-brown-bd: rgba(233,215,178,.62);
  --bt-brown-sh: 0 6px 20px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.42);
  /* Weiss */
  --bt-white:    linear-gradient(180deg,#ffffff 0%,#f2eee6 100%);
  --bt-white-sh: inset 0 1px 0 rgba(255,255,255,.85), 0 6px 16px rgba(15,31,56,.20);
  /* Blau */
  --bt-blue:     linear-gradient(180deg, var(--navy,#1D3A65) 0%, var(--navy-d,#0f1f38) 100%);
  --bt-blue-sh:  inset 0 1px 0 rgba(255,255,255,.14), 0 6px 16px rgba(29,58,101,.28);
  /* Sattes Braun für den Hover auf hellem Grund (wie #b2b .dl-more:hover) */
  /* Heller als das reine Marken-Gold, damit die dunkelblaue Schrift auch
     am dunklen Ende des Verlaufs trägt (sonst nur 3,9:1).             */
  --bt-gold:     linear-gradient(180deg, #E2D6BD 0%, #CFC0A6 52%, #B09E80 100%);
  --bt-gold-sh:  inset 0 1px 0 rgba(255,255,255,.5), 0 10px 24px rgba(29,58,101,.26);
}

/* ── 1) AUF DUNKELBLAU → braunes Glas, Hover weiss ─────────────────── */
:is(#hero, #ansatz, #leistungen, #prozess, #team, #kontakt, #reviews,
    .dark-bg, .fb-band, .kw-hero, .kw-contact, .at-visual,
    .rc, .ob-left, .pe-right, .pa-note, .member-bar, .cta-box)
 :is(.btn-gold, .btn-onwhite, .btn-onbrown, .btn-outline, .btn-outline-d,
     .btn-navy, .kw-btn, .fb-btn, .rev-send, .kt-submit, .ld-btn){
  background: var(--bt-brown) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color:#fff !important;
  border:1px solid var(--bt-brown-bd) !important;
  box-shadow: var(--bt-brown-sh) !important;
  text-shadow:none !important;
  transition:background .22s, color .22s, border-color .22s, box-shadow .22s, transform .22s;
}
:is(#hero, #ansatz, #leistungen, #prozess, #team, #kontakt, #reviews,
    .dark-bg, .fb-band, .kw-hero, .kw-contact, .at-visual,
    .rc, .ob-left, .pe-right, .pa-note, .member-bar, .cta-box)
 :is(.btn-gold, .btn-onwhite, .btn-onbrown, .btn-outline, .btn-outline-d,
     .btn-navy, .kw-btn, .fb-btn, .rev-send, .kt-submit, .ld-btn)
 :is(span, strong, em){ color:#fff !important; }

:is(#hero, #ansatz, #leistungen, #prozess, #team, #kontakt, #reviews,
    .dark-bg, .fb-band, .kw-hero, .kw-contact, .at-visual,
    .rc, .ob-left, .pe-right, .pa-note, .member-bar, .cta-box)
 :is(.btn-gold, .btn-onwhite, .btn-onbrown, .btn-outline, .btn-outline-d,
     .btn-navy, .kw-btn, .fb-btn, .rev-send, .kt-submit, .ld-btn):hover{
  background: var(--bt-white) !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  color: var(--navy-d,#0f1f38) !important;
  border-color:transparent !important;
  box-shadow: var(--bt-white-sh) !important;
  transform:translateY(-2px);
}
:is(#hero, #ansatz, #leistungen, #prozess, #team, #kontakt, #reviews,
    .dark-bg, .fb-band, .kw-hero, .kw-contact, .at-visual,
    .rc, .ob-left, .pe-right, .pa-note, .member-bar, .cta-box)
 :is(.btn-gold, .btn-onwhite, .btn-onbrown, .btn-outline, .btn-outline-d,
     .btn-navy, .kw-btn, .fb-btn, .rev-send, .kt-submit, .ld-btn):hover
 :is(span, strong, em){ color: var(--navy-d,#0f1f38) !important; }

/* ── 2) AUF SAND (#firmen) → weiss, Hover blau ─────────────────────── */
:is(#firmen)
 :is(.btn-gold, .btn-onwhite, .btn-onbrown, .btn-outline, .btn-outline-d,
     .btn-navy, .kw-btn, .fb-btn){
  background: var(--bt-white) !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  color: var(--navy-d,#0f1f38) !important;
  border:1px solid rgba(255,255,255,.9) !important;
  box-shadow: var(--bt-white-sh) !important;
  text-shadow:none !important;
}
:is(#firmen)
 :is(.btn-gold, .btn-onwhite, .btn-onbrown, .btn-outline, .btn-outline-d,
     .btn-navy, .kw-btn, .fb-btn) :is(span, strong, em){
  color: var(--navy-d,#0f1f38) !important; }
:is(#firmen)
 :is(.btn-gold, .btn-onwhite, .btn-onbrown, .btn-outline, .btn-outline-d,
     .btn-navy, .kw-btn, .fb-btn):hover{
  background: var(--bt-blue) !important;
  color:#fff !important; border-color:transparent !important;
  box-shadow: var(--bt-blue-sh) !important; transform:translateY(-2px);
}
:is(#firmen)
 :is(.btn-gold, .btn-onwhite, .btn-onbrown, .btn-outline, .btn-outline-d,
     .btn-navy, .kw-btn, .fb-btn):hover :is(span, strong, em){
  color:#fff !important; }

/* ── 3) AUF WEISS → blau, Hover braun ──────────────────────────────────
   Gilt auch für die WEISSEN INSELN innerhalb blauer Sektionen
   (`.at-content`, `.rv-card`, Overlays) — deshalb steht dieser Block
   NACH Block 1.                                                        */
:is(#angebot, #tools, #partner, #b2b, .kw-wrap, .vw-wrap, .faq-wrap, .stp,
    header.hero, .at-content, .rv-card, .ds-card, .imp-card, .rev-modal-box,
    .kb-bot-panel, .calc-cta, .ob-step, .calc-inputs, .card, .wrap)
 :is(.btn-gold, .btn-onwhite, .btn-onbrown, .btn-outline, .btn-outline-d,
     .btn-navy, .kw-btn, .fb-btn, .rev-send, .ld-btn){
  background: var(--bt-blue) !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow: var(--bt-blue-sh) !important;
  text-shadow:none !important;
  transition:background .22s, color .22s, border-color .22s, box-shadow .22s, transform .22s;
}
:is(#angebot, #tools, #partner, #b2b, .kw-wrap, .vw-wrap, .faq-wrap, .stp,
    header.hero, .at-content, .rv-card, .ds-card, .imp-card, .rev-modal-box,
    .kb-bot-panel, .calc-cta, .ob-step, .calc-inputs, .card, .wrap)
 :is(.btn-gold, .btn-onwhite, .btn-onbrown, .btn-outline, .btn-outline-d,
     .btn-navy, .kw-btn, .fb-btn, .rev-send, .ld-btn) :is(span, strong, em){
  color:#fff !important; }
:is(#angebot, #tools, #partner, #b2b, .kw-wrap, .vw-wrap, .faq-wrap, .stp,
    header.hero, .at-content, .rv-card, .ds-card, .imp-card, .rev-modal-box,
    .kb-bot-panel, .calc-cta, .ob-step, .calc-inputs, .card, .wrap)
 :is(.btn-gold, .btn-onwhite, .btn-onbrown, .btn-outline, .btn-outline-d,
     .btn-navy, .kw-btn, .fb-btn, .rev-send, .ld-btn):hover{
  background: var(--bt-gold) !important;
  color: var(--navy-d,#0f1f38) !important;
  border-color:transparent !important;
  box-shadow: var(--bt-gold-sh) !important; transform:translateY(-2px);
}
:is(#angebot, #tools, #partner, #b2b, .kw-wrap, .vw-wrap, .faq-wrap, .stp,
    header.hero, .at-content, .rv-card, .ds-card, .imp-card, .rev-modal-box,
    .kb-bot-panel, .calc-cta, .ob-step, .calc-inputs, .card, .wrap)
 :is(.btn-gold, .btn-onwhite, .btn-onbrown, .btn-outline, .btn-outline-d,
     .btn-navy, .kw-btn, .fb-btn, .rev-send, .ld-btn):hover
 :is(span, strong, em){ color: var(--navy-d,#0f1f38) !important; }

/* ── 4) BLAUE INSELN in hellen Karten → wieder braunes Glas ────────────
   Die Bewertungs-Karte «Ihre Erfahrung mit uns?» bekommt dasselbe Blau
   wie das Panel beim Fehljahr-Check; der Knopf darauf wird braunes Glas.
   Steht nach Block 3, damit es die Weiss-Regel überstimmt.             */
#reviews .rv-card.featured{
  background: var(--nv-card) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border:1px solid var(--nv-card-bd) !important;
  box-shadow: var(--nv-card-sh) !important;
  position:relative; overflow:hidden;
}
#reviews .rv-card.featured::after{
  content:""; position:absolute; top:-55%; right:-14%; width:320px; height:320px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(200,182,148,.20), transparent 70%);
}
#reviews .rv-card.featured > *{ position:relative; z-index:1; }
#reviews .rv-card.featured,
#reviews .rv-card.featured p,
#reviews .rv-card.featured div,
#reviews .rv-card.featured .rv-quote,
#reviews .rv-card.featured .rv-note{ color:rgba(255,255,255,.94) !important; }
#reviews .rv-card.featured .rv-modal-title,
#reviews .rv-card.featured .rv-author-name{ color:#fff !important; }
#reviews .rv-card.featured .rv-avatar{
  background:linear-gradient(145deg,#23425c,#16243A) !important; color:#E6D8BC !important; }

#reviews .rv-card.featured :is(.btn-gold,.btn-onwhite,.btn-onbrown,.rev-send,.btn){
  background: var(--bt-brown) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color:#fff !important;
  border:1px solid var(--bt-brown-bd) !important;
  box-shadow: var(--bt-brown-sh) !important;
}
#reviews .rv-card.featured :is(.btn-gold,.btn-onwhite,.btn-onbrown,.rev-send,.btn)
 :is(span,strong,em){ color:#fff !important; }
#reviews .rv-card.featured :is(.btn-gold,.btn-onwhite,.btn-onbrown,.rev-send,.btn):hover{
  background: var(--bt-white) !important;
  color: var(--navy-d,#0f1f38) !important; border-color:transparent !important;
  box-shadow: var(--bt-white-sh) !important; transform:translateY(-2px);
}
#reviews .rv-card.featured :is(.btn-gold,.btn-onwhite,.btn-onbrown,.rev-send,.btn):hover
 :is(span,strong,em){ color: var(--navy-d,#0f1f38) !important; }

/* ═══ FINMA-Angaben und Fach-Pillen deutlich sichtbar ════════════════ */
#team .finma-text, #team .finma-text strong{ color:rgba(255,255,255,.94) !important; }
#team .finma-word{ color:#fff !important; }
#team .finma-box{ border-color:rgba(233,215,178,.45) !important; }
#team .tc-tag, #team .tc-tags span{
  color:#F0E4CB !important;
  border-color:rgba(233,215,178,.55) !important;
  background:rgba(255,255,255,.10) !important;
}
#team .tc-reg, #team .tc-reg-text, #team .tc-reg-dot ~ *{
  color:rgba(255,255,255,.94) !important; }
#team .tc-role{ color:#E6D8BC !important; }

/* ═══ Fragebogen: durchgehend Glas ═══════════════════════════════════
   Die Seite bringt eigene Klassen mit (.card, .info-box, .res-card,
   .chip, .mode-tab, .asst-*). Sie war bisher komplett flach.         */
.card{
  background:linear-gradient(150deg, rgba(255,255,255,.96), rgba(255,255,255,.80)) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border:1px solid rgba(255,255,255,.92) !important;
  box-shadow:0 8px 30px rgba(15,31,56,.10), inset 0 1px 0 #fff !important;
}
.info-box, .res-card{
  background:linear-gradient(150deg, rgba(255,255,255,.88), rgba(248,247,244,.66)) !important;
  -webkit-backdrop-filter: var(--glass-blur-s); backdrop-filter: var(--glass-blur-s);
  border:1px solid rgba(176,158,128,.30) !important;
  box-shadow:0 2px 10px rgba(15,31,56,.06), inset 0 1px 0 #fff !important;
}
.chip{
  background:linear-gradient(150deg, rgba(255,255,255,.94), rgba(255,255,255,.74)) !important;
  -webkit-backdrop-filter: var(--glass-blur-s); backdrop-filter: var(--glass-blur-s);
  border:1px solid rgba(176,158,128,.34) !important;
  box-shadow:0 1px 6px rgba(15,31,56,.05), inset 0 1px 0 #fff !important;
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.chip:hover{ transform:translateY(-1px); border-color:rgba(138,122,97,.75) !important; }
.chip.sel{
  background: var(--bt-blue) !important; color:#fff !important;
  border-color:rgba(255,255,255,.22) !important;
  box-shadow: var(--bt-blue-sh) !important;
}
.mode-tabs{
  -webkit-backdrop-filter: var(--glass-blur-s); backdrop-filter: var(--glass-blur-s);
  border-color:rgba(176,158,128,.34) !important;
  box-shadow:0 2px 10px rgba(15,31,56,.06) !important;
}
.mode-tab:not(.active){
  background:linear-gradient(150deg, rgba(255,255,255,.92), rgba(250,248,244,.70)) !important;
}
.mode-tab.active{
  background: var(--bt-blue) !important; color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.asst-nav-btn{
  background:linear-gradient(150deg, rgba(255,255,255,.94), rgba(250,248,244,.72)) !important;
  -webkit-backdrop-filter: var(--glass-blur-s); backdrop-filter: var(--glass-blur-s);
  border:1px solid rgba(176,158,128,.40) !important;
  box-shadow:0 2px 10px rgba(15,31,56,.07), inset 0 1px 0 #fff !important;
}
.asst-nav-btn:hover{ border-color:rgba(138,122,97,.85) !important; transform:translateY(-1px); }
.asst-nav-next{
  background: var(--bt-blue) !important; color:#fff !important;
  border-color:rgba(255,255,255,.20) !important;
  box-shadow: var(--bt-blue-sh) !important;
}
.step-pane .sub-sec, .sec-label{ border-color:rgba(176,158,128,.32) !important; }

/* ═══ Kollisionen mit gleichnamigen Klassen auflösen ══════════════════
   `.card` gibt es sowohl im Fragebogen (heller Grund) als auch in
   `#ansatz` (dunkler Grund). Die Glasregel oben ist hell — hier wird
   die dunkle Variante für die dunklen Sektionen zurückgeholt.        */
:is(#ansatz, #leistungen, #team, #kontakt, #prozess, #reviews,
    .dark-bg, .hero, .fb-band) .card{
  background: var(--gd-card) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border:1px solid var(--gd-card-bd) !important;
  box-shadow: var(--gd-card-sh) !important;
}
:is(#ansatz, .dark-bg) :is(.card-title, .card-body, .check-text, .card-note){
  color:rgba(255,255,255,.94) !important; }
:is(#ansatz, .dark-bg) :is(.card-pill, .card-title em, .h-sec em){
  color:#E0D0AE !important; }

/* Der Warnwert steht je nach Rechner auf Navy ODER auf Weiss.
   Dieser Rotton trägt auf beiden (3,8:1 bzw. 4,3:1 bei grosser Schrift). */
.rc-value.warning, #tools .rc .rc-value.warning{ color:#D2502F !important; }

/* Reiter-Preiszeile: nur der aktive Reiter ist dunkel.
   Steht bewusst zuletzt, damit es die frühere Regel überstimmt.       */
#tools .tab:not(.active) .tab-price,
#tools .tab:not(.active) .tab-price span{ color:#5A6472 !important; opacity:1 !important; }
#tools .tab.active .tab-price,
#tools .tab.active .tab-price span{ color:#E6D8BC !important; opacity:1 !important; }

/* Bewertungskarten fast deckend — sonst schlägt das Navy durch und die
   Grautöne darauf verlieren Kontrast. Die «featured»-Karte bleibt blau. */
#reviews .rv-card:not(.featured){
  background:linear-gradient(150deg, rgba(255,255,255,.99), rgba(255,255,255,.96)) !important;
}
#reviews .rv-card:not(.featured) .rv-author-role{ color:#48525F !important; }
#reviews .rv-card:not(.featured) :is(.rv-card-stars,.rv-stars){ color:#5A4218 !important; }

/* Warnwert: trägt sowohl auf Navy (5,4:1) als auch auf Weiss (3,0:1
   bei grosser Schrift). */
.rc-value.warning, #tools .rc .rc-value.warning{ color:#E8734F !important; }