/* ==========================================================================
   SHK-Info.de – Markenfläche „Glut"

   Übernimmt die Bildsprache des Kanalbanners: tiefes Rot mit heißem Kern,
   Schaltplan-Linien, die Formel Q = m · c · ΔT als Wasserzeichen und die
   Welle unten. Alles als Verlauf und SVG, damit es bei jeder Breite scharf
   bleibt und kaum etwas wiegt.

   Bewusst sparsam eingesetzt: auf der Startseite und bei den Videos, wo die
   Marke wirken soll. Wissensartikel und Rechner bleiben hell und ruhig –
   auf rotem Grund liest niemand gern eine Heizlastberechnung.
   ========================================================================== */

:root {
  --glut-tief:   #270104;   /* Rand, fast schwarz */
  --glut-dunkel: #4f0408;
  --glut-mitte:  #ac0000;
  --glut-kern:   #bf0707;
  --glut-heiss:  #ff3203;   /* Lichtpunkt oben rechts */
}

.glut {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(120% 140% at 88% 8%,
      rgb(255 50 3 / .55) 0%,
      rgb(191 7 7 / .65) 26%,
      transparent 62%),
    radial-gradient(130% 120% at 30% 55%,
      var(--glut-mitte) 0%,
      var(--glut-dunkel) 58%,
      var(--glut-tief) 100%);
}

/* Schaltplan und Rasterpunkte */
.glut__muster {
  position: absolute; inset: 0;
  z-index: -1;
  opacity: .5;
  pointer-events: none;
}
.glut__muster svg { width: 100%; height: 100%; }

/* Formel als Wasserzeichen – tief gesetzt, damit sie nichts überlagert */
.glut__formel {
  position: absolute;
  left: clamp(-1rem, 2vw, 4rem);
  bottom: clamp(2rem, 6vw, 5rem);
  z-index: -1;
  margin: 0;
  font-size: clamp(3rem, 9vw, 7.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  color: rgb(255 120 60 / .17);
  pointer-events: none;
  user-select: none;
}

/* Welle am unteren Rand */
.glut__welle {
  position: absolute; inset: auto 0 0 0;
  z-index: -1;
  height: clamp(60px, 12vw, 130px);
  pointer-events: none;
}
.glut__welle svg { width: 100%; height: 100%; display: block; }

.glut a { color: #fff; }
/* Auf rotem Grund wäre ein roter Knopf unsichtbar – hier trägt Weiß */
.glut .knopf--haupt {
  background: #fff; color: var(--rot-700);
  border-color: #fff;
}
.glut .knopf--haupt:hover { background: var(--rot-50); color: var(--rot-800); }

.glut .knopf--leise {
  background: transparent; color: #fff;
  border-color: rgb(255 255 255 / .4);
}
.glut .knopf--leise:hover { background: rgb(255 255 255 / .12); color: #fff; }

/* --- Heldenbereich der Startseite ----------------------------------------- */
.held { padding-block: var(--raum-16) 0; }
@media (min-width: 62rem) {
  .held { padding-block: var(--raum-24) 0; }
}

.held__innen {
  display: grid;
  gap: var(--raum-8);
  align-items: end;
}
@media (min-width: 62rem) {
  /* Dem Bild mehr Raum geben – die beiden sollen präsent sein */
  .held__innen { grid-template-columns: 1fr 1fr; gap: var(--raum-8); }
}
@media (min-width: 80rem) {
  .held__innen { grid-template-columns: 1.05fr .95fr; gap: var(--raum-12); }
}

.held__text { padding-bottom: var(--raum-16); }

.held__auge {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgb(255 255 255 / .62);
  margin-bottom: var(--raum-5);
}

/* Der Claim vom Banner */
.held h1 {
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: var(--raum-4);
  text-wrap: balance;
}

.held__unterzeile {
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
  color: rgb(255 255 255 / .82);
  max-width: 34rem;
  margin-bottom: var(--raum-8);
}

/* Suchfeld auf dunklem Grund */
.held .suche { margin-bottom: var(--raum-5); }
.held .suche__feld {
  background: rgb(255 255 255 / .1);
  border-color: rgb(255 255 255 / .28);
  color: #fff;
  backdrop-filter: blur(4px);
}
.held .suche__feld::placeholder { color: rgb(255 255 255 / .55); }
.held .suche__feld:focus-visible {
  background: rgb(255 255 255 / .16);
  border-color: rgb(255 255 255 / .6);
}
.held .hero__schnellwahl { color: rgb(255 255 255 / .65); }
.held .hero__schnellwahl a {
  color: #fff;
  text-decoration-color: rgb(255 255 255 / .45);
}

/* Abzweig zum Produkt, abgesetzt vom kostenlosen Angebot */
.held__abzweig {
  margin-top: var(--raum-6);
  padding-top: var(--raum-5);
  border-top: 1px solid rgb(255 255 255 / .22);
  font-size: var(--text-sm);
  color: rgb(255 255 255 / .7);
}
.held__abzweig a { font-weight: 600; margin-left: var(--raum-1); color: #fff; }

/* Die beiden – unten bündig, das Bild läuft in die Welle hinein */
.held__personen {
  display: none;
  align-self: end;
  justify-self: center;
  margin-bottom: -1px;
  width: 100%;
}
@media (min-width: 62rem) {
  .held__personen { display: block; }
}
.held__personen img {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  margin-inline: auto;
  /* Freigestellt – ein weicher Schatten setzt sie von der Glutfläche ab */
  filter: drop-shadow(0 18px 36px rgb(0 0 0 / .4));
}

/* --- Trennband unter dem Heldenbereich ------------------------------------ */
.markenkante {
  height: 4px;
  background: linear-gradient(
    to right,
    var(--shk-rot)  0 33.33%,
    var(--shk-blau) 33.33% 66.66%,
    var(--shk-gelb) 66.66% 100%);
}

/* --- Kanalband (Videos) --------------------------------------------------- */
.kanal { padding-block: var(--raum-16); }
.kanal__innen {
  display: grid; gap: var(--raum-8);
  align-items: center;
}
@media (min-width: 55rem) {
  .kanal__innen { grid-template-columns: 1fr auto; gap: var(--raum-12); }
}
.kanal h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: -0.03em;
  margin-bottom: var(--raum-3);
}
.kanal p { color: rgb(255 255 255 / .8); max-width: 42rem; }
.kanal__zahlen {
  display: flex; flex-wrap: wrap; gap: var(--raum-8);
  margin-top: var(--raum-8);
}
.kanal__zahl { font-variant-numeric: tabular-nums; }
.kanal__zahl strong {
  display: block;
  font-size: var(--text-2xl); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.1;
}
.kanal__zahl span { font-size: var(--text-xs); color: rgb(255 255 255 / .65); }

.kanal__wahl { display: flex; flex-wrap: wrap; gap: var(--raum-3); }

/* --- Produktblock mit Abbildung -------------------------------------------
   Ersetzt die reinen Textkästen bei Heizreport-Hinweisen. Die Abbildungen
   stammen aus heiz.report – es ist dasselbe Haus.
   ------------------------------------------------------------------------- */
.produkt {
  display: grid; gap: var(--raum-8);
  align-items: center;
  margin-block: var(--raum-12);
  padding: var(--raum-8);
  border-radius: var(--radius-lg);
  background: var(--blau-900);
  color: var(--blau-100);
  border-left: 4px solid var(--shk-rot);
  overflow: hidden;
}
@media (min-width: 55rem) {
  .produkt { grid-template-columns: 1fr 1fr; gap: var(--raum-12); }
  .produkt--schmal { grid-template-columns: 1.2fr .8fr; }
}

.produkt__marke {
  display: block;
  height: 1.5rem; width: auto;
  margin-bottom: var(--raum-5);
  /* Das Logo ist dunkel – auf blauem Grund aufhellen */
  filter: brightness(0) invert(1);
  opacity: .9;
}
.produkt h2 {
  color: #fff;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--raum-3);
}
.produkt p { font-size: var(--text-sm); }
.produkt__wahl {
  display: flex; flex-wrap: wrap; gap: var(--raum-3);
  margin-top: var(--raum-6);
}
.produkt .knopf--haupt { background: #fff; color: var(--blau-900); border-color: #fff; }
.produkt .knopf--haupt:hover { background: var(--blau-50); color: var(--blau-900); }
.produkt .knopf--leise { background: transparent; color: #fff; border-color: rgb(255 255 255 / .38); }
.produkt .knopf--leise:hover { background: rgb(255 255 255 / .12); color: #fff; }

.produkt__bild {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten-lg);
  background: rgb(255 255 255 / .06);
}
.produkt__bild img { width: 100%; height: auto; display: block; }

/* Freigestelltes Motiv: Rahmen, Flaeche und Schatten wuerden es wie ein
   aufgeklebtes Bild wirken lassen. Es soll im Kasten stehen, nicht darin
   haengen. */
.produkt__bild--frei {
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

/* Heller Produktblock für Seiten, die ruhig bleiben sollen */
.produkt--hell {
  background: var(--grau-50);
  color: var(--farbe-text);
  border: 1px solid var(--farbe-linie);
  border-left: 4px solid var(--shk-rot);
}
.produkt--hell h2 { color: var(--farbe-text); }
.produkt--hell p { color: var(--farbe-text-leise); }
.produkt--hell .produkt__marke { filter: none; opacity: 1; }
.produkt--hell .knopf--haupt { background: var(--farbe-cta); color: #fff; border-color: var(--farbe-cta); }
.produkt--hell .knopf--haupt:hover { background: var(--farbe-cta-hover); color: #fff; }
.produkt--hell .knopf--leise { background: #fff; color: var(--farbe-text); border-color: var(--farbe-linie); }
.produkt--hell .knopf--leise:hover { background: var(--grau-50); color: var(--farbe-text); }

/* Hauptwege im Heldenbereich – ersetzt das Suchfeld, solange es nichts
   Durchsuchbares gibt */
.held__wahl {
  display: flex; flex-wrap: wrap; gap: var(--raum-3);
  margin-bottom: var(--raum-5);
}

/* --- Glut als Bereichskopf ------------------------------------------------
   Dieselbe Markenfläche wie auf der Startseite, nur flacher und ohne
   eigenes SVG: Verlauf, Hilfslinien und Formel entstehen hier komplett aus
   CSS, damit jede Seite nur eine Klasse mehr braucht. Die Welle bleibt der
   Startseite vorbehalten - sie leitet dort in den Inhalt über, hier würde
   sie den Kopf nur weich machen.
   ------------------------------------------------------------------------- */
.bereichskopf.bereichskopf--glut {
  border-bottom: 0;
  /* Unten mehr Luft als oben: der Inhalt soll nicht an der Kante kleben */
  padding-block: var(--raum-12) var(--raum-16);
}

/* Hilfslinien wie im Banner, quer und längs, sehr zurückhaltend */
.bereichskopf.bereichskopf--glut::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .75;
  background:
    repeating-linear-gradient(to right,
      rgb(255 160 120 / .30) 0 1px, transparent 1px 11rem),
    repeating-linear-gradient(to bottom,
      rgb(255 160 120 / .24) 0 1px, transparent 1px 6rem);
  mask-image: radial-gradient(110% 100% at 78% 0%, #000 5%, transparent 70%);
}

/* Formel als Wasserzeichen, wie auf der Startseite links unten */
.bereichskopf.bereichskopf--glut::after {
  content: "Q = m · c · ΔT";
  position: absolute;
  right: clamp(1rem, 4vw, 4rem);
  bottom: -0.5rem;
  z-index: -1;
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  color: rgb(255 120 60 / .16);
  pointer-events: none; user-select: none;
}
/* Auf schmalen Schirmen laege die Formel unter dem Fliesstext */
@media (max-width: 52rem) {
  .bereichskopf.bereichskopf--glut::after { content: none; }
}

/* Schrift auf dunklem Grund */
.bereichskopf--glut h1 { color: #fff; }
.bereichskopf--glut .bereichskopf__text { color: rgb(255 255 255 / .82); }
.bereichskopf--glut .bereichskopf__zahl { color: rgb(255 255 255 / .62); }
.bereichskopf--glut .krumen { color: rgb(255 255 255 / .62); }
.bereichskopf--glut .krumen a { color: rgb(255 255 255 / .82); }
.bereichskopf--glut .krumen a:hover { color: #fff; }
.bereichskopf--glut .krumen li + li::before { color: rgb(255 255 255 / .4); }

/* Die Partnersuche steht auf der Fachbetriebsseite mitten im roten Kopf:
   Beiwerk, das sonst grau oder blau bliebe, traegt hier Weiss. */
.bereichskopf--glut .partnerwahl { color: rgb(255 255 255 / .7); }
.bereichskopf--glut .partnerwahl button {
  color: #fff; text-decoration-color: rgb(255 255 255 / .5);
}
.bereichskopf--glut .partnerwahl button:hover { text-decoration-color: #fff; }
/* basis.css setzt fuer Eingaben color: inherit - im roten Kopf hiesse das
   weisse Schrift auf weissem Feld. Also zuruecksetzen. */
.bereichskopf--glut input,
.bereichskopf--glut textarea,
.bereichskopf--glut select { color: var(--farbe-text); }

.bereichskopf--glut .partnersuche__feld { border-color: rgb(255 255 255 / .35); }
.bereichskopf--glut .partnersuche__feld:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px; border-color: #fff;
}