/* ============================================================
   KuBra Consult – zentrales Stylesheet (kubra.css)
   Selbst gehostete Schriften: keine Verbindung zu Google Fonts
   ============================================================ */

@font-face{
  font-family:'Sora';
  src:url('../fonts/Sora-var.woff2') format('woff2');
  font-weight:100 800;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Sans';
  src:url('../fonts/IBMPlexSans-var.woff2') format('woff2');
  font-weight:100 700;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight:500;
  font-display:swap;
}

:root{
  --navy:#0B1B3A;
  --navy-2:#122650;
  --royal:#4876FF;
  --paper:#F7F9FC;
  --ink:#24303F;
  --mist:#8DA2C0;
  --line:rgba(72,118,255,.35);
  --white:#FFFFFF;
  --maxw:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;font-size:17px}
h1,h2,h3{font-family:'Sora',sans-serif;line-height:1.15;color:var(--navy)}
a{color:var(--royal);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--royal);display:block;margin-bottom:14px}
.leitlinie{height:2px;border:0;background:linear-gradient(90deg,var(--royal) 0,var(--royal) 72px,var(--line) 72px,transparent 100%);margin:18px 0 0}
/* Navigation */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,27,58,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(141,162,192,.18)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:28px}
.nav-logo{display:flex;align-items:center;gap:12px;font-family:'Sora',sans-serif;font-weight:700;color:var(--white);font-size:18px}
.nav-logo img{height:34px;width:auto;display:block}
.nav-logo:hover{text-decoration:none;color:var(--white)}
.nav-links{margin-left:auto;display:flex;gap:26px;align-items:center}
.nav-links a{color:#D7E1F5;font-size:15px;font-weight:500}
.nav-links a:hover{color:var(--white);text-decoration:none}
.lang{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.1em;color:var(--mist)}
.lang a{color:var(--mist)}
.lang a.aktiv{color:var(--white)}
/* Hero (Startseiten) */
.hero{background:var(--navy);color:var(--white);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(72,118,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(72,118,255,.07) 1px,transparent 1px);background-size:56px 56px;pointer-events:none}
.hero-inner{max-width:var(--maxw);margin:0 auto;padding:88px 24px 72px;display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center;position:relative}
.hero h1{color:var(--white);font-size:clamp(30px,4.2vw,46px);font-weight:700;margin:0 0 20px}
.hero h1 em{font-style:normal;color:var(--royal)}
.hero p{color:#C4D2EC;font-size:18px;max-width:56ch}
.hero-cta{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 26px;border-radius:6px;font-weight:600;font-size:16px;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primaer{background:var(--royal);color:var(--white);box-shadow:0 6px 20px rgba(72,118,255,.35)}
.btn-sekundaer{border:1.5px solid rgba(141,162,192,.55);color:var(--white)}
.btn-sekundaer:hover{border-color:var(--white)}
.hero-foto{position:relative;justify-self:end}
.hero-foto img{width:100%;max-width:340px;display:block;border-radius:8px;position:relative;z-index:1}
.hero-foto::after{content:"";position:absolute;inset:18px -18px -18px 18px;border:2px solid var(--royal);border-radius:8px;z-index:0}
.stationen{background:var(--navy-2);border-top:1px solid rgba(141,162,192,.15)}
.stationen-inner{max-width:var(--maxw);margin:0 auto;padding:18px 24px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.14em;color:var(--mist);text-transform:uppercase}
.stationen-inner span.trenn{color:var(--royal)}
/* Sektionen & Karten */
section{padding:84px 0}
.sek-kopf{max-width:680px;margin-bottom:48px}
.sek-kopf h2{font-size:clamp(26px,3vw,34px)}
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.karte{background:var(--white);border:1px solid #E3E9F4;border-left:3px solid transparent;border-radius:8px;padding:28px 26px;transition:border-color .2s,box-shadow .2s,transform .2s}
.karte:hover{border-left-color:var(--royal);box-shadow:0 10px 30px rgba(11,27,58,.08);transform:translateY(-3px)}
.karte h3{font-size:18px;margin-bottom:10px}
.karte p{font-size:15.5px;color:#4A5768}
.karte .kat{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--royal);display:block;margin-bottom:12px}
/* Kontakt */
.kontakt{background:var(--navy);color:var(--white)}
.kontakt h2,.kontakt h3{color:var(--white)}
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.kontakt p,.kontakt address{color:#C4D2EC;font-style:normal;font-size:16.5px}
.kontakt a{color:#9DB8FF}
.kontakt .logo{height:56px;width:auto;margin-bottom:22px;display:block}
.k-zeile{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid rgba(141,162,192,.16)}
.k-zeile .k-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);min-width:110px;padding-top:3px}
/* Unterseiten: Seitenkopf + Textseiten (Recht) */
.seitenkopf{background:var(--navy);color:var(--white)}
.seitenkopf-inner{max-width:var(--maxw);margin:0 auto;padding:64px 24px 48px}
.seitenkopf h1{color:var(--white);font-size:clamp(28px,3.6vw,40px)}
.rechtstext{max-width:820px;margin:0 auto;padding:64px 24px 84px}
.rechtstext h2{font-size:22px;margin:2.2em 0 .7em}
.rechtstext h3{font-size:17.5px;margin:1.6em 0 .5em}
.rechtstext p{margin:0 0 1em;font-size:16.5px}
.rechtstext ul{margin:0 0 1.2em 1.3em}
.rechtstext li{margin-bottom:.5em;font-size:16.5px}
.rechtstext address{font-style:normal;margin-bottom:1em}
/* Footer */
.fuss{background:#081226;color:var(--mist);font-size:14px}
.fuss-inner{max-width:var(--maxw);margin:0 auto;padding:34px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.fuss a{color:var(--mist);text-decoration:underline}
.fuss a:hover{color:var(--white)}
.zaehler{background:var(--white);border-radius:6px;padding:6px 12px;display:inline-block}
/* Motion & Responsiv & Fokus */
@media (prefers-reduced-motion:no-preference){
  .hero-inner>*{opacity:0;transform:translateY(14px);animation:auf .7s ease forwards}
  .hero-inner>*:nth-child(2){animation-delay:.15s}
  @keyframes auf{to{opacity:1;transform:none}}
}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;padding:64px 24px 56px}
  .hero-foto{justify-self:start}
  .karten{grid-template-columns:1fr 1fr}
  .kontakt-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .karten{grid-template-columns:1fr}
  .nav-links a:not(.lang a){display:none}
}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--royal);outline-offset:2px}
/* Beraterprofil-Seiten */
.profil-grid{display:grid;grid-template-columns:340px 1fr;gap:44px;align-items:start}
.seitenleiste{background:var(--navy);color:#C4D2EC;border-radius:10px;padding:30px 28px;position:sticky;top:84px}
.seitenleiste img.portrait{width:200px;max-width:70%;border-radius:8px;display:block;margin:0 auto 10px}
.seitenleiste h3{color:var(--white);font-size:13px;font-family:'IBM Plex Mono',monospace;letter-spacing:.2em;text-transform:uppercase;font-weight:500;margin:2.6em 0 10px;padding-bottom:8px;border-bottom:1px solid rgba(141,162,192,.25)}
.seitenleiste h3:first-of-type{margin-top:1.4em}
.seitenleiste p,.seitenleiste li{font-size:14.5px;line-height:1.6}
.seitenleiste ul{list-style:none;margin:0;padding:0}
.seitenleiste li{padding-left:18px;position:relative;margin-bottom:6px}
.seitenleiste li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--royal);border-radius:2px}
.seitenleiste a{color:#9DB8FF}
.zeitleiste{list-style:none;margin:0;padding:0;position:relative}
.zeitleiste::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--royal),var(--line))}
.zeitleiste li{position:relative;padding:0 0 26px 34px}
.zeitleiste li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:3px solid var(--royal)}
.zeitleiste .datum{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.08em;color:var(--royal);display:block;margin-bottom:3px}
.zeitleiste h3{font-size:17px;margin-bottom:2px}
.zeitleiste .ort{color:#4A5768;font-size:15px}
.profil-abschnitt{margin-bottom:44px}
.profil-abschnitt h2{font-size:22px;margin:1.4em 0 18px}
.profil-abschnitt:first-child h2{margin-top:0}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tag{background:var(--white);border:1px solid #E3E9F4;border-left:3px solid var(--royal);border-radius:6px;padding:9px 14px;font-size:14.5px}
@media (max-width:900px){.profil-grid{grid-template-columns:1fr}.seitenleiste{position:static}}