/* ==========================================================================
   Sanquell · Bedarfsrechner
   Eigenständig, mit Absicht.

   Der Rechner steht nicht nur auf der Kategorieseite, sondern auch auf
   Landingpages, die ein eigenes Designsystem mitbringen — die Hotelseite
   benutzt dieselbe Vorsilbe „sq“ für ganz andere Werte: .sq{--sq-ink:#0E1519},
   eigene .sq-step, eigene .sq-card. Würde der Rechner die Marken-Variablen aus
   sq-design.css erben, hinge sein Aussehen davon ab, welches Stylesheet zuletzt
   geladen wurde, und umgekehrt würde sq-design.css die Landingpage umfärben.

   Deshalb: eigene Klassen unter .sq-bedarf__, eigene Variablen unter --sqb-,
   nichts Geteiltes. Die Werte sind dieselben wie in sq-design.css; ändert sich
   dort die Marke, gehört sie hier nachgezogen. Das ist der Preis dafür, dass
   der Rechner überall gleich aussieht und nirgends etwas anfasst.
   ========================================================================== */

.sq-bedarf{
  --sqb-paper:#FFFFFF;
  --sqb-flaeche:#F7F7F7;
  --sqb-linie:#E2E2E2;
  --sqb-linie-2:#EFEFEF;
  --sqb-text:#454545;
  --sqb-text-2:#5C5C5C;
  --sqb-text-3:#828282;
  --sqb-kopf:#060202;
  --sqb-titel:#12172A;
  --sqb-blau:#2578C2;
  --sqb-blau-tief:#1B5C97;
  --sqb-gold:#8C6A22;
  --sqb-rot:#DE0000;
  --sqb-rot-tief:#B80000;
  --sqb-sans:"Sofia Sans","Sofia Pro",-apple-system,"Segoe UI",Arial,sans-serif;
  --sqb-serif:"Zilla Slab",Georgia,"Times New Roman",serif;
  --sqb-zahl:Inter,-apple-system,"Segoe UI",Arial,sans-serif;

  font-family:var(--sqb-sans);
  color:var(--sqb-text);
  padding:3rem 0;
}

.sq-bedarf *,.sq-bedarf *::before,.sq-bedarf *::after{box-sizing:border-box}
.sq-bedarf a{color:inherit;text-decoration:none}
.sq-bedarf [hidden]{display:none!important}
.sq-bedarf :focus-visible{outline:2px solid var(--sqb-blau);outline-offset:2px}

/* ---------- Kopf ---------- */
.sq-bedarf__kopf{display:flex;flex-direction:column;gap:.65rem;max-width:50rem}
.sq-bedarf__eyebrow{display:block;font-family:var(--sqb-zahl);font-size:.8rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sqb-gold)}
.sq-bedarf__titel{font-family:var(--sqb-serif);font-size:clamp(1.25rem,2.2vw,1.5rem);
  font-weight:600;text-transform:uppercase;line-height:1.14;letter-spacing:-.015em;
  color:var(--sqb-titel);margin:0;text-wrap:balance}
.sq-bedarf__lede{font-size:1.05rem;line-height:1.65;color:var(--sqb-text-2);max-width:62ch;margin:0}

/* ---------- Aufteilung ---------- */
.sq-bedarf__split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:2.5rem;align-items:start;margin-top:1.75rem}
@media (max-width:900px){.sq-bedarf__split{grid-template-columns:1fr;gap:1.5rem}}

/* ---------- Zeilen ---------- */
.sq-bedarf__zeilen{border-top:1px solid var(--sqb-linie-2)}
.sq-bedarf__zeile{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  padding:.95rem 0;border-bottom:1px solid var(--sqb-linie-2);flex-wrap:wrap}
/* Der Text schrumpft, der Zähler bleibt rechts stehen — sonst rutscht er bei
   langen Bezeichnungen in die nächste Zeile und die Spalte franst aus. */
.sq-bedarf__zeile>div:first-child{flex:1 1 14rem;min-width:0}
.sq-bedarf__zeile b{display:block;font-size:1.02rem;font-weight:700;color:var(--sqb-kopf);
  line-height:1.3}
.sq-bedarf__zeile em{display:block;font-style:normal;font-size:.85rem;line-height:1.5;
  color:var(--sqb-text-3);margin-top:.2rem}
.sq-bedarf__zeile em a{color:var(--sqb-text-2);text-decoration:underline;text-underline-offset:2px}
.sq-bedarf__zeile em a:hover{color:var(--sqb-blau-tief)}
.sq-bedarf__zeile .amount,.sq-bedarf__zeile bdi{font-family:var(--sqb-zahl);white-space:nowrap}

/* ---------- Zähler ---------- */
.sq-bedarf__step{display:flex;align-items:center;border:1px solid var(--sqb-linie);
  flex:none;margin-left:auto}
.sq-bedarf__step button{width:40px;height:44px;border:0;background:var(--sqb-flaeche);
  color:var(--sqb-kopf);font-family:var(--sqb-zahl);font-size:1.15rem;line-height:1;
  cursor:pointer;transition:background .15s}
.sq-bedarf__step button:hover{background:var(--sqb-linie-2)}
.sq-bedarf__inp{width:68px;height:44px;border:0;border-left:1px solid var(--sqb-linie);
  border-right:1px solid var(--sqb-linie);text-align:center;font-family:var(--sqb-zahl);
  font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--sqb-kopf);
  background:var(--sqb-paper);-moz-appearance:textfield;appearance:textfield}
.sq-bedarf__inp::-webkit-outer-spin-button,
.sq-bedarf__inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sq-bedarf__inp:focus{outline:none;box-shadow:inset 0 0 0 2px var(--sqb-blau)}

/* ---------- Aufstellung ---------- */
.sq-bedarf__summe{border:1px solid var(--sqb-linie);background:var(--sqb-flaeche);
  padding:1.35rem;display:flex;flex-direction:column;gap:.9rem;position:sticky;top:5.5rem}
@media (max-width:900px){.sq-bedarf__summe{position:static}}

.sq-bedarf__zahl{display:flex;align-items:baseline;gap:.65rem;margin:0}
.sq-bedarf__zahl>b{font-family:var(--sqb-zahl);font-size:2.4rem;font-weight:600;line-height:1;
  letter-spacing:-.03em;color:var(--sqb-kopf);font-variant-numeric:tabular-nums}
.sq-bedarf__zahl>span{font-size:.85rem;line-height:1.45;color:var(--sqb-text-3)}
.sq-bedarf__zahl>span b{font-family:var(--sqb-zahl);color:var(--sqb-kopf);font-weight:600}

.sq-bedarf__liste{display:flex;flex-direction:column;gap:.45rem;font-size:.88rem;
  border-top:1px solid var(--sqb-linie);padding-top:.8rem}
.sq-bedarf__liste>span{display:flex;justify-content:space-between;gap:1rem;color:var(--sqb-text-2)}
.sq-bedarf__liste b{font-family:var(--sqb-zahl);color:var(--sqb-kopf);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sq-bedarf__liste [data-sq-menge]{font-family:var(--sqb-zahl);color:var(--sqb-text-3)}
.sq-bedarf__gesamt{border-top:1px solid var(--sqb-linie);padding-top:.55rem;margin-top:.15rem}
.sq-bedarf__gesamt span{font-weight:700;color:var(--sqb-kopf)}
.sq-bedarf__gesamt b{font-size:1.25rem}
.sq-bedarf__liste--termine{font-size:.85rem}

/* ---------- Knopf und Fußnoten ---------- */
.sq-bedarf__btn{display:block;width:100%;background:var(--sqb-rot);color:#fff;
  border:1px solid var(--sqb-rot);font-family:var(--sqb-sans);font-size:.92rem;
  font-weight:800;letter-spacing:.01em;padding:.85rem 1.5rem;text-align:center;
  cursor:pointer;border-radius:0;transition:background .15s,border-color .15s}
.sq-bedarf__btn:hover{background:var(--sqb-rot-tief);border-color:var(--sqb-rot-tief);color:#fff}
.sq-bedarf__fuss{font-size:.86rem;line-height:1.5;color:var(--sqb-text-3);margin:0}
.sq-bedarf__fuss--warnung{color:var(--sqb-rot-tief)}