/* BBN-Schriften, modernes Format (S366) */
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-0.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-2.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-5.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-6.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-7.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-5.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-6.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-7.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-5.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-6.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-7.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-20.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-21.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-22.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-23.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-24.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-25.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-26.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-27.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-28.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-29.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-30.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-31.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-32.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-33.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-27.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-28.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-29.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-30.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-31.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-32.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/uploads/bbn/fonts/bbn-font-33.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   BBN STARTSEITE (WordPress-Fassung) | A-2026-0167 Stufe 1 | S351
   Quelle: code/startseite/bbn-startseite.css (S350-Live-Stand)
   S358 (Schicht 3, Block B1): bespoke Kopf/Fuss entfernt (kommen aus
   Schicht 2 bbn-rahmen-v2.css); Menue-Optik fuer die Standard-Leiste;
   Hero-Hintergrund auf eigene Mediathek-URL (Bilder-DIN).
   ============================================================ */
:root{
    --cream:#FAF5EC;--cream-warm:#F2E7D1;--cream-deep:#E9D9B8;
    --midnight:#1B2A4E;--midnight-deep:#0F1A33;--midnight-soft:#2E3F66;
    --gold:#C9A35C;--gold-soft:#E4C98A;--gold-deep:#7F612D;--gold-flaeche:#A78341;
    --butterfly:#D4A24B;--burgundy:#7A2E3C;--burgundy-light:#9A3E50;
    --ink:#2A2A33;--ink-soft:#5A5A63;--ink-mute:#67676F;--line:#E4DBC8;
    --f-display:'Cormorant Garamond',Georgia,serif;
    --f-body:'Source Sans 3','Helvetica Neue',Arial,sans-serif;
    --f-script:'Caveat',cursive;
    --read:680px;--content:1140px;
    --shadow-card:0 4px 18px rgba(27,42,78,.08);--shadow-lift:0 16px 48px rgba(27,42,78,.16);
    --ease:cubic-bezier(.22,.8,.36,1);
  }

  
  /* ====== ab hier alles auf #bbn-startseite gescopt ====== */
  #bbn-startseite *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:78px}
  #bbn-startseite{background:var(--cream);color:var(--ink);font-family:var(--f-body);font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  #bbn-startseite img{max-width:100%;display:block}
  #bbn-startseite h1,#bbn-startseite h2,#bbn-startseite h3{font-family:var(--f-display);color:var(--midnight);line-height:1.13;letter-spacing:-.02em;font-weight:500;text-wrap:balance}
  #bbn-startseite h1{font-size:clamp(2.9rem,6vw,4.6rem)}
  #bbn-startseite h2{font-size:clamp(2rem,4.4vw,3.1rem);margin-bottom:.5em}
  #bbn-startseite h3{font-size:1.3rem;font-weight:600}
  #bbn-startseite p{text-wrap:pretty}
  #bbn-startseite em{font-family:var(--f-display);font-style:italic;color:var(--midnight)}
  #bbn-startseite .wrap{max-width:var(--content);margin:0 auto;padding:0 24px}
  #bbn-startseite .read{max-width:var(--read);margin-inline:auto}
  #bbn-startseite section{padding:clamp(96px,11vw,150px) 0}
  #bbn-startseite .eyebrow{font-size:18px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--gold-deep);margin-bottom:18px;display:block}
  #bbn-startseite .eyebrow.burg{color:var(--burgundy)}
  #bbn-startseite .lead{font-size:19px;line-height:1.8;color:var(--ink)}
  #bbn-startseite .center{text-align:center}
  #bbn-startseite .scene{font-size:18px;color:var(--ink-soft);line-height:1.7;font-style:italic;font-family:var(--f-display)}
  #bbn-startseite .btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:8px;border:1.5px solid transparent;font-family:var(--f-body);font-weight:600;font-size:22px;line-height:1.2;cursor:pointer;text-decoration:none;transition:all .2s var(--ease)}
  #bbn-startseite .btn-primary{background:var(--midnight);color:var(--cream);box-shadow:0 2px 8px rgba(27,42,78,.1)}
  #bbn-startseite .btn-primary:hover{background:var(--midnight-deep);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
  #bbn-startseite .btn-gold{background:var(--bbn-gold-glanz,linear-gradient(135deg,#C9A35C 0%,#D9BE7E 40%,#F2DFA6 50%,#D9BE7E 60%,#C9A35C 100%));box-shadow:0 1px 0 #8C6A2F inset,0 2px 8px rgba(0,0,0,.3);color:var(--midnight-deep)}
  #bbn-startseite .btn-gold:hover{background:var(--gold-flaeche,#A78341);color:var(--cream);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
  #bbn-startseite .btn-burg{background:var(--burgundy);color:var(--gold-soft);border-color:var(--gold);box-shadow:0 2px 8px rgba(27,42,78,.1)}
  #bbn-startseite .btn-burg:hover{background:var(--burgundy-light);color:var(--gold-soft);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
  #bbn-startseite .btn-ghost{background:transparent;color:var(--midnight);border-color:var(--midnight)}
  #bbn-startseite .btn-ghost:hover{background:var(--midnight);color:var(--cream)}
  #bbn-startseite .btn-quiet{background:transparent;color:var(--midnight);padding:16px 6px;border:none;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px;text-decoration-thickness:1.5px}
  #bbn-startseite .btn-quiet:hover{color:var(--gold-deep);text-decoration-color:var(--gold-deep)}
  #bbn-startseite .trust{font-size:18px;color:var(--ink-soft);margin-top:14px}
  #bbn-startseite .trust .sep{color:var(--gold);margin:0 6px}

  /* ===== Startseiten-Menue auf der Standard-Kopfleiste (S358, Volker-Entscheid
     "Standard-Optik plus Menue"): der Kopf selbst ist Schicht 2 (bbn-header,
     dunkelblau, sticky); hier nur das Menue darauf. ===== */
  .bbn-header__inner{gap:20px}
  .bbn-nav{display:flex;align-items:center;gap:26px}
  .bbn-navlink{color:var(--bbn-cream);opacity:.82;text-decoration:none;font-family:var(--bbn-klar);font-size:18px;font-weight:500;transition:opacity .18s ease,color .18s ease}
  .bbn-navlink:hover{opacity:1;color:var(--bbn-gold-soft)}
  .bbn-nav-cta{display:inline-flex;align-items:center;color:var(--bbn-gold-soft);text-decoration:none;font-family:var(--bbn-klar);font-size:18px;font-weight:600;padding:9px 18px;border:1.5px solid var(--bbn-gold-linie,#A78341);border-radius:8px;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
  .bbn-nav-cta:hover{background:var(--bbn-gold-soft);color:var(--bbn-midnight);border-color:var(--bbn-gold-soft)}
  .bbn-nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:9px;background:none;border:1px solid rgba(201,163,92,.4);border-radius:10px;cursor:pointer;flex-shrink:0}
  .bbn-nav-toggle span{display:block;height:2px;width:100%;background:var(--bbn-gold-soft);border-radius:2px;transition:transform .25s,opacity .25s}
  .bbn-nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .bbn-nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .bbn-nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  @media(max-width:820px){
    .bbn-nav-toggle{display:flex}
    .bbn-nav{position:absolute;top:calc(100% + 8px);right:14px;left:14px;flex-direction:column;align-items:stretch;gap:4px;background:var(--bbn-midnight);border:1px solid rgba(201,163,92,.35);border-radius:14px;padding:12px;box-shadow:0 18px 40px rgba(15,26,51,.45);display:none;z-index:9999}
    .bbn-nav.open{display:flex}
    .bbn-navlink{display:block;padding:12px 14px;font-size:18px;border-radius:10px}
    .bbn-navlink:hover{background:rgba(201,163,92,.12)}
    .bbn-nav-cta{margin-top:6px;justify-content:center}
  }

  /* ============================================================
     KOPF, UMGEBAUT S408 (31.07.2026, Volker-Entscheid, Fassung F)
     Vorher lag der Text AUF dem Bild, unter einem 97-Prozent-Schleier.
     Volkers Wort: auf so einem Bild Schrift darstellen zu wollen, wo man
     Schwierigkeiten hat zu lesen, ist Schwachsinn. Er hat recht: die
     Zweifelnde liest nachts auf dem Handy und hat keine Reserven zum
     Entziffern. Jetzt traegt jedes Teil seine eigene Aufgabe: die Flaeche
     traegt den Text, das Band darunter traegt die Stimmung.
     Kein Schleier mehr, kein Textschatten, kein Kontrast-Kompromiss.
     Die zwei Knoepfe sind ENTFALLEN (Volker-Entscheid S408): der Kopf
     trifft, er verlangt nichts. Das deckt sich mit Anitas Regel
     Erkenntnis vor Einladung. Die Wege zu Anita (#nah) und zum Test
     (#test) stehen unveraendert weiter unten auf der Seite.
     Schriftgroessen angehoben (Volker: alles zu klein).
     ============================================================ */
  #bbn-startseite .hero{position:relative;background:var(--midnight-deep);padding-top:0} /* S632 Volker: Luft oben 40px (erst 20px, dann verdoppelt) */
  #bbn-startseite .hero .wrap{position:relative;z-index:2;padding-top:40px;padding-bottom:44px}
  #bbn-startseite .hero .inner{max-width:none;text-align:center} /* S632 Volker: am PC mittig wie am Handy */
  #bbn-startseite .hero .scene{color:var(--gold-soft);margin-bottom:20px;font-size:calc(clamp(44px,5.6vw,78px) * .55);line-height:1.3} /* S632 Volker: so gross wie h1 em */
  #bbn-startseite .hero h1{color:var(--cream);font-size:clamp(44px,5.6vw,78px);line-height:1.06}
  #bbn-startseite .hero h1 em{display:block;font-size:.55em;margin-top:.16em;color:var(--gold-soft);font-weight:500}
  #bbn-startseite .hero .sub{font-size:23px;color:#DDE3EC;margin:26px auto 10px;line-height:1.75;max-width:34em}
  #bbn-startseite .hero .who{font-family:var(--f-script);font-size:30px;color:var(--gold-soft);margin:8px 0 0;display:block}
  @media(min-width:821px){#bbn-startseite .hero .scene{max-width:720px;margin-left:auto;margin-right:auto}} /* S632 Volker: oberste Zeile am PC nie breiter als die erste weisse Zeile */

  /* Das Bildband. Drei Schichten uebereinander: Verlauf ins Dunkelblau nach
     oben, Verlauf ins Creme des Folgeabschnitts nach unten, darunter das
     Bild. Dadurch loest sich das Bild an BEIDEN Raendern weich auf, keine
     harte Kante (Volker-Wunsch S408). Der Creme-Wert #FAF5EC ist gemessen,
     nicht geraten: laeuft der Verlauf gegen die falsche Farbe, bleibt die
     Kante trotzdem sichtbar. Vier Bildgroessen, jedes Geraet laedt seine. */
  #bbn-startseite .hero-band{position:relative;height:380px;background-size:100% 100%,100% 100%,cover;background-position:center,center,center 42%;background-repeat:no-repeat,no-repeat,no-repeat;
    background-image:linear-gradient(to bottom,var(--midnight-deep) 0%,rgba(15,26,51,.55) 12%,rgba(15,26,51,0) 30%),linear-gradient(to top,var(--cream) 0%,rgba(250,245,236,.55) 12%,rgba(250,245,236,0) 32%),url('/wp-content/uploads/2026/07/bbn-hero-gefaengnis-v2-750.jpg');background-image:linear-gradient(to bottom,var(--midnight-deep) 0%,rgba(15,26,51,.55) 12%,rgba(15,26,51,0) 30%),linear-gradient(to top,var(--cream) 0%,rgba(250,245,236,.55) 12%,rgba(250,245,236,0) 32%),image-set(url('/wp-content/uploads/2026/07/bbn-hero-gefaengnis-v2-750.webp') type('image/webp'),url('/wp-content/uploads/2026/07/bbn-hero-gefaengnis-v2-750.jpg') type('image/jpeg'))}
  @media (min-resolution:2dppx){#bbn-startseite .hero-band{background-image:linear-gradient(to bottom,var(--midnight-deep) 0%,rgba(15,26,51,.55) 12%,rgba(15,26,51,0) 30%),linear-gradient(to top,var(--cream) 0%,rgba(250,245,236,.55) 12%,rgba(250,245,236,0) 32%),url('/wp-content/uploads/2026/07/bbn-hero-gefaengnis-v2-1000.jpg');background-image:linear-gradient(to bottom,var(--midnight-deep) 0%,rgba(15,26,51,.55) 12%,rgba(15,26,51,0) 30%),linear-gradient(to top,var(--cream) 0%,rgba(250,245,236,.55) 12%,rgba(250,245,236,0) 32%),image-set(url('/wp-content/uploads/2026/07/bbn-hero-gefaengnis-v2-1000.webp') type('image/webp'),url('/wp-content/uploads/2026/07/bbn-hero-gefaengnis-v2-1000.jpg') type('image/jpeg'))}}
  @media (min-width:600px){#bbn-startseite .hero-band{height:460px;background-image:linear-gradient(to bottom,var(--midnight-deep) 0%,rgba(15,26,51,.55) 12%,rgba(15,26,51,0) 30%),linear-gradient(to top,var(--cream) 0%,rgba(250,245,236,.55) 12%,rgba(250,245,236,0) 32%),url('/wp-content/uploads/2026/07/bbn-hero-gefaengnis-v2-1400.jpg');background-image:linear-gradient(to bottom,var(--midnight-deep) 0%,rgba(15,26,51,.55) 12%,rgba(15,26,51,0) 30%),linear-gradient(to top,var(--cream) 0%,rgba(250,245,236,.55) 12%,rgba(250,245,236,0) 32%),image-set(url('/wp-content/uploads/2026/07/bbn-hero-gefaengnis-v2-1400.webp') type('image/webp'),url('/wp-content/uploads/2026/07/bbn-hero-gefaengnis-v2-1400.jpg') type('image/jpeg'))}}
  @media (min-width:1200px){#bbn-startseite .hero-band{height:520px;background-image:linear-gradient(to bottom,var(--midnight-deep) 0%,rgba(15,26,51,.55) 12%,rgba(15,26,51,0) 30%),linear-gradient(to top,var(--cream) 0%,rgba(250,245,236,.55) 12%,rgba(250,245,236,0) 32%),url('/wp-content/uploads/2026/07/bbn-hero-gefaengnis-v2-2560.jpg');background-image:linear-gradient(to bottom,var(--midnight-deep) 0%,rgba(15,26,51,.55) 12%,rgba(15,26,51,0) 30%),linear-gradient(to top,var(--cream) 0%,rgba(250,245,236,.55) 12%,rgba(250,245,236,0) 32%),image-set(url('/wp-content/uploads/2026/07/bbn-hero-gefaengnis-v2-2560.webp') type('image/webp'),url('/wp-content/uploads/2026/07/bbn-hero-gefaengnis-v2-2560.jpg') type('image/jpeg'))}}

  /* Wortmarke im oberen Bildbereich, dort ist der Verlauf noch dunkel und
     traegt die hellen Marken-Toene ohne Kasten dahinter. Standard-Blatt:
     Bye Bye fett und gold, Narzisst kursiv, duenn und silber. */
  #bbn-startseite .hero-band .wortmarke{position:absolute;left:50%;top:34px;transform:translateX(-50%);display:flex;align-items:center;gap:16px;white-space:nowrap;width:max-content;text-shadow:0 2px 18px rgba(8,14,28,.75)} /* S632 Volker: Wortmarke im Bild am Handy mittig */
  #bbn-startseite .hero-band .wortmarke img{width:54px;height:54px;display:block}
  #bbn-startseite .hero-band .wortmarke .schrift{font-family:var(--f-display);font-size:clamp(30px,3.4vw,44px);line-height:1}
  #bbn-startseite .hero-band .wortmarke .byebye{color:var(--gold-soft);font-weight:700}
  #bbn-startseite .hero-band .wortmarke .narzisst{color:var(--silber-hell,#C3C9D2);font-weight:300;font-style:italic;margin-left:.24em}
  @media (min-width:900px){#bbn-startseite .hero-band .wortmarke{top:46px}#bbn-startseite .hero-band .wortmarke img{width:66px;height:66px}}
  /* S632 Scroll-Ueberblendung (Volker): erster Block bleibt unter dem Kopf stehen, das Gitter-Bild schiebt sich dahinter,
     die Schrift wird unscharf und durchsichtig. Greift nur mit Skript (Klasse ist-aktiv), nie bei "Bewegung reduzieren". */
  #bbn-startseite .bbn-buehne{position:relative;background:var(--midnight-deep)}
  #bbn-startseite .bbn-buehne.ist-aktiv .hero{position:sticky;top:var(--bbn-kopf,80px);z-index:2;background:transparent}
  #bbn-startseite .bbn-buehne.ist-aktiv .hero .inner{will-change:opacity,filter}
  #bbn-startseite .bbn-buehne.ist-aktiv .hero-band{z-index:1;height:var(--bbn-band-h,520px)}

  /* bleibt: wird ausserhalb des Kopfes weiter benutzt */
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  @media(max-width:820px){
    #bbn-startseite .hero .wrap{padding-top:40px;padding-bottom:36px}
    #bbn-startseite .hero .inner{text-align:center;padding:0 22px}
    #bbn-startseite .hero .sub{margin-inline:auto}
  }

  /* mirror */
  #bbn-startseite .soft{background:var(--cream-warm)}
  #bbn-startseite .mirror p{font-size:20px;line-height:1.6;color:var(--midnight);margin-bottom:20px}
  #bbn-startseite .mirror .name-line{font-family:var(--f-display);font-style:italic;font-size:clamp(1.5rem,3vw,2.1rem);color:var(--burgundy);line-height:1.42;margin-top:10px}

  /* name / trauma bond */
  #bbn-startseite .name-sec .read{text-align:center}
  #bbn-startseite .name-sec p{font-size:20px;line-height:1.6}
  #bbn-startseite .name-sec p em{color:var(--gold-deep);font-size:1.14em}
  #bbn-startseite .name-sec .pull{font-family:var(--f-display);font-style:italic;color:var(--midnight)}

  /* transformation */
  #bbn-startseite .weg-head{max-width:920px;margin:0 auto;text-align:left}
  #bbn-startseite .weg-intro{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:center;max-width:920px;margin:40px auto 0}
  @media(max-width:760px){#bbn-startseite .weg-head{text-align:center}}
  #bbn-startseite .weg-portrait img{width:100%;border-radius:50%;box-shadow:var(--shadow-card)}
  #bbn-startseite .sig{font-family:var(--f-script);font-size:38px;color:var(--midnight);display:block;margin-top:18px}
  @media(max-width:760px){#bbn-startseite .weg-intro{grid-template-columns:1fr;text-align:center;max-width:460px}#bbn-startseite .weg-portrait{max-width:250px;margin:0 auto}}

  /* vorher-nachher regler (before/after slider, wiederverwendbar) */
  #bbn-startseite .ba{max-width:560px;margin:48px auto 0}
  #bbn-startseite .ba-stage{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lift);background:var(--midnight-deep)}
  #bbn-startseite .ba-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  #bbn-startseite .ba-beforewrap{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
  #bbn-startseite .ba-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gold-soft);transform:translateX(-1px);pointer-events:none;box-shadow:0 0 14px rgba(0,0,0,.45)}
  #bbn-startseite .ba-divider::after{content:'\2039 \203A';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--gold);color:var(--midnight-deep);font-size:14px;font-weight:700;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:2px;box-shadow:var(--shadow-card)}
  #bbn-startseite .ba-tag{position:absolute;bottom:14px;font-size:14px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#fff;background:rgba(15,26,51,.62);padding:5px 12px;border-radius:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none}
  #bbn-startseite .ba-l{left:14px}#bbn-startseite .ba-r{right:14px}
  #bbn-startseite .ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
  #bbn-startseite .ba-note{position:absolute;left:0;right:0;bottom:0;box-sizing:border-box;margin:0;padding:15px 24px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--f-display);font-style:italic;font-size:16.5px;line-height:1.45;color:var(--gold-soft);background:var(--burgundy);border:1.5px solid var(--gold);border-radius:0 0 15px 15px;min-height:4.4em;box-shadow:0 -10px 24px -8px rgba(0,0,0,.4);transition:background-color .45s ease,border-color .45s ease}
  #bbn-startseite .ba-note.is-damals{background:var(--midnight-deep);border-color:#C6CDD8}
  #bbn-startseite .ba-tag{top:14px;bottom:auto;transform:translateX(-50%);color:var(--gold-soft);border:1.5px solid var(--gold);transition:background-color .45s ease,border-color .45s ease}
  #bbn-startseite .ba-l{left:50%;background:var(--midnight-deep);border-color:#C6CDD8}
  #bbn-startseite .ba-r{left:50%;right:auto;background:var(--burgundy)}
  #bbn-startseite .galerie-banner{display:block;width:-webkit-fit-content;width:fit-content;max-width:100%;margin:18px auto 0;padding:11px 22px;font-size:16px;font-weight:500;line-height:1.4;color:var(--gold-soft);background:var(--burgundy);border:1.5px solid var(--gold);border-radius:12px;box-shadow:0 8px 22px -10px rgba(15,26,51,.4);animation:galeriePulse 2.4s ease-in-out infinite}
  @keyframes galeriePulse{0%,100%{box-shadow:0 8px 22px -10px rgba(15,26,51,.4),0 0 0 0 rgba(201,163,92,0);transform:scale(1)}50%{box-shadow:0 8px 22px -10px rgba(15,26,51,.4),0 0 16px 1px rgba(201,163,92,.5);transform:scale(1.02)}}
  @media(prefers-reduced-motion:reduce){#bbn-startseite .galerie-banner{animation:none}}
  #bbn-startseite .weg-pulse{animation:wegPulse 2.2s ease-in-out infinite}
  @keyframes wegPulse{0%,100%{filter:drop-shadow(0 0 3px rgba(230,187,114,.45))}50%{filter:drop-shadow(0 0 18px rgba(230,187,114,.95)) drop-shadow(0 0 7px rgba(230,187,114,.6))}}
  @media(prefers-reduced-motion:reduce){#bbn-startseite .weg-pulse{animation:none}}
  #bbn-startseite .ba-stage{box-shadow:0 26px 54px -18px rgba(15,26,51,.55),0 8px 20px -10px rgba(15,26,51,.32)}
  #bbn-startseite .ba-hint{text-align:center;font-size:16px;letter-spacing:.03em;color:var(--ink-soft);margin:0 0 14px;transition:opacity .55s ease}
  #bbn-startseite .ba-hint.is-gone{opacity:0;pointer-events:none}
  #bbn-startseite .ba-hint span{color:var(--burgundy);font-weight:600;white-space:nowrap}
  #bbn-startseite .ba-tag{transition:opacity .35s ease}
  #bbn-startseite img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
  #bbn-startseite .ba-stage img,#bbn-startseite .weg-portrait img{pointer-events:none}

  /* stimmen */
  #bbn-startseite .voices-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
  #bbn-startseite .voice{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:30px 32px;box-shadow:0 2px 10px rgba(27,42,78,.05)}
  #bbn-startseite .voice .stars{color:#F0B42A;letter-spacing:.18em;font-size:20px;margin-bottom:14px}
  #bbn-startseite .voice .q{font-family:var(--f-display);font-style:italic;font-size:23px;line-height:1.4;color:var(--midnight);margin-bottom:18px}
  #bbn-startseite .voice .who{display:flex;align-items:center;gap:12px}
  #bbn-startseite .voice .av{width:46px;height:46px;border-radius:50%;background:var(--cream-deep);color:var(--midnight);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;flex:none;overflow:hidden;border:2px solid var(--gold-soft);box-shadow:0 1px 5px rgba(27,42,78,.14)}
  #bbn-startseite .voice .av img{width:100%;height:100%;object-fit:cover;display:block}
  #bbn-startseite .voice .meta b{color:var(--midnight);font-weight:600;display:block;font-size:18px}
  #bbn-startseite .voice .meta span{color:var(--ink-soft);font-size:18px}
  @media(max-width:720px){#bbn-startseite .voices-grid{grid-template-columns:1fr}}

  /* newsletter + verwandlung-warteliste (gemeinsame Karte) */
  #bbn-startseite .news-wrap,#bbn-startseite .vw-wrap{background:linear-gradient(165deg,var(--cream-warm),var(--cream-deep));border:1px solid var(--gold-soft);border-radius:20px;padding:clamp(38px,6vw,64px);text-align:center;box-shadow:var(--shadow-card);max-width:840px;margin-inline:auto}
  #bbn-startseite .vw-wrap{margin-top:46px;scroll-margin-top:96px}
  #bbn-startseite .news-wrap .fly,#bbn-startseite .vw-wrap .fly{width:42px;margin:0 auto 14px;animation:float 4s ease-in-out infinite}
  #bbn-startseite .news-wrap h2,#bbn-startseite .vw-wrap h2{margin-bottom:14px}
  #bbn-startseite .news-wrap p,#bbn-startseite .vw-wrap p{color:var(--ink-soft);max-width:500px;margin:0 auto 28px;font-size:18px}
  #bbn-startseite .news-form{display:flex;flex-direction:column;gap:12px;max-width:470px;margin:0 auto}
  #bbn-startseite .news-form input[type=text],#bbn-startseite .news-form input[type=email]{width:100%;min-width:0}
  #bbn-startseite .news-form .btn{align-self:center}
  #bbn-startseite .vw-form{display:flex;flex-direction:column;gap:12px;max-width:420px;margin:0 auto}
  #bbn-startseite .vw-form .btn{width:100%;justify-content:center}
  #bbn-startseite .news-form input[type=text],#bbn-startseite .news-form input[type=email],#bbn-startseite .vw-form input[type=text],#bbn-startseite .vw-form input[type=email]{flex:1;min-width:230px;padding:15px 18px;border:1.5px solid var(--line);border-radius:8px;background:var(--cream);font-family:var(--f-body);font-size:18px;color:var(--ink)}
  #bbn-startseite .vw-form input[type=text],#bbn-startseite .vw-form input[type=email]{width:100%;min-width:0}
  #bbn-startseite .news-form input[type=email]:focus,#bbn-startseite .news-form input[type=text]:focus,#bbn-startseite .vw-form input[type=email]:focus,#bbn-startseite .vw-form input[type=text]:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,163,92,.3)}
  #bbn-startseite .news-consent,#bbn-startseite .vw-consent{display:flex;align-items:flex-start;gap:10px;max-width:470px;margin:14px auto 0;text-align:left}
  #bbn-startseite .vw-consent{max-width:420px;margin-top:4px}
  /* Newsletter-Formular: Consent auf volle Breite (Haekchen ganz links, buendig mit den Feldern) und enger ans E-Mail-Feld */
  #bbn-startseite .news-consent{margin:4px 0 0}
  /* Vertrauenszeile weiter weg vom Knopf */
  #bbn-startseite .news-wrap .trust,#bbn-startseite .vw-wrap .trust{margin-top:24px}
  #bbn-startseite .news-consent input,#bbn-startseite .vw-consent input{width:20px;height:20px;margin-top:2px;flex-shrink:0;cursor:pointer;accent-color:var(--burgundy)}
  #bbn-startseite .vw-consent input{accent-color:var(--gold-deep)}
  #bbn-startseite .news-consent label,#bbn-startseite .vw-consent label{font-size:18px;line-height:1.5;color:var(--ink-soft);cursor:pointer}
  #bbn-startseite .news-consent a,#bbn-startseite .vw-consent a{color:var(--gold-deep);text-decoration:underline}
  #bbn-startseite .news-consent-err,#bbn-startseite .vw-consent-err{display:none;max-width:470px;margin:6px auto 0;text-align:left;color:#C0392B;font-size:18px}
  #bbn-startseite .vw-consent-err{max-width:420px}
  #bbn-startseite .news-consent-err.vis,#bbn-startseite .vw-consent-err.vis{display:block}
  #bbn-startseite .news-form.busy button,#bbn-startseite .vw-form.busy button{opacity:.7;cursor:wait}
  #bbn-startseite .news-danke,#bbn-startseite .vw-danke{max-width:480px;margin:8px auto 0;background:rgba(201,163,92,.14);border:1px solid var(--gold-soft);border-radius:12px;padding:24px 28px;color:var(--midnight);font-size:18px;line-height:1.65}
  #bbn-startseite .news-danke strong,#bbn-startseite .vw-danke strong{font-family:var(--f-display);font-size:1.25em;color:var(--burgundy);display:block;margin-bottom:8px}

  /* test band */
  #bbn-startseite .test-band .read{text-align:center}

  /* welt */
  #bbn-startseite .welt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:36px}
  #bbn-startseite .wcard{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:28px;text-align:center;text-decoration:none;color:var(--midnight);box-shadow:0 2px 8px rgba(27,42,78,.05);transition:all .18s var(--ease);display:block}
  #bbn-startseite .wcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-card);border-color:var(--gold-soft)}
  #bbn-startseite .wcard .ic{font-size:28px;display:block;margin-bottom:10px}
  #bbn-startseite .wcard h3{margin-bottom:4px}
  #bbn-startseite .wcard p{font-size:16px;color:var(--ink-soft)}

  /* willkommens-video */
  #bbn-startseite .video-frame{position:relative;max-width:760px;margin:30px auto 0;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--gold-soft);box-shadow:var(--shadow-lift);background:radial-gradient(circle at 50% 38%,var(--cream-deep),var(--cream-warm))}
  #bbn-startseite .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  #bbn-startseite .video-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--midnight-soft)}
  #bbn-startseite .video-ph .play{width:74px;height:74px;border-radius:50%;background:var(--midnight);color:var(--cream);display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:var(--shadow-card)}
  #bbn-startseite .video-ph small{font-size:16px;letter-spacing:.12em;text-transform:uppercase}

  /* Fail-safe (S332-Gesetz): versteckt wird NUR, wenn das JS laeuft und die
     Marker-Klasse bbn-js gesetzt hat. Ohne JS bleibt jeder Inhalt sichtbar. */
  #bbn-startseite.bbn-js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  #bbn-startseite.bbn-js .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){#bbn-startseite.bbn-js .reveal{opacity:1;transform:none}html{scroll-behavior:auto}}

  /* ===== Willkommens-Video (S350): normaler Player-Container in angemessener Groesse ===== */
  #bbn-startseite .vf-video{position:absolute;inset:0;width:100%;height:100%;border:0}
  /* Desktop: die bestehende .video-frame-Regel (max-width 760px, 16:9, zentriert) gilt unveraendert. */
  @media(max-width:767px){
    #bbn-startseite .video-frame{aspect-ratio:9/16;max-width:min(400px,90vw)}
  }
  /* S641 (Lennard Punkt 19, Volker: Fassung B): am PC breiter als die Textspalte, hoechstens 1092 px, immer 24 px Rand; Handy unveraendert. */
  @media(min-width:821px){
    #bbn-startseite .video-frame{width:min(1092px,calc(100vw - 48px));max-width:none;margin-left:calc(50% - min(546px,50vw - 24px))}
  }

/* WordPress-Rahmen: Blanko-Template, der body traegt unsere Flaeche selbst. */
body.bbn-startseite-body{margin:0;padding:0;background:var(--cream)}


/* ---- Anitas Welt: grosse Studio-Karten (S424, Umbau nach Volker-Ruege S424) ----
   Vorher (S423): Text als Schicht MITTEN AUF dem Bild, beide Karten dicht
   untereinander, die ganze Karte ein Link (darum Unterstreichung im Text).
   Jetzt: Titel UEBER dem Bild, Erklaer-Kasten UNTER dem Bild, eigener Knopf,
   deutlich mehr Luft zwischen den beiden Karten.
   ACHTUNG, am lebenden System gemessen (S424): der Seiten-Anker #bbn-startseite
   MUSS vor jedem Selektor stehen. Ohne ihn gewinnt "#bbn-startseite h3"
   (1.3rem) gegen eine blosse Klasse, und die Ueberschrift bleibt winzig. */
#bbn-startseite .hero-karten{display:flex;flex-direction:column;gap:clamp(52px,6.5vw,92px);margin-top:30px}
#bbn-startseite .hkarte{display:block;background:#FAF5EC;border-radius:16px;overflow:hidden;box-shadow:0 10px 34px rgba(27,42,78,.14)}
#bbn-startseite .hk-ueber{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:clamp(30px,4vw,54px);line-height:1.12;text-align:center;margin:0;padding:30px 22px 0;letter-spacing:.01em;color:#1B2A4E}
#bbn-startseite .hk-ueber::after{content:"";display:block;width:104px;height:2px;margin:16px auto 22px;background:var(--bbn-gold-linie,#A78341);opacity:.8}
#bbn-startseite .hk-bild{display:block;overflow:hidden;text-decoration:none}
#bbn-startseite .hk-bild:focus-visible{outline:3px solid var(--bbn-gold-linie,#A78341);outline-offset:3px}
#bbn-startseite .hkarte img{display:block;width:100%;height:auto;transition:transform .35s ease}
#bbn-startseite .hk-bild:hover img{transform:scale(1.015)}
#bbn-startseite .hk-kasten{display:flex;flex-direction:column;gap:12px;padding:26px 28px 32px;text-align:left}
#bbn-startseite .hk-zeile{color:#1B2A4E;font-size:clamp(18px,1.4vw,20px);line-height:1.5;margin:0}
#bbn-startseite .hk-neu{color:#7F612D;font-weight:600}
#bbn-startseite .hk-tat{margin:10px 0 0}
#bbn-startseite .hk-tat .btn{white-space:normal;text-align:center}
/* Trennung zwischen den Karten: die Luft oben plus ein feiner Goldstrich. */
#bbn-startseite .hkarte + .hkarte{position:relative}
#bbn-startseite .hkarte + .hkarte::before{content:"";position:absolute;left:50%;top:clamp(-30px,-3.4vw,-24px);transform:translateX(-50%);width:120px;height:1px;background:var(--bbn-gold-linie,#A78341);opacity:.45}
@media (max-width:760px){
  #bbn-startseite .hero-karten{gap:48px}
  #bbn-startseite .hk-ueber{font-size:clamp(26px,7.4vw,34px);padding:24px 16px 0}
  #bbn-startseite .hk-ueber::after{margin:12px auto 18px;width:84px}
  #bbn-startseite .hk-kasten{padding:20px 18px 26px}
  #bbn-startseite .hk-zeile{font-size:18px}
  #bbn-startseite .hk-tat .btn{width:100%;justify-content:center}
}

/* ---- Karten-Ueberschriften: Wortmarke METALLISCH auf hellem Grund (S424, Volker-Auftrag).
   Grund: der vorhandene Glanz-Verlauf (--bbn-gold-glanz-schrift) ist fuer den DUNKLEN Kopf
   gebaut, seine Toene sind hell und verschwinden auf dem cremefarbenen Karten-Grund.
   Die Ueberschrift trug deshalb ein FLACHES Gold und wirkte stumpf (Volker-Befund S424).
   Die Toene hier stammen aus dem gemessenen Schriftzug an der Wand im Karten-Bild
   (Gold von #B58F55 bis #E4BE87, 21.108 Bildpunkte ausgewertet).
   Gilt VORERST NUR fuer diese zwei Ueberschriften (Volker-Wort S424, "nur auf diesen zwei
   vorerst"). Bewaehrt es sich, wandert der Verlauf nach Schicht 1 und ins Standard-Blatt. ---- */
@supports (background-clip:text) or (-webkit-background-clip:text){
  #bbn-startseite .hk-ueber .bbn-wm__strong{
    background-image:linear-gradient(100deg,#8E6B2E 0%,#A78341 20%,#C9A35C 42%,#EBD3A0 52%,#C9A35C 62%,#A78341 82%,#8E6B2E 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
  #bbn-startseite .hk-ueber .bbn-wm__weak{
    background-image:linear-gradient(100deg,#6E757F 0%,#8E959E 28%,#B8BEC7 50%,#8E959E 72%,#6E757F 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
}

/* ===== S431 (05.08.2026): Vorschaubild mit goldenem Abspiel-Knopf =====
   Der Gumlet-Abspieler laedt erst auf Klick. Bis dahin steht hier das erste
   Bild des Videos. Gold ist die Marken-Verlaufsflaeche wie bei .btn-gold,
   damit der Knopf zur Seite gehoert und nicht wie ein Fremdkoerper wirkt.
   Rueckweg: Sicherung in wp-content/novamira-sandbox/sicherung/vorschau-s431/
   ================================================================== */
#bbn-startseite .vf-vorschau{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;display:block;overflow:hidden;cursor:pointer;background:var(--midnight-deep);-webkit-appearance:none;appearance:none}
#bbn-startseite .vf-vorschau img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease,filter .3s ease}
#bbn-startseite .vf-vorschau:hover img,#bbn-startseite .vf-vorschau:focus-visible img{transform:scale(1.03);filter:brightness(1.05)}
#bbn-startseite .vf-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(64px,13vw,92px);height:clamp(64px,13vw,92px);border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none;background:var(--bbn-gold-glanz,linear-gradient(135deg,#C9A35C 0%,#D9BE7E 40%,#F2DFA6 50%,#D9BE7E 60%,#C9A35C 100%));box-shadow:0 1px 0 #8C6A2F inset,0 6px 24px rgba(0,0,0,.45);transition:transform .25s ease,box-shadow .25s ease}
#bbn-startseite .vf-vorschau:hover .vf-play,#bbn-startseite .vf-vorschau:focus-visible .vf-play{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 1px 0 #8C6A2F inset,0 10px 32px rgba(0,0,0,.55)}
#bbn-startseite .vf-play svg{width:38%;height:38%;margin-left:9%;display:block;fill:var(--midnight-deep)}
#bbn-startseite .vf-vorschau:focus-visible{outline:3px solid var(--gold-soft);outline-offset:3px}
@media (prefers-reduced-motion:reduce){#bbn-startseite .vf-vorschau img,#bbn-startseite .vf-play{transition:none}#bbn-startseite .vf-vorschau:hover img{transform:none}}

/* S431, Volker-Korrektur: kein selbstgebauter Kreis mehr. Die Form kommt aus
   der Zeichnung selbst (bekannte Abspiel-Silhouette), darum hier nur noch
   Groesse, Lage und Schatten. */
#bbn-startseite .vf-play{width:clamp(74px,15vw,104px);height:auto;aspect-ratio:68/48;border-radius:0;background:none;box-shadow:none;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));transition:transform .25s ease,filter .25s ease}
#bbn-startseite .vf-vorschau:hover .vf-play,#bbn-startseite .vf-vorschau:focus-visible .vf-play{transform:translate(-50%,-50%) scale(1.07);box-shadow:none;filter:drop-shadow(0 10px 26px rgba(0,0,0,.6))}
#bbn-startseite .vf-play svg{width:100%;height:100%;margin:0;display:block}

/* S431, Volker-Vorgabe: der Knopf ist nur Symbolik. An seinem Vergleichsbild
   gemessen rund ein Zehntel der Videobreite, nicht ein Siebtel. Untergrenze 44
   Punkte, damit ein Daumen ihn auf dem Handy sicher trifft. Kein Schatten,
   so wie im Original. */
#bbn-startseite .vf-play{width:clamp(44px,10%,68px);height:auto;aspect-ratio:68/48;filter:none}
#bbn-startseite .vf-vorschau:hover .vf-play,#bbn-startseite .vf-vorschau:focus-visible .vf-play{transform:translate(-50%,-50%) scale(1.06);filter:none}

/* S445: Ton-Hinweis auf dem Video-Vorschaubild (Volker-Wunsch). Markenfarben:
   Mitternachtsblau-Grund, Gold-Schrift, Serifen-Schrift wie die Ueberschriften. */
#bbn-startseite .vf-ton{position:absolute;left:50%;bottom:clamp(10px,4%,24px);transform:translateX(-50%);background:rgba(27,42,78,.88);color:#E4C98A;font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-style:italic;font-weight:600;font-size:21px;letter-spacing:.04em;line-height:1;padding:9px 22px;border-radius:999px;border:1px solid rgba(228,201,138,.55);white-space:nowrap;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.35)}

/* ===== Haeufige Fragen (S470, GEO Woche 2, A-2026-0213; aufklappbar, mit Luft) =====
   Das #bbn-startseite-Praefix ist PFLICHT: die Grundregel "#bbn-startseite *" setzt
   Abstaende auf 0 und "#bbn-startseite h3" faerbt alle Ueberschriften dunkelblau.
   Regeln ohne dieses Praefix verlieren gegen beide (S470 gemessen). */
#bbn-startseite .bbn-faq h2{text-align:center;margin-bottom:34px;}
#bbn-startseite .bbn-faq-item{border-top:1px solid var(--line);padding:26px 0 20px;text-align:left;}
#bbn-startseite .bbn-faq-item:first-of-type{border-top:0;padding-top:12px;}
#bbn-startseite .bbn-faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
#bbn-startseite .bbn-faq-item summary::-webkit-details-marker{display:none;}
#bbn-startseite .bbn-faq-item summary::after{content:"+";font-family:var(--f-body);font-weight:300;font-size:1.6rem;color:var(--burgundy);line-height:1;flex:none;transition:transform .25s var(--ease);}
#bbn-startseite .bbn-faq-item[open] summary::after{transform:rotate(45deg);}
#bbn-startseite .bbn-faq-item h3{color:var(--burgundy);font-size:24px;margin:0;}
#bbn-startseite .bbn-faq-antwort{padding-top:16px;}
#bbn-startseite .bbn-faq-antwort p{margin:0 0 14px;font-size:20px;}


/* ---- TEST-BAND MIT SCHACHTEL, S545 (08.09.2026, Volker-Entscheid): die Test-Grafik links, der Text rechts; auf dem Handy untereinander, Bild zuerst. Jede Regel mit #bbn-startseite (Wiki 9), jede Spalte mit minmax(0,...) und min-width:0 (Wiki 3.8). ---- */
#bbn-startseite .test-band__wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:44px;align-items:center}
#bbn-startseite .test-band__bild,#bbn-startseite .test-band__text{min-width:0}
#bbn-startseite .test-band__bild img{display:block;width:100%;height:auto;max-width:540px;margin:0 auto;filter:drop-shadow(0 18px 28px rgba(27,42,78,.22))}
#bbn-startseite .test-band .test-band__text{text-align:left;margin-inline:0;max-width:none}
#bbn-startseite .test-band__text .center{text-align:left}
@media(max-width:820px){
  #bbn-startseite .test-band__wrap{grid-template-columns:minmax(0,1fr);gap:22px}
  #bbn-startseite .test-band__bild img{max-width:360px}
  #bbn-startseite .test-band .test-band__text{text-align:center;margin-inline:auto;max-width:var(--read)}
  #bbn-startseite .test-band__text .center{text-align:center}
}

/* S628 A-2026-0275: Schriftgrößen nach Blatt v1.10 (Zuschlag Cormorant). Handy etwas kleiner für die Cormorant-Stellen. */
@media(max-width:600px){
  #bbn-startseite .bbn-faq-item h3{font-size:22px}
  #bbn-startseite .voice .q{font-size:22px;line-height:1.4} /* Volker S628: Zeilenabstand am Handy enger */
}
