/* PypeCloud — Ersparnis-Rechner im Abschnitt „Einstieg“ (Armin, 16.10.2026, Telegram 6629 bis 6633; zwei Regler, der Stundensatz ist fest 50 € inkl.
   Arbeitgeberanteil und hat keinen Regler mehr, Armin 18.10.2026, Telegram 7023). Gemeinsame Werte stehen in base.css, die
   Karten sind die der Seite (Weiß mit Rahmen und Schatten, die Ergebnisfläche im Verlauf der Karte „Förderung“). Eine eigene Datei, damit sie sich
   nicht mit den Änderungen an start.css und bewegung.css beißt.
   Regeln, die hier gelten:
   - Bewegt wird nur per transform und opacity (die Griffe der Regler); die Zahlen laufen per Skript (js/rechner.js). Bei „weniger Bewegung“ und in der
     Stufe „aus“ springen die Zahlen: das Skript setzt die Klasse .r-bereit (Anfangszustand der Bewegung) nur mit Bewegung.
   - base.css schaltet bei „weniger Bewegung“ alle Übergänge ab (!important), erreicht aber die Pseudo-Elemente der Regler nicht: dafür steht unten
     ein eigener Block.
   - Weiß auf dem Verlauf braucht 4,5:1 (Prüfung „kontrast“): auf der Ergebnisfläche nur reines Weiß, keine Deckkraft im Text, keine hellen Flecken
     hinter Text. */
.rechner{
  --griff:32px;--spur:8px;
  display:grid;grid-template-columns:minmax(0,calc((100% - 20px) * 1.25 / 2.25 + 10px)) minmax(0,1fr);   /* die Naht liegt mitten in der Lücke der beiden Karten darunter (.paar) */
  margin-bottom:20px;border-radius:20px;background:#fff;border:1px solid var(--linie);box-shadow:var(--schatten)
}

/* Eingabe: zwei Regler */
.r-eingabe{display:flex;flex-direction:column;min-width:0;padding:34px 34px 30px}
.rechner h3{font-size:26px}
.r-lead{margin-top:8px;color:var(--slate);font-size:16px;max-width:30em}
.r-gruppe{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;gap:22px;margin-top:26px}   /* die beiden Regler verteilen sich auf die Höhe der Ergebnisfläche */
.r-skala{display:flex;justify-content:space-between;margin-top:3px;padding:0 3px;font-size:12.5px;line-height:1;color:var(--leise)}   /* unter dem Griff: der Griff steht an den Enden nicht auf der Zahl */
.r-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.r-zeile label{flex:1;min-width:0;font-size:16px;font-weight:500;letter-spacing:-.005em;line-height:1.3;color:var(--ink)}
.r-wert{flex:none;white-space:nowrap;font-family:var(--mono);font-size:24px;line-height:1;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.r-wert b{display:inline-block;min-width:3ch;text-align:right;font-weight:500}   /* gleich breit von „5“ bis „180“: die Beschriftung davor bricht sonst bei einem breiteren Wert um und die Karte springt in der Höhe */
.r-wert small{margin-left:5px;font-family:var(--font);font-size:15px;font-weight:500;letter-spacing:0;color:var(--slate)}

/* Regler: die Spur trägt den Markenverlauf bis zum Griff (die Füllung deckt der graue Rest ab), der Griff ist 32 px groß, die Tippfläche 44 px hoch.
   --p (0 bis 1) setzt das Skript; ohne Skript steht der Startwert im HTML. */
.r-schieber{--ende:calc(var(--griff) / 2 + (100% - var(--griff)) * var(--p, 0));   /* hier und nicht am Container: var(--p) gilt erst am Regler selbst */
  -webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;padding:0;background:transparent;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.r-schieber:focus{outline:none}
.r-schieber::-webkit-slider-runnable-track{height:var(--spur);border-radius:999px;
  background:linear-gradient(90deg,transparent var(--ende),#DCE4F4 var(--ende)),linear-gradient(90deg,var(--blau),var(--violett) 62%,var(--rosa))}
.r-schieber::-moz-range-track{height:var(--spur);border-radius:999px;
  background:linear-gradient(90deg,transparent var(--ende),#DCE4F4 var(--ende)),linear-gradient(90deg,var(--blau),var(--violett) 62%,var(--rosa))}
.r-schieber::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:var(--griff);height:var(--griff);margin-top:calc((var(--spur) - var(--griff)) / 2);
  border-radius:50%;border:3px solid var(--blau-text);background:#fff;box-shadow:0 1px 2px rgba(11,27,63,.22),0 7px 16px -5px rgba(31,63,184,.5);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.r-schieber::-moz-range-thumb{box-sizing:border-box;width:var(--griff);height:var(--griff);
  border-radius:50%;border:3px solid var(--blau-text);background:#fff;box-shadow:0 1px 2px rgba(11,27,63,.22),0 7px 16px -5px rgba(31,63,184,.5);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.r-schieber:hover::-webkit-slider-thumb{transform:scale(1.08)}
.r-schieber:hover::-moz-range-thumb{transform:scale(1.08)}
.r-schieber:active::-webkit-slider-thumb{transform:scale(1.14);box-shadow:0 0 0 8px rgba(62,118,246,.18),0 1px 2px rgba(11,27,63,.22),0 7px 16px -5px rgba(31,63,184,.5)}
.r-schieber:active::-moz-range-thumb{transform:scale(1.14);box-shadow:0 0 0 8px rgba(62,118,246,.18),0 1px 2px rgba(11,27,63,.22),0 7px 16px -5px rgba(31,63,184,.5)}
.r-schieber:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--blau-text),0 7px 16px -5px rgba(31,63,184,.5)}
.r-schieber:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--blau-text),0 7px 16px -5px rgba(31,63,184,.5)}
.rechner:not(.r-an) .r-schieber{pointer-events:none;cursor:default}   /* ohne Skript ist es ein Beispiel: die Regler stehen auf den Startwerten und rühren sich nicht */
@media (scripting:none){
  .r-lead::after{content:" Ohne JavaScript zeigt der Rechner ein Beispiel mit festen Werten."}
}

/* Ergebnis: Nutzen in großen Zahlen */
.r-ergebnis{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;padding:34px;color:#fff;border-radius:0 19px 19px 0;overflow:hidden;
  background:linear-gradient(150deg,#2F62E6 0%,#4258E2 52%,#5A4FDB 100%)}
.r-ergebnis::before{content:"";position:absolute;z-index:-1;right:-30%;bottom:-40%;width:95%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(11,24,100,.34),rgba(11,24,100,0))}   /* nur Abdunkelung, nie ein heller Fleck hinter Text */
.r-frage{font-size:18px;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:#fff}
.r-out{position:relative;display:block;margin-top:14px}
.r-gross{display:flex;flex-wrap:wrap;align-items:baseline;gap:.16em;line-height:.95;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.r-gross b{font-size:clamp(72px,7.4vw,112px);font-weight:500}
.r-gross small{font-size:clamp(24px,2.3vw,34px);font-weight:500;letter-spacing:-.02em}
.r-gross .r-jahr{flex:0 0 100%;margin-top:4px;font-weight:600;letter-spacing:-.01em;line-height:1.15}   /* „pro Jahr“ (Armin 7598) immer in einer eigenen Zeile unter der großen Zahl, in Größe der Einheit und fett: gut lesbar, und die Karte springt bei keinem Wert in der Höhe */
.r-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.3)}
.r-stat{min-width:0}
.r-n{display:block;white-space:nowrap;font-size:clamp(28px,2.6vw,38px);font-weight:500;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums}
.r-n b{font-weight:500}
.r-n [data-r="wochen-vor"]{margin-right:.24em}   /* „rund“ in derselben Größe wie die Zahl und auf ihrer Grundlinie; der Abstand kommt von hier, nicht aus einem Leerzeichen im Text */
.r-u{display:block;margin-top:7px;font-size:14.5px;line-height:1.3;color:#fff}
.r-u b{font-weight:600}   /* „Wert pro Jahr“: die Wiederkehr hervorgehoben, in einer Zeile wie „Arbeitswochen“ */

/* Der Anteil der Software (die Hälfte) steht nur im Kleingedruckten: ein Balken „Software / Ihr Team“ sah wie ein Schalter aus und schaltete nichts (Armin 6682/6684).
   Die Annahme zum festen Stundensatz (Armin 7023: „Gerechnet mit 50 € pro Stunde inkl. Arbeitgeberanteil.“) steht klein beim Euro-Ergebnis, direkt unter der Reihe mit den
   Zahlen, und teilt sich Schrift und Farbe mit dem Kleingedruckten (eine Regel für beide; die Prüfung rechner vergleicht sie). Reines Weiß ohne Deckkraft: Kontrast 4,5:1.
   Die Annahme ist eine Zeile und hat keine Höchstbreite: so reicht ihr Kasten in jedem Layout unter beide Spalten der Reihe, auch in der breiten einspaltigen Fassung. */
.r-klein,.r-annahme{font-size:13.5px;line-height:1.5;color:#fff}
.r-klein{margin-top:20px;max-width:36em}
.r-wieder{margin-top:18px;font-size:17px;font-weight:600;line-height:1.35;letter-spacing:-.005em;color:#fff}   /* der Satz zur Wiederkehr (Armin 7598): fett und größer als das Kleingedruckte, kein weiteres Kleingedrucktes; reines Weiß wie dort (Kontrast auf dem Verlauf) */
.r-wieder + .r-klein{margin-top:14px}
.r-annahme{display:block;margin-top:14px}
.r-ergebnis .knopf{align-self:flex-start;margin-top:auto}
.r-klein + .knopf{margin-top:22px}
.r-ergebnis .knopf:focus-visible{outline-color:#fff}

@media (pointer:coarse){
  .rechner{--griff:36px}   /* Finger: größerer Griff */
}
@media (max-width:1060px){
  .rechner{grid-template-columns:minmax(0,1fr)}
  .r-ergebnis{border-radius:0 0 19px 19px}
}
@media (max-width:720px){
  .r-eingabe{padding:26px 22px 24px}
  .r-ergebnis{padding:28px 22px 26px}
  .r-gruppe{gap:18px;margin-top:22px}
}
@media (max-width:360px){
  .r-reihe{grid-template-columns:minmax(0,1fr)}
  .r-wert{font-size:22px}
  .r-gross b{font-size:64px}   /* „6.900“ (der größte Wert) passt bei 320 px mit Luft neben „Std.“ */
  .r-ergebnis .knopf{align-self:stretch;justify-content:center;padding:0 14px}   /* bei 320 px ragte der Knopf 3 px über die Fläche */
}
@media (prefers-reduced-motion:reduce){
  .r-schieber::-webkit-slider-thumb,.r-schieber::-moz-range-thumb{transition:none}
}