/* ============================================================
   NUBA EDUCATION · Variante B · Über mich (/variante-b/christoph/)
   Ergänzt variante-b.css (body.vb.vbc). Nur Seitenstile.
   ============================================================ */

/* Logo in der Nav auf Unterseiten von Anfang an sichtbar (kein Hero-Logo) */
.vbc .vb-brand img{opacity:1;transform:none;}

/* Kicker als eigener Block (sonst hebt die Zeilenhöhe des Elternblocks ihn ein paar px nach unten) */
.vbc p.kicker{display:flex;width:fit-content;}

/* ---------- 1 Hero: Text links, Porträt rechts ---------- */
.vbc-hero{min-height:0;padding:calc(var(--sec) + 5.4rem) var(--gut) var(--sec);}
.vbc-hero-grid{position:relative;width:100%;max-width:calc(var(--maxw) - 2 * var(--gut));display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center;}
.vbc-hero-copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left;}
.vbc-hero h1{margin-top:1.7rem;font-size:clamp(2.5rem,5.1vw,4.9rem);line-height:1.03;}
.vbc-hero .vb-rule{margin:1.9rem 0 0;}
.vbc-hero .hero-name{margin-top:1.6rem;}
.vbc-hero .vb-hero-sub{margin-top:1rem;max-width:52ch;}
.vbc-hero .vb-cta{justify-content:flex-start;margin-top:2rem;}
.vbc-hero .vb-trust{justify-content:flex-start;}
.vb-trust .more{color:var(--gold);font-weight:500;}
.vb-trust:hover .more{color:#FFFAEC;}
.vb-trust:hover span:last-child{color:#FFFAEC;}

.vbc-portrait{position:relative;width:100%;max-width:440px;justify-self:end;}
.vbc-portrait::before{content:"";position:absolute;inset:-18px 18px 18px -18px;border:1px solid rgba(239,201,128,.5);}
.vbc-portrait .frame{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--navy-2);box-shadow:0 40px 80px -40px rgba(0,0,0,.6);}
.vbc-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;}
.vbc-portrait .ki-badge{z-index:2;}

@media(max-width:900px){
  .vbc-hero{min-height:0;}
  .vbc-hero-grid{grid-template-columns:1fr;gap:3.2rem;justify-items:center;}
  .vbc-hero-copy{align-items:center;text-align:center;}
  .vbc-hero .vb-rule{margin:1.9rem auto 0;}
  .vbc-hero .vb-cta,.vbc-hero .vb-trust{justify-content:center;}
  .vbc-portrait{justify-self:center;max-width:400px;width:calc(100% - 18px);margin-left:18px;}
}
@media(max-width:600px){
  .vbc-hero{padding:calc(var(--sec) + 5.55rem) var(--gut) var(--sec);}
  .vbc-hero h1{font-size:clamp(2.3rem,10.4vw,2.9rem);}
  .vbc-hero .vb-cta .vb-btn{width:100%;}
  .vbc-hero .vb-trust .more{flex-basis:100%;}
  .vbc-portrait{max-width:320px;}
}

/* ---------- 2 Mein Weg: Zeitleiste mit Gold-Knoten ---------- */
.vbc-weg{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:start;}
.vbc-weg > .vb-head{position:sticky;top:7rem;}
.vbc-weg h2{max-width:14ch;}
.vbc-quote{margin-top:2rem;font-family:'Fraunces',serif;font-style:italic;font-weight:340;font-variation-settings:'wght' 340;
  font-size:clamp(1.2rem,1.9vw,1.42rem);line-height:1.42;color:var(--navy);border-left:2px solid var(--gold-mid);padding-left:1.3rem;max-width:34ch;}
.vbc-quote em{font-family:'Fraunces',serif;background:var(--grad-gold-deep);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.vbc-tl{margin:0;max-width:none;}
.vbc-tl .vb-tl-item + .vb-tl-item{margin-top:1.9rem;}
.vbc-tl .vb-tl-head{margin-bottom:.75rem;}
.vbc-tl .vb-tl-head .day{font-family:'Fraunces',serif;font-weight:340;font-variation-settings:'wght' 340;font-size:2.3rem;line-height:1;letter-spacing:-.01em;text-transform:none;
  background:var(--grad-gold-deep);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.vbc-tl .vb-tl-card{grid-template-columns:1fr;}
.vbc-tl .vb-tl-card .body{padding:1.75rem 1.7rem 1.3rem;}
.vbc-tl .vb-tl-card h3{font-size:clamp(1.35rem,2vw,1.6rem);margin-top:0;line-height:1.15;}
.vbc-tl .vb-tl-card .t{margin-top:.5rem;font-size:.98rem;line-height:1.6;color:var(--ink-soft);}
@media(max-width:900px){
  .vbc-weg{grid-template-columns:1fr;gap:3rem;}
  .vbc-weg > .vb-head{position:static;}
}
@media(max-width:560px){
  .vbc-tl .vb-tl-head .day{font-size:1.9rem;}
  .vbc-tl .vb-tl-card .body{padding:1.5rem 1.3rem 1.1rem;}
}

/* ---------- 3 Warum: Text links, große Gold-Zahlen rechts ---------- */
.vbc-warum{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center;}
.vbc-warum .vb-head .lead + .lead{margin-top:1rem;}
.vbc-warum .vb-anchors{margin-top:0;}
.vbc-warum .vb-anchor{transition:transform .45s var(--ease);}
.vbc-warum .vb-anchor:hover{transform:translateX(6px);}
@media(max-width:900px){.vbc-warum{grid-template-columns:1fr;gap:2.8rem;}}

/* ---------- 4 Intercoiffure: zwei Spalten + Zahlen ---------- */
.vbc-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:start;}
.vbc-split h2{font-size:clamp(2.15rem,4.4vw,3.6rem);margin-top:1.1rem;}
.vbc-split p:not(.kicker){margin-top:1.2rem;color:var(--ink);line-height:1.68;}
.vbc-split p strong{color:var(--navy);font-weight:600;}
.vbc-split blockquote{position:relative;margin-top:1.8rem;padding:1.5rem 1.7rem;background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 40px -28px rgba(0,14,61,.35);
  font-family:'Fraunces',serif;font-style:italic;font-weight:340;font-variation-settings:'wght' 340;font-size:1.18rem;line-height:1.45;color:var(--navy);}
.vbc-split blockquote::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--grad-gold-deep);}
.vbc-split blockquote cite{display:block;margin-top:.8rem;font-family:'Hanken Grotesk',sans-serif;font-style:normal;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);}
.vbc-col2{padding-top:clamp(0rem,4.4vw,4.6rem);}
.vbc-stats{grid-template-columns:repeat(3,1fr);}
.vbc-stats .vb-stat .big{background:var(--grad-gold-deep);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.04em;}
@media(max-width:900px){.vbc-split{grid-template-columns:1fr;gap:2.6rem;}.vbc-col2{padding-top:0;}}
@media(max-width:700px){
  .vbc-stats{grid-template-columns:repeat(3,1fr);}
  .vbc-stats .vb-stat:nth-child(3)::before{display:block;}
  .vbc-stats .vb-stat:nth-child(n+3){border-top:0;margin-top:0;}
  .vbc-stats .vb-stat{padding:1.8rem .4rem 0;}
  .vbc-stats .vb-stat + .vb-stat::before{top:1.8rem;}
  .vbc-stats .vb-stat .big{font-size:clamp(2rem,9vw,2.9rem);}
  .vbc-stats .vb-stat .lbl{font-size:.6rem;letter-spacing:.14em;}
}

/* ---------- 5 Qualifikationen: Karten mit Hover ---------- */
.vbc-quals{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:clamp(3rem,6vw,4.5rem);}
.vbc-quals li{position:relative;display:flex;flex-direction:column;justify-content:center;padding:2.06rem 1.7rem 1.5rem;color:var(--cr);
  background:linear-gradient(160deg,rgba(255,250,236,.06),rgba(255,250,236,.015));border:1px solid rgba(239,201,128,.16);
  transition:transform .45s var(--ease),border-color .45s,background .45s,box-shadow .45s var(--ease);}
.vbc-quals li:hover{transform:translateY(-6px);border-color:rgba(239,201,128,.55);background:linear-gradient(160deg,rgba(255,250,236,.1),rgba(255,250,236,.025));box-shadow:0 30px 56px -34px rgba(0,0,0,.7);}
.vbc-quals .n{font-family:'Fraunces',serif;font-style:italic;font-weight:340;font-variation-settings:'wght' 340;font-size:1.05rem;line-height:1;color:var(--gold);opacity:.85;}
.vbc-quals b{display:block;margin-top:1rem;font-family:'Fraunces',serif;font-weight:340;font-variation-settings:'wght' 340;font-size:1.32rem;line-height:1.2;color:#FFFAEC;}
.vbc-quals .by{display:block;margin-top:.45rem;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);line-height:1.5;}
.vbc-quals .t{display:block;margin-top:.75rem;font-size:.92rem;line-height:1.55;color:var(--cr-soft);}
@media(max-width:1000px){.vbc-quals{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){
  .vbc-quals{grid-template-columns:1fr;gap:.8rem;}
  .vbc-quals li{display:grid;grid-template-columns:2.2rem 1fr;column-gap:.4rem;padding:1.45rem 1.3rem 1.1rem;}
  .vbc-quals .n{grid-row:1 / span 3;padding-top:.3rem;}
  .vbc-quals b{margin-top:0;font-size:1.2rem;}
  .vbc-quals .by,.vbc-quals .t{grid-column:2;}
}

/* ---------- 6 Privatsalon: Bild + Text ---------- */
.vbc-salon{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center;}
.vbc-salon-pic{position:relative;}
.vbc-salon-pic::before{content:"";position:absolute;inset:-16px 16px 16px -16px;border:1px solid rgba(138,106,34,.4);}
.vbc-salon-pic img{position:relative;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 80%;}
.vbc-salon .vb-head h2{font-size:clamp(2rem,3.9vw,3.3rem);}
.vbc-salon .lead{margin-top:1.2rem;}
.vbc-points{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.2rem;}
.vbc-points > div{display:flex;flex-direction:column;justify-content:center;background:var(--paper);border:1px solid var(--line);padding:1.78rem 1.4rem 1.1rem;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;}
.vbc-points > div:hover{transform:translateY(-5px);box-shadow:0 26px 50px -30px rgba(0,14,61,.4);border-color:rgba(138,106,34,.35);}
.vbc-points .n{display:block;font-family:'Fraunces',serif;font-style:italic;font-weight:340;font-variation-settings:'wght' 340;font-size:1.6rem;line-height:1;
  background:var(--grad-gold-deep);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.vbc-points b{display:block;margin-top:.7rem;color:var(--navy);font-weight:600;}
.vbc-points p{margin-top:.3rem;font-size:.94rem;color:var(--ink-soft);line-height:1.55;}
.vbc-salon .vb-cta{margin-top:2rem;}
.vbc-ig{margin-top:.9rem;}
@media(max-width:900px){
  .vbc-salon{grid-template-columns:1fr;gap:3.2rem;}
  .vbc-salon-pic{max-width:420px;width:calc(100% - 16px);margin:0 auto 16px;transform:translateX(-8px);}
  .vbc-salon-pic::before{inset:16px -16px -16px 16px;}
}
@media(max-width:560px){
  .vbc-salon-pic{max-width:330px;}
  .vbc-points{grid-template-columns:1fr;gap:.8rem;}
  .vbc-salon .vb-cta .vb-btn{width:100%;}
}

/* ---------- 7 Seminare: Zeitleiste mit Eckdaten ---------- */
.vb-head.vbc-sem-head{margin-top:clamp(2.8rem,5vw,4rem);}
.vbc-meta{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:.6rem 1.6rem;margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line);}
.vbc-meta dt{font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);}
.vbc-meta dd{margin-top:.2rem;font-family:'Fraunces',serif;font-weight:340;font-variation-settings:'wght' 340;font-size:1.08rem;color:var(--navy);white-space:nowrap;}
.vbc-innung{margin-top:1rem;font-size:.86rem;line-height:1.5;color:var(--ink-soft);background:var(--creme-2);padding:.7rem .9rem;border-left:2px solid var(--gold-mid);}
.vbc-innung b{color:var(--navy);}
.vbc .vb-tl-card .vb-newline{margin-top:1rem;}
@media(max-width:1000px) and (min-width:821px){.vbc-meta{grid-template-columns:repeat(2,auto);}}
@media(max-width:480px){.vbc-meta{grid-template-columns:repeat(2,auto);gap:.7rem 1.4rem;}}

/* Sticky-Leiste über den Seminar-Karten ausblenden (wie A) */
body.vbc-nosticky .vb-sticky{transform:translateY(110%);}

@media (prefers-reduced-motion: reduce){
  .vbc-quals li:hover,.vbc-points > div:hover,.vbc-warum .vb-anchor:hover{transform:none;}
}

/* Seminar- und Zeitleistenkarten sind seit 14.10. dunkel (variante-b.css): Texte hier hell nachziehen */
.vb-tl-card .vbc-meta{border-top-color:rgba(239,201,128,.22);}
.vb-tl-card .vbc-meta dt{color:rgba(255,250,236,.55);}
.vb-tl-card .vbc-meta dd{color:#FFFAEC;}
.vb-tl-card .vbc-innung{background:rgba(255,250,236,.07);color:rgba(255,250,236,.78);border-left-color:var(--gold);}
.vb-tl-card .vbc-innung b{color:#FFFAEC;}
.vbc-tl .vb-tl-card .t{color:rgba(255,250,236,.78);}

/* Intercoiffure-Logo rechts unter «Was das für dich heißt» (17.10.2026) */
.vbc-ic-logo{display:block;width:min(215px,60%);height:auto;margin:2.2rem 0 0;opacity:.92;}
@media(max-width:900px){.vbc-ic-logo{width:200px;margin:2rem auto 0;}}