/* Vintage Express Handpick (Reservier-Galerie) – EIN Stilblatt für Kundenseite und Verwaltung.
   Richtung: Schwester des Vintage-Express-Shops – dessen Farben (Weiß, Tinte, warmes Grau, Denim als Akzent, Rot als Signal)
   und dessen Schrift Geist; aber schlichter: nur Kopfleiste, kurzer Einstieg, Fotos. Der Akzent ist einstellbar (/einstellung.css).
   Trennung durch Weißraum und feine Linien. */
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --akzent: #2f4a6b;
  --denim-tief: #1f3350;
  --signal: #b3261e;
  --grund: #fff;
  --flaeche: #fff;
  --weich: #f6f3ee;
  --tinte: #0c0c0d;
  --text: #1c1b1a;
  --mittel: #4c4a46;
  --leise: #6e6a64;
  --linie: #e7e3dc;
  --linie-stark: #c4bfb5;
  --warn: #8a3b12;
  --r-klein: 10px;
  --r: 12px;
  --rand: clamp(16px, 4vw, 48px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font: 400 16px/1.5 "Geist", "Segoe UI", system-ui, sans-serif; font-feature-settings: "ss01"; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 2px; }
.zahlen { font-variant-numeric: tabular-nums; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: 8px; top: -60px; background: var(--tinte); color: #fff; padding: 8px 16px; border-radius: var(--r); z-index: 50; }
.sprung:focus { top: 8px; }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--linie-stark); border-radius: var(--r); background: var(--flaeche); color: var(--tinte); font-weight: 500; text-decoration: none; cursor: pointer; text-align: center; }
.knopf:hover { border-color: var(--tinte); }
.knopf.haupt { background: var(--tinte); border-color: var(--tinte); color: #fff; font-weight: 600; }
.knopf.haupt:hover { background: var(--denim-tief); border-color: var(--denim-tief); }
.knopf.still { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 3px; padding-inline: 8px; }
.knopf.klein { min-height: 36px; padding: 4px 12px; font-size: 14px; }
.knopf.sicher { border-color: var(--warn); color: var(--warn); }
.knopf[disabled] { opacity: 0.55; cursor: default; }

/* ---------- Kopf (Kundenseite) ---------- */
.kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 12px var(--rand); border-bottom: 1px solid var(--linie); background: var(--grund); }
.marke { display: inline-flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 650; letter-spacing: -0.02em; text-decoration: none; color: var(--tinte); min-width: 0; overflow-wrap: anywhere; }
.marke img { height: 40px; width: auto; max-width: 160px; object-fit: contain; }
/* Zeichen: Medaillon und Schriftzug von Vintage Express (Bilder), darunter „Handpick“ in Geist */
.marke .marke-medaillon { width: 54px; height: 45px; max-width: none; flex: none; }
.marke-text { display: grid; gap: 6px; justify-items: start; }
.marke .marke-wort { width: 164px; height: 18px; max-width: none; }
.marke-zusatz { font-size: 13px; line-height: 1; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--signal); overflow-wrap: anywhere; }
.kundenseite { min-height: 100vh; display: flex; flex-direction: column; }
.kundenseite main { flex: 1; width: 100%; }
.kopf-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.korbknopf .anzahl { display: inline-block; min-width: 24px; padding: 0 6px; border-radius: 12px; background: var(--tinte); color: #fff; font-size: 13px; line-height: 24px; text-align: center; }
.korbknopf.voll { border-color: var(--akzent); }
.korbknopf.voll .anzahl { background: var(--akzent); }
.korbknopf .frist { color: var(--leise); font-weight: 400; font-size: 14px; }

main { padding: 40px var(--rand) 72px; max-width: 1680px; margin: 0 auto; }
.titelzeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
h1 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; font-weight: 700; letter-spacing: -0.04em; color: var(--tinte); overflow-wrap: anywhere; }
h2 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--tinte); }

/* ---------- Einstieg: eine Überschrift, ein Satz, drei Schritte ---------- */
.einstieg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: end; margin-bottom: 40px; }
.einstieg h1 { text-wrap: balance; }
.einstieg-text p { margin-top: 16px; max-width: 54ch; font-size: 18px; line-height: 1.5; color: var(--mittel); }
.schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
.schritte li { display: grid; gap: 4px; align-content: start; padding-top: 12px; border-top: 2px solid var(--tinte); }
.schritte .nr { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--akzent); }
.schritt-titel { font-weight: 600; color: var(--tinte); line-height: 1.3; }
.schritte .leise { font-size: 14px; line-height: 1.45; }
.leise { color: var(--leise); }
.hinweis { max-width: 62ch; color: var(--leise); }

/* ---------- Ordner als Textreiter ---------- */
.ordner { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 32px; border-bottom: 1px solid var(--linie); }
.reiter { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 0 12px; min-height: 44px; cursor: pointer; color: var(--leise); font-weight: 500; }
.reiter span { font-weight: 400; font-size: 13px; margin-left: 4px; }
.reiter:hover { color: var(--tinte); }
.reiter[aria-pressed="true"] { color: var(--tinte); border-bottom-color: var(--tinte); }

/* ---------- Galerie ---------- */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 44%), 1fr)); gap: 40px 24px; }
.kachel { display: flex; flex-direction: column; min-width: 0; }
.bildknopf { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--weich); border-radius: var(--r-klein); overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 5; }
.bildknopf img { width: 100%; height: 100%; object-fit: cover; }
/* Zustand „im Korb“: Rahmen um das Foto, Schild auf dem Foto, gefüllter Knopf */
.korbzeichen { display: none; position: absolute; left: 8px; top: 8px; padding: 4px 10px; border-radius: 99px; background: var(--akzent); color: #fff; font-size: 13px; line-height: 1.4; font-weight: 600; }
.kachel.im-korb .korbzeichen { display: block; }
.kachel.im-korb .bildknopf { box-shadow: 0 0 0 2px var(--grund), 0 0 0 4px var(--akzent); }
.kachel.im-korb .bildknopf:focus-visible { outline-offset: 6px; }
.kachel-text { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0 0; min-height: 36px; }
.kachel .titel { font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.kachel .preis { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kachel .meta { color: var(--leise); font-size: 14px; overflow-wrap: anywhere; }
.kachel > :nth-last-child(2) { margin-bottom: 12px; }
.kachel .knopf { margin-top: auto; width: 100%; }
.kachel .knopf[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.raster + .hinweis { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linie); }
.abstand-oben { margin-top: 24px; }
.meine { list-style: none; margin: 0 0 32px; padding: 0; max-width: 760px; }
.meinbundle { padding: 24px 0; border-top: 1px solid var(--linie); }
.meinbundle h2 { margin: 0 0 8px; }
.meinbundle p { margin: 0 0 4px; }
.meinbundle .daumen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.meinbundle .daumen img { width: 64px; height: 80px; object-fit: cover; border-radius: var(--r-klein); }
.restzeit { font-variant-numeric: tabular-nums; font-weight: 500; }
.knapp { color: var(--signal); font-weight: 600; }
.leer { max-width: 60ch; padding: 32px; background: var(--weich); border-radius: var(--r); }
h1 + .leer { margin-top: 24px; }

/* ---------- Fuß (Kundenseite) ---------- */
.fuss { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; padding: 32px var(--rand) 40px; border-top: 1px solid var(--linie); background: var(--weich); color: var(--mittel); font-size: 15px; }
.fuss:empty { display: none; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fuss a { display: inline-block; padding: 8px 0; text-underline-offset: 3px; }
.fuss a:hover { color: var(--tinte); }
.leer h2 { margin-bottom: 8px; }
.leer .knopf { margin-top: 24px; }

/* ---------- Großansicht ---------- */
dialog { border: 0; padding: 0; color: var(--tinte); }
dialog::backdrop { background: rgba(27, 26, 23, 0.82); }
.gross { width: min(1180px, 100vw - 24px); max-width: none; max-height: calc(100vh - 24px); background: var(--flaeche); border-radius: var(--r); overflow: auto; }
.gross-innen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.gross-bild { background: var(--weich); display: flex; align-items: center; justify-content: center; min-height: 240px; }
.gross-bild img { max-height: calc(100vh - 24px); width: auto; max-width: 100%; object-fit: contain; }
.gross-seite { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.gross-seite .preis { font-size: 20px; font-variant-numeric: tabular-nums; }
.gross-seite .unten { margin-top: auto; display: grid; gap: 8px; }
.blaettern { display: flex; gap: 8px; }
.blaettern .knopf { flex: 1; }

/* ---------- Korb und Bundle ---------- */
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 48px; align-items: start; }
.posten { border-top: 1px solid var(--linie); }
.posten li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.posten img { width: 96px; height: 120px; object-fit: cover; border-radius: var(--r-klein); background: var(--weich); }
.posten .titel { font-weight: 500; overflow-wrap: anywhere; }
.posten .meta { color: var(--leise); font-size: 14px; overflow-wrap: anywhere; }
.kasten { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 24px; display: grid; gap: 16px; position: sticky; top: 24px; }
.frist-gross { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.frist-gross .zahlen { color: var(--akzent); }
.feld { display: grid; gap: 4px; }
.feld label, .feld .beschriftung { font-weight: 500; font-size: 14px; }
.feld small { color: var(--leise); }
input[type="text"], input[type="password"], input[type="number"], textarea, select { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--linie-stark); border-radius: var(--r); background: #fff; }
textarea { min-height: 88px; resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 1px; border-radius: var(--r); }
.fehlertext { color: var(--warn); font-weight: 500; }
.linkzeile { display: flex; gap: 8px; }
.linkzeile input { min-width: 0; font-size: 14px; }

/* ---------- Meldung ---------- */
.melder { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); background: var(--tinte); color: #fff; padding: 12px 20px; border-radius: var(--r); z-index: 40; }
.melder:empty { display: none; }

/* ================= Verwaltung ================= */
.vw { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.vw-seite { border-right: 1px solid var(--linie); padding: 24px 16px; display: flex; flex-direction: column; gap: 24px; background: var(--flaeche); }
.vw-seite .marke { font-size: 18px; padding: 0 8px; }
.vw-nav { display: grid; gap: 2px; }
.vw-nav .ueber { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--leise); padding: 8px 8px 4px; }
.vw-nav button { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 8px; border: 0; border-radius: 6px; background: none; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.vw-nav button:hover { background: var(--weich); }
.vw-nav button[aria-current="true"] { background: var(--tinte); color: #fff; }
.vw-nav button .n { font-size: 13px; font-variant-numeric: tabular-nums; opacity: 0.75; }
.vw-nav button.zieht { outline: 2px solid var(--akzent); }
.vw-unten { margin-top: auto; display: grid; gap: 4px; font-size: 14px; }
.vw-haupt { padding: 32px var(--rand) 96px; min-width: 0; }
.vw-haupt h1 { font-size: clamp(26px, 3vw, 36px); }
.werkzeug { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.ablage { display: grid; gap: 8px; justify-items: start; padding: 24px; margin-bottom: 32px; border: 1px solid var(--linie-stark); border-radius: var(--r); background: var(--flaeche); }
.ablage.zieht { border-color: var(--akzent); box-shadow: inset 0 0 0 2px var(--akzent); }
.ablage .gross-text { font-size: 18px; font-weight: 600; }
.fortschritt { width: 100%; height: 6px; border-radius: 3px; background: var(--linie); overflow: hidden; }
.fortschritt i { display: block; height: 100%; width: 0; background: var(--akzent); }
.fortschritt[data-p="1"] i { width: 10%; } .fortschritt[data-p="2"] i { width: 20%; } .fortschritt[data-p="3"] i { width: 30%; } .fortschritt[data-p="4"] i { width: 40%; } .fortschritt[data-p="5"] i { width: 50%; }
.fortschritt[data-p="6"] i { width: 60%; } .fortschritt[data-p="7"] i { width: 70%; } .fortschritt[data-p="8"] i { width: 80%; } .fortschritt[data-p="9"] i { width: 90%; } .fortschritt[data-p="10"] i { width: 100%; }

.vw-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 44%), 1fr)); gap: 24px 16px; }
.vw-kachel { position: relative; min-width: 0; }
.vw-kachel .bildknopf { cursor: pointer; }
.vw-kachel .wahl { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; accent-color: var(--akzent); cursor: pointer; }
.vw-kachel .titel { font-weight: 500; font-size: 14px; padding-top: 8px; overflow-wrap: anywhere; }
.vw-kachel .meta { font-size: 13px; color: var(--leise); overflow-wrap: anywhere; }
.marke-res { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; background: var(--tinte); color: #fff; overflow-wrap: anywhere; }
.marke-res.korb { background: none; border: 1px solid var(--linie-stark); color: var(--tinte); }
.marke-res.verkauft { background: var(--warn); }
.auswahlleiste { position: sticky; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 24px; padding: 12px 16px; background: var(--tinte); color: #fff; border-radius: var(--r); }
.auswahlleiste select { width: auto; max-width: 100%; color: var(--tinte); }

.bundle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; padding: 24px 0; border-top: 1px solid var(--linie); }
.bundle h3 { font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
.bundle .bis { font-variant-numeric: tabular-nums; }
.bundle .daumen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bundle .daumen img { width: 64px; height: 80px; object-fit: cover; border-radius: var(--r-klein); background: var(--weich); }
.bundle .werkzeug { align-content: start; justify-content: flex-end; }
.bundle blockquote { margin: 8px 0 0; padding-left: 12px; border-left: 2px solid var(--linie-stark); color: var(--leise); overflow-wrap: anywhere; }
.liste-klein li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 8px 0; border-top: 1px solid var(--linie); font-size: 14px; }

.formular { display: grid; gap: 16px; max-width: 520px; }
.formular .reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.farbe { display: flex; gap: 8px; align-items: center; }
.farbe input[type="color"] { width: 56px; height: 44px; padding: 2px; border: 1px solid var(--linie-stark); border-radius: var(--r); background: #fff; }
.abschnitt { padding: 32px 0; border-top: 1px solid var(--linie); }
.abschnitt:first-of-type { border-top: 0; padding-top: 0; }
.abschnitt h2 { margin-bottom: 16px; }
.eingang { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.eingang .kasten { position: static; width: min(440px, 100%); }
.bearbeiten { width: min(760px, 100vw - 24px); max-width: none; background: var(--flaeche); border-radius: var(--r); }
.bearbeiten-innen { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding: 24px; }
.bearbeiten img { width: 100%; border-radius: var(--r-klein); }

@media (min-width: 861px) {
  .kundenseite .kopf { position: sticky; top: 0; z-index: 30; }
}
@media (max-width: 1100px) {
  .einstieg { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 860px) {
  .zweispaltig, .gross-innen, .bearbeiten-innen { grid-template-columns: minmax(0, 1fr); }
  .zweispaltig { gap: 32px; }
  .kasten { position: static; }
  .gross-bild img { max-height: 62vh; }
  .vw { grid-template-columns: minmax(0, 1fr); }
  .vw-seite { border-right: 0; border-bottom: 1px solid var(--linie); gap: 12px; }
  .vw-unten { margin-top: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .bundle { grid-template-columns: minmax(0, 1fr); }
  .bundle .werkzeug { justify-content: flex-start; }
}
@media (max-width: 520px) {
  main { padding-top: 24px; }
  .marke { gap: 8px; }
  .marke .marke-medaillon { width: 46px; height: 38px; }
  .marke .marke-wort { width: 146px; height: 16px; }
  .marke-zusatz { font-size: 12px; }
  .einstieg { gap: 24px; margin-bottom: 24px; }
  .einstieg-text p { font-size: 16px; margin-top: 12px; }
  /* Schritte schmal: drei kurze Zeilen mit Nummer, ohne Erläuterung – die Fotos sollen schnell kommen */
  .schritte { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 2px solid var(--tinte); }
  .schritte li { grid-template-columns: 24px minmax(0, 1fr); align-items: baseline; padding: 8px 0; border-top: 0; border-bottom: 1px solid var(--linie); }
  .schritte .leise { display: none; }
  .leer { padding: 24px 16px; }
  .raster { gap: 28px 12px; }
  .kachel-text { flex-direction: column; gap: 0; }
  .kachel .knopf { padding-inline: 8px; font-size: 15px; }
  .posten li { grid-template-columns: 72px minmax(0, 1fr); }
  .posten img { width: 72px; height: 90px; }
  .posten li .knopf { grid-column: 2; justify-self: start; }
  .linkzeile { flex-direction: column; }
}
@media (prefers-reduced-motion: no-preference) {
  .knopf, .reiter, .vw-nav button { transition: background-color 0.12s, border-color 0.12s, color 0.12s; }
  /* Kacheln blenden weich ein (die ersten leicht versetzt), das Foto rückt beim Überfahren ruhig näher */
  @keyframes einblenden { from { opacity: 0; transform: translateY(8px); } }
  .kachel { animation: einblenden 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .kachel:nth-child(2) { animation-delay: 0.04s; } .kachel:nth-child(3) { animation-delay: 0.08s; } .kachel:nth-child(4) { animation-delay: 0.12s; }
  .kachel:nth-child(5) { animation-delay: 0.16s; } .kachel:nth-child(6) { animation-delay: 0.2s; } .kachel:nth-child(n+7) { animation-delay: 0.24s; }
  .bildknopf { transition: box-shadow 0.2s; }
  .bildknopf img { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .kachel:hover .bildknopf img { transform: scale(1.03); }
  .gross[open] .gross-bild img { animation: einblenden 0.25s ease-out both; }
}