/* FREIRAUM Coaching – Website Stylesheet
   Palette und Bausteine im Look des Coaching-Portfolios (2026) */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --blue:#1C2B49;
  --blue-tint:#E7E9EE;
  --peach:#F1A384;
  --peach-tint:#FDEEE7;
  --mint:#47D4AC;
  --mint-tint:#E7F9F2;
  --ink:#15181C;
  --ink-muted:#565D66;
  --line:#E3E6EA;
  --bg:#FFFFFF;
  --surface:#FAFAFB;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ margin:0; color:var(--ink); text-wrap:balance; font-weight:700; line-height:1.16; }
p{ margin:0; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
@media (max-width:600px){ .wrap{ padding:0 20px; } }

/* ---------- Navigation ---------- */
.site-header{ position:relative; z-index:50; }
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px; max-width:1180px; margin:0 auto;
}
.logo{ font-weight:800; font-size:18px; letter-spacing:-0.01em; color:var(--blue); text-decoration:none; }
.navlinks{ display:flex; align-items:center; gap:34px; }
.navlinks a{ color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:500; }
.navlinks a:hover{ color:var(--blue); }
.navlinks a.current{ color:var(--blue); font-weight:700; }
.navlinks a.cta{
  background:var(--peach); color:var(--blue); padding:10px 20px; border-radius:100px; font-weight:600;
}
.navlinks a.cta:hover{ background:#EE9670; }

.nav-toggle{ display:none; }
.hamburger{ display:none; }
@media (max-width:860px){
  .navlinks{
    position:absolute; top:100%; left:0; right:0; background:#fff;
    flex-direction:column; align-items:flex-start; gap:0;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .navlinks a{ padding:16px 32px; width:100%; border-bottom:1px solid var(--line); }
  .navlinks a.cta{ margin:16px 32px; width:calc(100% - 64px); justify-content:center; display:flex; }
  .nav-toggle:checked ~ .navlinks{ max-height:420px; }
  .hamburger{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; cursor:pointer; flex-direction:column; gap:5px;
  }
  .hamburger span{ display:block; width:22px; height:2px; background:var(--ink); }
}

/* ---------- Accent rule ---------- */
.rule{ height:6px; background:var(--blue); }

/* ---------- Hero (Home) ---------- */
.hero{ display:grid; grid-template-columns:1.05fr 0.95fr; min-height:540px; }
.hero-text{ background:var(--blue); color:#fff; display:flex; flex-direction:column; justify-content:center; padding:64px 56px; }
.hero-image{ position:relative; overflow:hidden; min-height:280px; }
.hero-image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.eyebrow-light{
  color:#fff; font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; opacity:.85; margin-bottom:18px;
}
.hero h1{ color:#fff; font-size:clamp(32px,4.6vw,48px); max-width:14ch; }
.hero .sub{ color:#D9DEE8; font-size:17px; max-width:42ch; margin-top:18px; }
.hero .actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; }
  .hero-image{ order:1; min-height:260px; }
  .hero-text{ order:2; padding:48px 28px; }
}

/* ---------- Page header (subpages) ---------- */
.page-header{ padding:64px 0 44px; border-bottom:1px solid var(--line); }
.breadcrumb{ font-size:13.5px; color:var(--ink-muted); text-decoration:none; display:inline-flex; align-items:center; gap:6px; margin-bottom:20px; }
.breadcrumb:hover{ color:var(--blue); }
.page-header h1{ font-size:clamp(30px,4.4vw,42px); max-width:18ch; }
.page-header .sub{ color:var(--ink-muted); font-size:17px; max-width:62ch; margin-top:16px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:100px;
  font-weight:600; font-size:15px; text-decoration:none; border:1.5px solid transparent;
}
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:#28395c; }
.btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.55); }
.btn-ghost:hover{ background:rgba(255,255,255,.16); }
.btn-accent{ background:var(--peach); color:var(--blue); }
.btn-accent:hover{ background:#EE9670; }
.btn-outline{ background:transparent; color:var(--blue); border-color:var(--blue); }
.btn-outline:hover{ background:var(--blue-tint); }

/* ---------- Sections ---------- */
section{ padding:76px 0; }
section.tight{ padding:56px 0; }
section.alt{ background:var(--surface); }
.divider{ border-top:1px solid var(--line); }
.eyebrow{
  color:var(--blue); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:12px;
}
.section-title{ font-size:clamp(24px,3.2vw,32px); max-width:24ch; }
.section-lede{ color:var(--ink-muted); font-size:16px; max-width:62ch; margin-top:14px; }

/* ---------- Stats ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; }
@media (max-width:760px){ .stat-grid{ grid-template-columns:1fr; } }
.stat-card{ border-top:4px solid var(--blue); padding:26px 4px 0; }
.stat-card .big{ color:var(--blue); font-size:24px; font-weight:800; margin-bottom:8px; }
.stat-card p{ color:var(--ink-muted); font-size:14.5px; }

/* ---------- Triad (Werte) ---------- */
.triad{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:40px; }
@media (max-width:820px){ .triad{ grid-template-columns:1fr; } }
.triad-item .rule-top{ height:3px; width:100%; margin-bottom:22px; }
.triad-item .num{ font-size:22px; font-weight:800; margin-bottom:10px; }
.triad-item h3{ font-size:18px; text-transform:uppercase; letter-spacing:.02em; margin-bottom:10px; }
.triad-item p{ color:var(--ink-muted); font-size:15px; }
.c-blue .rule-top{ background:var(--blue); } .c-blue .num{ color:var(--blue); }
.c-peach .rule-top{ background:var(--peach); } .c-peach .num{ color:var(--peach); }
.c-mint .rule-top{ background:var(--mint); } .c-mint .num{ color:var(--mint); }

/* ---------- Offer cards (overview) ---------- */
.offer-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:40px; }
@media (max-width:900px){ .offer-grid{ grid-template-columns:1fr; } }
.offer-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px 26px;
  display:flex; flex-direction:column; gap:14px; text-decoration:none;
}
.offer-card .rule-top{ height:3px; width:56px; border-radius:3px; margin-bottom:6px; }
.offer-card .num{ font-size:20px; font-weight:800; }
.offer-card h3{ font-size:19px; }
.offer-card .kicker{ color:var(--ink-muted); font-size:13.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.offer-card p.desc{ color:var(--ink-muted); font-size:14.5px; }
.offer-card ul{ margin:0; padding-left:18px; color:var(--ink-muted); font-size:14px; }
.offer-card li+li{ margin-top:5px; }
.offer-card .meta{ margin-top:auto; padding-top:16px; border-top:1px dashed var(--line); font-size:13px; color:var(--ink-muted); font-weight:500; }
.offer-card .cta-link{ color:var(--blue); font-weight:600; font-size:14px; }

/* ---------- Process steps ---------- */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px; counter-reset:step; }
@media (max-width:820px){ .process{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .process{ grid-template-columns:1fr; } }
.process-step{ padding-top:18px; border-top:3px solid var(--blue); }
.process-step .step-num{ color:var(--blue); font-weight:800; font-size:20px; margin-bottom:8px; }
.process-step h4{ font-size:15.5px; font-weight:700; margin-bottom:6px; }
.process-step p{ color:var(--ink-muted); font-size:13.5px; }

/* ---------- Split (image + text) ---------- */
.split{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }
.split.reverse{ grid-template-columns:1.15fr 0.85fr; }
@media (max-width:860px){ .split.reverse{ grid-template-columns:1fr; } .split.reverse img{ order:-1; } }
.split img{ width:100%; object-fit:cover; aspect-ratio:3/4; }
.quote{ border-left:4px solid var(--blue); padding:6px 0 6px 22px; margin-top:26px; }
.quote p{ font-size:18px; font-weight:600; }

/* ---------- Stations list & Branchen pills (Über mich) ---------- */
.stations-list{ margin-top:30px; display:flex; flex-direction:column; gap:16px; }
.stations-list .row{ display:grid; grid-template-columns:120px 1fr; gap:18px; }
@media (max-width:520px){ .stations-list .row{ grid-template-columns:1fr; gap:4px; } }
.stations-list .yr{ color:var(--blue); font-weight:700; font-size:14.5px; }
.stations-list .desc{ font-size:14.5px; }
.lbl{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); font-weight:700; margin-bottom:14px; }
.pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.pill{ font-size:13px; font-weight:600; background:var(--blue-tint); color:var(--blue); padding:8px 16px; border-radius:100px; }

/* ---------- Themen & Ergebnisse ---------- */
.themen-cols{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:30px; }
@media (max-width:600px){ .themen-cols{ grid-template-columns:1fr; } }
.themen-cols ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.themen-cols li{ font-size:14.5px; padding-left:16px; position:relative; }
.themen-cols.left li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; background:var(--blue); border-radius:1px; }
.themen-cols.right li::before{ content:"\2192"; position:absolute; left:-2px; top:0; color:var(--blue); font-weight:700; }

/* ---------- Stimmen / Testimonials ---------- */
.stimmen-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:38px; }
@media (max-width:760px){ .stimmen-grid{ grid-template-columns:1fr; } }
.stimmen-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px; }
.stimmen-card p.q{ font-size:15.5px; color:var(--ink); }
.stimmen-card .who{ margin-top:16px; font-size:13.5px; color:var(--ink-muted); font-weight:600; }
.logos{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; align-items:center; }

/* ---------- Meta / info box (offer detail) ---------- */
.info-box{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 28px; }
.info-box .lbl{ margin-bottom:10px; }
.info-box ul{ margin:0; padding-left:18px; font-size:14.5px; color:var(--ink); }
.info-box li+li{ margin-top:8px; }
.note-box{
  background:var(--peach-tint); border:1px solid var(--peach); border-radius:14px;
  padding:20px 22px; font-size:14.5px; margin-top:8px;
}
.note-box a{ color:var(--blue); font-weight:600; text-decoration:underline; }

/* ---------- FAQ ---------- */
.faq{ margin-top:30px; display:flex; flex-direction:column; gap:12px; }
.faq details{ border:1px solid var(--line); border-radius:14px; padding:6px 22px; background:#fff; }
.faq summary{
  padding:16px 0; font-weight:600; font-size:15.5px; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:22px; color:var(--blue); font-weight:400; flex:none; }
.faq details[open] summary::after{ content:"\2212"; }
.faq .a{ padding:0 0 20px; color:var(--ink-muted); font-size:14.5px; max-width:68ch; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; margin-top:20px; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:32px; }
.contact-line{ display:flex; align-items:center; gap:12px; font-weight:600; font-size:16px; margin-top:14px; }
.contact-line .dash{ width:20px; height:2px; background:var(--blue); flex:none; }

/* ---------- CTA band ---------- */
.cta-band{ display:grid; grid-template-columns:1fr 1fr; min-height:420px; }
.cta-band-content{ background:var(--surface); display:flex; flex-direction:column; justify-content:center; padding:64px 56px; }
.cta-band-image{ position:relative; overflow:hidden; min-height:240px; }
.cta-band-image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  object-position:center var(--pos,50%); }
.cta-band h2{ font-size:clamp(26px,3.6vw,36px); max-width:14ch; }
.cta-band .sub{ color:var(--ink-muted); font-size:16px; max-width:44ch; margin-top:16px; }
@media (max-width:860px){
  .cta-band{ grid-template-columns:1fr; }
  .cta-band-image{ order:1; min-height:220px; }
  .cta-band-content{ order:2; padding:48px 28px; }
}

/* ---------- Footer ---------- */
footer{ background:var(--blue); color:#C6CCD8; padding:50px 0 0; }
.foot-top{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.15); }
.foot-logo{ color:#fff; font-weight:800; font-size:17px; text-decoration:none; }
.foot-links{ display:flex; gap:26px; flex-wrap:wrap; }
.foot-links a{ color:#C6CCD8; text-decoration:none; font-size:14px; }
.foot-links a:hover{ color:#fff; }
.foot-bottom{ display:flex; justify-content:space-between; padding:20px 0; font-size:12.5px; color:#8D97AB; flex-wrap:wrap; gap:8px; }
footer .bar{ height:6px; background:var(--peach); margin-top:14px; }

/* ============================================================
   ERGÄNZUNGEN FÜR DIE NEUE STRUKTUR (Firmen / Einzelcoaching)
   ============================================================ */

/* ---------- Navigation mit Untermenüs ---------- */
.navlinks .has-sub{ position:relative; }
.navlinks .has-sub > a::after{ content:"\25BE"; font-size:9px; margin-left:6px; opacity:.6; }
.navlinks .sub{
  position:absolute; top:100%; left:-18px; background:#fff;
  border:1px solid var(--line); border-radius:14px; padding:10px 0; min-width:262px;
  box-shadow:0 14px 34px rgba(20,24,32,.12); opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.navlinks .has-sub:hover .sub, .navlinks .has-sub:focus-within .sub{ opacity:1; visibility:visible; transform:translateY(0); }
.navlinks .sub a{ display:block; padding:10px 22px; font-size:14px; white-space:nowrap; font-weight:500; }
.navlinks .sub a:hover{ background:var(--surface); color:var(--blue); }
@media (max-width:860px){
  .navlinks .has-sub{ width:100%; }
  .navlinks .has-sub > a{ display:block; padding:16px 32px; width:100%; border-bottom:1px solid var(--line); }
  .navlinks .has-sub > a::after{ display:none; }
  .navlinks .sub{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; border-radius:0; padding:0; min-width:0; background:var(--surface);
  }
  .navlinks .sub a{ padding:13px 32px 13px 48px; font-size:13.5px; color:var(--ink-muted); border-bottom:1px solid var(--line); }
  .nav-toggle:checked ~ .navlinks{ max-height:760px; overflow-y:auto; }
}

/* ---------- Die Weiche: zwei Wege ---------- */
.fork{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:38px; }
@media (max-width:820px){ .fork{ grid-template-columns:1fr; } }
.fork-card{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:38px 34px;
  display:flex; flex-direction:column; gap:14px; text-decoration:none;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.fork-card:hover{ border-color:var(--blue); transform:translateY(-3px); box-shadow:0 16px 34px rgba(20,24,32,.08); }
.fork-card .top-rule{ height:4px; width:66px; border-radius:3px; }
.fork-card h3{ font-size:24px; }
.fork-card p{ color:var(--ink-muted); font-size:15.5px; }
.fork-card .go{ margin-top:auto; padding-top:12px; color:var(--blue); font-weight:700; font-size:15px; }

/* ---------- Zwei Karten nebeneinander ---------- */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; }
@media (max-width:820px){ .duo{ grid-template-columns:1fr; } }
.duo-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:32px 30px; }
.duo-card.tinted{ background:var(--surface); }
.duo-card h3{ font-size:21px; margin-bottom:12px; }
.duo-card p{ color:var(--ink-muted); font-size:15px; }
.duo-card .meta{ margin-top:18px; padding-top:16px; border-top:1px dashed var(--line); font-size:13.5px; color:var(--ink-muted); }
.duo-card .meta strong{ color:var(--blue); display:block; margin-bottom:5px; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; }

/* ---------- Zweispaltige Anlass-Liste ---------- */
.checklist{ display:grid; grid-template-columns:1fr 1fr; gap:15px 36px; margin-top:32px; list-style:none; padding:0; }
@media (max-width:760px){ .checklist{ grid-template-columns:1fr; } }
.checklist li{ position:relative; padding-left:26px; font-size:15px; }
.checklist li::before{ content:""; position:absolute; left:0; top:9px; width:8px; height:8px; background:var(--peach); border-radius:2px; }
.checklist.one{ grid-template-columns:1fr; }

/* ---------- Diskretions-Versprechen ---------- */
.pledge{ background:var(--blue); color:#fff; border-radius:22px; padding:46px 48px; }
.pledge h2{ color:#fff; font-size:clamp(24px,3.2vw,32px); }
.pledge ul{ list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:17px 36px; }
.pledge li{ position:relative; padding-left:30px; font-size:15px; color:#DCE2EC; }
.pledge li::before{ content:"\2713"; position:absolute; left:0; top:-1px; color:var(--mint); font-weight:800; }
@media (max-width:820px){ .pledge{ padding:34px 26px; } .pledge ul{ grid-template-columns:1fr; } }

/* ---------- Faktenblock ---------- */
.facts{ margin-top:32px; border-top:1px solid var(--line); }
.facts .row{ display:grid; grid-template-columns:236px 1fr; gap:24px; padding:16px 0; border-bottom:1px solid var(--line); }
@media (max-width:640px){ .facts .row{ grid-template-columns:1fr; gap:4px; } }
.facts .k{ font-weight:700; font-size:14.5px; color:var(--blue); }
.facts .v{ font-size:14.5px; color:var(--ink-muted); }

/* ---------- Zitatkarten (Painpoints) ---------- */
.quote-card p{ font-size:17px; font-weight:600; color:var(--ink); }

/* ---------- Situationsblöcke ---------- */
.situations{ margin-top:36px; display:flex; flex-direction:column; gap:28px; }
.situation{ border-left:3px solid var(--peach); padding-left:24px; }
.situation h3{ font-size:19px; margin-bottom:8px; }
.situation p{ color:var(--ink-muted); font-size:15px; max-width:72ch; }

/* ---------- Bildplatzhalter (nur Vorschau) ---------- */
.imgph{ background-size:cover; background-position:center; background-repeat:no-repeat; display:block; }
.hero-image .imgph, .cta-band-image .imgph{ position:absolute; inset:0; width:100%; height:100%; }
.cta-band-image .imgph{ background-position:center var(--pos,50%); }
.split .imgph{ width:100%; aspect-ratio:3/4; }

/* ---------- Footer in Spalten ---------- */
.foot-cols{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:34px; padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.15); }
@media (max-width:820px){ .foot-cols{ grid-template-columns:1fr 1fr; gap:30px; } }
@media (max-width:520px){ .foot-cols{ grid-template-columns:1fr; } }
.foot-col h4{ color:#fff; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; margin:0 0 14px; font-weight:700; }
.foot-col a{ display:block; color:#C6CCD8; text-decoration:none; font-size:14px; padding:5px 0; }
.foot-col a:hover{ color:#fff; }
.foot-col p{ color:#A7B0C2; font-size:13.5px; }

/* ---------- Breites Bildband ---------- */
.wide-band{ position:relative; overflow:hidden; height:420px; }
.wide-band img, .wide-band .imgph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:760px){ .wide-band{ height:260px; } }

/* ---------- Fertige Workshop-Formate ---------- */
.product{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:38px 36px; margin-top:26px; }
.product .kicker{ color:var(--ink-muted); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.product h3{ font-size:26px; margin:10px 0 6px; }
.product .lead{ color:var(--ink-muted); font-size:16px; max-width:70ch; }
.product .cols{ display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:28px; }
@media (max-width:820px){ .product{ padding:30px 24px; } .product .cols{ grid-template-columns:1fr; gap:26px; } }
.wirkung{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.wirkung li{ position:relative; padding-left:28px; font-size:14.5px; color:var(--ink); }
.wirkung li::before{ content:"\2713"; position:absolute; left:0; top:-1px; color:var(--mint); font-weight:800; }
.mehrwert{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.mehrwert li{ position:relative; padding-left:22px; font-size:14.5px; color:var(--ink-muted); }
.mehrwert li::before{ content:""; position:absolute; left:0; top:10px; width:11px; height:2px; background:var(--peach); }
.product .rahmen{ margin-top:26px; padding-top:18px; border-top:1px dashed var(--line); font-size:13.5px; color:var(--ink-muted); }
.product .rahmen strong{ color:var(--blue); }

/* ---------- Tags ---------- */
.tag{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 10px; border-radius:100px; margin-right:6px; white-space:nowrap;
}
.tag-v{ background:var(--blue-tint); color:var(--blue); }
.tag-w{ background:var(--peach-tint); color:#A2502C; }
.tag-f{ background:var(--mint-tint); color:#0F5C43; }

/* ---------- Themenkatalog ---------- */
.cluster{ margin-top:52px; }
.cluster:first-of-type{ margin-top:34px; }
.cluster > h3{
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue);
  padding-bottom:12px; border-bottom:3px solid var(--blue);
}
.cluster.c2 > h3{ border-color:var(--peach); }
.cluster.c3 > h3{ border-color:var(--mint); }
.katalog-item{ display:grid; grid-template-columns:1fr 190px; gap:24px; padding:20px 0; border-bottom:1px solid var(--line); align-items:start; }
@media (max-width:760px){ .katalog-item{ grid-template-columns:1fr; gap:10px; } }
.katalog-item h4{ font-size:16.5px; font-weight:700; margin:0 0 6px; }
.katalog-item p{ color:var(--ink-muted); font-size:14.5px; max-width:74ch; }
.katalog-item .tags{ text-align:right; padding-top:2px; }
@media (max-width:760px){ .katalog-item .tags{ text-align:left; } }
.katalog-item .dauer{ display:block; font-size:12.5px; color:var(--ink-muted); margin-top:8px; }
.katalog-item a{ color:var(--blue); font-weight:600; }

/* ---------- Legende ---------- */
.legende{ display:flex; gap:22px; flex-wrap:wrap; margin-top:26px; font-size:13.5px; color:var(--ink-muted); align-items:center; }

/* ============================================================
   PEACH UND MINT: NUR ALS KONTRASTFARBE, NICHT DEKORATIV
   ============================================================ */

/* Die Linie unter der Navigation bleibt einfarbig dunkelblau */
.rule{ height:6px; background:var(--blue); }

/* Bildbaender ohne farbige Kante */
.wide-band{ border-top:0; }

/* Ablaufschritte, Infoboxen und Kontaktzeile wieder in Dunkelblau */
.process-step{ border-top:3px solid var(--blue); }
.info-box{ border-top:0; }
.contact-line .dash{ background:var(--blue); }
footer .bar{ background:var(--peach); }

/* Mint bleibt dort, wo es etwas unterscheidet: Zitat, Ergebnisse, Haken,
   Nummerierung der drei Formate und Reaktion auf Mausberuehrung. */
.quote{ border-left:4px solid var(--mint); }
.themen-cols.right li::before{ color:var(--mint); }
.fork-card:hover{ border-color:var(--mint); }
.btn-outline:hover{ background:var(--mint-tint); border-color:var(--mint); }
.offer-card:hover{ border-color:var(--mint); }
.duo-card:hover{ border-color:var(--mint); }

/* Bild neben Text, kleiner als der volle Split */
.media-split{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; }
.media-split.left{ grid-template-columns:0.85fr 1.15fr; }
@media (max-width:860px){
  .media-split, .media-split.left{ grid-template-columns:1fr; gap:32px; }
  .media-split img, .media-split .imgph{ order:-1; }
}
.media-split img, .media-split .imgph{ width:100%; object-fit:cover; aspect-ratio:3/4; }

.cluster-lede{ color:var(--ink-muted); font-size:14.5px; max-width:70ch; margin:14px 0 6px; }

/* ---------- Bild in voller Höhe neben Text (nichts wird abgeschnitten) ---------- */
.media-row{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:center; }
@media (max-width:860px){ .media-row{ grid-template-columns:1fr; gap:30px; } }
.media-row img{ width:100%; height:auto; display:block; }
.media-row .imgph{ width:100%; aspect-ratio:3/2; }
.media-row .txt .section-title{ max-width:20ch; }

/* Hochformat im media-row: schmalere Bildspalte, damit es nicht zu hoch wird */
.media-row.hoch{ grid-template-columns:0.62fr 1.38fr; }
.media-row.hoch .imgph{ aspect-ratio:2/3; }
@media (max-width:860px){ .media-row.hoch{ grid-template-columns:1fr; } }

/* Bild im Split ohne Beschnitt, in seinen echten Proportionen */
.media-split.frei img{ aspect-ratio:auto; height:auto; }
.media-split.frei .imgph{ aspect-ratio:3/2; }

/* ---------- Kontakt: Wege nach Anliegen ---------- */
.anliegen{ margin-top:38px; border-top:1px solid var(--line); }
.anliegen-item{
  display:grid; grid-template-columns:64px 1fr 300px; gap:28px; align-items:start;
  padding:32px 0; border-bottom:1px solid var(--line);
}
.anliegen-nr{ font-size:20px; font-weight:800; color:var(--blue); line-height:1.2; padding-top:2px; }
.anliegen-txt h3{ font-size:20px; margin-bottom:10px; }
.anliegen-txt p{ color:var(--ink-muted); font-size:15px; max-width:62ch; }
.anliegen-txt strong{ color:var(--ink); }
.anliegen-meta{
  margin-top:14px; font-size:12.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--blue);
}
.anliegen-cta{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; padding-top:2px; }
.anliegen-cta .btn{ width:100%; justify-content:center; }
.anliegen-hint{ font-size:13px; color:var(--ink-muted); line-height:1.5; }
@media (max-width:900px){
  .anliegen-item{ grid-template-columns:48px 1fr; gap:18px; }
  .anliegen-cta{ grid-column:2; }
  .anliegen-cta .btn{ width:auto; }
}

/* ---------- Kombiniertes Angebot: FREIRAUM Fokustage ---------- */
.kombi{
  background:var(--blue); color:#fff; border-radius:22px; padding:48px 52px;
  display:grid; grid-template-columns:1.25fr 0.75fr; gap:52px; align-items:center;
}
.kombi h2{ color:#fff; font-size:clamp(26px,3.4vw,34px); margin-top:4px; }
.kombi p{ color:#DCE2EC; font-size:16px; max-width:56ch; margin-top:16px; }
.kombi .eyebrow-light{ margin-bottom:0; }
.kombi-fakten{ display:flex; flex-direction:column; gap:0; }
.kombi-fakt{
  padding:16px 0; border-top:1px solid rgba(255,255,255,.18);
  font-size:14px; color:#B9C2D2; line-height:1.5;
}
.kombi-fakt:last-child{ border-bottom:1px solid rgba(255,255,255,.18); }
.kombi-fakt strong{
  display:block; color:#fff; font-size:19px; font-weight:800; margin-bottom:3px; letter-spacing:-0.01em;
}
@media (max-width:900px){
  .kombi{ grid-template-columns:1fr; gap:34px; padding:34px 26px; }
}

/* ---------- Ergebnisblock: Gefühl + harte Ergebnisse ---------- */
.ergebnis{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:start; }
@media (max-width:860px){ .ergebnis{ grid-template-columns:1fr; gap:34px; } }
.ergebnis-gefuehl p{
  font-size:16px; line-height:1.65; color:var(--ink); max-width:56ch;
  border-left:4px solid var(--mint); padding-left:24px;
}
.ergebnis-liste .lbl{ margin-bottom:18px; }
.ergebnis-liste .wirkung li{ font-size:14.5px; }
.ergebnis-gefuehl .lbl{ margin-bottom:18px; }

/* ---------- Seitenkopf mit Bild daneben ----------
   Das Foto steht neben Titel und Vorspann, nicht frei darunter. */
.page-header.mit-bild .kopf-split{
  display:grid; grid-template-columns:1.08fr 0.92fr; gap:56px; align-items:center;
}
.page-header.mit-bild h1{ max-width:16ch; }
.page-header.mit-bild .sub{ max-width:46ch; }
.kopf-bild img, .kopf-bild .imgph{ width:100%; display:block; object-fit:cover; }
.kopf-bild.hoch img, .kopf-bild.hoch .imgph{ aspect-ratio:4/5; }
.kopf-bild.quer img, .kopf-bild.quer .imgph{ aspect-ratio:3/2; }
@media (max-width:860px){
  .page-header.mit-bild .kopf-split{ grid-template-columns:1fr; gap:30px; }
  .page-header.mit-bild h1, .page-header.mit-bild .sub{ max-width:none; }
}

/* Hochformat im breiten Band: Bildausschnitt nach oben ziehen,
   damit das Gesicht nicht weggeschnitten wird. */
.wide-band img, .wide-band .imgph{
  object-position:center var(--pos,50%); background-position:center var(--pos,50%); }

/* ---------- Rechtliche Seiten ---------- */
.rechts-h3{ font-size:16px; font-weight:700; margin:30px 0 8px; color:var(--blue); }
.rechts{ font-size:15px; line-height:1.7; color:var(--ink-muted); max-width:72ch; }
.rechts a{ color:var(--blue); font-weight:600; }
.rechts-liste{ margin:10px 0 0; padding-left:20px; font-size:15px; line-height:1.7; color:var(--ink-muted); max-width:72ch; }
.rechts-liste li + li{ margin-top:8px; }
.rechts-trenner{ height:1px; background:var(--line); margin:52px 0 44px; }