/* StaufenRent Preisrechner — Variante C (Zeitachse) + Kalender K3 (App-Stil).
   Entschieden von David 2026-07-10 (Mockups: docs/preisrechner-demos/).
   Nutzt die Seiten-Tokens (--gold, --card, ...) mit Fallbacks auf den Mainpage-Look.
   Geladen von: rs3.html, vw-crafter-mieten.html, peugeot-boxer-mieten.html, preisrechner.html */

.sr-calc{
  --c-gold: var(--gold, #C4922A);
  --c-card: var(--card, #1D1D1D);
  --c-card2: var(--card2, #242424);
  --c-line: var(--border2, rgba(255,255,255,.07));
  --c-muted: var(--muted, #5C5C5C);
  --c-soft: var(--soft, #9A9A9A);
  --c-white: var(--white, #F4F0E8);
  --c-gold-dim: color-mix(in srgb, var(--c-gold) 14%, transparent);
  margin-top:2.5rem;
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:16px;
  padding:2rem;
  font-family:'Outfit',system-ui,sans-serif;
  color:var(--c-white);
  text-align:left;
}
@supports not (color: color-mix(in srgb, red 10%, transparent)){
  .sr-calc{--c-gold-dim:rgba(196,146,42,.14)}
}
.sr-calc *{box-sizing:border-box}
.sr-calc button:focus-visible,.sr-calc a:focus-visible{outline:2px solid var(--c-gold);outline-offset:2px}

/* Layout: links Kalender/Zeitachse/Extras, rechts sticky Summe */
.sr-c{display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start}
.sr-stack{display:flex;flex-direction:column;gap:24px}

/* Felder / Chips */
.sr-field label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-muted);margin-bottom:7px;font-weight:600}
.sr-chips{display:flex;flex-wrap:wrap;gap:8px}
.sr-chip{background:transparent;border:1px solid var(--c-line);color:var(--c-soft);
  border-radius:8px;padding:9px 13px;cursor:pointer;font:500 13px 'Outfit',sans-serif;
  min-height:44px;transition:.16s}
.sr-chip:hover{color:var(--c-white)}
.sr-chip[aria-pressed="true"]{border-color:var(--c-gold);color:var(--c-gold);background:var(--c-gold-dim)}
.sr-cta{display:block;width:100%;text-align:center;text-decoration:none;cursor:pointer;
  background:var(--c-gold);color:#0D0D0F;font:700 14px/1 'Outfit',sans-serif;letter-spacing:.04em;
  padding:16px;border-radius:10px;border:0;min-height:48px;transition:.16s}
.sr-cta:hover{filter:brightness(1.12)}
.sr-cta.ghost{background:transparent;color:var(--c-gold);border:1px solid var(--c-gold);margin-top:10px}
.sr-hint{color:var(--c-muted);font-size:11.5px;margin-top:12px;line-height:1.5}

/* Monatskalender — K3 App-Stil (gruen frei / rot belegt / gold heute+Auswahl) */
.sr-cal{border:1px solid var(--c-line);border-radius:14px;padding:20px 18px 16px;background:var(--c-card2)}
.sr-cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.sr-cal-head .t{font-family:'Bebas Neue',sans-serif;font-size:21px;font-weight:400;
  color:var(--c-white);letter-spacing:.06em}
.sr-cal-nav{display:flex;gap:8px}
.sr-cal-nav button{width:34px;height:34px;border-radius:50%;border:1px solid var(--c-line);
  background:transparent;color:var(--c-white);font:400 17px/1 'Outfit',sans-serif;cursor:pointer;transition:.16s}
.sr-cal-nav button:hover:not(:disabled){border-color:var(--c-gold);color:var(--c-gold)}
.sr-cal-nav button:disabled{opacity:.25;cursor:default}
.sr-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px}
.sr-cal-dow span{text-align:center;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-muted);padding:4px 0}
.sr-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.sr-cal-cell{display:flex;align-items:center;justify-content:center;position:relative;padding:0;
  min-height:46px;border-radius:6px;background:rgba(39,174,96,.10);border:0;
  font:500 13.5px 'Outfit',sans-serif;color:var(--c-white);font-variant-numeric:tabular-nums}
button.sr-cal-cell{cursor:pointer;transition:background .14s, box-shadow .14s, color .14s}
button.sr-cal-cell:hover{box-shadow:inset 0 0 0 1.5px var(--c-gold)}
.sr-cal-cell.empty{background:none}
.sr-cal-cell.disabled{color:var(--c-muted);opacity:.3;background:none}
.sr-cal-cell.we{color:var(--c-gold)}
.sr-cal-cell.busy{background:rgba(192,57,43,.22);color:#E0776F;text-decoration:line-through}
.sr-cal-cell.today{box-shadow:inset 0 0 0 1.5px var(--c-gold)}
.sr-cal-cell.in-range{background:color-mix(in srgb, var(--c-gold) 34%, transparent);color:var(--c-white)}
.sr-cal-cell.range-start,.sr-cal-cell.range-end{background:var(--c-gold);color:#0D0D0F;font-weight:700}
@supports not (color: color-mix(in srgb, red 10%, transparent)){
  .sr-cal-cell.in-range{background:rgba(196,146,42,.34)}
}
.sr-legend{display:flex;gap:16px;margin-top:14px;font-size:11px;color:var(--c-muted);flex-wrap:wrap}
.sr-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.sr-legend .lg-free{background:rgba(39,174,96,.35)}
.sr-legend .lg-we{background:var(--c-gold-dim);box-shadow:inset 0 0 0 1px var(--c-gold)}
.sr-legend .lg-busy{background:rgba(192,57,43,.5)}
.sr-legend .lg-sel{background:var(--c-gold)}
.sr-cal-sel{margin-top:10px;font-size:13px;color:var(--c-muted)}
.sr-cal-sel b{color:var(--c-gold);font-weight:600}

/* Zeitachse (Preis-Erklaerung) */
.sr-axis{border:1px solid var(--c-line);border-radius:12px;padding:18px;background:var(--c-card2)}
.sr-axis .a-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.sr-axis .a-head .t{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-muted);font-weight:600}
.sr-axis .a-head .p{font-size:12.5px;color:var(--c-gold);min-height:18px}
.sr-days{display:flex;gap:4px;align-items:flex-end;overflow-x:auto;padding-bottom:4px}
.sr-day{flex:0 0 auto;width:38px;text-align:center}
.sr-day .bar{height:44px;border-radius:5px;background:rgba(255,255,255,.06);
  display:flex;align-items:flex-end;justify-content:center}
.sr-day .bar em{display:block;width:100%;border-radius:5px;background:rgba(255,255,255,.2);transition:.3s}
.sr-day.we .bar em,.sr-day.pkg .bar em{background:var(--c-gold)}
.sr-day.pkg .bar em{filter:brightness(1.15)}
.sr-day .dw{font-size:10px;color:var(--c-muted);margin-top:6px;text-transform:uppercase}
.sr-day.we .dw{color:var(--c-gold)}
.sr-empty{color:var(--c-muted);font-size:13px;padding:10px 0}

/* Extras */
.sr-extras{display:flex;flex-direction:column;gap:8px}
.sr-ex-row{display:flex;align-items:center;gap:10px;border:1px solid var(--c-line);
  border-radius:8px;padding:7px 12px;min-height:44px;background:transparent;
  color:inherit;font:inherit;text-align:left;transition:.16s;width:100%}
.sr-ex-row .ex-l{flex:1;font-size:13.5px;color:var(--c-white)}
.sr-ex-row .ex-p{font-size:12.5px;color:var(--c-muted);white-space:nowrap}
.sr-ex-row.on{border-color:var(--c-gold);background:var(--c-gold-dim)}
.sr-ex-row.on .ex-p{color:var(--c-gold)}
button.sr-ex-row{cursor:pointer}
button.sr-ex-row:hover{border-color:var(--c-gold)}
.sr-step{display:flex;align-items:center;gap:6px}
.sr-step button{width:32px;height:32px;border-radius:7px;border:1px solid var(--c-line);
  background:transparent;color:var(--c-white);font:600 16px/1 'Outfit',sans-serif;cursor:pointer;transition:.16s}
.sr-step button:hover{border-color:var(--c-gold);color:var(--c-gold)}
.sr-step b{min-width:18px;text-align:center;font:600 14px 'Outfit',sans-serif;color:var(--c-white)}

/* Summe (sticky rechts) */
.sr-sum{background:var(--c-card2);border:1px solid var(--c-line);border-radius:12px;padding:24px;
  position:sticky;top:90px}
.sr-sum .s-lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
.sr-sum .s-val{font-family:'Bebas Neue',sans-serif;font-size:68px;line-height:.9;margin:10px 0 2px;
  color:var(--c-white);font-variant-numeric:tabular-nums}
.sr-sum .s-val .eur{font-size:30px;color:var(--c-gold);margin-left:2px}
.sr-sum .s-pkg{color:var(--c-gold);font-size:13px;min-height:20px}
.sr-rows{margin:20px 0 22px;border-top:1px solid var(--c-line);padding-top:16px;
  display:flex;flex-direction:column;gap:9px}
.sr-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--c-muted)}
.sr-row b{color:var(--c-white);font-weight:500;font-variant-numeric:tabular-nums}

@media (max-width:860px){
  .sr-c{grid-template-columns:1fr}
  .sr-calc{padding:1.4rem}
  .sr-sum{position:static}
}
@media (prefers-reduced-motion:reduce){.sr-calc *{transition:none!important}}