/* Bandscheibe.com DS v3b — tokens.css + bs-komponenten.css (Handoff 13.07.2026) + Leistungsseiten-Ergaenzungen. Generiert, Quelle: 20_Design\_handoff_entpackt\...Unterseiten-Behandlung_20260713 */
/* ============================================================
   Bandscheibe.com — Design-Tokens „Variante B" (dunkel)
   Quelle: Onepager-Entwurf kunden/bandscheibe/bandscheibe_com/
   (Stand 05.07.2026). Werte 1:1 aus dem Entwurf übernommen.
   ============================================================ */
:root{
  /* ---- Flächen ---- */
  --bs-nacht:#19222B;            /* Seitengrund */
  --bs-karte:#25313C;            /* Karten/Panels */
  --bs-karte2:#1f2a33;           /* Foto-Hintergrund, zweite Kartenebene */

  /* ---- Akzente ---- */
  --bs-gold:#C9A45C;             /* Primär-Akzent: CTAs, Eyebrows, Icons */
  --bs-gold-tief:#a8853f;        /* Verlaufsende Gold-Karte */
  --bs-salbei:#8FB0A8;           /* Sekundär-Akzent: Rollen, Micro-Labels */
  --bs-salbei-flaeche:#4A6A63;   /* Verlaufsstart Feature-Karte (16.07.: abgedunkelt, Creme-Text ≥4,5:1) */
  --bs-salbei-tief:#3f5e58;      /* Verlaufsende Feature-Karte */

  /* ---- Text (Creme-Stufen) ---- */
  --bs-creme:#ECE7DC;
  --bs-text-85:rgba(236,231,220,.85);
  --bs-text-78:rgba(236,231,220,.78);
  --bs-text-70:rgba(236,231,220,.7);
  --bs-text-65:rgba(236,231,220,.65);
  --bs-text-50:rgba(236,231,220,.62);   /* 16.07.: .5→.62 — 4,5:1 auch auf Karten (WCAG 1.4.3) */

  /* ---- Linien / Ränder ---- */
  --bs-linie-08:rgba(236,231,220,.08);
  --bs-linie-12:rgba(236,231,220,.12);
  --bs-linie-18:rgba(236,231,220,.18);
  --bs-linie-20:rgba(236,231,220,.2);
  --bs-linie-35:rgba(236,231,220,.35);
  --bs-linie-40:rgba(236,231,220,.4);
  --bs-goldlinie-40:rgba(201,164,92,.4);
  --bs-goldlinie-50:rgba(201,164,92,.5);
  --bs-goldrand-hell:rgba(255,244,216,.75);
  --bs-salbeilinie-40:rgba(143,176,168,.4);
  --bs-salbeilinie-50:rgba(143,176,168,.5);

  /* ---- Effekte ---- */
  --bs-glow:0 0 0 1px rgba(201,164,92,.5),0 0 20px rgba(201,164,92,.4);
  --bs-schatten-karte:0 30px 70px -35px rgba(0,0,0,.7);
  --bs-schatten-panel:0 26px 70px -24px rgba(0,0,0,.78);

  /* ---- Radien ---- */
  --bs-pill:100px;
  --bs-r-karte:clamp(18px,2vw,26px);          /* @kind radius */
  --bs-r-schwerpunkt:clamp(16px,1.8vw,24px);  /* @kind radius */
  --bs-r-panel:clamp(20px,2.5vw,34px);        /* @kind radius */
  --bs-r-input:12px;
  --bs-r-blase:16px;

  /* ---- Schrift ---- */
  --bs-font-display:'Bricolage Grotesque',sans-serif;   /* 400–800, Headlines 700/800 UPPERCASE */
  --bs-font-text:'Archivo',system-ui,sans-serif;        /* 400–700, Fließtext/UI */
  /* Erweiterte Familien (Website-Entwürfe v3 A/B/C) — nur für Sonderformate,
     immer lokal aus fonts/ geladen, nie per CDN: */
  /* 16.07.: ungenutzte Font-Tokens (Cormorant/Instrument/Hanken/Jost/Sacramento) entfernt —
     zugehörige woff2 in Quarantäne, fonts.css auf die 2 genutzten Familien gekürzt */

  /* ---- Layout ---- */
  --bs-maxw:1400px;
  --bs-pad-x:clamp(20px,5vw,72px);
  --bs-pad-section:clamp(60px,9vw,140px);
  --bs-ease:cubic-bezier(.2,.8,.2,1); /* @kind other */
}

/* ============================================================
   Bandscheibe.com — Komponenten-Stylesheet „Variante B" (dunkel)
   Destilliert aus dem Onepager-Entwurf (Inline-Stile → Klassen);
   alle Werte 1:1 aus dem Entwurf. Präfix: .bs-*
   Wird aus styles.css @importiert (Pflicht-Closure).
   ============================================================ */

/* ---- Basis / Wrapper ---- */
.bs-body{
  margin:0; background:var(--bs-nacht); color:var(--bs-creme);
  font-family:var(--bs-font-text); -webkit-font-smoothing:antialiased;
}
.bs-body ::selection{ background:var(--bs-gold); color:var(--bs-nacht); }
.bs-container{ max-width:var(--bs-maxw); margin:0 auto; }
.bs-section{ padding:var(--bs-pad-section) var(--bs-pad-x); }

/* ---- Keyframes (aus style.css des Entwurfs) ---- */
@keyframes glowB{ 0%,100%{ box-shadow:0 0 0 1px rgba(201,164,92,.55),0 0 16px rgba(201,164,92,.32); } 50%{ box-shadow:0 0 0 1px rgba(201,164,92,.9),0 0 32px rgba(201,164,92,.55); } }
@keyframes markB{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .bs-btn,.bs-btn--hero{ animation:none; } .bs-marquee__lauf{ animation:none; } }

/* ---- Typografie ---- */
.bs-eyebrow{
  display:inline-flex; align-items:center; gap:14px; margin:0;
  font-weight:700; font-size:clamp(12px,1vw,14px); letter-spacing:.22em;
  text-transform:uppercase; color:var(--bs-gold);
}
.bs-eyebrow__strich{ width:42px; height:1.5px; background:var(--bs-gold); display:inline-block; }
.bs-eyebrow--salbei{ color:var(--bs-salbei); letter-spacing:.18em; font-size:clamp(11px,.9vw,13px); }
.bs-microlabel{
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bs-salbei); margin:0 0 12px; font-weight:400;
}
.bs-display{
  font-family:var(--bs-font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(36px,6vw,92px); line-height:.92; letter-spacing:-.02em; margin:0;
}
.bs-display--hero{ font-size:clamp(38px,7vw,104px); line-height:.82; letter-spacing:-.03em; }
.bs-display--riesig{ font-size:clamp(40px,9vw,150px); line-height:.88; letter-spacing:-.025em; }
.bs-display .bs-punkt{ color:var(--bs-gold); }
.bs-italic-akzent{
  font-family:var(--bs-font-text); font-weight:400; font-style:italic;
  text-transform:none; letter-spacing:-.01em; color:var(--bs-salbei);
}
.bs-h3{
  font-family:var(--bs-font-display); font-weight:700;
  font-size:clamp(22px,2.3vw,32px); letter-spacing:-.01em; margin:0;
}
.bs-h3--karte{ font-size:clamp(22px,2vw,30px); line-height:1.02; }
.bs-lead{ font-size:clamp(15px,1.3vw,18px); line-height:1.6; color:var(--bs-text-70); margin:0; }
.bs-lead--gross{ font-size:clamp(16px,1.4vw,20px); line-height:1.55; color:rgba(236,231,220,.75); }
.bs-rolle{
  font-weight:700; color:var(--bs-salbei); font-size:11px; letter-spacing:.03em;
  text-transform:uppercase; margin:0; line-height:1.45;
}
.bs-ghostnum{
  position:absolute; right:.04em; bottom:-.24em; pointer-events:none; z-index:0;
  font-family:var(--bs-font-display); font-weight:800; line-height:.7;
  font-size:clamp(96px,9vw,150px); color:rgba(201,164,92,.07);
}

/* ---- Buttons ---- */
.bs-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  text-decoration:none; cursor:pointer; border:1px solid var(--bs-goldrand-hell);
  background:var(--bs-gold); color:var(--bs-nacht);
  font-family:var(--bs-font-text); font-weight:700; font-size:16px;
  padding:15px 28px; border-radius:var(--bs-pill);
  box-shadow:var(--bs-glow); animation:glowB 3.2s ease-in-out infinite;
  transition:transform .25s ease, background .25s ease;
}
.bs-btn:hover{ background:var(--bs-creme); transform:translateY(-3px); }
.bs-btn--ghost{
  background:transparent; color:var(--bs-creme);
  border:1.5px solid var(--bs-linie-40); box-shadow:0 0 18px rgba(236,231,220,.06);
  animation:none; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.bs-btn--ghost:hover{ border-color:var(--bs-creme); box-shadow:0 0 26px rgba(236,231,220,.22); background:transparent; }
.bs-btn--klein{ font-size:14px; padding:12px 18px; box-shadow:none; animation:none; border-color:transparent; }
.bs-btn--klein:hover{ background:var(--bs-creme); transform:translateY(-2px); }
.bs-btn--ghost-klein{
  background:transparent; color:var(--bs-creme); font-size:14px; padding:12px 16px;
  border:1.5px solid var(--bs-linie-35); box-shadow:none; animation:none;
}
.bs-btn--ghost-klein:hover{ border-color:var(--bs-creme); background:transparent; transform:translateY(-2px); }
.bs-btn svg{ flex-shrink:0; }
.bs-textlink{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  color:var(--bs-gold); font-size:13px; font-weight:700; transition:color .25s ease;
}
.bs-textlink:hover{ color:var(--bs-creme); }
.bs-textlink--salbei{ color:var(--bs-salbei); font-size:14px; }
.bs-textlink--salbei:hover{ color:var(--bs-gold); }
.bs-pfeilkreis{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; background:transparent; color:var(--bs-gold);
  border:1.5px solid var(--bs-goldlinie-50);
  transition:transform .35s var(--bs-ease), background .35s ease, color .35s ease;
}
.bs-pfeilkreis--gross{ width:48px; height:48px; font-size:21px; }
.bs-pfeilkreis--creme{ color:var(--bs-creme); border-color:rgba(236,231,220,.5); }
.bs-pfeilkreis--ink{ color:var(--bs-nacht); border-color:rgba(25,34,43,.45); }
.bs-totop{
  width:46px; height:46px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--bs-karte); color:var(--bs-creme); border:1px solid var(--bs-linie-20);
  box-shadow:var(--bs-schatten-panel); text-decoration:none; transition:border-color .25s ease, transform .25s ease;
}
.bs-totop:hover{ border-color:var(--bs-gold); transform:translateY(-2px); }

/* ---- Chips & Badges ---- */
.bs-chip{
  display:inline-block; font-size:12px; color:rgba(236,231,220,.82); line-height:1.4;
  border:1px solid var(--bs-goldlinie-40); padding:4px 11px; border-radius:var(--bs-pill);
}
.bs-chip--salbei{ border-color:var(--bs-salbeilinie-40); }
.bs-chip--neutral{
  color:var(--bs-text-70); background:rgba(236,231,220,.06);
  border-color:var(--bs-linie-12); padding:4px 10px;
}
.bs-badge{
  display:inline-block; font-weight:700; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bs-nacht); background:var(--bs-gold);
  padding:4px 12px; border-radius:var(--bs-pill);
}
.bs-badge--outline-gold{ background:transparent; color:var(--bs-gold); border:1px solid var(--bs-goldlinie-40); }
.bs-badge--outline-salbei{ background:transparent; color:var(--bs-salbei); border:1px solid var(--bs-salbeilinie-50); letter-spacing:.08em; }

/* ---- Formular (aus dem Terminanfrage-Baustein) ---- */
.bs-label{ display:block; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--bs-salbei); margin:0 0 8px; font-weight:600; }
.bs-input, .bs-select, .bs-textarea{
  width:100%; box-sizing:border-box; font-family:var(--bs-font-text); font-size:15px; color:var(--bs-creme);
  background:var(--bs-nacht); border:1px solid rgba(236,231,220,.45);   /* 16.07.: Feldgrenze ≥3:1 (WCAG 1.4.11) */
  border-radius:var(--bs-r-input); padding:12px 14px;
  transition:border-color .2s, box-shadow .2s;
}
.bs-textarea{ min-height:96px; resize:vertical; line-height:1.5; }
.bs-input:focus, .bs-select:focus, .bs-textarea:focus{
  outline:none; border-color:var(--bs-gold); box-shadow:0 0 0 3px rgba(201,164,92,.18);
}
.bs-input::placeholder, .bs-textarea::placeholder{ color:rgba(236,231,220,.6); }   /* 16.07.: 3,26:1→~5,6:1 */
.bs-check{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--bs-text-78); }
.bs-check input{ width:18px; height:18px; flex-shrink:0; margin-top:1px; accent-color:var(--bs-gold); }

/* ---- Navigation / Header ---- */
.bs-header{
  position:sticky; top:0; z-index:90; display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--bs-pad-x);
  background:rgba(25,34,43,.92); border-bottom:1px solid var(--bs-linie-12);
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
}
.bs-header--transparent{ background:rgba(25,34,43,0); border-bottom-color:rgba(236,231,220,0); }
.bs-navlink{ text-decoration:none; color:var(--bs-creme); font-weight:600; font-size:15px; transition:color .25s ease; }
.bs-navlink:hover{ color:var(--bs-gold); }
.bs-navrow{ display:flex; align-items:center; gap:clamp(14px,2.4vw,40px); white-space:nowrap; }
.bs-burger{
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; padding:0;
  background:transparent; border:1.5px solid rgba(236,231,220,.3); border-radius:12px;
  color:var(--bs-creme); cursor:pointer; transition:border-color .25s ease;
}
.bs-burger:hover{ border-color:var(--bs-gold); }
.bs-brandtext{
  font-family:var(--bs-font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.02em; color:var(--bs-creme); font-size:17px; text-decoration:none;
}

/* ---- Karten ---- */
.bs-karte{
  display:flex; flex-direction:column; background:var(--bs-karte);
  border-radius:var(--bs-r-karte); overflow:hidden; border:1px solid var(--bs-linie-08);
  transition:transform .4s var(--bs-ease), border-color .4s ease;
}
.bs-karte:hover{ transform:translateY(-8px); border-color:var(--bs-goldlinie-50); }
.bs-karte--salbei-hover:hover{ border-color:rgba(143,176,168,.55); }
.bs-karte__foto{ aspect-ratio:1/1; overflow:hidden; background:var(--bs-karte2); }
.bs-karte__foto--quer{ aspect-ratio:16/9; }
.bs-karte__foto img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.15); transition:transform .7s var(--bs-ease);
}
.bs-karte:hover .bs-karte__foto img{ transform:scale(1.05); }
.bs-karte__body{ padding:clamp(22px,2.4vw,32px); display:flex; flex-direction:column; flex:1; }
.bs-karte__cta{ margin-top:auto; display:flex; flex-wrap:wrap; gap:10px; }
.bs-kontaktzeile{ display:flex; align-items:center; gap:9px; font-size:14px; }
.bs-kontaktzeile .bs-ico{ display:inline-flex; flex-shrink:0; color:var(--bs-salbei); }
.bs-kontaktzeile a{ color:var(--bs-creme); text-decoration:none; transition:color .25s ease; }
.bs-kontaktzeile a:hover{ color:var(--bs-gold); }
.bs-maplink{
  margin-top:18px; padding-top:16px; border-top:1px solid rgba(236,231,220,.1);
  display:flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--bs-salbei); font-weight:700; font-size:14px; transition:color .25s ease;
}
.bs-maplink:hover{ color:var(--bs-gold); }
.bs-maplink .bs-pfeil-rechts{ margin-left:auto; font-size:17px; }
.bs-fotoslot{
  display:flex; align-items:center; justify-content:center;
  background:var(--bs-karte2); color:rgba(236,231,220,.45);
  font-size:13px; letter-spacing:.04em;
}
.bs-fotoslot span{
  border:1px dashed rgba(236,231,220,.28); padding:8px 16px;
  border-radius:var(--bs-pill); background:rgba(25,34,43,.4);
}

/* ---- Schwerpunkt-Karten ---- */
.bs-schwerpunkt{
  position:relative; overflow:hidden; background:var(--bs-karte);
  border:1px solid var(--bs-linie-08); border-radius:var(--bs-r-schwerpunkt);
  padding:clamp(24px,2.6vw,38px); min-height:250px;
  display:flex; flex-direction:column; justify-content:space-between; gap:28px;
  transition:transform .4s var(--bs-ease), border-color .4s ease;
}
.bs-schwerpunkt:hover{ transform:translateY(-6px); border-color:var(--bs-goldlinie-50); }
.bs-schwerpunkt__kopf{ position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.bs-schwerpunkt__ikon{ display:inline-flex; color:var(--bs-gold); }
.bs-schwerpunkt__inhalt{ position:relative; z-index:1; }
.bs-schwerpunkt__text{ font-size:15px; line-height:1.55; color:var(--bs-text-65); margin:0; }
.bs-schwerpunkt--feature{
  grid-column:1/-1; background:linear-gradient(120deg,var(--bs-salbei-flaeche),var(--bs-salbei-tief));
  border:none; flex-direction:row; flex-wrap:wrap; align-items:flex-end; padding:clamp(28px,3.5vw,52px);
}
.bs-schwerpunkt--feature:hover{ border-color:transparent; }
.bs-schwerpunkt--feature .bs-schwerpunkt__ikon{ color:var(--bs-creme); }
.bs-schwerpunkt--feature .bs-ghostnum{ font-size:clamp(150px,22vw,320px); bottom:-.3em; right:.02em; color:rgba(236,231,220,.1); }
.bs-schwerpunkt--feature .bs-schwerpunkt__text{ color:rgba(236,231,220,.85); font-size:clamp(15px,1.3vw,18px); }
.bs-schwerpunkt--gold{
  background:linear-gradient(120deg,var(--bs-gold),var(--bs-gold-tief));
  border:none; color:var(--bs-nacht);
}
.bs-schwerpunkt--gold:hover{ border-color:transparent; }
.bs-schwerpunkt--gold .bs-schwerpunkt__ikon{ color:var(--bs-nacht); }
.bs-schwerpunkt--gold .bs-ghostnum{ color:rgba(25,34,43,.1); }
.bs-schwerpunkt--gold .bs-schwerpunkt__text{ color:var(--bs-nacht); }   /* 16.07.: voller Kontrast auf Gold-Verlauf */

/* ---- Panel & Werte-Liste ---- */
.bs-panel{
  background:var(--bs-karte); border:1px solid var(--bs-linie-08);
  border-radius:var(--bs-r-panel); padding:clamp(36px,5vw,72px);
}
.bs-vline{ position:relative; padding-top:18px; }
.bs-vline::before{
  content:''; position:absolute; top:0; left:0; height:1px; width:100%;
  background:var(--bs-linie-40);
}
.bs-vline p{ font-size:clamp(18px,1.6vw,24px); line-height:1.35; margin:0; }

/* ---- Hero ---- */
.bs-hero{
  position:relative; min-height:clamp(520px,80vh,860px); display:flex; align-items:center;
  padding:clamp(104px,13vh,160px) var(--bs-pad-x) clamp(48px,7vh,90px); overflow:hidden;
}
.bs-hero__overlay{
  position:absolute; inset:0; z-index:1; opacity:.72;
  background:linear-gradient(102deg, rgba(25,34,43,.96) 0%, rgba(25,34,43,.88) 36%, rgba(25,34,43,.58) 68%, rgba(25,34,43,.42) 100%);
}
.bs-hero__inhalt{ position:relative; z-index:2; }
.bs-bildpanel{
  position:relative; border-radius:clamp(18px,2vw,30px); overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7);
  border:1px solid rgba(201,164,92,.35); background:var(--bs-karte);
}

/* ---- Marquee-Band ---- */
.bs-marquee{
  overflow:hidden; padding:clamp(28px,4vw,52px) 0;
  border-top:1px solid var(--bs-linie-12); border-bottom:1px solid var(--bs-linie-12);
}
.bs-marquee__lauf{ display:flex; width:max-content; will-change:transform; animation:markB 28s linear infinite; }
.bs-marquee__zeile{
  display:inline-flex; align-items:center; font-family:var(--bs-font-display);
  font-weight:700; text-transform:uppercase; font-size:clamp(24px,3.4vw,48px);
  white-space:nowrap; color:var(--bs-creme); letter-spacing:-.01em;
}
.bs-marquee__slash{ color:var(--bs-gold); margin:0 .5em; }

/* ---- Kontakt-Finale ---- */
.bs-kontakt-glow{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:120%; height:120%; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, rgba(201,164,92,.10), transparent 60%);
}
.bs-fusszeile{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  padding-top:28px; border-top:1px solid var(--bs-linie-18);
  font-size:13px; color:var(--bs-text-50);
}
.bs-fusszeile a{ color:var(--bs-text-50); }

/* ---- Chat-Assistent (Launcher + Bausteine) ---- */
.bs-cue{
  position:relative; display:inline-block; background:var(--bs-karte); color:var(--bs-creme);
  border:1px solid var(--bs-linie-20); font-family:var(--bs-font-text);
  font-weight:600; font-size:14.5px; line-height:1.15; white-space:nowrap;
  padding:10px 16px; border-radius:var(--bs-r-blase); box-shadow:var(--bs-schatten-panel);
}
.bs-cue__sub{ display:block; margin-top:3px; color:var(--bs-gold); font-weight:600; font-size:12px; }
.bs-cue::before{
  content:''; position:absolute; right:-11px; top:50%; transform:translateY(-50%);
  width:0; height:0; border:10px solid transparent; border-left-color:var(--bs-linie-20); border-right:0;
}
.bs-cue::after{
  content:''; position:absolute; right:-9px; top:50%; transform:translateY(-50%);
  width:0; height:0; border:9px solid transparent; border-left-color:var(--bs-karte); border-right:0;
}
.bs-bubble{
  display:inline-block; max-width:80%; padding:11px 14px;
  border-radius:16px 16px 16px 5px; font-size:14.5px; line-height:1.5;
  background:var(--bs-karte); color:var(--bs-creme); border:1px solid var(--bs-linie-20);
}
.bs-bubble--user{ border-radius:16px 16px 5px 16px; background:var(--bs-gold); color:var(--bs-nacht); border-color:transparent; font-weight:600; }
.bs-quickreply{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px;
  border-radius:var(--bs-pill); cursor:pointer; font-size:14px; font-weight:600;
  background:transparent; color:var(--bs-creme); border:1px solid var(--bs-linie-20);
  transition:border-color .2s ease, background .2s ease;
}
.bs-quickreply:hover{ border-color:var(--bs-gold); background:rgba(201,164,92,.12); }

/* ==== Leistungsseiten-Ergaenzungen (Begriffs-Tooltip, nur Tokens) ==== */
.bs-begriff{ color:inherit; text-decoration:none; cursor:help; border-bottom:1px dashed var(--bs-salbeilinie-40); padding-bottom:1px; transition:border-color .2s ease, color .2s ease; }
.bs-begriff:hover, .bs-begriff[data-offen]{ color:var(--bs-salbei); border-bottom-style:solid; border-bottom-color:var(--bs-salbeilinie-50); }
.bs-begriff:focus-visible{ outline:2px solid var(--bs-salbei); outline-offset:3px; border-radius:2px; }
.bs-begriff-tooltip{ position:absolute; z-index:60; width:min(340px, calc(100vw - 32px)); box-sizing:border-box; background:var(--bs-karte); border:1px solid var(--bs-linie-12); border-radius:var(--bs-r-blase, 16px); box-shadow:var(--bs-schatten-karte); padding:18px 20px 14px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease, visibility 0s .25s; }
.bs-begriff-tooltip--oben{ transform:translateY(-8px); }
.bs-begriff-tooltip[data-offen]{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.bs-begriff-tooltip__begriff{ font-family:var(--bs-font-display); font-weight:700; text-transform:uppercase; font-size:16px; letter-spacing:.03em; color:var(--bs-creme); margin:0 0 8px; line-height:1.1; }
.bs-begriff-tooltip__text{ font-family:var(--bs-font-text); font-size:14.5px; line-height:1.55; color:var(--bs-text-70); margin:0 0 12px; }
.bs-begriff-tooltip__fuss{ border-top:1px solid var(--bs-linie-08); padding-top:10px; margin:0; }
@media (prefers-reduced-motion:reduce){ .bs-begriff, .bs-begriff-tooltip{ transition:none; } .bs-begriff-tooltip{ transform:none; } }