/* ==========================================================================
   Heller Seitenkopf für Themen- und Ratgeberseiten (05.11.2026)

   Design-Durchsicht 21.10.: Stadt-, Bundesland- und Wärmepumpenseiten stehen
   seit dem Regionen-Rework auf weißem Grund mit Navy-Titel (regionen/style.css,
   waermepumpe.css). Thermenwartung, Badsanierung, Thermentausch, Klimaanlage,
   Heizungsinstallateur/Gastherme, Kosten und das Wissensmagazin hatten noch den
   dunklen Verlaufs-Hero mit wanderndem Lichtfleck. Diese Datei holt sie in
   denselben Stil, ohne ein neues Design zu erfinden: Werte aus regionen/style.css
   (--ink #142e48, --accent #16738f, --line #d7e2eb, --muted #526578).

   Greift NUR über die Modifier-Klasse `inst-hero-hell` am Hero. Alle anderen
   .ish-hero/.iswm-hero (Startseite, Notdienst, Bezirk, Jobs …) bleiben, wie sie
   sind. Selektoren sind absichtlich eine Stufe schärfer als home-rework.css,
   city-page.css und wissen-rework.css, damit die Ladereihenfolge egal ist.
   ========================================================================== */

.ish-hero.inst-hero-hell,
.iswm-hero.inst-hero-hell{
  --hh-ink:#142e48; --hh-accent:#16738f; --hh-line:#d7e2eb; --hh-muted:#526578; --hh-blue:#1e456c;
  background:#fff; background-image:none; color:var(--hh-ink);
  border-bottom:1px solid var(--hh-line);
}
/* Kein Lichtfleck auf Weiß. */
.ish-hero.inst-hero-hell::before, .ish-hero.inst-hero-hell::after,
.iswm-hero.inst-hero-hell::before, .iswm-hero.inst-hero-hell::after{content:none; animation:none;}

/* ── Raster: dieselbe Inhaltsbreite wie die Regionalseiten, Text links ─────── */
.ish-hero.inst-hero-hell .ish-inner{
  max-width:1280px; margin:0 auto; padding:22px 32px 52px; text-align:left;
}
/* Magazin behält sein eigenes Raster (.iswm-inner 1140px), damit Kopf, Themenfilter,
   Karten und Artikeltext dieselbe linke Kante haben. */
.iswm-hero.inst-hero-hell .iswm-inner{padding-top:30px; padding-bottom:48px; text-align:left;}
.iswm-hero.inst-hero-hell.iswm-hero--archive,
.iswm-hero.inst-hero-hell.iswm-hero--single{padding:0; text-align:left;}

/* Brotkrumen wie .ireg .crumbs */
.ish-hero.inst-hero-hell .icity-crumbs{font-size:14px; color:var(--hh-muted); margin:0 0 34px;}
.ish-hero.inst-hero-hell .icity-crumbs a{color:var(--hh-muted); text-decoration:none;}
.ish-hero.inst-hero-hell .icity-crumbs a:hover{color:var(--hh-accent); text-decoration:underline;}
.ish-hero.inst-hero-hell .icity-crumbs span{color:var(--hh-muted);}
.ish-hero.inst-hero-hell .icity-crumbs [aria-current]{color:var(--hh-ink);}

/* Titel */
.ish-hero.inst-hero-hell .ish-h1,
.iswm-page .iswm-hero.inst-hero-hell h1,
.iswm-page .iswm-hero.inst-hero-hell .iswm-hero-title{
  color:var(--hh-ink); font-size:clamp(36px,3.45vw,50px); line-height:1.08; letter-spacing:-.035em;
  font-weight:750; margin:0; max-width:980px; text-wrap:balance;
}

/* Einleitung: Lesetext, keine Werbezeile */
.ish-hero.inst-hero-hell .ish-sub,
.iswm-hero.inst-hero-hell .iswm-hero-sub{
  color:var(--hh-ink); font-size:19px; line-height:1.55; max-width:64ch; margin:18px 0 0;
}

/* Aktionen: Navy-Knopf + ruhiger Zweitknopf, beide 6px wie auf den Regionalseiten */
.ish-hero.inst-hero-hell .icnd-cta-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-start; margin:28px 0 0;}
.ish-hero.inst-hero-hell .icnd-cta-row .isr-btn,
.ish-hero.inst-hero-hell .icnd-cta-row a.isr-btn:link,
.ish-hero.inst-hero-hell .icnd-cta-row a.isr-btn:visited{
  background:#fff; color:var(--hh-ink); border:1px solid #afc5d6; border-radius:6px;
  padding:12px 20px; font-size:16px; font-weight:650; box-shadow:none;
}
.ish-hero.inst-hero-hell .icnd-cta-row .isr-btn:hover{border-color:var(--hh-accent); color:var(--hh-accent); background:#fff;}
.ish-hero.inst-hero-hell .icnd-cta-row .isr-btn.isr-btn-primary,
.ish-hero.inst-hero-hell .icnd-cta-row a.isr-btn-primary:link,
.ish-hero.inst-hero-hell .icnd-cta-row a.isr-btn-primary:visited{
  background:var(--hh-blue); color:#fff; border-color:var(--hh-blue);
}
.ish-hero.inst-hero-hell .icnd-cta-row .isr-btn.isr-btn-primary:hover,
.ish-hero.inst-hero-hell .icnd-cta-row a.isr-btn-primary:hover{background:var(--hh-ink); border-color:var(--hh-ink); color:#fff;}

/* Vertrauenszeile: Sachinformation in Grau, Symbole im Akzent */
.ish-hero.inst-hero-hell .ish-trust{justify-content:flex-start; color:var(--hh-muted); font-size:15px; font-weight:600; margin-top:22px;}
.ish-hero.inst-hero-hell .ish-trust .ish-tico{color:var(--hh-accent); stroke:currentColor;}
.ish-hero.inst-hero-hell .ish-trust a.icnd-trust-link{color:var(--hh-ink);}
.ish-hero.inst-hero-hell .ish-trust a.icnd-trust-link:hover{color:var(--hh-accent);}
.ish-hero.inst-hero-hell a:not(.isr-btn){color:var(--hh-ink);}
.ish-hero.inst-hero-hell a:not(.isr-btn):hover{color:var(--hh-accent);}

/* ── Wissensmagazin ─────────────────────────────────────────────────────── */
.iswm-hero.inst-hero-hell .iswm-eyebrow{color:var(--hh-accent);}
.iswm-hero.inst-hero-hell .iswm-hero-narrow{max-width:1140px;}
/* Artikelseiten laufen auf 1180px (wm-bausteine.css .iswm-single .iswm-inner). */
.iswm-single .iswm-hero.inst-hero-hell .iswm-hero-narrow{max-width:1180px;}
/* Artikel: Titel so breit wie die Lesespalte (760px), Kante mit dem Text darunter. */
.iswm-hero.inst-hero-hell.iswm-hero--single .iswm-inner{padding-top:36px; padding-bottom:36px;}
.iswm-page .iswm-hero.inst-hero-hell.iswm-hero--single .iswm-hero-title{max-width:760px;}
.iswm-page .iswm-hero.inst-hero-hell .iswm-hero-title{font-size:clamp(34px,3vw,44px); line-height:1.12;}
.iswm-page .iswm-hero.inst-hero-hell a.iswm-hero-cat,
.iswm-page .iswm-hero.inst-hero-hell a.iswm-hero-cat:visited{background:#e8f3f7; color:var(--hh-ink); border-radius:6px;}
.iswm-page .iswm-hero.inst-hero-hell a.iswm-hero-cat:hover{background:var(--hh-blue); color:#fff;}
.iswm-hero.inst-hero-hell .iswm-hero-cat .iswm-ico{color:currentColor;}
.iswm-hero.inst-hero-hell .iswm-hm-author{color:var(--hh-ink);}
.iswm-hero.inst-hero-hell .iswm-hm-sub{color:var(--hh-muted);}
.iswm-hero.inst-hero-hell .iswm-hm-sub .iswm-ico{color:var(--hh-muted);}
.iswm-hero.inst-hero-hell .iswm-hm-dot{color:#9fb1c1;}
/* Das Titelbild hing mit -40px in den dunklen Kopf hinein; auf Weiß mit
   Trennlinie wirkt das wie ein Fehler. */
.iswm-hero.inst-hero-hell + .iswm-article-wrap .iswm-feat,
.iswm-hero.inst-hero-hell ~ * .iswm-feat{margin-top:32px;}

@media (max-width:700px){
  .ish-hero.inst-hero-hell .ish-inner{padding:17px 20px 36px;}
  .iswm-hero.inst-hero-hell .iswm-inner{padding-top:22px; padding-bottom:32px;}
  .ish-hero.inst-hero-hell .icity-crumbs{font-size:13px; margin-bottom:24px;}
  .ish-hero.inst-hero-hell .ish-h1,
  .iswm-page .iswm-hero.inst-hero-hell h1{font-size:34px; line-height:1.1;}
  .iswm-page .iswm-hero.inst-hero-hell .iswm-hero-title{font-size:30px!important; line-height:1.16!important;}
  .ish-hero.inst-hero-hell .ish-sub,
  .iswm-hero.inst-hero-hell .iswm-hero-sub{font-size:17px;}
  .ish-hero.inst-hero-hell .ish-trust{font-size:14px; gap:10px 18px;}
  .iswm-hero.inst-hero-hell.iswm-hero--single .iswm-inner{padding-top:28px; padding-bottom:28px;}
}