/* ==========================================================================
   Zeitraum-Kalender der Zimmeranfrage + Feinschliff-Animationen
   Wird nach app.css und enhance.css geladen.
   ========================================================================== */

/* --- Kalender ------------------------------------------------------------- */
.cal-mount{gap:.7em}
.cal-label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#9c8b6e}
.datefields .pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Sobald der Kalender steht, sind die nativen Felder ueberfluessig.
   Das hidden-Attribut allein genuegt nicht: .f{display:flex} sticht es aus. */
.cal-mount:not(:empty) + .datefields{display:none}

.cal{
  border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(180deg,#17171a,#121214);
  overflow:hidden;
}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px;border-bottom:1px solid var(--line)}
.cal-nav{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  color:#c9c9d0;background:rgba(255,255,255,.05);border:1px solid var(--line);
  transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)}
.cal-nav svg{width:17px;height:17px}
.cal-nav:hover{background:var(--red);color:#fff;border-color:var(--red);transform:scale(1.06)}
.cal-nav:active{transform:scale(.96)}
.cal-legend{display:flex;align-items:center;gap:.6em;font-size:.74rem;color:#9c8b6e;
  text-align:center}
.cal-legend .sw{width:16px;height:10px;border-radius:3px;flex:0 0 auto;
  background:linear-gradient(90deg,var(--red),var(--red-lit))}

.cal-grids{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px);
  padding:clamp(14px,2vw,20px);
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
.cal-grids.out-left{opacity:0;transform:translateX(-14px)}
.cal-grids.out-right{opacity:0;transform:translateX(14px)}
.cal-grids.in-right{opacity:0;transform:translateX(14px)}
.cal-grids.in-left{opacity:0;transform:translateX(-14px)}

.cal-mname{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1rem;color:#fff;letter-spacing:.02em;margin-bottom:.9em;text-align:center}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:6px}
.cal-dow span{text-align:center;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:#71717a;padding-bottom:.4em}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-pad{aspect-ratio:1}

.cal-day{
  position:relative;aspect-ratio:1;border-radius:9px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1em;
  background:rgba(255,255,255,.035);color:#eee0c4;
  animation:calIn .4s var(--ease) both;
  animation-delay:calc(var(--i) * 6ms);
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
@keyframes calIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cal-day i{font-style:normal;font-size:.92rem;font-weight:500;line-height:1}
.cal-day u{text-decoration:none;font-size:.6rem;color:#9c8b6e;line-height:1;
  font-variant-numeric:tabular-nums}
.cal-day:hover:not(:disabled){background:rgba(255,255,255,.11);transform:translateY(-2px)}
.cal-day.is-off{opacity:.28;cursor:default;background:transparent}
.cal-day.no-price u{opacity:.35}

/* Spanne */
.cal-day.is-in{background:rgba(196,18,48,.2);border-radius:0}
.cal-day.is-in u{color:#d6a0ac}
.cal-day.is-start,.cal-day.is-end{
  background:var(--red);color:#fff;
  box-shadow:0 10px 26px -10px rgba(196,18,48,.95);
  animation:pop .42s var(--ease) both;
}
.cal-day.is-start u,.cal-day.is-end u{color:rgba(255,255,255,.8)}
@keyframes pop{0%{transform:scale(.82)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.cal-day.is-start{border-radius:9px 0 0 9px}
.cal-day.is-end{border-radius:0 9px 9px 0}
.cal-day.is-start.is-end{border-radius:9px}
.cal-day.is-preview{background:rgba(196,18,48,.45);color:#fff;border-radius:0 9px 9px 0}

.cal-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;padding:14px 16px;border-top:1px solid var(--line);
  background:rgba(255,255,255,.02)}
.cal-picks{display:flex;align-items:center;gap:14px}
.cal-picks .pick{min-width:112px;padding:.5em .9em;border-radius:11px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  transition:border-color .45s var(--ease),background .45s var(--ease)}
.cal-picks .pick span{display:block;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:#9c8b6e}
.cal-picks .pick b{display:block;margin-top:.2em;font-size:.98rem;color:#fff;font-weight:500}
.cal-picks .pick.on{border-color:rgba(228,23,58,.5);background:rgba(196,18,48,.14)}
.cal-picks .pick.wartet{border-color:rgba(228,23,58,.6);
  animation:wartet 1.7s var(--ease-io) infinite}
@keyframes wartet{0%,100%{box-shadow:0 0 0 0 rgba(228,23,58,.35)}
                  55%{box-shadow:0 0 0 7px rgba(228,23,58,0)}}
.cal-arrow{color:var(--red-lit);font-size:1.1rem}
.cal-reset{font-size:.82rem;color:#9c8b6e;padding:.5em .9em;border-radius:99px;
  transition:color .35s var(--ease),background .35s var(--ease)}
.cal-reset:hover{color:#fff;background:rgba(255,255,255,.07)}

/* --- Zusammenfassung: Zahlen springen kurz an ---------------------------- */
.bump{animation:bump .5s var(--ease)}
@keyframes bump{0%{transform:translateY(5px);opacity:.4}100%{transform:none;opacity:1}}
.shake{animation:shake .42s var(--ease-io)}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(3px)}
                 50%{transform:translateX(-3px)}}

/* ==========================================================================
   Feinschliff quer ueber die Seite
   ========================================================================== */

/* Ueberschriften steigen zeilenweise auf, sobald sie ins Bild kommen */
[data-reveal="rise"]{opacity:1;transform:none}
[data-reveal="rise"] .rise{display:block;overflow:hidden;
  padding-block:.09em;margin-block:-.09em}
[data-reveal="rise"] .rise > i{display:block;font-style:normal;transform:translateY(112%);
  transition:transform 1.05s var(--ease)}
[data-reveal="rise"].in .rise > i{transform:none}
[data-reveal="rise"] .rise:nth-child(2) > i{transition-delay:.08s}
[data-reveal="rise"] .rise:nth-child(3) > i{transition-delay:.16s}

/* Knoepfe folgen dem Zeiger ein Stueck */
.btn{will-change:transform}

/* Bilder in Karten heben sich beim Ueberfahren */
.newscard .pic,.hcard,.split-media,.sub-card,.card{will-change:transform}

/* Feiner Rahmenschimmer auf dunklen Karten */
.card,.flowstep,.newscard,.snow,.embed{position:relative}
.card::after,.flowstep::before,.newscard::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(220px 160px at var(--mx,50%) var(--my,0%),
    rgba(255,255,255,.07),transparent 70%);
  opacity:0;transition:opacity .5s var(--ease);
}
.card:hover::after,.flowstep:hover::before,.newscard:hover::before{opacity:1}

/* Seitenwechsel weich ausblenden */
body{opacity:1;transition:opacity .32s var(--ease)}
body.leaving{opacity:0}

@media (max-width:820px){
  .cal-grids{grid-template-columns:1fr}
  .cal-grids .cal-month:nth-child(2){display:none}
  .cal-legend{display:none}
  .cal-foot{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .cal-day,.cal-day.is-start,.cal-day.is-end,.bump,.shake,
  .cal-picks .pick.wartet{animation:none !important}
  .cal-grids{transition:none}
  [data-reveal="rise"] .rise > i{transform:none}
  body.leaving{opacity:1}
}

/* --- News-Filter ---------------------------------------------------------- */
.newsfilter{margin-bottom:0}
.newscard{transition:transform .7s var(--ease),border-color .5s var(--ease),
  opacity .5s var(--ease)}
.newscard.is-out{display:none}
.newsempty{margin-top:2em;color:var(--grey);font-size:.95rem}

/* --- SPAR-Seite: die drei Türen ------------------------------------------ */
.doors{display:flex;flex-direction:column;gap:10px}
.door{display:flex;align-items:flex-start;gap:16px;padding:14px 16px;border-radius:13px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  transition:background .45s var(--ease),border-color .45s var(--ease),transform .5s var(--ease)}
.door:hover{background:rgba(255,255,255,.08);border-color:rgba(228,23,58,.4);
  transform:translateX(4px)}
.door .dn{font-family:var(--display);font-weight:700;font-size:1.15rem;line-height:1.2;
  color:transparent;-webkit-text-stroke:1.2px rgba(228,23,58,.85);flex:0 0 auto;
  transition:color .5s var(--ease)}
.door:hover .dn{color:rgba(228,23,58,.25)}
.door b{display:block;font-size:1rem;color:#fff;line-height:1.2}
.door span{display:block;margin-top:.3em;font-size:.9rem;color:#b8a781;line-height:1.5}

/* Karten auf hellem Grund */
.card.light{background:var(--paper-2);border-color:rgba(0,0,0,.09)}
.card.light:hover{background:#fff;border-color:rgba(0,0,0,.18)}
.card.light .tier{color:var(--ink)}
.card.light p{color:var(--grey-d);font-size:.98rem;line-height:1.65}

/* --- Markenwand auf der SPAR-Seite --------------------------------------- */
.brandwall{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.brandcard{position:relative;padding:clamp(24px,2.6vw,36px);border-radius:18px;overflow:hidden;
  background:var(--paper-2);border:1px solid rgba(0,0,0,.09);
  transition:transform .7s var(--ease),border-color .5s var(--ease),background .5s var(--ease)}
.brandcard:hover{transform:translateY(-5px);border-color:rgba(0,0,0,.2);background:#fff}
.brandcard .bk{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.brandcard h3{margin:.8em 0 .5em;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.05;color:var(--ink)}
.brandcard .bt{font-size:.96rem;line-height:1.65;color:var(--grey-d)}

/* Die hervorgehobene Karte: Sonnenschutz ist auf 1.500 m das stärkste Argument */
.brandcard.hi{background:linear-gradient(165deg,#1d0810,#131315 62%);
  border-color:rgba(196,18,48,.4)}
.brandcard.hi h3{color:#fff}
.brandcard.hi .bt{color:#b8a781}
.brandcard.hi .bk{color:var(--red-lit)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.6em;padding-top:1.4em;
  border-top:1px solid rgba(0,0,0,.1)}
.brandcard.hi .chips{border-top-color:var(--line)}
.chips li{
  padding:.5em 1em;border-radius:99px;font-size:.88rem;font-weight:500;
  background:#fff;border:1px solid rgba(0,0,0,.12);color:var(--ink);
  transition:transform .45s var(--ease),border-color .45s var(--ease),
             background .45s var(--ease),color .45s var(--ease);
}
.brandcard.hi .chips li{background:rgba(255,255,255,.07);border-color:var(--line);color:#fff}
.chips li:hover{transform:translateY(-2px);border-color:var(--red);color:var(--red)}
.brandcard.hi .chips li:hover{background:var(--red);border-color:var(--red);color:#fff}
/* Chips, die auf die offizielle Marken-Website verlinken (siehe spar.html,
   Karten "Zum Ausklang"/"Für den Fernsehabend"): der Link fuellt die ganze
   Pille aus (negative Raender heben das Innenabstand der li wieder auf),
   damit die komplette Kachel klickbar ist, nicht nur der Text selbst. */
.chips li a{display:block;margin:-.5em -1em;padding:.5em 1em;color:inherit;text-decoration:none}

/* Markenband auf hellem Grund */
.marquee:not(.dark) i{color:var(--paper-3)}
.marquee:not(.dark) i::after{background:var(--red)}

@media (max-width:1000px){ .brandwall{grid-template-columns:1fr} }

/* --- Navigation: Burger schon ab 1000 px ---------------------------------
   Zwischen 760 und 1000 px war die Desktop-Navigation zu eng und brach um
   ("KNITEL WARTHVerleih Service ..."). Der Umschaltpunkt gehört dorthin,
   wo die sechs Einträge samt Knopf nicht mehr nebeneinander passen. */
@media (max-width:1000px){
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
}

/* --- Sprachumschalter ------------------------------------------------------
   Kleiner Globus in der Kopfleiste, Klapptafel darunter. Bewusst zurueckhaltend:
   wer die Sprache nicht sucht, soll ihn kaum bemerken. In der Schublade steht
   stattdessen eine Reihe aus Kuerzeln, dort ist kein Platz fuer eine Tafel. */
.langpick{position:relative}
.langbtn{
  display:flex;align-items:center;gap:.45em;height:38px;padding:0 .7em;
  border-radius:999px;border:1px solid rgba(255,255,255,.16);background:transparent;
  color:#fff;font:inherit;font-size:.82rem;font-weight:500;letter-spacing:.02em;
  opacity:.82;cursor:pointer;
  transition:opacity .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.langbtn svg{width:15px;height:15px;flex:none}
.langbtn img.flag-now{width:18px;height:13px;flex:none;object-fit:cover;border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.langbtn .chev{width:9px;height:9px;transition:transform .45s var(--ease)}
.langbtn:hover{opacity:1;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.06)}
.langpick.open .langbtn{opacity:1;border-color:var(--red-lit);background:rgba(196,18,48,.14)}
.langpick.open .langbtn .chev{transform:rotate(180deg)}

.langmenu{
  position:absolute;top:calc(100% + 12px);right:0;min-width:200px;z-index:5;
  padding:8px;border-radius:14px;background:rgba(18,18,20,.96);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;
}
.langpick.open .langmenu{opacity:1;visibility:visible;transform:none}
.langmenu a{
  display:flex;align-items:center;gap:.7em;
  padding:.62em .8em;border-radius:9px;color:#c9c9d0;font-size:.9rem;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.langmenu a b{font-weight:500}
.langmenu a span{margin-left:auto;font-size:.72rem;letter-spacing:.12em;color:#6f6f78}
.langmenu a img.flag{width:20px;height:15px;flex:none;object-fit:cover;border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.langmenu a:hover{background:rgba(255,255,255,.07);color:#fff}
.langmenu a[aria-current="true"]{background:rgba(196,18,48,.18);color:#fff}
.langmenu a[aria-current="true"] span{color:var(--red-lit)}

.drawer-lang{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:2.2em;padding-top:1.6em;
  border-top:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease) .1s,transform .6s var(--ease) .1s;
}
.drawer.open .drawer-lang{opacity:1;transform:none}
.drawer .drawer-lang a{
  font-family:var(--text);font-size:.86rem;font-weight:500;text-transform:none;
  padding:.42em .95em .42em .6em;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  color:#9a9aa3;line-height:1;display:flex;align-items:center;gap:.5em;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.drawer .drawer-lang a img.flag{width:16px;height:12px;flex:none;object-fit:cover;border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.drawer .drawer-lang a:hover{color:#fff;border-color:rgba(255,255,255,.38)}
.drawer .drawer-lang a[aria-current="true"]{color:#fff;border-color:var(--red-lit);
  background:rgba(196,18,48,.18)}
.drawer .meta{
  margin-top:1.2em;color:#6f6f78;font-size:.82rem;
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease) .16s,transform .6s var(--ease) .16s;
}
.drawer.open .meta{opacity:1;transform:none}
.drawer-contact{
  display:flex;gap:10px;margin-top:1.6em;
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease) .13s,transform .6s var(--ease) .13s;
}
.drawer.open .drawer-contact{opacity:1;transform:none}
.drawer-contact a{
  display:flex;align-items:center;gap:.55em;flex:1 1 auto;justify-content:center;
  padding:.85em 1em;border-radius:14px;font-size:.88rem;font-weight:600;
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.drawer-contact a:first-child{background:var(--red);color:#fff}
.drawer-contact a:first-child:hover{background:var(--red-lit)}
.drawer-contact a:last-child{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.14)}
.drawer-contact a:last-child:hover{background:rgba(255,255,255,.1)}
.drawer-contact a:active{transform:scale(.97)}
.drawer-contact svg{width:16px;height:16px;flex:0 0 auto}

@media (max-width:1000px){
  .langpick{margin-left:auto;margin-right:4px}
}
@media (prefers-reduced-motion:reduce){
  .langmenu,.langbtn .chev{transition:opacity .2s linear,visibility .2s}
  .langpick.open .langmenu{transform:none}
}