/* Das Bestellfenster. Nutzt die Farben und Schriften aus jf.css.

   Dunkel wie der Rest der Seite: Ein helles Fenster, das aus einer
   dunklen Seite aufklappt, blendet - vor allem abends auf dem Handy. */

.kauf-mini{cursor:pointer;border:0}
button.kauf-btn{cursor:pointer;border:0}

dialog.bestell{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);
  margin:auto;padding:0;border:0;border-radius:var(--rund);
  background:var(--karte);color:var(--text);
  box-shadow:inset 0 0 0 1px var(--linie-stark),0 40px 100px -40px rgba(0,0,0,1);
  overflow:auto}
dialog.bestell::backdrop{background:rgba(8,6,5,.72);backdrop-filter:blur(4px)}
dialog.bestell[open]{animation:bestell-auf .32s var(--ease-aus)}
@keyframes bestell-auf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){dialog.bestell[open]{animation:none}}

.bestell [hidden]{display:none!important}
.bestell-form,.bestell-danke{position:relative;padding:clamp(24px,4vw,38px);display:flex;
  flex-direction:column;gap:.9rem}
.bestell h2{margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(1.6rem,3.6vw,2.1rem);line-height:1.06;letter-spacing:-.035em}
.bestell .kicker{margin:0;align-self:flex-start;justify-content:flex-start;text-align:left}
.bestell-zu{position:absolute;top:12px;right:14px;width:40px;height:40px;border:0;
  background:none;font-size:1.6rem;line-height:1;color:var(--leise);cursor:pointer;
  border-radius:50%;transition:background-color .3s var(--ease),color .3s var(--ease)}
.bestell-zu:hover{background:var(--rot-nebel);color:var(--rot-text)}

.bestell-wahl{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.85rem 1.1rem;border-radius:var(--rund-klein);
  background:linear-gradient(130deg,rgba(44,224,206,.16),var(--karte-2));
  box-shadow:inset 0 0 0 1px rgba(166,243,234,.28);
  font-family:var(--display);font-weight:700}
.bestell-wahl b{color:var(--rot-text);white-space:nowrap}

.bestell label{display:flex;flex-direction:column;gap:.36rem;font-family:var(--fest);
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--leise)}
.bestell label i{color:var(--rot-text);font-style:normal}
.bestell input:not([type=checkbox]),.bestell textarea{font:inherit;font-family:var(--lese);
  font-size:1rem;letter-spacing:0;text-transform:none;color:var(--text);
  background:var(--karte-2);border:0;border-radius:var(--rund-klein);
  box-shadow:inset 0 0 0 1px var(--linie);
  padding:.74rem .9rem;min-height:46px;
  transition:box-shadow .3s var(--ease),background-color .3s var(--ease)}
.bestell textarea{resize:vertical;min-height:3.4em;line-height:1.6}
.bestell input::placeholder,.bestell textarea::placeholder{color:var(--leiser)}
.bestell input:focus,.bestell textarea:focus{outline:none;background:var(--karte);
  box-shadow:inset 0 0 0 1px var(--rot-zart),0 0 0 3px var(--rot-nebel)}
.bestell-zwei{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:480px){.bestell-zwei{grid-template-columns:1fr}}

.bestell-ok{flex-direction:row!important;align-items:flex-start;gap:.65rem!important;
  font-family:var(--lese)!important;font-size:.94rem!important;letter-spacing:0!important;
  text-transform:none!important;color:var(--leise)!important;line-height:1.6}
.bestell-ok input{margin-top:.25rem;width:18px;height:18px;accent-color:var(--rot);flex:0 0 auto}
.bestell-ok a{color:var(--rot-text)}
.bestell-falle{position:absolute!important;left:-9999px}
.bestell-info{margin:0;font-size:.9rem;color:var(--leise);line-height:1.66}
.bestell-fehler{margin:0;padding:.7rem .9rem;border-radius:var(--rund-klein);
  background:rgba(44,224,206,.2);box-shadow:inset 0 0 0 1px rgba(166,243,234,.34);
  color:var(--text);font-size:.92rem}
.bestell-los{align-self:stretch;justify-content:center;border:0;cursor:pointer}
.bestell-los[disabled]{opacity:.6;cursor:wait}
.bestell-fertig{align-self:flex-start;cursor:pointer}

/* Zwei Knöpfe in den Tarifkacheln */
.tarif-wege{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:auto}
.tarif-wege .knopf{flex:1 1 auto;justify-content:center;border:0;cursor:pointer}

/* ---------- Nachbestellen ---------- */
.nb-kasten{display:flex;align-items:center;justify-content:space-between;gap:1.2rem 2rem;
  flex-wrap:wrap;margin:clamp(28px,3.6vw,44px) 0 clamp(8px,1.4vw,14px);
  padding:clamp(20px,2.6vw,30px);border-radius:var(--rund);
  background:linear-gradient(140deg,rgba(44,224,206,.12),var(--karte));
  box-shadow:inset 0 0 0 1px rgba(166,243,234,.26)}
.nb-kasten-text{flex:1 1 320px}
.nb-kasten .kicker{margin:0 0 .4rem;justify-content:flex-start}
.nb-kasten h3{margin:0 0 .4rem;font-family:var(--display);font-weight:800;
  font-size:clamp(1.2rem,2.3vw,1.5rem);letter-spacing:-.03em}
.nb-kasten p:last-child{margin:0;color:var(--leise)}
.nb-kasten .knopf{border:0;cursor:pointer;flex:0 0 auto}

.nachbest .bestell-zu{z-index:2}
.nb-gruppe{border:0;margin:0;padding:0}
.nb-gruppe legend{font-family:var(--fest);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rot-text);margin-bottom:.5rem}
.nb-liste{display:flex;flex-direction:column;border-radius:var(--rund-klein);
  background:var(--karte-2);box-shadow:inset 0 0 0 1px var(--linie);overflow:hidden}
.nb-punkt{display:flex!important;flex-direction:row!important;align-items:center;
  gap:.75rem!important;padding:.68rem .9rem;border-top:1px solid var(--linie);cursor:pointer;
  font-family:var(--lese)!important;font-size:.98rem!important;letter-spacing:0!important;
  text-transform:none!important;color:var(--text)!important;
  transition:background-color .2s var(--ease)}
.nb-punkt:first-child{border-top:0}
.nb-punkt:hover{background:rgba(238,242,255,.05)}
.nb-punkt input{width:18px;height:18px;accent-color:var(--rot);flex:0 0 auto;margin:0}
.nb-name{flex:1}
.nb-preis{font-family:var(--display);font-weight:700;color:var(--rot-text);
  white-space:nowrap;font-size:.95rem}
.nb-punkt:has(input:checked){background:rgba(44,224,206,.14)}
.nb-punkt:has(input:checked) .nb-name{font-weight:600}
.nachbest .tarif-wege{margin-top:.4rem}
.nachbest .tarif-wege a.knopf{text-decoration:none}

.nb-gruppen{display:flex;flex-direction:column;gap:1rem}
.nb-ab{font-size:.85rem!important}