/* ============================================================
   STARTHAUS — sale.css
   American Sale: Rabatt-Leiter, Rechner, Countdown.
   Die Seite hat eine eigene Wärme — Flut statt Eis, weil es hier
   um Dringlichkeit geht und nicht um Schnee.
   ============================================================ */

/* ---------------- Kopf ---------------- */
.hero--sale{min-height:clamp(600px,86svh,860px)}
.hero--sale .hero-bg img{filter:saturate(.72) contrast(1.06) brightness(.52)}
.sale-glut{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(58% 46% at 50% 34%,rgba(255,178,92,.30),transparent 68%),
    radial-gradient(70% 60% at 50% 100%,rgba(10,16,23,.94),transparent 62%),
    linear-gradient(180deg,rgba(10,16,23,.72),transparent 34%,rgba(10,16,23,.92));
}
.sale-logo{
  display:block;width:min(620px,86vw);margin:clamp(18px,3vw,30px) 0 clamp(14px,2vw,24px);
  filter:drop-shadow(0 18px 60px rgba(255,178,92,.34));
}
.sale-logo img{width:100%;height:auto;display:block}
.hero--sale .lead{max-width:38ch}
.sale-tele dd em{color:var(--flut)}

/* ---------------- Rabatt-Leiter ---------------- */
.sale{margin-top:clamp(28px,3.5vw,48px)}
.sale-leiter{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.4vw,20px);
}
.sale-tag{
  position:relative;overflow:hidden;text-align:left;cursor:pointer;
  display:grid;gap:6px;align-content:start;
  padding:clamp(18px,2.2vw,28px);border-radius:var(--r-l);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--line);color:var(--soft);
  transition:border-color .35s var(--ease),background .35s var(--ease),
             transform .35s var(--ease-out),box-shadow .45s var(--ease);
}
.sale-tag:hover{border-color:var(--line-2);transform:translateY(-3px)}
.sale-tag[aria-selected="true"]{
  border-color:rgba(255,178,92,.55);color:var(--snow);
  background:linear-gradient(160deg,rgba(255,178,92,.16),rgba(255,178,92,.03));
  box-shadow:0 24px 70px -34px rgba(255,178,92,.75);
}
.st-wt{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ice);
}
.sale-tag[aria-selected="true"] .st-wt{color:var(--flut)}
.st-datum{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--dim)}
.st-proz{display:flex;align-items:baseline;gap:.1em;margin-top:6px}
.st-proz i{
  font-style:normal;font-family:var(--disp);font-weight:800;
  font-variation-settings:'wdth' 118;
  font-size:clamp(2.6rem,6vw,4.4rem);line-height:.9;color:var(--snow);
  font-variant-numeric:tabular-nums;
}
/* .42em bezog sich auf die Kastenschrift, nicht auf die Zahl daneben —
   das Prozentzeichen kam mit 6,7 px heraus. Jetzt eigene Größe. */
.st-proz em{font-style:normal;font-family:var(--disp);font-weight:800;
  font-size:clamp(1.1rem,2.4vw,1.8rem);color:var(--flut);line-height:1}
.st-bar{display:block;height:4px;border-radius:4px;background:rgba(196,214,230,.12);margin-top:10px;overflow:hidden}
.st-bar i{
  display:block;height:100%;width:var(--h,0);border-radius:4px;
  background:linear-gradient(90deg,var(--ice),var(--flut));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease-out);
}
.sale-tag.gefuellt .st-bar i{transform:scaleX(1)}
@media(max-width:700px){
  .sale-leiter{grid-template-columns:1fr}
  .sale-tag{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 16px}
  .st-proz{grid-row:1/3;grid-column:2;margin:0}
  .st-bar{grid-column:1/3}
}

/* ---------------- Rechner ---------------- */
.sale-rechner{
  margin-top:clamp(18px,2.4vw,32px);
  display:grid;grid-template-columns:minmax(280px,.85fr) 1.15fr;
  gap:clamp(18px,2.4vw,34px);
  padding:clamp(20px,2.6vw,34px);border-radius:var(--r-l);
  background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  border:1px solid var(--line);
}
@media(max-width:880px){.sale-rechner{grid-template-columns:1fr}}
.sr-eingabe label{
  display:block;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ice);margin-bottom:12px;
}
.sr-feld{position:relative}
.sr-feld input{
  width:100%;appearance:none;-moz-appearance:textfield;
  background:rgba(6,10,15,.55);border:1px solid var(--line-2);border-radius:14px;
  padding:18px 52px 18px 18px;color:var(--snow);
  font-family:var(--disp);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.3rem);
  font-variant-numeric:tabular-nums;line-height:1;
  transition:border-color .3s,box-shadow .3s;
}
.sr-feld input::-webkit-outer-spin-button,
.sr-feld input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sr-feld input:focus{outline:none;border-color:rgba(255,178,92,.6);box-shadow:0 0 0 4px rgba(255,178,92,.13)}
.sr-eur{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-family:var(--disp);font-weight:800;font-size:1.5rem;color:var(--dim);pointer-events:none;
}
.sr-schnell{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.sr-schnell button{
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;
  padding:9px 13px;min-height:44px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--soft);
  transition:border-color .25s,color .25s,background .25s;
}
.sr-schnell button:hover{border-color:var(--line-2);color:var(--snow)}
.sr-schnell button[aria-pressed="true"]{
  border-color:rgba(255,178,92,.5);color:var(--flut);background:rgba(255,178,92,.1);
}
.sr-hinweis{font-size:.78rem;color:var(--dim);margin-top:14px;line-height:1.55;max-width:34ch}

.sr-zeilen{display:grid;gap:7px;margin-bottom:18px}
.srz{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:11px 14px;border-radius:12px;
  border:1px solid transparent;background:rgba(255,255,255,.022);
  transition:border-color .3s,background .3s,opacity .3s;
}
.srz.an{border-color:rgba(255,178,92,.4);background:rgba(255,178,92,.09)}
.srz-t{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--soft)}
.srz.an .srz-t{color:var(--flut)}
.srz-bahn{height:3px;border-radius:3px;background:rgba(196,214,230,.1);overflow:hidden}
.srz-bahn i{display:block;height:100%;border-radius:3px;background:var(--ice);
  transition:width .7s var(--ease-out),background .3s}
.srz.an .srz-bahn i{background:var(--flut)}
.srz-p{font-family:var(--disp);font-weight:800;font-size:1.02rem;color:var(--snow);font-variant-numeric:tabular-nums}

.sr-gross{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  padding-top:18px;border-top:1px solid var(--line);
}
.sr-lbl{
  width:100%;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ice);
}
.sr-wert{display:flex;align-items:baseline;gap:.12em}
.sr-wert b{
  font-family:var(--disp);font-weight:800;font-variation-settings:'wdth' 115;
  font-size:clamp(2.6rem,6vw,4rem);line-height:1;color:var(--snow);
  font-variant-numeric:tabular-nums;
}
.sr-wert em{font-style:normal;font-family:var(--disp);font-weight:800;font-size:1.5rem;color:var(--flut)}
.sr-spar{
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--pine);background:rgba(127,169,140,.13);
  border:1px solid rgba(127,169,140,.34);border-radius:999px;padding:7px 13px;
}

.sr-risiko{margin-top:20px}
.srr-kopf{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);
}
.srr-kopf span:last-child{color:var(--snow)}
.srr-bahn{height:6px;border-radius:6px;background:rgba(196,214,230,.1);overflow:hidden}
/* Der Balken zeigt, WIE VIEL NOCH DA IST — nicht, wie viel weg ist.
   Sonst stand ein fast leerer Balken neben „fast vollständig". */
.srr-bahn i{
  display:block;height:100%;width:60%;border-radius:6px;
  background:var(--sr-farbe,var(--pine));
  transition:width .7s var(--ease-out),background .5s var(--ease);
}
.srr-fein{font-size:.74rem;color:var(--dim);margin-top:10px;line-height:1.5;max-width:62ch}

/* ---------------- Termin und Countdown ---------------- */
.sale-termin{
  margin-top:clamp(20px,2.6vw,34px);
  display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(20px,3vw,44px);align-items:center;
  padding:clamp(22px,3vw,40px);border-radius:var(--r-l);
  background:linear-gradient(150deg,rgba(255,178,92,.11),rgba(255,255,255,.015));
  border:1px solid rgba(255,178,92,.26);
}
@media(max-width:820px){.sale-termin{grid-template-columns:1fr}}
.sat-datum{
  font-family:var(--disp);font-weight:800;font-variation-settings:'wdth' 108;
  font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.05;color:var(--snow);margin-top:12px;
}
.sat-regel{font-size:.88rem;color:var(--soft);line-height:1.6;margin-top:12px;max-width:52ch}
.sat-rechts{display:grid;gap:14px;justify-items:start}
@media(min-width:821px){.sat-rechts{justify-items:end}}

.countdown{display:flex;gap:8px;flex-wrap:wrap}
.cd-teil{
  min-width:66px;text-align:center;padding:11px 10px 9px;border-radius:12px;
  background:rgba(6,10,15,.5);border:1px solid var(--line-2);
}
.cd-teil b{
  display:block;font-family:var(--disp);font-weight:800;font-size:1.5rem;line-height:1;
  color:var(--snow);font-variant-numeric:tabular-nums;
}
.cd-teil span{
  display:block;margin-top:5px;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--dim);
}
.countdown.laeuft .cd-teil{border-color:rgba(255,178,92,.5)}
.cd-jetzt{
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#06222f;background:var(--flut);border-radius:999px;padding:11px 18px;
}
@media(max-width:560px){
  .cd-teil{min-width:58px}
  .cd-teil b{font-size:1.25rem}
  .cd-teil span{font-size:11px;letter-spacing:.1em}
}