/* =========================================================
   ZEE Cookie-Consent — Banner + Opt-in-Platzhalter
   Passt sich der Petrol/Mint-Farbwelt der Website an
   (nutzt die --blue-* / --green-* Variablen aus styles.css,
    mit sicheren Fallbacks, falls styles.css nicht geladen ist).
   ========================================================= */

.zee-cc{
  position:fixed;
  left:auto; right:16px; bottom:16px;
  z-index:9999;
  max-width:360px;
  margin:0;
  background:var(--surface,#ffffff);
  color:var(--ink,#0b2a33);
  border:1px solid var(--line-strong,#c4dcd8);
  border-radius:14px;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(11,42,51,.05),0 6px 18px rgba(11,42,51,.08));
  padding:14px 16px;
  font-family:var(--font-body,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);
  font-size:13px;
  line-height:1.45;
  transform:translateY(140%);
  opacity:0;
  transition:transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
}
.zee-cc.is-open{ transform:translateY(0); opacity:1; }

.zee-cc h3{
  margin:0 0 4px;
  font-family:var(--font-display,'Space Grotesk',sans-serif);
  font-size:14px;
  color:var(--blue-700,#093f49);
}
.zee-cc p{ margin:0 0 10px; color:var(--muted,#52666c); }
.zee-cc a{ color:var(--blue-600,#0c5260); text-decoration:underline; }

.zee-cc__row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.zee-cc__btn{
  flex:1 1 auto;
  min-width:104px;
  /* 12.08.2026: Ohne min-height ergaben padding 9px + Textzeile genau 39px -
     einen Pixel unter dem Richtwert von Apple und Google (44px). Bei 122-160px
     Breite trifft zwar jeder Finger, aber das ist die erste Zeile, die ein
     Besucher ueberhaupt bedient - da wird nicht am Pixel gespart.
     Die Querformat-Regel in styles.css (40px) bleibt bewusst kleiner: dort ist
     die Bildhoehe knapp. */
  min-height:44px;
  border:0;
  border-radius:999px;
  padding:9px 14px;
  font:inherit;
  font-weight:600;
  cursor:pointer;
  transition:filter .2s ease, background .2s ease;
}
.zee-cc__btn--accept{
  color:#fff;
  background:var(--grad,linear-gradient(125deg,#0c5260 0%,#14807f 52%,#38c2a4 100%));
}
.zee-cc__btn--accept:hover{ filter:brightness(1.06); }
.zee-cc__btn--decline{
  color:var(--blue-700,#093f49);
  background:var(--blue-50,#eef7f5);
  border:1px solid var(--line-strong,#c4dcd8);
}
.zee-cc__btn--decline:hover{ background:var(--blue-100,#d6efe9); }

/* Kleiner "Cookie-Einstellungen"-Wiederöffner (unten links) */
.zee-cc-reopen{
  position:fixed;
  left:14px; bottom:14px;
  z-index:9998;
  border:1px solid var(--line-strong,#c4dcd8);
  background:var(--surface,#fff);
  color:var(--muted,#52666c);
  border-radius:999px;
  padding:8px 14px;
  font-family:var(--font-body,'Inter',sans-serif);
  font-size:13px;
  cursor:pointer;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(11,42,51,.05),0 4px 14px rgba(11,42,51,.06));
  opacity:.85;
}
.zee-cc-reopen:hover{ opacity:1; }

/* Opt-in-Platzhalter für den Google-Maps-iFrame (vor Zustimmung) */
.zee-optin{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
  height:100%;
  min-height:320px;
  padding:24px;
  border-radius:16px;
  background:var(--blue-50,#eef7f5);
  border:1px dashed var(--line-strong,#c4dcd8);
  color:var(--muted,#52666c);
  font-family:var(--font-body,'Inter',sans-serif);
  font-size:15px;
}
.zee-optin strong{ color:var(--blue-700,#093f49); font-size:16px; }
.zee-optin__btn{
  border:0;
  border-radius:999px;
  padding:11px 22px;
  font:inherit;
  font-weight:600;
  color:#fff;
  cursor:pointer;
  background:var(--grad,linear-gradient(125deg,#0c5260 0%,#14807f 52%,#38c2a4 100%));
}
.zee-optin__btn:hover{ filter:brightness(1.06); }

/* =========================================================
   Mobil: über der orangen CTA-Leiste (.calc-mobile) bleiben
   ---------------------------------------------------------
   Die Leiste "Wärmepumpe planen" sitzt ab <=900px fix am unteren
   Rand (position:fixed; bottom:0; ca. 60 px hoch, z-index 90).
   Cookie-Banner und der kleine "Cookie-Einstellungen"-Knopf
   standen vorher darauf und haben den Button verdeckt.
   Lösung: beide um die Leistenhöhe + Safe-Area anheben.
   Am PC (>900px) bleibt alles unverändert an seinem Platz.
   Anlass: Foto Mubarik 30.07.2026 (Knopf über CTA-Leiste).
   ========================================================= */
:root{ --zee-ctabar-h:64px; }

/* ⚠️ KORREKTUR 18.08.2026 (Mubarik: "Handy Version cookis verdecken impresum")
   Vorher wurde der Banner auf JEDER Seite um die Leistenhoehe (64 px) angehoben.
   Die orange Leiste .calc-mobile gibt es aber NUR auf der Startseite. Auf
   Impressum, AGB, Datenschutz und allen Unterseiten rutschte der Banner dadurch
   150 px unten aus dem Bild und verdeckte den Text daneben.
   Gemessen am Impressum (390 px Fenster): oben 757, unten 917 bei 767 px Hoehe.

   Jetzt: Der Abstand haengt davon ab, OB die Leiste da ist. :has() prueft das
   direkt im CSS, ohne Sonderregel je Seite. Browser ohne :has() (sehr alt)
   bekommen den sicheren Standardwert - Banner klebt normal unten. */
@media (max-width:900px){
  /* Standard: normaler Abstand zum unteren Rand */
  .zee-cc,
  .zee-cc-reopen{
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
  }
  /* Nur wenn die orange Leiste wirklich im Dokument steht: anheben */
  body:has(.calc-mobile) .zee-cc,
  body:has(.calc-mobile) .zee-cc-reopen{
    bottom:calc(var(--zee-ctabar-h) + 12px + env(safe-area-inset-bottom,0px));
  }
}

@media (max-width:520px){
  .zee-cc{
    left:10px; right:10px; max-width:none; padding:14px 16px;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
  }
  body:has(.calc-mobile) .zee-cc{
    bottom:calc(var(--zee-ctabar-h) + 10px + env(safe-area-inset-bottom,0px));
  }
  .zee-cc__btn{ min-width:calc(50% - 4px); }
  /* Knopf klein und dezent, damit er neben der Leiste nicht stört */
  .zee-cc-reopen{ left:10px; padding:7px 12px; font-size:12px; }

  /* Sicherheitsnetz: Auf sehr niedrigen Fenstern (Handy quer) darf der Banner
     nie hoeher werden als der Bildschirm - sonst laeuft er oben oder unten raus. */
  .zee-cc{
    max-height:calc(100vh - 24px);
    overflow-y:auto;
  }
}