/* PypeCloud — Ersparnis-Rechner im Abschnitt „Einstieg“ (zwei Regler, der Stundensatz ist fest 50 € inkl. Arbeitgeberanteil).
   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“).
   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: 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“ 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“ sähe wie ein Schalter aus, der nichts schaltet.
   Die Annahme zum festen Stundensatz („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). 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: 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}   /* sonst ragt der Knopf bei 320 px 3 px über die Fläche */
}
@media (prefers-reduced-motion:reduce){
  .r-schieber::-webkit-slider-thumb,.r-schieber::-moz-range-thumb{transition:none}
}