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

:root {
  /* Original-Variablen umbelegen: Akzent fuer Text wird Navy, Gelb kommt gezielt dazu */
  --ink: #2b1d12;
  --ink-light: #5a4030;
  --text: #6b5a4c;
  --text-muted: #81776d;
  --border: #e8e4df;
  --bg: #ffffff;
  --bg-warm: #fdf8f3;
  --bg-subtle: #f5f0ea;
  --accent: #2b1d12;
  --accent-light: #F1A75A;
  --accent-dark: #1a1108;
  --accent-bg: rgba(235,129,19,.12);
  --accent-border: rgba(43,29,18,.22);
  --warm: #EB8113;
  --warm-bg: #fde3c4;
  --warm-dark: #2b1d12;
  --warm-dark-light: #5a4030;
  --font: 'DPB Manrope', Arial, Helvetica, sans-serif;
  --font-display: 'DPB Fineliner', 'DPB Manrope', Arial, sans-serif;
  --radius: 4px;
  --radius-lg: 6px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 6px 6px 0 #2b1d12;
}
/* ── Hero ───────────────────────────────────────────────────── */
.hero2 {
  background: linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.84)), url('header-bg.webp') center / cover no-repeat;
  border-bottom: 0; overflow: hidden; padding-bottom: clamp(5rem, 9vw, 8rem);
}
/* Wasserzeichen wie auf der alten Seite, in Handschrift */
.hero2-watermark {
  position: absolute; left: 50%; bottom: 1.3rem; z-index: 0;
  transform: translateX(-50%) rotate(-2deg);
  font-family: var(--fineliner); font-weight: 700; font-size: clamp(2rem, 5.6vw, 5rem); line-height: 1;
  color: #EB8113; opacity: .2; white-space: nowrap;
  pointer-events: none; user-select: none;
}
.hero2-inner, .hero2-logos { position: relative; z-index: 1; }
.hero2-kicker {
  color: var(--navy);
  background: var(--gelb-blass);
  border: 1px solid var(--gelb);
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
}
.hero2-kicker::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 .55rem 1px .1rem; border-radius: 50%; background: var(--navy); }
.hero2 h1 {
  font-family: var(--pinsel);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.4vw, 4.3rem);
  line-height: 1.12;
  letter-spacing: .01em;
  color: var(--navy);
  transform: rotate(-1.5deg);
  transform-origin: left center;
}
.hero2 h1 .h1-mark {
  position: relative;
  display: inline-block;
  color: var(--gelb);
  background: none;
  text-shadow: 3px 3px 0 var(--navy);
  padding: 0 .2em;
}
/* Kringel um "gerecht" wie auf vitaldesk.de */
.hero2 h1 .h1-mark::after {
  content: "";
  position: absolute;
  inset: -.12em -.18em -.06em -.25em;
  border: 4px solid var(--navy);
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-4deg);
  pointer-events: none;
}
.hero2 h1 em {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--fineliner);
  font-style: normal;
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--navy);
  transform: rotate(1.5deg);
}
.hero2-lead { color: var(--text); }
.hero2-facts { border-top: 2px solid var(--navy); }
.hero2-facts strong { font-family: var(--font); font-weight: 800; color: var(--navy); }

/* Portraet als Polaroid mit Klebestreifen */
.hero2-person {
  position: relative;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 2px;
  padding: 14px 14px 22px;
  box-shadow: 0 22px 40px -18px rgba(43,29,18,.35);
  transform: rotate(1.8deg);
}
.hero2-person::before, .hero2-person::after {
  content: "";
  position: absolute;
  top: -14px;
  width: 110px;
  height: 30px;
  background: rgba(241,167,90,.88);
  box-shadow: 0 1px 2px rgba(43,29,18,.15);
  z-index: 2;
}
.hero2-person::before { left: -22px; transform: rotate(-8deg); }
.hero2-person::after { right: -22px; transform: rotate(7deg); }
.hero2-person img { width: 100%; height: auto; border-radius: 0; border: 0; box-shadow: none; aspect-ratio: 1 / 1; object-fit: cover; }
.hero2-person figcaption strong { font-family: var(--fineliner); font-weight: 400; font-size: 1.6rem; color: var(--navy); }
.hero2-person figcaption span { color: var(--text); }
.hero2-person blockquote {
  font-family: var(--fineliner);
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--navy);
  background: var(--gelb-hell);
  border: 0;
  padding: .8rem 1rem;
  margin: 1rem -1.6rem -2.4rem 1.2rem;
  transform: rotate(-2.5deg);
  box-shadow: 0 6px 14px -6px rgba(43,29,18,.35);
}
.hero2-logos img { filter: grayscale(1) contrast(1.05); opacity: .8; }
.hero2-logos span { color: var(--text); }

/* ── Laufband: Absperrband mit Pinselschrift ────────────────── */
.ticker {
  position: relative;
  z-index: 3;
  width: 104%;
  margin: 1.6rem -2% 1.6rem;
  padding: calc(.75rem + 10px) 0;
  color: var(--navy);
  background:
    var(--streifen) top / 100% 10px no-repeat,
    var(--streifen) bottom / 100% 10px no-repeat,
    var(--gelb);
  border: 0;
  transform: rotate(-1.2deg);
  box-shadow: 0 10px 18px -12px rgba(43,29,18,.45);
}
.ticker-track li {
  font-family: var(--pinsel);
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  letter-spacing: .02em;
}
.ticker-track li::after { color: var(--navy); }

/* ── Karten allgemein ───────────────────────────────────────── */
.focus-card, .crew-list > li, .result-proof-card, .angebot-card, .ref-card, .nw-card, .fachanker-card,
.blog-card, .start-option, .whitepaper-panel, .contact-form, .foerder-price-box, .klartext-close, .pnog-list > li, .kooperation-badge {
  border-radius: 4px !important;
  box-shadow: none;
}
.focus-card, .crew-list > li, .result-proof-card, .angebot-card, .fachanker-card, .blog-card, .start-option {
  background: #fff;
  border: 1px solid var(--linie);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.focus-card:hover, .angebot-card:hover, .fachanker-card:hover, .blog-card:hover, a.start-option:hover {
  border-color: var(--navy);
  box-shadow: 4px 4px 0 var(--navy);
  transform: translate(-2px, -2px);
}
/* Karten auf Navy-Flaechen behalten ihr dunkles Original, Hover in Gelb */
.ref-card, .nw-card { transition: transform .15s, box-shadow .15s, border-color .15s; }
.ref-card:hover, .nw-card:hover { border-color: var(--gelb); box-shadow: 4px 4px 0 var(--gelb); transform: translate(-2px, -2px); }
.focus-card h3, .angebot-card h3, .fachanker-card h3, .blog-card h3, .nw-card h3, .crew-list b {
  font-family: var(--fineliner);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--navy);
}
.nw-card h3 { color: #fff; }
.crew-list b small { color: var(--navy); font-weight: 800; }
.focus-card span, .angebot-kicker, .result-proof-card span, .fachanker-card span {
  color: var(--navy);
  font-weight: 800;
}
.result-proof-card strong, .foerder-price-box strong, .foerder-card .foerder-betrag {
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy);
}

/* Dunkle Flaechen: Abschnittslabel als volles Gelb */
.klartext .section-label, .referenzen .section-label, .netzwerk .section-label, .pain .section-label { background: var(--gelb); color: var(--navy); }
/* Zentrierte Abschnittskoepfe */
.section-label { display: block; width: fit-content; }
.faq .section-label, .foerderung .section-label, .angebote-header .section-label, .referenzen .section-label, .netzwerk .section-label { margin-inline: auto; }

/* Fotos als Polaroid mit Klebestreifen */
.about-photo { background: #fff; padding: 10px; border: 1px solid var(--linie); border-radius: 2px; transform: rotate(-2deg); box-shadow: 0 18px 30px -16px rgba(43,29,18,.4); overflow: visible; }
.about-photo img { border-radius: 0; }
.about-photo::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 96px;
  height: 26px;
  margin-left: -48px;
  background: rgba(241,167,90,.88);
  transform: rotate(4deg);
  z-index: 2;
}
.usp-visual { background: #fff; padding: 12px; border: 1px solid var(--linie) !important; border-radius: 2px !important; box-shadow: 8px 8px 0 var(--gelb) !important; }
.about-quote { background: var(--gelb-blass); border-left-color: var(--navy); font-family: var(--fineliner); font-style: normal; font-size: 1.2rem; color: var(--navy); }
.about-quote * { font-family: inherit; font-style: normal; }
.about-tag { color: var(--navy); background: #fff; border: 1px solid var(--navy); border-radius: 4px; }

/* Kosten: Foerderbox in Signalgelb */
.foerderung::before { display: none; }
.foerder-price-box { background: #fff; border: 1px solid var(--linie); }
.foerder-price-box.highlight { background: var(--gelb) !important; border: 2px solid var(--navy) !important; box-shadow: 6px 6px 0 var(--navy) !important; }
.foerder-price-box.highlight, .foerder-price-box.highlight * { color: var(--navy) !important; }

/* FAQ */
.faq-item { border-radius: 4px; }
.faq-item.open { border-color: var(--navy); box-shadow: 4px 4px 0 var(--navy); }
.faq-trigger { font-weight: 700; color: var(--navy); }
.faq-chevron { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--gelb); color: var(--navy); }

.focus-card strong { font-family: var(--fineliner); font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: var(--navy); }
.focus-card em, .focus-guide-note a {
  color: var(--navy);
  font-style: normal;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--gelb);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}
.focus-guide-note { background: var(--gelb-blass); border: 1px solid var(--gelb-dunkel); border-radius: 4px; color: var(--navy); }

/* ── Klartext: Navy-Flaeche, Zitate als Pinselparolen ───────── */
.klartext { background: var(--navy); }
.klartext .section-title { color: #fff; }
.klartext-item blockquote {
  font-family: var(--pinsel);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.12;
  color: var(--gelb);
  text-shadow: 3px 3px 0 var(--navy-deep);
  border-left: 0;
  padding-left: 0;
  transform: rotate(-1.5deg);
}
.klartext-item:nth-child(2) blockquote { transform: rotate(1.2deg); }
.klartext-item p { color: rgba(255,255,255,.82); }
.klartext-close { background: var(--gelb); border: 2px solid var(--navy-deep); box-shadow: 6px 6px 0 var(--navy-deep); color: var(--navy); }
.klartext-close strong { font-family: var(--font); font-weight: 800; color: var(--navy); }

/* ── PNOG: weiss, Karten mit Pinselnummer wie auf vitaldesk.de ─ */
.pnog { background: #fff; color: var(--text); }
.pnog .section-title { color: var(--navy); }
.pnog .section-desc { color: var(--text); }
.pnog-list li { background: #fff; border: 1px solid var(--linie); padding-left: 4.4rem; }
.pnog-list li:last-child { background: var(--gelb-blass); border-color: var(--gelb-dunkel); }
.pnog-list li::before { font-family: var(--pinsel); font-weight: 400; font-size: 1.9rem; color: var(--gelb); text-shadow: 2px 2px 0 var(--navy); }
.pnog-list b { font-family: var(--fineliner); font-weight: 400; font-size: 1.55rem; line-height: 1.15; letter-spacing: 0; color: var(--navy); }
.pnog-list span { color: var(--text); }
.pnog-list em { color: var(--navy); font-weight: 700; border-top: 1px solid var(--linie); padding-top: .8rem; margin-top: .3rem; }
.pnog-note { color: var(--text); }
.pnog-note a { color: var(--navy); text-decoration-color: var(--gelb); text-decoration-thickness: 2px; }

/* ── Krisenhilfe: weiss mit schraegem Warnband ──────────────── */
/* Das Laufband direkt darueber uebernimmt die Rolle des Warnbands */
.sos { background: #fff; color: var(--text); }
.sos-kicker { color: var(--navy); background: var(--gelb); font-family: var(--pinsel); font-weight: 400; letter-spacing: .04em; transform: rotate(-2deg); display: inline-block; }
.sos h2 {
  font-family: var(--pinsel);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.08;
  color: var(--navy);
  text-shadow: 3px 3px 0 var(--gelb);
}
.sos h2 em { display: block; font-style: normal; color: var(--navy); background: none; padding: 0; }
.sos-lead { color: var(--text); }
.sos-method li { color: var(--navy); border: 1px solid var(--navy); border-radius: 4px; background: #fff; }
.sos-card {
  position: relative;
  background: #fff;
  border: 2px solid var(--navy) !important;
  border-radius: 4px;
  box-shadow: 6px 6px 0 var(--navy);
  padding-top: 2.6rem;
  overflow: hidden;
}
.sos-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 16px; background: var(--streifen); }
.sos-card span {
  display: inline-block;
  font-family: var(--pinsel);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: var(--navy);
  background: var(--gelb);
  padding: .1rem .5rem;
  transform: rotate(-2deg);
}
.sos-card strong { font-family: var(--fineliner); font-weight: 400; font-size: 1.85rem; line-height: 1.15; color: var(--navy); }
.sos-card p { color: var(--text); }
.sos-card a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.sos-note { color: var(--text); }

/* ── Symptome: Navy-Flaeche ─────────────────────────────────── */
.pain { background: var(--navy) !important; }
.pain h2 {
  font-family: var(--pinsel);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--gelb);
  text-shadow: 3px 3px 0 var(--navy-deep);
  line-height: 1.1;
}
.pain h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: .01em; }
.pain h2 em { display: block; font-style: normal; color: #fff; background: none; padding: 0; }
.pain-sub { color: rgba(255,255,255,.78); }
.pain-x { color: var(--gelb) !important; }
.pain-text strong { font-family: var(--fineliner); font-weight: 400; font-size: 1.4rem; color: #fff; }
.pain-resolve { background: transparent !important; border: 2px dashed var(--gelb) !important; border-radius: 4px; }
.pain-resolve strong { color: var(--gelb) !important; }
.pain-cta {
  background: var(--gelb) !important;
  border: 2px solid var(--navy-deep) !important;
  border-radius: 4px !important;
  box-shadow: 6px 6px 0 var(--navy-deep) !important;
  color: var(--navy) !important;
}
.pain-cta * { color: var(--navy) !important; }
.pain-cta .btn-primary { background: var(--navy) !important; color: #fff !important; box-shadow: 4px 4px 0 var(--navy-deep) !important; }


/* Der Dienstplanbauer-Comic steht vor dem Polaroid */
.hero2-person .hero2-cartoon {
  position: absolute; left: -140px; bottom: -90px; z-index: 2;
  width: 200px; height: auto; aspect-ratio: auto; object-fit: contain;
  transform: rotate(-1.8deg); filter: drop-shadow(0 10px 14px rgba(43,29,18,.22));
}
@media (max-width: 1180px) { .hero2-person .hero2-cartoon { left: -120px; bottom: -36px; width: 180px; } }
@media (max-width: 920px) {
  .hero2-person .hero2-cartoon { position: static; grid-column: 1 / -1; width: 200px; margin: .75rem auto 0; transform: none; }
}

/* Navigation mit Fallstudien: auf mittleren Breiten enger setzen, damit der Termin-Button sichtbar bleibt */
@media (max-width: 1180px) {
  .nav-links { gap: .5rem; }
  .nav-links a { font-size: .76rem; }
  .nav-links a.nav-cta { padding-left: .75rem; padding-right: .75rem; }
}

/* Kurzvideo: YouTube-Short im Hochformat neben dem Text */
.kurzvideo { background: var(--bg-warm); padding: 5rem 1.5rem; border-top: 1px solid var(--border); }
.kurzvideo-inner {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; align-items: center;
}
.kurzvideo .section-desc { max-width: 520px; }
.kurzvideo-link {
  display: inline-flex; margin-top: 1.25rem; font-weight: 800; color: var(--ink);
  text-decoration: none; border-bottom: 3px solid #EB8113;
}
.kurzvideo-link:hover { color: #d0710e; }
.kurzvideo-frame {
  position: relative; width: 100%; aspect-ratio: 9 / 16;
  border: 2px solid var(--ink); border-radius: 6px; overflow: hidden;
  background: #1a1108; box-shadow: 6px 6px 0 #EB8113; transform: rotate(1deg);
}
.kurzvideo-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kurzvideo-placeholder { padding: 1.25rem; border: 0; border-radius: 0; }
.kurzvideo-placeholder::before {
  background: linear-gradient(180deg, rgba(13,9,7,.1), rgba(13,9,7,.6)), url('https://i.ytimg.com/vi/7YWwn0i6Zmo/hq2.jpg') center / cover;
}
@media (max-width: 760px) {
  .kurzvideo { padding: 3.5rem 1rem; }
  .kurzvideo-inner { grid-template-columns: 1fr; gap: 2rem; }
  .kurzvideo-frame { width: min(300px, 100%); margin: 0 auto; transform: none; }
}

/* Navigation mit Veranstaltungen: auf mittleren Breiten Vorgehen und FAQ ausblenden (per Scrollen erreichbar) */
@media (max-width: 1180px) {
  .nav-links li:has(> a[href="#vorgehen"]),
  .nav-links li:has(> a[href="#faq"]) { display: none; }
}

/* Zwei Links unter dem Short untereinander */
.kurzvideo-copy .kurzvideo-link { display: flex; width: fit-content; }
.kurzvideo-copy .kurzvideo-link + .kurzvideo-link { margin-top: .85rem; }

/* Link zur Google-Bewertung in den Kundenstimmen */
.ref-meta a { color: #F1A75A; font-weight: 700; }
.ref-meta a:hover { color: #fff; }