/* ═══════════════════════════════════════════════════════════════
   DIENSTPLANBAUER IM VITALDESK-DESIGN: Basis fuer alle Seiten
   Ebene ueber dem Original-CSS: gleiche Texte, neues Erscheinungsbild.
   Vorbild: vitaldesk.de Kampagnendesign (Pinsel, Fineliner, Signalgelb, Warnstreifen)
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family: 'DPB Manrope'; font-weight: 400; font-display: swap; src: url('/fonts/manrope-regular.ttf') format('truetype'); }
@font-face { font-family: 'DPB Manrope'; font-weight: 600; font-display: swap; src: url('/fonts/manrope-semibold.ttf') format('truetype'); }
@font-face { font-family: 'DPB Manrope'; font-weight: 700 800; font-display: swap; src: url('/fonts/manrope-bold.ttf') format('truetype'); }
@font-face { font-family: 'DPB Pinsel'; font-weight: 400; font-display: swap; src: url('/fonts/permanent-marker.woff2') format('woff2'); }
@font-face { font-family: 'DPB Fineliner'; font-weight: 400; font-display: swap; src: url('/fonts/kalam.woff2') format('woff2'); }

:root {
  /* VitalDesk-Palette */
  --navy: #2b1d12;
  --navy-deep: #1a1108;
  --gelb: #EB8113;
  --gelb-hell: #F1A75A;
  --gelb-dunkel: #d0710e;
  --gelb-blass: #fde3c4;
  --linie: #e3d6c8;
  --streifen: repeating-linear-gradient(-45deg, #1B1B1B 0 12px, #EB8113 12px 24px);
  --marker: linear-gradient(transparent 52%, #F1A75A 52%, #F1A75A 90%, transparent 90%);
  --pinsel: 'DPB Pinsel', 'DPB Manrope', Arial, sans-serif;
  --fineliner: 'DPB Fineliner', 'DPB Manrope', Arial, sans-serif;
}

/* Kalam und Permanent Marker haben keinen Fettschnitt: kein Kunstfett erzeugen */
html { font-synthesis: none; }
body { color: var(--text); font-size: 16px; }
::selection { background: var(--gelb-hell); color: var(--navy); }

/* ── Typografie ─────────────────────────────────────────────── */
h2, h3, .section-title {
  font-family: var(--fineliner);
  font-weight: 400;
  letter-spacing: 0;
}
.section-title { font-size: clamp(2rem, 3.6vw, 2.85rem); line-height: 1.15; color: var(--navy); }
.section-title em, h2 em {
  font-style: normal;
  color: inherit;
  background: var(--marker);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .15em;
}
.section-desc { color: var(--text); }
.section-label {
  display: inline-block;
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--navy);
  background: var(--marker);
  padding: 0 .25rem;
}
a { text-decoration-color: var(--gelb); }

/* ── Buttons: Gelb mit Navy-Rand und hartem Versatzschatten ─── */
.btn, .form-btn, .consent-btn, .whitepaper-download, .yt-placeholder-btn, .nav-cta, .mobile-subnav-cta {
  font-family: var(--font) !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  border: 2px solid var(--navy) !important;
  box-shadow: 4px 4px 0 var(--navy) !important;
  transition: transform .15s, box-shadow .15s, background .15s !important;
}
.btn:hover, .form-btn:hover, .whitepaper-download:hover, .yt-placeholder-btn:hover, .nav-cta:hover, .consent-btn:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 5px 5px 0 var(--navy) !important;
}
.btn:active, .form-btn:active, .nav-cta:active { transform: translate(2px, 2px) !important; box-shadow: 2px 2px 0 var(--navy) !important; }
.btn-primary, .form-btn, .consent-btn-accept, .whitepaper-download, .yt-placeholder-btn, .nav-cta, .mobile-subnav-cta,
.btn-primary:hover, .form-btn:hover, .consent-btn-accept:hover, .whitepaper-download:hover, .nav-cta:hover {
  background: var(--gelb) !important;
  color: var(--navy) !important;
}
.btn-outline, .btn-outline:hover { background: #fff !important; color: var(--navy) !important; }

/* ── Navigation ─────────────────────────────────────────────── */
.nav { background: #fff; border-bottom: 1px solid #ece4da; }
.nav.scrolled { box-shadow: 0 1px 0 rgba(43,29,18,.08); }
.nav-brand { font-family: var(--pinsel); font-weight: 400; font-size: 1.35rem; letter-spacing: .02em; color: var(--navy); }
.nav-brand span { color: var(--navy); background: var(--marker); padding: 0 .08em; }
.nav-links a { font-family: var(--font); font-weight: 600; color: var(--navy); }
.nav-links a:not(.nav-cta):hover { color: var(--navy); box-shadow: inset 0 -3px 0 var(--gelb); }
.nav-links a.nav-sos { font-weight: 800; color: var(--navy); box-shadow: inset 0 -4px 0 var(--gelb); }
.nav-cta { padding: .55rem 1.1rem !important; font-size: .82rem !important; min-height: 0 !important; }
.mobile-subnav a { border-radius: 4px !important; border-color: var(--navy) !important; color: var(--navy) !important; font-weight: 600; }
.mobile-subnav a.nav-sos { background: var(--gelb) !important; }
.mobile-subnav-cta { box-shadow: 2px 2px 0 var(--navy) !important; }

/* ── Footer ─────────────────────────────────────────────────── */
.footer { background: var(--navy) !important; color: #efe7de; }
.footer-brand { font-family: var(--pinsel); font-weight: 400; letter-spacing: .02em; color: #fff; }
.footer a { color: #efe7de; }
.footer a:hover { color: var(--gelb); }

/* ── Cookie-Hinweis ─────────────────────────────────────────── */
.consent-banner { background: var(--navy) !important; border-top: 0; }
.consent-banner::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; background: var(--streifen); }
.consent-text a { color: var(--gelb) !important; }
.consent-btn-reject { background: transparent !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; }
.consent-btn-accept { box-shadow: 4px 4px 0 var(--navy-deep) !important; border-color: var(--gelb) !important; }