/* ============================================================
   Inter (variable), LOKAL selbst gehostet (kein Google-Abruf).
   Quelle: @fontsource-variable/inter (SIL Open Font License).
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================
   FARBWELT, exakt aus der Logo-Datei (logo.png) ausgelesen.
   ============================================================ */
:root{
  --primary:      #008035;  /* CHI-Grün, exakt aus dem Logo */
  --primary-dark: #0A4A22;  /* dunkles Grün: Footer, Hover */
  --primary-soft: #E6F2EA;
  --logo-blue:    #00559E;  /* Logo-Blau (sparsam einsetzbar) */
  --logo-red:     #CC1517;  /* Logo-Rot (sparsam einsetzbar) */
  --accent:       #8E631D;  /* Warmer Goldakzent, dunkel genug für Text (WCAG AA) */
  --accent-light: #C08A2D;  /* Der frühere Goldton, nur für Flächen ohne Text */
  --gold:         #F3C969;  /* Helles Gold: Sterne auf dunklem Grün */
  --gold-on-green:#FFE3A3;  /* Hellerer Ton für Text auf dem grünen Verlauf */
  --accent-soft:  #F7EFDD;
  --bg:           #F8FAF6;
  --surface:      #FFFFFF;
  --ink:          #1B2E22;
  --muted:        #5C6B60;
  --line:         #E3E8DF;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(20,48,79,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:88px 0}
section[id]{scroll-margin-top:96px}
/* Abstandsskala: 8 / 16 / 24 / 32 / 48 / 56 / 64 / 88 px
   16  kleine Notiz unter einem Baustein
   24  Anschlussblock, der zum Baustein davor gehoert
   48  grosser Baustein nach dem Titelblock
   56  Abstand vom Seitenkopf zum ersten Abschnitt (Polster des Abschnitts)
   64  Abstand zwischen zwei Zonen
   88  Innenabstand eines Abschnitts oben und unten
   Das erste Element eines Abschnitts traegt keinen eigenen oberen Abstand,
   den Abstand macht allein das Polster des Abschnitts. */
section>.wrap>*:first-child{margin-top:0}

h1{font-size:clamp(30px,4.2vw,48px);font-weight:800;line-height:1.12;letter-spacing:-.02em}
h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;line-height:1.15;letter-spacing:-.01em;margin-bottom:14px}
h3{font-size:20px;font-weight:700}
p.lead{font-size:18px;color:var(--muted);max-width:640px}
.eyebrow{display:block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:600;font-size:16px;transition:.2s;cursor:pointer;border:0}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 18px rgba(30,78,121,.28)}
.btn-primary:hover{background:var(--primary-dark)}
.btn-ghost{background:transparent;color:var(--primary);border:2px solid var(--primary)}
.btn-ghost:hover{background:var(--primary-soft)}
.btn-accent{background:var(--accent);color:#fff}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--muted)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.num{font-size:14px;font-weight:800;color:var(--accent);letter-spacing:.1em}

/* Header */
header.site{position:sticky;top:0;z-index:50;background:rgba(250,248,244,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:17px;letter-spacing:-.01em}
.logo img{height:42px;width:auto}
.nav ul{display:flex;gap:28px;list-style:none;font-size:15px;font-weight:500;color:var(--muted)}
.nav ul a:hover{color:var(--primary)}
.nav .btn.header-cta{padding:10px 20px;font-size:14.5px}
.nav-right{display:flex;align-items:center;gap:14px}

/* Hamburger + Mobile-Menü */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:transparent;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;margin:0 auto;background:var(--ink);transition:.25s}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none;flex-direction:column;gap:4px;padding:14px 24px 32px;background:var(--surface);position:fixed;top:73px;left:0;right:0;bottom:0;z-index:49;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@media(max-width:700px){.mobile-nav{padding-bottom:72px}}
.mobile-nav a{padding:12px 6px;font-size:16px;font-weight:600;border-bottom:1px solid var(--line)}
.mobile-nav a.book{margin-top:12px;border:0;justify-content:center}
body.nav-open .mobile-nav{display:flex}
body.nav-open header.site{background:var(--surface);backdrop-filter:none;position:fixed;top:0;left:0;right:0}
@media(max-width:900px){
  .nav ul{display:none}
  .nav-toggle{display:flex}
  .nav .btn.header-cta{display:none}
}

/* Hero */
.hero{padding:84px 0 72px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 600px at 78% 30%,var(--primary-soft),transparent 70%);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;position:relative}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.hero p.lead{margin:20px 0 30px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.hero-visual{position:relative}
.hero-panel{border-radius:var(--radius);background:linear-gradient(160deg,var(--primary-soft),#D7ECDC 60%,var(--accent-soft));aspect-ratio:4/4.4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;padding:40px;box-shadow:var(--shadow)}
.hero-panel img{width:min(78%,300px);height:auto;filter:drop-shadow(0 6px 18px rgba(10,74,34,.14))}
.hero-panel .panel-text{color:var(--primary-dark);font-size:15.5px;font-weight:600;max-width:280px;line-height:1.5}
.float-card{position:absolute;background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:14px 18px;font-size:13.5px}
.float-card.rating{bottom:26px;left:-28px}
.float-card.rating .stars{color:var(--gold);font-size:15px;letter-spacing:2px}
.float-card.since{top:22px;right:-34px;font-weight:700;color:var(--primary)}
@media(max-width:900px){.float-card.rating{left:8px}.float-card.since{right:8px}}

/* Angebote */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.cards3.cards-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.cards3,.cards3.cards-2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column;gap:14px;transition:.25s;position:relative}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--primary)}
.card .tag{position:absolute;top:26px;right:24px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);background:var(--primary-soft);padding:4px 10px;border-radius:999px}
.card p{color:var(--muted);font-size:15.5px;flex:1}
.card .more{font-weight:700;color:var(--primary);font-size:15px}
.card{position:relative;cursor:pointer}
.card .more::after{content:" →";display:inline-block;transition:transform .2s}
.card .more::before{content:"";position:absolute;inset:0}
.card:hover .more::after{transform:translateX(5px)}

/* Ablauf */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px}
.step .bignum{font-size:44px;font-weight:800;color:var(--primary-soft);-webkit-text-stroke:1.5px var(--primary);line-height:1;margin-bottom:16px}
.step p{color:var(--muted);font-size:15.5px;margin:8px 0 16px}
.step .chips{display:flex;gap:8px;flex-wrap:wrap}
.step .chip{font-size:12.5px;padding:5px 12px}

/* Psychophysiognomik */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.usp{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-radius:var(--radius);padding:34px 32px;box-shadow:var(--shadow)}
.usp h3{font-size:19px;margin-bottom:14px}
.usp ul{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:15.5px}
.usp li{display:flex;gap:10px;align-items:flex-start}
.usp li::before{content:"✓";color:#F3C969;font-weight:800;flex-shrink:0}
.usp .foot{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);font-size:14px;opacity:.9}

/* Team */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
@media(max-width:900px){.team-grid{grid-template-columns:1fr}}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;text-align:center;transition:.25s}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.avatar{width:96px;height:96px;border-radius:50%;margin:0 auto 16px;overflow:hidden;background:linear-gradient(135deg,var(--primary-soft),var(--accent-soft));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;color:var(--primary);border:3px solid var(--surface);box-shadow:0 4px 14px rgba(20,48,79,.14)}
.avatar img{width:100%;height:100%;object-fit:cover}
.tcard .role{font-size:13.5px;color:var(--muted);margin:4px 0 10px}
.tcard .focus{font-size:14.5px;color:var(--muted);min-height:66px}
.tcard .btn{margin-top:14px;padding:10px 22px;font-size:14px}

/* Stimmen */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;font-size:15px;color:var(--ink);display:flex;flex-direction:column;gap:16px}
.quote .stars{color:var(--gold);letter-spacing:2px}
.quote .who{font-weight:700;font-size:14px;color:var(--muted)}
.rating-banner{display:inline-flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:10px 22px;font-weight:700;margin-top:16px}
.rating-banner .stars{color:var(--gold);letter-spacing:2px}

/* FAQ */
.faq{max-width:760px;margin:48px auto 0}
details{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
details:last-child{margin-bottom:0}
summary{padding:20px 24px;font-weight:700;font-size:16px;cursor:pointer;list-style:none;display:flex;gap:14px;align-items:center}
summary::-webkit-details-marker{display:none}
summary .num{min-width:34px}
summary::after{content:"+";margin-left:auto;font-size:22px;color:var(--accent);font-weight:400}
details[open] summary::after{content:"–"}
details .body{padding:0 24px 22px 72px;color:var(--muted);font-size:15.5px}

/* Schluss-CTA / Kontakt */
.final{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-radius:24px;padding:64px 56px;text-align:center;position:relative;overflow:hidden;isolation:isolate}
.final::before{content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:640px;height:340px;background:radial-gradient(closest-side,rgba(243,201,105,.22),transparent);pointer-events:none;z-index:0}
.final>*{position:relative;z-index:1}
@media(max-width:700px){.final{padding:48px 26px}}
.final h2{color:#fff}
.final p{color:rgba(255,255,255,.85);max-width:560px;margin:0 auto 30px}
.final .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.final .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.final .btn-ghost:hover{background:rgba(255,255,255,.12)}
.final .btn-accent:hover{filter:brightness(1.07)}
.avatars{display:flex;justify-content:center}
.avatars .avatar{width:56px;height:56px;font-size:15px;margin:0 -8px;border:3px solid var(--primary);position:relative}
.avatars .avatar:nth-child(1){z-index:5}
.avatars .avatar:nth-child(2){z-index:4}
.avatars .avatar:nth-child(3){z-index:3}
.avatars .avatar:nth-child(4){z-index:2}
.avatars .avatar:nth-child(5){z-index:1}
.final .note{font-size:13.5px;opacity:.85;margin-top:14px}

/* Footer */
footer.site{background:linear-gradient(180deg,#106334 0%,var(--primary-dark) 45%,#041D0E 100%);color:rgba(255,255,255,.75);padding:64px 0 40px;font-size:14.5px;margin-top:0}
.fgrid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr 1fr;gap:28px;margin-bottom:44px}
@media(max-width:1050px){.fgrid{grid-template-columns:1.35fr 1fr 1fr;gap:32px}}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
footer h4{color:#fff;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
footer a:hover{color:#fff}
.footer-logo{display:inline-flex;align-items:center;gap:11px;color:#fff;margin-bottom:16px;font-weight:800}
.footer-logo span{display:inline-flex}
.footer-logo img{height:34px;width:auto}
.social{display:flex;gap:10px;margin-top:16px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.28);border-radius:50%;color:rgba(255,255,255,.85);transition:background .2s,color .2s,border-color .2s}
.social a:hover{background:#fff;color:var(--primary-dark);border-color:#fff}
.social svg{width:18px;height:18px;fill:currentColor}
.contact-card .social a{border-color:var(--line);color:var(--primary)}
.contact-card .social a:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.map-embed{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);height:300px;background:var(--primary-soft)}
.map-embed iframe{width:100%;height:100%;border:0;display:block}
.map-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:14px;text-align:center;padding:28px}
.map-placeholder p{color:var(--muted);font-size:14.5px;max-width:440px;margin:0}
.fbottom{border-top:1px solid rgba(255,255,255,.15);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}

/* Mobile Quick-Bar */
.quickbar{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--line);display:none;z-index:60}
.quickbar a{flex:1;text-align:center;padding:13px 0;font-size:13.5px;font-weight:700;color:var(--primary)}
.quickbar a+a{border-left:1px solid var(--line)}
@media(max-width:700px){.quickbar{display:flex}body{padding-bottom:56px}}

/* eTermin Buchung */
.booking{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-top:48px}
.booking iframe{display:block;width:100%;height:1150px;border:0}
.booking .consent-block{padding:48px 32px;text-align:center;background:var(--primary-soft)}
.booking .consent-block h3{font-size:20px;color:var(--ink);margin:0 0 10px}
.booking .consent-block p{color:var(--muted);font-size:15px;line-height:1.6;max-width:520px;margin:0 auto 20px}
.booking .consent-block .btn{margin:0 auto}
.booking .consent-alt{font-size:14px;margin-top:18px}
.booking .consent-alt a{color:var(--primary);font-weight:700}
@media(max-width:700px){.booking iframe{height:1400px}}
.booking-note{text-align:center;color:var(--muted);font-size:15px;margin-top:16px}
.booking-note a{color:var(--primary);font-weight:700}

/* ================= UNTERSEITEN ================= */
.breadcrumb{font-size:13.5px;color:var(--muted);padding-top:22px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--primary)}
.page-hero{padding:36px 0 4px;position:relative;overflow:hidden}
/* 404: der Seitenkopf ist dort der einzige Abschnitt und braucht unten das Abschnittspolster */
body>section.page-hero:last-of-type{padding-bottom:88px}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(760px 420px at 88% 0%,var(--primary-soft),transparent 70%);pointer-events:none}
.page-hero .wrap{position:relative}
.detail{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start;margin-top:48px}
@media(max-width:900px){.detail{grid-template-columns:1fr}}
.prose{max-width:760px}
.prose p{color:var(--ink);font-size:16px;margin-bottom:16px}
.prose p.lead{color:var(--muted)}
.prose h3{margin:32px 0 12px}
.prose ul{margin:0 0 16px 22px;color:var(--ink);font-size:16px}
.prose ul li{margin-bottom:8px}
.prose>*:first-child{margin-top:0}
.prose>*:last-child,.aside>*:last-child{margin-bottom:0}
.aside{position:sticky;top:96px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.aside h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.aside .fact{font-size:14.5px;color:var(--muted);padding:10px 0;border-bottom:1px solid var(--line)}
.aside .fact:last-of-type{border-bottom:0}
.aside .fact b{display:block;color:var(--ink);font-weight:700;font-size:13px;margin-bottom:2px}
.aside .btn{width:100%;justify-content:center;margin-top:18px}
.tarife{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.tarif{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.tarif .top{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap}
.tarif .code{color:var(--accent);font-weight:800;font-size:12.5px;letter-spacing:.06em;display:block;margin-bottom:4px}
.tarif h4{font-size:16.5px;font-weight:700}
.tarif .price{font-size:20px;font-weight:800;color:var(--primary);white-space:nowrap}
.tarif p{color:var(--muted);font-size:14.5px;margin-top:10px}
.tarif-note{font-size:13.5px;color:var(--muted);margin-top:16px;line-height:1.65}
.cta-band{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-radius:24px;padding:52px 48px;text-align:center}
@media(max-width:700px){.cta-band{padding:40px 24px}}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.85);max-width:520px;margin:0 auto 26px}
.cta-band .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.12)}
/* Legal / Prosa */
.legal{max-width:820px;margin:0 auto}
.legal h3{margin:28px 0 8px;font-size:18px}
.legal h4{margin:22px 0 6px;font-size:15px;color:var(--primary-dark)}
.legal p,.legal li{color:var(--ink);font-size:15.5px;margin-bottom:12px;line-height:1.7}
.legal>*:first-child{margin-top:0}
.legal>*:last-child{margin-bottom:0}
.legal ul{margin:0 0 14px 20px}
.legal .muted{color:var(--muted);font-size:14px}
/* Kontakt */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px;align-items:start}
@media(max-width:800px){.contact-grid{grid-template-columns:1fr}}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.contact-card h3{margin-bottom:14px}
.contact-card .row{padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.contact-card .row:last-child{border-bottom:0}
.contact-card .row b{display:block;font-size:12.5px;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}

/* Team-Seite */
.team-list{display:flex;flex-direction:column;gap:22px;margin-top:48px;max-width:900px}
.member{display:grid;grid-template-columns:132px 1fr;gap:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;align-items:start;box-shadow:var(--shadow)}
@media(max-width:640px){.member{grid-template-columns:1fr;text-align:center}}
.member>img{width:132px;height:132px;border-radius:50%;object-fit:cover;border:3px solid var(--surface);box-shadow:0 4px 14px rgba(20,48,79,.14)}
@media(max-width:640px){.member>img{margin:0 auto}}
.member h3{margin-bottom:2px}
.member .role{color:var(--accent);font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px}
.member .lead-line{color:var(--ink);font-weight:600;font-size:15.5px;margin-bottom:8px}
.member p{color:var(--muted);font-size:15px;margin-bottom:12px}
.member .mcontact{font-size:14px;color:var(--muted);margin-bottom:14px}
.member .mcontact a{color:var(--primary);font-weight:600}
.member .btn{padding:9px 20px;font-size:14px}
.mreviews{background:var(--bg);border:1px solid var(--line);border-radius:12px;margin:0 0 16px;box-shadow:none}
.mreviews summary{padding:12px 16px;font-size:14px;font-weight:700}
.mreviews summary .stars{color:var(--gold);letter-spacing:2px;font-size:13px}
.mreviews .rbody{padding:2px 16px 16px;display:flex;flex-direction:column;gap:14px;text-align:left}
.mreviews blockquote{font-size:14.5px;color:var(--muted);border-left:3px solid var(--primary-soft);padding-left:12px;line-height:1.6}
.mreviews cite{display:block;font-style:normal;font-weight:700;font-size:13px;color:var(--ink);margin-top:5px}

/* Hero-Bild (Beratungsszene) */
.hero-img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow);display:block;background:var(--primary-soft)}

/* Formular-Elemente */
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:15.5px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;transition:.18s}
.field input::placeholder,.field textarea::placeholder{color:#9aa89d}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.field textarea{min-height:120px;resize:vertical}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:5px}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:560px){.form-2col{grid-template-columns:1fr}}

/* Cookie-Consent */
#cookie-consent{position:fixed;left:0;right:0;bottom:0;z-index:1000;display:flex;justify-content:center;padding:16px;pointer-events:none}
#cookie-consent .cc-box{pointer-events:auto;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 40px rgba(10,74,34,.22);max-width:640px;width:100%;padding:26px 28px;animation:cc-up .3s ease}
@keyframes cc-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#cookie-consent .cc-title{font-size:19px;font-weight:800;color:var(--ink);margin:0 0 8px}
#cookie-consent .cc-text{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 18px}
#cookie-consent .cc-text a{color:var(--primary);font-weight:600}
#cookie-consent .cc-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
#cookie-consent .cc-actions .btn{flex:1 1 auto;justify-content:center;min-width:130px}
#cookie-consent .cc-opt{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
#cookie-consent .cc-opt span{display:flex;flex-direction:column}
#cookie-consent .cc-opt b{font-size:14.5px;color:var(--ink)}
#cookie-consent .cc-opt small{font-size:12.5px;color:var(--muted);margin-top:2px}
#cookie-consent .cc-opt input{width:auto;transform:scale(1.25);accent-color:var(--primary)}
#cookie-consent .cc-opt-locked input{opacity:.6}
#cookie-consent .cc-badge{display:inline-block;background:var(--primary-soft);color:var(--primary-dark);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:6px;padding:2px 7px;margin-left:6px;vertical-align:middle}
#cookie-consent .cc-settings .cc-actions{margin-top:18px}
@media(max-width:560px){#cookie-consent .cc-actions .btn{flex:1 1 100%}}

/* Newsletter-Einblendung */
#nl-popup{position:fixed;inset:0;z-index:1100;display:flex;align-items:flex-end;justify-content:center;padding:20px;background:rgba(6,48,26,0);transition:background .3s;pointer-events:none}
#nl-popup.nlp-in{background:rgba(6,48,26,.42);pointer-events:auto}
#nl-popup .nlp-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 50px rgba(10,74,34,.28);max-width:440px;width:100%;padding:30px 30px 26px;transform:translateY(24px);opacity:0;transition:transform .32s ease,opacity .32s ease}
#nl-popup.nlp-in .nlp-card{transform:none;opacity:1}
#nl-popup .nlp-close{position:absolute;top:12px;right:14px;border:0;background:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:8px}
#nl-popup .nlp-close:hover{color:var(--ink);background:var(--primary-soft)}
#nl-popup .nlp-eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
#nl-popup .nlp-title{font-size:20px;font-weight:800;color:var(--ink);margin:8px 0 10px;line-height:1.25}
#nl-popup .nlp-text{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 20px}
#nl-popup .nlp-actions{display:flex;gap:10px;flex-wrap:wrap}
#nl-popup .nlp-actions .btn{flex:1 1 auto;justify-content:center;min-width:140px}
@media(min-width:560px){#nl-popup{align-items:center}}

/* ============================================================
   v3.0, ANGEBOTSPAKETE (die Angebote je Bereich)
   Baut auf den bestehenden Tokens auf: keine neuen Farben,
   keine neuen Radien, keine neuen Schriftgrössen-Skalen.
   ============================================================ */

/* Paketkarten auf der Übersichtsseite */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px;align-items:stretch}
@media(max-width:980px){.pkgs{grid-template-columns:1fr}}
.pkg{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column;gap:14px;transition:.25s;position:relative}
.pkg:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--primary)}
.pkg .badge{position:absolute;top:-11px;left:28px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--accent);padding:4px 12px;border-radius:999px}
.pkg .code{color:var(--accent);font-weight:800;font-size:12.5px;letter-spacing:.06em}
.pkg h3{font-size:20px;margin-top:2px}
.pkg .claim{font-size:14px;font-weight:600;color:var(--muted);margin-top:-8px}
.pkg .short{color:var(--muted);font-size:15px}
.pkg ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14.5px;color:var(--ink);flex:1}
.pkg ul li{display:flex;gap:9px;align-items:flex-start}
.pkg ul li::before{content:"✓";color:var(--primary);font-weight:800;flex-shrink:0}
.pkg .price{font-size:26px;font-weight:800;color:var(--primary);letter-spacing:-.01em}
.pkg .price small{display:block;font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:0}
.pkg .pkg-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.pkg .pkg-actions .btn{padding:11px 22px;font-size:14.5px}

/* Ausführlicher Paketblock auf den Kategorieseiten */
.pkg-detail{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 30px 26px;margin-top:24px;scroll-margin-top:96px}
@media(max-width:600px){.pkg-detail{padding:26px 22px 22px}}
.pkg-detail .pd-head{display:flex;justify-content:space-between;gap:20px;align-items:baseline;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line)}
.pkg-detail .pd-head .code{color:var(--accent);font-weight:800;font-size:12.5px;letter-spacing:.06em;display:block;margin-bottom:3px}
.pkg-detail .pd-head h3{font-size:23px}
.pkg-detail .pd-head .claim{font-size:14.5px;font-weight:600;color:var(--muted);margin-top:2px}
.pkg-detail .pd-price{font-size:27px;font-weight:800;color:var(--primary);white-space:nowrap;letter-spacing:-.01em}
.pkg-detail .pd-price small{display:block;font-size:12.5px;font-weight:600;color:var(--muted);text-align:right;letter-spacing:0}
.pkg-detail .pd-intro{color:var(--ink);font-size:15.5px;margin:18px 0 0}
.pkg-detail .pd-cols{display:grid;grid-template-columns:1fr 1.25fr;gap:30px;margin-top:22px}
@media(max-width:760px){.pkg-detail .pd-cols{grid-template-columns:1fr;gap:20px}}
.pkg-detail h4{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.pkg-detail .pd-cols ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:15px;color:var(--ink);margin:0}
.pkg-detail .pd-cols li{display:flex;gap:9px;align-items:flex-start}
.pkg-detail .pd-cols li::before{content:"✓";color:var(--primary);font-weight:800;flex-shrink:0}
.pkg-detail .pd-cols .plain li::before{content:"·";color:var(--accent)}
.pkg-detail .pd-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0 30px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
@media(max-width:600px){.pkg-detail .pd-facts{grid-template-columns:1fr}}
.pkg-detail .pd-facts div{font-size:14.5px;color:var(--muted);padding:9px 0;border-bottom:1px solid var(--line)}
.pkg-detail .pd-facts b{display:block;color:var(--ink);font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
.pkg-detail .pd-foot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:22px}
.pkg-detail .pd-foot .btn{padding:12px 24px;font-size:15px}
.pkg-detail .pd-foot .pd-hint{font-size:13.5px;color:var(--muted)}

/* Vergleichstabelle, bricht mobil in Karten um */
.cmp{width:100%;border-collapse:collapse;margin-top:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:14.5px}
.cmp th,.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{background:var(--primary-soft);color:var(--primary-dark);font-size:13px;font-weight:800;letter-spacing:.04em}
.cmp tbody th{font-weight:700;color:var(--ink);width:30%}
.cmp td{color:var(--muted)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp .cmp-price td,.cmp .cmp-price th{font-weight:800;color:var(--primary);font-size:16px}
.cmp tbody th .code{display:block;margin-top:3px;color:var(--accent);font-weight:800;font-size:12.5px;letter-spacing:.06em}
@media(max-width:760px){
  .cmp,.cmp thead,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp{border:0;background:none;border-radius:0}
  .cmp thead{display:none}
  .cmp tbody tr{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;padding:6px 4px}
  .cmp tbody th{border-bottom:1px solid var(--line);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);width:auto}
  .cmp tbody th .code{display:inline;margin-top:0;font-size:12.5px}
  .cmp tbody td{border-bottom:1px solid var(--line);padding-left:16px}
  .cmp tbody td::before{content:attr(data-col) ": ";font-weight:700;color:var(--ink)}
  .cmp tbody tr td:last-child{border-bottom:0}
}

/* Hinweiskasten (Übergangsregeln, Wichtiges) */
.notice{background:var(--primary-soft);border:1px solid #CBE3D4;border-left:4px solid var(--primary);border-radius:14px;padding:22px 24px;margin:24px 0}
.notice:last-child{margin-bottom:0}
.notice.accent{background:var(--accent-soft);border-color:#E8D6B0;border-left-color:var(--accent)}
.notice h4{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:8px}
.notice p{font-size:14.5px;color:var(--muted);line-height:1.65;margin-bottom:8px}
.notice p:last-child{margin-bottom:0}
.notice ul{margin:8px 0 0 20px;font-size:14.5px;color:var(--muted)}
.notice li{margin-bottom:6px}
.notice a{color:var(--primary-dark);font-weight:700}

/* Ablauf nach der Anmeldung */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px}
@media(max-width:900px){.flow{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.flow{grid-template-columns:1fr}}
.flow .fstep{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px 22px}
.flow .fstep .num{display:block;margin-bottom:8px}
.flow .fstep h4{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:6px}
.flow .fstep p{font-size:14.5px;color:var(--muted);line-height:1.6}

/* Anker-Navigation innerhalb einer Kategorieseite */
.pkg-jump{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.pkg-jump a{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink);transition:.2s}
.pkg-jump a:hover{border-color:var(--primary);color:var(--primary)}
.pkg-jump a span{color:var(--primary);font-weight:800}

/* Bereichsüberschrift auf der Angebotsseite */
.zone{margin-top:64px}
.zone:first-of-type{margin-top:0}
.zone > h2{margin-bottom:8px}
.zone > p.lead{margin-bottom:6px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* v3.1, auf den Situationsseiten hervorgehobene Empfehlung */
.pkg.pkg-empfohlen{border-color:var(--primary);box-shadow:var(--shadow)}
.pkg.pkg-empfohlen .badge{background:var(--primary)}

/* ============================================================
   v3.2, Telefonnummer im Kopfbereich, Vertrauenszeile
   ============================================================ */

/* Telefonnummer neben «Termin buchen», nur auf grossen Bildschirmen.
   Auf dem Mobiltelefon übernimmt das die Schnellleiste am unteren Rand. */
.nav .header-tel{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:700;color:var(--primary);white-space:nowrap}
.nav .header-tel::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--primary)}
.nav .header-tel:hover{color:var(--primary-dark)}
@media(max-width:1040px){.nav .header-tel{display:none}}

/* Vertrauenszeile bei den Angeboten */
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-top:24px;padding:16px 22px;background:var(--surface);border:1px solid var(--line);border-radius:14px;font-size:14.5px;color:var(--muted)}
.trust b{color:var(--ink);font-weight:700}
.trust .stars{color:var(--gold);letter-spacing:2px;font-size:15px}
.trust span{display:inline}
.trust .stars{margin-right:6px}
.trust span+span{position:relative}
@media(min-width:760px){.trust span+span::before{content:"";position:absolute;left:-13px;top:50%;transform:translateY(-50%);width:1px;height:16px;background:var(--line)}}

/* ============================================================
   v3.3, Untermenü «Institut»
   Ohne JavaScript: öffnet bei :hover und bei :focus-within,
   damit es auch mit der Tastatur bedienbar ist.
   ============================================================ */
.nav li.has-sub{position:relative}
.nav li.has-sub > a{display:inline-flex;align-items:center;gap:6px}
.nav li.has-sub > a::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.nav li.has-sub:hover > a::after,
.nav li.has-sub:focus-within > a::after{transform:rotate(225deg) translate(-3px,-3px)}
.nav ul.sub{display:none;position:absolute;top:100%;left:-18px;margin-top:10px;flex-direction:column;gap:0;min-width:220px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);z-index:60}
/* unsichtbare Brücke, damit die Maus den Abstand überqueren kann */
.nav ul.sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav li.has-sub:hover > ul.sub,
.nav li.has-sub:focus-within > ul.sub{display:flex}
.nav ul.sub li{width:100%}
.nav ul.sub a{display:block;padding:10px 14px;border-radius:10px;font-size:15px;color:var(--ink);white-space:nowrap}
.nav ul.sub a:hover,.nav ul.sub a:focus-visible{background:var(--primary-soft);color:var(--primary-dark)}

/* Mobiles Menü: «Institut» als Gruppentitel mit eingerückten Einträgen */
.mobile-nav .mn-label{display:block;padding:14px 6px 6px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.mobile-nav a.mn-sub{padding-left:18px}

/* ============================================================
   v3.6, Zweispaltiges Untermenü «Beratungen»
   Gleiche Mechanik wie «Institut» (:hover + :focus-within),
   nur breiter und zweispaltig.
   ============================================================ */
.nav{position:relative}
/* Der breite Aufklapper richtet sich am Wrap aus, nicht am Menüpunkt. So kann er auf schmaleren Desktops nicht über den Rand hinauslaufen. */
.nav li.has-sub.wide{position:static}
/* Menüpunkte auf volle Kopfhöhe: sonst liegt zwischen dem Text und der
   Unterkante des Kopfbereichs eine tote Zone, in der das Untermenü zuklappt. */
.nav > ul{height:100%}
.nav > ul > li{display:flex;align-items:center}
.nav > ul > li > a{display:flex;align-items:center;height:100%}
.nav ul.sub-wide{left:0;right:auto;min-width:0;width:min(620px,calc(100vw - 60px));padding:18px 16px;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:0 20px}
.nav ul.sub-wide a{padding:9px 14px}
.nav li.has-sub.wide:hover > ul.sub-wide,
.nav li.has-sub.wide:focus-within > ul.sub-wide{display:grid}
/* Brücke exakt über die 10px Abstand, reicht nicht in die Menüzeile hinein */
.nav ul.sub-wide::before{top:-10px;height:10px}
.nav ul.sub-wide > li.sub-col{display:flex;flex-direction:column;width:auto}
.nav ul.sub-wide .sub-head{display:block;padding:0 14px 8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.nav ul.sub-wide > li.sub-foot{grid-column:1/-1;width:auto;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.nav ul.sub-wide > li.sub-foot a{font-weight:700;color:var(--primary-dark)}
@media(max-width:900px){.nav ul.sub-wide{display:none!important}}

/* ============================================================
   v3.7, Bildband im Abschnitt «Ablauf»
   Drei Bilder mit Bildunterschrift: ankommen, Gespräch, Ergebnis.
   ============================================================ */
.bildband{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.bildband figure{margin:0}
.bildband img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);background:var(--primary-soft)}
.bildband figcaption{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.wegleitung{margin-top:24px;display:grid;gap:20px;border-top:1px solid var(--line);padding-top:24px}
.wegleitung h4{font-size:16px;margin:0}
.wegleitung figure{margin:0}
.wegleitung img{display:block;width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);background:var(--primary-soft)}
.wegleitung figure.schild img{max-width:300px}
.wegleitung figcaption{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--muted)}
@media(max-width:900px){.bildband{grid-template-columns:1fr;gap:26px;margin-top:34px}}

/* ============================================================
   v5.0, Drei Angebote je Bereich, wieder eine Reihe.
   Die Hilfsklasse .pkgs-4 für das 2 × 2-Raster aus v4.1 ist mit
   dem Wegfall des vierten Angebots entfallen.
   ============================================================ */
/* Trenner zwischen den Angeboten */
.angebote-hinweis{display:flex;align-items:center;gap:14px;margin:30px 0 6px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.angebote-hinweis::after{content:"";flex:1;height:1px;background:var(--line)}

/* Preisband v5.3, befristet bis 30.09.2026, danach ersatzlos entfernen */
.pricebar{background:var(--accent-soft);border-bottom:1px solid #E8D6B0;color:var(--ink);font-size:14px;line-height:1.55}
.pricebar .wrap{padding-top:11px;padding-bottom:11px;text-align:center}
.pricebar strong{font-weight:800}
.pricebar a{color:var(--primary-dark);font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
body.nav-open .pricebar{display:none}
#preisumstellung{scroll-margin-top:96px}
@media(max-width:640px){.pricebar{font-size:13px}.pricebar .wrap{padding-top:9px;padding-bottom:9px}}


/* ============================================================
   v5.3 (24.08.2026), BEFRISTET: Hinweis unter dem Hero-Bild.
   Das Bild der Startseite ist KI-generiert und wird durch eine
   echte Aufnahme ersetzt. Danach diesen Block und den Absatz
   .hero-hinweis in index.html wieder entfernen; die zwei
   .float-card duerfen dann zurueck direkt in .hero-visual.
   ============================================================ */
.hero-bild{position:relative}
.hero-hinweis{margin:14px 2px 0;font-size:14.5px;line-height:1.5;color:var(--muted)}
@media(max-width:900px){.hero-hinweis{margin-top:18px}}

/* ============================================================
   v5.5: Linkliste
   Grundregel der Website ist a{color:inherit}. In einer Liste
   aus Adresse und Beschreibung muss die Adresse aber als Link
   erkennbar sein, darum hier explizit.
   ============================================================ */
.linkliste a{color:var(--primary-dark);font-weight:700}
.linkliste a:hover{color:var(--primary)}