/* =========================================================
   Helle Haut für die Startseite.
   Wird zusätzlich zu dark.css geladen und dreht deren Farbmarken um.
   Die Farbwerte sind aus dem Hero-Video gemessen (fünf Zeitpunkte):
     #CF9C98 Terracotta · #D6A9AA Rosé · #B89393 Altrosa
     #728EA1 Blaugrau als Gegenpol
   ========================================================= */
:root{
  --v-terra:207,156,152;
  --v-rose:214,169,170;
  --v-alt:184,147,147;
  --v-blau:114,142,161;
}

body{
  --bg:#FFFFFF;
  --bg-2:#FFFFFF;
  --surface:rgba(23,16,18,.035);
  --surface-2:rgba(23,16,18,.07);

  --white:#171012;                 /* Haupttextfarbe */
  --dim:rgba(23,16,18,.75);
  --mute:rgba(23,16,18,.63);
  --faint:rgba(23,16,18,.63);
  --hair:rgba(23,16,18,.13);
  --hair-2:rgba(23,16,18,.24);

  --accent:#9C4F42;
  --grad:linear-gradient(96deg,#9C4F42 0%,#B0533F 32%,#8A5A50 64%,#6E6266 100%);

  color:var(--white);background:#FFFFFF;}

/* ---------- Kopfleiste ---------- */
.top{background:rgba(255,255,255,.44);
  border-bottom:1px solid var(--hair);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .top{background:rgba(255,255,255,.95);}
}
.brand img{filter:none;}
.menu summary{border-color:var(--hair-2);background:rgba(255,255,255,.6);}
.menu summary i{background:var(--white);}
.menu-panel{background:rgba(255,255,255,.98);border-color:var(--hair);
  box-shadow:0 30px 70px -28px rgba(23,16,18,.28);}
@media (hover:hover) and (pointer:fine){
  .menu-panel a:not(.btn):hover{background:rgba(23,16,18,.05);color:var(--white);}
}

/* ---------- Schaltflächen ---------- */
.btn--fill{background:#171012;color:#FFFFFF;border-color:transparent;}
.btn--line{background:#FFFFFF;color:var(--white);border-color:var(--hair-2);}
.btn--fill::after{background:linear-gradient(90deg,
  rgba(255,255,255,0) 0%,rgba(255,255,255,.16) 42%,
  rgba(255,255,255,.16) 58%,rgba(255,255,255,0) 100%);}
.btn--line::after{background:linear-gradient(90deg,
  rgba(23,16,18,0) 0%,rgba(23,16,18,.05) 42%,
  rgba(23,16,18,.05) 58%,rgba(23,16,18,0) 100%);}
@media (hover:hover) and (pointer:fine){
  .btn--fill:hover{background:#2C2124;}
  .btn--line:hover{background:#FBF7F6;border-color:var(--white);}
}

/* ---------- Hero ----------
   Das Video wird im Hero eingesperrt statt am Bildschirm festgemacht.
   Im Hero sieht es identisch aus, kann aber nirgends mehr hervorschauen —
   auf einer hellen Seite mit durchsichtigen Flächen wäre es sonst hinter
   jedem Abschnitt zu sehen. */
.hero{position:relative;overflow:hidden;
  background:
    radial-gradient(86% 108% at 88% 42%, rgba(var(--v-terra),.42) 0%,
      rgba(var(--v-terra),.12) 48%, rgba(var(--v-terra),0) 76%),
    radial-gradient(52% 60% at 4% 76%, rgba(var(--v-blau),.16) 0%,
      rgba(var(--v-blau),0) 70%),
    linear-gradient(166deg,#FFFFFF 0%,#FEFAF9 46%,#FBF2F0 100%);}
.hero .media{position:absolute;top:0;right:0;height:100%;}
.hero .media video{filter:brightness(1.06) contrast(.97) saturate(1.08);}
.hero h1,.hero .sub,.hero .eyebrow,.hero .trust{text-shadow:none;}
.hero .sub{color:var(--dim);}

/* ---------- Rumpf ----------
   Alles nach dem Hero. Deckend, damit nichts durchscheint, und Träger des
   Farbauslaufs: Die Videofarben laufen über die ersten 820 Pixel aus. */
.rumpf{position:relative;z-index:3;
  background:
    linear-gradient(180deg, rgba(var(--v-terra),.16) 0px,
      rgba(var(--v-terra),.05) 380px, rgba(255,255,255,0) 820px),
    #FFFFFF;}
.rumpf .sec{background:transparent;}
/* ---------- Referenzenleiste ----------
   Sie soll wie die Fortsetzung der Heropage wirken, nicht wie ein eigener
   Streifen. Deshalb dieselbe Grundfläche wie der Hero und derselbe warme
   Schein, nur weitergeführt: Der Kreis sitzt oberhalb der Leiste an derselben
   Stelle wie im Hero (88 Prozent von links), sodass die Wärme rechts unten
   aus dem Video herausläuft. Keine Trennlinie oben — die Kante des schwarzen
   Bandes darunter ist die einzige Trennung, die es hier braucht. */
.rumpf .refs{
  background:
    radial-gradient(126% 300% at 88% -130%,
      rgba(var(--v-terra),.30) 0%, rgba(var(--v-terra),.09) 48%,
      rgba(var(--v-terra),0) 80%),
    radial-gradient(60% 170% at 4% -40%, rgba(var(--v-blau),.09) 0%,
      rgba(var(--v-blau),0) 72%),
    linear-gradient(166deg,#FFFFFF 0%,#FEFAF9 46%,#FBF2F0 100%);}
.rumpf .sec--alt{background:rgba(var(--v-terra),.05);}
/* ---------- Leistungs-Unterseiten: Rumpf unter der Heropage ----------
   Ein durchgehender Verlauf von Weiß nach Hellgrau trägt alles nach dem
   schwarzen Kopf. Die Abschnitte selbst sind durchsichtig, damit der
   Verlauf ohne Kante durchläuft; Karten und Aufklapper bleiben weiß und
   heben sich dadurch nach unten hin immer deutlicher ab. */
.rumpf-hell{position:relative;z-index:3;
  background:linear-gradient(180deg,
    #FFFFFF 0%, #FDFDFE 20%, #F8F8FA 48%,
    #F2F2F5 74%, #EDEDF0 100%);}
.rumpf-hell .sec,.rumpf-hell .sec--alt,.rumpf-hell .refs{background:transparent;}
/* Die Referenzenzeile steht hier direkt unter dem schwarzen Kopf. Oben
   braucht sie keine Linie — die Kante des Kopfes trennt bereits. Unten
   übernimmt die Linie des folgenden Abschnitts. */
.rumpf-hell .refs{border:0;}
body:has(.phead--video) .card{background:#FFFFFF;}
/* Die Aufklapper bleiben durchsichtig. Als weiße Kästen standen sie einzeln
   auf dem grauen Verlauf — dazwischen sah man die Brüche. */
body:has(.phead--video) .faq{background:transparent;}
.refs{border-top:0;border-bottom:0;}
.slot.marke{color:rgba(23,16,18,.58);}
@media (hover:hover) and (pointer:fine){.slot.marke:hover{color:var(--white);}}
.card,.stat,.end,.perk{background:rgba(255,255,255,.7);border-color:var(--hair);}
.faq summary::after{border-color:var(--faint);}
.teamplus a{border-bottom-color:rgba(156,79,66,.4);}
.rows .row{border-color:var(--hair);}

/* =========================================================
   Leistungen als dunkles Band
   Innerhalb des Bandes werden die Farbmarken wieder auf die dunkle
   Fassung gestellt. Dadurch sehen Überschriften, Abzeichen, Haken und
   Knöpfe darin unverändert aus, ohne dass jedes Bauteil einzeln
   umgefärbt werden muss.

   Die Übergänge oben und unten laufen über 420 Pixel und 23 Stufen von
   Weiß nach Schwarz. Die Helligkeit fällt in den ersten 40 Prozent,
   danach folgt ein sehr langer, fast unsichtbarer Ausklang — genau der
   lässt die Naht verschwinden. Das Korn darüber verhindert Streifen.
   ========================================================= */
.rumpf .lst{
  /* Ohne diese Zeile bleibt --bg der Wert des Körpers, also Weiß. Auf schmalen
     Bildschirmen wird die Übersicht zu einer klebenden Leiste, die genau
     diesen Wert als Hintergrund nimmt — daher der weiße Balken quer über dem
     schwarzen Band. */
  --bg:#0B0B0B;
  --white:#FFFFFF;
  --dim:rgba(255,255,255,.74);
  --mute:rgba(255,255,255,.6);
  --faint:rgba(255,255,255,.52);
  --hair:rgba(255,255,255,.12);
  --hair-2:rgba(255,255,255,.22);
  --surface:rgba(255,255,255,.04);
  --accent:#E4A263;
  color:#FFFFFF;border-top:0;
  margin-block:-1px;
  padding-block:clamp(2.6rem,6vh,4rem);
  /* Ü1: harte Kante. Kein Auslauf — der helle Abschnitt endet, das Band
     beginnt. Das Band greift oben und unten einen Pixel über, damit die
     Trennlinie des Nachbarabschnitts verschwindet und die Kante sauber steht. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='.05'/%3E%3C/svg%3E"),
    /* Der bernsteinfarbene Kreis, der hier lag, saß genau dort, wo die
       Abzeichen stehen — er war die zweite Quelle des Goldstichs. Weg.
       Auch der Grund selbst ist jetzt neutral: #0E0B0C war rötlich
       getönt (R14 G11 B12). */
    linear-gradient(180deg,#0B0B0B 0%,#101010 52%,#0B0B0B 100%);
  background-repeat:repeat, no-repeat;
  background-size:160px 160px, auto;
  background-position:top left, center;}
.rumpf .lst + .sec{border-top:0;}
.rumpf .lst .hakenpunkte{background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.12);}
/* Der Knopf behält weiße Fläche und dunkle Schrift */
.rumpf .lst .btn--ring{color:#171012;}

/* ---------- Abschluss-Kasten ----------
   Schwarze Fläche, weiße Schrift, weißer Knopf mit schwarzer Schrift.
   Wieder über die Farbmarken, damit Überschrift, Fließtext und Linien
   darin von selbst stimmen — nur der Knopf braucht feste Werte, weil
   „btn--fill" auf der hellen Haut sonst schwarz auf schwarz stünde.

   Kontraste: Überschrift 19,6:1, Fließtext 12,6:1, Knopf 19,6:1. */
.end{
  --white:#FFFFFF;
  --dim:rgba(255,255,255,.76);
  --mute:rgba(255,255,255,.68);
  --faint:rgba(255,255,255,.52);
  --hair:rgba(255,255,255,.14);
  --hair-2:rgba(255,255,255,.26);
  color:#FFFFFF;background:#0B0A0A;border:0;
  box-shadow:0 30px 60px -34px rgba(23,16,18,.4),
             0 4px 18px -10px rgba(23,16,18,.22);}
.end .btn--fill{background:#FFFFFF;color:#0B0A0A;border-color:transparent;}
.end .btn--fill::after{background:linear-gradient(90deg,
  rgba(0,0,0,0) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.05) 58%,rgba(0,0,0,0) 100%);}
@media (hover:hover) and (pointer:fine){
  .end .btn--fill:hover{background:#EFE9E7;}
}
.end .btn--line{border-color:rgba(255,255,255,.45);color:#FFFFFF;background:transparent;}

/* ---------- Fuß ---------- */
.foot{background:#FBF7F6;border-top:1px solid var(--hair);}
/* Der Fuß führt den Grauton des Rumpfes weiter, sonst springt es
   nach dem schwarzen Kasten wieder auf Weiß zurück. */
body:has(.phead--video) .foot{background:#EDEDF0;}

/* =========================================================
   Leistungs-Unterseiten: nur der Kopf bleibt schwarz
   Die Farbmarken werden im Kopf auf die dunkle Fassung gestellt,
   der Rest der Seite ist hell wie die Startseite.
   ========================================================= */
.phead--video{
  --white:#FFFFFF;
  --dim:rgba(255,255,255,.74);
  --mute:rgba(255,255,255,.6);
  --faint:rgba(255,255,255,.52);
  --hair:rgba(255,255,255,.12);
  --hair-2:rgba(255,255,255,.22);
  --surface:rgba(255,255,255,.05);
  --accent:#C8CFD6;
  color:#FFFFFF;border-bottom:0;
  /* Echtes Schwarz. Der Verlauf, der hier lag, führte über #0B0A0A und
     #0F0E0E — beide leicht rötlich getönt, und das Video sitzt mit
     „lighten" darauf, also schlug jede Tönung durch. */
  background:#000000;}
.phead--video .btn--fill{background:#FFFFFF;color:#0E0B0C;}
.phead--video .btn--line{background:transparent;color:#FFFFFF;
  border-color:rgba(255,255,255,.28);}
@media (hover:hover) and (pointer:fine){
  .phead--video .btn--fill:hover{background:#F1EDEA;}
  .phead--video .btn--line:hover{background:rgba(255,255,255,.08);
    border-color:#FFFFFF;}
}
.phead--video .zurueck-link{color:rgba(255,255,255,.6);}
@media (hover:hover) and (pointer:fine){
  .phead--video .zurueck-link:hover{color:#FFFFFF;}
}
/* Der erste helle Abschnitt braucht keine Trennlinie — die Kante des
   schwarzen Kopfes ist die Trennung. */
.rumpf-hell > :first-child{border-top:0;}

/* ---------- Alle hervorgehobenen Wörter in Silber ----------
   Auf Schwarz das helle Silber der Kopfüberschrift. Auf Weiß kann es das
   nicht sein: Das Glanzband ist dort reines Weiß und verschwindet. Gleiches
   Metall, gleicher Winkel, nur die Stufen sind heruntergezogen — die
   hellste Stelle steht noch mit 5,5:1 gegen Weiß. */
/* entfällt: Überschriften laufen einfarbig, siehe .key in dark.css */

/* Dieselbe Umstellung für alles andere Farbige: Ziffern, Punkte vor den
   Zwischentiteln, Verweise. Auf Weiß Graphit (6,1:1), auf Schwarz helles
   Silber — kein Terrakotta und kein Bernstein mehr auf diesen Seiten. */
body:has(.phead--video){--accent:#5A636D;}

/* entfällt: Überschriften laufen einfarbig, siehe .key in dark.css */

/* =========================================================
   Abschlusskasten der Leistungsseiten: schwarz
   Wieder über die Farbmarken, damit Schrift, Linien und Knöpfe darin
   automatisch stimmen. Das Glasbild trägt denselben Verlauf wie in der
   Heropage: zwei Verläufe, sichtbar nur wo beide decken, dazu „lighten“.
   ========================================================= */
body:has(.phead--video) .end{
  --white:#FFFFFF;
  --dim:rgba(255,255,255,.74);
  --mute:rgba(255,255,255,.62);
  --faint:rgba(255,255,255,.52);
  --hair:rgba(255,255,255,.12);
  --hair-2:rgba(255,255,255,.24);
  --accent:#C8CFD6;
  color:#FFFFFF;
  /* Kein heller Rahmen mehr — der zog eine dünne Linie um den Kasten und
     schnitt ihn sichtbar aus der Seite heraus. Stattdessen echtes Schwarz
     mit einem weichen Schatten darunter: Der Kasten liegt auf der Seite,
     statt hineingestanzt zu sein. */
  background:#000000;
  border:0;
  box-shadow:0 30px 60px -34px rgba(23,16,18,.4),
             0 4px 18px -10px rgba(23,16,18,.22);
  display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) clamp(13rem,25vw,21.5rem);
  gap:clamp(1.6rem,4vw,3.2rem);}
body:has(.phead--video) .end .cta{margin-top:clamp(1.3rem,3vh,1.9rem);}
body:has(.phead--video) .end .btn--fill{background:#FFFFFF;color:#0B0A0A;}
/* Drei Stufen, die man auch ohne Nachdenken auseinanderhält:
   gefüllt weiß · leicht aufgehellt mit klarer Kante · nur Kontur, gedämpft. */
body:has(.phead--video) .end .btn--line{
  background:rgba(255,255,255,.13);color:#FFFFFF;
  border-color:rgba(255,255,255,.5);}
body:has(.phead--video) .end .btn--leise{
  background:transparent;color:rgba(255,255,255,.56);
  border-color:rgba(255,255,255,.16);}
@media (hover:hover) and (pointer:fine){
  body:has(.phead--video) .end .btn--line:hover{background:rgba(255,255,255,.2);
    border-color:#FFFFFF;}
  body:has(.phead--video) .end .btn--leise:hover{color:#FFFFFF;
    border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.05);}
}
@media (hover:hover) and (pointer:fine){
  body:has(.phead--video) .end .btn--fill:hover{background:#EFEBE8;}
}

/* ---------- Marke im Abschlusskasten ----------
   Der Bildgrund ist echtes Schwarz (beim Zuschneiden heruntergezogen), also
   ersetzt „lighten" ihn oben, unten und links vollständig durch den Kasten —
   dort braucht es keinen Auslauf. Nur rechts ist die Pille in der Vorlage
   angeschnitten; dort läuft sie über die letzten 18 Prozent nach Schwarz aus.
   Die Beschriftung endet bei 74 Prozent und bleibt unberührt. */
.end-marke{margin:0;}
/* Dieselben freigestellten Abzeichen wie im Leistungsband: Der Bildgrund ist
   echtes Schwarz, „lighten" ersetzt ihn durch den Kasten. Der frühere
   Verlauf nach rechts steckt jetzt im Bild selbst. */
.end-marke img{display:block;width:100%;height:auto;mix-blend-mode:lighten;}

@media (max-width:820px){
  body:has(.phead--video) .end{grid-template-columns:minmax(0,1fr);}
  .end-marke{max-width:26rem;}
}

/* Auch im Zusage-Block Silber statt Bernstein — auf diesen Seiten ist
   nichts mehr farbig außer dem Silber. */
body:has(.phead--video) .zusage{--accent:#C8CFD6;}

/* ---------- Auswahlfenster Erstgespräch ----------
   Das Fenster ist auf jeder Seite dunkel. Die hellen Knopffarben dieser Haut
   dürfen darin nicht greifen — sonst steht ein fast schwarzer Knopf auf
   schwarzem Grund. Hier gilt wieder die dunkle Fassung. */
.tdlg .btn--fill{background:#FFFFFF;color:#0B0B0B;border-color:transparent;}
.tdlg .btn--line{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.28);}
.tdlg .btn--fill::after{background:linear-gradient(90deg,
  rgba(11,11,11,0) 0%,rgba(11,11,11,.08) 42%,
  rgba(11,11,11,.08) 58%,rgba(11,11,11,0) 100%);}
@media (hover:hover) and (pointer:fine){
  .tdlg .btn--fill:hover{background:#F1EEED;}
  .tdlg .btn--line:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);}
}
.tdlg .eyebrow{color:rgba(255,255,255,.62);}


/* =========================================================
   Vergleich als Tabelle
   Zeile für Zeile nebeneinander: links die gängige Praxis, rechts, wie wir
   es machen. Die rechte Spalte ist grünlich hinterlegt.

   Beide Farben sind gedämpft — ein Ziegelrot, das neben dem Terrakotta der
   Seite nicht schreit, und ein tiefes Grün mit demselben Grauanteil. Die
   Bedeutung hängt nie allein an der Farbe: Haken und Kreuz unterscheiden
   sich in der Form, sonst wäre die Tabelle für Rot-Grün-Blinde nicht lesbar.
   ========================================================= */
:root{
  --nein:#B3453B;
  --ja:#3E7A5A;
}
.vg-tab-huelle{margin-top:clamp(1.6rem,4vh,2.4rem);overflow-x:auto;
  -webkit-overflow-scrolling:touch;}
.vg-tab{width:100%;border-collapse:collapse;min-width:44rem;}
.vg-tab th,.vg-tab td{text-align:left;vertical-align:top;
  padding:1rem 1.1rem;border-bottom:1px solid var(--hair);}
.vg-tab thead th{font:500 .68rem/1 var(--m);letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);padding-bottom:.7rem;}
.vg-tab thead th.sp-gruen{color:var(--ja);}
.vg-tab tbody th{font-size:.95rem;font-weight:600;color:var(--white);width:11rem;}
.vg-tab td{font-size:.93rem;line-height:1.5;color:var(--mute);}
.vg-tab td span{display:inline-block;vertical-align:top;max-width:21rem;}
.vg-tab td svg{margin-right:.55rem;}
.vg-tab .sp-gruen{background:rgba(62,122,90,.05);}
.z-ja,.z-nein{flex:none;width:1.05rem;height:1.05rem;
  vertical-align:-.18rem;
  fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.z-ja{stroke:var(--ja);}
.z-nein{stroke:var(--nein);}
@media (max-width:720px){
  .vg-tab tbody th{width:8rem;font-size:.9rem;}
  .vg-tab th,.vg-tab td{padding:.8rem .7rem;}
}

/* =========================================================
   Kundenstimmen als Bewertungskarten
   Mauerwerk statt Raster: Die Karten stehen in Spalten und fließen
   untereinander, dadurch dürfen sie unterschiedlich lang sein, ohne dass
   Lücken entstehen. Sechs gleich hohe Kästen sähen nach Formular aus.
   ========================================================= */
.sec--stimmen{background:#FAF9F8;}
.stimmen{margin-top:clamp(1.8rem,4vh,2.6rem);
  columns:1;column-gap:clamp(.9rem,1.8vw,1.3rem);}
@media (min-width:760px){.stimmen{columns:2;}}
@media (min-width:1080px){.stimmen{columns:3;}}
/* Bei drei Karten in drei Spalten steht jede für sich — die Mauer braucht
   dann keinen Ausgleich mehr, aber unterschiedliche Längen bleiben erlaubt. */
.stimme{break-inside:avoid;margin-bottom:clamp(.9rem,1.8vw,1.3rem);
  padding:clamp(1.2rem,2.4vw,1.6rem);
  background:#FFFFFF;border:1px solid var(--hair);border-radius:16px;
  box-shadow:0 1px 2px rgba(23,16,18,.03);
  transition:box-shadow .25s var(--e),transform .25s var(--e);}
@media (hover:hover) and (pointer:fine){
  .stimme:hover{transform:translateY(-2px);
    box-shadow:0 20px 40px -28px rgba(23,16,18,.3);}
}
.sterne{display:flex;gap:.15rem;margin-bottom:.85rem;}
.stern{width:1rem;height:1rem;fill:#E8A33D;flex:none;}
.stimme p{font-size:.96rem;line-height:1.6;color:var(--dim);}
.stimme p + p{margin-top:.7rem;}

/* Kürzel und Person nebeneinander, der Zusatz immer darunter. Die dritte
   Spalte hing vorher an der Fensterbreite — bei drei Karten nebeneinander
   ist eine Karte aber nur rund 440 Pixel breit, und dann brach der
   Firmenname auf vier Zeilen um. */
.stimme-fuss{display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:start;gap:.2rem .75rem;
  margin-top:1.1rem;padding-top:1.05rem;border-top:1px solid var(--hair);}
.stimme-bild{width:2.5rem;height:2.5rem;border-radius:50%;flex:none;
  margin-top:.1rem;
  display:grid;place-items:center;
  background:rgba(var(--v-terra),.22);color:var(--white);
  font:600 .82rem/1 var(--ui);letter-spacing:.02em;}
.stimme-wer{display:grid;gap:.15rem;min-width:0;}
.stimme-wer b{font-size:.93rem;font-weight:600;color:var(--white);}
.stimme-wer span{font-size:.85rem;color:var(--mute);}
/* Die Zusatzzeile springt unter die Person, sobald es eng wird — nebeneinander
   bliebe für den Firmennamen zu wenig Platz. */
.stimme-tag{grid-column:2;margin-top:.5rem;
  font:500 .62rem/1.4 var(--m);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);}


/* Der Beispielhinweis steht auf der Startseite ohne die warme Haut — daher
   hier noch einmal. */
.hinweis-beispiel{margin-top:.9rem;font-size:.86rem;color:var(--faint);
  padding-left:.9rem;border-left:2px solid var(--hair-2);}


/* Das Aufklappfeld trägt dieselbe milchige Fläche wie die Kopfleiste. */
/* Näher an der Deckung der Leiste, damit Feld und Leiste als ein
   Material lesbar sind. */
body{--glas:rgba(255,255,255,.62); --glas-fest:rgba(255,255,255,.97);}

/* =========================================================
   Fachbereiche mit Film — Vorschaufassungen
   ========================================================= */
.sec--bv{background:#FAF9F8;}
.sec--bv2{background:#FFFFFF;}
.bv{display:grid;gap:clamp(1.4rem,3.4vw,2.8rem);align-items:start;
  margin-top:clamp(1.8rem,4vh,2.6rem);}
@media (min-width:960px){
  .bv{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);}
}
.bv-film{position:relative;overflow:hidden;border-radius:20px;
  aspect-ratio:1/1;background:#EFECEA;
  box-shadow:0 26px 54px -34px rgba(23,16,18,.4);}
.bv-film--hoch{aspect-ratio:4/5;}
.bv-film video{width:100%;height:100%;object-fit:cover;display:block;}
/* Ein weicher Rand nach innen, damit der Film nicht als Aufkleber wirkt. */
.bv-film::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(23,16,18,.07),
             inset 0 -60px 70px -50px rgba(23,16,18,.35);}
@media (min-width:960px){.bv-film{position:sticky;top:clamp(5.5rem,13vh,7.5rem);}}

/* ---- Fassung A: Klappliste ---- */
.bv-liste{display:grid;border-top:1px solid var(--hair);}
.bv-zeile{display:grid;grid-template-columns:2.6rem minmax(0,1fr);
  gap:.2rem 1rem;align-items:start;text-align:left;
  padding:1.15rem 0;border:0;border-bottom:1px solid var(--hair);
  background:transparent;cursor:pointer;font:inherit;color:inherit;}
.bv-zeile .n{font:500 .64rem/1.9 var(--m);letter-spacing:.2em;color:var(--faint);
  transition:color .25s var(--e);}
.bv-zeile .t{display:block;font-size:1.12rem;font-weight:500;letter-spacing:-.015em;
  color:var(--white);transition:color .25s var(--e);}
/* Der Aufklapp läuft über eine Rasterzeile von 0fr auf 1fr — das lässt sich
   weich bewegen, anders als height:auto. */
/* Genau ein Kind, sonst rutscht das zweite in eine automatische Zeile und
   klappt nicht mit ein — dann bleibt unter jedem geschlossenen Bereich eine
   leere Fläche stehen. */
.bv-mehr{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--e),opacity .35s var(--e);opacity:0;}
.bv-huelle{overflow:hidden;min-height:0;}
.bv-zeile.ist-auf .bv-mehr{grid-template-rows:1fr;opacity:1;}
.bv-zeile.ist-auf .n{color:var(--accent);}
.bv-mehr .s{display:block;padding-top:.5rem;
  font-size:.95rem;line-height:1.6;color:var(--mute);max-width:52ch;}
.bv-rollen{display:flex;flex-wrap:wrap;gap:.35rem;padding-top:.75rem;}
.bv-rollen span{padding:.3rem .65rem;border-radius:100px;
  border:1px solid var(--hair);background:#FFFFFF;
  font-size:.78rem;color:var(--mute);}
@media (hover:hover) and (pointer:fine){
  .bv-zeile:hover .t{color:var(--accent);}
}
.bv-zeile:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}

/* ---- Fassung B: Kacheln ---- */
.bv-raster{display:grid;gap:clamp(.7rem,1.4vw,1rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));}
.bv-kachel{padding:clamp(1rem,2vw,1.3rem);border-radius:14px;
  background:#FFFFFF;border:1px solid var(--hair);
  opacity:0;transform:translateY(10px);
  animation:bv-auf .6s var(--e) forwards;
  animation-delay:calc(var(--i) * 90ms);
  transition:transform .25s var(--e),box-shadow .25s var(--e),border-color .25s var(--e);}
@keyframes bv-auf{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .bv-kachel{opacity:1;transform:none;animation:none;}
  .bv-mehr{transition:none;}
}
@media (hover:hover) and (pointer:fine){
  .bv-kachel:hover{transform:translateY(-3px);border-color:var(--hair-2);
    box-shadow:0 20px 40px -28px rgba(23,16,18,.35);}
}
.bv-kachel .n{font:500 .62rem/1 var(--m);letter-spacing:.2em;color:var(--accent);}
.bv-kachel h3{margin-top:.55rem;font-size:1.02rem;font-weight:500;letter-spacing:-.015em;}
.bv-kachel p{margin-top:.4rem;font-size:.88rem;line-height:1.5;color:var(--mute);}
.bv-kachel .bv-rollen{padding-top:.7rem;}
.bv-kachel .bv-rollen span{font-size:.72rem;padding:.24rem .55rem;}