/* ================= Shop-Seiten: Kasse, Testzahlung, Bestellung, Konto ================= */
.shop { padding-bottom: clamp(80px, 10vw, 140px); min-height: 75vh; }   /* Ansicht wird nachgeladen: Fusszeile beginnt schon unter dem Bildrand (kein Springen) */
.sh-wait { color: var(--mute); font: 500 13px var(--mono); }
.sh-box { max-width: 560px; padding: 30px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg-2); }
.sh-box h2 { font: 400 32px/1 var(--disp); text-transform: uppercase; }
.sh-box p { margin: 12px 0 20px; color: var(--fg-2); }
.sh-box code { font-family: var(--mono); color: #fff; }
.lnk { color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; font: inherit; }
.lnk:hover { color: #fff; }
.btn.busy { opacity: 0.6; pointer-events: none; }

/* Formularfelder */
.fld { display: grid; gap: 7px; margin-bottom: 16px; }
.fld > span { font: 600 10px/1 var(--body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-2); }
.fld > span em { font-style: normal; letter-spacing: 0.04em; text-transform: none; color: var(--mute); }
.fld input, .fld select { width: 100%; height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); color: #fff; font: 500 15px/1 var(--body); transition: border-color 0.2s, background-color 0.2s; }
.fld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg-2) 50%), linear-gradient(135deg, var(--fg-2) 50%, transparent 50%); background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px; background-size: 6px 6px; background-repeat: no-repeat; }
.fld select option { background: #111; }
.fld input:focus, .fld select:focus { outline: none; border-color: rgba(255, 255, 255, 0.55); background-color: rgba(255, 255, 255, 0.05); }
.fld small { font-size: 12px; color: var(--mute); }
.fld small a { color: #fff; }
.chk { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; cursor: pointer; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.chk input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: rgb(var(--red)); }
.chk a { color: #fff; }
.fld.bad input, .fld.bad select { border-color: rgb(var(--red)); }
.chk.bad span { color: #ff8f8f; }

/* Kasse */
.co { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.co-form { min-width: 0; }
.co-f { margin: 0 0 22px; padding: 26px 26px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); }
.co-f legend { display: flex; align-items: center; gap: 12px; padding: 0 6px; font: 400 24px/1 var(--disp); text-transform: uppercase; }
.co-f legend span { font: 600 11px/1 var(--mono); color: rgb(var(--red)); letter-spacing: 0.1em; }
.co-who { margin-bottom: 14px; color: var(--fg-2); } .co-who b { color: #fff; }
.co-have { margin: -4px 0 14px; font-size: 13px; color: var(--mute); } .co-have a { color: #fff; }
.co-acc[hidden], .co-who[hidden], .fld[hidden], .fld em[hidden] { display: none; }
.co-sole { margin: -6px 0 18px; font-size: 13px; }   /* gehoert zum Namen darueber */
.co-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; }
.co-err { min-height: 22px; margin-bottom: 12px; color: #ff8f8f; font-size: 14px; }
.co-pay { width: 100%; min-height: 62px; font-size: 13px; }
.co-pay svg { width: 16px; height: 16px; }
.co-sum { position: sticky; top: calc(var(--head-h) + 20px); padding: 26px; border: 1px solid var(--line-2); border-radius: 16px; background: linear-gradient(170deg, rgba(255, 255, 255, 0.04), transparent 40%), #0c0c0f; }
.co-sum h2 { font: 400 26px/1 var(--disp); text-transform: uppercase; margin-bottom: 16px; }
.co-items { margin: 0; padding: 0; list-style: none; }
.co-items li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 26px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.co-items img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)); }
.co-items li > div { min-width: 0; }
.co-items b { display: block; font: 400 19px/1.05 var(--disp); text-transform: uppercase; }
.co-items li > div > span { display: block; font-size: 12px; color: var(--mute); } .co-items em { font-style: normal; color: #ffb3b3; }
.co-ip { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .co-ip b { font: 400 22px/1 var(--disp); color: #fff; } .co-ip s { font: 500 13px var(--mono); color: var(--fg-2); }
.co-rm { width: 26px; height: 26px; display: grid; place-items: center; color: var(--mute); } .co-rm svg { width: 14px; height: 14px; } .co-rm:hover { color: #fff; }
.co-code { display: flex; gap: 8px; margin-top: 18px; }
.co-code input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); color: #fff; font: 600 13px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.co-code button { height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line-2); font: 700 11px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
.co-codemsg { min-height: 18px; margin-top: 8px; font-size: 13px; color: var(--fg-2); }
.co-codemsg.ok { color: #fff; } .co-codemsg.ok b { padding: 3px 7px; border-radius: 5px; background: rgb(var(--red)); font: 700 12px var(--mono); }
.co-codemsg.bad { color: #ff8f8f; }
.co-lines { margin: 14px 0 0; }
.co-lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 14px; color: var(--fg-2); }
.co-lines dd { margin: 0; font: 500 14px var(--mono); color: var(--fg); }
.co-lines .disc dt, .co-lines .disc dd { color: #ff9b9b; font-weight: 700; }
.co-lines .tot { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line-2); color: #fff; }
.co-lines .tot dt { font: 400 24px/1 var(--disp); text-transform: uppercase; } .co-lines .tot dd { font: 400 32px/1 var(--disp); }

/* Testzahlung */
.pay { display: grid; place-items: start; }
.pay-card { width: min(560px, 100%); padding: 32px; border: 1px solid var(--line-2); border-radius: 18px; background: #0c0c0f; }
.pay-flag { display: inline-block; padding: 7px 11px; border-radius: 6px; background: #f3f1ec; color: #0a0a0a; font: 800 10px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; }
.pay-d { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; margin: 24px 0; }
.pay-d dt { font: 600 10px/1.6 var(--body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); }
.pay-d dd { margin: 0; font: 500 15px var(--mono); } .pay-t { font: 400 34px/1 var(--disp) !important; }
.pay-note { color: var(--fg-2); font-size: 14px; }
.pay-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.pay-act svg { width: 16px; height: 16px; }

/* Bestellung */
.ord-head { padding: 30px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--bg-2); }
.ord-head.paid { border-color: rgba(255, 255, 255, 0.3); background: linear-gradient(120deg, rgba(var(--red), 0.16), transparent 60%), var(--bg-2); }
.ord-head h2 { margin-top: 14px; font: 400 clamp(40px, 5vw, 64px)/0.95 var(--disp); text-transform: uppercase; }
.ord-head p { margin-top: 10px; color: var(--fg-2); }
.ord-n { font-size: 12px; color: var(--mute) !important; }
.ord-st { display: inline-block; padding: 5px 9px; border-radius: 6px; border: 1px solid var(--line-2); font: 700 10px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; }
.ord-st.paid { background: #f3f1ec; color: #0a0a0a; border-color: transparent; }
.ord-st.failed, .ord-st.refunded { border-color: rgba(var(--red), 0.7); color: #ff9b9b; }
.ord-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(20px, 3vw, 40px); margin-top: 24px; align-items: start; }
.ord-items { margin: 0; padding: 0; list-style: none; }
.ord-items li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ord-items img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)); }
.ord-items b { display: block; font: 400 22px/1 var(--disp); text-transform: uppercase; }
.ord-items span { font: 500 13px var(--mono); color: var(--fg-2); } .ord-items s { color: var(--mute); }
.ord-items .btn svg, .acc-lib .btn svg { width: 15px; height: 15px; }
.ord-sum { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); }
.ord-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ord-tip { margin-top: 18px; color: var(--fg-2); }
.ord-mail { margin-top: 40px; }
.ord-mail h3 { font: 400 26px/1 var(--disp); text-transform: uppercase; margin-bottom: 14px; }
.ord-mail h3 span { margin-left: 10px; font: 500 11px var(--mono); letter-spacing: 0.06em; text-transform: none; color: var(--mute); }
.ord-mail article { margin-bottom: 12px; border: 1px dashed var(--line-2); border-radius: 12px; overflow: hidden; }
.ord-mail header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px 16px; background: rgba(255, 255, 255, 0.03); font-size: 14px; } .ord-mail header span { color: var(--mute); font-size: 12px; }
.ord-mail pre { margin: 0; padding: 14px 16px; white-space: pre-wrap; font: 400 13px/1.6 var(--mono); color: var(--fg-2); }

/* Konto */
.auth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 980px; }
.auth.one { grid-template-columns: minmax(0, 520px); }
.auth-f { padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); }
.auth-f[hidden] { display: none; }
.auth-f h2 { font: 400 30px/1 var(--disp); text-transform: uppercase; margin-bottom: 20px; }
.auth-f .btn { width: 100%; margin-bottom: 12px; }
.auth-err { min-height: 20px; margin-bottom: 8px; color: #ff8f8f; font-size: 14px; }
.acc-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); color: var(--fg-2); }
.acc-bar b { color: #fff; }
.acc-h { display: flex; align-items: baseline; gap: 12px; margin: 44px 0 16px; font: 400 34px/1 var(--disp); text-transform: uppercase; }
.acc-h span { font: 500 13px var(--mono); color: var(--mute); }
.acc-libs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.acc-lib { --pc: 255, 255, 255; display: grid; grid-template-columns: 64px minmax(0, 1fr) 176px; gap: 14px; align-items: center; padding: 12px 14px 12px 12px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(90deg, rgba(var(--pc), 0.1), transparent 60%), var(--bg-2); }
/* mehrteilig: Titel oben, darunter die Teile als kompakte Knoepfe ("Part 1 · 4.0 GB", voller Dateiname als Tooltip); vorher schoben sich
   die Knoepfe mit den langen Dateinamen ueber den Titel (12.11.) */
.acc-parts { display: grid; gap: 8px; }   /* Knoepfe rechts untereinander, gleich breit (13.11.2026) */
.acc-parts .btn { height: 36px; padding: 0 14px; gap: 8px; font-size: 10.5px; justify-content: center; white-space: nowrap; }
.acc-parts .btn small { font: 500 10px/1 var(--mono); letter-spacing: 0.04em; opacity: 0.6; text-transform: none; }
@media (max-width: 560px) { .acc-lib { grid-template-columns: 56px minmax(0, 1fr); } .acc-parts { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } }   /* schmal: Knoepfe unter der Karte */
.acc-lib img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)); }
.acc-lib > div { min-width: 0; }
.acc-lib b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 400 21px/1.05 var(--disp); text-transform: uppercase; overflow-wrap: anywhere; }   /* lange Namen: zwei Zeilen statt abgeschnitten */
.acc-lib > div > span { display: block; margin-top: 4px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-orders { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.acc-o { display: grid; grid-template-columns: 150px 110px minmax(0, 1fr) 90px 100px 70px; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.acc-o:last-child { border-bottom: 0; }
.acc-o .ord-st { justify-self: start; }
.acc-oi { color: var(--fg-2); }
.acc-o a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.acc-none { color: var(--mute); }
.acc-pw { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)) auto; gap: 0 14px; align-items: end; }
.acc-pw .btn { margin-bottom: 16px; height: 50px; }
.acc-pw .auth-err { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .co, .ord-grid, .auth { grid-template-columns: minmax(0, 1fr); }
  .co-sum { position: static; order: -1; padding: 20px; }
  .co-items li { grid-template-columns: 44px minmax(0, 1fr) auto 22px; gap: 10px; }
  .co-items img { width: 44px; height: 44px; }
  .co-ip { gap: 6px; } .co-ip b { font-size: 19px; } .co-ip s { font-size: 11px; }
  .acc-o { grid-template-columns: 1fr auto; } .acc-o > span:nth-child(2), .acc-oi { display: none; }
  .acc-pw { grid-template-columns: minmax(0, 1fr); }
}

/* Konto: Library in mehreren Teilen */
/* Sprungziele im Konto (#orders, #lib-<id>) nicht unter der Kopfzeile */
.acc-h, .acc-lib { scroll-margin-top: calc(var(--head-h) + 20px); }
/* Downloads: schon geladen (Haken + Datum), beim Klick "Starting download …", danach "Download again" */
.acc-dl { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; white-space: nowrap; font: 600 10px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.acc-dl[hidden] { display: none; }
.acc-dl svg { width: 13px; height: 13px; color: rgb(var(--pc, 255, 255, 255)); }
.acc-lib .btn.is-done { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.acc-lib .btn.is-busy { pointer-events: none; animation: dl-busy 0.9s ease-in-out infinite alternate; }
@keyframes dl-busy { to { opacity: 0.55; } }
/* Anmelden mit Google */
.auth-free { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding: 16px 20px; border: 1px solid rgba(var(--red), 0.45); border-radius: 14px; background: rgba(var(--red), 0.09); font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.auth-free svg { width: 20px; height: 20px; flex: none; color: rgb(var(--red)); }
.auth-free b { color: var(--fg); }
.g-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; }
.g-row span { font-size: 13px; color: var(--fg-2); }
.g-btn { gap: 10px; } .g-btn svg { width: 18px; height: 18px; flex: none; }
.g-msg { margin: 0 0 16px; }