/* Teil rechner: kompakter Förderrechner mit PDF. Eine Karte, ab 1024 px Eingaben links und Ergebnis rechts.
   Alle Selektoren unter .k-rechner, eigene Variablen mit --rechner-. */
.k-rechner{
  --rechner-schnitt:36px;
  --rechner-schnitt-x:calc(var(--rechner-schnitt) * var(--steigung));
  --rechner-fuell:25%;
  --rechner-fokus:0 0 0 2px var(--weiss),0 0 0 4px var(--signal);
  position:relative;max-width:var(--breite);margin:0 auto;
  font-family:var(--f-text);font-size:var(--t-text);line-height:1.5;color:var(--grau);
  /* Der Schatten folgt der geschnittenen Karte: drop-shadow auf der Wurzel, clip-path auf der Karte darin */
  filter:drop-shadow(0 0 1px rgba(3,25,38,.4)) drop-shadow(0 18px 32px rgba(3,25,38,.16));
}
.k-rechner *,.k-rechner *::before,.k-rechner *::after{box-sizing:border-box}
.k-rechner :where(p){margin:0}
.k-rechner [hidden]{display:none !important}
.k-rechner button,.k-rechner a,.k-rechner label,.k-rechner summary,.k-rechner input:not([type="range"]){touch-action:manipulation}

/* Die Karte schneidet oben rechts und unten links (Eckregel) */
.k-rechner__karte{
  display:grid;background:var(--weiss);
  clip-path:polygon(0 0,calc(100% - var(--rechner-schnitt-x)) 0,100% var(--rechner-schnitt),100% 100%,var(--rechner-schnitt-x) 100%,0 calc(100% - var(--rechner-schnitt)));
}

/* Eingaben */
.k-rechner__eingaben{display:grid;align-content:start;gap:var(--luft-3);padding:var(--luft-4) clamp(20px,3.2vw,44px) var(--luft-4);min-width:0}
.k-rechner__feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.k-rechner__zeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px var(--luft-2);min-width:0}
/* Die Bezeichnung teilt sich die Zeile mit dem Feld, reicht der Platz nicht, rutscht das Feld darunter */
.k-rechner__zeile > .k-rechner__bez{flex:1 1 9em;min-width:0}
.k-rechner__bez{font-weight:600;font-size:.9375rem;line-height:1.35;color:var(--grau)}
/* Anklickbare Bezeichnungen: Trefferfläche mindestens 44 px hoch */
.k-rechner label.k-rechner__bez{display:flex;flex-direction:column;justify-content:center;min-height:44px;cursor:pointer}
.k-rechner__bez--fein{font-weight:500}
.k-rechner__frei{display:block;font-weight:400;font-size:var(--t-klein);color:var(--grau-leise)}
.k-rechner__hilfe{font-size:.8125rem;line-height:1.4;color:var(--grau-leise)}
.k-rechner__hinweis{font-size:.8125rem;color:var(--signal-dunkel);font-weight:600}
.k-rechner__hinweis:empty{display:none}

/* u6-montage: "50 bis unter 500" bleibt bei jeder Breite einzeilig, die mittlere Wahl bekommt die Breite, die sie braucht */
.k-rechner__groessen{display:grid;grid-template-columns:minmax(0,1fr) minmax(max-content,1.15fr) minmax(0,1fr);border:1px solid var(--linie-feld)}
.k-rechner__groesse{
  min-height:44px;padding:4px 6px;border:0;border-left:1px solid var(--linie-feld);background:var(--weiss);
  font:500 .875rem/1.2 var(--f-text);color:var(--grau);cursor:pointer;white-space:nowrap;
  transition:background-color .2s var(--kurve),color .2s var(--kurve);
}
.k-rechner__groesse:first-child{border-left:0}
.k-rechner__groesse:hover{background:var(--signal-10)}
.k-rechner__groesse[aria-checked="true"]{background:var(--signal);color:var(--weiss);font-weight:600}
.k-rechner__groesse:focus-visible{outline:none;box-shadow:var(--rechner-fokus);position:relative;z-index:1}

.k-rechner__stepper{flex:none;display:inline-flex;align-items:stretch;border:1px solid var(--linie-feld)}
.k-rechner__st{
  width:44px;min-height:44px;border:0;background:var(--hell);color:var(--grau);
  font:500 1.25rem/1 var(--f-text);cursor:pointer;
}
.k-rechner__st:hover{background:var(--signal-10)}
.k-rechner__st[aria-disabled="true"]{color:var(--grau-leise);opacity:.45;cursor:default}
.k-rechner__st:focus-visible{outline:none;box-shadow:var(--rechner-fokus);position:relative;z-index:1}
.k-rechner__stepper input{
  width:60px;min-width:0;border:0;border-left:1px solid var(--linie-feld);border-right:1px solid var(--linie-feld);
  text-align:center;font:600 1.125rem/1 var(--f-text);color:var(--grau);background:var(--weiss);
  font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield;
}
.k-rechner__stepper input::-webkit-outer-spin-button,.k-rechner__stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.k-rechner__stepper input:focus-visible{outline:none;box-shadow:var(--rechner-fokus);position:relative;z-index:1}
.k-rechner__unterfeld{margin-top:6px;padding-left:12px;border-left:2px solid var(--signal)}

.k-rechner__eurofeld{flex:none;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--grau)}
.k-rechner__eurofeld input{
  width:84px;min-height:44px;padding:4px 8px;border:1px solid var(--linie-feld);background:var(--weiss);
  font:600 1.125rem/1 var(--f-text);color:var(--grau);text-align:right;font-variant-numeric:tabular-nums;
}
.k-rechner__eurofeld input:focus-visible{outline:none;box-shadow:var(--rechner-fokus)}

/* Schieber mit rundem Griff */
.k-rechner__schieber{
  -webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y;
}
.k-rechner__schieber::-webkit-slider-runnable-track{
  height:4px;background:linear-gradient(90deg,var(--signal) var(--rechner-fuell),var(--signal-20) var(--rechner-fuell));
}
.k-rechner__schieber::-moz-range-track{height:4px;background:var(--signal-20)}
.k-rechner__schieber::-moz-range-progress{height:4px;background:var(--signal)}
.k-rechner__schieber::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border:3px solid var(--weiss);border-radius:50%;
  background:var(--signal);box-shadow:0 1px 4px rgba(3,25,38,.4);
}
.k-rechner__schieber::-moz-range-thumb{width:16px;height:16px;border:3px solid var(--weiss);border-radius:50%;background:var(--signal);box-shadow:0 1px 4px rgba(3,25,38,.4)}
.k-rechner__schieber:focus-visible{outline:none}
.k-rechner__schieber:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--weiss),0 0 0 4px var(--signal)}
.k-rechner__schieber:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--weiss),0 0 0 4px var(--signal)}

/* Ergebnis auf Deep Blue */
.k-rechner__ergebnis{
  display:flex;flex-direction:column;min-width:0;container-type:inline-size;
  padding:var(--luft-4) clamp(20px,3.6vw,48px) var(--luft-3);
  background:radial-gradient(90% 60% at 85% 0%,rgba(17,118,140,.22),rgba(17,118,140,0) 70%),var(--deep);color:var(--weiss);
}
.k-rechner__label{font-size:var(--t-kicker);letter-spacing:.14em;text-transform:uppercase;color:var(--signal-hell);font-weight:600}
.k-rechner__zahl{
  margin-top:var(--luft-1);font-family:var(--f-marke);font-weight:400;line-height:1;white-space:nowrap;color:var(--weiss);
  font-size:clamp(2.25rem,15cqi,4.5rem);
}
/* Russo One hat keine Tabellenziffern: jede Ziffer steht in einem gleich breiten Kasten */
.k-rechner__z{display:inline-block;width:.68em;text-align:center}
.k-rechner__p{display:inline-block;width:.25em;text-align:center}
.k-rechner__euro{font-family:var(--f-text);font-weight:600;font-size:.4em;color:var(--silver);vertical-align:.2em}
.k-rechner__vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.k-rechner__unter{margin-top:6px;color:var(--silver);font-size:.9375rem}

.k-rechner__bausteine{display:grid;grid-template-columns:1fr 1fr;gap:var(--luft-2);margin-top:var(--luft-3);padding-top:var(--luft-2);border-top:1px solid var(--linie-dunkel)}
.k-rechner__baustein{display:flex;flex-direction:column;min-width:0}
.k-rechner__btitel{font-size:.8125rem;color:var(--silver)}
.k-rechner__bzahl{font-family:var(--f-marke);font-size:clamp(1.125rem,4.6cqi,1.5rem);line-height:1.25;white-space:nowrap}
.k-rechner__bpro{font-size:.8125rem;line-height:1.35;color:var(--signal-hell)}
.k-rechner__eigen{margin-top:var(--luft-2);font-size:.8125rem;color:var(--silver)}

.k-rechner__aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--luft-1) var(--luft-3);margin-top:var(--luft-3)}
.k-rechner__cta,.k-rechner .knopf.k-rechner__cta{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;
  background:var(--signal);color:var(--weiss);text-decoration:none;font:600 1rem/1.2 var(--f-text);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 18px,100% 100%,14px 100%,0 calc(100% - 18px));
  transition:background-color .2s var(--kurve);
}
.k-rechner__cta:hover{background:var(--signal-dunkel)}
/* Die Fläche des seitenweiten .knopf (::before) braucht es hier nicht, der Knopf trägt Farbe und Schnitt selbst */
.k-rechner .knopf.k-rechner__cta::before{content:none}
/* clip-path kappt alles außerhalb, der Fokusrahmen liegt deshalb innen */
.k-rechner .k-rechner__cta:focus-visible{outline:2px solid var(--weiss);outline-offset:-9px;background:var(--signal-dunkel)}
.k-rechner__neben{
  min-height:44px;padding:0;border:0;background:none;color:var(--weiss);cursor:pointer;
  font:600 .9375rem/1.2 var(--f-text);text-decoration:underline;text-decoration-color:var(--signal-hell);text-underline-offset:5px;
}
.k-rechner__neben:hover{color:var(--signal-hell)}
.k-rechner__neben:focus-visible{outline:2px solid var(--signal-hell);outline-offset:3px}
.k-rechner__neben[aria-expanded="true"]{color:var(--signal-hell)}

.k-rechner__pdf{display:flex;gap:var(--luft-1);margin-top:var(--luft-2);max-width:460px}
.k-rechner__pdf input{
  flex:1 1 auto;min-width:0;min-height:44px;padding:6px 12px;border:1px solid var(--linie-dunkel);border-color:rgba(189,191,191,.55);
  background:var(--deep-2);color:var(--weiss);font:500 .9375rem/1.2 var(--f-text);
}
.k-rechner__pdf input::placeholder{color:var(--silver);opacity:.8}
.k-rechner__pdf input:focus-visible{outline:none;box-shadow:0 0 0 2px var(--signal-hell)}
.k-rechner__pdfknopf{
  flex:none;min-height:44px;padding:0 16px;border:1px solid var(--silver);background:transparent;color:var(--weiss);
  font:600 .9375rem/1.2 var(--f-text);cursor:pointer;transition:background-color .2s var(--kurve),color .2s var(--kurve);
}
.k-rechner__pdfknopf:hover{background:var(--weiss);color:var(--deep)}
.k-rechner__pdfknopf:focus-visible{outline:2px solid var(--signal-hell);outline-offset:2px}
.k-rechner__pdfknopf[aria-busy="true"]{opacity:.6;cursor:progress}
.k-rechner__pdfstatus{margin-top:6px;font-size:.8125rem;color:var(--silver)}
.k-rechner__pdfstatus:empty{display:none}

/* Fuß der Ergebnisspalte: Rechenweg zugeklappt. Der Hinweis "Unverbindliche Beispielrechnung" steht seit umbau5 nur noch im PDF */
.k-rechner__fuss{margin-top:auto;padding-top:var(--luft-3)}
.k-rechner__links{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:20px;padding-top:var(--luft-1);border-top:1px solid var(--linie-dunkel)}
.k-rechner__rechenweg summary{
  display:inline-flex;align-items:center;min-height:44px;font-size:.8125rem;font-weight:600;color:var(--signal-hell);cursor:pointer;
}
.k-rechner__rechenweg summary:hover{color:var(--weiss)}
.k-rechner__rechenweg summary:focus-visible{outline:2px solid var(--signal-hell);outline-offset:2px}
.k-rechner__rechenweg[open]{flex-basis:100%}
.k-rechner__rechenweg ul{margin:0 0 var(--luft-1);padding-left:1.1em;display:grid;gap:4px;font-size:.75rem;line-height:1.5;color:var(--silver)}

/* Ab 1024 px: Eingaben links, Ergebnis rechts, gleich hoch */
@media (min-width:1024px){
  .k-rechner{--rechner-schnitt:44px}
  .k-rechner__karte{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
  .k-rechner__eingaben{padding-top:var(--luft-5);padding-bottom:var(--luft-5);gap:var(--luft-4)}
  .k-rechner__ergebnis{padding-top:var(--luft-5)}
}
@media (max-width:420px){
  .k-rechner__stepper input{width:48px}
  .k-rechner__links{column-gap:16px}
  .k-rechner__rechenweg summary{font-size:.75rem}
}
@media (max-width:380px){
  .k-rechner__cta,.k-rechner .knopf.k-rechner__cta{width:100%;padding:0 16px}
  /* u6-montage: bei "50 bis unter 500" bleibt jeder der drei Knöpfe mindestens so breit wie sein Text (320 px: "unter 50" wurde abgeschnitten) */
  .k-rechner__groessen{grid-template-columns:minmax(max-content,1fr) minmax(max-content,1.15fr) minmax(max-content,1fr)}
  .k-rechner__groesse{font-size:.8125rem;padding:4px 3px}
}
@container (max-width:260px){
  .k-rechner__bausteine{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .k-rechner *,.k-rechner *::before,.k-rechner *::after{transition:none !important;animation:none !important}
}