/* =====================================================================
   checkout.css
   Der Warenkorb und die Bestellung. Angelegt am 23.09.2026.

   Das ist die Seite, auf der Geld den Besitzer wechselt. Sie muss
   ruhig sein und darf nichts verstecken. Zwei Tafeln nebeneinander:
   links die Ware, rechts die Rechnung. Die Rechnung laeuft beim
   Scrollen mit, damit die Summe immer im Blick bleibt.

   Grundlage ist tafel.css, von dort kommen Farben und Schrift.
   Geaendert wurde nur das Aussehen. Preise, Rabatte und die
   Buchpreisbindung rechnet weiter das Skript in checkout.php, an dem
   hier nichts angefasst wurde.

   Zwei Dinge sind Absicht und keine Nachlaessigkeit:
   - Alle Zahlen stehen in tabular-nums, damit Komma unter Komma
     steht und man die Spalte lesen kann wie einen Kontoauszug.
   - Der Bezahlknopf ist der einzige grosse leuchtende Knopf auf der
     Seite. Alles andere ist ruhiger, damit klar ist, wo es weitergeht.

   Die alte Gestaltung steht in checkout.php weiter drin, ist dort
   aber mit if (false) abgeschaltet.
   ===================================================================== */

:root{
  --co-rot:#FF6B6B;
  --co-rot-kante:rgba(255,107,107,.28);
  --co-gruen:#5BE49B;
  --co-bernstein:#FFB648;
  --co-bernstein-kante:rgba(255,182,72,.5);
}

body.co-seite{
  min-height:100vh;
  font-family:var(--tf-schrift);
}

/* =====================================================================
   Aufteilung
   ===================================================================== */
/* Wichtig, zweimal auf die Nase gefallen am 23.09.2026:

   1. main bringt aus style.css display:flex und align-items:center
      mit. Ein Flex-Kind richtet sich dann nach seinem Inhalt statt
      nach dem Platz, der da ist. Die linke Spalte ist so auf 62
      Pixel zusammengefallen und der Titel lief quer ueber die
      Rechnung. align-items:stretch auf main hebt das auf.

   2. main ist dort ausserdem content-box mit width:100% und 2rem
      Polster, also 64 Pixel breiter als das Fenster. Wer den
      Innenraum von main ausfuellt, haengt rechts hinaus. Darum
      nimmt diese Seite main das Polster weg und bringt ihr eigenes
      mit. Die Klasse setzt ein kleines Skript am Ende von
      checkout.php, damit auch Browser ohne :has mitkommen. */
main.co-main{
  box-sizing:border-box;
  width:100%;
  padding:0;
  align-items:stretch;
}

.checkout-container{
  box-sizing:border-box;
  align-self:stretch;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:clamp(20px,4vw,40px) clamp(16px,3vw,24px) clamp(40px,6vw,64px);
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  gap:clamp(18px,2.4vw,28px);
  align-items:start;
  font-family:var(--tf-schrift);
}
.checkout-container *{box-sizing:border-box;letter-spacing:normal}

.cart-section,
.summary-section{
  background:linear-gradient(180deg, var(--tf-tafel-1) 0%, var(--tf-tafel-2) 100%);
  border:1px solid var(--tf-rand);
  border-radius:20px;
  padding:clamp(20px,3vw,30px);
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--tf-text);
  text-align:left;
}

.summary-section{
  position:sticky;
  top:clamp(70px,9vh,96px);
  height:fit-content;
}

/* Die Ueberschriften bringen aus style.css Neon und Grossbuchstaben
   mit. Hier gilt die ruhige Fassung. */
.checkout-container .section-title{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  font-family:var(--tf-schrift) !important;
  font-size:clamp(1.3rem,3vw,1.65rem) !important;
  font-weight:700;
  color:var(--tf-text) !important;
  text-transform:none !important;
  text-shadow:none !important;
  animation:none !important;
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
  margin:0 0 20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--tf-linie);
}

/* =====================================================================
   Die Ware
   ===================================================================== */
.cart-section{container-type:inline-size;container-name:warenkorb}
.cart-items{display:flex;flex-direction:column;gap:12px}

/* Die Zeile einer Position richtet sich nach der Breite der Tafel,
   nicht nach der des Fensters. Zwei Tafeln nebeneinander heisst, dass
   die linke bei 1024px Fensterbreite nur gut 470px hat, und dort
   passen Bild, Titel, Menge, Preis und Kreuz nicht in eine Zeile.
   Grundstellung ist darum die gestapelte Fassung, die immer passt.
   Ist genug Platz da, schaltet die Regel weiter unten auf eine Zeile
   um. Alte Browser ohne Container-Abfragen bleiben bei der
   gestapelten Fassung, die sieht auch gut aus. */
.cart-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 30px;
  grid-template-areas:
    "bild  text  weg"
    "menge preis preis";
  gap:12px;
  align-items:center;
  background:var(--tf-innen);
  border:1px solid var(--tf-linie);
  border-radius:14px;
  padding:13px 14px;
  transition:border-color .25s ease, box-shadow .3s ease;
}
.cart-item:hover{
  border-color:var(--tf-rand-hell);
  box-shadow:0 10px 26px rgba(0,0,0,.45), 0 0 22px rgba(0,255,255,.12);
}

.item-image{
  grid-area:bild;
  width:60px;height:60px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.9rem;
  background:rgba(0,0,0,.3);
  border:1px solid var(--tf-linie);
  border-radius:11px;
  overflow:hidden;
  flex-shrink:0;
}
.item-image img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}

.item-info{grid-area:text;min-width:0}
.item-name{
  color:var(--tf-text);
  font-size:1rem;font-weight:600;line-height:1.35;
  margin-bottom:4px;
  overflow-wrap:break-word;
}
.item-type{
  display:inline-block;
  font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tf-stumm);
  border:1px solid var(--tf-linie);
  border-radius:4px;
  padding:.14rem .45rem;
}

.item-price{
  grid-area:preis;
  align-self:center;
  color:var(--tf-kasse);
  font-size:1.1rem;font-weight:700;
  font-variant-numeric:tabular-nums;
  text-align:right;
  min-width:0;
}
.item-price del{
  display:inline-block;
  color:var(--tf-stumm);
  text-decoration:line-through;
  font-size:.82rem;font-weight:500;
  margin-right:6px;
}
.item-price-discounted{color:var(--co-gruen);font-weight:700}

.buchpreisbindung-hint{
  font-size:.66rem;font-style:normal;
  color:var(--tf-stumm);
  opacity:1;
  font-weight:500;
  margin-top:3px;
  white-space:normal;
  max-width:100%;
  line-height:1.4;
}

/* Ab dieser Breite der Tafel passt alles in eine Zeile. */
@container warenkorb (min-width:560px){
  .cart-item{
    grid-template-columns:72px minmax(0,1fr) auto 118px 30px;
    grid-template-areas:"bild text menge preis weg";
  }
  .item-image{width:72px;height:72px;font-size:1.9rem}
  .remove-btn{align-self:center}
  .quantity-controls{padding:4px 6px}
  .quantity-btn{width:28px;height:28px}
  .quantity-input{width:38px}
}

/* Stueckzahl */
.quantity-controls{
  grid-area:menge;
  justify-self:start;
  display:flex;align-items:center;gap:2px;
  background:rgba(0,0,0,.32);
  border:1px solid var(--tf-linie);
  border-radius:22px;
  padding:3px 5px;
}
.quantity-btn{
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid var(--tf-linie);
  border-radius:50%;
  color:var(--tf-kasse);
  font-family:var(--tf-schrift);font-size:1.1rem;line-height:1;
  cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
}
.quantity-btn:hover{
  background:rgba(0,255,255,.14);
  border-color:var(--tf-rand-hell);
}
.quantity-input{
  width:32px;
  background:transparent;border:none;outline:none;
  color:var(--tf-text);
  font-family:var(--tf-schrift);font-size:.98rem;font-weight:700;
  font-variant-numeric:tabular-nums;
  text-align:center;
  -moz-appearance:textfield;
}
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Wegnehmen */
.remove-btn{
  grid-area:weg;
  align-self:start;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid var(--tf-linie);
  border-radius:50%;
  color:var(--tf-stumm);
  font-family:var(--tf-schrift);font-size:.9rem;line-height:1;
  cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
}
.remove-btn:hover{
  background:rgba(255,107,107,.14);
  border-color:var(--co-rot-kante);
  color:var(--co-rot);
}

.clear-cart-btn{
  background:transparent;
  border:1px solid var(--tf-linie);
  border-radius:10px;
  color:var(--tf-stumm);
  font-family:var(--tf-schrift);font-size:.78rem;font-weight:600;
  padding:7px 14px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s, border-color .2s, color .2s;
}
.clear-cart-btn:hover{
  background:rgba(255,107,107,.12);
  border-color:var(--co-rot-kante);
  color:var(--co-rot);
}

/* =====================================================================
   Die Rechnung
   ===================================================================== */
.summary-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;
  color:var(--tf-leise);
  font-size:.95rem;
  font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--tf-linie);
}
.summary-row span:last-child{white-space:nowrap;font-weight:600}

.summary-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-top:14px;padding:18px 0 4px;
  color:var(--tf-kasse);
  font-size:clamp(1.25rem,3vw,1.45rem);font-weight:700;
  font-variant-numeric:tabular-nums;
  border-top:1px solid var(--tf-rand-hell);
}
.summary-total span:last-child{white-space:nowrap}

.summary-footnote{
  font-size:.74rem;font-style:normal;
  color:var(--tf-stumm);opacity:1;
  line-height:1.6;
  margin-top:10px;padding-top:10px;
  border-top:1px solid var(--tf-linie);
}

/* Mitglied, mit Rabatt */
.member-info{
  text-align:center;
  background:linear-gradient(180deg, rgba(255,215,0,.09), rgba(255,215,0,.03));
  border:1px solid rgba(255,215,0,.3);
  border-radius:14px;
  padding:16px;
  margin-bottom:18px;
  text-transform:uppercase;
}
.member-info.vip{
  background:linear-gradient(180deg, rgba(255,215,0,.16), rgba(255,138,61,.06));
  border-color:rgba(255,215,0,.5);
}
.discount-badge{
  display:inline-block;
  background:linear-gradient(135deg,#FFD700,#FFED8E);
  color:#2A1D00;
  font-family:var(--tf-schrift);font-size:.92rem;font-weight:700;
  padding:7px 18px;border-radius:20px;
  margin-top:8px;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
}

/* Gast, noch nicht angemeldet */
.login-prompt{
  text-align:center;
  background:var(--tf-innen);
  border:1px solid var(--tf-rand);
  border-radius:14px;
  padding:20px 18px;
  margin-bottom:18px;
  text-transform:none;
}
.login-prompt h3{
  font-family:var(--tf-schrift) !important;
  font-size:1.08rem;font-weight:600;
  color:var(--tf-text) !important;
  text-transform:none !important;
  text-shadow:none !important;
  -webkit-text-fill-color:currentColor !important;
  margin:0 0 8px;
}
.login-prompt p{
  color:var(--tf-leise);
  font-size:.92rem;line-height:1.6;
  margin:0 0 14px;
}
.summary-section .login-btn{
  display:inline-block;
  background:linear-gradient(135deg,#7DFFF6 0%,#00FFFF 35%,#00A8CC 100%);
  border:none;border-radius:12px;
  color:#062026;
  font-family:var(--tf-schrift);font-size:.92rem;font-weight:700;
  padding:11px 22px;margin:4px;
  text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.42), 0 0 20px rgba(0,255,255,.2);
  transition:transform .15s ease, box-shadow .3s ease, filter .3s ease;
}
.summary-section .login-btn:hover{
  transform:translateY(-2px);
  color:#062026;text-decoration:none;
  box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 34px rgba(0,255,255,.4);
  filter:brightness(1.04);
}

/* =====================================================================
   Lieferland und Sperrhinweis
   ===================================================================== */
.shipping-country-section,
.checkout-requirements{
  background:var(--tf-innen);
  border:1px solid var(--tf-linie);
  border-radius:14px;
  padding:16px;
  margin-bottom:18px;
}
.shipping-country-section h3{
  display:flex;align-items:center;gap:8px;
  font-family:var(--tf-schrift) !important;
  font-size:1rem;font-weight:600;
  color:var(--tf-text) !important;
  text-transform:none !important;
  text-shadow:none !important;
  -webkit-text-fill-color:currentColor !important;
  margin:0 0 12px;
}

.country-select{
  width:100%;
  background:var(--tf-innen-tief);
  border:1px solid var(--tf-linie);
  border-radius:12px;
  color:var(--tf-text);
  font-family:var(--tf-schrift);font-size:.98rem;
  padding:12px 14px;
  cursor:pointer;outline:none;
  transition:border-color .2s, box-shadow .25s, background .2s;
}
.country-select:hover{border-color:var(--tf-rand-hell)}
.country-select:focus{
  border-color:var(--tf-rand-hell);background:rgba(0,0,0,.34);
  box-shadow:0 0 0 3px rgba(0,255,255,.1);
}
.country-select option{background:#0C1420;color:#fff}
.country-select optgroup{background:#070C15;color:var(--tf-kasse);font-weight:700}

/* Der Hinweis, dass in dieses Land nichts geht. Er blendet sich per
   Skript ein, darum bleibt display:none hier stehen. */
.shipping-blocked-notice{
  display:none;
  margin-top:14px;padding:14px 16px;
  background:rgba(255,182,72,.09);
  border:1px solid var(--co-bernstein-kante);
  border-radius:12px;
  color:var(--tf-leise);
  font-size:.88rem;line-height:1.6;
}
.shipping-blocked-notice strong{
  display:block;
  color:var(--co-bernstein);
  font-weight:700;
  margin-bottom:6px;
}
.shipping-blocked-notice p{margin:8px 0 0}
.shipping-blocked-notice ul{margin:6px 0 0;padding-left:20px}
.shipping-blocked-notice li{margin:3px 0}
.shipping-blocked-notice a{color:var(--tf-kasse);text-decoration:underline}

/* =====================================================================
   Haken und Bezahlknopf
   ===================================================================== */
.checkbox-item{
  display:flex;align-items:flex-start;gap:11px;
  margin-bottom:12px;
  cursor:pointer;
}
.checkbox-item:last-child{margin-bottom:0}
.checkbox-item input[type="checkbox"]{
  width:18px;height:18px;
  margin-top:2px;
  accent-color:#00FFFF;
  cursor:pointer;flex-shrink:0;
}
.checkbox-label{
  color:var(--tf-leise);
  font-size:.88rem;line-height:1.55;
  cursor:pointer;
}
.checkbox-label a{
  color:var(--tf-kasse);
  text-decoration:none;
  border-bottom:1px solid rgba(0,255,255,.4);
}
.checkbox-label a:hover{border-bottom-color:var(--tf-kasse)}

.checkout-btn{
  width:100%;
  margin-top:22px;padding:16px 28px;
  background:linear-gradient(135deg,#7DFFF6 0%,#00FFFF 35%,#00A8CC 100%);
  border:none;border-radius:14px;
  color:#062026;
  font-family:var(--tf-schrift);font-size:1.05rem;font-weight:700;
  letter-spacing:.02em;text-transform:none;
  cursor:pointer;
  box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 28px rgba(0,255,255,.26);
  transition:transform .15s ease, box-shadow .3s ease, filter .3s ease;
}
.checkout-btn:not(:disabled):hover{
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(0,0,0,.55), 0 0 42px rgba(0,255,255,.45);
  filter:brightness(1.04);
}
.checkout-btn:not(:disabled):active{transform:translateY(0)}
.checkout-btn:disabled{
  background:rgba(255,255,255,.06);
  border:1px solid var(--tf-linie);
  color:var(--tf-stumm);
  cursor:not-allowed;
  box-shadow:none;
}

/* =====================================================================
   Leerer Warenkorb
   ===================================================================== */
.empty-cart{
  text-align:center;
  padding:clamp(40px,7vw,70px) 20px;
  color:var(--tf-leise);
}
.empty-cart-icon{font-size:3.6rem;opacity:.45;margin-bottom:18px}
.empty-cart-title{
  font-family:var(--tf-schrift);
  font-size:1.35rem;font-weight:700;
  color:var(--tf-text);
  margin-bottom:8px;
}
.empty-cart-text{font-size:.98rem;margin-bottom:26px;color:var(--tf-leise)}
.cart-section .shop-btn{
  display:inline-block;
  background:linear-gradient(135deg,#7DFFF6 0%,#00FFFF 35%,#00A8CC 100%);
  border:none;border-radius:12px;
  color:#062026;
  font-family:var(--tf-schrift);font-size:.98rem;font-weight:700;
  padding:13px 28px;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,.45), 0 0 24px rgba(0,255,255,.22);
  transition:transform .15s ease, box-shadow .3s ease, filter .3s ease;
}
.cart-section .shop-btn:hover{
  transform:translateY(-2px);
  color:#062026;text-decoration:none;
  box-shadow:0 16px 38px rgba(0,0,0,.5), 0 0 38px rgba(0,255,255,.42);
  filter:brightness(1.04);
}

/* =====================================================================
   Schmale Fenster
   ===================================================================== */
@media (max-width:980px){
  .checkout-container{grid-template-columns:minmax(0,1fr)}
  .summary-section{position:relative;top:auto}
}

@media (max-width:620px){
  .checkout-container .section-title{font-size:1.2rem !important}
  .clear-cart-btn{font-size:.72rem;padding:6px 11px}
}

@media (prefers-reduced-motion:reduce){
  .checkout-btn:hover,.cart-section .shop-btn:hover,
  .summary-section .login-btn:hover{transform:none}
}