/* ZEE Auslegungstool — eigenes Stylesheet, baut auf styles.css der Hauptseite auf */

.tool-wrap { max-width: 880px; margin: 0 auto; padding: 0 20px 80px; }

.tool-head { text-align: center; padding: 48px 0 32px; }
.tool-head h1 { font-size: clamp(30px, 4.4vw, 44px); margin-bottom: 14px; }
.tool-head p { color: var(--muted); font-size: 17px; max-width: 620px; margin: 0 auto; }

/* Vertrauens-Leiste (echte Aussagen, keine erfundenen Zahlen) */
.trust {
  list-style: none; display: flex; justify-content: center; gap: 14px;
  margin: 26px auto 0; padding: 0; flex-wrap: wrap;
}
.trust li {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 20px; min-width: 130px; box-shadow: var(--shadow-sm);
}
.trust b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 16px; color: var(--blue-700); line-height: 1.2;
}
.trust span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.trust-note {
  font-size: 13px !important; color: var(--muted); max-width: 640px;
  margin: 20px auto 0 !important; line-height: 1.6;
}

/* Fortschritt */
.steps { display: flex; gap: 8px; margin: 0 0 32px; }
.steps div {
  flex: 1; height: 5px; border-radius: 999px; background: var(--line);
  transition: background .3s;
}
.steps div.done { background: var(--grad, var(--blue)); background-color: var(--blue); }

/* Karten */
.tool-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 30px; box-shadow: var(--shadow-sm); margin-bottom: 22px;
}
.tool-card > h2 {
  font-size: 21px; margin-bottom: 6px; display: flex; align-items: center; gap: 10px;
}
.tool-card > h2 .n {
  width: 28px; height: 28px; border-radius: 50%; background: var(--blue-100);
  color: var(--blue-700); font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tool-card > .sub { color: var(--muted); font-size: 14.5px; margin-bottom: 22px; }

/* Formularfelder */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid.one { grid-template-columns: 1fr; }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }

.f { display: flex; flex-direction: column; gap: 7px; }
.f label { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.f .help { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.f input, .f select {
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: #fff; transition: border-color .2s, box-shadow .2s; width: 100%;
}
.f input:focus, .f select:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(21, 113, 128, .12);
}
.f input.err, .f select.err { border-color: #d64545; }

/* Checkbox-Reihe */
.checks { display: flex; flex-wrap: wrap; gap: 10px; }
.checks label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 9px 16px;
  font-size: 14px; font-weight: 500; transition: all .18s; background: #fff;
}
.checks label:has(input:checked) {
  border-color: var(--blue); background: var(--blue-100); color: var(--blue-700); font-weight: 600;
}
.checks input { accent-color: var(--blue); width: 16px; height: 16px; }

/* Verbrauchszeile */
.verbrauch { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }

/* Hinweise */
.note {
  border-left: 3px solid var(--blue); background: var(--blue-100);
  padding: 13px 16px; border-radius: 0 10px 10px 0; font-size: 14px;
  color: var(--ink); line-height: 1.55; margin-top: 16px;
}
.note.warn { border-left-color: #e0a030; background: #fdf6e7; }

/* Ergebnis */
#ergebnis { display: none; }

.res-hero {
  background: linear-gradient(135deg, var(--blue-700, #0f5a66), var(--blue, #157180));
  color: #fff; border-radius: 18px; padding: 32px; margin-bottom: 22px;
}
.res-hero .lbl { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; opacity: .8; }
.res-hero .big {
  font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1.05;
  margin: 6px 0 4px;
}
.res-hero .modell { font-size: 17px; opacity: .95; font-weight: 500; }
.res-hero .meta { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22);
  font-size: 14px; opacity: .9; line-height: 1.6; }

/* Förder-Box */
.foerder { background: #f2fbf8; border: 1px solid #b9e6da; border-radius: 16px; padding: 26px; margin-bottom: 22px; }
.foerder h3 { font-size: 19px; margin-bottom: 16px; }
.ftab { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ftab td { padding: 9px 0; border-bottom: 1px solid #d6ece5; }
.ftab td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.ftab tr:last-child td { border-bottom: none; }
.ftab tr.sum td {
  border-top: 2px solid var(--green-600, #2aa78c); padding-top: 13px;
  font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--ink);
}
.ftab .hint { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; margin-top: 2px; }

/* LV-Liste */
.lv-list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.lv-item { display: flex; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.lv-item:last-child { border-bottom: none; }
.lv-item .p { color: var(--muted); font-weight: 600; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.lv-item .t { flex: 1; font-weight: 500; }
.lv-item .m { color: var(--muted); flex-shrink: 0; white-space: nowrap; }

/* Optionalpositionen: sichtbar abgesetzt vom Hauptteil */
.lv-item.lv-sub {
  background: #f2f8f9; border-top: 2px solid var(--blue);
  font-size: 13.5px; color: var(--blue-700);
}
.lv-item.lv-opt { background: #fbfcfd; }
.lv-item.lv-opt .t { font-weight: 500; color: var(--muted); }
.lv-item.lv-opt .p { color: var(--blue); }

/* Rabatt-Banner */
.rabatt {
  background: linear-gradient(135deg, #2aa78c, #38c2a4); color: #fff;
  border-radius: 16px; padding: 22px 26px; margin-bottom: 22px;
  display: flex; align-items: center; gap: 18px;
}
.rabatt .pct {
  font-family: var(--font-display); font-weight: 800; font-size: 34px;
  line-height: 1; flex-shrink: 0;
}
.rabatt p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.rabatt strong { font-weight: 700; }

/* Lead-Gate */
.gate { background: var(--surface); border: 2px solid var(--blue); border-radius: 18px; padding: 30px; }
.gate h2 { font-size: 21px; margin-bottom: 8px; }
.gate .sub { color: var(--muted); font-size: 14.5px; margin-bottom: 22px; }
.gate .dsgvo { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 16px; }
.gate .dsgvo a { color: var(--blue-700); text-decoration: underline; }
.gate-actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.gate-actions .btn { flex: 1; min-width: 200px; }

.disclaimer {
  margin-top: 26px; font-size: 12.5px; color: var(--muted); line-height: 1.6;
  border-top: 1px solid var(--line); padding-top: 18px;
}

.err-msg { color: #d64545; font-size: 13.5px; margin-top: 10px; display: none; }
.err-msg.show { display: block; }

/* ===== Lesbarkeit & Kontrast (13.07.2026, Mubarik: "dickere Buchstaben, sichtbarer") ===== */

/* Feldbeschriftungen: kräftiger und dunkler */
.f label{font-weight:700;font-size:15.5px;color:var(--ink)}
/* Hilfetexte: größer und kontrastreicher (waren zu blass) */
.f .help{font-size:13.5px;color:#4a5c62;line-height:1.5}
/* Eingabefelder: größere Schrift, kräftigerer Rahmen */
.f input,.f select{
  font-size:16px;font-weight:500;padding:13px 14px;
  border:1.5px solid var(--line-strong);color:var(--ink)
}
.f input:focus,.f select:focus{border-color:var(--blue);border-width:2px}
.f input::placeholder{color:#8fa3a9}

/* Abschnitts-Überschriften kräftiger */
.tool-card > h2{font-size:23px;font-weight:700}
.tool-card > .sub{font-size:15.5px;color:#4a5c62}
.tool-card > h2 .n{font-weight:800;font-size:15px}

/* Checkbox-Chips: lesbarer */
.checks label{font-size:15px;font-weight:600;padding:11px 18px}

/* Ergebnis: Zahlen und Werte deutlicher */
.res-hero .big{font-size:46px;letter-spacing:-.03em}
.res-hero .modell{font-size:18.5px;font-weight:600}
.res-hero .meta{font-size:14.5px}
.res-hero .meta strong{font-weight:700}

/* Förder-Tabelle: größer */
.ftab{font-size:15.5px}
.ftab td{padding:11px 0}
.ftab .hint{font-size:13px;color:#4a5c62}
.ftab tr.sum td{font-size:21px}

/* LV-Liste */
.lv-item{font-size:15.5px}
.lv-item .t{font-weight:600}

/* Hinweise/Notizen: besser lesbar */
.note{font-size:15px;line-height:1.6}

/* Kopfbereich */
.tool-head p{font-size:18px;color:#4a5c62}
.trust b{font-size:17px}
.trust span{font-size:13.5px}
.trust-note{font-size:14px !important;color:#4a5c62}

/* Lead-Gate: der wichtigste Bereich — maximal deutlich */
.gate h2{font-size:23px}
.gate .sub{font-size:15.5px;color:#4a5c62}
.gate-actions .btn{font-size:17px;padding:17px 28px;font-weight:700}

/* ═══════════════════════════════════════════════════════════════════════
   KOPFBEREICH — dunkler Petrol-Block mit Tiefe (13.07.2026)
   Ersetzt die blassen Kästchen auf Weiß.
   ═══════════════════════════════════════════════════════════════════════ */
.tool-hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 100% at 85% 0%, #1a8a8f 0%, transparent 55%),
    linear-gradient(160deg, #0b3f4a 0%, #0f5a66 45%, #157180 100%);
  padding:38px 20px 96px;color:#fff;text-align:center
}
/* Leuchtflecken für Tiefe */
.th-glow{position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none;z-index:-1}
.th-glow-1{width:460px;height:460px;background:rgba(56,194,164,.30);top:-160px;right:-90px;
  animation:thFloat 14s ease-in-out infinite}
.th-glow-2{width:380px;height:380px;background:rgba(21,113,128,.55);bottom:-140px;left:-80px;
  animation:thFloat 18s ease-in-out infinite reverse}
@keyframes thFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-22px)}}
/* Feines technisches Raster — passt zu "Eco Engineering" */
.th-grid{
  position:absolute;inset:0;z-index:-1;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 75%)
}
/* Welle nach unten zum Formular */
.th-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:80px;display:block}

.th-inner{max-width:760px;margin:0 auto;position:relative;padding-top:34px}

.th-back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:30px;
  position:absolute;left:0;top:-4px;
  font-family:var(--font-display);font-size:14px;font-weight:600;
  color:rgba(255,255,255,.72);transition:color .2s,gap .2s
}
.th-back:hover{color:#fff;gap:11px}
.th-back svg{width:16px;height:16px}

.th-eyebrow{
  display:inline-block;margin-bottom:18px;padding:7px 16px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px);
  font-family:var(--font-display);font-size:12.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:#a5ecd9
}
.tool-hero h1{
  color:#fff;font-size:clamp(32px,5.2vw,52px);line-height:1.06;
  letter-spacing:-.035em;margin-bottom:20px
}
.tool-hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,#7ee0c6,#38c2a4);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.th-lead{
  font-size:17.5px;line-height:1.62;color:rgba(255,255,255,.86);
  max-width:600px;margin:0 auto
}

/* Fakten-Reihe */
.th-facts{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin:32px 0 0;padding:0
}
.th-facts li{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);border-radius:16px;padding:18px 14px;
  text-align:center;transition:transform .25s,background .25s,border-color .25s
}
.th-facts li:hover{transform:translateY(-3px);background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.3)}
.th-facts svg{width:24px;height:24px;color:#7ee0c6;flex-shrink:0;margin-bottom:2px}
.th-facts b{
  display:block;font-family:var(--font-display);font-weight:700;font-size:16px;
  color:#fff;line-height:1.2;white-space:nowrap
}
.th-facts span{display:block;font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.35}
/* Rabatt-Karte hervorheben */
.th-facts li.accent{
  background:linear-gradient(135deg,rgba(56,194,164,.28),rgba(126,224,198,.18));
  border-color:rgba(126,224,198,.45)
}
.th-facts li.accent svg{color:#fff}

.th-note{
  font-size:13px;line-height:1.6;color:rgba(255,255,255,.55);
  max-width:600px;margin:26px auto 0
}

/* Der alte Kopfbereich entfällt auf dieser Seite */
.tool-wrap{padding-top:36px}
.tool-head{display:none}

/* ═══════════════════════════════════════════════════════════════════════
   FORMULAR-ABSCHNITTE — abwechselnd Petrol und Mint
   ═══════════════════════════════════════════════════════════════════════ */
.tool-card{position:relative;overflow:hidden;border-radius:20px}
/* Farbstreifen links als Identität des Abschnitts */
.tool-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px
}
.tool-card.c-petrol::before{background:linear-gradient(180deg,#157180,#0f5a66)}
.tool-card.c-mint::before{background:linear-gradient(180deg,#38c2a4,#1aa589)}

/* Nummernkreis in Abschnittsfarbe */
.tool-card.c-petrol > h2 .n{
  background:linear-gradient(135deg,#157180,#0f5a66);color:#fff;
  box-shadow:0 3px 10px rgba(21,113,128,.35)
}
.tool-card.c-mint > h2 .n{
  background:linear-gradient(135deg,#38c2a4,#1aa589);color:#fff;
  box-shadow:0 3px 10px rgba(56,194,164,.38)
}
.tool-card > h2 .n{width:32px;height:32px;font-size:15px;font-weight:800}

/* Sanfter Farbschimmer oben rechts in der Karte */
.tool-card::after{
  content:"";position:absolute;top:-70px;right:-70px;width:190px;height:190px;
  border-radius:50%;filter:blur(52px);pointer-events:none;opacity:.5
}
.tool-card.c-petrol::after{background:rgba(21,113,128,.16)}
.tool-card.c-mint::after{background:rgba(56,194,164,.20)}

/* Fokus-/Aktivfarben je Abschnitt */
.tool-card.c-mint .f input:focus,.tool-card.c-mint .f select:focus{
  border-color:#1aa589;box-shadow:0 0 0 3px rgba(56,194,164,.16)
}
.tool-card.c-mint .checks label:has(input:checked){
  border-color:#1aa589;background:#dbf3ec;color:#0f7a63
}
.tool-card.c-mint .checks input{accent-color:#1aa589}
.tool-card.c-mint .note{border-left-color:#1aa589;background:#dbf3ec}
.tool-card.c-petrol .note{border-left-color:#157180;background:#d6efe9}

@media(max-width:640px){
  .tool-hero{padding:26px 18px 78px}
  .th-facts{grid-template-columns:1fr}
  .th-back{position:static;margin-bottom:22px}
}

/* Kontaktzeile unter dem Angebotsformular (Mubarik 11.08.2026).
   Vorher gab es auf der Rechner-Seite keinen einzigen Kontaktweg - wer nach
   der Berechnung lieber anrufen wollte, fand nichts. Bewusst als ruhige
   Textzeile statt als dritter Knopf, damit sie das Formular nicht verdraengt. */
.gate-tel{
  margin:16px 0 0;
  font-size:15px;
  color:var(--muted,#5b7280);
  text-align:center;
}
.gate-tel a{
  color:var(--brand,#0f766e);
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.gate-tel a:hover{text-decoration:underline}


/* ═══════════════════════════════════════════════════════════════════════════
   AUSWAHL WAERMEPUMPE / PHOTOVOLTAIK
   (12.08.2026 neu geschrieben - das urspruengliche CSS ging beim Rueckfall
   am 09.08. verloren und war nirgends mehr auffindbar.)

   Zwei gleichwertige Bloecke. Bewusst KEIN Farbunterschied zwischen WP und PV
   in der Grundform: Wer hier steht, hat sich noch nicht entschieden - beide
   Wege sollen gleich einladend aussehen. Unterschieden wird nur das Symbol.
   ══════════════════════════════════════════════════════════════════════════ */
.gewerk-wahl { margin-bottom: 26px; }
.gw-titel {
  font-family: var(--font-display); font-size: 23px; line-height: 1.25;
  color: var(--ink); margin: 0 0 6px;
}
.gw-sub { color: var(--muted); font-size: 15px; margin: 0 0 20px; }

.gw-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}

.gw-block {
  /* Es ist ein <button> - Browser-Grundoptik komplett abraeumen, sonst
     erscheint der graue Systemkasten. */
  appearance: none; -webkit-appearance: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;

  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 24px 22px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.gw-block:hover {
  border-color: var(--line-strong, #c4dcd8);
  box-shadow: 0 10px 26px rgba(9, 63, 73, .10);
  transform: translateY(-2px);
}
.gw-block:focus-visible {
  outline: 3px solid var(--blue, #14807f); outline-offset: 3px;
}

/* Symbol in runder Flaeche - OHNE Groessenbegrenzung wuerde das SVG die
   volle Spaltenbreite einnehmen (genau der Fehler im Screenshot). */
.gw-ico {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--blue-100, #e4f2ef);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gw-ico svg { width: 27px; height: 27px; color: var(--blue-700, #093f49); }

.gw-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 19px; line-height: 1.25; color: var(--ink);
}
.gw-text { color: var(--muted); font-size: 15px; line-height: 1.55; }
.gw-los {
  margin-top: auto; padding-top: 6px;
  font-weight: 700; font-size: 15px;
  color: var(--blue-700, #093f49);
  display: inline-flex; align-items: center; gap: 7px;
}
.gw-block:hover .gw-los { color: var(--blue, #14807f); }

/* Zurueck zur Auswahl */
.gw-zurueck {
  appearance: none; -webkit-appearance: none;
  font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; padding: 4px 0;
  margin-bottom: 16px;
  color: var(--muted); font-size: 14.5px; font-weight: 600;
}
.gw-zurueck svg { width: 17px; height: 17px; }
.gw-zurueck:hover { color: var(--blue-700, #093f49); }
/* ⚠️ Ohne diese Zeile bleibt der Knopf trotz hidden-Attribut sichtbar:
   die Klassenregel display:inline-flex schlaegt die Browser-Grundregel
   fuer [hidden]. Gilt genauso fuer die beiden Formulare. */
.gw-zurueck[hidden], .gewerk-wahl[hidden] { display: none !important; }

/* Handy: untereinander, etwas kompakter */
@media (max-width: 720px) {
  .gw-grid { grid-template-columns: 1fr; gap: 14px; }
  .gw-block { padding: 22px 20px 18px; }
  .gw-titel { font-size: 20px; }
  .gw-ico { width: 46px; height: 46px; border-radius: 12px; }
  .gw-ico svg { width: 24px; height: 24px; }
  .gw-name { font-size: 17.5px; }
}