/* ============================================================
   SanDoc — Design-System (sandoc.de-Look)
   Hell + farbige Wellen fürs Marketing · Dunkel (.theme-dark) für den Shop
   Metropolis · Multicolor (Gruppe) / Teal (Connect) / Rot (IFAK/Shop)
   ============================================================ */

/* ── Schriften (Manrope — wie das Original-Theme) ── */
@font-face { font-family:'Manrope'; src:url('../fonts/manrope/Manrope-Light.woff2') format('woff2');     font-weight:300; font-display:swap; }
@font-face { font-family:'Manrope'; src:url('../fonts/manrope/Manrope-Regular.woff2') format('woff2');   font-weight:400; font-display:swap; }
@font-face { font-family:'Manrope'; src:url('../fonts/manrope/Manrope-Medium.woff2') format('woff2');    font-weight:500; font-display:swap; }
@font-face { font-family:'Manrope'; src:url('../fonts/manrope/Manrope-SemiBold.woff2') format('woff2');  font-weight:600; font-display:swap; }
@font-face { font-family:'Manrope'; src:url('../fonts/manrope/Manrope-Bold.woff2') format('woff2');      font-weight:700; font-display:swap; }
@font-face { font-family:'Manrope'; src:url('../fonts/manrope/Manrope-ExtraBold.woff2') format('woff2'); font-weight:800; font-display:swap; }

/* ── Marken-Farben (fix) ── */
:root {
  --teal:      #19b7c4;
  --teal-deep: #0f8f9b;
  --red:       #cc3333;
  --red-deep:  #ad2727;
  --gold:      #e59f24;
  --navy:      #0b2b55;   /* SanDoc e.V. */
  --navy-deep: #061a37;
  --navy-lite: #1a4a8a;
  --navy-soft: #eaf0f8;

  /* Helles Theme (Marketing) — graue Leinwand + weiße, runde Blöcke wie das Theme */
  --bg:        #ebedf0;   /* graue Leinwand */
  --bg-2:      #f3f5f7;
  --panel:     #ffffff;   /* weiße Blöcke */
  --panel-2:   #f6f8f9;
  --card:      #ffffff;
  --teal-ink:  #0b7e8c;
  --red-soft:  #fdecec;
  --ok:        #1f9d57;
  --line:      #e4e9ec;
  --line-2:    #d3dbe0;
  --ink:       #14191f;   /* Überschriften */
  --txt:       #3f4a52;   /* Fließtext */
  --txt-dim:   #6b757d;
  --txt-faint: #9aa4ab;
  --stage:     radial-gradient(ellipse 72% 62% at 50% 40%, #ffffff, #eef2f4 70%);
  --header-bg: rgba(255,255,255,.86);
  --header-line: #e9edf0;
  --header-ink: #14191f;
  --shadow-1:  0 1px 2px rgba(20,25,31,.04), 0 8px 24px rgba(20,25,31,.07);
  --shadow-2:  0 24px 60px rgba(20,25,31,.14);

  --radius:    22px;
  --radius-s:  13px;
  --header-h:  76px;
  --max-w:     1200px;
}

/* Dunkles Theme (Shop) */
.theme-dark {
  --bg:        #0a0a0c;
  --bg-2:      #101014;
  --panel:     #101014;
  --panel-2:   #15151a;
  --card:      #16161c;
  --teal-ink:  #35d0dc;
  --red-soft:  rgba(204,51,51,.16);
  --ok:        #57d38d;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);
  --ink:       #f4f4f6;
  --txt:       #cdced3;
  --txt-dim:   #9a9aa3;
  --txt-faint: #6d6d77;
  --stage:     radial-gradient(ellipse 74% 64% at 50% 40%, #17171d, #0b0b0e 72%);
  --header-bg: rgba(10,10,12,.75);
  --header-line: rgba(255,255,255,.09);
  --header-ink: #f4f4f6;
  --shadow-1:  0 2px 10px rgba(0,0,0,.4);
  --shadow-2:  0 24px 60px rgba(0,0,0,.6);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  overflow-x:hidden;            /* verhindert horizontales Verschieben auf Mobil */
  overscroll-behavior-x:none;
}
body {
  font-family:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background:var(--bg); color:var(--txt);
  font-size:16px; line-height:1.62;
  min-height:100vh; display:flex; flex-direction:column;
  width:100%; max-width:100%; position:relative;
  overflow-x:hidden; overscroll-behavior-x:none; -webkit-font-smoothing:antialiased;
}
main { flex:1; }
img, svg { max-width:100%; display:block; }
a { color:var(--teal-deep); text-decoration:none; transition:color .2s ease; }
a:hover { color:var(--teal); }
::selection { background:rgba(25,183,196,.22); color:var(--ink); }

h1,h2,h3,h4 { font-weight:800; line-height:1.1; color:var(--ink); letter-spacing:-0.025em; }
.wrap { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 24px; }
.eyebrow {
  display:inline-flex; align-items:center; gap:11px;
  font-size:12px; font-weight:600; letter-spacing:0.26em; text-transform:uppercase; color:var(--txt-dim);
}
.eyebrow::before { content:''; width:26px; height:2px; background:var(--teal); border-radius:2px; }
.eyebrow.red::before { background:var(--red); }
.eyebrow.multi::before { background:linear-gradient(90deg,var(--teal),var(--gold),var(--red)); width:34px; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:inherit; font-weight:600; font-size:15px; line-height:1;
  padding:14px 28px; border-radius:999px; border:1.5px solid transparent; cursor:pointer;
  text-decoration:none; white-space:nowrap; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:transform .22s cubic-bezier(.34,1.4,.5,1), box-shadow .26s ease, background .22s ease, border-color .22s ease, color .2s ease, opacity .2s ease;
}
.btn:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
.btn:active { transform:scale(.98); }
.btn svg { width:17px; height:17px; }
.btn-red { background:var(--red); color:#fff; box-shadow:0 8px 20px rgba(204,51,51,.28); }
.btn-red:hover { background:var(--red-deep); color:#fff; transform:translateY(-2px); box-shadow:0 14px 30px rgba(204,51,51,.4); }
.btn-teal { background:var(--teal); color:#fff; box-shadow:0 8px 20px rgba(25,183,196,.28); }
.btn-teal:hover { background:var(--teal-deep); color:#fff; transform:translateY(-2px); box-shadow:0 14px 30px rgba(25,183,196,.4); }
.btn-primary { background:var(--teal); color:#fff; box-shadow:0 8px 20px rgba(25,183,196,.28); }
.btn-primary:hover { background:var(--teal-deep); color:#fff; transform:translateY(-2px); box-shadow:0 14px 30px rgba(25,183,196,.4); }
.btn-dark { background:var(--ink); color:#fff; }
.btn-dark:hover { color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-1); opacity:.92; }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover { border-color:var(--teal); color:var(--teal-deep); transform:translateY(-2px); }
.btn-white { background:#fff; color:var(--ink); box-shadow:var(--shadow-1); }
.btn-white:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); color:var(--ink); }
.btn-sm { padding:10px 18px; font-size:13.5px; }
.btn:disabled, .btn[disabled] { opacity:.5; pointer-events:none; box-shadow:none; transform:none; }

/* ── Header (schwebende, runde weiße Leiste — wie das Original-Theme) ── */
.site-header { position:fixed; inset:0 0 auto 0; z-index:100; padding:14px 16px 0; }
.site-header .wrap {
  max-width:1320px; width:100%; margin:0 auto; height:62px;
  display:flex; align-items:center; gap:18px; padding:0 12px 0 24px;
  background:var(--card); border:1px solid var(--line); border-radius:17px;
  box-shadow:0 8px 30px rgba(20,25,31,.09); transition:box-shadow .3s, background .3s;
}
.site-header.scrolled .wrap { box-shadow:0 12px 34px rgba(20,25,31,.14); }
.theme-dark .site-header .wrap { box-shadow:0 10px 30px rgba(0,0,0,.5); }
.brand { display:flex; align-items:center; gap:10px; }
.brand img { height:32px; width:auto; }
.brand .brand-word { font-size:21px; font-weight:800; color:var(--header-ink); letter-spacing:-0.03em; }
.brand .brand-word span { font-weight:300; }

/* Nav — mittig, aktiver Punkt als dunkle Pille */
.nav { flex:1; display:flex; align-items:center; justify-content:center; gap:3px; }
.nav a { padding:9px 17px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--txt-dim); transition:color .2s, background .2s; }
.nav a:hover { color:var(--header-ink); }
.nav a.active { background:var(--ink); color:var(--bg); }
@media (min-width:961px){ .nav-shoplink { display:none; } } /* auf Desktop ersetzt der Shop-Pill den Textlink */

.header-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
.cart-wrap { position:relative; }
.cart-link { position:relative; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; border:1.5px solid var(--line-2); background:none; cursor:pointer; color:var(--header-ink); transition:border-color .2s, color .2s, transform .2s; }
.cart-link:hover { border-color:var(--red); color:var(--red); transform:translateY(-1px); }
.cart-link svg { width:19px; height:19px; }
.cart-count { position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 5px; display:none; align-items:center; justify-content:center; background:var(--red); color:#fff; font-size:11px; font-weight:700; border-radius:999px; box-shadow:0 3px 8px rgba(204,51,51,.5); }
.cart-count.show { display:inline-flex; animation:pop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop { 0% { transform:scale(.4);} 100% { transform:scale(1);} }

/* Mini-Warenkorb (Dropdown) */
.mini-cart {
  position:absolute; top:calc(100% + 16px); right:-4px; width:344px; max-width:calc(100vw - 32px);
  background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-2);
  padding:16px; z-index:120;
  opacity:0; transform:translateY(-8px) scale(.98); transform-origin:top right; pointer-events:none;
  transition:opacity .2s ease, transform .22s cubic-bezier(.34,1.4,.5,1);
}
.cart-wrap.open .mini-cart { opacity:1; transform:none; pointer-events:auto; }
.mc-head { font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--txt-dim); margin-bottom:14px; }
.mc-body { display:grid; gap:13px; max-height:320px; overflow-y:auto; }
.mc-line { display:grid; grid-template-columns:50px 1fr auto; gap:12px; align-items:center; }
.mc-img { width:50px; height:50px; border-radius:10px; background:var(--stage); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:5px; flex:none; }
.mc-img img { max-height:100%; max-width:100%; object-fit:contain; }
.mc-name { font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.25; }
.mc-var { font-size:12px; color:var(--txt-dim); margin-top:1px; }
.mc-qp { font-size:12px; color:var(--txt-faint); margin-top:3px; }
.mc-total { font-size:13.5px; font-weight:700; color:var(--ink); white-space:nowrap; }
.mc-foot { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.mc-sub { display:flex; justify-content:space-between; font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:13px; }
.mc-empty { text-align:center; padding:14px 0 6px; }
.mc-empty p { color:var(--txt-dim); font-size:14px; margin-bottom:14px; }
.mc-loading { color:var(--txt-faint); font-size:13px; text-align:center; padding:14px 0; }
@media (max-width:520px){ .mini-cart { position:fixed; top:calc(var(--header-h) + 2px); left:16px; right:16px; width:auto; max-width:none; } }

/* Shop-Pill — sanft laufender roter Farbverlauf (nahtlos per alternate) */
.shop-pill {
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px;
  font-weight:700; font-size:13px; letter-spacing:0.03em; text-transform:uppercase; color:#fff;
  background:linear-gradient(90deg, #a81a20, #e0483a, #f0574a, #e0483a, #cc3333);
  background-size:300% 100%; background-position:0% 50%;
  animation:shopShift 3.6s ease-in-out infinite alternate;
  border:1.5px solid transparent; box-shadow:0 6px 18px rgba(204,51,51,.32);
  transition:transform .2s cubic-bezier(.34,1.4,.5,1), box-shadow .26s ease;
}
.shop-pill svg { width:15px; height:15px; }
.shop-pill:hover { color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px rgba(204,51,51,.48); }
@keyframes shopShift { from { background-position:0% 50%; } to { background-position:100% 50%; } }
@media (prefers-reduced-motion: reduce){ .shop-pill { animation:none; } }

/* Burger */
.nav-toggle { display:none; background:none; border:0; width:42px; height:42px; cursor:pointer; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; }
.burger { position:relative; width:22px; height:16px; }
.burger span { position:absolute; left:0; right:0; height:2px; border-radius:2px; background:var(--header-ink); transition:transform .3s cubic-bezier(.22,.61,.36,1), opacity .2s, top .3s; }
.burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:7px; } .burger span:nth-child(3){ top:14px; }
body.nav-open .burger span:nth-child(1){ top:7px; transform:rotate(45deg); }
body.nav-open .burger span:nth-child(2){ opacity:0; }
body.nav-open .burger span:nth-child(3){ top:7px; transform:rotate(-45deg); }

@media (max-width:960px){
  .nav-toggle { display:inline-flex; }
  .shop-pill { display:none; }
  .nav {
    position:fixed; inset:var(--header-h) 0 0 0; margin:0; z-index:99;
    flex-direction:column; justify-content:center; align-items:center; gap:8px; padding:24px;
    background:var(--bg);
    opacity:0; transform:translateY(-10px); pointer-events:none; transition:opacity .32s ease, transform .32s cubic-bezier(.22,.61,.36,1);
  }
  body.nav-open .nav { opacity:1; transform:none; pointer-events:auto; }
  body.nav-open { overflow:hidden; }
  .nav a { font-size:clamp(26px,7vw,34px); font-weight:700; color:var(--ink); padding:10px 16px; opacity:0; transform:translateY(12px); }
  .nav a::after { display:none; }
  .nav-shoplink { display:block; }
  body.nav-open .nav a { animation:navIn .5s forwards; }
  .nav a:nth-child(1){ animation-delay:.06s; } .nav a:nth-child(2){ animation-delay:.12s; }
  .nav a:nth-child(3){ animation-delay:.18s; } .nav a:nth-child(4){ animation-delay:.24s; }
}
@keyframes navIn { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .nav a { animation:none !important; opacity:1 !important; transform:none !important; } }

/* ── Marketing-Hero (Shop-Aufmacher) ── */
.mhero { padding:calc(var(--header-h) + 40px) 0 30px; }
.mhero-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:26px; }
.mhero-head h1 { font-size:clamp(30px, 4.6vw, 52px); letter-spacing:-0.03em; line-height:1.05; }
.mhero-head h1 .r { color:var(--red); } .mhero-head h1 .g { color:var(--txt-dim); } .mhero-head h1 .t { color:var(--teal); }
.wave-banner {
  position:relative; border-radius:26px; overflow:hidden; min-height:300px;
  display:flex; align-items:center; justify-content:center;
  background:var(--red) center/cover no-repeat; box-shadow:var(--shadow-1);
}
.wave-banner::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.12)); }
.wave-banner img.wb-logo { position:relative; z-index:1; width:min(300px, 52%); filter:drop-shadow(0 14px 30px rgba(0,0,0,.28)); }
@media (max-width:640px){ .wave-banner { min-height:210px; } }

/* ── Hero-Meta (kleine Merkmal-Zeile unter dem Hero) ── */
.hero-meta { display:flex; gap:26px; flex-wrap:wrap; }
.hero-meta .hm { display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:500; color:var(--txt-dim); }
.hero-meta .hm svg { width:18px; height:18px; flex:none; color:var(--teal); }
.hero-meta.red .hm svg { color:var(--red); }

/* ── Hero-Carousel (Shop + Connect) ── */
.hero-carousel { position:relative; padding:calc(var(--header-h) + 40px) 0 6px; }
.hc-viewport { overflow:hidden; }
.hc-track { display:flex; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.hc-slide { flex:0 0 100%; min-width:100%; }
.hc-controls { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:18px; }
.hc-arrow { border:0; background:none; color:var(--txt-faint); font-size:24px; line-height:1; padding:2px 4px; cursor:pointer; transition:color .2s; }
.hc-arrow:hover { color:var(--ink); }
.hc-dots { display:flex; align-items:center; gap:8px; }
.hc-dot { width:7px; height:7px; padding:0; border:0; border-radius:999px; background:var(--line-2); cursor:pointer; transition:width .3s ease, background .3s ease; }
.hc-dot.active { width:20px; background:var(--ink); }
@media (prefers-reduced-motion: reduce){ .hc-track { transition:none; } }

/* Titel + Button des Heros auf Mobil zentrieren */
@media (max-width:640px){
  .mhero-head { flex-direction:column; align-items:center; text-align:center; gap:18px; }
}

/* ── Großes zentriertes Statement (auf grauer Leinwand) ── */
.statement { background:transparent; margin:0 auto; padding:clamp(44px,6vw,86px) 24px; }
.statement .wrap { max-width:940px; text-align:center; }
.statement h2 { font-size:clamp(28px, 4.4vw, 52px); font-weight:800; letter-spacing:-0.03em; line-height:1.12; }
.statement h2 .teal { color:var(--teal); }
.statement h2 .red { color:var(--red); }

/* ── Sektionen ── */
.section { position:relative; padding:88px 0; }
.section.panel > .wrap { }
.section.panel { }
.section-head { max-width:720px; margin-bottom:44px; }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head.center .eyebrow { justify-content:center; }
.section-head h2 { font-size:clamp(26px, 3.6vw, 40px); margin:14px 0 12px; }
.section-head p { color:var(--txt-dim); font-size:17px; }

/* ── Wellen-Karten (SanDoc Gruppe) ── */
.wave-grid { display:grid; grid-template-columns:1.15fr 1fr 1fr; grid-auto-rows:minmax(150px, auto); gap:18px; }
.wcard {
  position:relative; border-radius:22px; overflow:hidden; min-height:220px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px; color:#fff; isolation:isolate; box-shadow:var(--shadow-1);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.wcard::before { content:''; position:absolute; inset:0; z-index:-2; background:var(--wave, #333) center/cover no-repeat; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.wcard::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.55)); }
.wcard:hover { transform:translateY(-6px); box-shadow:var(--shadow-2); }
.wcard:hover::before { transform:scale(1.06); }
.wcard h3 { color:#fff; font-size:22px; margin-bottom:8px; letter-spacing:-0.02em; }
.wcard p { color:rgba(255,255,255,.9); font-size:14px; max-width:34ch; }
.wcard .wc-stat { font-size:44px; font-weight:800; letter-spacing:-0.03em; line-height:1; margin-bottom:6px; }
.wcard .wc-tag { margin-bottom:auto; font-size:11.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.wcard .btn { margin-top:16px; align-self:flex-start; }
.wcard.group   { grid-row:1 / 3; --wave:url('/assets/img/waves/wave-group.jpg'); }
.wcard.solutions { --wave:url('/assets/img/waves/wave-solutions.jpg'); }
.wcard.training  { --wave:url('/assets/img/waves/wave-training.jpg'); }
.wcard.rescue    { grid-column:2 / 4; --wave:url('/assets/img/waves/wave-rescue.jpg'); }
.wcard.connect   { grid-column:1 / 4; min-height:190px; --wave:url('/assets/img/waves/wave-connect.jpg'); background-position:center; }
@media (max-width:820px){
  .wave-grid { grid-template-columns:1fr 1fr; }
  .wcard.group { grid-row:auto; grid-column:1 / 3; } .wcard.rescue { grid-column:1 / 3; } .wcard.connect { grid-column:1 / 3; }
}
@media (max-width:520px){
  .wave-grid { grid-template-columns:1fr; }
  .wcard, .wcard.group, .wcard.rescue, .wcard.connect { grid-column:auto; grid-row:auto; }
}

/* ── Dunkle Feature-Sektion (Plattform) ── */
.darkfeature { background:#0c0c0f; color:#e6e6ea; border-radius:30px; margin:26px auto; padding:clamp(48px,6vw,80px) 0; position:relative; overflow:hidden; }
.darkfeature::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 80% 10%, rgba(25,183,196,.14), transparent 60%); pointer-events:none; }
.darkfeature .wrap { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
@media (max-width:860px){ .darkfeature .wrap { grid-template-columns:1fr; gap:28px; } }
.darkfeature .df-word { font-size:clamp(48px, 8vw, 96px); font-weight:800; letter-spacing:-0.04em; line-height:.95; background:linear-gradient(100deg, var(--teal), var(--gold) 55%, var(--red)); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:20px; }
.darkfeature p { color:#b6b7be; font-size:15.5px; margin-bottom:16px; }
.darkfeature img { border-radius:16px; }

/* ── Stärken / Merkmale ── */
.feat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:30px; }
.feat { }
.feat .ico { width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--panel); color:var(--teal-deep); margin-bottom:16px; }
.feat .ico svg { width:24px; height:24px; }
.feat h3 { font-size:17px; margin-bottom:8px; }
.feat p { color:var(--txt-dim); font-size:14px; }

/* ── Zwei-Spalten-Layout (stapelt auf Tablet/Mobil) ── */
.split { display:grid; grid-template-columns:1.05fr 1fr; gap:44px; align-items:center; }
@media (max-width:860px){ .split { grid-template-columns:1fr; gap:28px; } }

/* ── Connect „Free"-Karten ── */
.free-cards { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:900px){ .free-cards { grid-template-columns:1fr; } }
.freecard { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:30px; display:flex; flex-wrap:wrap; gap:20px 24px; justify-content:space-between; box-shadow:var(--shadow-1); transition:transform .3s, box-shadow .3s; }
.freecard > div { min-width:0; }
.freecard:hover { transform:translateY(-5px); box-shadow:var(--shadow-2); }
.freecard h3 { font-size:22px; margin-bottom:10px; }
.freecard ul { list-style:none; display:grid; gap:8px; margin-top:14px; }
.freecard li { display:flex; gap:9px; font-size:13.5px; color:var(--txt-dim); }
.freecard li svg { width:16px; height:16px; color:var(--teal); flex:none; margin-top:2px; }
.freecard .fc-price { text-align:right; flex:none; }
.freecard .fc-price .free { font-size:30px; font-weight:800; color:var(--teal); }
.freecard .fc-price .btn { margin-top:12px; }

/* ── SanDoc IFAK-Seite ── */
.aud-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
@media (max-width:760px){ .aud-grid { grid-template-columns:repeat(2,1fr); } }
.aud { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; padding:26px 14px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-1); transition:transform .3s, box-shadow .3s, border-color .3s; }
.aud:hover { transform:translateY(-5px); box-shadow:var(--shadow-2); border-color:var(--line-2); }
.aud svg { width:30px; height:30px; color:var(--red); }
.aud span { font-size:13.5px; font-weight:600; color:var(--ink); }

.ifak-inhalt { display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:26px; padding:clamp(28px,4vw,48px); box-shadow:var(--shadow-1); }
@media (max-width:820px){ .ifak-inhalt { grid-template-columns:1fr; gap:26px; } }
.ifak-list { list-style:none; display:grid; gap:13px; }
.ifak-list li { display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--txt); }
.ifak-list li svg { width:20px; height:20px; color:var(--red); flex:none; margin-top:2px; }
.ifak-list li b { color:var(--ink); font-weight:700; }
.ifak-list li em { color:var(--txt-faint); font-style:normal; font-size:13px; }

.emergency { display:flex; align-items:center; gap:16px; padding:20px 24px; border-radius:18px; background:var(--red-soft); border:1px solid rgba(204,51,51,.3); }
.emergency svg { width:26px; height:26px; color:var(--red); flex:none; }
.emergency strong { display:block; color:var(--red-deep); font-size:16px; }
.emergency span { color:var(--txt); font-size:14.5px; }

.ifak-cta { position:relative; border-radius:26px; overflow:hidden; background:var(--red) center/cover no-repeat; box-shadow:var(--shadow-1); }
.ifak-cta::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35)); }
.ifak-cta-inner { position:relative; z-index:1; text-align:center; padding:clamp(44px,6vw,74px) 24px; color:#fff; }
.ifak-cta-inner h2 { color:#fff; font-size:clamp(26px,3.6vw,40px); margin-bottom:12px; }
.ifak-cta-inner p { color:rgba(255,255,255,.92); font-size:17px; max-width:44ch; margin:0 auto 24px; }

/* ── FAQ-Akkordeon ── */
.faq { display:grid; gap:2px; max-width:820px; margin-inline:auto; }
.faq details { border-bottom:1px solid var(--line-2); }
.faq summary { list-style:none; cursor:pointer; padding:22px 40px 22px 44px; position:relative; font-size:17px; font-weight:600; color:var(--ink); display:flex; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .n { color:var(--txt-faint); font-weight:700; font-size:14px; min-width:24px; }
.faq summary::after { content:'+'; position:absolute; right:8px; top:19px; font-size:24px; font-weight:400; color:var(--teal); transition:transform .25s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq .faq-body { padding:0 40px 24px 44px; color:var(--txt-dim); font-size:15px; }
.faq .faq-body p { margin-bottom:10px; }

/* ── Footer (dunkle Kontakt-Sektion) ── */
.site-footer { background:#0c0c0f; color:#c6d2d8; padding:70px 0 34px; margin-top:auto; }
.footer-top { display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:start; margin-bottom:48px; }
@media (max-width:760px){ .footer-top { grid-template-columns:1fr; gap:28px; } }
.footer-top .eyebrow { color:#8fa2aa; }
.footer-top h2 { color:#fff; font-size:clamp(26px,3.4vw,40px); margin-top:14px; }
.footer-logo { display:flex; align-items:center; gap:14px; justify-content:flex-end; }
.footer-logo img { height:64px; }
@media (max-width:760px){ .footer-logo { justify-content:flex-start; } }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; border-top:1px solid rgba(255,255,255,.1); padding-top:40px; }
@media (max-width:900px){ .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid { grid-template-columns:1fr; } }
.site-footer h4 { font-size:12px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#8fa2aa; margin-bottom:16px; }
.site-footer ul { list-style:none; display:grid; gap:10px; }
.site-footer ul a { color:#b3c2c9; font-size:14.5px; } .site-footer ul a:hover { color:#fff; }
.footer-brand p { color:#8fa2aa; font-size:14px; max-width:32ch; }
.footer-contact { display:grid; gap:6px; font-size:14px; color:#b3c2c9; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:40px; padding-top:24px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; color:#8fa2aa; font-size:13px; }
.footer-bottom .pay { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.footer-bottom .pay span { border:1px solid rgba(255,255,255,.16); border-radius:6px; padding:3px 9px; font-size:11.5px; font-weight:600; color:#c6d2d8; }

/* ── Cookie-Hinweis ── */
.cookie-bar { position:fixed; left:18px; right:18px; bottom:18px; z-index:200; max-width:560px; margin:0 auto; background:var(--card); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow-2); padding:20px 22px; display:none; gap:16px; align-items:center; flex-wrap:wrap; }
.cookie-bar.show { display:flex; animation:rise .45s cubic-bezier(.22,.61,.36,1); }
@keyframes rise { from { transform:translateY(24px); opacity:0;} to { transform:none; opacity:1;} }
.cookie-bar p { flex:1 1 280px; font-size:13.5px; color:var(--txt-dim); margin:0; }
.cookie-bar p a { text-decoration:underline; }

/* ── Formulare ── */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-grid .full { grid-column:1 / -1; }
@media (max-width:640px){ .form-grid { grid-template-columns:1fr; } }
label.fl { display:block; font-size:12.5px; font-weight:600; letter-spacing:0.05em; color:var(--txt-dim); margin-bottom:8px; text-transform:uppercase; }
.fi { width:100%; font:inherit; color:var(--ink); background:var(--card); border:1.5px solid var(--line-2); border-radius:var(--radius-s); padding:13px 16px; transition:border-color .2s, box-shadow .2s; }
.fi::placeholder { color:var(--txt-faint); }
.fi:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(25,183,196,.14); }
textarea.fi { min-height:150px; resize:vertical; }
.form-note { font-size:12.5px; color:var(--txt-faint); }
.form-msg { display:none; margin-top:16px; padding:14px 18px; border-radius:var(--radius-s); font-size:14.5px; }
.form-msg.ok { display:block; background:#e6f6ec; border:1px solid rgba(31,157,87,.32); color:#157a41; }
.form-msg.err { display:block; background:#fdecec; border:1px solid rgba(204,51,51,.3); color:var(--red-deep); }
.rc-gate { border:1px dashed var(--line-2); border-radius:var(--radius-s); padding:18px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; background:var(--panel-2); }
.rc-gate p { flex:1 1 260px; font-size:13px; color:var(--txt-dim); margin:0; }
.grecaptcha-badge { visibility:hidden; }

/* ── Scroll-Reveal ── */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.visible { opacity:1; transform:none; }
.reveal-d1 { transition-delay:.09s;} .reveal-d2 { transition-delay:.18s;} .reveal-d3 { transition-delay:.27s;}
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } }

/* ── Karten-Utility + Lead ── */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px; box-shadow:var(--shadow-1); }
.card h3 { font-size:19px; }
.card p { color:var(--txt-dim); }
.lead { font-size:18px; color:var(--txt-dim); }

/* ── Kleinkram + Rechtstexte ── */
.divider { height:1px; background:var(--line); border:0; }
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.legal { padding:calc(var(--header-h) + 56px) 0 90px; }
.legal .wrap { max-width:840px; }
.legal h1 { font-size:clamp(28px,4vw,42px); margin-bottom:34px; }
.legal h2 { font-size:22px; margin:42px 0 14px; }
.legal h3 { font-size:17px; margin:26px 0 10px; }
.legal p, .legal li { color:var(--txt); font-size:15.5px; margin-bottom:12px; }
.legal ul { padding-left:22px; margin-bottom:14px; }
.legal strong { color:var(--ink); }
.legal .note { background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius-s); padding:14px 18px; font-size:14px; }

/* ── SanDoc e.V. Seite (navy) ────────────────────────────── */
.eyebrow.ev::before { background:var(--navy); }
.statement h2 .ev-accent, .ev-page h2 .ev-accent { color:var(--navy); }

.btn-navy { background:var(--navy); color:#fff; box-shadow:0 8px 20px rgba(11,43,85,.28); }
.btn-navy:hover { background:var(--navy-deep); color:#fff; transform:translateY(-2px); box-shadow:0 14px 30px rgba(11,43,85,.4); }

/* Hero-Emblem */
.ev-emblem { position:relative; display:flex; align-items:center; justify-content:center; min-height:360px; }
.ev-ring { position:absolute; border-radius:50%; border:2px solid rgba(11,43,85,.12); width:min(430px,90%); aspect-ratio:1; }
.ev-ring-2 { width:min(340px,72%); border-color:rgba(11,43,85,.08); }
.ev-emblem-card {
  position:relative; z-index:1; width:min(300px,74%); aspect-ratio:1; border-radius:34px;
  background:radial-gradient(ellipse at 30% 20%, var(--navy-lite), var(--navy) 55%, var(--navy-deep));
  box-shadow:0 30px 70px rgba(11,43,85,.4); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px;
}
.ev-emblem-card img { width:96px; height:auto; filter:brightness(0) invert(1) drop-shadow(0 6px 16px rgba(0,0,0,.3)); }
.ev-word { font-size:26px; font-weight:800; letter-spacing:-0.02em; }
.ev-word b { font-weight:800; }
.ev-word em { font-style:normal; font-weight:500; color:rgba(255,255,255,.72); }
.ev-since { font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,.6); }

/* Leistungen */
.ev-services { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
@media (max-width:860px){ .ev-services { grid-template-columns:1fr; } }
.ev-service { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:34px 32px; box-shadow:var(--shadow-1); transition:transform .3s, box-shadow .3s; }
.ev-service:hover { transform:translateY(-4px); box-shadow:var(--shadow-2); }
.ev-ico { width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  background:linear-gradient(135deg, var(--navy-lite), var(--navy)); color:#fff; box-shadow:0 10px 22px rgba(11,43,85,.24); }
.ev-ico svg { width:28px; height:28px; }
.ev-service h3 { font-size:clamp(21px,2.6vw,26px); letter-spacing:-0.01em; }
.ev-sub { color:var(--navy); font-weight:700; font-size:14.5px; margin-top:3px; }
.ev-desc { color:var(--txt-dim); font-size:15px; line-height:1.62; margin-top:14px; }
.ev-feats { list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:11px; }
.ev-feats li { display:flex; align-items:flex-start; gap:11px; font-size:14.5px; color:var(--txt); }
.ev-feats svg { width:18px; height:18px; flex:none; color:var(--navy); margin-top:2px; }

/* Abschluss-CTA */
.ev-cta {
  position:relative; overflow:hidden; border-radius:26px; padding:clamp(36px,5vw,56px) clamp(28px,4vw,52px);
  background:radial-gradient(ellipse at 100% 0%, var(--navy-lite), var(--navy) 55%, var(--navy-deep));
  box-shadow:var(--shadow-1); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.ev-cta h2 { color:#fff; font-size:clamp(24px,3.2vw,36px); letter-spacing:-0.02em; }
.ev-cta p { color:rgba(255,255,255,.82); font-size:16.5px; max-width:52ch; margin-top:10px; }
.ev-cta .btn { flex:none; }
@media (max-width:640px){ .ev-cta { flex-direction:column; align-items:flex-start; } .ev-cta .btn { width:100%; justify-content:center; } }