/* ---------- Störer ------------------------------------------------------- *
 * Auffälliger Handlungsaufruf im Lesetext (Notfall-Express-Anfrage): dunkle
 * Markenfläche, Notfall-Marke auf der Oberkante, der Tipp als hellere Fußleiste.
 * Das Thema (Kälte, Wärme) färbt Leuchten und Stichwort; Fläche und
 * Anfrageknopf bleiben in den Markenfarben wie alle Anfrageknöpfe. */
.content-section > .stoerer {
  margin-top: clamp(2.5rem, 2rem + 1.4vw, 3.25rem);
}

.stoerer {
  --stoerer-glow: var(--color-primary-500);
  --stoerer-tone: var(--color-accent-400);
  position: relative;
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-900);
  background-image: radial-gradient(
    120% 150% at 100% 0%,
    color-mix(in oklch, var(--stoerer-glow) 55%, transparent) 0%,
    transparent 62%
  );
  color: var(--color-primary-100);
  box-shadow: var(--shadow-lift);
}

.stoerer__main {
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem) clamp(1.35rem, 1rem + 1.6vw, 2.6rem)
    clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
}

.stoerer__title {
  max-width: 17em;
  font-size: var(--text-fluid-2xl);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #fff;
}

.stoerer__kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--stoerer-tone);
}

.stoerer__kicker svg {
  flex: none;
}

.stoerer__text {
  max-width: 34rem;
  margin-top: 0.9rem;
  font-size: var(--text-fluid-base);
  line-height: 1.6;
}

.stoerer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
}

@media (max-width: 479.98px) {
  .stoerer__actions .btn {
    width: 100%;
    padding-inline: 1rem;
  }
}

@media (max-width: 399.98px) {
  .stoerer__actions .btn {
    font-size: var(--text-fluid-xs);
  }
}

.stoerer__call {
  border-color: color-mix(in oklch, #fff 35%, transparent);
  color: #fff;
}

.stoerer__call:hover {
  border-color: #fff;
  background: color-mix(in oklch, #fff 10%, transparent);
}

.stoerer__tip {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem clamp(1.35rem, 1rem + 1.6vw, 2.6rem) 1.3rem;
  border-top: 1px solid color-mix(in oklch, #fff 14%, transparent);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: color-mix(in oklch, #fff 7%, transparent);
  font-size: var(--text-fluid-sm);
  line-height: 1.55;
}

.stoerer__tip-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stoerer-tone);
}

.stoerer__tip strong {
  color: #fff;
}

/* Notfall-Marke: Signalrot für beide Themen, sitzt als Etikett auf der
 * Oberkante; das Warnsymbol trägt die Bedeutung ohne Farbe mit. */
.stoerer__badge {
  position: absolute;
  top: 0;
  right: clamp(1rem, 0.4rem + 2vw, 2.25rem);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: oklch(0.55 0.2 27);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  transform: translateY(-50%);
  box-shadow: 0 10px 22px -12px oklch(0.4 0.16 27 / 0.75);
}

.stoerer__badge svg {
  flex: none;
  stroke-width: 2.2;
}

@media (min-width: 640px) {
  .stoerer__badge {
    gap: 0.45rem;
    padding: 0.5rem 1rem 0.5rem 0.85rem;
    font-size: 0.85rem;
  }
}

/* Notkälte: eisblaues Leuchten, Stichwort in hellem Eisblau. */
.stoerer--kaelte {
  --stoerer-glow: oklch(0.7 0.12 226);
  --stoerer-tone: oklch(0.88 0.075 218);
}

/* Notwärme: warmes Glühen, Stichwort in hellem Bernstein. */
.stoerer--waerme {
  --stoerer-glow: oklch(0.66 0.16 45);
  --stoerer-tone: oklch(0.87 0.1 72);
}