/* ============================================================
   gaston-geilenkothen.de — Personenmarke

   Machart wie die u2030-Seite (Sticky-Kopf, Split-Hero, Abschnitte,
   Karten, Haken-Listen), aber eigene Farbwelt: Navy und Gold aus dem
   Personalkongress-Flyer. Die vier Marken tragen ihre feste Farbe:
   Blau = unternehmen2030 · Gold = AZQ · Grün = coaching.ms ·
   Grau = PROMPT CAMPUS.
   ============================================================ */

:root{
  /* Navy — Basis, aus dem Prompt-Campus-Logo */
  --navy:            #162E42;
  --navy-tief:       #0E1F2E;
  --navy-hell:       #24465F;
  --navy-zart:       #3D6383;
  --navy-hauch:      #EEF2F6;

  /* Gold — Akzent */
  --gold:            #F2B640;
  --gold-dunkel:     #D99A1F;
  --gold-text:       #8A5F10;   /* dunkel genug für Text auf Weiß */
  --gold-hauch:      #FDF5E4;

  /* Feste Farben der vier Marken */
  --m-u2030:         #2F6699;
  --m-azq:           #F2B640;
  --m-azq-text:      #8A5F10;
  --m-coaching:      #3E8E5A;
  --m-coaching-dunkel:#2C6B43;
  --m-campus:        #7C8A96;
  --m-campus-text:   #55636E;

  /* Grau */
  --grau-hauch:      #F5F7F9;
  --grau-hell:       #E9EEF2;
  --linie:           #DCE4EB;
  --grau-text:       #56636E;
  --text:            #17232E;
  --weiss:           #FFFFFF;

  --schrift: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --rand: clamp(1.25rem, 5vw, 4rem);
  --breite: 1180px;
  --radius: 14px;
  --schatten: 0 2px 4px rgba(22,46,66,.04), 0 12px 32px rgba(22,46,66,.08);
  --schatten-stark: 0 4px 10px rgba(22,46,66,.09), 0 24px 56px rgba(22,46,66,.14);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:5.5rem; }

body{
  margin:0;
  font-family:var(--schrift);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.65;
  color:var(--text);
  background:var(--weiss);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--m-u2030); text-decoration:none; }
a:hover{ text-decoration:underline; }

h1,h2,h3,h4{ line-height:1.14; letter-spacing:-.022em; margin:0; font-weight:800; }
h1{ font-size:clamp(2.1rem, 1.3rem + 3.3vw, 3.75rem); }
h2{ font-size:clamp(1.65rem, 1.1rem + 2.2vw, 2.6rem); }
h3{ font-size:clamp(1.15rem, 1rem + .7vw, 1.45rem); font-weight:700; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.inhalt{ width:min(var(--breite), 100%); margin-inline:auto; padding-inline:var(--rand); }
.eng{ max-width:44rem; }

.vorlauf{
  font-size:.785rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gold-text);
  margin:0 0 .9rem;
}
.vorlauf--navy{ color:var(--navy-zart); }
.vorlauf--hell{ color:var(--gold); }

.lead{ font-size:clamp(1.08rem, 1rem + .45vw, 1.28rem); color:var(--grau-text); line-height:1.6; }

/* ---------- Knöpfe ---------- */

.knopf{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.6rem;
  border-radius:100px;
  font-weight:650; font-size:.975rem; line-height:1.2;
  border:1.5px solid transparent;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  text-decoration:none; cursor:pointer;
}
.knopf:hover{ text-decoration:none; transform:translateY(-2px); }
.knopf--voll{ background:var(--navy); color:#fff; box-shadow:0 6px 18px rgba(22,46,66,.26); }
.knopf--voll:hover{ background:var(--navy-tief); box-shadow:0 10px 26px rgba(22,46,66,.32); }
.knopf--gold{ background:var(--gold); color:var(--navy); box-shadow:0 6px 18px rgba(217,154,31,.3); }
.knopf--gold:hover{ background:var(--gold-dunkel); color:var(--navy); }
.knopf--rand{ border-color:var(--linie); color:var(--text); background:#fff; }
.knopf--rand:hover{ border-color:var(--navy); color:var(--navy); }
.knopf--hell{ background:#fff; color:var(--navy); }
.knopf--hell:hover{ background:var(--navy-hauch); }
.knopf--geist{ border-color:rgba(255,255,255,.42); color:#fff; }
.knopf--geist:hover{ border-color:#fff; background:rgba(255,255,255,.1); }
.knopf .pfeil{ transition:transform .16s ease; }
.knopf:hover .pfeil{ transform:translateX(3px); }

/* ---------- Kopfzeile ---------- */

.kopf{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.kopf.gescrollt{ border-bottom-color:var(--linie); box-shadow:0 2px 14px rgba(22,46,66,.06); }
.kopf__innen{
  width:min(var(--breite), 100%); margin-inline:auto;
  padding:.85rem var(--rand);
  display:flex; align-items:center; gap:2rem;
}
.kopf__name{
  font-weight:800; font-size:1.06rem; letter-spacing:-.02em; color:var(--navy);
  line-height:1.15;
}
.kopf__name span{
  display:block; font-size:.7rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gold-text); margin-top:.15rem;
}
.kopf__name:hover{ text-decoration:none; }
.kopf__nav{ margin-left:auto; display:flex; align-items:center; gap:1.75rem; }
.kopf__nav a{
  color:var(--grau-text); font-weight:550; font-size:.94rem;
  text-decoration:none; padding:.3rem 0;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.kopf__nav a:hover{ color:var(--navy); border-bottom-color:var(--gold); }
.kopf__nav .knopf{ padding:.6rem 1.25rem; font-size:.92rem; border-bottom:none; }
.kopf__nav .knopf--voll,
.kopf__nav .knopf--voll:hover{ color:#fff; border-bottom:none; }

.burger{
  display:none; margin-left:auto;
  width:44px; height:44px; border:1px solid var(--linie); border-radius:10px;
  background:#fff; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.burger span{ display:block; width:19px; height:2px; background:var(--text); position:relative; }
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:19px; height:2px; background:var(--text);
}
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }

/* ---------- Hero ---------- */

.hero{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:stretch;
  background:linear-gradient(168deg, var(--navy-hauch) 0%, #fff 58%);
  border-bottom:1px solid var(--linie);
}
.hero__text{
  padding:clamp(3rem,6vw,5.5rem) clamp(1.25rem,4vw,3.5rem) clamp(3rem,6vw,5.5rem) var(--rand);
  display:flex; flex-direction:column; justify-content:center;
  max-width:42rem; margin-left:auto; width:100%;
}
.hero h1{ margin-bottom:1.15rem; }
.hero h1 em{
  font-style:normal; color:var(--navy);
  background:linear-gradient(transparent 68%, rgba(242,182,64,.5) 68%);
}
.hero__rollen{
  display:flex; flex-wrap:wrap; gap:.45rem .55rem; margin-bottom:1.5rem;
}
.hero__rollen span{
  font-size:.8rem; font-weight:650; letter-spacing:.02em;
  color:var(--navy); background:#fff;
  border:1px solid var(--linie); border-radius:100px;
  padding:.3rem .85rem;
}
.hero__bild{ position:relative; overflow:hidden; min-height:clamp(340px, 48vw, 660px); background:var(--navy-hauch); }
.hero__bild img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.hero__knoepfe{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.9rem; }

/* Der Claim liegt groß auf dem Bild; der Verlauf darunter hält ihn lesbar. */
.hero__bild::after{
  content:''; position:absolute; inset:auto 0 0 0; height:62%;
  background:linear-gradient(to top, rgba(14,31,46,.88) 0%, rgba(14,31,46,.45) 46%, transparent 100%);
  pointer-events:none;
}
.hero__spruch{
  position:absolute; z-index:1; left:0; right:0; bottom:0;
  margin:0; padding:0 clamp(1.25rem,3vw,2.75rem) clamp(1.5rem,3vw,2.6rem);
  font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:clamp(1.3rem,.75rem + 1.6vw,2.1rem);
  line-height:1.22; letter-spacing:-.01em; color:#fff;
  text-shadow:0 2px 20px rgba(8,20,32,.5);
}
.hero__spruch small{
  display:block; margin-top:.6rem;
  font-family:var(--schrift); font-style:normal; font-weight:600;
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); text-shadow:none;
}

/* ---------- Kennzahlen ---------- */

.zahlen{ background:var(--navy); color:#fff; }
.zahlen__innen{
  width:min(var(--breite),100%); margin-inline:auto; padding:2.4rem var(--rand);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
.zahl b{
  display:block; font-size:clamp(1.55rem,1.15rem + 1.4vw,2.2rem); font-weight:800;
  letter-spacing:-.03em; line-height:1; color:var(--gold);
}
.zahl span{
  display:block; margin-top:.55rem; font-size:.855rem; line-height:1.4;
  color:#A8BDCE;
}

/* ---------- Abschnitte allgemein ---------- */

.abschnitt{ padding:clamp(3.75rem,7vw,6.5rem) 0; }
.abschnitt--hauch{ background:var(--grau-hauch); }
.abschnitt--navy{ background:var(--navy); color:#fff; }
.abschnitt--navy h2{ color:#fff; }
.abschnitt--navy .lead{ color:#B7CBDA; }
.abschnitt__kopf{ max-width:46rem; margin-bottom:clamp(2.25rem,4vw,3.25rem); }
.abschnitt__kopf p{ margin-top:1.1rem; }

/* ---------- Dreiklang (Venn) ---------- */

.dreiklang{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.venn{ width:100%; height:auto; }
.dreiklang__liste{ list-style:none; margin:1.8rem 0 0; padding:0; display:grid; gap:1.15rem; }
.dreiklang__liste li{ padding-left:1.15rem; border-left:3px solid var(--linie); }
.dreiklang__liste b{ display:block; font-size:1.02rem; margin-bottom:.15rem; }
.dreiklang__liste span{ font-size:.955rem; color:var(--grau-text); line-height:1.5; }
.dreiklang__liste li:nth-child(1){ border-left-color:var(--m-u2030); }
.dreiklang__liste li:nth-child(1) b{ color:var(--m-u2030); }
.dreiklang__liste li:nth-child(2){ border-left-color:var(--gold); }
.dreiklang__liste li:nth-child(2) b{ color:var(--gold-text); }
.dreiklang__liste li:nth-child(3){ border-left-color:var(--m-coaching); }
.dreiklang__liste li:nth-child(3) b{ color:var(--m-coaching-dunkel); }

/* ---------- Vier Wege ---------- */

.wege{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.35rem; }
.weg{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--linie); border-radius:var(--radius);
  padding:1.9rem 1.6rem 1.6rem; position:relative; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.weg::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px; background:var(--farbe,var(--navy));
}
.weg:hover{ transform:translateY(-4px); box-shadow:var(--schatten); border-color:#C9D5DF; text-decoration:none; }
.weg__nr{
  font-family:var(--serif); font-size:1.9rem; font-weight:600; line-height:1;
  color:var(--farbe,var(--navy)); opacity:.45; margin-bottom:.8rem;
}
.weg h3{ margin-bottom:.15rem; color:var(--text); }
.weg__fuer{
  font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--farbe-text,var(--grau-text)); margin-bottom:.8rem;
}
.weg p{ font-size:.955rem; color:var(--grau-text); }
.weg__hin{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:auto; padding-top:1.2rem;
  font-size:.885rem; font-weight:650; color:var(--farbe-text,var(--navy));
}
.weg:hover .weg__hin .pfeil{ transform:translateX(3px); }
.weg__hin .pfeil{ transition:transform .16s ease; }

.weg--u2030{    --farbe:var(--m-u2030);    --farbe-text:var(--m-u2030); }
.weg--azq{      --farbe:var(--m-azq);      --farbe-text:var(--m-azq-text); }
.weg--coaching{ --farbe:var(--m-coaching); --farbe-text:var(--m-coaching-dunkel); }
.weg--campus{   --farbe:var(--m-campus);   --farbe-text:var(--m-campus-text); }

.wege__nachsatz{
  margin-top:clamp(2rem,4vw,3rem);
  display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:center;
  background:var(--navy-hauch); border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,2rem) clamp(1.5rem,3vw,2.25rem);
}
.wege__nachsatz p{ font-size:.985rem; color:var(--navy-hell); }
.wege__nachsatz b{ color:var(--navy); }
.wege__marke{
  font-family:var(--serif); font-size:1.6rem; font-weight:600; color:var(--navy);
  line-height:1.1;
}

/* ---------- Bild-Text-Blöcke ---------- */

.block{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  border-top:1px solid var(--linie);
}
.block__bild{ position:relative; overflow:hidden; min-height:clamp(280px,36vw,520px); background:var(--grau-hell); }
.block__bild img{ width:100%; height:100%; object-fit:cover; }
.block__text{
  padding:clamp(2.75rem,5vw,4.5rem) clamp(1.5rem,4vw,3.75rem);
  display:flex; flex-direction:column; justify-content:center;
}
.block__text > div{ max-width:34rem; }
/* Das Bild steht im HTML hinter dem Text, deshalb braucht die Links-Variante order. */
.block--bild-rechts .block__bild{ order:2; }
.block--bild-rechts .block__text > div{ margin-left:auto; }
.block--bild-links .block__bild{ order:-1; }
.block--bild-links .block__text > div{ margin-right:auto; }
.block--hauch{ background:var(--grau-hauch); }
.block h2{ margin-bottom:1.1rem; }
.block p{ color:var(--grau-text); }

.haken{ list-style:none; margin:1.6rem 0 0; padding:0; }
.haken li{
  position:relative; padding-left:1.85rem; margin-bottom:.75rem;
  font-size:.975rem; line-height:1.5;
}
.haken li::before{
  content:''; position:absolute; left:0; top:.28em;
  width:1.2rem; height:1.2rem; border-radius:50%;
  border:1.5px solid var(--gold);
  background:var(--gold-hauch) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.2 7.3l2.6 2.6 5-5.4' fill='none' stroke='%238A5F10' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/.72rem .72rem no-repeat;
}
.haken--hell li::before{
  border-color:rgba(242,182,64,.6);
  background:rgba(242,182,64,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.2 7.3l2.6 2.6 5-5.4' fill='none' stroke='%23F2B640' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/.72rem .72rem no-repeat;
}

.notiz{
  margin-top:1.75rem; padding:1.05rem 1.25rem;
  background:var(--gold-hauch); border-left:3px solid var(--gold);
  border-radius:0 8px 8px 0;
  font-size:.945rem; line-height:1.5; color:#6E4C0C;
}
.notiz b{ color:#5A3E09; }

/* ---------- Bühne: Themen ---------- */

.themen{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.35rem; }
.thema{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius); padding:1.75rem 1.5rem;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.thema:hover{ background:rgba(255,255,255,.1); border-color:rgba(242,182,64,.4); transform:translateY(-3px); }
.thema h3{ color:#fff; font-size:1.1rem; margin-bottom:.55rem; }
.thema p{ font-size:.94rem; color:#B7CBDA; }
.thema__art{
  display:inline-block; margin-bottom:.9rem;
  font-size:.74rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold);
}
.formate{
  display:flex; flex-wrap:wrap; gap:.6rem; margin-top:clamp(2rem,4vw,2.75rem);
  align-items:center;
}
.formate span{
  font-size:.86rem; font-weight:600; color:#CBDAE6;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:100px; padding:.4rem 1rem;
}

/* ---------- Person ---------- */

.person{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.person__bild img{
  width:min(320px,100%); border-radius:50%;
  border:6px solid #fff; box-shadow:var(--schatten-stark);
  margin-inline:auto;
}
.person h2{ margin-bottom:.4rem; }
.person__rollen{
  font-size:.92rem; font-weight:600; color:var(--gold-text);
  letter-spacing:.01em; margin-bottom:1.4rem;
}
.person__zitat{
  margin:1.6rem 0 0; padding-left:1.15rem;
  border-left:3px solid var(--gold);
  font-family:var(--serif); font-style:italic; font-size:1.13rem;
  line-height:1.45; color:var(--text);
}

/* ---------- Bücher ---------- */

.buch{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,3vw,2.5rem);
  align-items:start;
  background:#fff; border:1px solid var(--linie); border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.25rem);
  box-shadow:var(--schatten);
}
.buch + .buch{ margin-top:1.5rem; }
.buch img{
  width:clamp(110px,14vw,150px); height:auto; border-radius:3px;
  box-shadow:0 3px 8px rgba(22,46,66,.14), 0 12px 28px rgba(22,46,66,.16);
  transition:transform .2s ease;
}
.buch img:hover{ transform:translateY(-4px) rotate(-1.2deg); }
.buch__jahr{
  font-size:.78rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold-text); margin-bottom:.45rem;
}
.buch h3{ margin-bottom:.6rem; }
.buch p{ font-size:.975rem; color:var(--grau-text); }
.buch__verlag{ font-size:.87rem; color:var(--grau-text); margin-top:.9rem; }

/* ---------- Klappbereich (Werdegang) ---------- */

.klapp{
  margin-top:1.9rem;
  border-top:1px solid var(--linie); border-bottom:1px solid var(--linie);
}
.klapp summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 0; cursor:pointer;
  font-weight:650; font-size:.98rem; color:var(--navy);
  list-style:none;
}
.klapp summary::-webkit-details-marker{ display:none; }
.klapp summary::after{
  content:''; flex:0 0 auto;
  width:1.5rem; height:1.5rem; border-radius:50%;
  border:1.5px solid var(--linie);
  background:
    linear-gradient(var(--navy),var(--navy)) center/.62rem .11rem no-repeat,
    linear-gradient(var(--navy),var(--navy)) center/.11rem .62rem no-repeat;
  transition:transform .22s ease, border-color .22s ease;
}
.klapp[open] summary::after{ transform:rotate(135deg); border-color:var(--gold); }
.klapp summary:hover{ color:var(--navy-hell); }
.klapp summary:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; border-radius:4px; }
.klapp__inhalt{ padding:.35rem 0 1.75rem; }
.klapp__titel{
  font-size:.79rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grau-text); margin:1.5rem 0 .9rem;
}
.klapp__inhalt > .klapp__titel:first-child{ margin-top:.5rem; }
.klapp__text{ font-size:.93rem; color:var(--grau-text); line-height:1.55; }

.zertifikate{
  list-style:none; margin:0; padding:0;
  columns:2; column-gap:2rem;
}
.zertifikate li{
  break-inside:avoid; position:relative; padding-left:.95rem; margin-bottom:.5rem;
  font-size:.91rem; line-height:1.45; color:var(--grau-text);
}
.zertifikate li::before{
  content:''; position:absolute; left:0; top:.6em;
  width:.32rem; height:.32rem; border-radius:50%; background:var(--gold);
}

.vita{ list-style:none; margin:0; padding:0; }
.vita li{
  display:grid; grid-template-columns:7.5rem 1fr; gap:1rem;
  padding:.55rem 0; border-bottom:1px solid var(--grau-hell);
  font-size:.93rem; line-height:1.5; color:var(--grau-text);
}
.vita li:last-child{ border-bottom:none; }
.vita__zeit{ font-weight:650; color:var(--gold-text); font-variant-numeric:tabular-nums; }
.vita b{ color:var(--text); font-weight:650; }

/* ---------- Kontakt ---------- */

.kontakt{ background:var(--navy-tief); color:#fff; }
.kontakt h2{ color:#fff; }
.kontakt .lead{ color:#B7CBDA; }
.kontakt__raster{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.kontakt__wege{ display:flex; flex-direction:column; gap:1.2rem; margin-top:2rem; }
.kontakt__weg{ display:flex; gap:.9rem; align-items:flex-start; }
.kontakt__weg svg{ flex:0 0 auto; margin-top:.2rem; color:var(--gold); }
.kontakt__weg a{ color:#fff; font-weight:600; font-size:1.05rem; }
.kontakt__weg span{ display:block; font-size:.855rem; color:#94AEC4; margin-top:.1rem; }
.kontakt__karte{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:1.4rem 1.5rem;
}
.kontakt__karte b{ display:block; font-size:.79rem; letter-spacing:.11em; text-transform:uppercase; color:var(--gold); margin-bottom:.45rem; }
.kontakt__karte span{ font-size:.985rem; color:#DCE7F0; line-height:1.5; }
.sozial{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.5rem; }
.sozial a{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.88rem; font-weight:600; color:#DCE7F0;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:100px; padding:.45rem 1rem;
  transition:background .16s ease, border-color .16s ease;
}
.sozial a:hover{ background:rgba(255,255,255,.12); border-color:var(--gold); text-decoration:none; }

/* ---------- Fuß ---------- */

.fuss{ background:#0A1826; color:#8AA6BE; padding:clamp(2.75rem,5vw,4rem) 0 2rem; font-size:.9rem; }
.fuss__marken{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
  padding-bottom:2rem; margin-bottom:1.75rem; border-bottom:1px solid rgba(255,255,255,.1);
}
.marke b{ display:block; color:#fff; font-size:.98rem; font-weight:700; margin-bottom:.25rem; }
.marke span{ display:block; font-size:.855rem; line-height:1.45; margin-bottom:.5rem; }
.marke a{ font-size:.855rem; font-weight:600; }
.marke--u2030 a{ color:#7FB0DC; }
.marke--azq a{ color:var(--gold); }
.marke--coaching a{ color:#7FC79B; }
.marke--campus a{ color:#B4C2CD; }
.fuss__unten{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; }
.fuss__name{ color:#fff; font-weight:700; }
.fuss__links{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.fuss__links a{ color:#8AA6BE; }
.fuss__links a:hover{ color:#fff; }
.fuss__notiz{ margin-top:1.5rem; font-size:.8rem; color:#68859E; line-height:1.5; }

/* ---------- Einblenden beim Scrollen ---------- */

/* Ohne JavaScript bleibt alles sichtbar — die Klasse kommt erst per Skript dazu. */
.js-animiert .rein{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.js-animiert .rein.sichtbar{ opacity:1; transform:none; }
.js-animiert .rein:nth-child(2){ transition-delay:.08s; }
.js-animiert .rein:nth-child(3){ transition-delay:.16s; }
.js-animiert .rein:nth-child(4){ transition-delay:.24s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js-animiert .rein{ opacity:1; transform:none; transition:none; }
  .knopf:hover, .weg:hover, .buch img:hover, .thema:hover{ transform:none; }
}

/* Beim Drucken zählt nur der Inhalt — nichts darf wegen einer Animation fehlen. */
@media print{
  .js-animiert .rein{ opacity:1 !important; transform:none !important; }
  .kopf{ position:static; }
  .burger{ display:none; }
}

/* ---------- Schmale Fenster ---------- */

@media (max-width:1000px){
  .wege{ grid-template-columns:1fr 1fr; }
  .themen{ grid-template-columns:1fr; }
  .dreiklang,.person,.kontakt__raster{ grid-template-columns:1fr; }
  .person__bild img{ width:min(240px,60%); }
  .zahlen__innen{ grid-template-columns:1fr 1fr; }
  .fuss__marken{ grid-template-columns:1fr 1fr; }
  .wege__nachsatz{ grid-template-columns:1fr; gap:.75rem; }
  .zertifikate{ columns:1; }
}

@media (max-width:820px){
  .kopf__nav{
    position:fixed; inset:70px 0 auto; z-index:99;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--linie);
    padding:.5rem var(--rand) 1.5rem;
    box-shadow:0 14px 30px rgba(22,46,66,.12);
    display:none;
  }
  .kopf__nav.offen{ display:flex; }
  .kopf__nav a{ padding:.85rem 0; border-bottom:1px solid var(--grau-hell); font-size:1rem; }
  .kopf__nav a:hover{ border-bottom-color:var(--grau-hell); }
  .kopf__nav .knopf{ margin-top:1rem; justify-content:center; padding:.85rem 1.5rem; }
  .burger{ display:flex; }

  .hero{ grid-template-columns:1fr; }
  .hero__bild{ order:-1; min-height:clamp(300px,64vw,460px); }
  .hero__text{ max-width:none; padding:2.75rem var(--rand) 3.25rem; }

  .zahlen__innen{ gap:1.35rem; padding:2rem var(--rand); }
  .vita li{ grid-template-columns:1fr; gap:.15rem; }

  .block{ grid-template-columns:1fr; }
  .block__bild{ order:-1 !important; min-height:clamp(240px,52vw,360px); }
  .block__text{ padding:2.5rem var(--rand) 3rem; }
  .block__text > div{ max-width:none; }

  .buch{ grid-template-columns:1fr; justify-items:start; }
}

@media (max-width:560px){
  .wege{ grid-template-columns:1fr; }
  .zahlen__innen{ grid-template-columns:1fr; }
  .fuss__marken{ grid-template-columns:1fr; gap:1.25rem; }
}

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */

.rechtstext{ padding:clamp(3rem,6vw,5rem) 0 clamp(3.5rem,7vw,6rem); }
.rechtstext h1{ font-size:clamp(1.9rem,1.4rem + 2vw,2.7rem); margin-bottom:.75rem; }
.rechtstext h2{ font-size:1.3rem; margin:2.5rem 0 .85rem; }
.rechtstext h3{ font-size:1.05rem; margin:1.75rem 0 .6rem; }
.rechtstext p,.rechtstext li{ color:var(--grau-text); font-size:.99rem; }
.rechtstext ul{ padding-left:1.25rem; margin:0 0 1.15em; }
.rechtstext li{ margin-bottom:.4rem; }
.rechtstext .zurueck{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.9rem; font-weight:600; margin-bottom:2rem; color:var(--navy);
}