/* =====================================================================
   ASBEST-SEITE — heller Beton-Hintergrund + Warn-Optik (Gelb/Schwarz)
   Nur auf asbestsanierung.html eingebunden, style.css bleibt unberührt.
   ===================================================================== */

/* ---------- Farben: Blau-Akzent wird auf dieser Seite zu Warngelb ---------- */
.page-head--asbest,
.asbest-hell {
  --warn-gelb:     #FFC20E;   /* aus dem Asbest-Warnschild */
  --warn-gelb-hi:  #FFD54A;
  --warn-orange:   #F07C00;
  --warn-schwarz:  #141414;
  --c-copper:      var(--warn-gelb);
  --c-copper-hi:   var(--warn-gelb-hi);
  --c-copper-lo:   #B38600;
  --band-streifen: repeating-linear-gradient(-45deg,
                     var(--warn-gelb) 0 14px, var(--warn-schwarz) 14px 28px);
}

/* KI-Kennzeichnung des Hero-Hintergrunds (asbest-hero.jpg, EU AI Act Art. 50) */
.page-head--asbest .wrap::after {
  content: "KI-generiert";
  position: absolute;
  bottom: 0; right: 0;
  background: rgba(8,7,10,0.72);
  color: var(--c-paper);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 4px;
  border: 1px solid rgba(255,255,255,0.22);
  z-index: 5;
  pointer-events: none;
}
/* Warnstreifen als Übergang vom dunklen Hero in den hellen Bereich */
.page-head--asbest { border-bottom: 0; }
.page-head--asbest + .asbest-hell { border-top: 10px solid transparent; border-image: var(--band-streifen) 10; }

/* ---------- Heller Bereich mit Beton-Hintergrund ---------- */
.asbest-hell {
  position: relative;
  isolation: isolate;
  color: var(--warn-schwarz);
  background: #D6D5D2;
}
/* Das Bild steht beim Scrollen still (auch auf iPhone, wo background-attachment: fixed nicht greift):
   feste Ebene, auf diesen Bereich zugeschnitten. */
.asbest-hell__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: inset(0);
  pointer-events: none;
}
.asbest-hell__bg::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #D6D5D2 url('../img/asbest-beton-hintergrund.jpg') center / cover no-repeat;
}

/* Seitenabstand: Kästen nicht an den Bildschirmrand kleben */
.asbest-hell .wrap { padding-inline: var(--gutter); }
.asbest-hell .usp-grid,
.asbest-hell .usp-grid > * { border-color: transparent; }
/* kein dunkler Kasten hinter der Karte beim Überfahren (Regel aus style.css) */
.asbest-hell .usp-grid > *:hover { background: transparent; }

/* ---------- Überschriften direkt auf Beton: dunkel, Akzentwort als gelbe Markierung ---------- */
.asbest-hell .sec-head { border-bottom-color: rgba(20,20,20,0.25); }
.asbest-hell .sec-head__title { color: var(--warn-schwarz); }
.asbest-hell .sec-head__title .accent {
  color: var(--warn-schwarz);
  background: var(--warn-gelb);
  font-style: italic;
  padding: 0 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- Kästen: Text immer auf dunklem Grund (wie „Das ist drin.") ---------- */
.asbest-hell .sec-head__intro,
.asbest-hell .split__content,
.asbest-hell .process,
.asbest-hell .beratung-card,
.asbest-hell .testimonial-card {
  background: rgba(30, 29, 36, 0.94);
  color: var(--c-bone);
  border: 1px solid rgba(0,0,0,0.35);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.45);
  position: relative;
}
/* Warnstreifen oben an jedem Kasten */
.asbest-hell .sec-head__intro::before,
.asbest-hell .split__content::before,
.asbest-hell .process::before,
.asbest-hell .beratung-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 6px;
  background: var(--band-streifen);
}
.asbest-hell .sec-head__intro { padding: var(--s-6) var(--s-6) var(--s-5); color: var(--c-paper); }
.asbest-hell .split__content  { padding: var(--s-7) var(--s-6) var(--s-6); }
.asbest-hell .process         { padding: 6px var(--s-5) 0; border-top: 1px solid rgba(0,0,0,0.35); }
.asbest-hell .process__step:last-child { border-bottom: 0; }
.asbest-hell .process__step:hover { background: rgba(255,255,255,0.04); }
.asbest-hell .testimonial-card { border-left: 4px solid var(--warn-gelb); }
.asbest-hell .testimonial-card a { color: var(--warn-gelb); text-decoration: underline; text-underline-offset: 2px; }

/* Abschluss-Block bleibt dunkel mit heller Schrift, Leuchtflecken dezenter */
.asbest-hell .cta-block { color: var(--c-bone); box-shadow: 0 18px 40px -18px rgba(0,0,0,0.45); border-style: solid; border-color: transparent; border-width: 6px 0 0; border-image: var(--band-streifen) 6; }
.asbest-hell .cta-block::before,
.asbest-hell .cta-block::after { opacity: 0.16; }

/* Compliance-Karten (TRGS 519 / ASI / P3 / Freimessung) */
/* sitzen direkt unter dem Erkundungs-Kasten → kein doppelter Abschnittsabstand */
.asbest-hell .compliance-block { padding-top: 0; }
.asbest-hell .flip-card__face { box-shadow: 0 18px 40px -18px rgba(0,0,0,0.45); }
.asbest-hell .flip-card__face--front { border-top: 4px solid var(--warn-gelb); }

/* Buttons: Gelb mit schwarzer Schrift */
.asbest-hell .btn--primary { color: var(--warn-schwarz); }
.asbest-hell .btn--primary:hover { color: var(--warn-schwarz); }

/* ---------- Laufband unter dem Hero: Orange statt Rot ---------- */
.asbest-hell .alert-band {
  background: var(--warn-orange);
  color: var(--warn-schwarz);
}
.asbest-hell .alert-band::before {
  background-image: repeating-linear-gradient(45deg,
    transparent 0, transparent 18px,
    rgba(0,0,0,0.10) 18px, rgba(0,0,0,0.10) 36px);
}
.asbest-hell .alert-band__icon { border-color: var(--warn-schwarz); background: var(--warn-gelb); }
.asbest-hell .alert-band__sub  { opacity: 1; }

/* ---------- Symbolbild: Absperrband gelb-schwarz über den Ecken ---------- */
.asbest-hell .split__media {
  outline: 6px solid var(--warn-schwarz);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.55);
}
/* Bild und Textkasten gleich hoch (Desktop) */
@media (min-width: 801px) {
  .asbest-warning-section .split { align-items: stretch; }
  .asbest-warning-section .split__media { aspect-ratio: auto; min-height: 100%; }
  .asbest-warning-section .split__media img { position: absolute; inset: 0; }
}

/* oben rechts: Band mit Aufschrift */
.split__media-band {
  position: absolute;
  top: 12%; right: -19%;
  width: 68%;
  transform: rotate(38deg);
  background: var(--warn-gelb);
  color: var(--warn-schwarz);
  border-block: 5px solid var(--warn-schwarz);
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(0.8rem, 0.6rem + 0.6vw, 1.15rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  padding: 0.15em 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.45);
  pointer-events: none;
  z-index: 1;
}
/* KI-Kennzeichnung bleibt über den Bändern sichtbar */
.asbest-hell .split__media-tag { z-index: 3; }

/* ---------- Fundorte: Flip-Cards mit Piktogramm vorne ---------- */
.fundorte { margin-top: var(--s-8); }
.fundorte__title {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--warn-schwarz);
  margin-bottom: var(--s-5);
}
.fundorte__title .accent { background: var(--warn-gelb); padding: 0 0.15em; font-style: italic; }
.fundort-front { align-items: center !important; justify-content: center; text-align: center; gap: var(--s-4); }
.fundort-front__icon { width: 84px; height: 84px; color: var(--warn-gelb); }
.fundort-front__label {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--c-bone);
  margin: 0;
}
.fundorte .flip-card:focus-visible { outline: 3px solid var(--warn-gelb); outline-offset: 3px; }

/* ---------- Begriffs-Laufband als Absperrband ---------- */
.asbest-hell .marquee:not(.marquee--cities) {
  background: var(--warn-gelb);
  border: 0;
  border-block: 8px solid transparent;
  border-image: var(--band-streifen) 8;
}
.asbest-hell .marquee:not(.marquee--cities) .marquee__item { color: var(--warn-schwarz); }
.asbest-hell .marquee:not(.marquee--cities) .marquee__item::after { content: "⚠"; color: var(--warn-schwarz); }

/* ---------- Mobil ---------- */
@media (max-width: 760px) {
  .asbest-hell .sec-head__intro { padding: var(--s-5) var(--s-4) var(--s-4); }
  .asbest-hell .split__content  { padding: var(--s-6) var(--s-4) var(--s-5); }
  .asbest-hell .process         { padding: 6px var(--s-3) 0; }
  /* Fundorte auf dem Handy zweispaltig und kompakter */
  .fundorte .usp-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .fundorte .usp-grid > * { padding: 0; border: 0; }
  .fundorte .flip-card { height: 190px; }
  .fundorte .flip-card__face { padding: var(--s-3); }
  .fundort-front__icon { width: 58px; height: 58px; }
  .fundort-front__label { font-size: var(--t-md); }
  .fundorte .flip-card__face--back .usp__text { font-size: 0.88rem; line-height: 1.45; }
  /* FAQ: im HTML fest zweispaltig (Inline-Style) — auf dem Handy untereinander */
  .asbest-hell .testimonials { grid-template-columns: 1fr !important; gap: var(--s-5); }
}