/* ============================================================
   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}
}

/* Klickbare Preiszellen: Wer den Betrag ansieht, will meist den
   Termin dazu. Der Link liegt UM die Zahl, das Aussehen bleibt —
   nur die gepunktete Linie darunter verrät, dass hier etwas passiert.
   Ein durchgehend blauer Preis hätte wie ein Sonderangebot gewirkt. */
.eur--tun{
  color:inherit;
  /* text-decoration statt border-bottom: der Link ist ein Block über
     die ganze Zelle (damit die Tippfläche stimmt), ein Rahmen zöge
     die Linie deshalb über die volle Breite und sähe aus wie ein
     Zeilentrenner. Die Unterstreichung folgt dem Text. */
  text-decoration:underline dotted;
  text-decoration-color:rgba(143,211,244,.5);
  text-underline-offset:4px;
  transition:color .25s var(--ease),text-decoration-color .25s;
}
.eur--tun:hover,.eur--tun:focus-visible{color:var(--ice);text-decoration-color:var(--ice)}
.eur--tun:focus-visible{outline:2px solid var(--ice);outline-offset:-3px;border-radius:6px}
/* Die ganze Zelle ist die Tippfläche, nicht nur die drei Ziffern. */
.tbl td:has(.eur--tun){padding:0}
.tbl td .eur--tun{display:block;padding:14px 16px;min-height:44px;box-sizing:border-box}