/* ============================================================
   Stark Bau- und Mietservice · Mietpreis-Rechner
   Eine Karte, zwei Hälften: links die Eingaben auf Weiß,
   rechts der Preis auf Ink. Gemeinsam genutzt von index.html
   und leistungen/minibagger-mieten.html.
   Setzt die Tokens der jeweiligen Seite voraus
   (--ink, --accent, --line, --bg, --surface, --num, --ease).
   Alle Regeln sind mit .rechner / .rech- präfixiert, damit sie
   weder mit dem Kontaktformular noch mit .step der
   Leistungsseiten kollidieren.
   ============================================================ */

/* ---------- Überschrift über der Karte ---------- */
.rech-head{ max-width:1040px; margin-inline:auto; margin-bottom:1.25rem; }
.rech-head h2, .rech-head h3{
  font-size:clamp(1.3rem,3vw,1.6rem); line-height:1.1;
  font-variation-settings:'wdth' 112,'wght' 700; text-transform:uppercase; letter-spacing:-0.005em;
}

/* ---------- Ohne JavaScript ---------- */
.rech-nojs{
  max-width:1040px; margin-inline:auto;
  border:1px solid var(--line); border-radius:8px; padding:1rem 1.15rem;
  color:var(--ink-muted); font-size:0.95rem;
}
.rech-nojs a{ text-decoration:underline; text-underline-offset:3px; }
.rechner{ display:none; }
.js .rech-nojs{ display:none; }
.js .rechner{ display:grid; }

/* ---------- Karte ---------- */
/* Kein overflow:hidden – sonst würden die Mehrfachauswahl-Panels abgeschnitten.
   Die Rundung sitzt deshalb auf den beiden Hälften. */
.rechner{
  max-width:1040px; margin-inline:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow);
  grid-template-columns:1fr;
}
.rech-in{ border-radius:10px 10px 0 0; }
.rech-out{ border-radius:0 0 10px 10px; }

/* ---------- Linke Hälfte ---------- */
.rech-in{ background:var(--surface); padding:1.15rem; min-width:0; }
.rech-kicker{
  display:block; font-variation-settings:'wdth' 80,'wght' 600; text-transform:uppercase;
  letter-spacing:0.18em; font-size:0.6875rem; color:var(--accent); margin-bottom:0.9rem;
}
.rech-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.7rem 0.9rem; }
.rechner .field{ display:block; min-width:0; }
.rechner .field > label:not(.rech-check),
.rechner .field > .lbl{
  display:flex; align-items:baseline; justify-content:space-between; gap:0.5rem;
  font-variation-settings:'wdth' 85,'wght' 600; text-transform:uppercase;
  letter-spacing:0.1em; font-size:0.6875rem; color:var(--ink-muted); margin-bottom:0.3rem;
}
.rech-hint{ text-transform:none; letter-spacing:0; color:var(--accent); font-size:0.6875rem; }
.rech-hint[hidden]{ display:none; }
.rechner .field select,
.rechner .field input[type="date"]{
  width:100%; min-width:0; height:44px; min-height:44px;
  background:var(--bg); border:1px solid var(--line); border-radius:6px;
  padding:0 0.7rem; font-size:0.95rem; color:var(--ink);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.rechner .field select{
  appearance:none; -webkit-appearance:none; padding-right:2.1rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2315161A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 0.8rem center;
}
.rechner .field select:hover,
.rechner .field input[type="date"]:hover{ border-color:var(--stone); }
.rechner .field select:focus,
.rechner .field input[type="date"]:focus{
  background:var(--surface); border-color:var(--accent);
  outline:2px solid var(--accent); outline-offset:-1px;
}
.rechner .field select:disabled{ opacity:0.5; cursor:not-allowed; }

/* ---------- Mehrfachauswahl (Zubehör, Extras) ----------
   Auslöser sieht aus wie die anderen Controls, das Panel liegt
   absolut darüber und ändert die Kartenhöhe nicht. */
.ms{ position:relative; }
.ms-trigger{
  display:flex; align-items:center; width:100%; min-width:0;
  height:44px; min-height:44px; padding:0 2.1rem 0 0.7rem;
  background:var(--bg); border:1px solid var(--line); border-radius:6px;
  font-size:0.95rem; color:var(--ink); text-align:left; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2315161A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 0.8rem center;
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.ms-trigger:hover{ border-color:var(--stone); }
.ms-trigger[aria-expanded="true"]{ background-color:var(--surface); border-color:var(--accent); }
.ms-trigger:focus-visible{ outline:2px solid var(--accent); outline-offset:-1px; }
.ms-trigger:disabled{ opacity:0.5; cursor:not-allowed; }
.ms-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms-panel{
  position:absolute; top:calc(100% - 1px); left:0; right:0; z-index:30;
  background:var(--surface); border-radius:0 0 6px 6px; border:1px solid var(--line); border-top:0;
  box-shadow:0 14px 30px -16px rgba(58,48,32,0.5);
  padding:0.25rem;
  max-height:16rem; overflow-y:auto;
}
.ms-panel[hidden]{ display:none; }
.ms-row{
  display:flex; align-items:center; gap:0.6rem; min-height:40px;
  padding:0.3rem 0.5rem; border-radius:4px; cursor:pointer; position:relative;
  font-size:0.9rem;
}
.ms-row:hover{ background:var(--bg); }
/* höhere Spezifität als .field input der Seiten-Stylesheets, damit die Box
   auf beiden Seiten gleich klein bleibt und das Label den Klick übernimmt */
.rechner .ms-row input{ position:absolute; opacity:0; width:1px; height:1px; min-height:0; margin:0; padding:0; border:0; }
.ms-box{
  flex:none; width:18px; height:18px; border-radius:3px; border:2px solid var(--stone);
  position:relative; transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.ms-box::after{
  content:''; position:absolute; left:4px; top:0; width:6px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0.5); opacity:0;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.ms-row.is-checked .ms-box{ background:var(--accent); border-color:var(--accent); }
.ms-row.is-checked .ms-box::after{ opacity:1; transform:rotate(45deg) scale(1); }
.ms-row input:focus-visible ~ .ms-box{ outline:2px solid var(--accent); outline-offset:3px; }
.ms-name{ flex:1 1 auto; min-width:0; }
.ms-preis{ flex:none; font-size:0.82rem; color:var(--ink-muted); white-space:nowrap; }
.ms-meta{ flex:none; font-size:0.78rem; color:var(--ink-soft); white-space:nowrap; }
.ms-row.is-disabled{ opacity:0.45; cursor:not-allowed; }

/* Neukunden-Haken als gleich hohe Box */
.rechner .rech-check{
  display:flex; align-items:center; gap:0.6rem; height:44px; padding:0 0.7rem;
  border:1px solid var(--line); border-radius:6px; background:var(--bg);
  font-size:0.88rem; cursor:pointer; position:relative;
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.rech-check:hover{ border-color:var(--stone); }
.rechner .rech-check input{ position:absolute; opacity:0; width:1px; height:1px; min-height:0; margin:0; padding:0; border:0; }
.rech-check .check-box{
  flex:none; width:18px; height:18px; border-radius:3px; border:2px solid var(--stone);
  position:relative; transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.rech-check .check-box::after{
  content:''; position:absolute; left:4px; top:0; width:6px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0.5); opacity:0;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.rech-check.is-checked{ border-color:var(--accent); background:var(--bg-alt); }
.rech-check.is-checked .check-box{ background:var(--accent); border-color:var(--accent); }
.rech-check.is-checked .check-box::after{ opacity:1; transform:rotate(45deg) scale(1); }
.rech-check input:focus-visible ~ .check-box{ outline:2px solid var(--accent); outline-offset:3px; }

/* eine Zeile für Hinweise, Höhe immer reserviert */
.rech-msg{ min-height:1.1rem; margin-top:0.55rem; font-size:0.78rem; line-height:1.1rem; color:var(--accent); }

/* ---------- Rechte Hälfte ---------- */
.rech-out{
  background:var(--ink); color:#fff; padding:1.15rem;
  display:flex; flex-direction:column; justify-content:space-between; gap:1rem;
}
.rech-out .rech-kicker{ color:#fff; opacity:0.7; margin-bottom:0.5rem; }
.rech-price{
  font-family:var(--num); font-variant-numeric:tabular-nums; font-variation-settings:'wdth' 100,'wght' 700; color:#fff;
  font-size:clamp(2.2rem,3.4vw,2.8rem); line-height:1; letter-spacing:-0.02em;
}
.rech-price.is-empty{ color:rgba(255,255,255,0.35); }
.rech-price.is-small{ font-size:1.6rem; }
.rech-break{ font-size:0.85rem; line-height:1.35; color:rgba(255,255,255,0.72); margin-top:0.55rem; }
.rech-rule{ height:1px; background:rgba(255,255,255,0.14); margin-bottom:0.9rem; }
.rech-actions{ display:grid; grid-template-columns:1fr auto; gap:0.6rem; }
.rech-actions .btn{ min-height:46px; padding-inline:1.1rem; }
.rech-actions .btn[aria-disabled="true"],
.rech-actions .btn:disabled{ opacity:0.45; cursor:not-allowed; }
.rech-actions .btn-accent[aria-disabled="true"]:hover{ background:var(--accent); border-color:var(--accent); }
.rech-actions .btn-light[aria-disabled="true"]:hover{ background:rgba(255,255,255,0.14); color:#fff; border-color:rgba(255,255,255,0.6); }
.rech-fine{ font-size:0.78rem; line-height:1.4; color:rgba(255,255,255,0.55); margin-top:0.8rem; }

/* ---------- Bestätigung über dem Formular ---------- */
.rech-confirm{
  background:var(--bg-alt); border:1px solid var(--stone); border-radius:4px;
  padding:0.85rem 1rem; font-size:0.9rem; line-height:1.45;
}
.rech-confirm[hidden]{ display:none; }
.rech-confirm strong{ font-variation-settings:'wdth' 95,'wght' 600; }
.rech-confirm a{
  display:inline-block; margin-left:0.4rem; padding-block:0.5rem;
  text-decoration:underline; text-underline-offset:3px; color:var(--accent);
}

/* ---------- Telefon: Maschine und Rabatt über beide Spalten,
   dazwischen Von|Bis und Zubehör|Extras paarweise ---------- */
@media (max-width:819px){
  .rech-grid{ gap:0.6rem 0.8rem; }
  .rech-grid .f-maschine, .rech-grid .f-rabatt{ grid-column:1 / -1; }
  .rech-grid .f-maschine{ order:1; }
  .rech-grid .f-von{ order:2; }
  .rech-grid .f-bis{ order:3; }
  .rech-grid .f-zubehoer{ order:4; }
  .rech-grid .f-extras{ order:5; }
  .rech-grid .f-rabatt{ order:6; }
  .rech-out{ gap:0.8rem; }
}
/* sehr schmale Geräte: Datumsfelder brauchen die volle Breite,
   und die beiden Knöpfe passen nicht mehr nebeneinander */
/* Auf dem Telefon ist eine Rasterspalte zu schmal für Name + Preis:
   das Panel klappt über beide Spalten auf. */
@media (max-width:819px){
  .ms-panel{ right:auto; width:calc(200% + 0.8rem); }
  .f-extras .ms-panel{ left:auto; right:0; }
}
@media (max-width:379px){
  .rech-actions{ grid-template-columns:1fr; }
}
@media (max-width:349px){
  .rech-grid{ grid-template-columns:1fr; }
  .ms-panel{ width:100%; }
}

@media (min-width:820px){
  .js .rechner{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
  .rech-in{ padding:1.5rem 1.75rem; border-radius:10px 0 0 10px; }
  .rech-out{ padding:1.5rem 1.75rem; border-radius:0 10px 10px 0; }
}