/* ============================================================
   STARTHAUS — saison.css
   Der Saison-Rechner: zwei Säulen, die man vergleicht.

   Die Tiefe kommt aus drei Schichten (Podest, Säule, Spiegelung
   davor) und nicht aus einem Schlagschatten — flach beleuchtete
   Balken sehen sofort nach Tabellenkalkulation aus.
   ============================================================ */

.sr2{
  position:relative;border-radius:var(--r-lg,22px);padding:clamp(20px,3vw,34px);
  background:
    radial-gradient(120% 80% at 20% 0%,rgba(127,169,140,.14),transparent 60%),
    linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid var(--line);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---------------- Steuerung ---------------- */
.sr2-steuer{display:grid;gap:16px 24px;margin-bottom:clamp(24px,3vw,36px)}
/* Grid- und Flex-Kinder haben min-width:auto und schieben ihren Inhalt
   über den Rand hinaus, statt zu schrumpfen. Auf 390 px lief der Stepper
   samt „+"-Knopf aus dem Bild. */
.sr2-steuer > *{min-width:0}
.sr2-zahl{min-width:0;max-width:100%}
@media (min-width:820px){
  .sr2-steuer{grid-template-columns:1fr auto;align-items:end}
  .sr2-grp{grid-column:1}
  .sr2-grp--sw{grid-column:2;grid-row:1;justify-self:end}
  .sr2-zahl{grid-column:span 1}
  #sr2-fahrten{grid-column:1;grid-row:3}
  #sr2-tage{grid-column:2;grid-row:3}
}
.sr2-lbl{
  display:block;font-family:var(--mono,monospace);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--soft);margin-bottom:8px;
}
.sr2-chips{display:flex;flex-wrap:wrap;gap:7px}
.sr2-chips button{min-height:44px;
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.035);color:var(--text);
  font-size:.83rem;font-weight:550;cursor:pointer;
  transition:background .18s var(--ease-out),border-color .18s var(--ease-out),
             color .18s var(--ease-out),transform .18s var(--ease-out);
}
.sr2-chips button:hover{background:rgba(255,255,255,.075);transform:translateY(-1px)}
.sr2-chips button[aria-pressed="true"]{
  background:var(--pine);border-color:var(--pine);color:#07130c;font-weight:700;
}
.sr2-grp--sw{display:flex;align-items:center;gap:12px}
.sr2-grp--sw .sr2-lbl{margin-bottom:0}

.sr2-stepper{
  display:inline-flex;align-items:center;gap:2px;padding:4px;
  border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.24);
}
.sr2-stepper button{min-width:44px;min-height:44px;
  width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.06);color:var(--snow);font-size:1.1rem;line-height:1;
  transition:background .16s var(--ease-out);
}
.sr2-stepper button:hover{background:var(--pine);color:#07130c}
.sr2-stepper output{
  min-width:38px;text-align:center;font-family:var(--disp);font-weight:800;
  font-size:1.15rem;color:var(--snow);font-variant-numeric:tabular-nums;
}
/* Der Regler liegt unter dem Stepper — beide bedienen dieselbe Zahl,
   der eine grob, der andere genau. */
.sr2-stepper input[type=range]{
  width:clamp(90px,18vw,170px);accent-color:var(--pine);background:transparent;
}

/* ---------------- Die zwei Säulen ----------------
   Drei Spalten: Säule · Differenz · Säule. Die Differenz in der Mitte
   ist die eigentliche Antwort — vorher musste man sie im Kopf bilden.
   Die Bühne ist bewusst schmal: bei voller Breite standen die Säulen so
   weit auseinander, dass man sie nicht mehr vergleicht, sondern liest. */
.sr2-buehne{
  display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto auto;
  gap:clamp(10px,2.5vw,26px);align-items:stretch;
  max-width:620px;margin:0 auto;padding-bottom:4px;position:relative;
}
.sr2-buehne::after{
  content:"";position:absolute;left:0;right:0;bottom:62px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
}
/* Drei feste Reihen — sonst wandert die Grundlinie der Beschriftung,
   sobald ein Untertitel zweizeilig umbricht. Genau das passierte auf
   dem Handy: „Saison-Miete" stand 22 px höher als „tageweise". */
/* Subgrid, damit BEIDE Säulen dieselben drei Reihen teilen. Ohne das ist
   jede Säule ihr eigenes Grid: bricht links der Untertitel dreizeilig und
   rechts zweizeilig um, stehen Zahl, Balkenfuß und Beschriftung nicht mehr
   auf einer Linie — auf dem Handy sprang die Grundlinie um 22 px. */
.sr2-saeule{
  display:grid;grid-row:1 / -1;grid-template-rows:subgrid;
  justify-items:center;gap:10px;
}
@supports not (grid-template-rows: subgrid){
  .sr2-saeule{grid-row:auto;grid-template-rows:auto 1fr auto}
  .sr2-fuss{min-height:64px}
}
.sr2-wert{
  align-self:end;
  font-family:var(--disp);font-weight:800;font-size:clamp(1.35rem,3.2vw,2rem);
  color:var(--soft);font-variant-numeric:tabular-nums;
  transition:color .3s var(--ease-out);
}
.sr2-bar{
  align-self:end;width:min(100%,132px);height:168px;display:flex;align-items:flex-end;
  border-radius:10px 10px 3px 3px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent);
}
.sr2-bar i{
  display:block;width:100%;height:var(--h,0%);min-height:4px;
  border-radius:9px 9px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 30%,
             rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  transition:height .55s var(--ease-out),background .35s var(--ease-out),
             box-shadow .35s var(--ease-out);
}
/* Wer gewinnt, bekommt Farbe — der andere bleibt Glas. Das liest man in
   einem Blick, ohne die Zahlen zu vergleichen. */
.sr2-saeule.gewinnt .sr2-bar i{
  background:linear-gradient(180deg,#b6dcc2,var(--pine) 45%,rgba(127,169,140,.5));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 44px -10px rgba(127,169,140,.75);
}
.sr2-saeule.gewinnt .sr2-wert{color:var(--pine)}
.sr2-fuss{
  display:block;text-align:center;font-size:.8rem;color:var(--soft);
  line-height:1.4;padding-top:4px;
}
.sr2-fuss b{display:block;color:var(--text);font-weight:650;font-size:.86rem}
.sr2-fuss em{display:block;font-style:normal;margin-top:2px;font-size:.74rem}

/* Die Klammer in der Mitte: was der Unterschied ausmacht. */
/* Sitzt in der mittleren Reihe — auf Höhe der Balken, nicht darunter.
   Ohne die ausdrückliche Reihe legte das Grid sie in eine neue Zeile
   unter die Säulen, wo sie beziehungslos herumstand. */
.sr2-diff{
  grid-column:2;grid-row:2;align-self:center;
  display:flex;align-items:center;justify-content:center;
}
.sr2-diff span{
  display:inline-block;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);background:rgba(0,0,0,.35);
  font-family:var(--disp);font-weight:800;font-size:clamp(.8rem,2vw,1rem);
  color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:color .3s var(--ease-out),border-color .3s var(--ease-out),
             background .3s var(--ease-out);
}
.sr2-diff.gut span{color:var(--pine);border-color:rgba(127,169,140,.5);
  background:rgba(127,169,140,.13)}
.sr2-diff.leer{opacity:0}

/* ---------------- Fazit ---------------- */
.sr2-fazit{
  margin:clamp(18px,2.5vw,26px) 0 12px;padding:16px 18px;border-radius:14px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  border-left:3px solid var(--soft);font-size:.92rem;line-height:1.6;
  max-width:66ch;   /* das Fazit lief über 158 Zeichen je Zeile */
  transition:border-color .3s var(--ease-out),background .3s var(--ease-out);
}
.sr2-fazit.gut{border-left-color:var(--pine);background:rgba(127,169,140,.10)}
.sr2-fazit b{color:var(--snow)}
.sr2-fazit.gut b{color:var(--pine)}

/* ---------------- Kipp-Achse ---------------- */
.sr2-achse{margin:18px 0 16px}
.sr2-bahn{
  position:relative;height:6px;border-radius:999px;
  background:rgba(255,255,255,.07);margin-bottom:7px;
}
.sr2-bahn i{
  display:block;height:100%;border-radius:999px;background:var(--pine);
  transition:width .55s var(--ease-out);
}
/* Die Marke sitzt auf dem Kipp-Punkt — sichtbar auch dort, wo der
   gefüllte Teil sie überholt hat. */
.sr2-bahn b{
  position:absolute;top:50%;width:2px;height:16px;margin-left:-1px;
  transform:translateY(-50%);background:var(--snow);border-radius:2px;
  box-shadow:0 0 0 3px rgba(10,16,23,.85);
  transition:left .55s var(--ease-out);
}
.sr2-achse-lbl{
  display:flex;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;
  font-size:.74rem;color:var(--soft);line-height:1.4;
}
.sr2-achse-lbl span:first-child{color:var(--text);font-weight:600}

@media (prefers-reduced-motion:reduce){
  .sr2-bar i,.sr2-bahn i,.sr2-bahn b,.sr2-diff span,.sr2-chips button,.sr2-fazit{transition:none}
}
@media (max-width:520px){
  .sr2-buehne{gap:8px;padding:0 0 4px}
  .sr2-bar{height:132px;width:min(100%,104px)}
  .sr2-fuss{font-size:.74rem}
  .sr2-fuss b{font-size:.8rem}
  .sr2-diff span{padding:5px 9px;font-size:.78rem}
}

/* Der Regler trug den blauen Systemakzent mitten im grünen Abschnitt. */
.sr2-stepper input[type=range]{-webkit-appearance:none;appearance:none;
  height:44px;background:transparent;cursor:pointer}
.sr2-stepper input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:999px;background:rgba(255,255,255,.14)}
.sr2-stepper input[type=range]::-moz-range-track{
  height:4px;border-radius:999px;background:rgba(255,255,255,.14)}
.sr2-stepper input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--pine);border:2px solid #0A1017;margin-top:-5.5px;
  box-shadow:0 0 0 1px rgba(127,169,140,.6)}
.sr2-stepper input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:var(--pine);
  border:2px solid #0A1017;box-shadow:0 0 0 1px rgba(127,169,140,.6)}
.sr2-stepper input[type=range]:focus-visible{outline:2px solid var(--ice);outline-offset:3px}

@media (max-width:700px){
  /* Fünf Chips untereinander sprengten die halbe Bildschirmhöhe.
     Als Band mit Schnappen bleibt die Auswahl eine Zeile hoch. */
  .sr2-chips{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:6px;margin:0 calc(var(--sr2-rand,0px) * -1);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .sr2-chips::-webkit-scrollbar{display:none}
  .sr2-chips button{flex:0 0 auto;scroll-snap-align:start}
  .sr2-steuer{gap:14px}
  .sr2-grp--sw{justify-content:space-between}
  .sr2-stepper{width:100%;justify-content:space-between}
  .sr2-stepper input[type=range]{flex:1;width:auto;min-width:70px}
}