/* =====================================================================
   Banner-Notruf – Seiten-Scope (nur body.page-banner-notruf)
   Rot dosiert: Hero, CTAs, Icons, Akzente. Basis bleibt weiß/grau.
   Grün global bleibt unangetastet (diese Datei lädt nur auf dieser Seite).
   Hand-authored, standalone (nicht Teil des gulp/SCSS-Builds).
   ===================================================================== */

body.page-banner-notruf {
  --notruf-red:       #c8102e;
  --notruf-red-dark:  #8c1022;
  --notruf-red-light: #fdeef0;
  --notruf-warn:      #e6a700;
  --notruf-ink:       #1a1a1f;
  --notruf-grey:      #6b6b73;
  --notruf-line:      #e6e4e5;
}

/* =====================================================================
   THEME-OVERRIDES: Grün (#d7f571) → Rot – nur im Seiten-Scope.
   Das Theme-Grün ist in style.min.css in 26 Regeln HARTKODIERT (kein Token).
   Hier werden ausschließlich die auf dieser Seite sichtbaren Content-Regeln
   auf var(--notruf-red) gezogen. BEWUSST ausgeklammert (globale CI, bleibt grün):
   .contact a · .menu* · .menu--footer · .footer-contact · #contact-nav.
   Sauberer wäre ein Theme-Token --color-accent; bewusst NICHT gemacht, um
   Regressionen auf anderen Seiten auszuschließen (siehe NOTRUF-UEBERGABE.md).
   ===================================================================== */

/* Utility-Flächen */
body.page-banner-notruf .bg-green,
body.page-banner-notruf .ns-green   { background: var(--notruf-red); color: #fff; }
body.page-banner-notruf .text-green { color: var(--notruf-red); }

/* Eyebrow-Pills (.label): Pill rot, Text weiß (B2). Der dunkle Default-Text
   säße sonst unleserlich auf der jetzt roten Fläche. */
body.page-banner-notruf .label { background: var(--notruf-red); color: #fff; }

/* Buttons: Outline-Default (.btn) + .btn-green. .btn-primary / -outline-white
   werden weiter unten spezifisch behandelt und gewinnen per Datei-Reihenfolge. */
body.page-banner-notruf .btn       { border-color: var(--notruf-red); color: var(--notruf-red); }
body.page-banner-notruf .btn-green { background: var(--notruf-red); border-color: var(--notruf-red); color: #fff; }

/* Headline-Marker (grüner ::after-Block hinter strong/.b) → Rot */
body.page-banner-notruf h1 .b::after, body.page-banner-notruf h1 strong::after,
body.page-banner-notruf h2 .b::after, body.page-banner-notruf h2 strong::after,
body.page-banner-notruf h3 .b::after, body.page-banner-notruf h3 strong::after,
body.page-banner-notruf h4 .b::after, body.page-banner-notruf h4 strong::after { background: var(--notruf-red); }

/* USP-Stat-Zahlen (B6) */
body.page-banner-notruf .usps__section .usp-stat { color: var(--notruf-red); }

/* FAQ-Toggle / Close-Indikator (B4): rote Kreisfläche, weißes X (aktiv). */
body.page-banner-notruf .active::after { background: var(--notruf-red); color: #fff; }

/* Calculator-Checkbox (falls der Kalkulator hier eingebettet wird) */
body.page-banner-notruf .acalc__check input[type=checkbox]:checked { border-color: var(--notruf-red); background-color: var(--notruf-red); }

/* Video-Modul Headline-Akzent */
body.page-banner-notruf .video--section .video-wrapper h2 span { color: var(--notruf-red); }

/* ---- Reveal-Animation (respektiert prefers-reduced-motion) ---------- */
body.page-banner-notruf .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
body.page-banner-notruf .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.page-banner-notruf .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Buttons auf dieser Seite: Primär = Rot (überschreibt Grün) ----- */
body.page-banner-notruf .btn-primary {
  background: var(--notruf-red); border-color: var(--notruf-red); color: #fff;
}
body.page-banner-notruf .btn-primary:hover,
body.page-banner-notruf .btn-primary:focus { background: var(--notruf-red-dark); border-color: var(--notruf-red-dark); }

/* ---- Honeypot (off-screen, kein display:none) ----------------------- */
body.page-banner-notruf .al-hp-wrap {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* =====================================================================
   1) HERO
   ===================================================================== */
body.page-banner-notruf .notfall-hero__section {
  position: relative;
  background: var(--notruf-red);
  color: #fff;
  overflow: hidden;
}
/* Hero-Eyebrow (B1): Pill CI-Schwarz, Text weiß (statt grauem Default-Pill). */
body.page-banner-notruf .notfall-hero__section .label.notfall-eyebrow {
  background: #272C34; color: #fff; opacity: 1; letter-spacing: .08em; text-transform: uppercase;
}
body.page-banner-notruf .notfall-hero__headline {
  color: #fff; margin: .2em 0 .4em; line-height: 1.2;
}
/* Emphasized-Wörter im Hero nutzen das BESTEHENDE Theme-Plate (h1 strong::after:
   gedrehte, abgerundete Fläche hinter dem Wort) – nicht dupliziert, nur umgefärbt.
   Theme-Default wäre grün, Part-A-Override macht es seitenweit rot; hier im Hero
   auf WEISS spezialisiert (weiße Fläche auf rotem Hero). Text rot, damit er liest.
   strong ist im Theme position:relative; z-index:2 → Plate (z-index:-1) rendert
   korrekt über der roten Section. */
body.page-banner-notruf .notfall-hero__headline strong { color: #fff; }
body.page-banner-notruf .notfall-hero__headline strong::after { background: rgba(0,0,0,0.3); }
/* margin-bottom:0 → Abstand zum Badge kommt allein aus dem Badge (oben=unten). */
body.page-banner-notruf .notfall-hero__text { color: #fff; opacity: .95; max-width: 44ch; margin-bottom: 0; }

/* Diagonaler Rot-Weiß-Warnstreifen – Klammer zum Print-Mailing */
body.page-banner-notruf .notfall-warnstreifen {
  position: absolute; inset: 0 0 auto 0; height: 10px;
  background: repeating-linear-gradient(45deg,
    var(--notruf-red-dark) 0, var(--notruf-red-dark) 22px,
    #fff 22px, #fff 44px);
  opacity: .9;
}

/* Versprechen-Badge */
/* Block-Level (statt inline-flex) + fixe, gleiche vertikale Margins, damit der
   Abstand nach oben (zum Text) und unten (zu den Buttons) IDENTISCH ist –
   Nachbar-Margins sind dafür auf 0 gesetzt. Border entfernt, Fläche dunkel-transluzent. */
body.page-banner-notruf .notfall-badge {
  display: flex; width: fit-content; flex-direction: column; gap: 2px;
  margin: 24px 0; padding: 14px 20px;
  background: rgba(0,0,0,0.3);
  border: 0; border-radius: 14px;
}
body.page-banner-notruf .notfall-badge__main { font-weight: 800; font-size: 1.15rem; }
body.page-banner-notruf .notfall-badge__sub  { font-size: .85rem; opacity: .9; }

body.page-banner-notruf .notfall-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 0; }
/* Primär-CTA auf rotem Grund: WEISS gefüllt mit rotem Text (rot-auf-rot wäre
   unsichtbar). Klare Hierarchie ggü. dem outline-weißen Sekundär-CTA. */
body.page-banner-notruf .notfall-hero__cta .btn-primary {
  background: #fff; color: var(--notruf-red); border-color: #fff;
}
body.page-banner-notruf .notfall-hero__cta .btn-primary:hover,
body.page-banner-notruf .notfall-hero__cta .btn-primary:focus {
  background: var(--notruf-red-light); color: var(--notruf-red-dark); border-color: var(--notruf-red-light);
}
/* Sekundär-CTA (outline-white) auf rotem Grund */
body.page-banner-notruf .notfall-hero__cta .btn-outline-white {
  border-color: #fff; color: #fff;
}
body.page-banner-notruf .notfall-hero__cta .btn-outline-white:hover { background: #fff; color: var(--notruf-red); }

/* =====================================================================
   2) KONTAKTLEISTE
   ===================================================================== */
body.page-banner-notruf .notfall-kontakt__grid {
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
body.page-banner-notruf .notfall-kontakt__tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 22px; border: 1px solid var(--notruf-line); border-radius: 16px;
  background: #fff; color: var(--notruf-ink); text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
body.page-banner-notruf .notfall-kontakt__tile:hover {
  border-color: var(--notruf-red); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(200,16,46,.10);
}
body.page-banner-notruf .notfall-kontakt__icon i { font-size: 1.6rem; color: var(--notruf-red); }
body.page-banner-notruf .notfall-kontakt__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--notruf-grey); }
body.page-banner-notruf .notfall-kontakt__wert  { font-weight: 700; font-size: 1.05rem; word-break: break-word; }
body.page-banner-notruf .notfall-kontakt__hinweis { color: var(--notruf-grey); }

@media (min-width: 768px) {
  body.page-banner-notruf .notfall-kontakt__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Sticky Bottom-Bar auf Mobile */
@media (max-width: 767px) {
  body.page-banner-notruf .notfall-kontakt__section.has-sticky-mobile .notfall-kontakt__grid {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0;
    background: #fff; border-top: 1px solid var(--notruf-line);
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  }
  body.page-banner-notruf .has-sticky-mobile .notfall-kontakt__tile {
    border: 0; border-radius: 0; padding: 10px 6px; text-align: center;
    align-items: center; gap: 2px;
  }
  body.page-banner-notruf .has-sticky-mobile .notfall-kontakt__tile + .notfall-kontakt__tile { border-left: 1px solid var(--notruf-line); }
  body.page-banner-notruf .has-sticky-mobile .notfall-kontakt__wert,
  body.page-banner-notruf .has-sticky-mobile .notfall-kontakt__hinweis { display: none; }
  body.page-banner-notruf .has-sticky-mobile .notfall-kontakt__icon i { font-size: 1.4rem; }
  body.page-banner-notruf.has-notfall-stickybar { padding-bottom: 68px; }
}

/* =====================================================================
   Wiederverwendete Module auf dieser Seite in Rot einfärben
   (usps-Icons, faq-Akzente) – nur im Seiten-Scope.
   ===================================================================== */
body.page-banner-notruf .usp-icon i { color: var(--notruf-red); }
body.page-banner-notruf .faq-icon i { color: var(--notruf-red); }
/* Aktive Frage (dunkle Karte): Fragentext WEISS (nicht rot). Close-X siehe
   .active::after im Theme-Override-Block oben (dort color:#fff). */
body.page-banner-notruf .faq-item.active .faq-question-title { color: #fff; }

/* --- FAQ (B4/Korrektur): NUR die inaktive Frage weiß hinterlegen.
   Modul-Titel bleibt Theme-Standardfarbe (kein Weiß – war ein Missverständnis).
   Aktive Frage (dunkle Karte, weißer Fragentext) bleibt Theme-Default,
   Toggle rot via Theme-Overrides oben. */
body.page-banner-notruf .faq-item:not(.active) { background: #fff; }

/* =====================================================================
   5) CROSSLINK „Leistungsüberblick" (B5) – NUR im Notruf-Scope.
   Geteiltes Modul → global unangetastet. Weiße Kacheln bekommen: rote
   linke Kante, Hover-Lift + Schatten, Nummern-Badge und einen roten Pfeil,
   der beim Hover nach rechts wandert. Ziel: Leistungsüberblick statt Linkliste.
   ===================================================================== */
/* Modul-Überschrift (jetzt im crosslink-Modul statt separatem text-Modul davor):
   üblicher Abstand zum Kartenraster wie in den anderen Modulen. */
body.page-banner-notruf .crosslink__intro { margin-bottom: 30px; }
body.page-banner-notruf .crosslink__section .crosslink-wrapper { counter-reset: xlink; }
body.page-banner-notruf .crosslink-elem {
  position: relative;
  background: #fff;
  border: 1px solid var(--notruf-line);
  border-radius: 18px;
  overflow: hidden;
  counter-increment: xlink;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width: 900px) {
  body.page-banner-notruf .crosslink-elem { width: calc(33.333% - 20px); }
}
body.page-banner-notruf .crosslink-elem:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(200,16,46,.12);
  border-color: var(--notruf-red);
}
/* Nummern-Badge oben rechts – gibt sechs gleichwertigen Kacheln Struktur. */
body.page-banner-notruf .crosslink-elem::before {
  content: counter(xlink, decimal-leading-zero);
  position: absolute; top: 18px; right: 22px; z-index: 1;
  font-size: .8rem; font-weight: 800; letter-spacing: .06em;
  color: var(--notruf-red); opacity: .5;
}
/* Innenabstand ruhiger, Titel typografisch stärker, Text ruhiger. */
body.page-banner-notruf .crosslink-elem .text__container { padding: 34px 32px 30px; }
body.page-banner-notruf .crosslink-elem .text__container h2 { font-size: 1.5rem; line-height: 1.2; margin: 6px 0 10px; }
body.page-banner-notruf .crosslink-elem .text__container p { color: var(--notruf-grey); line-height: 1.6; }
/* CTA-Pfeil: bewusst KEIN eigener Pfeil. Der Theme-Button bringt seinen Pfeil
   (.btn::after, arrow-black.png) samt Hover-Animation (btn-arrow-ani) selbst mit –
   das hält den CTA konsistent zum Rest der Website. Ein zusätzliches content:"→"
   auf demselben ::after ergab sonst den doppelten Pfeil. Button-Farbe (rot) kommt
   aus dem .btn-Override in Teil A. */

/* =====================================================================
   4) ZWEI WEGE (Selbstselektions-Weiche)
   ===================================================================== */
body.page-banner-notruf .notfall-zweiwege__intro { text-align: center; max-width: 60ch; margin: 0 auto 32px; }
body.page-banner-notruf .notfall-zweiwege__grid {
  display: grid; grid-template-columns: 1fr; gap: 20px;
}
@media (min-width: 820px) {
  body.page-banner-notruf .notfall-zweiwege__grid { grid-template-columns: 1fr 1fr; }
  /* Punkt 4: mehr Padding rechts → ruhigere Zeilenlänge, Text endet vor der Kante.
     Nur Desktop; auf Mobile bleibt das gleichmäßige 30px-Padding. */
  body.page-banner-notruf .notfall-weg-card { padding-right: 56px; }
}
body.page-banner-notruf .notfall-weg-card {
  display: flex; flex-direction: column;
  padding: 30px; border: 1px solid var(--notruf-line); border-radius: 20px;
  /* B3: Border-Top entfernt. */
  transition: box-shadow .2s ease, transform .2s ease;
}
body.page-banner-notruf .notfall-weg-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(200,16,46,.10); }
body.page-banner-notruf .notfall-weg-card__title { margin: 0 0 12px; color: var(--notruf-ink); }
body.page-banner-notruf .notfall-weg-card__text { color: var(--notruf-grey); line-height: 1.6; flex: 1 1 auto; }
body.page-banner-notruf .notfall-weg-card__text p { margin: 0 0 12px; }
body.page-banner-notruf .notfall-weg-card__cta { margin-top: 20px; text-decoration: none; align-self: flex-start; }

/* =====================================================================
   7) FORMULAR
   ===================================================================== */
body.page-banner-notruf .notfall-form {
  display: block;   /* Theme setzt global form{display:flex} → Felder in einer Reihe. Zurücksetzen. */
  max-width: 760px; margin: 0 auto;
  background: #fff; border: 1px solid var(--notruf-line); border-radius: 20px;
  padding: 28px;
}
body.page-banner-notruf .notfall-field { margin-bottom: 22px; }
body.page-banner-notruf .notfall-field > label,
body.page-banner-notruf .notfall-field legend {
  display: block; font-weight: 600; margin-bottom: 8px; color: var(--notruf-ink);
}
body.page-banner-notruf .notfall-field small { color: var(--notruf-grey); font-weight: 400; }
body.page-banner-notruf .req { color: var(--notruf-red); }

body.page-banner-notruf .notfall-input {
  width: 100%; padding: 13px 15px; font-size: 1rem;
  border: 1px solid var(--notruf-line); border-radius: 12px; background: #fff;
  color: var(--notruf-ink); font-family: inherit;
}
body.page-banner-notruf .notfall-input:focus {
  outline: none; border-color: var(--notruf-red); box-shadow: 0 0 0 3px var(--notruf-red-light);
}
body.page-banner-notruf textarea.notfall-input { resize: vertical; min-height: 110px; }
body.page-banner-notruf .notfall-hidden { display: none; }
body.page-banner-notruf .notfall-input.notfall-hidden { display: none; }
body.page-banner-notruf .notfall-input:not(.notfall-hidden)[id="brennt_sonstiges"] { display: block; margin-top: 10px; }

/* Chips für Radio/Checkbox */
body.page-banner-notruf .notfall-optionrow { display: flex; flex-wrap: wrap; gap: 10px; }
body.page-banner-notruf .notfall-chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border: 1px solid var(--notruf-line); border-radius: 999px;
  cursor: pointer; user-select: none; background: #fff; transition: all .15s ease;
  min-height: 44px; /* daumengroß */
}
body.page-banner-notruf .notfall-chip input { position: absolute; opacity: 0; pointer-events: none; }
body.page-banner-notruf .notfall-chip:hover { border-color: var(--notruf-red); }
body.page-banner-notruf .notfall-chip:has(input:checked) {
  border-color: var(--notruf-red); background: var(--notruf-red-light); color: var(--notruf-red-dark); font-weight: 600;
}
body.page-banner-notruf .notfall-chip:focus-within { box-shadow: 0 0 0 3px var(--notruf-red-light); }
body.page-banner-notruf .notfall-chip--deadline.is-hot:has(input:checked) { background: var(--notruf-red); color: #fff; }

/* Kontaktdaten-Grid */
body.page-banner-notruf .notfall-grid2 { display: grid; grid-template-columns: 1fr; gap: 0 18px; }
@media (min-width: 620px) { body.page-banner-notruf .notfall-grid2 { grid-template-columns: 1fr 1fr; } }

/* Datei */
body.page-banner-notruf .notfall-file { padding: 11px; background: #faf9fa; }
/* Hinweistext ruhig + klein (Punkt 3b): 12px auf Mobile (nicht kleiner), 11px ab Desktop. */
body.page-banner-notruf .notfall-filehint { display: block; margin-top: 6px; color: var(--notruf-grey); font-size: 12px; line-height: 1.5; }
@media (min-width: 768px) {
  body.page-banner-notruf .notfall-filehint { font-size: 11px; }
}
body.page-banner-notruf .notfall-filehint.is-warn { color: var(--notruf-warn); font-weight: 600; }

/* Fehler = WARN-Gelb, bewusst NICHT Rot (Rot ist hier die Markenfarbe) */
body.page-banner-notruf .notfall-field.has-error .notfall-input { border-color: var(--notruf-warn); box-shadow: 0 0 0 3px rgba(230,167,0,.15); }
body.page-banner-notruf .notfall-field.has-error > label,
body.page-banner-notruf .notfall-field.has-error legend { color: var(--notruf-warn); }
body.page-banner-notruf .notfall-field.has-error .notfall-chip { border-color: var(--notruf-warn); }

body.page-banner-notruf .notfall-submitrow { margin-top: 8px; }
body.page-banner-notruf .notfall-submit { width: 100%; }
body.page-banner-notruf .notfall-submit.is-loading { opacity: .7; cursor: progress; }
body.page-banner-notruf .notfall-submithint { margin-top: 12px; color: var(--notruf-grey); font-size: .9rem; text-align: center; }

@media (min-width: 620px) {
  body.page-banner-notruf .notfall-submit { width: auto; min-width: 260px; }
  body.page-banner-notruf .notfall-submitrow { text-align: left; }
}

/* =====================================================================
   C1) Zweispaltig (Text links / Formular rechts) – Grid-Klassen wie FAQ.
   Formular nicht mehr zentriert/maxbreit, sondern füllt die rechte Spalte.
   Auf Mobile stapelt das Theme-Grid automatisch (Text zuerst).
   ===================================================================== */
/* Punkt 4: Intro + Formular als Einheit absetzen – mehr Abstand nach oben,
   weniger nach unten. Über die Theme-Section-Padding-Logik (Basis:
   section{padding:80px 0}); die Optionen no-padding/overlap bleiben respektiert. */
body.page-banner-notruf .notfall-formular__section:not(.no-padding):not(.overlap) {
  padding-top: 120px;
  padding-bottom: 40px;
}
body.page-banner-notruf .notfall-formular__section .notfall-form {
  max-width: none; margin: 0;
}
body.page-banner-notruf .notfall-formular__intro { position: relative; }
/* Punkt 5: Textspalte auf Desktop rechts absetzen, damit sie nicht am
   Formularcontainer klebt. Auf Mobile stehen die Spalten ohnehin untereinander. */
@media (min-width: 768px) {
  body.page-banner-notruf .notfall-formular__intro { padding-right: 44px; }
}
/* Der aus dem Formular entfernte Reaktionszeit-Hinweis (C2) lebt jetzt links. */
body.page-banner-notruf .notfall-formular__hint {
  margin-top: 18px; padding: 16px 18px;
  border-left: 3px solid var(--notruf-red);
  background: var(--notruf-red-light);
  border-radius: 0 10px 10px 0;
  color: var(--notruf-ink); line-height: 1.6;
}

/* =====================================================================
   C3) Feldblöcke sauber trennen: Fieldset-Rhythmus + ruhige Blocküberschrift.
   Deutlich mehr Abstand ZWISCHEN Blöcken als INNERHALB.
   ===================================================================== */
body.page-banner-notruf .notfall-form .notfall-block {
  border: 0; margin: 0; padding: 0; min-width: 0; /* fieldset-Reset */
}
/* Abstand ZWISCHEN Blöcken deutlich größer als INNERHALB (Punkt 3a): großer
   Vorlauf über dem Fieldset, damit die Legend als Überschrift des FOLGENDEN
   Blocks liest – nicht als Abschluss des vorherigen. */
body.page-banner-notruf .notfall-form .notfall-block + .notfall-block {
  margin-top: 48px; padding-top: 34px; border-top: 1px solid var(--notruf-line);
}
body.page-banner-notruf .notfall-form .notfall-block > legend {
  display: block; float: none; width: 100%; padding: 0; margin: 0 0 8px; /* eng an die Optionen darunter */
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--notruf-grey);
}
/* Innerhalb eines Blocks stehen die Felder enger zusammen. */
body.page-banner-notruf .notfall-block .notfall-field:last-child { margin-bottom: 0; }
/* Pflicht-Sternchen behält die Markenfarbe, auch in der ruhigen Legende. */
body.page-banner-notruf .notfall-block > legend .req { color: var(--notruf-red); }

/* =====================================================================
   B7) BOOK AN APPOINTMENT – zweispaltig nach FAQ-Pattern (Notruf-Scope).
   Text links (.faq__section-info), Cal.com-Embed rechts (.faq-wrapper-Slot).
   ===================================================================== */
body.page-banner-notruf .book_appointment__section .appointment-form { margin: 0; }
body.page-banner-notruf .book_appointment__section #my-cal-inline-30min {
  min-height: 640px; height: 100%; border-radius: 18px; overflow: auto;
}