/* Werkzeugkiste (/werkzeugkiste/) und Seitenkopf der drei Rechnerseiten (Körperklasse .werkzeug-seite).
   Brotkrumen, Seitentitel, Textlink und Fußnote stehen hier nur für diese Seiten, bis es dafür einen gemeinsamen Baustein gibt. */

/* Seitenkopf */
.werkzeug-seite .hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-l); width: 100%; max-width: var(--width-800); }
.werkzeug-seite .brotkrumen {
  position: static; flex-flow: row wrap; align-items: center; gap: var(--space-xs); margin: 0;
  font-size: 1.2rem; line-height: inherit; color: var(--color-primary);
}
.werkzeug-seite .brotkrumen a { color: inherit; text-decoration: none; }
.werkzeug-seite .brotkrumen a:is(:hover, :focus-visible) { color: inherit; text-decoration: underline 1px; text-underline-offset: 3px; }
.werkzeug-seite .brotkrumen__trenner { color: color-mix(in srgb, var(--color-primary) 40%, transparent); }
.werkzeug-seite .brotkrumen__hier { color: var(--color-muted); }
.werkzeug-seite .prof-h1 { line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }

/* Textlink und Fußnote */
.werkzeug-seite .textlink a:not(.btn-prim, .btn-sec) {
  color: inherit; text-decoration: underline 1px color-mix(in srgb, currentcolor 40%, transparent 60%); text-underline-offset: 3px;
  transition: color var(--transition-fast) ease-out, text-decoration-color var(--transition-fast) ease-out;
}
.werkzeug-seite .textlink a:not(.btn-prim, .btn-sec):is(:hover, :focus-visible) { color: var(--color-primary); text-decoration-color: currentcolor; }
.werkzeug-seite .fussnote { border-top: 1px solid var(--color-own-circle-border); text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .werkzeug-seite .textlink a { transition: none; } }

/* Vier Textkarten im Zweierraster */
.wz-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); align-items: stretch; }
@media (max-width: 560px) { .wz-raster { grid-template-columns: minmax(0, 1fr); } }
.werkzeug-seite .wz-textkarte { min-width: 0; gap: 1.2rem; padding: 2.2rem 2.4rem; color: inherit; text-decoration: none; }
.werkzeug-seite .wz-textkarte:hover { translate: none; }
.wz-textkarte__kopf { flex-direction: row; align-items: center; gap: 1rem; min-width: 0; }
.wz-textkarte__kopf h3 { flex: 1 1 0; min-width: 0; font-size: 2.2rem; line-height: 1.25; letter-spacing: -0.01em; hyphens: manual; }
.wz-textkarte__kopf > svg { flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; color: var(--color-primary); }
.wz-textkarte__was { font-size: 1.6rem; font-weight: 500; line-height: 1.45; color: var(--color-text); text-wrap: pretty; }
.wz-zeilen { gap: 0.8rem; padding-top: 1.2rem; border-top: 1px solid var(--color-own-circle-border); }
.wz-zeile { display: grid; grid-template-columns: 6.8rem minmax(0, 1fr); column-gap: 1.2rem; align-items: baseline; font-size: 1.4rem; line-height: 1.5; color: var(--color-text-soft); }
.werkzeug-seite .wz-zeile sub { font-size: 1.2rem; }
.wz-zeile__name { font-size: 1.3rem; font-weight: 600; color: var(--color-text); }
.wz-textkarte__mehr { margin-top: auto; padding-top: 0.4rem; font-size: 1.5rem; font-weight: 700; color: var(--color-primary); }
.werkzeug-seite .wz-textkarte--cta { background-color: color-mix(in srgb, var(--color-primary) 7%, var(--color-card)); border-color: color-mix(in srgb, var(--color-primary) 20%, transparent); }
@media (min-width: 561px) and (max-width: 860px) {
  .werkzeug-seite .wz-textkarte { padding: 1.8rem 1.6rem; }
  .wz-textkarte__kopf h3 { font-size: 1.9rem; }
  .wz-zeile { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) { .wz-zeile { grid-template-columns: minmax(0, 1fr); } }

/* Tiefgestellte Zeichen wie die Bricks-Grundregel (ohne Einfluss auf die Zeilenhöhe) */
.werkzeug-seite :is(sub, sup) { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
.werkzeug-seite sub { bottom: -0.25em; }


/* Gemeinsame native Hülle der drei Rechner; Inhalte und Maße aus dem eingefrorenen Export. */
.rechner-seite .rechner-rahmen { row-gap: var(--space-l); }
.rechner-seite .rechner-lesebereich { row-gap: var(--space-xl); }
.rechner-seite .rechner-erklaertext { width: 100%; }
.rechner-seite .rechner-cta { flex-flow: row wrap; align-items: center; justify-content: space-between; gap: var(--space-l); width: 100%; padding: var(--space-2xl); background-color: var(--color-deep); border-radius: var(--radius-la); }
.rechner-seite .rechner-cta__text { display: flex; flex-direction: column; gap: var(--space-xs); max-width: var(--width-58ch); }
.rechner-seite .rechner-cta__eyebrow { color: var(--prim-on-dark); }
.rechner-seite .rechner-cta__preis { font-size: max(1.3rem, var(--text-m)); }
.rechner-seite .rechner-cta .hero-actions { width: auto; }
.rechner-seite .rechner-leseraster { display: grid; align-items: initial; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-l); width: 100%; }
.rechner-seite .nowrap { white-space: nowrap; }

/* ============================================================
   Rechner – Grundschicht für baugutachter-witschel.de
   Umgezogen von energiefabrik-dresden.de am 26.09.2026.
   Die Rechner-Skripte tragen die EFD-Namen (.ef-…, --ef-…) weiter,
   damit sie mit dem Original vergleichbar bleiben. Hier zeigen diese
   Namen auf die BGW-Farben; Hell/Dunkel dreht der Farb-Manager.
   Steht in jedem Rechner im CSS-Bereich des Code-Elements, nicht im
   Theme-Stil: keine Wirkung auf andere Seiten.
   Keine Backslashes: der Speicherweg entfernt sie.
   ============================================================ */

.ef-werkzeug,
.ef-calc-explain {
  --ef-text: var(--color-text);
  --ef-text-muted: var(--color-text-soft);
  --ef-text-dim: var(--color-muted);
  --ef-accent: var(--color-primary);
  --ef-border: var(--color-own-circle-border);
  --ef-border-soft: var(--hairline-border);
  --ef-border-strong: var(--color-field-border);
  --ef-bg: var(--color-card);
  --ef-bg-deep: var(--color-background);
  --ef-surface: var(--color-card);
  --ef-font-body: inherit;
  --ef-fs-xs: 1.25rem;
  --ef-fs-s: 1.4rem;
  --ef-fs-m: 1.5rem;
  --ef-fs-l: 1.7rem;
  --ef-fs-xl: 2rem;
  --ef-fs-2xl: var(--text-xl);
  /* BGW-Blau für Hinweise; neutrale Zwischenstufe und Rot für kritische Werte.
     Interne EFD-Schlüssel bleiben für identische Rechenzustände erhalten. */
  --ef-gelb: var(--color-primary);
  --ef-status-warning: var(--color-text-soft);
  --ef-status-danger: var(--color-error);
  /* Skalenbalken: reine Fläche ohne Text, darf kräftiger sein */
  --ef-balken-start: color-mix(in srgb, var(--color-primary) 30%, var(--color-card));
  --ef-balken-gelb: var(--color-primary);
  --ef-balken-orange: var(--color-text-soft);
  --ef-balken-rot: var(--color-error);
}

:root[data-theme="dark"] :is(.ef-werkzeug, .ef-calc-explain) {
  --ef-gelb: var(--color-primary);
  --ef-status-warning: var(--color-text-soft);
  --ef-balken-start: color-mix(in srgb, var(--color-primary) 20%, var(--color-text));
  --ef-balken-orange: var(--color-text-soft);
  --ef-balken-rot: color-mix(in srgb, var(--color-error) 80%, var(--color-card));
}

/* ---------- Karte ---------- */
.ef-werkzeug {
  position: relative;
  color: var(--color-text-soft);
  font-size: var(--ef-fs-m);
  line-height: 1.6;
  background-color: var(--color-card);
  border-radius: var(--radius-la);
  box-shadow: var(--shadow-kontakt), inset 0 0 0 1px var(--hairline-border);
}

.ef-werkzeug :where(p, dl, dd, fieldset, legend, h2, h3) {
  margin: 0;
}

.ef-werkzeug :where(p) {
  font-size: var(--ef-fs-m);
  line-height: 1.6;
  color: var(--ef-text-dim);
}

.ef-werkzeug sub {
  font-size: .7em;
  line-height: 0;
}

/* ---------- Eingaben ---------- */
.ef-werkzeug .rechner-feld {
  display: grid;
  gap: .8rem;
  min-width: 0;
}

.ef-werkzeug .ef-werkzeug__beschriftung {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
}

/* Feldoptik wie die Formulare auf /kontakt/ */
.ef-werkzeug .ef-werkzeug__eingabe {
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  background-color: var(--color-card);
  border-radius: var(--radius-me);
  box-shadow: inset 0 0 0 1px var(--color-field-border);
  transition: box-shadow var(--transition-fast) var(--ease-out-quart);
}

.ef-werkzeug .ef-werkzeug__eingabe:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 55%, var(--color-field-border));
}

.ef-werkzeug .ef-werkzeug__eingabe:focus-within {
  box-shadow: inset 0 0 0 1px var(--color-primary),
              0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.ef-werkzeug .ef-werkzeug__eingabe input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 4.8rem;
  margin: 0;
  padding: 12px 16px;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.ef-werkzeug .ef-werkzeug__eingabe > span {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 4.8rem;
  padding: 0 1.4rem;
  white-space: nowrap;
  font-size: 1.4rem;
  color: var(--color-muted);
  border-left: 1px solid var(--color-own-circle-border);
}

.ef-werkzeug .ef-werkzeug__eingabe input:disabled {
  cursor: not-allowed;
}

.ef-werkzeug .ef-werkzeug__hinweis {
  margin-top: .2rem;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.ef-werkzeug select option {
  background-color: var(--color-card);
  color: var(--color-text);
}

/* ---------- Ergebnis ---------- */
.ef-werkzeug .ef-ergebnis {
  min-width: 0;
}

.ef-werkzeug .ef-ergebnis__zahl {
  margin: 0;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Kleine Überzeile im Ergebnis – Typografie wie .eyebrow-text */
.ef-werkzeug :is(.ef-paket__beschriftung, .ef-aw-result-label) {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* a_w und f_Rsi sind Formelzeichen: nicht in Großbuchstaben setzen */
.ef-werkzeug .ef-aw-result-label {
  letter-spacing: .06em;
  text-transform: none;
}

.ef-werkzeug .ef-werkzeug__werte {
  display: grid;
  margin: 0;
}

.ef-werkzeug .ef-werkzeug__werte > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.6rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hairline-border);
}

.ef-werkzeug .ef-werkzeug__werte dt {
  font-size: 1.4rem;
  line-height: 1.45;
  color: var(--color-text-soft);
}

.ef-werkzeug .ef-werkzeug__werte dd {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-text);
}

.ef-werkzeug .ef-aktionsband__hinweis {
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--color-muted);
}

/* ---------- Erklärung unter dem Rechner ---------- */
.ef-calc-explain {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l);
  width: 100%;
}

.ef-calc-explain.ef-calc-explain--eins {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--width-800);
}

.ef-calc-explain article {
  min-width: 0;
  padding: clamp(2rem, 3vw, 3.6rem);
  background-color: var(--color-card);
  border-radius: var(--radius-la);
  box-shadow: var(--hairline-shadow), inset 0 0 0 1px var(--hairline-border);
}

.ef-calc-explain .ef-aw-eyebrow {
  margin: 0 0 1.2rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.ef-calc-explain h2 {
  margin: 0 0 .8rem;
  font-size: var(--text-xl);
  line-height: 1.25;
  text-wrap: balance;
}

.ef-calc-explain p {
  margin: 0 0 1.2rem;
  font-size: 1.5rem;
  line-height: 1.65;
  color: var(--color-text-soft);
  text-wrap: pretty;
}

.ef-calc-explain .ef-aw-intro {
  margin-bottom: 1.6rem;
  color: var(--color-text);
}

.ef-calc-explain .ef-aw-key {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1.2rem;
  margin: 0 0 1.6rem;
  padding: 1.4rem 0;
  border-block: 1px solid var(--hairline-border);
}

.ef-calc-explain .ef-aw-key strong {
  font-size: clamp(3.2rem, 3.6vw, 4.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--color-primary);
}

.ef-calc-explain .ef-aw-key span {
  font-size: 1.4rem;
  color: var(--color-text-soft);
}

.ef-calc-explain .ef-aw-source {
  margin: 1.6rem 0 0;
  font-size: 1.3rem;
  color: var(--color-muted);
}

.ef-calc-explain sub {
  font-size: .7em;
  line-height: 0;
}

/* Anleitungen als nummerierte Schritte */
.ef-calc-explain ol {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

.ef-calc-explain ol li {
  position: relative;
  padding-left: 3.6rem;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--color-text-soft);
  counter-increment: schritt;
}

.ef-calc-explain ol li::before {
  content: counter(schritt);
  position: absolute;
  top: .1rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.ef-calc-explain article[id] {
  scroll-margin-top: calc(var(--hdr-block, 7rem) + 2rem);
}

@media (max-width: 767px) {
  .ef-calc-explain {
    grid-template-columns: minmax(0, 1fr);
  }
}


.efd-pdf-export details{margin-top:var(--space-m,2rem);border-top:1px solid var(--ef-linie,#d5d8cc);padding-top:var(--space-s,1rem);}.efd-pdf-export .rechner-feld{margin-top:var(--space-s,1rem);}.efd-pdf-export button{margin:1rem 0;}.efd-pdf-export .efd-pdf-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}.efd-pdf-export input{max-width:100%;min-width:0;}.efd-pdf-export summary{display:flex;justify-content:space-between;gap:1rem;cursor:pointer;}.efd-pdf-export [disabled]{opacity:.65;cursor:wait;}

.rechner-seite :is(#ef-schimmelrechner-huelle, #ef-luftfeuchterechner-huelle, #ef-fugenrechner-huelle) { width: 100%; }
.rechner-seite #rechner label { display: block; margin-bottom: 5px; }
.rechner-seite #rechner :is(.ef-aw-option, .ef-ff-option) { display: grid; }
.rechner-seite .rechner-cta__text > .eyebrow-text { margin-bottom: 1.2em; }
.rechner-seite .rechner-cta__text > p:not(.eyebrow-text):not(:last-child) { margin-bottom: 1.2em; }
.rechner-seite .wissen-karte h3 { font-size: var(--text-xl); }
.rechner-seite .wissen-karte__mehr { margin-top: auto; color: var(--color-primary); font-weight: 600; }

.rechner-seite #leistung { padding-top: 0; }