/* SaarLB Tagesgeld-Bausteine. Alle Regeln hängen an tg-Klassen und wirken nur dort.
   Farben nach Design Manual; Schrift kommt aus dem Elementor-Kit (inherit). */
.tg-baustein,.tg-leiste,.tg-schritte{
  --tg-gold:#DDDF00;--tg-gold-hell:#F1F2A6;--tg-tinte:#141410;--tg-tinte-2:#26261E;--tg-papier:#FAFAF4;
  --tg-grau:#505250;--tg-leise:#65675A;--tg-linie:#DEDDCF;--tg-rot:#D24707;
}
.tg-baustein,.tg-baustein *{box-sizing:border-box}
.tg-baustein{font-family:inherit;line-height:1.5}
.tg-baustein p,.tg-baustein h2,.tg-baustein dl,.tg-baustein dd,.tg-baustein figure{margin:0}
.tg-baustein :focus-visible,.tg-leiste :focus-visible,.tg-mehr:focus-visible{outline:3px solid var(--tg-rot,#D24707);outline-offset:3px;border-radius:3px}
.tg-nur-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Hervorhebungen in Überschriften und Texten ----------
   Ein Inline-Hintergrund ist so hoch wie die Schrift selbst (Ober- bis Unterlänge),
   unabhängig von der Zeilenhöhe – bei enger Zeilenhöhe ragt er in die Nachbarzeilen.
   Als inline-block mit eigener Zeilenhöhe bleibt die Fläche innerhalb ihrer Zeile. */
mark.tg-marke,mark.tg-hervor{display:inline-block;padding:0 .12em;border-radius:.06em;line-height:1.02;
  font:inherit;line-height:1.02;white-space:nowrap}
mark.tg-marke{background:#141410;color:#DDDF00}
mark.tg-hervor{background:#DDDF00;color:#141410}

/* ---------- Zinsuhr ---------- */
.tg-uhr{background:var(--tg-tinte);color:var(--tg-papier);border-radius:14px;padding:clamp(22px,2.6vw,32px);
  box-shadow:0 30px 60px -20px rgba(20,20,16,.55),0 8px 16px -8px rgba(20,20,16,.35);font-size:16px}
.tg-uhr-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px}
.tg-uhr h2{font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tg-gold);line-height:1.3}
.tg-uhr-hinweis,.tg-spanne{font-size:14px;color:#BDBEAC}
.tg-label-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.tg-uhr label{font-size:15px;color:#D5D6C6}
.tg-betrag-zeile{display:flex;align-items:baseline;gap:8px;border-bottom:2px solid #7A7B6A;padding-bottom:6px;transition:border-color .2s}
.tg-betrag-zeile:focus-within{border-color:var(--tg-gold)}
.tg-uhr .tg-betrag{background:transparent;border:0;color:var(--tg-papier);font-family:inherit;font-weight:800;font-size:clamp(34px,4vw,48px);line-height:1.1;
  letter-spacing:-.03em;width:100%;min-width:0;padding:0;font-variant-numeric:tabular-nums;box-shadow:none;border-radius:0}
.tg-uhr .tg-betrag:focus{outline:none}
.tg-betrag-euro{font-weight:700;font-size:28px;color:#A9AA98}
.tg-feld-hinweis{margin-top:10px;font-size:15px;color:var(--tg-gold)}
.tg-regler-huelle{position:relative;margin-top:22px;padding-bottom:26px}
.tg-regler{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;margin:0;cursor:pointer;border:0;padding:0}
.tg-regler::-webkit-slider-runnable-track{height:8px;border-radius:99px;
  background:linear-gradient(90deg,var(--tg-gold) 0 var(--anteil,40%),#55564A var(--anteil,40%) 100%)}
.tg-regler::-moz-range-track{height:8px;border-radius:99px;background:#55564A}
.tg-regler::-moz-range-progress{height:8px;border-radius:99px;background:var(--tg-gold)}
.tg-regler::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;
  background:var(--tg-gold);border:5px solid var(--tg-tinte);box-shadow:0 0 0 2px var(--tg-gold),0 6px 14px rgba(0,0,0,.4)}
.tg-regler::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--tg-gold);border:5px solid var(--tg-tinte);box-shadow:0 0 0 2px var(--tg-gold)}
.tg-regler:focus-visible{outline:none}
.tg-regler:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--tg-rot),0 6px 14px rgba(0,0,0,.4)}
.tg-regler:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--tg-rot)}
.tg-skala{position:absolute;left:15px;right:15px;bottom:0;height:20px;font-size:13px;color:#BDBEAC;font-variant-numeric:tabular-nums}
.tg-skala span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.tg-skala span:first-child{transform:none}
.tg-skala span:last-child{transform:translateX(-100%)}
.tg-schnell{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tg-uhr .tg-schnell button{font-family:inherit;font-weight:500;font-size:15px;line-height:1.3;color:var(--tg-papier);background:transparent;border:1px solid #75766A;
  padding:7px 13px;border-radius:99px;cursor:pointer;font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}
.tg-uhr .tg-schnell button:hover{border-color:var(--tg-gold);background:transparent;color:var(--tg-papier)}
.tg-uhr .tg-schnell button[aria-pressed="true"]{background:var(--tg-gold);color:var(--tg-tinte);border-color:var(--tg-gold)}
.tg-ergebnis{margin-top:24px;padding-top:22px;border-top:1px solid #33332A}
.tg-ergebnis-label{font-size:15px;color:#D5D6C6}
.tg-ergebnis-wert{font-weight:800;font-size:clamp(46px,5.6vw,68px);line-height:1.02;letter-spacing:-.04em;color:var(--tg-gold);margin-top:2px;font-variant-numeric:tabular-nums}
.tg-ergebnis-reihe{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.tg-ergebnis-reihe div{background:var(--tg-tinte-2);border-radius:8px;padding:12px 14px}
.tg-ergebnis-reihe dt{font-size:14px;color:#BDBEAC;font-weight:400}
.tg-ergebnis-reihe dd{margin:2px 0 0;font-weight:700;font-size:21px;font-variant-numeric:tabular-nums}
.tg-ticker{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:16px;font-size:15px;color:#D5D6C6}
.tg-ticker i{width:8px;height:8px;border-radius:50%;background:#7BD88F;flex:none;animation:tg-puls 1.6s infinite}
.tg-ticker.ist-angehalten i{animation:none;opacity:.35}
.tg-ticker b{color:var(--tg-papier);font-weight:700;font-variant-numeric:tabular-nums}
.tg-uhr .tg-ticker-knopf{margin-left:auto;font-family:inherit;font-weight:500;font-size:14px;line-height:1.3;color:var(--tg-papier);background:transparent;
  border:1px solid #75766A;border-radius:99px;padding:6px 13px;cursor:pointer;text-transform:none;letter-spacing:0}
.tg-uhr .tg-ticker-knopf:hover{border-color:var(--tg-gold);background:transparent;color:var(--tg-papier)}
.tg-kleingedruckt{font-size:14px;color:#BDBEAC;margin-top:16px!important;line-height:1.5}
@keyframes tg-puls{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- Ertragskurve ---------- */
.tg-rendite{display:grid;grid-template-columns:1.55fr .75fr;gap:clamp(24px,4vw,56px);align-items:end}
.tg-diagramm{background:#fff;border:1px solid var(--tg-linie);border-radius:14px;padding:18px 18px 10px}
.tg-diagramm svg{display:block;width:100%;height:auto}
.tg-legende{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px;color:var(--tg-grau);padding:6px 6px 8px}
.tg-legende span{display:inline-flex;align-items:center;gap:8px}
.tg-legende i{width:14px;height:10px;border-radius:2px;display:inline-block;border:1px solid var(--tg-tinte)}
.tg-legende .tg-feld-aktion{background:var(--tg-gold)}
.tg-legende .tg-feld-basis{background:repeating-linear-gradient(135deg,var(--tg-gold-hell) 0 3px,#fff 3px 5px)}
.tg-aussage{font-size:clamp(22px,2.2vw,30px);line-height:1.3;font-weight:300;color:var(--tg-tinte)}
.tg-aussage b{font-weight:800}
.tg-aussage-fuss{font-size:15px;color:var(--tg-leise);margin-top:14px!important}

/* ---------- Grafiken ---------- */
.tg-ringe{width:100%;max-width:440px;aspect-ratio:1;margin-inline:auto;display:block}
.tg-fluss{width:100%;max-width:520px;display:block;margin-inline:auto}
.tg-ringe text,.tg-fluss text{font-family:inherit}
.tg-ring-dreh{transform-origin:220px 220px}
.tg-ringe.laeuft .tg-ring-dreh{animation:tg-drehen 4.5s cubic-bezier(.3,.6,.2,1) 1}
@keyframes tg-drehen{to{transform:rotate(360deg)}}
.tg-fluss .tg-strom{stroke-dasharray:6 10}
.tg-fluss.laeuft .tg-strom{animation:tg-fliessen 1.4s linear 3}
.tg-fluss.laeuft .tg-strom-zurueck{animation-direction:reverse}
@keyframes tg-fliessen{to{stroke-dashoffset:-32}}

/* ---------- Drei Schritte (Spalte mit Klasse tg-schritte) ----------
   Jede Überschrift ist ein Schritt; die Nummer kommt per CSS-Zähler,
   die Linie setzt das Skript zwischen erste und letzte Nummer. */
/* Elementors Spaltenabstand setzt das Padding mit hoeherer Spezifitaet, daher !important.
   Einzug = 10 px Spaltenabstand + 82 px fuer die Nummer. */
.tg-schritte > .elementor-widget-wrap{position:relative;padding-left:92px!important;counter-reset:tg-schritt}
.tg-schritte .elementor-widget-heading{counter-increment:tg-schritt;position:relative}
.tg-schritte .elementor-widget-heading::before{content:counter(tg-schritt);position:absolute;left:-82px;top:50%;margin-top:-29px;
  width:58px;height:58px;border-radius:50%;background:#fff;border:3px solid var(--tg-linie);display:grid;place-items:center;
  font-weight:800;font-size:22px;line-height:1;color:var(--tg-leise);z-index:1;box-sizing:border-box;
  transition:background-color .3s,border-color .3s,color .3s}
.tg-schritte .elementor-widget-heading.ist-erreicht::before{background:var(--tg-gold);border-color:var(--tg-tinte);color:var(--tg-tinte)}
.tg-schritte .elementor-widget-text-editor:not(:last-child){margin-bottom:clamp(34px,4vw,54px)}
.tg-spur-grund,.tg-spur{position:absolute;left:37px;width:4px;border-radius:4px;pointer-events:none}
.tg-spur-grund{background:var(--tg-linie)}
.tg-spur{background:var(--tg-gold);height:0;box-shadow:0 0 0 1px rgba(20,20,16,.06)}

/* ---------- Weitere Fragen (Toggle mit Klasse tg-fragen) ---------- */
.tg-mehr{margin-top:26px;display:inline-flex;align-items:center;font-family:inherit;font-weight:700;font-size:17px;line-height:1.2;padding:17px 28px;border-radius:4px;border:0;
  cursor:pointer;background:#505250;color:#fff;transition:background-color .18s}
.tg-mehr:hover,.tg-mehr:focus-visible{background:#D24707;color:#fff}

/* ---------- Fakten im Abschnitt Flexibilität (Text-Editor mit ul.tg-fakten) ---------- */
ul.tg-fakten{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:26px 30px}
ul.tg-fakten li{margin:0;padding:0}
ul.tg-fakten b{display:block;font-size:22px;font-weight:800;line-height:1.15;color:#141410}
ul.tg-fakten span{display:block;font-size:16px;color:#505250;margin-top:5px;line-height:1.5}
@media (max-width:767px){ul.tg-fakten{grid-template-columns:1fr}}

/* ---------- Antragsleiste am Handy ---------- */
.tg-leiste{display:none}
@media (max-width:767px){
  .tg-leiste{position:fixed;left:0;right:0;bottom:0;z-index:999;background:var(--tg-tinte);color:var(--tg-papier);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;gap:14px;
    transform:translateY(110%);transition:transform .3s ease;font-size:16px;line-height:1.3}
  .tg-leiste.ist-sichtbar{transform:none}
  .tg-leiste b{color:var(--tg-gold);font-size:20px;font-weight:800;display:block}
  .tg-leiste span{font-size:14px;color:#BDBEAC;display:block}
  .tg-leiste .tg-leiste-knopf{background:var(--tg-gold);color:var(--tg-tinte);font-weight:700;padding:12px 18px;border-radius:4px;text-decoration:none;white-space:nowrap}
  body.tg-mit-leiste{padding-bottom:76px}
}

/* ---------- Umbrüche ---------- */
@media (max-width:980px){
  .tg-rendite{grid-template-columns:1fr}
  .tg-ringe{max-width:340px}
}
@media (max-width:767px){
  .tg-schritte > .elementor-widget-wrap{padding-left:72px!important}
  .tg-schritte .elementor-widget-heading::before{left:-62px;width:46px;height:46px;margin-top:-23px;font-size:18px}
  .tg-spur-grund,.tg-spur{left:31px}
}
@media (max-width:420px){
  .tg-ergebnis-reihe{grid-template-columns:1fr}
}
@media (pointer:coarse){
  .tg-uhr .tg-schnell button,.tg-uhr .tg-ticker-knopf{min-height:44px;padding-inline:16px}
}
@media (prefers-reduced-motion:reduce){
  .tg-baustein *,.tg-schritte *,.tg-schritte *::before,.tg-leiste{animation:none!important;transition:none!important}
}