/* PHOTOKAT – SUBPAGE HERO SYSTEM V8 / 2026-10-05
   Klar, freundlich, lichtaktiv. Kein Grau, kein dunkler Schleier, keine Fake-Sonne.
   Diese Datei wird bewusst NACH den alten Inline-Styles geladen und überschreibt sie global.
*/
:root{
  --pk-hero-ink:#0b221e;
  --pk-hero-blue:#078fd4;
  --pk-hero-blue-2:#55bdea;
  --pk-hero-sky:#dff5ff;
  --pk-hero-ice:#f8fdff;
}

/* Unterseiten-Heros: helle Blau-/Glaswelt statt grauem oder dunklem Overlay */
body main > .hero,
body main > .page-header,
body main > .masthead,
body main > .header-bg,
body main > .hero-section,
body main > .hero-banner,
body main > .header-hero,
body main > .page-hero,
main [class*="hero"]:not(.home-hero){
  position:relative !important;
  min-height:470px !important;
  display:flex !important;
  align-items:center !important;
  color:var(--pk-hero-ink) !important;
  background-color:var(--pk-hero-sky) !important;
  background-image:
    linear-gradient(112deg,
      #f7fcff 0%,
      #e5f6ff 30%,
      #c7ebff 65%,
      #91d4f5 100%) !important;
  background-blend-mode:normal !important;
  background-position:center !important;
  background-size:cover !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
  overflow:hidden !important;
}

/* Nur Licht und Glasreflex – keine graue Ebene und kein weißer Kreis */
body main > .hero::before,
body main > .page-header::before,
body main > .masthead::before,
body main > .header-bg::before,
body main > .hero-section::before,
body main > .hero-banner::before,
body main > .header-hero::before,
body main > .page-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:1 !important;
  background:
    linear-gradient(104deg,
      rgba(255,255,255,.78) 0%,
      rgba(255,255,255,.34) 42%,
      rgba(255,255,255,0) 72%) !important;
}
body main > .hero::after,
body main > .page-header::after,
body main > .masthead::after,
body main > .header-bg::after,
body main > .hero-section::after,
body main > .hero-banner::after,
body main > .header-hero::after,
body main > .page-hero::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:1 !important;
  border-radius:0 !important;
  transform:none !important;
  width:auto !important;
  height:auto !important;
  background:
    radial-gradient(circle at 88% 16%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.20) 16%, rgba(255,255,255,0) 38%),
    linear-gradient(165deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 45%) !important;
}

/* Inhalt nach vorn, ohne sichtbare Box um den Text */
body main > .hero > *,
body main > .page-header > *,
body main > .masthead > *,
body main > .header-bg > *,
body main > .hero-section > *,
body main > .hero-banner > *,
body main > .header-hero > *,
body main > .page-hero > *{
  position:relative !important;
  z-index:2 !important;
}
.hero .hero-grid,
.hero .copy,
.hero .hero-grid > div,
.page-header .copy,
.page-hero .copy{
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.hero .hero-grid > div,
.hero .copy{max-width:780px !important;}

/* Dunkle, klare Typografie auf hellem Himmelblau */
.hero h1,.hero h2,.hero h3,.hero p,.hero .lead,
.page-header h1,.page-header h2,.page-header h3,.page-header p,.page-header .lead,
.masthead h1,.masthead h2,.masthead h3,.masthead p,.masthead .lead,
.header-bg h1,.header-bg h2,.header-bg h3,.header-bg p,.header-bg .lead,
.hero-section h1,.hero-section h2,.hero-section h3,.hero-section p,.hero-section .lead,
.hero-banner h1,.hero-banner h2,.hero-banner h3,.hero-banner p,.hero-banner .lead,
.header-hero h1,.header-hero h2,.header-hero h3,.header-hero p,.header-hero .lead,
.page-hero h1,.page-hero h2,.page-hero h3,.page-hero p,.page-hero .lead{
  color:var(--pk-hero-ink) !important;
  text-shadow:none !important;
  opacity:1 !important;
}
.hero p,.hero .lead,.page-header p,.page-header .lead,.page-hero p,.page-hero .lead{
  color:#173d4b !important;
}
.hero .eyebrow,.page-header .eyebrow,.masthead .eyebrow,.header-bg .eyebrow,
.hero-section .eyebrow,.hero-banner .eyebrow,.header-hero .eyebrow,.page-hero .eyebrow{
  color:#007bc2 !important;
  background:transparent !important;
  text-shadow:none !important;
}

/* CTA im bekannten PHOTOKAT-Blau */
.hero .btn,.page-header .btn,.masthead .btn,.header-bg .btn,
.hero-section .btn,.hero-banner .btn,.header-hero .btn,.page-hero .btn{
  background:linear-gradient(135deg,#078fd4,#28afea) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 9px 24px rgba(7,143,212,.20) !important;
}
.hero .ghost,.page-header .ghost,.masthead .ghost,.header-bg .ghost,
.hero-section .ghost,.hero-banner .ghost,.header-hero .ghost,.page-hero .ghost{
  color:var(--pk-hero-ink) !important;
  border:1px solid rgba(0,123,194,.28) !important;
  background:rgba(255,255,255,.76) !important;
}

/* Echte Bilder niemals abdunkeln */
.hero img,.page-header img,.masthead img,.header-bg img,.hero-section img,
.hero-banner img,.header-hero img,.page-hero img{
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

@media(max-width:768px){
  body main > .hero,body main > .page-header,body main > .masthead,
  body main > .header-bg,body main > .hero-section,body main > .hero-banner,
  body main > .header-hero,body main > .page-hero{
    min-height:400px !important;
    background-image:linear-gradient(145deg,#f9fdff 0%,#dff4ff 48%,#a9ddf7 100%) !important;
  }
}

/* ==========================================================
   PHOTOKAT V7 – HERO TYPOGRAPHY SPECIFICITY FIX
   Begrenzt auf Hero-/Header-Bereiche; überschreibt alte weiße Regeln.
   ========================================================== */
body main [class~="hero"] h1,
body main [class~="hero"] h2,
body main [class*="hero-"] h1,
body main [class*="hero-"] h2,
body main [class*="-hero"] h1,
body main [class*="-hero"] h2,
body main .page-header h1,
body main .page-header h2,
body main .masthead h1,
body main .masthead h2,
body main .header-bg h1,
body main .header-bg h2,
body main #hero h1,
body main #hero h2,
body main #page-header h1,
body main #page-header h2 {
  color:#0b221e !important;
  -webkit-text-fill-color:#0b221e !important;
  text-shadow:none !important;
  opacity:1 !important;
}

body main [class~="hero"] p,
body main [class~="hero"] .lead,
body main [class*="hero-"] p,
body main [class*="hero-"] .lead,
body main [class*="-hero"] p,
body main [class*="-hero"] .lead,
body main .page-header p,
body main .page-header .lead,
body main .masthead p,
body main .masthead .lead,
body main .header-bg p,
body main .header-bg .lead,
body main #hero p,
body main #page-header p {
  color:#173d4b !important;
  -webkit-text-fill-color:#173d4b !important;
  text-shadow:none !important;
  opacity:1 !important;
}

body main [class~="hero"] .eyebrow,
body main [class*="hero-"] .eyebrow,
body main [class*="-hero"] .eyebrow,
body main .page-header .eyebrow,
body main .masthead .eyebrow,
body main .header-bg .eyebrow,
body main #hero .eyebrow,
body main #page-header .eyebrow {
  color:#007bc2 !important;
  -webkit-text-fill-color:#007bc2 !important;
  text-shadow:none !important;
  opacity:1 !important;
  font-weight:700 !important;
}

/* ==========================================================
   PHOTOKAT V8 – SINGLE-SURFACE SUBPAGE HERO
   Eine durchgehende helle Himmelsfläche. Keine Panels, kein Grau,
   keine Kreise, keine alten Overlay-Pseudoelemente.
   ========================================================== */
body main > .hero,
body main > .page-header,
body main > .masthead,
body main > .header-bg,
body main > .hero-section,
body main > .hero-banner,
body main > .header-hero,
body main > .page-hero,
body main > section[class*="hero"]:not(.home-hero){
  background:#dff4ff !important;
  background-image:linear-gradient(105deg,#f5fcff 0%,#eaf8ff 24%,#d8f2ff 52%,#bee7fb 76%,#a9dfff 100%) !important;
  background-color:#dff4ff !important;
  background-blend-mode:normal !important;
  filter:none !important;
  -webkit-filter:none !important;
  box-shadow:none !important;
  color:#0b221e !important;
}

/* Alle alten Licht-/Grau-/Kreis-Overlays wirklich abschalten */
body main > .hero::before, body main > .hero::after,
body main > .page-header::before, body main > .page-header::after,
body main > .masthead::before, body main > .masthead::after,
body main > .header-bg::before, body main > .header-bg::after,
body main > .hero-section::before, body main > .hero-section::after,
body main > .hero-banner::before, body main > .hero-banner::after,
body main > .header-hero::before, body main > .header-hero::after,
body main > .page-hero::before, body main > .page-hero::after{
  content:none !important;
  display:none !important;
  background:none !important;
  opacity:0 !important;
}

/* Keine innere Karte/Glasscheibe: Text steht frei auf EINER Hero-Fläche */
body main > .hero > .wrap,
body main > .hero .copy,
body main > .hero .hero-grid,
body main > .hero .hero-grid > div,
body main > .page-header > .wrap,
body main > .page-header .copy,
body main > .masthead > .wrap,
body main > .masthead .copy,
body main > .header-bg > .wrap,
body main > .header-bg .copy,
body main > .hero-section > .wrap,
body main > .hero-section .copy,
body main > .hero-banner > .wrap,
body main > .hero-banner .copy,
body main > .header-hero > .wrap,
body main > .header-hero .copy,
body main > .page-hero > .wrap,
body main > .page-hero .copy{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  border:0 !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:1 !important;
}

body main > .hero h1, body main > .hero h2,
body main > .page-header h1, body main > .page-header h2,
body main > .masthead h1, body main > .masthead h2,
body main > .header-bg h1, body main > .header-bg h2,
body main > .hero-section h1, body main > .hero-section h2,
body main > .hero-banner h1, body main > .hero-banner h2,
body main > .header-hero h1, body main > .header-hero h2,
body main > .page-hero h1, body main > .page-hero h2{
  color:#0b221e !important;
  -webkit-text-fill-color:#0b221e !important;
  text-shadow:none !important;
}
body main > .hero p, body main > .hero .lead,
body main > .page-header p, body main > .page-header .lead,
body main > .page-hero p, body main > .page-hero .lead{
  color:#173d4b !important;
  -webkit-text-fill-color:#173d4b !important;
  text-shadow:none !important;
}

@media(max-width:768px){
  body main > .hero,
  body main > .page-header,
  body main > .masthead,
  body main > .header-bg,
  body main > .hero-section,
  body main > .hero-banner,
  body main > .header-hero,
  body main > .page-hero{
    background:#e7f7ff !important;
    background-image:linear-gradient(145deg,#f8fdff 0%,#e4f6ff 55%,#bfe8fb 100%) !important;
  }
  body main > .hero .copy,
  body main > .page-header .copy,
  body main > .page-hero .copy{
    background:transparent !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}