/* =============================================================================
   HEIMVORSPRUNG · GEMEINSAMES FUNDAMENT (V3)
   Gilt für alle Neben- und Rechtsseiten: danke, partner, impressum,
   datenschutz, agb, agb-partner.

   WARUM EINE DATEI, ABER NICHT ÜBERALL
   Die drei Conversion-Seiten (index-neu.html, angebote-vergleichen.html,
   solar-check-beratung.html) behalten ihr CSS bewusst inline: Sie sind
   Anzeigen-Ziele, und ein zusätzlicher blockierender Request kostet dort
   Renderzeit im ersten Viewport. Nebenseiten profitieren umgekehrt vom
   gemeinsamen Cache und davon, dass eine Änderung überall gleichzeitig wirkt.

   Die Tokens sind identisch zu denen der Conversion-Seiten. Wer hier etwas
   ändert, muss es dort nachziehen — DESIGN-V3.md ist die Referenz.
   ============================================================================= */

/* ---------- Schrift: eine Variable Font, keine externen Requests ---------- */
@font-face{
  font-family:'Schibsted Grotesk';
  src:url('fonts/schibsted-grotesk-var-latin.woff2') format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Schibsted Grotesk';
  src:url('fonts/schibsted-grotesk-var-latin-ext.woff2') format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Farben */
  --ink:#10201E;
  --paper:#FFFFFF;
  --paper-2:#F4F7F6;
  --sand:#FBF5EC;
  --sand-line:#EFE2CE;
  --brand:#0E3B43;
  --brand-mid:#134A54;
  --brand-deep:#092A30;
  --cream:#F0F7F5;
  --cream-70:rgba(240,247,245,.76);
  --cream-line:rgba(240,247,245,.16);
  --signal:#E8871A;
  --signal-hi:#F59B2E;
  --signal-text:#FBBC6E;   /* Text auf dunklem Grund */
  --signal-soft:#FEF6EC;
  --signal-deep:#9A5B08;   /* Text auf hellem Grund */
  --signal-ink:#08252A;
  --line:#D2DEDA;
  --line-soft:#E4ECE9;
  --muted:#4C5F5B;
  --ok:#14724A;
  --ok-bg:#E6F3EC;
  --err:#B3261E;
  --err-bg:#FCEEED;
  --no:#B0453C;

  /* Raum, 4er-Basis */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:88px; --s-10:120px;

  --r:12px; --r-lg:18px; --r-xl:24px;
  --shadow:0 1px 2px rgba(9,42,48,.05),0 12px 32px rgba(9,42,48,.09);
  --shadow-lg:0 2px 4px rgba(9,42,48,.06),0 24px 60px rgba(9,42,48,.16);
  --font:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;

  /* Typo: 16px ist der Fließtext-Boden */
  --t-xs:.8125rem; --t-s:1rem; --t-b:1.125rem; --t-m:1.3125rem;
  --t-l:1.5rem; --t-xl:2rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--font);font-size:var(--t-s);line-height:1.62;
  color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.028em;font-weight:800;text-wrap:balance}
p{margin:0}
a{color:var(--brand)}
img{max-width:100%;height:auto;display:block}

/* Eine Breite für alle Seiten — daraus entsteht die durchgehende Fluchtlinie. */
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
/* Lesespalte: Container bleibt im Raster, nur der Inhalt wird begrenzt. */
.wrap.narrow{max-width:1120px}
.wrap.narrow > *{max-width:760px;margin-right:auto}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Kopf: Topbar + weißer Header (identisch zur Startseite) ---------- */
.topbar{background:var(--brand-deep);color:var(--cream)}
.tb-in{
  max-width:1120px;margin:0 auto;padding:9px 22px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px 30px;font-size:var(--t-xs);font-weight:450;letter-spacing:.004em;
}
.tb-in span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.tb-in svg{width:15px;height:15px;flex:none;color:var(--signal-text)}

.hdr{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.99);backdrop-filter:blur(14px) saturate(1.1);border-bottom:1px solid var(--line-soft);box-shadow:0 1px 0 rgba(9,42,48,.04)}
.hdr-in{max-width:1120px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--brand-deep)}
.logo svg{width:29px;height:29px;flex:none}
.logo b{font-weight:800;font-size:1.15rem;letter-spacing:-.035em}
.logo i{font-style:normal;color:var(--signal)}
.hdr-net{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-s);color:var(--muted);
  background:var(--paper);border:1.5px solid var(--sand-line);
  padding:7px 14px;border-radius:999px;white-space:nowrap;
}
.hdr-net svg{width:16px;height:16px;flex:none;color:var(--ok)}
.hdr-net b{color:var(--ink);font-weight:700}
@media(max-width:720px){
  .tb-in{gap:5px 18px;font-size:.75rem;padding:8px 18px}
  .tb-in span:last-child{display:none}
  .logo b{font-size:1.05rem}
  .hdr-net{font-size:var(--t-xs);padding:6px 11px}
}
@media(max-width:460px){
  .tb-in span:nth-child(2){display:none}
  .hdr-net{display:none}
}

/* ---------- Abschnitte ---------- */
section{padding:var(--s-9) 0}
.sand{background:var(--sand);border-block:1px solid var(--sand-line)}
.dark{background:linear-gradient(172deg,var(--brand-deep),var(--brand));color:var(--cream)}
.dark h1,.dark h2{color:#fff}
.eyebrow{font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--signal-deep);margin-bottom:var(--s-3)}
.dark .eyebrow{color:var(--signal-text)}
h1{font-size:clamp(1.85rem,4.4vw,2.6rem)}
h2{font-size:clamp(1.65rem,3.9vw,2.35rem);margin-bottom:var(--s-4)}
h3{font-size:var(--t-m);letter-spacing:-.02em}
.lead{font-size:var(--t-m);color:var(--muted);max-width:58ch;line-height:1.5}
.dark .lead{color:var(--cream-70)}

/* Helle Schrift auf dunklem Grund: Ausgleich auf drei Achsen */
.dark p,.dark .lead,.dark li,.foot,.foot-note{font-weight:450;letter-spacing:.004em}
.dark p,.dark li{line-height:1.62}

/* ---------- Primäre Aktion ---------- */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:58px;padding:17px 30px;
  background:var(--brand-deep);color:#fff;font-weight:700;font-size:var(--t-b);
  letter-spacing:-.01em;border:0;border-radius:var(--r);cursor:pointer;text-decoration:none;
  box-shadow:0 1px 2px rgba(9,42,48,.18),0 8px 22px rgba(9,42,48,.20);
  transition:background .16s cubic-bezier(.16,1,.3,1),transform .1s,box-shadow .16s;
}
.cta svg{color:var(--signal-hi);transition:transform .16s cubic-bezier(.16,1,.3,1)}
.cta:hover{background:var(--brand)}
.cta:hover svg{transform:translateX(3px)}
.cta:active{transform:translateY(1px)}
.cta:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.dark .cta{background:var(--paper);color:var(--brand-deep);box-shadow:0 2px 4px rgba(0,0,0,.2),0 12px 30px rgba(0,0,0,.25)}
.dark .cta:hover{background:#fff}
.dark .cta svg{color:var(--signal-deep)}

/* ---------- Rechtstexte ---------- */
.legal{padding:var(--s-8) 0 var(--s-9)}
.legal .wrap{max-width:1120px}
.legal h1{margin-bottom:var(--s-5)}
.legal h2{
  font-size:var(--t-m);margin:var(--s-8) 0 var(--s-3);
  padding-top:var(--s-5);border-top:1px solid var(--line-soft);
  max-width:760px;
}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:var(--s-6)}
.legal h3{font-size:var(--t-b);margin:var(--s-5) 0 var(--s-2);max-width:760px}
.legal p,.legal li{font-size:var(--t-s);color:var(--muted);line-height:1.7;max-width:70ch}
.legal p{margin-bottom:var(--s-4)}
.legal ul,.legal ol{margin:0 0 var(--s-4);padding-left:1.3em}
.legal li{margin-bottom:var(--s-2)}
.legal strong,.legal b{color:var(--ink);font-weight:700}
.legal a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--brand-mid)}
.legal table{border-collapse:collapse;margin:0 0 var(--s-5);font-size:var(--t-xs);max-width:760px}
.legal td,.legal th{border:1px solid var(--line-soft);padding:var(--s-3);text-align:left;vertical-align:top}
.legal-stand{
  display:inline-block;font-size:var(--t-xs);color:var(--muted);
  background:var(--paper-2);border:1px solid var(--line-soft);
  padding:6px 12px;border-radius:999px;margin-bottom:var(--s-6);
}

/* Datenschutz-Einstellungen: der Widerruf muss so leicht auffindbar sein wie
   die Einwilligung — deshalb ein eigener Kasten statt einer Textzeile. */
.ds-box{
  max-width:760px;background:var(--paper-2);border:1.5px solid var(--line-soft);
  border-left:4px solid var(--line);border-radius:var(--r);
  padding:var(--s-5);margin:0 0 var(--s-5);
}
.ds-box.ist-ja{border-left-color:var(--brand)}
.ds-box.ist-nein{border-left-color:var(--muted)}
.legal .ds-status{margin-bottom:var(--s-4)}
.ds-btns{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-bottom:var(--s-4)}
.ds-btn{
  padding:11px 18px;border-radius:9px;border:1.5px solid var(--line);
  background:var(--paper);color:var(--ink);
  font:inherit;font-size:var(--t-s);font-weight:600;
  cursor:pointer;min-height:44px;
}
.ds-btn:hover{border-color:var(--brand);color:var(--brand)}
.ds-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ds-btn.ds-ja{background:var(--brand);border-color:var(--brand);color:#fff}
.ds-btn.ds-ja:hover{background:var(--brand-mid);border-color:var(--brand-mid);color:#fff}
.legal .ds-hinweis{font-size:var(--t-xs);margin-bottom:0}

/* ---------- Fuß: Petrol, zentriert ----------
   Dieser Block ist auf allen Seiten identisch. Änderungen hier gehören auch
   in die Inline-Styles von index.html, angebote-vergleichen.html und
   solar-check-beratung.html, die hv-base.css nicht laden. */
.foot{background:var(--brand-deep);color:var(--cream-70);padding:var(--s-7) 0 var(--s-8);font-size:var(--t-s);border-top:1px solid var(--cream-line);text-align:center}
.foot a{color:var(--cream)}
/* Fett gesetzte Marke braucht die Gewichtsanhebung von oben nicht. */
.foot strong{color:#fff;font-weight:700;letter-spacing:normal}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin-top:var(--s-4)}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:#fff;text-decoration:underline}
.foot-links a:focus-visible{outline:2px solid var(--signal-text);outline-offset:3px;border-radius:3px}


/* ---------- Bewegung: rein CSS, ohne JavaScript ---------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    main > section:not(.hero):not(.legal) > .wrap > *{
      animation:hv-rise linear both;
      animation-timeline:view();
      animation-range:entry 2% entry 38%;
    }
    @keyframes hv-rise{
      from{opacity:0;transform:translateY(20px)}
      to{opacity:1;transform:none}
    }
  }
}

/* ---------- Consent-Banner ---------- */
#cbar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -8px 28px rgba(9,42,48,.14);padding:14px 22px calc(14px + env(safe-area-inset-bottom))}
#cbar .cb-in{max-width:1120px;margin:0 auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
#cbar p{font-size:var(--t-xs);color:var(--muted);flex:1;min-width:250px;line-height:1.5}
#cbar button{padding:11px 18px;border-radius:9px;border:1.5px solid var(--line);background:var(--paper);font-weight:600;font-size:var(--t-s);cursor:pointer;min-height:44px}
#cbar button.y{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------- Danke-Seite: Wärme über Bilder, nicht über Adjektive ----------
   Der Abschluss war rein textlich und wirkte dadurch kühl. Das Bildband zeigt
   das Ergebnis (Familie vor fertiger Anlage), der Kontaktblock ein Gesicht
   zum Service — beides Outcome, kein Prozess. */
.dank-bild{
  margin:0;
  aspect-ratio:1800/760;
  overflow:hidden;
}
.dank-bild img{width:100%;height:100%;object-fit:cover;display:block}

.kontakt-block{
  display:grid;gap:var(--s-6);
  align-items:center;
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:var(--s-6);
  margin-top:var(--s-7);
  box-shadow:0 1px 2px rgba(9,42,48,.04),0 14px 40px rgba(9,42,48,.06);
}
.kontakt-bild{
  border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/3;background:var(--paper-2);
}
.kontakt-bild img{width:100%;height:100%;object-fit:cover;object-position:60% 30%;display:block}
.kontakt-text h3{margin:6px 0 10px;font-size:var(--t-l)}
.kontakt-text p{margin:0 0 10px;color:var(--muted)}
.kontakt-wege{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin-top:var(--s-4)!important;
}
.kontakt-mail{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;color:var(--brand-deep);text-decoration:none;
  border:1.5px solid var(--line);border-radius:var(--r);
  padding:12px 18px;min-height:48px;
  transition:border-color .15s,background .15s;
}
.kontakt-mail:hover{border-color:var(--brand);background:var(--paper-2)}
.kontakt-mail svg{flex:none;color:var(--brand)}
.kontakt-zeit{font-size:var(--t-s);color:var(--muted)}

@media(min-width:820px){
  .kontakt-block{grid-template-columns:280px 1fr;gap:var(--s-7);padding:var(--s-7)}
  .kontakt-bild{aspect-ratio:3/4}
}

.check-grid{display:grid;gap:var(--s-6)}
.check-bild{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;align-self:start}
.check-bild img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.check-bild figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:38px 18px 16px;
  font-size:var(--t-s);color:#fff;line-height:1.4;
  background:linear-gradient(180deg,transparent,rgba(6,26,30,.88));
}
@media(min-width:900px){
  .check-grid{grid-template-columns:minmax(0,1fr) 360px;gap:var(--s-8);align-items:start}
  .check-bild img{aspect-ratio:3/4}
}