/* ============================================================
   MeetingDocs – Design-System (Konzept C)
   Marke: Orange #E85A24 · Navy #17395B · Hellgrau #F2F1EE · Weiß
   ============================================================ */
:root{
  --orange:#E85A24; --orange-d:#cf4c1a; --coral:#F07E5A;
  --navy:#17395B; --navy-d:#0f2740;
  --grey:#F2F1EE; --grey2:#EDECE8; --line:#e3e2de;
  --ink:#1b2733; --muted:#6d7480; --white:#fff;
  --maxw:1180px;
  --font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --shadow:0 22px 44px -30px rgba(23,57,91,.5);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:var(--font); background:var(--white); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.eyebrow{ font-size:13px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--orange); }

/* ---------- Buttons ---------- */
.btn{ display:inline-block; border-radius:10px; font-weight:600; font-size:15px; padding:13px 24px; cursor:pointer; border:1.5px solid transparent; transition:transform .15s ease, background .2s ease, color .2s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--orange); color:#fff; }
.btn-primary:hover{ background:var(--orange-d); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:#cdd4dc; }
.btn-ghost:hover{ border-color:var(--navy); }
.btn-white{ background:#fff; color:var(--orange); }
.btn-outline-white{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn-outline-white:hover{ background:rgba(255,255,255,.12); }

/* ---------- Header / Nav ----------
   Standard: fix, transparent über dem Orange-Hero (weiße Schrift).
   Beim Scrollen (.scrolled via JS): weißer Hintergrund, Navy-Schrift. */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); box-shadow:0 1px 0 var(--line); transition:box-shadow .3s ease; }
.site-header.scrolled{ box-shadow:0 6px 24px -18px rgba(23,57,91,.5); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:88px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; letter-spacing:-.01em; color:var(--navy); }
.navlinks{ display:flex; align-items:center; gap:28px; font-size:15px; font-weight:500; color:var(--navy); }
.navlinks a{ transition:color .2s ease; }
.navlinks a:hover{ color:var(--orange); }
.nav-cta{ background:var(--orange); color:#fff; border-color:var(--orange); }
.nav-cta:hover{ background:var(--orange-d); border-color:var(--orange-d); }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; }

/* Dropdown (Leistungen) */
.navitem{ position:relative; display:flex; align-items:center; gap:3px; }
.dd-toggle{ background:none; border:0; padding:2px; cursor:pointer; color:inherit; font:inherit; font-size:11px; line-height:1; opacity:.7; }
.dd-toggle:hover{ opacity:1; color:var(--orange); }
.dropdown{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%); min-width:244px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:8px; display:none; flex-direction:column; z-index:60; }
.dropdown::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px; }
.dropdown a{ padding:9px 12px; border-radius:8px; font-size:14px; color:var(--navy); white-space:nowrap; }
.dropdown a:hover{ background:var(--grey); color:var(--orange); }
.navitem:hover .dropdown, .navitem:focus-within .dropdown{ display:flex; }

@media(max-width:860px){
  /* Burger-Menü */
  .site-header .nav{ height:72px; }
  .site-header .brand-logo{ height:48px; }
  .nav-toggle{ display:block; }
  .navlinks{ position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:#fff; padding:6px 24px 20px; border-bottom:1px solid var(--line); box-shadow:var(--shadow); display:none; max-height:calc(100vh - 72px); overflow-y:auto; }
  .navlinks.open{ display:flex; }
  .navlinks > a{ width:100%; padding:14px 0; border-bottom:1px solid var(--line); color:var(--navy); font-size:15px; }
  .navlinks > a:hover{ color:var(--orange); }
  .navlinks .navitem{ width:100%; display:flex; flex-wrap:wrap; align-items:center; border-bottom:1px solid var(--line); }
  .navlinks .navitem > a{ flex:1; padding:14px 0; color:var(--navy); font-size:15px; }
  .navlinks .dd-toggle{ font-size:18px; padding:14px 10px; color:var(--navy); opacity:1; }
  .navlinks .dropdown{ position:static; transform:none; display:none; flex-direction:column; box-shadow:none; border:none; border-radius:0; padding:0 0 10px 14px; min-width:0; width:100%; }
  .navlinks .navitem.open .dropdown{ display:flex; }
  .navlinks .dropdown a{ padding:11px 0; font-size:14px; color:var(--navy); white-space:normal; }
  .navlinks .btn{ margin-top:14px; width:100%; text-align:center; }
  .nav-cta{ background:var(--orange); color:#fff; border-color:var(--orange); }
}

/* ---------- Hero (orange, full-bleed) ---------- */
.hero{ background:var(--orange); color:#fff; min-height:88vh; display:flex; flex-direction:column; justify-content:center; padding:120px clamp(24px,5vw,64px) clamp(48px,8vh,90px); text-align:center; }
.hero .eyebrow{ color:rgba(255,255,255,.92); }
.hero h1{ font-weight:700; letter-spacing:-.03em; line-height:1.02; margin:18px 0 0; color:#fff; font-size:clamp(40px,7.4vw,120px); }
.hero h1 .line{ display:block; white-space:nowrap; }
.hero h1 em{ font-style:normal; color:var(--navy); }
.hero .lead{ color:rgba(255,255,255,.94); font-weight:500; font-size:clamp(16px,1.9vw,22px); letter-spacing:.01em; white-space:nowrap; margin:24px auto 34px; }
.hero .cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
@media(max-width:600px){ .hero .lead{ white-space:normal; max-width:34ch; } .hero h1 .line{ white-space:normal; } }

/* Unterseiten-Hero — Variante B: schmales Band + überlappende Karte */
.subhero{ background:var(--orange); color:#fff; padding:126px clamp(24px,5vw,64px) 92px; text-align:center; }
.subhero .crumbs{ font-size:13px; font-weight:500; color:rgba(255,255,255,.82); margin-bottom:12px; }
.subhero .crumbs a{ color:#fff; text-decoration:none; }
.subhero .crumbs a:hover{ text-decoration:underline; }
.subhero .crumbs span{ opacity:.6; margin:0 6px; }
.subhero .eyebrow{ color:rgba(255,255,255,.9); }
.subhero h1{ font-weight:700; letter-spacing:-.03em; line-height:1.06; margin:12px 0 0; font-size:clamp(30px,4.6vw,54px); text-wrap:balance; }

/* Überlappende Lead-Karte */
.subhero-lead{ padding:0 24px; }
.subhero-lead .card{
  max-width:840px; margin:-56px auto 0; position:relative; z-index:2;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 26px 54px -28px rgba(23,57,91,.32);
  padding:24px 30px; display:flex; gap:24px; align-items:center; text-align:left;
}
.subhero-lead .card .ill{ flex:none; width:82px; height:82px; border-radius:14px; background:var(--grey); display:grid; place-items:center; }
.subhero-lead .card .ill svg{ width:44px; height:44px; }
.subhero-lead .card p{ margin:0; font-size:clamp(16px,1.7vw,18.5px); line-height:1.62; color:var(--muted); max-width:none; text-align:left; text-wrap:pretty; }
@media(max-width:600px){ .subhero-lead .card{ flex-direction:column; text-align:center; gap:16px; } .subhero-lead .card p{ text-align:center; } }

/* Anker-Sub-Nav (lange Seiten wie Leistungen) */
.subnav{ position:sticky; top:74px; z-index:20; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); margin-top:34px; }
.subnav .container{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; padding:14px 24px; }
.subnav a{ font-size:13.5px; font-weight:600; color:var(--navy); background:var(--grey); padding:8px 15px; border-radius:999px; text-decoration:none; transition:background .2s ease, color .2s ease; }
.subnav a:hover{ background:var(--navy); color:#fff; }

/* ---------- Sections ---------- */
.section{ padding:clamp(64px,9vh,120px) 0; }
.section.grey{ background:var(--grey); }
.section.navy{ background:var(--navy); color:#fff; }
.section-head{ max-width:760px; margin:0 auto; text-align:center; }
.section-head h2{ font-size:clamp(30px,4.4vw,52px); line-height:1.1; letter-spacing:-.025em; color:var(--navy); margin:16px 0 0; font-weight:700; text-wrap:balance; }
.navy .section-head h2{ color:#fff; }
.section-head p{ color:var(--muted); font-size:clamp(16.5px,1.8vw,19px); line-height:1.65; margin:20px auto 0; max-width:58ch; text-wrap:pretty; }
.navy .section-head p{ color:rgba(255,255,255,.85); }

/* ---------- Card grids ---------- */
.grid{ display:grid; gap:20px; margin-top:clamp(40px,6vh,64px); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .grid.cols-3,.grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .grid.cols-2,.grid.cols-3,.grid.cols-4{ grid-template-columns:1fr; } }

.card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px 26px; position:relative; transition:transform .25s ease, box-shadow .25s ease; }
.grey .card{ background:#fff; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.card::before{ content:""; position:absolute; left:0; top:26px; bottom:26px; width:3px; border-radius:3px; background:var(--orange); opacity:0; transition:opacity .25s ease; }
.card:hover::before{ opacity:1; }
.card h3{ font-size:19px; color:var(--navy); margin:0 0 8px; letter-spacing:-.01em; }
.card p{ font-size:14.5px; color:var(--muted); margin:0; }
.card .card-link{ display:inline-block; margin-top:14px; color:var(--orange); font-weight:600; font-size:14px; }

/* Icon placeholder (SVG später ersetzen) */
.icon{ width:52px; height:52px; border-radius:13px; background:var(--grey); display:grid; place-items:center; color:var(--orange); margin-bottom:18px; }
.icon svg{ width:26px; height:26px; }
.card .icon{ background:var(--grey); }

/* ---------- Stat band ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-top:clamp(40px,6vh,64px); }
@media(max-width:720px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{ padding:36px 24px; text-align:center; border-right:1px solid var(--line); background:#fff; }
.stat:last-child{ border-right:none; }
.stat b{ display:block; font-size:44px; font-weight:800; color:var(--orange); letter-spacing:-.03em; line-height:1; }
.stat span{ font-size:14px; color:var(--navy); font-weight:500; margin-top:8px; display:block; }

/* ---------- Split / feature rows ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
@media(max-width:820px){ .split{ grid-template-columns:1fr; } }
.split h2{ font-size:clamp(28px,3.6vw,42px); color:var(--navy); letter-spacing:-.02em; margin:16px 0 0; line-height:1.15; text-wrap:balance; }
.split p{ color:var(--muted); font-size:17px; line-height:1.7; margin:20px 0 0; max-width:56ch; text-wrap:pretty; }
.media-box{ border-radius:20px; background:var(--grey); border:1px dashed #cdb3a5; min-height:340px; display:grid; place-items:center; color:var(--muted); font-size:14px; text-align:center; padding:24px; }
.media-box.has-img{ border:none; padding:0; overflow:hidden; box-shadow:var(--shadow); }
.media-box.has-img img{ width:100%; height:100%; min-height:400px; object-fit:cover; display:block; }
/* Freigestellte Doodle-Illustration: füllt die Spaltenbreite, kein Rahmen */
.media-box.has-illus{ border:none; background:transparent; padding:0; display:block; min-height:0; }
.media-box.has-illus img{ width:100%; height:auto; max-height:none; object-fit:contain; display:block; }

/* ---------- Checklist ---------- */
.checklist{ list-style:none; padding:0; margin:20px 0 0; }
.checklist li{ position:relative; padding:7px 0 7px 30px; color:var(--ink); font-size:15.5px; line-height:1.5; }
.checklist li::before{ content:""; position:absolute; left:3px; top:11px; width:13px; height:7px; border-left:2.5px solid var(--orange); border-bottom:2.5px solid var(--orange); transform:rotate(-45deg); }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--navy); color:#fff; border-radius:22px; padding:clamp(40px,6vw,64px); text-align:center; }
.cta-band h2{ font-size:clamp(28px,4vw,44px); letter-spacing:-.02em; margin:0; color:#fff; }
.cta-band p{ color:rgba(255,255,255,.85); font-size:18px; margin:16px auto 28px; max-width:52ch; }
.cta-band .cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Pull quote / lead statement ---------- */
.statement{ max-width:820px; margin:clamp(40px,6vh,64px) auto 0; text-align:center; }
.statement p{ font-size:clamp(18px,2.2vw,26px); color:var(--navy); font-weight:600; letter-spacing:-.01em; line-height:1.35; margin:0; }
.statement .u{ color:var(--orange); }

/* ---------- Team ---------- */
.person{ text-align:center; background:#fff; border:1px solid var(--line); border-radius:22px; padding:34px 26px 30px; transition:transform .28s ease, box-shadow .28s ease; }
.person:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.person .avatar{ width:150px; height:150px; border-radius:50%; margin:0 auto 20px; background:var(--grey); overflow:hidden; border:4px solid #fff; box-shadow:0 0 0 3px var(--orange); transition:box-shadow .28s ease; }
.person:hover .avatar{ box-shadow:0 0 0 3px var(--navy); }
.person .avatar img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; }
.person h3{ margin:0; color:var(--navy); font-size:21px; letter-spacing:-.01em; }
.person .role{ display:inline-block; margin:12px 0 14px; background:var(--orange); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:6px 14px; border-radius:999px; }
.person p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.6; }

/* ---------- Form ---------- */
.form{ display:grid; gap:16px; max-width:560px; }
.form label{ font-size:14px; font-weight:600; color:var(--navy); display:block; margin-bottom:6px; }
.form input,.form textarea{ width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:11px; font-family:inherit; font-size:15px; background:#fff; color:var(--ink); }
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--orange); }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:560px){ .form .row{ grid-template-columns:1fr; } }
.form .check{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted); }
.form .check input{ width:auto; margin-top:3px; }

/* ---------- Contact cards ---------- */
.info-list{ list-style:none; padding:0; margin:0; display:grid; gap:18px; }
.info-list li{ display:flex; gap:14px; align-items:flex-start; }
.info-list .k{ font-size:13px; color:var(--muted); }
.info-list .v{ font-weight:600; color:var(--navy); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy); color:rgba(255,255,255,.8); padding:clamp(48px,7vh,80px) 0 32px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
@media(max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer .brand{ color:#fff; }
.site-footer .logo{ background:#fff; color:var(--orange); }
.footer-col h4{ color:#fff; font-size:14px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 14px; }
.footer-col a{ display:block; padding:6px 0; font-size:15px; color:rgba(255,255,255,.8); }
.footer-col a:hover{ color:#fff; }
.footer-tag{ margin:16px 0 0; font-size:14px; color:rgba(255,255,255,.7); max-width:34ch; }
.footer-bottom{ margin-top:40px; padding-top:24px; border-top:1px solid rgba(255,255,255,.15); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:rgba(255,255,255,.6); }

/* ---------- Breadcrumb ---------- */
.crumb{ font-size:13px; color:var(--muted); padding:16px 0 0; }
.crumb a{ color:var(--orange); }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.hero .anim{ opacity:0; transform:translateX(48px); animation:inRL .8s cubic-bezier(.2,.7,.2,1) forwards; }
.hero .d1{ animation-delay:.05s; } .hero .d2{ animation-delay:.2s; } .hero .d3{ animation-delay:.35s; } .hero .d4{ animation-delay:.5s; }
@keyframes inRL{ to{ opacity:1; transform:translateX(0); } }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } .hero .anim{ animation:none; opacity:1; transform:none; } }

/* ============================================================
   DESIGN-UPGRADES v2
   ============================================================ */

/* Logo: rundes ee-Icon (in Container gezoomt -> keine Kante) + Schriftzug */
.logo-ring{ width:48px; height:48px; border-radius:50%; overflow:hidden; display:grid; place-items:center; flex:none; background:#fff; }
.logo-ring img{ width:100%; height:100%; object-fit:contain; margin:0; display:block; }
.brand{ font-size:26px; font-weight:700; letter-spacing:-.01em; gap:12px; }
/* Nav-Logo (exakt gelieferte Datei, unbeschnitten) */
.nav{ height:74px; }
.brand-logo{ height:60px; width:auto; display:block; }
@media(max-width:860px){ .brand-logo{ height:60px; } }
/* Fun-Illustration im „mehr Spaß"-Kennzahlenfeld */
.stat-img img{ height:92px; width:auto; object-fit:contain; margin:0 auto 6px; display:block; }
@media(max-width:640px){ .stat-img img{ height:72px; } }

/* Painpoint-Icons: Container hebt sich + Linien zeichnen sich neu (Hover / Tap) */
.card .icon{ transition:transform .3s cubic-bezier(.2,.7,.2,1), background .3s ease, color .3s ease, border-color .3s ease; }
.card:hover .icon,
.card.tapped .icon{ transform:translateY(-4px) scale(1.08); background:var(--orange); border-color:var(--orange); color:#fff; }
/* Strichlinien im Icon (pathLength=1 via JS) */
.card .icon svg path,
.card .icon svg line,
.card .icon svg circle,
.card .icon svg rect,
.card .icon svg polyline,
.card .icon svg polygon{ stroke-dasharray:1; stroke-dashoffset:0; }
.card:hover .icon svg path, .card.tapped .icon svg path,
.card:hover .icon svg line, .card.tapped .icon svg line,
.card:hover .icon svg circle, .card.tapped .icon svg circle,
.card:hover .icon svg rect, .card.tapped .icon svg rect,
.card:hover .icon svg polyline, .card.tapped .icon svg polyline,
.card:hover .icon svg polygon, .card.tapped .icon svg polygon{
  animation:iconDraw .8s cubic-bezier(.65,0,.35,1) both;
}
@keyframes iconDraw{ 0%{ stroke-dashoffset:1; } 100%{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){
  .card:hover .icon,.card.tapped .icon{ transform:none; }
  .card:hover .icon svg *, .card.tapped .icon svg *{ animation:none; }
}

/* Scroll-Fortschrittsbalken oben */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--orange); z-index:100; transition:width .08s linear; }

/* Scroll-Reveal: gestaffeltes Einblenden der Grid-Karten */
.reveal.grid.in > *{ animation:riseIn .6s cubic-bezier(.2,.7,.2,1) backwards; }
.reveal.grid.in > *:nth-child(2){ animation-delay:.08s; }
.reveal.grid.in > *:nth-child(3){ animation-delay:.16s; }
.reveal.grid.in > *:nth-child(4){ animation-delay:.24s; }
.reveal.grid.in > *:nth-child(5){ animation-delay:.32s; }
.reveal.grid.in > *:nth-child(6){ animation-delay:.40s; }
@keyframes riseIn{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .reveal.grid.in > *{ animation:none; } }
.footer-logo{ height:88px; width:auto; display:block; }

/* Aktive Navigation */
.navlinks a{ position:relative; }
.navlinks > a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:currentColor; border-radius:2px; }
@media(max-width:860px){ .navlinks > a.active::after{ display:none; } .navlinks > a.active{ color:var(--orange); } }

/* Hero: flaches Orange (wie zuvor), nur relative für den Scroll-Hinweis */
.hero{ position:relative; overflow:hidden; }

/* Scroll-Hinweis */
.scroll-cue{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:1;
  color:rgba(255,255,255,.85); animation:cueBob 1.9s ease-in-out infinite; }
.scroll-cue svg{ width:26px; height:26px; }
@keyframes cueBob{ 50%{ transform:translate(-50%,8px); } }

/* Eyebrow in Sektionsköpfen mit flankierenden Strichen */
.section-head .eyebrow{ display:inline-flex; align-items:center; gap:12px; }
.section-head .eyebrow::before,.section-head .eyebrow::after{ content:""; width:28px; height:2px; background:var(--orange); opacity:.55; border-radius:2px; }

/* Buttons: weicher Schatten + Pfeil-Feedback */
.btn-primary{ box-shadow:0 12px 24px -12px rgba(232,90,36,.65); }
.btn-white{ box-shadow:0 12px 24px -14px rgba(0,0,0,.35); }

/* Card-Link: Unterstrich wächst beim Hover */
.card-link{ background-image:linear-gradient(var(--orange),var(--orange)); background-size:0% 2px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .3s ease; padding-bottom:2px; }
.card:hover .card-link{ background-size:100% 2px; }

/* Stat-Kacheln: Hover-Lift + Akzent */
.stat{ transition:background .25s ease, transform .25s ease; }
.stat:hover{ background:var(--grey); }
.stat b{ transition:transform .25s ease; }
.stat:hover b{ transform:translateY(-3px); }

/* Team-Avatare: sanftes Zoom */
.person .avatar{ transition:transform .3s ease, border-color .3s ease; }
.person:hover .avatar{ transform:scale(1.05); border-color:var(--orange); }

/* Große Sektions-Übergänge etwas luftiger auf Desktop */
@media(min-width:900px){ .section-head p{ font-size:19px; } }

@media (prefers-reduced-motion:reduce){
  .hero::before,.scroll-cue{ animation:none; }
  .hero h1 em::after{ animation:none; transform:scaleX(1); }
}

/* Anker unter Sub-Nav + Fixed-Header sichtbar */
.section[id]{ scroll-margin-top:130px; }

/* Mobile: Hero/Subhero kompakter (fixer 72px-Header); Sub-Nav scrollbar */
@media(max-width:860px){
  .hero{ min-height:auto; padding-top:96px; }
  .subhero{ padding-top:96px; padding-bottom:78px; }
  .subnav{ top:72px; margin-top:28px; }
  .subnav .container{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:11px 16px; }
  .subnav .container::-webkit-scrollbar{ display:none; }
  .subnav a{ flex:none; white-space:nowrap; }
  .section[id]{ scroll-margin-top:124px; }
}

/* Mobile-Feinschliff: kompakter, weniger Luft, schlankere Blöcke */
@media(max-width:600px){
  .section{ padding:46px 0; }
  .grid{ margin-top:28px; gap:14px; }
  .section-head p{ font-size:16px; }
  .subhero-lead .card{ padding:20px 20px; margin-top:-46px; gap:14px; }
  .subhero-lead .card .ill{ width:64px; height:64px; }
  .subhero-lead .card .ill svg{ width:34px; height:34px; }
  .checklist li{ font-size:15px; padding:7px 0 7px 32px; }
  .cta-band{ padding:36px 22px !important; }
}

/* Kompakte Team-Reihe auf der Startseite + Smiley in den Kennzahlen */
.stat-ico{ display:inline-block; width:1em; height:1em; vertical-align:-.08em; }
.team-mini{ display:flex; justify-content:center; gap:clamp(24px,5vw,60px); flex-wrap:wrap; margin-top:44px; }
.team-mini .tm{ display:flex; flex-direction:column; align-items:center; text-align:center; width:170px; color:inherit; }
.team-mini .tm img{ width:108px; height:108px; border-radius:50%; object-fit:cover; object-position:center 18%; box-shadow:0 0 0 3px var(--orange); transition:transform .2s ease; }
.team-mini .tm:hover img{ transform:translateY(-4px); }
.team-mini .tm span{ margin-top:14px; font-weight:600; color:var(--navy); font-size:15px; }
.team-mini .tm small{ color:var(--muted); font-size:12.5px; margin-top:2px; }

/* Kompakter Gratis-Teaser (ohne großes Preview) */
.freebie{ max-width:720px; margin:0 auto; text-align:center; background:var(--grey); border-radius:20px; padding:clamp(30px,4.5vw,50px); }
.freebie h2{ color:var(--navy); font-size:clamp(24px,3.2vw,34px); letter-spacing:-.02em; line-height:1.15; margin:12px 0 0; text-wrap:balance; }
.freebie p{ color:var(--muted); margin:14px auto 0; max-width:52ch; line-height:1.6; }
.freebie-tags{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:22px 0 26px; }
.freebie-tags span{ background:#fff; border:1px solid var(--line); color:var(--navy); font-size:13px; font-weight:600; padding:7px 13px; border-radius:999px; }

/* Painpoints kompakt (v. a. Mobile: 2 Spalten, nur Icon + Titel) */
.pain .card{ padding:22px 20px; }
.pain .icon{ width:44px; height:44px; margin-bottom:12px; }
.pain .card h3{ font-size:16.5px; margin-bottom:5px; }
.pain .card p{ font-size:13.5px; line-height:1.5; }
@media(max-width:560px){
  .grid.pain{ grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
  .pain .card{ padding:16px 12px; text-align:center; }
  .pain .icon{ margin:0 auto 10px; width:42px; height:42px; }
  .pain .card h3{ font-size:14px; margin:0; }
  .pain .card p{ display:none; }
}

/* ===== Kennzahlen-Band (Versprechen) ===== */
.promise{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff; margin-top:clamp(34px,5vh,52px); box-shadow:var(--shadow); }
.pcell{ padding:40px 22px; text-align:center; border-right:1px solid var(--line); opacity:0; transform:translateY(16px); }
.pcell:last-child{ border-right:none; }
.promise.in .pcell{ animation:pRise .6s cubic-bezier(.2,.7,.2,1) forwards; }
.promise.in .pcell:nth-child(2){ animation-delay:.1s; }
.promise.in .pcell:nth-child(3){ animation-delay:.2s; }
.promise.in .pcell:nth-child(4){ animation-delay:.3s; }
@keyframes pRise{ to{ opacity:1; transform:none; } }
.pcell b{ display:flex; align-items:center; justify-content:center; height:62px; font-size:50px; font-weight:800; color:var(--orange); letter-spacing:-.02em; line-height:1; }
.pcell .funimg{ height:62px; width:auto; }
.pcell b.ic{ line-height:1; }
.pcell .micon{ width:46px; height:46px; }
.pcell span{ display:block; margin-top:12px; font-size:14.5px; color:var(--navy); font-weight:500; }
.pcell:hover b{ transform:translateY(-3px); transition:transform .25s ease; }
@media(max-width:640px){
  .promise{ grid-template-columns:1fr 1fr; }
  .pcell{ padding:30px 16px; }
  .pcell:nth-child(2){ border-right:none; }
  .pcell:nth-child(1),.pcell:nth-child(2){ border-bottom:1px solid var(--line); }
  .pcell b{ height:52px; font-size:42px; } .pcell .micon{ width:40px; height:40px; } .pcell .funimg{ height:52px; }
}
@media(prefers-reduced-motion:reduce){ .promise.in .pcell{ animation:none; opacity:1; transform:none; } }

/* ===== Ansatz-Liste (ohne Häkchen) ===== */
.approach{ margin:22px 0 0; display:flex; flex-direction:column; }
.approach .ap{ padding:13px 0; border-top:1px solid var(--line); color:var(--muted); font-size:15px; line-height:1.55; }
.approach .ap:first-child{ border-top:none; padding-top:4px; }
.approach .ap b{ color:var(--navy); font-weight:600; }

/* Nav-Logo: quadratisches Marken-Icon (D) mit abgerundeten Ecken */
.site-header .brand{ position:static; display:flex; align-items:center; width:auto; height:auto; overflow:visible; }
.site-header .brand-logo{ position:static; top:auto; left:auto; width:56px; height:56px; max-width:none; border-radius:13px; }
@media(max-width:860px){ .site-header .brand-logo{ width:48px; height:48px; border-radius:11px; } }

/* ===== Animierte Kalender-Karte (Versprechen) ===== */
.cal-card{ max-width:820px; margin:clamp(34px,5vh,52px) auto 0; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:22px 22px 20px; }
.cal-top{ display:flex; align-items:center; gap:8px; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.cal-dot{ width:10px; height:10px; border-radius:50%; background:#e0dcd4; }
.cal-title{ margin-left:8px; font-weight:600; color:var(--navy); font-size:14px; }
.cal-state{ margin-left:auto; font-size:12.5px; color:var(--muted); }
.cal-state b{ color:var(--orange); }
.week{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.day{ display:flex; flex-direction:column; }
.dh{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:center; margin-bottom:8px; }
.slot{ height:36px; margin-bottom:8px; border-radius:8px; background:var(--navy); opacity:.92;
  transition:height .6s cubic-bezier(.2,.7,.2,1), opacity .5s ease, margin .6s ease, transform .5s ease; }
.slot.alt{ background:var(--orange); }
.calendar-demo.in .slot.shrink{ height:20px; transition-delay:.55s; }
.calendar-demo.in .slot.gone{ height:0; margin-bottom:0; opacity:0; transform:scaleY(.5); transition-delay:.55s; }
.cal-legend{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.cal-legend .chip{ font-size:13px; font-weight:600; color:var(--navy); background:var(--grey); border-radius:999px; padding:7px 14px; opacity:0; transform:translateY(8px); }
.calendar-demo.in .chip{ animation:calRise .5s ease forwards; }
.calendar-demo.in .chip:nth-child(1){ animation-delay:1.2s; }
.calendar-demo.in .chip:nth-child(2){ animation-delay:1.32s; }
.calendar-demo.in .chip:nth-child(3){ animation-delay:1.44s; }
.calendar-demo.in .chip:nth-child(4){ animation-delay:1.56s; }
@keyframes calRise{ to{ opacity:1; transform:none; } }
@media(max-width:560px){
  .cal-card{ padding:16px; }
  .week{ gap:8px; }
  .slot{ height:28px; margin-bottom:6px; }
  .calendar-demo.in .slot.shrink{ height:16px; }
  .cal-legend .chip{ font-size:12px; padding:6px 11px; }
}
@media(prefers-reduced-motion:reduce){
  .slot{ transition:none; }
  .calendar-demo.in .chip{ animation:none; opacity:1; transform:none; }
}

/* ===== Glas-Karten-Fächer (Leistungen) ===== */
.section.showcase{ background:linear-gradient(160deg,#22507d 0%,#17395B 100%); }
.glass-fan{ display:flex; justify-content:center; align-items:center; min-height:270px; margin-top:clamp(40px,6vh,64px); }
.glass{ position:relative; width:168px; height:208px; border-radius:16px; margin:0 -22px; color:#fff; text-decoration:none;
  background:linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.22); box-shadow:0 12px 28px -18px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  transform:rotate(calc(var(--r)*1deg));
  transition:transform .5s cubic-bezier(.2,.7,.2,1), margin .5s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
.glass-fan:hover .glass{ transform:rotate(0deg); margin:0 12px; }
.glass:hover{ box-shadow:0 16px 34px -16px rgba(0,0,0,.42); }
.glass svg{ width:46px; height:46px; margin-bottom:28px; opacity:.95; }
.glass::before{ content:attr(data-text); position:absolute; left:0; bottom:0; width:100%; min-height:46px;
  background:rgba(255,255,255,.10); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12.5px; font-weight:600; text-align:center; padding:8px 10px; line-height:1.25; border-radius:0 0 15px 15px; }
@media(max-width:760px){
  .glass-fan{ flex-wrap:wrap; gap:12px; min-height:0; }
  .glass{ transform:none !important; margin:0 !important; width:calc(50% - 12px); height:148px; }
  .glass svg{ width:40px; height:40px; margin-bottom:22px; }
}
@media(prefers-reduced-motion:reduce){ .glass,.glass-fan:hover .glass{ transition:none; } }

/* Wert/Icon in der Glas-Karte (Versprechen) */
.glass .gval{ display:flex; align-items:center; justify-content:center; font-size:46px; font-weight:800; color:#fff; letter-spacing:-.03em; line-height:1; margin-bottom:26px; }
.glass .gval svg{ width:46px; height:46px; margin:0; }
@media(max-width:760px){ .glass .gval{ font-size:38px; margin-bottom:20px; } .glass .gval svg{ width:38px; height:38px; } }

/* fun-Grafik in der Glas-Karte */
.glass .gval .funimg{ height:104px; width:auto; margin:0 0 -8px; }
@media(max-width:760px){ .glass .gval .funimg{ height:78px; } }

/* Free-Value-Karten (Startseite) */
.freebie-card{ display:block; background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px 28px; color:inherit; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.freebie-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--orange); }
.freebie-card.accent{ background:linear-gradient(160deg,#ffffff, #fbf1ec); }
.freebie-card .fc-ic{ width:52px; height:52px; border-radius:13px; background:var(--grey); color:var(--orange); display:grid; place-items:center; margin-bottom:16px; }
.freebie-card .fc-ic svg{ width:26px; height:26px; }
.freebie-card.accent .fc-ic{ background:var(--orange); color:#fff; }
.freebie-card h3{ margin:0; color:var(--navy); font-size:20px; letter-spacing:-.01em; }
.freebie-card p{ margin:8px 0 0; color:var(--muted); font-size:15px; line-height:1.55; }
.freebie-card .go{ display:inline-block; margin-top:14px; color:var(--orange); font-weight:600; font-size:14.5px; }

/* FAQ-Accordion (Startseite + FAQ-Seite) */
.faq-list{ max-width:800px; margin:clamp(34px,5vh,52px) auto 0; }
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item summary{ list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative; color:var(--navy); font-weight:600; font-size:clamp(16px,2vw,19px); line-height:1.4; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:""; position:absolute; right:6px; top:28px; width:11px; height:11px; border-right:2.5px solid var(--orange); border-bottom:2.5px solid var(--orange); transform:rotate(45deg); transition:transform .25s ease; }
.faq-item[open] summary::after{ transform:rotate(-135deg); }
.faq-item .a{ padding:0 44px 24px 0; color:var(--muted); font-size:16px; line-height:1.7; }
.faq-item .a a{ color:var(--orange); text-decoration:underline; }
.faq-src{ display:block; margin-top:10px; font-size:13px; color:var(--muted); }

/* Chevron-Liste (Leistungen) – Alternative zu Häkchen */
.arrowlist{ list-style:none; padding:0; margin:0; }
.arrowlist li{ position:relative; padding:13px 0 13px 30px; border-top:1px solid var(--line); color:var(--ink); font-size:15.5px; line-height:1.55; }
.arrowlist li:first-child{ border-top:none; }
.arrowlist li::before{ content:""; position:absolute; left:3px; top:18px; width:9px; height:9px; border-top:2.5px solid var(--orange); border-right:2.5px solid var(--orange); transform:rotate(45deg); }

/* ===== Versprechen-Karten: solide Karten im Fächer ===== */
.glass-fan{ display:flex; justify-content:center; align-items:center; min-height:280px; margin-top:clamp(34px,5vh,52px); }
.glass{ position:relative; width:172px; height:208px; margin:0 -20px; border-radius:16px;
  background:#fff; border:1px solid var(--line); box-shadow:0 8px 20px -14px rgba(23,57,91,.22);
  -webkit-backdrop-filter:none; backdrop-filter:none; color:var(--navy);
  display:flex; align-items:center; justify-content:center; padding-bottom:46px; overflow:hidden;
  transform:rotate(calc(var(--r)*1deg));
  transition:transform .5s cubic-bezier(.2,.7,.2,1), margin .5s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
.glass-fan:hover .glass{ transform:rotate(0deg); margin:0 10px; }
.glass:hover{ box-shadow:0 14px 26px -16px rgba(23,57,91,.28); z-index:2; }
.glass .gval{ color:var(--navy); margin-bottom:0; }
.glass .gval .funimg{ width:150px; height:auto; margin:0; }
.glass::before{ background:var(--grey); color:var(--navy); font-weight:600; border-top:none; }
@media(max-width:760px){
  .glass-fan{ flex-wrap:wrap; gap:12px; min-height:0; }
  .glass{ transform:none !important; margin:0 !important; width:calc(50% - 12px); height:174px; }
  .glass-fan:hover .glass{ transform:none !important; margin:0 !important; }
  .glass .gval .funimg{ width:120px; height:auto; }
}

/* ===== Gratis-Dropdown: Label ist reiner Toggle (kein Direktlink) ===== */
.navitem.open .dropdown{ display:flex; }
.dd-label{ cursor:pointer; }

/* ===== Vorstellungs-Video (Über uns) ===== */
.video-frame{ max-width:840px; margin:clamp(28px,4vh,44px) auto 0; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:var(--grey); box-shadow:var(--shadow); line-height:0; }
.video-frame video{ width:100%; height:100%; display:block; object-fit:cover; }

/* ===== Kontaktformular: Fehler- & Danke-Anzeige ===== */
.form-error{ display:none; margin:4px 0 2px; color:var(--orange-d); font-size:14px; font-weight:600; }
.form-error.show{ display:block; }
.form-thanks{ margin-top:26px; background:var(--grey); border:1px solid var(--line); border-radius:16px; padding:26px 28px; }
.form-thanks h3{ margin:0 0 8px; color:var(--navy); }
.form-thanks p{ margin:0; color:var(--muted); }
.form-thanks a{ color:var(--orange); text-decoration:underline; }

/* ===== Team-Karten: LinkedIn-Link ===== */
.person-li{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-size:14px; font-weight:600; color:var(--navy); }
.person-li svg{ color:#0A66C2; transition:color .2s ease; }
.person-li:hover{ color:var(--orange); }
.person-li:hover svg{ color:var(--orange); }