/* =========================================================
   greenius Energiesparrechner – Oberflaeche
   Gleiches Design-System wie "Lipla light": Schrift Jost,
   Primaerfarbe #a1c214, Text #5c5c5c, Radius 0, keine Schatten.
   Markup/IDs/Funktion unveraendert – hier nur Gestaltung.
========================================================= */

/* ---------- Schrift: Jost (lokal, wie auf der greenius Website) ---------- */
@font-face {
  font-family: "Jost";
  src: url("../assets/fonts/jost-medium.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../assets/fonts/jost-bold.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

.esp-page {
  /* Markenfarben – identisch zu Lipla light, damit beide Tools optisch
     ein Paar bilden. */
  --esp-green:       #a1c214;
  --esp-green-dark:  #616e2d;
  --esp-green-soft:  #f2f5e9;
  --esp-green-line:  #e7f0c4;

  --esp-ink:         #1f1f1f;
  --esp-ink-soft:    #5c5c5c;
  --esp-muted:       #5f5f5f;
  --esp-line:        #e5e5e5;
  --esp-line-soft:   #eeeeee;
  --esp-surface:     #ffffff;
  --esp-canvas:      #fcfdf8;
  --esp-danger:      #b1301c;
  --esp-warm:        #c07a24;
  --esp-warm-line:   #e8d6bd;
  --esp-warm-soft:   #fbf5ec;
  --esp-panel:       #fcfdf8;   /* Hintergrund Schritt 1 + 2 */
  --esp-panel-hl:    #f2f6df;   /* Hintergrund Schritt 3 (hervorgehoben) */

  /* Leicht abgerundete Ecken (Eingabefelder, Buttons) statt komplett eckig –
     ueber die Einstellungsseite (Custom CSS) jederzeit ueberschreibbar. */
  --esp-radius:      8px;
  --esp-radius-lg:   16px;   /* Aeussere Ecken des gesamten Rechner-Containers */
  --esp-border-width: 1px;
  --esp-focus-width:  2px;

  --esp-font: "Jost", "Jost Medium", "Century Gothic", "Avenir Next", system-ui, sans-serif;

  --esp-fs-h2:     clamp(20px, 2.4vw, 26px);
  --esp-fs-lvl2:   16px;
  --esp-fs-lvl4:   13px;
  --esp-fs-xs:     12px;
  --esp-fs-md:     14.5px;
  --esp-fs-data:   20px;
  --esp-fs-input:  17px;

  --esp-sp-1: 4px;
  --esp-sp-2: 8px;
  --esp-sp-3: 12px;
  --esp-sp-4: 16px;
  --esp-sp-5: 22px;
  --esp-sp-6: 30px;
}

/* Auf ".esp-page" begrenzt statt auf "body"/"*", damit das Design des
   Rechners nicht in den Rest der Seite ausstrahlt (und umgekehrt). */
.esp-page, .esp-page *, .esp-page *::before, .esp-page *::after { box-sizing: border-box; }
.esp-page {
  margin: 0;
  background: var(--esp-canvas);
  color: var(--esp-ink);
  font: 500 var(--esp-fs-md)/1.55 var(--esp-font);
  -webkit-font-smoothing: antialiased;
}
/* Kein eigenes max-width/margin/padding: das Tool wird als Baustein in
   eine bestehende Seite eingebettet (z. B. WPBakery-Container), der
   Aussenabstand und die Breite kommen von dort. Manche Themes legen aber
   auf blanke Tags wie "form" ein eigenes max-width/margin:auto
   (Zentrierung) – deshalb hier zusaetzlich per !important zurueckgesetzt,
   damit der Rechner garantiert die volle Breite seines Containers
   ausfuellt. ".gcalc__wrap" reicht als Container, der aeussere Wrapper
   (".gcalc", ein <div>) braucht keine eigene Regel. */
.esp-page,
.esp-page .gcalc__wrap,
.esp-page .gcalc__grid,
.esp-page form#calcForm {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
}

/* Container statt Viewport: das Tool kann in einer schmalen Spalte neben
   einer Sidebar stecken, obwohl der Bildschirm insgesamt breit ist. */
.esp-page { container: esp-page / inline-size; }

/* ---------- Kopfzeile ueber dem Rechner (ausserhalb der weissen Flaeche) ---------- */
.esp-page .esp-masthead { margin: 0 0 var(--esp-sp-4); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--esp-sp-5); }
.esp-page .esp-subclaim { margin: 0; font: 500 var(--esp-fs-lvl2)/1.3 var(--esp-font); color: var(--esp-muted); }
.esp-page .esp-claim {
  margin: 0;
  font-size: var(--esp-fs-h2);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--esp-ink-soft);
}

/* ---------- Grundgeruest ---------- */
/* Radius + overflow:hidden auf dem GESAMTEN Tool (#calculator), OHNE die
   Ueberschrift darueber (die steht in .esp-masthead, einer eigenen,
   separaten Box davor – die bleibt unangetastet). Rundet damit alle drei
   Bereiche + Reset-Zeile zusammen an den vier Aussenecken ab, ohne dass an
   den inneren Nahtstellen (zwischen Schritt 1/2 und Schritt 3, ueber der
   Reset-Zeile) haessliche Rundungen entstehen. !important, damit ein
   Theme-Stil fuer #calculator (z. B. eine ID-Regel des Seitenbau-Baukastens)
   das nicht wieder aushebeln kann. */
.esp-page .gcalc,
.esp-page #calculator {
  display: block !important;
  border-radius: var(--esp-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
}
.esp-page .gcalc__wrap { display: block; }
.esp-page .gcalc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 0;
  background: transparent;
}
/* Grid-Spalten duerfen unter ihre Inhaltsbreite schrumpfen (CSS-Grid-
   Standard ist min-width:auto) – sonst sprengen lange Zahlen/Labels in
   einer schmalen Spalte das ganze Layout und es wirkt "nicht responsive". */
.esp-page .gcalc__col { min-width: 0; }
.esp-page .calculator__item, .esp-page .results-simple { min-width: 0; }
.esp-page .gcalc__col { padding: clamp(20px, 2.4vw, 28px); border: 0 !important; }
.esp-page .gcalc__col--a, .esp-page .gcalc__col--b { background: var(--esp-panel); }

/* Schrittueberschriften (1 / 2 / 3) */
.esp-page .gcalc__step {
  display: flex;
  align-items: center;
  gap: var(--esp-sp-3);
  margin: 0 0 var(--esp-sp-5);
  padding: 0;
  font: 700 var(--esp-fs-lvl2)/1.25 var(--esp-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--esp-ink-soft);
}
.esp-page .gcalc__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--esp-ink-soft);
  color: #fff;
  font: 700 15px/1 var(--esp-font);
}

/* Schritt 3 hervorgehoben: getoente Flaeche, keine Trennlinien zwischen
   den Bereichen. */
.esp-page .gcalc__col--c { background: var(--esp-panel-hl); }
.esp-page .gcalc__col--c .gcalc__step { color: var(--esp-ink-soft); }
.esp-page .gcalc__col--c .gcalc__num { background: var(--esp-ink-soft); }

/* Reset: volle Breite unter Schritt 1 und 2 (mobil ganz unten). */
.esp-page .gcalc__resetrow { order: 2; background: var(--esp-panel); padding: 0 clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px); }
.esp-page .gcalc__col--a { order: 0; }
.esp-page .gcalc__col--b { order: 1; }
.esp-page .gcalc__col--c { order: 3; }
.esp-page .gcalc__resetrow .gcalc__btn--reset { width: 100%; }
.esp-page .gcalc__grid { display: grid; }

/* Spalte 1 und 2 auf gleicher Hoehe: Ueberschrift + je 3 Zeilen (Feld+Regler)
   teilen sich dieselben Zeilen-Spuren (CSS Subgrid), damit ein Feld links
   immer auf gleicher Hoehe wie das zugehoerige Feld rechts sitzt – egal wie
   breit das Fenster ist oder ob rechts eine Schnellauswahl dazukommt. */
@media (min-width: 760px) {
  .esp-page .gcalc__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: auto auto auto auto auto;
  }
  .esp-page .gcalc__col--a, .esp-page .gcalc__col--b {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
    grid-row: 1 / span 4;
  }
  .esp-page .gcalc__col--a { grid-column: 1; }
  .esp-page .gcalc__col--b { grid-column: 2; }
  .esp-page .gcalc__resetrow { grid-column: 1 / 3; grid-row: 5; }
  .esp-page .gcalc__col--c {
    grid-column: 3;
    grid-row: 1 / 6;
    /* Spalte 3 als eigene Flex-Spalte: der Button-Block (PDF + E-Mail)
       wird per margin-top:auto nach unten gedrueckt, damit sein unterer
       Rand genau auf Hoehe des Reset-Buttons links/mittig landet – egal
       wie hoch Ueberschrift/Ergebnis/Hinweis in Spalte 3 gerade sind. */
    display: flex;
    flex-direction: column;
  }
  .esp-page .gcalc__col--c .gcalc__buttons { margin-top: auto; }
}
/* Reagiert zusaetzlich auf die eigene Kastenbreite (WPBakery-Spalte etc.),
   nicht nur auf die Fensterbreite. */
@container esp-page (min-width: 760px) {
  .esp-page .gcalc__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: auto auto auto auto auto;
  }
  .esp-page .gcalc__col--a, .esp-page .gcalc__col--b {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
    grid-row: 1 / span 4;
  }
  .esp-page .gcalc__col--a { grid-column: 1; }
  .esp-page .gcalc__col--b { grid-column: 2; }
  .esp-page .gcalc__resetrow { grid-column: 1 / 3; grid-row: 5; }
  .esp-page .gcalc__col--c {
    grid-column: 3;
    grid-row: 1 / 6;
    display: flex;
    flex-direction: column;
  }
  .esp-page .gcalc__col--c .gcalc__buttons { margin-top: auto; }
}
/* Schmal: Subgrid-Ausrichtung wieder aufheben, ganz normal untereinander.
   Als @media UND @container (wie beim breiten Layout oben), damit sich
   beide Bedingungen niemals widersprechen – sonst kann es je nach
   Innenabstand der Seite zu einem schmalen Fenster kommen, in dem eine
   Regel schon/noch die 2-Spalten-Zeilen erwartet und die andere nicht. */
@media (max-width: 759.98px) {
  .esp-page .gcalc__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .esp-page .gcalc__col--a, .esp-page .gcalc__col--b, .esp-page .gcalc__col--c, .esp-page .gcalc__resetrow { grid-column: 1; grid-row: auto; }
  .esp-page .gcalc__col--a, .esp-page .gcalc__col--b { display: block; }
}
@container esp-page (max-width: 759.98px) {
  .esp-page .gcalc__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .esp-page .gcalc__col--a, .esp-page .gcalc__col--b, .esp-page .gcalc__col--c, .esp-page .gcalc__resetrow { grid-column: 1; grid-row: auto; }
  .esp-page .gcalc__col--a, .esp-page .gcalc__col--b { display: block; }
}

/* ---------- Eingabefelder (Zahl + Regler je Parameter) ---------- */
.esp-page .calculator__item { margin: 0 0 var(--esp-sp-5); }
.esp-page .calculator__item:last-child { margin-bottom: 0; }
.esp-page .calculator__item label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-size: var(--esp-fs-lvl4);
  font-weight: 500;
  color: var(--esp-muted);
}
/* Reserviert immer Platz fuer 2 Zeilen Label-Text (auch wenn er nur eine
   Zeile braucht) – sonst rutscht das Eingabefeld in der einen Spalte hoeher
   als in der anderen, sobald genau EIN Label (z. B. "Ø Beleuchtungsdauer
   Stunden/Tag") bei schmalerem Fenster umbricht und das Nachbarlabel nicht. */
.esp-page .esp-label-text {
  display: block;
  line-height: 1.3;
  min-height: calc(1.3em * 2);
}
.esp-page .calculator__item input[type="number"] {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: var(--esp-border-width) solid var(--esp-line);
  border-radius: var(--esp-radius);
  background: var(--esp-surface);
  color: var(--esp-ink);
  font: 700 var(--esp-fs-input)/1 var(--esp-font);
  transition: border-color .14s, outline-color .14s;
}
.esp-page .calculator__item input[type="number"]:focus {
  outline: var(--esp-focus-width) solid var(--esp-green);
  outline-offset: 0;
  border-color: var(--esp-green);
}

/* Regler: flache, eigene Optik statt Browser-Standard. Die Fuellung nutzt
   die von den vorhandenen Script gesetzte CSS-Variable --progress. */
.esp-page .calculator__item input[type="range"] {
  display: block;
  width: 100%;
  margin-top: var(--esp-sp-2);
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: var(--esp-radius);
  background: linear-gradient(
    to right,
    var(--esp-green) 0%,
    var(--esp-green) var(--progress, 0%),
    var(--esp-line) var(--progress, 0%),
    var(--esp-line) 100%
  );
  cursor: pointer;
}
.esp-page .calculator__item input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: transparent; border-radius: var(--esp-radius); }
/* Der Regler-Griff ist bewusst die eine Ausnahme von "keine Ecken": eine
   volle, gruene Flaeche statt eines harten Quadrats liest sich auf einer
   duennen Linie ruhiger und eindeutig als Griff (nicht als Kontrollkaestchen). */
.esp-page .calculator__item input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--esp-green);
  border: none;
  cursor: pointer;
  transition: background .14s, transform .14s;
}
.esp-page .calculator__item input[type="range"]:hover::-webkit-slider-thumb { background: var(--esp-green-dark); transform: scale(1.15); }
.esp-page .calculator__item input[type="range"]:active::-webkit-slider-thumb { background: var(--esp-green-dark); }
.esp-page .calculator__item input[type="range"]:focus { outline: none; }
.esp-page .calculator__item input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: var(--esp-focus-width) solid var(--esp-green-dark);
  outline-offset: 2px;
}
.esp-page .calculator__item input[type="range"]::-moz-range-track { height: 6px; background: var(--esp-line); border-radius: var(--esp-radius); }
.esp-page .calculator__item input[type="range"]::-moz-range-progress { height: 6px; background: var(--esp-green); border-radius: var(--esp-radius); }
.esp-page .calculator__item input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--esp-green);
  border: none;
  cursor: pointer;
  transition: background .14s, transform .14s;
}
.esp-page .calculator__item input[type="range"]:hover::-moz-range-thumb { background: var(--esp-green-dark); transform: scale(1.15); }
.esp-page .calculator__item input[type="range"]:active::-moz-range-thumb { background: var(--esp-green-dark); }
.esp-page .calculator__item input[type="range"]:focus-visible::-moz-range-thumb {
  outline: var(--esp-focus-width) solid var(--esp-green-dark);
  outline-offset: 2px;
}

/* ---------- Schnellauswahl (Dropdown neben dem Zahlenfeld) ----------
   Bewusst sekundaer/zurueckhaltender als das Zahlenfeld: schmaler,
   niedriger, dezente Farben statt eigener weisser Flaeche mit Rahmen. */
.esp-page .esp-field { display: flex; align-items: center; gap: var(--esp-sp-2); width: 100%; }
.esp-page .esp-field input[type="number"] { flex: 1 1 auto; min-width: 0; }
.esp-page .esp-field select.esp-quick {
  flex: 0 0 auto;
  width: 42%;
  min-width: 108px;
  max-width: 168px;
  height: 34px;
  margin: 0;
  padding: 0 22px 0 10px;
  border: var(--esp-border-width) solid transparent !important;
  border-radius: var(--esp-radius);
  background-color: var(--esp-surface) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999999' stroke-width='2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 9px center !important;
  -webkit-appearance: none;
  appearance: none;
  color: var(--esp-muted);
  font: 500 var(--esp-fs-xs)/1.2 var(--esp-font);
  text-overflow: ellipsis;
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color .14s, color .14s;
}
.esp-page .esp-field select.esp-quick:hover { background-color: var(--esp-panel-hl) !important; color: var(--esp-ink-soft); }
.esp-page .esp-field select.esp-quick:focus {
  outline: var(--esp-focus-width) solid var(--esp-green);
  outline-offset: 0;
  border-color: transparent !important;
}

/* ---------- Ergebnis ---------- */
.esp-page .results-simple { display: flex; flex-direction: column; gap: var(--esp-sp-3); }
.esp-page .resline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-sp-3);
  padding: var(--esp-sp-3) 0;
  border-bottom: var(--esp-border-width) solid rgba(97,110,45,.18);
}
.esp-page .resline:last-child { border-bottom: 0; }
.esp-page .resline__title {
  font-size: var(--esp-fs-md);
  font-weight: 500;
  color: var(--esp-ink-soft);
}
.esp-page .resline__value {
  font-size: var(--esp-fs-data);
  font-weight: 700;
  font-family: var(--esp-font);
  white-space: nowrap;
}
/* Gleicher warmer Ton wie der Reset-Button, statt eines eigenstaendigen,
   staerker gesaettigten Rots – ein Guss statt zwei verschiedener Roettoene. */
.esp-page .resline--alt .resline__value { color: var(--esp-warm); }
.esp-page .resline--new .resline__value { color: var(--esp-ink-soft); }
/* Kein eigener border-top hier: die Trennlinie kommt bereits vom
   border-bottom der vorherigen Zeile (.resline) – zwei Linien direkt
   uebereinander sahen wie eine doppelte Trennlinie aus. */
.esp-page .resline--save {
  padding-bottom: var(--esp-sp-4);
}
.esp-page .resline--save .resline__title { color: var(--esp-green); font-weight: 700; }
.esp-page .resline--save .resline__value { color: var(--esp-green); font-size: 32px; }

/* ---------- Aktionen ---------- */
.esp-page .gcalc__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-sp-2);
  margin-top: var(--esp-sp-5);
}
.esp-page .gcalc__buttons button {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: fit-content;
  height: 50px;
  padding: 0 22px;
  border-radius: var(--esp-radius);
  font: 700 var(--esp-fs-md)/1 var(--esp-font);
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
/* Primaeraktion – Angebot per E-Mail. Mit !important UND per ID
   gegen Theme-Buttonstile abgesichert (siehe Lipla light: manche Themes
   ueberschreiben [type=submit]/button-Selektoren inkl. eigenem
   Klick-/Hover-Overlay per ::before/::after). */
.esp-page .gcalc__btn--primary, .esp-page #btnMail {
  border: var(--esp-border-width) solid var(--esp-green) !important;
  background: var(--esp-green) !important;
  color: #fff !important;
}
.esp-page .gcalc__btn--primary:hover, .esp-page #btnMail:hover {
  background: var(--esp-green-dark) !important;
  border-color: var(--esp-green-dark) !important;
}
/* Sekundaeraktion – PDF-Download. */
.esp-page .gcalc__btn--ghost, .esp-page #btnPdf {
  border: var(--esp-border-width) solid #cdcdcd !important;
  background: var(--esp-surface) !important;
  color: var(--esp-ink-soft) !important;
}
.esp-page .gcalc__btn--ghost:hover, .esp-page #btnPdf:hover {
  border-color: var(--esp-ink-soft) !important;
  color: var(--esp-ink) !important;
}
/* Reset – wie bei Lipla light ein kleiner, warmer Akzent statt eines
   Fehler-/Warnzustands; bewusst schmaler als die beiden Hauptaktionen. */
.esp-page .gcalc__btn--reset, .esp-page #btnReset {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 18px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--esp-radius);
  font: 700 var(--esp-fs-md)/1 var(--esp-font);
  cursor: pointer;
  border: var(--esp-border-width) solid var(--esp-warm-line) !important;
  background: var(--esp-surface) !important;
  color: var(--esp-warm) !important;
  font-weight: 500;
}
.esp-page .gcalc__btn--reset:hover, .esp-page #btnReset:hover {
  background: var(--esp-warm-soft) !important;
  border-color: var(--esp-warm) !important;
}
.esp-page .gcalc__buttons button::before, .esp-page .gcalc__buttons button::after,
.esp-page .gcalc__resetrow button::before, .esp-page .gcalc__resetrow button::after {
  content: none !important;
  display: none !important;
}
.esp-page .gcalc__buttons button,
.esp-page .gcalc__resetrow button { box-shadow: none !important; }
.esp-page .gcalc__buttons button:hover,
.esp-page .gcalc__buttons button:active,
.esp-page .gcalc__buttons button:focus,
.esp-page .gcalc__buttons button:focus-visible {
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s, border-color .14s, color .14s !important;
}
.esp-page .gcalc__buttons button:focus-visible {
  outline: var(--esp-focus-width) solid var(--esp-ink-soft);
  outline-offset: 0;
}

/* ---------- Schmalere Fenster/Spalten ---------- */
@media (max-width: 480px) {
  .esp-page .gcalc__col { padding: 18px; }
  .esp-page .gcalc__buttons { flex-direction: column; align-items: stretch; }
}

/* ---------- Hinweis-Trigger + Dialog (wie bei Lipla light) ---------- */
.esp-page .esp-info {
  margin: var(--esp-sp-4) 0 0;
  padding-top: var(--esp-sp-3);
  border-top: var(--esp-border-width) solid rgba(97,110,45,.18);
}
.esp-page .esp-link {
  border: 0;
  background: none;
  padding: 0;
  font: 500 var(--esp-fs-lvl4)/1.5 var(--esp-font);
  color: var(--esp-green-dark);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--esp-green-line);
}
.esp-page .esp-link:hover { color: var(--esp-ink-soft); text-decoration-color: var(--esp-green); }
.esp-page .esp-link:focus-visible { outline: var(--esp-focus-width) solid var(--esp-green-dark); outline-offset: 0; }
.esp-page .esp-link--info { font-weight: 700; }
/* Kleines "i" im gefuellten Kreis hinter "Hinweis zur Berechnung" –
   signalisiert auf den ersten Blick, dass sich dahinter weitere
   Informationen verbergen. Leicht hochgestellt statt auf der Grundlinie. */
.esp-page .esp-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  background: var(--esp-green-dark);
  color: var(--esp-surface) !important;
  border-radius: 50%;
  font: 700 10px/1 var(--esp-font);
  text-decoration: none;
  vertical-align: 4px;
}

.esp-page .esp-dialog {
  width: min(460px, calc(100vw - 32px));
  max-height: min(80vh, 620px);
  padding: 0;
  border: var(--esp-border-width) solid var(--esp-line);
  border-radius: var(--esp-radius);
  background: var(--esp-surface);
  color: var(--esp-ink);
  overflow: hidden;
}
.esp-page .esp-dialog::backdrop { background: rgba(28, 31, 25, .42); }
.esp-page .esp-dialog-inner { display: flex; flex-direction: column; max-height: inherit; }
.esp-page .esp-dialog-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px 12px;
  border-bottom: var(--esp-border-width) solid var(--esp-line);
}
.esp-page .esp-dialog-title { flex: 1; margin: 0; font-size: var(--esp-fs-h2); }
.esp-page .esp-dialog-close {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  margin: -4px -4px 0 0;
  border: 0;
  border-radius: var(--esp-radius);
  background: none;
  color: var(--esp-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.esp-page .esp-dialog-close:hover { background: var(--esp-canvas); color: var(--esp-ink); }
.esp-page .esp-dialog-close:focus-visible { outline: var(--esp-focus-width) solid var(--esp-green-dark); outline-offset: 0; }
.esp-page .esp-dialog-body {
  padding: var(--esp-sp-4) 18px var(--esp-sp-5);
  overflow-y: auto;
  font-size: var(--esp-fs-md);
  line-height: 1.65;
  color: var(--esp-ink-soft);
}
.esp-page .esp-dialog-body p { margin: 0 0 11px; }
.esp-page .esp-dialog-body p:last-child { margin-bottom: 0; }
@container esp-page (max-width: 420px) {
  .esp-page .gcalc__buttons { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .esp-page, .esp-page * { transition-duration: .01ms !important; }
}