/* ============================================================
   TOOLS – Styles (bauen ausschließlich auf den Variablen und
   Bausteinen der Hauptseite auf; main.css wird zusätzlich geladen)
   ============================================================ */

/* ---- Landing: Rechner-Kacheln ---- */
.tools-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.6rem;
  margin-top:1rem;
}
.tool-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:1rem;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:8px;
  padding:2rem 1.9rem;
  cursor:pointer;
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.tool-card:hover,
.tool-card:focus-visible{
  transform:translateY(-4px);
  border-color:var(--orange);
  background:var(--bg-raise);
  outline:none;
}
.tool-card.is-premium{ border-color:rgba(255,106,26,.5); background:var(--bg-raise); }
.tool-card-badge{
  position:absolute;
  top:1.2rem; right:1.2rem;
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bg);
  background:var(--orange);
  padding:.3rem .6rem;
  border-radius:2px;
}
.tool-card-icon{
  width:44px; height:44px;
  color:var(--orange);
  flex:0 0 auto;
}
.tool-card-icon svg{ width:100%; height:100%; }
.tool-card-name{
  font-family:var(--serif);
  font-size:1.28rem;
  color:var(--cream);
  line-height:1.25;
}
.tool-card-tagline{
  color:var(--cream-dim);
  font-size:.9rem;
  line-height:1.65;
  flex:1;
}
.tool-card-link{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
}

/* ---- Rechner-Seite: Layout ---- */
.calc-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.4rem;
  align-items:start;
}
.calc-intro{
  color:var(--cream-dim);
  max-width:70ch;
  margin:1.2rem auto 0;
}
.calc-panel{
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:8px;
  padding:2rem 1.9rem;
}
.calc-panel h3{
  font-size:1.15rem;
  margin-bottom:1.4rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--line);
}

/* ---- Eingabefelder ---- */
.calc-field{ margin-bottom:1.25rem; }
.calc-field:last-child{ margin-bottom:0; }
.calc-field-label{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-family:var(--sans);
  font-size:.8rem;
  letter-spacing:.02em;
  color:var(--cream);
  margin-bottom:.5rem;
}
.calc-req{ color:var(--orange); }
.calc-input-row{ position:relative; display:flex; align-items:center; }
.calc-input{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:3px;
  color:var(--cream);
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:300;
  padding:.8rem 2.4rem .8rem 1rem;
  transition:border-color .25s ease;
  -moz-appearance:textfield;
}
.calc-input::-webkit-outer-spin-button,
.calc-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.calc-input:focus{ outline:none; border-color:var(--orange); }
.calc-input.is-invalid{ border-color:#e2483d; }
select.calc-input{ padding-right:1rem; cursor:pointer; }
.calc-unit{
  position:absolute;
  right:1rem;
  color:var(--grey);
  font-size:.85rem;
  pointer-events:none;
}
.calc-slider{
  width:100%;
  margin-top:.7rem;
  accent-color:var(--orange);
  cursor:pointer;
}
.calc-error{
  color:#e2765f;
  font-size:.72rem;
  margin-top:.35rem;
  min-height:.9rem;
}

/* ---- Info-Symbol + Popover ---- */
.calc-info{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:15px; height:15px;
  border:1px solid var(--grey);
  border-radius:50%;
  color:var(--grey);
  font-size:.62rem;
  font-style:italic;
  font-family:var(--serif);
  cursor:pointer;
  flex:0 0 auto;
  transition:color .2s ease, border-color .2s ease;
}
.calc-info:hover{ color:var(--orange); border-color:var(--orange); }
.info-popover{
  position:fixed;
  z-index:300;
  width:min(300px,86vw);
  background:var(--bg-raise);
  border:1px solid var(--line);
  border-radius:6px;
  padding:1rem 1.1rem;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.info-popover.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.info-popover-title{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:.5rem;
}
.info-popover-text{ color:var(--cream-dim); font-size:.85rem; line-height:1.65; }

/* ---- Ergebnisse ---- */
.calc-result-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-bottom:1.6rem;
}
.calc-result{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:4px;
  padding:1.1rem 1.2rem;
}
.calc-result.is-hero{ grid-column:1 / -1; border-color:rgba(255,106,26,.5); background:var(--bg-raise); }
.calc-result-label{
  display:flex; align-items:center; gap:.4rem;
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:.5rem;
}
.calc-result-value{
  font-family:var(--serif);
  font-size:1.7rem;
  color:var(--cream);
  line-height:1;
}
.is-hero .calc-result-value{ font-size:2.3rem; color:var(--orange); }
.calc-result-value.pos{ color:#5fbf83; }
.calc-result-value.neg{ color:#e2765f; }
.calc-result-sub{ font-size:.75rem; color:var(--grey); margin-top:.4rem; }

/* ---- Ampel ---- */
.calc-ampel{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--sans); font-size:.85rem;
  padding:.5rem .9rem; border-radius:2px; margin-bottom:1.4rem;
}
.calc-ampel-dot{ width:11px; height:11px; border-radius:50%; }
.calc-ampel.gruen{ background:rgba(95,191,131,.12); color:#8fd6a8; }
.calc-ampel.gruen .calc-ampel-dot{ background:#5fbf83; }
.calc-ampel.gelb{ background:rgba(230,180,60,.12); color:#e6c46a; }
.calc-ampel.gelb .calc-ampel-dot{ background:#e6b43c; }
.calc-ampel.rot{ background:rgba(226,72,61,.12); color:#e2765f; }
.calc-ampel.rot .calc-ampel-dot{ background:#e2483d; }

/* ---- Diagramme ---- */
.calc-chart{ margin:1.6rem 0; }
.calc-chart-title{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:1rem;
}
.calc-chart svg{ width:100%; height:auto; overflow:visible; }
.chart-legend{ display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; margin-top:1rem; }
.chart-legend-item{ display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--cream-dim); }
.chart-legend-swatch{ width:11px; height:11px; border-radius:2px; flex:0 0 auto; }

/* ---- Analyse ---- */
.calc-analysis{ margin-top:2rem; }
.calc-analysis-block{ margin-bottom:1.4rem; }
.calc-analysis-block:last-child{ margin-bottom:0; }
.calc-analysis-head{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--serif); font-size:1.05rem; color:var(--cream);
  margin-bottom:.6rem;
}
.calc-analysis-head .tag{ font-size:1rem; }
.calc-analysis-block p{ color:var(--cream-dim); font-size:.9rem; line-height:1.7; }
.calc-analysis-list{ list-style:none; }
.calc-analysis-list li{
  color:var(--cream-dim); font-size:.9rem; line-height:1.6;
  padding-left:1.3rem; position:relative; margin-bottom:.5rem;
}
.calc-analysis-list li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%; background:var(--orange);
}
.calc-recommendation{
  background:var(--bg-raise);
  border-left:2px solid var(--orange);
  border-radius:0 4px 4px 0;
  padding:1.1rem 1.3rem;
  color:var(--cream);
  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;
  line-height:1.6;
}

/* ---- „Wie wurde das berechnet?“ ---- */
.calc-explain{ margin-top:1.6rem; border-top:1px solid var(--line); }
.calc-explain-item{ border-bottom:1px solid var(--line); }
.calc-explain-toggle{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  color:var(--cream); font-family:var(--sans); font-size:.85rem;
  padding:1rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.calc-explain-toggle:hover{ color:var(--orange); }
.calc-explain-toggle .chev{ color:var(--orange); transition:transform .3s ease; flex:0 0 auto; }
.calc-explain-item.is-open .chev{ transform:rotate(90deg); }
.calc-explain-body{ display:none; padding:0 0 1.2rem; }
.calc-explain-item.is-open .calc-explain-body{ display:block; }
.calc-explain-body p{ color:var(--cream-dim); font-size:.85rem; line-height:1.7; margin-bottom:.7rem; }
.calc-formula{
  font-family:ui-monospace, 'SF Mono', Menlo, monospace;
  font-size:.82rem;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:4px;
  padding:.8rem 1rem;
  color:var(--cream);
  margin-bottom:.8rem;
  overflow-x:auto;
}

/* ---- Lead-Formular ---- */
.calc-lead{
  margin-top:2.6rem;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:8px;
  padding:2.2rem 2rem;
}
.calc-lead h3{ font-size:1.3rem; margin-bottom:.6rem; }
.calc-lead-sub{ color:var(--cream-dim); font-size:.9rem; margin-bottom:1.4rem; max-width:60ch; }
.calc-lead-services{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.6rem; }
.calc-lead-chip{
  font-family:var(--sans); font-size:.75rem; letter-spacing:.03em;
  color:var(--cream-dim);
  border:1px solid var(--line); border-radius:2rem;
  padding:.45rem .95rem; cursor:pointer; user-select:none;
  transition:all .2s ease;
}
.calc-lead-chip.is-active{ color:var(--bg); background:var(--orange); border-color:var(--orange); }
.calc-lead-form{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.calc-lead-form .full{ grid-column:1 / -1; }
.calc-lead-form textarea.calc-input{ resize:vertical; min-height:90px; padding-right:1rem; }
.calc-check{ display:flex; align-items:flex-start; gap:.6rem; font-size:.82rem; color:var(--cream-dim); line-height:1.5; cursor:pointer; }
.calc-check input{ margin-top:.15rem; accent-color:var(--orange); flex:0 0 auto; }
.calc-lead-note{ font-size:.72rem; color:var(--grey); margin-top:1rem; line-height:1.6; }
.calc-lead-success{
  display:none;
  background:rgba(95,191,131,.1);
  border:1px solid rgba(95,191,131,.4);
  border-radius:4px; padding:1.1rem 1.3rem; color:#8fd6a8; font-size:.9rem; margin-top:1rem;
}

/* ---- Aktionen (PDF/Print) ---- */
.calc-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.calc-btn-ghost{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--cream); background:transparent; border:1px solid var(--line);
  padding:.85rem 1.5rem; border-radius:2px; cursor:pointer;
  transition:border-color .3s ease, color .3s ease;
}
.calc-btn-ghost:hover{ border-color:var(--orange); color:var(--orange); }

.calc-disclaimer{
  margin-top:1.4rem; font-size:.78rem; font-style:italic; color:var(--grey);
  border-top:1px solid var(--line); padding-top:1rem;
}

/* ---- Responsive ---- */
@media (max-width:900px){
  .tools-grid{ grid-template-columns:1fr 1fr; }
  .calc-wrap{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .tools-grid{ grid-template-columns:1fr; }
  .calc-result-grid{ grid-template-columns:1fr; }
  .calc-lead-form{ grid-template-columns:1fr; }
  .calc-panel{ padding:1.6rem 1.3rem; }
}

/* ---- Druck / PDF-Export ---- */
@media print{
  #site-nav, .calc-lead, .calc-actions, footer, .expose-modal, .info-popover{ display:none !important; }
  body{ background:#fff; color:#111; }
  .calc-panel, .calc-result, .calc-recommendation{ break-inside:avoid; }
  .page-head{ padding-top:1rem; }
}