/* Kundengalerie */
body.protected img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body.protected .grid, body.protected .lightbox { user-select: none; -webkit-user-select: none; }

/* Kleine Großbuchstaben brauchen positive Laufweite */
.studio { text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; font-weight: 600; color: var(--muted); margin: 0 0 .9rem; }
.error-text { color: var(--danger); min-height: 1.5em; margin: .75rem 0 0; font-size: .9rem; }

/* ------------------------------------------------------------ Zugang */
.login { display: grid; place-items: center; padding: 2rem 1rem; }
.login-card { width: 100%; max-width: 380px; text-align: center; }
.login-card h1 { font-size: clamp(2.25rem, 7vw, 2.75rem); line-height: 1.04; letter-spacing: -.025em; }
.login-card form { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.75rem; }
.login-card input { text-align: center; font-size: 1.2rem; letter-spacing: .2em; padding: .85rem; border-radius: 999px; }
.login-card input::placeholder { letter-spacing: .02em; }
.login-card .btn { padding: .8rem 1.1rem; }

/* ------------------------------------------------------------ Kopf & Hinweise */
.g-header { text-align: center; padding: clamp(2.5rem, 8vw, 4.5rem) 1rem 1.75rem; max-width: 760px; margin: 0 auto; }
.g-header h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); line-height: 1.02; letter-spacing: -.028em; margin-bottom: .35em; }
.g-message { white-space: pre-line; margin: 1.1rem auto 0; max-width: 34rem; line-height: 1.6; }

.notice, .package-info { max-width: 900px; margin: 0 auto 1.25rem; padding: 1.15rem 1.35rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); width: calc(100% - 2rem); }
.notice.success { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 35%, transparent), 0 4px 16px rgba(31, 29, 26, .05); }
.notice h2 { font-size: 1.35rem; margin-bottom: .4rem; }
.pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; }
.pay-box { background: var(--surface-2); border-radius: var(--radius-sm); padding: .95rem 1.05rem; }
.pay-box h3 { font-family: var(--sans); font-size: .95rem; font-weight: 600; letter-spacing: -.005em; margin-bottom: .5rem; }
.kv { display: grid; grid-template-columns: auto 1fr auto; gap: .25rem .6rem; align-items: center; font-size: .9rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; word-break: break-all; }
.kv button { padding: .1rem .3rem; }
.package-info { font-size: .9rem; }
.package-info summary { cursor: pointer; font-weight: 600; list-style-position: outside; }
.package-info ul { margin: .5rem 0 0; padding-left: 1.2rem; }

/* ------------------------------------------------------------ Filterleiste
 * Schwebt als Glasmaterial über den Bildern. Statt einer harten Linie
 * erscheint ein weicher Übergang erst, wenn Bilder darunter durchlaufen. */
#toolbarSentinel { height: 1px; margin-bottom: -1px; }
.toolbar { position: sticky; top: 0; z-index: 20; padding: .55rem 1rem; transition: background-color .3s var(--ease-out); }
.toolbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: var(--material); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  transition: opacity .3s var(--ease-out);
}
.toolbar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 70%, transparent), transparent);
  transition: opacity .3s var(--ease-out);
}
.toolbar.stuck::before, .toolbar.stuck::after { opacity: 1; }

/* Segment-Auswahl */
.tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; width: max-content; max-width: 100%; margin: 0 auto;
  padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 550; font-size: .9rem; letter-spacing: -.003em;
  padding: .45rem .95rem; border-radius: 999px; cursor: pointer; white-space: nowrap; touch-action: manipulation;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .16s var(--ease-out);
}
.tab:active { transform: scale(var(--press)); transition-duration: .08s; }
.tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .06); }
.tab span { opacity: .6; font-size: .85em; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .tab:not(.active):hover { color: var(--text); } }

/* ------------------------------------------------------------ Raster
 * Gemischte Formate: justierte Zeilen */
.grid { display: flex; flex-wrap: wrap; gap: 6px; padding: 1rem; max-width: 1600px; margin: 0 auto; }
.grid::after { content: ""; flex-grow: 999; }
/* Gleiches Seitenverhältnis: echtes Spaltenraster, alles steht exakt untereinander */
.grid.uniform { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid.uniform.portrait { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.grid.uniform::after { content: none; }
.grid.uniform .tile .ratio { padding-bottom: calc(100% / var(--tile-ratio, 1.5)) !important; }
.tile {
  position: relative; overflow: hidden; background: var(--surface-2); cursor: zoom-in; border-radius: 4px;
  transition: transform .2s var(--ease-out);
}
/* Sofortige Rückmeldung beim Antippen */
.tile:active { transform: scale(.985); transition-duration: .1s; }
.tile .ratio { display: block; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease-out); }
.tile img.loaded { opacity: 1; }
.tile .shield { position: absolute; inset: 0; }
.tile .actions { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; }
.tile .flags { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; }

/* Runde Glasknöpfe über dem Bild */
.circle {
  width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; text-decoration: none;
  background: rgba(20, 18, 16, .32); color: #fff;
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, .15);
  touch-action: manipulation;
  transition: transform .2s var(--ease-out), background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.circle:active:not(:disabled) { transform: scale(.9); transition-duration: .08s; }
.circle.on { background: rgba(255, 255, 255, .95); color: var(--heart); }
.circle:disabled { cursor: default; }
/* Einen kleinen Trefferbereich um den Knopf herum für ungenaue Finger */
.circle::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.circle { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .circle:hover:not(:disabled):not(.on) { background: rgba(20, 18, 16, .5); }
}
.flag {
  font-size: .7rem; font-weight: 650; letter-spacing: .01em; padding: .2rem .55rem; border-radius: 999px;
  background: rgba(255, 255, 255, .88); color: #2a2723; display: inline-flex; align-items: center; gap: .25rem;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.flag.bought { background: var(--ok); color: #fff; }
.flag.ordered { background: var(--warn); color: #fff; }
.tile.is-selected::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--heart); border-radius: 4px; pointer-events: none; }

.g-footer { text-align: center; padding: 2.5rem 1rem 0; }
.g-footer:has(#priceNote:empty) { display: none; }

/* ------------------------------------------------------------ Auswahlleiste
 * Gleitet von unten herein und auf demselben Weg wieder hinaus. */
.cart-bar {
  --exit-ms: 260;
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 30;
  display: flex; gap: 1rem; align-items: center; width: max-content; max-width: calc(100vw - 2rem);
  padding: .5rem .5rem .5rem 1.3rem; border-radius: 999px;
  background: var(--material-thick); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 var(--material-edge), var(--shadow-float);
  transform: translate(-50%, calc(100% + 2rem)); opacity: 0;
  transition: transform .45s var(--ease-out), opacity .3s var(--ease-out);
}
.cart-bar.is-shown { transform: translate(-50%, 0); opacity: 1; }
.cart-bar:not(.is-shown) { transition-duration: .26s, .2s; pointer-events: none; }
.cart-info { display: flex; flex-direction: column; line-height: 1.25; font-size: .9rem; font-variant-numeric: tabular-nums; }
.cart-info strong { font-weight: 650; letter-spacing: -.005em; }

/* ------------------------------------------------------------ Lightbox
 * Abdunkelung (--dim) und Bedienelemente (--chrome) werden per Feder aus
 * gallery.js gesteuert, damit sie beim Wegziehen dem Finger folgen. */
.lightbox {
  --dim: 1; --chrome: 1;
  position: fixed; inset: 0; z-index: 400; color: #fff;
  background: rgb(10 9 8 / var(--dim));
  overscroll-behavior: contain;
}
.lightbox.is-closing { pointer-events: none; }
.lb-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: zoom-in; }
.lb-stage.zoomed { cursor: grab; }
.lb-stage.dragging { cursor: grabbing; }
.lb-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transform-origin: center center; pointer-events: none; will-change: transform;
  transition: opacity .2s var(--ease-out);
}
.lb-spinner { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px; border: 2.5px solid rgba(255,255,255,.18); border-top-color: rgba(255,255,255,.85); border-radius: 50%; animation: spin .8s linear infinite; display: none; }
.lb-spinner.on { display: block; animation-delay: .25s; opacity: 0; animation-name: spin, appear; animation-duration: .8s, .2s; animation-iteration-count: infinite, 1; animation-fill-mode: none, forwards; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes appear { to { opacity: 1; } }

/* Bedienleisten schweben über dem Bild; ein weicher Verlauf statt fester Balken */
.lb-top, .lb-bottom {
  position: absolute; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: .5rem;
  opacity: var(--chrome); pointer-events: none;
}
.lb-top > *, .lb-bottom > * { pointer-events: auto; }
.lb-top { top: 0; padding: max(.65rem, env(safe-area-inset-top)) .75rem 1.5rem; background: linear-gradient(to bottom, rgb(0 0 0 / .38), transparent); }
.lb-bottom { bottom: 0; justify-content: center; gap: .6rem; padding: 1.5rem .75rem max(.85rem, env(safe-area-inset-bottom)); background: linear-gradient(to top, rgb(0 0 0 / .38), transparent); }
.lb-counter { font-size: .9rem; font-weight: 550; font-variant-numeric: tabular-nums; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0,0,0,.3); padding-left: .35rem; }
.lb-btn, .lb-nav, .lb-action {
  border: 0; color: #fff; cursor: pointer; font: inherit; text-decoration: none; touch-action: manipulation;
  background: rgba(40, 38, 36, .45); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18);
  transition: transform .18s var(--ease-out), background-color .2s var(--ease-out), color .2s var(--ease-out), opacity .2s var(--ease-out);
}
.lb-btn, .lb-nav { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.lb-btn:active, .lb-nav:active, .lb-action:active:not(:disabled) { transform: scale(.92); transition-duration: .08s; }
.lb-nav { position: absolute; top: 50%; margin-top: -22px; z-index: 2; opacity: var(--chrome); }
.lb-nav.prev { left: .9rem; } .lb-nav.next { right: .9rem; }
.lb-action { display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px; padding: .65rem 1.15rem; font-weight: 550; }
.lb-action.on { background: rgba(255, 255, 255, .95); color: var(--heart); }
.lb-action:disabled { opacity: .5; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .lb-btn:hover, .lb-nav:hover, .lb-action:hover:not(:disabled):not(.on) { background: rgba(70, 66, 62, .6); }
}

/* Notiz-Fenster: wächst aus der Notiz-Schaltfläche (unten mittig) heraus */
.lb-comment {
  --exit-ms: 180;
  position: absolute; left: 50%; bottom: calc(4.75rem + env(safe-area-inset-bottom)); z-index: 3;
  width: min(520px, calc(100vw - 2rem)); padding: 1rem; border-radius: 18px;
  background: var(--material-thick); color: var(--text);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 var(--material-edge), 0 16px 48px rgba(0,0,0,.45);
  transform-origin: 50% 100%;
  transform: translate(-50%, 10px) scale(.95); opacity: 0;
  transition: transform .35s var(--ease-out), opacity .2s var(--ease-out);
}
.lb-comment.is-shown { transform: translate(-50%, 0) scale(1); opacity: 1; }
.lb-comment:not(.is-shown) { transition-duration: .18s; pointer-events: none; }
.lb-comment label { color: var(--text); font-weight: 600; }
.lb-comment textarea { margin-bottom: .5rem; }

@media (max-width: 640px) {
  .lb-nav { display: none; }
  .lb-action .label { display: none; }
  .lb-action { padding: .75rem; }
  .grid { padding: .4rem; gap: 4px; }
  .grid.uniform.portrait { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .tile.is-selected::after { border-radius: 2px; }
  .circle { width: 36px; height: 36px; }
}

/* ------------------------------------------------------------ Bestellung */
.checkout-summary { background: var(--surface-2); border-radius: var(--radius-sm); padding: .95rem 1.05rem; margin: 1rem 0; }
.coupon-row { display: flex; gap: .5rem; }
.coupon-row input { text-transform: uppercase; }
.legal-box { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }
@media (max-width: 640px) {
  .g-header { padding: 2.25rem 1rem 1.25rem; }
  .notice, .package-info { width: calc(100% - 1rem); padding: .95rem 1.05rem; }
}

/* ------------------------------------------------------------ Systemeinstellungen */
@media (prefers-reduced-motion: reduce) {
  .tile:active, .circle:active:not(:disabled), .tab:active,
  .lb-btn:active, .lb-nav:active, .lb-action:active:not(:disabled) { transform: none; }
  .cart-bar, .cart-bar.is-shown { transform: translate(-50%, 0); transition: opacity .2s ease; }
  .lb-comment, .lb-comment.is-shown { transform: translate(-50%, 0); transition: opacity .2s ease; }
}
@media (prefers-reduced-transparency: reduce) {
  .circle, .lb-btn, .lb-nav, .lb-action { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20, 18, 16, .78); }
  .circle.on, .lb-action.on { background: #fff; }
  .toolbar::before, .cart-bar, .lb-comment { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .circle, .lb-btn, .lb-nav, .lb-action { background: rgba(0, 0, 0, .85); box-shadow: inset 0 0 0 1.5px #fff; }
  .tabs { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
  .cart-bar { box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-float); }
}

/* ------------------------------------------------------------ Logo & Rechtliches */
.brand-logo { display: block; width: fit-content; margin: 0 auto 1.25rem; }
.brand-logo img { display: block; max-width: min(220px, 60vw); max-height: 88px; width: auto; height: auto; object-fit: contain; }
/* Dunkles Logo ohne eigene Dunkelmodus-Fassung: im Dunkelmodus aufhellen.
   invert + hue-rotate macht Dunkles hell und lässt Farbtöne ungefähr gleich. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-auto-invert img { filter: invert(1) hue-rotate(180deg); }
}
.legal-page { max-width: 680px; margin: 0 auto; padding: clamp(2.5rem, 8vw, 4.5rem) 1.25rem 4rem; }
.legal-page .brand-logo, .legal-page .studio { margin-left: 0; }
.legal-page h1 { font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.05; letter-spacing: -.022em; }
.legal-text { white-space: pre-line; line-height: 1.65; margin: 1.25rem 0 2rem; overflow-wrap: anywhere; }
/* Seiten als Spalte: Inhalt füllt den Platz, die Fußzeile sitzt immer ganz unten */
body.page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.page > main, body.page > #app { flex: 1 0 auto; }
.site-footer { text-align: center; padding: 2rem 1rem max(1.5rem, env(safe-area-inset-bottom)); transition: padding-bottom .3s var(--ease-out); }
.site-footer:empty { display: none; }
.site-footer a { color: var(--muted); margin: 0 .6rem; text-decoration: none; }
.site-footer a:focus-visible { text-decoration: underline; }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { color: var(--text); text-decoration: underline; } }
/* Platz für die schwebende Auswahlleiste */
body.has-cart .site-footer { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
body.has-cart .site-footer:empty { display: block; padding: 0 0 6.5rem; }

/* ------------------------------------------------------------ Ordner
 * Ordner als ruhige Text-Reiter über der Segment-Auswahl; die aktive Wahl
 * bekommt eine Unterstreichung, damit sie sich klar von den Filtern abhebt. */
.folders {
  display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; max-width: 100%;
  width: max-content; margin: 0 auto .45rem; padding: 0 .25rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 .75rem, #000 calc(100% - .75rem), transparent);
          mask-image: linear-gradient(to right, transparent, #000 .75rem, #000 calc(100% - .75rem), transparent);
}
.folders::-webkit-scrollbar { display: none; }
.folder {
  position: relative; border: 0; background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap;
  font: inherit; font-size: .95rem; font-weight: 550; letter-spacing: -.005em; padding: .45rem .7rem; border-radius: 10px;
  touch-action: manipulation; transition: color .2s var(--ease-out), background-color .2s var(--ease-out), transform .16s var(--ease-out);
}
.folder span { font-size: .8em; opacity: .65; font-variant-numeric: tabular-nums; margin-left: .15rem; }
.folder::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .15rem; height: 2px; border-radius: 2px;
  background: var(--text); transform: scaleX(0); transition: transform .3s var(--ease-out);
}
.folder.active { color: var(--text); }
.folder.active::after { transform: scaleX(1); }
.folder:active { transform: scale(var(--press)); transition-duration: .08s; }
@media (hover: hover) and (pointer: fine) { .folder:not(.active):hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); } }

/* Abschnitte unter „Alle Bilder“ */
.grids { min-height: 1px; }
.grid-title {
  max-width: 1600px; margin: 1.75rem auto 0; padding: 0 1rem;
  font-size: clamp(1.4rem, 3vw, 1.85rem); line-height: 1.1; letter-spacing: -.018em;
  display: flex; align-items: baseline; gap: .5rem;
}
.grid-section:first-child .grid-title { margin-top: .75rem; }
.grid-title button { all: unset; cursor: pointer; border-radius: 6px; }
.grid-title button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .grid-title button:hover { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; } }
.grid-title span { font-family: var(--sans); font-size: .8rem; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0; }
@media (max-width: 640px) { .grid-title { padding: 0 .5rem; margin-top: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .folder::after { transition: none; } .folder:active { transform: none; } }