/* theme.css — Design-Overrides (keine Logik/Content-Änderungen) */

:root{
  --muted: rgba(0,0,0,.62);
  --border: rgba(0,0,0,.14);
  --light-gray: #f8f9fa;
  --bg-white: #ffffff;
  --eco-green: #28a745;
  --shadow-sm: 0 8px 22px rgba(0,0,0,.08);
  --shadow-md: 0 14px 42px rgba(0,0,0,.14);
}

/* Header: etwas ruhiger, bessere Fokus-States */
header{ backdrop-filter: saturate(140%) blur(6px); }
.header-content{ padding: 12px 0; gap: 18px; }
.logo a{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
  letter-spacing:.2px;
  color: var(--primary-blue);
  text-decoration:none;
}
.logo a::before{
  content:"";
  width:28px;
  height:28px;
  display:inline-block;
  background: url('/assets/img/logo-mark.png') center/contain no-repeat;
}
nav a{
  border-radius: 10px;
  padding: 8px 10px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
nav a:hover{ background: rgba(0,86,179,.08); }
nav a:focus-visible{
  outline: 3px solid rgba(0,86,179,.35);
  outline-offset: 2px;
}

/* Hero: Background-Image + Overlay (override inline-startseiten-css) */
.hero-box{
  position: relative;
  overflow: hidden;
  background: transparent !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid rgba(255,255,255,.14);
}

.hero-box::before{
  content:"";
  position:absolute;
  inset:0;
  background: url('/assets/img/hero-gaspreisvergleich24.webp') center bottom/cover no-repeat;
  transform: scale(1.03);
  filter: saturate(1.08) contrast(1.06);
}

.hero-box::after{
  content:"";
  position:absolute;
  inset:0;
  /* weniger "zugekleistert" – Bild soll erkennbar bleiben */
  background: linear-gradient(90deg,
    rgba(0,35,80,.56) 0%,
    rgba(0,35,80,.34) 46%,
    rgba(0,0,0,.08) 100%);
}

.hero-box > *{ position: relative; z-index: 1; }

.hero-box h1,
.hero-box h2,
.hero-text h1,
.hero-text h2{
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.hero-box p,
.hero-text p{
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.22);
}

.hero-form{
  /* Glasiger, halbtransparent */
  background: rgba(255,255,255,.62) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(14px) saturate(125%);
}

/* Hub-Seiten: hero-section (z.B. /gasvergleich/, /stromvergleich/) */
.hero-section{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  /* inline background überschreiben (nur Design) */
  background: transparent !important;
}

.hero-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: url('/assets/img/hero-gaspreisvergleich24.webp') center bottom/cover no-repeat;
  transform: scale(1.03);
  filter: saturate(1.02) contrast(1.04);
  z-index: 0;
}

.hero-section::after{
  content:"";
  position:absolute;
  inset:0;
  /* helles Overlay, damit die dunkle Schrift (und farbige H1) sauber bleibt */
  background: linear-gradient(90deg,
    rgba(255,255,255,.86) 0%,
    rgba(255,255,255,.68) 50%,
    rgba(255,255,255,.42) 100%);
  z-index: 0;
}

.hero-section > *{ position: relative; z-index: 1; }

.form-card{
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  backdrop-filter: blur(14px) saturate(125%);
}

/* Form Controls: ein bisschen konsistenter */
input[type="text"], input[type="number"], select{
  border: 1px solid rgba(0,0,0,.14) !important;
  border-radius: 10px !important;
}
input:focus, select:focus{
  outline: none;
  border-color: rgba(0,86,179,.55) !important;
  box-shadow: 0 0 0 4px rgba(0,86,179,.16) !important;
}

button, .button, input[type="submit"]{
  border-radius: 12px;
}


/* Hub-Seiten Layout: nicht am Rand kleben (Text links / Form rechts) */
.hero-section .hero-grid{
  width: min(1200px, 92%);
  margin: 0 auto;
  padding: 0 10px;
}
.hero-section .hero-text{ padding-left: 4px; }
.hero-section .form-card{
  justify-self: end;
  width: min(520px, 100%);
}
@media (max-width: 900px){
  .hero-section .hero-grid{ width: min(1200px, 94%); }
  .hero-section .hero-text{ padding-left: 0; text-align: left; }
  .hero-section .form-card{ justify-self: stretch; width: 100%; }
}