/* FBB – Layout für die handgebauten Steckbrief-Seiten.
   Werte übernommen aus den bestehenden Personenseiten (z. B. /markus-fricke),
   damit die Seiten optisch identisch wirken. */

:root{
  --gold:#ffd501;
  --red:#e40121;
  --dark:#2b2a2b;
  --chip:#f2f2f2;
  --line:rgba(43,42,43,.12);
  --wrap:1150px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:#fff;
  color:var(--dark);
  font-family:"Bricolage Grotesque",system-ui,-apple-system,sans-serif;
  font-size:20px;
  line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* ---------- Navigation ---------- */
.nav{ border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:60; }
.nav__in{ max-width:var(--wrap); margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:24px; }
.nav__logo img{ height:75px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:24px; margin-left:auto; }
.nav__links a{
  font-family:"Bree Serif",Georgia,serif;
  font-size:16px; letter-spacing:-.4px; text-decoration:none; white-space:nowrap;
  padding-bottom:2px; border-bottom:2px solid transparent;
}
.nav__links a:hover{ border-bottom-color:var(--dark); }
.nav__links a[aria-current="page"]{ border-bottom-color:var(--dark); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--gold); color:var(--dark); text-decoration:none;
  font-family:"Bricolage Grotesque",system-ui,sans-serif; font-size:15px; font-weight:600;
  padding:7px 28px; min-height:56px; border-radius:4px; border:none; cursor:pointer;
}
.btn:hover{ filter:brightness(.95); }
.nav__links .btn{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:15px; letter-spacing:normal; border-bottom:none;
}
.nav__links .btn:hover{ border-bottom-color:transparent; }

.nav__burger{
  display:none; margin-left:auto; width:56px; height:56px;
  align-items:center; justify-content:center;
  background:var(--gold); border:none; border-radius:4px; cursor:pointer;
}
.nav__burger span{ display:block; width:22px; height:2px; background:var(--dark); position:relative; }
.nav__burger span::before,.nav__burger span::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:var(--dark);
}
.nav__burger span::before{ top:-7px; }
.nav__burger span::after{ top:7px; }

/* ---------- Hero ---------- */
.hero{ padding:96px 0 34px; }
.hero__in{ display:flex; align-items:center; gap:28px; }
.hero__bar{ flex:0 0 6px; align-self:stretch; min-height:64px; background:var(--gold); border-radius:3px; }
.hero h1{
  font-family:"Bree Serif",Georgia,serif; font-weight:400;
  font-size:clamp(36px,6vw,64px); line-height:1.26; letter-spacing:-.4px;
  margin:0;
}

/* ---------- Steckbrief ---------- */
.sb{ padding:0 0 60px; }
.sb__in{ display:flex; gap:47px; align-items:flex-start; }
.sb__side{ flex:0 0 252px; }
.sb__card{ width:252px; height:auto; }
.sb__role{
  display:inline-block; margin-top:16px;
  background:var(--chip); border-radius:4px; padding:4px 12px;
  font-size:18px; line-height:20px; letter-spacing:.5px; text-transform:uppercase;
}
.sb__text{ flex:1 1 auto; min-width:0; }
.sb__text p{ margin:0 0 30px; }
.sb__text p:last-child{ margin-bottom:0; }
.sb__placeholder{ color:#6b6a68; }

/* ---------- CTA-Band ---------- */
.cta{ padding:43px 0 60px; text-align:center; border-top:1px solid var(--line); }
.cta h2{
  font-family:"Bree Serif",Georgia,serif; font-weight:400;
  font-size:clamp(28px,4vw,44px); line-height:1.26; letter-spacing:-.4px; margin:0 0 16px;
}
.cta p{ margin:0 auto 28px; max-width:640px; }

/* ---------- Footer ---------- */
.foot{ background:var(--gold); padding:68px 0 73px; }
.foot__in{ max-width:var(--wrap); margin:0 auto; padding:0 24px; display:flex; flex-wrap:wrap; gap:24px 40px; align-items:center; justify-content:space-between; }
.foot__logo img{ height:75px; }
.foot__social{ display:flex; gap:12px; }
.foot__social a{
  width:44px; height:44px; border-radius:50%; background:rgba(43,42,43,.08);
  display:flex; align-items:center; justify-content:center;
}
.foot__social a:hover{ background:rgba(43,42,43,.16); }
.foot__social svg{ width:20px; height:20px; fill:var(--dark); }
.foot__meta{ width:100%; display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between; font-size:16px; padding-top:28px; }
.foot__meta a{ text-decoration:none; }
.foot__meta a:hover{ text-decoration:underline; }
.foot__links{ display:flex; gap:24px; flex-wrap:wrap; }

/* ---------- Mobil ---------- */
@media (max-width:1000px){
  body{ font-size:18px; }
  .nav__logo img{ height:56px; }
  .nav{ position:sticky; }
  .nav__links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; padding:8px 24px 28px;
    border-top:1px solid var(--line); box-shadow:0 20px 40px rgba(0,0,0,.15);
    max-height:78vh; overflow-y:auto;
  }
  .nav__links a{ font-size:24px; padding:14px 0; border-bottom:1px solid var(--line); }
  .nav__links a:hover{ border-bottom-color:var(--line); }
  .nav__links .btn{ margin-top:24px; }
  .nav[data-open="true"] .nav__links{ display:flex; }
  .nav__burger{ display:flex; }
  .hero{ padding:56px 0 24px; }
  .sb__in{ flex-direction:column; gap:32px; }
  .foot{ padding:48px 0 52px; }
}