/* =========================================================================
   ATELIER — Isakums Designsystem, dritte Fassung (31.08.2026)
   =========================================================================
   Der Inhaber am 31.08.: die Seite soll auf hoechstem Niveau gestaltet sein,
   modern, fluessig, aufwendig -- und fuer den Nutzer trotzdem kinderleicht.

   Drei Grundsaetze, an denen sich alles darunter messen laesst:

   1. RAUM STATT KAESTEN. Ein Blatt Papier braucht keinen Rahmen, es braucht
      Licht und einen Schatten. Wo bisher ein Kasten stand, steht jetzt eine
      Flaeche mit Tiefe.
   2. EINE SACHE PRO BLICK. Die Groessensprünge sind gross genug, dass das
      Auge die Reihenfolge von selbst findet: Bild, Name, Preis, Kauf.
   3. BEWEGUNG ERKLAERT. Jede Animation zeigt eine Ursache (etwas kam dazu,
      etwas wechselte, etwas wurde gewaehlt). Dekoratives Wackeln gibt es nicht.

   Farben in OKLCH: gleiche Zahl = gleiche wahrgenommene Helligkeit, deshalb
   bleiben Kontraste ueber die ganze Palette verlaesslich.
   ========================================================================= */

.v2-root,
.v2,
:root {
  /* ---- Papier: der Grund, auf dem alles liegt ------------------------- */
  --at-paper: oklch(0.945 0.014 84);
  --at-paper-warm: oklch(0.962 0.012 86);
  --at-paper-deep: oklch(0.912 0.017 82);
  --at-paper-edge: oklch(0.878 0.020 80);

  /* ---- Tinte ---------------------------------------------------------- */
  --at-ink: oklch(0.215 0.012 62);
  --at-ink-soft: oklch(0.395 0.011 66);
  --at-ink-mute: oklch(0.560 0.010 72);
  --at-ink-ghost: oklch(0.700 0.008 76);

  /* ---- Akzent: Isakums Tuerkisgruen (#4E9F78) ------------------------- */
  --at-accent: oklch(0.632 0.098 156);
  --at-accent-deep: oklch(0.480 0.090 157);
  --at-accent-soft: oklch(0.905 0.038 158);
  --at-accent-mist: oklch(0.966 0.014 158);

  /* ---- Linien: nie schwarz, immer getoente Tinte ---------------------- */
  --at-line: color-mix(in oklch, var(--at-ink) 14%, transparent);
  --at-line-strong: color-mix(in oklch, var(--at-ink) 26%, transparent);
  --at-line-hair: color-mix(in oklch, var(--at-ink) 8%, transparent);

  /* ---- Tiefe: warme Schatten, kein neutrales Grau --------------------- */
  --at-lift-1: 0 1px 2px color-mix(in oklch, var(--at-ink) 6%, transparent),
               0 2px 6px color-mix(in oklch, var(--at-ink) 4%, transparent);
  --at-lift-2: 0 2px 4px color-mix(in oklch, var(--at-ink) 6%, transparent),
               0 8px 20px color-mix(in oklch, var(--at-ink) 7%, transparent);
  --at-lift-3: 0 4px 10px color-mix(in oklch, var(--at-ink) 7%, transparent),
               0 18px 44px color-mix(in oklch, var(--at-ink) 10%, transparent);

  /* ---- Schriftfamilien (bestehende Marke) ----------------------------- */
  --at-serif: var(--f-editorial, Georgia, serif);
  --at-sans: var(--f-body, system-ui, sans-serif);
  --at-mono: var(--f-mono, ui-monospace, monospace);

  /* ---- Typo-Skala, Quarte (1.333), fluid ------------------------------ */
  --at-t-hero: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);
  --at-t-1: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
  --at-t-2: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  --at-t-3: clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem);
  --at-t-body: 1rem;
  --at-t-small: 0.875rem;
  --at-t-label: 0.6875rem;

  /* ---- Rhythmus ------------------------------------------------------- */
  --at-s-1: 0.25rem; --at-s-2: 0.5rem; --at-s-3: 0.75rem; --at-s-4: 1rem;
  --at-s-5: 1.5rem; --at-s-6: 2rem; --at-s-7: 3rem; --at-s-8: 4.5rem; --at-s-9: 7rem;

  /* ---- Radien --------------------------------------------------------- */
  --at-r-s: 6px; --at-r-m: 12px; --at-r-l: 20px; --at-r-pill: 999px;

  /* ---- Bewegung: ausschliesslich auslaufende Kurven ------------------- */
  --at-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --at-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --at-d-tap: 140ms;
  --at-d-swap: 280ms;
  --at-d-move: 460ms;
  --at-d-stage: 760ms;
}

/* --- 1: Schriftbild ------------------------------------------------------ */

.at-eyebrow {
  font-family: var(--at-mono);
  font-size: var(--at-t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--at-ink-mute);
  display: block;
}
.at-eyebrow--accent { color: var(--at-accent-deep); }

.at-display {
  font-family: var(--at-serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--at-ink);
  margin: 0;
  text-wrap: balance;
}
.at-display--hero { font-size: var(--at-t-hero); }
.at-display--1 { font-size: var(--at-t-1); }
.at-display--2 { font-size: var(--at-t-2); line-height: 1.08; }
.at-display .ital { font-style: italic; color: var(--at-accent-deep); }

.at-lede {
  font-family: var(--at-sans);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  color: var(--at-ink-soft);
  max-width: 62ch;
  margin: 0;
}
.at-text { font-size: var(--at-t-body); line-height: 1.65; color: var(--at-ink-soft); max-width: 68ch; }
.at-note { font-size: var(--at-t-small); line-height: 1.5; color: var(--at-ink-mute); }

.at-price {
  font-family: var(--at-serif);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--at-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  line-height: 1;
}
.at-price-pre {
  font-family: var(--at-mono);
  font-size: 0.6em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--at-ink-mute);
}
.at-price--xl { font-size: clamp(2.1rem, 1.7rem + 1.6vw, 2.9rem); }
.at-price--l { font-size: 1.6rem; }
.at-price--m { font-size: 1.15rem; }
.at-price--s { font-size: 0.95rem; }

@keyframes at-roll-in {
  from { transform: translateY(0.55em); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.at-price-wert { display: inline-block; }
.at-price-wert.ist-neu { animation: at-roll-in var(--at-d-swap) var(--at-ease) both; }

/* --- 2: Flaechen statt Kaesten ------------------------------------------ */

.at-sheet {
  background: var(--at-paper-warm);
  border-radius: var(--at-r-l);
  box-shadow: var(--at-lift-2);
  position: relative;
}

.at-well {
  background: radial-gradient(120% 90% at 50% 12%, var(--at-paper-warm) 0%, var(--at-paper) 46%, var(--at-paper-deep) 100%);
  border-radius: var(--at-r-l);
  position: relative;
  overflow: hidden;
}

.at-groundshadow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: min(56%, 440px);
  height: 4%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--at-ink) 20%, transparent), transparent 72%);
  filter: blur(7px);
  pointer-events: none;
  z-index: 0;
}

.at-rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--at-line), transparent);
  margin: var(--at-s-6) 0;
}

/* --- 3: Bedienelemente --------------------------------------------------- */

.at-btn {
  --at-btn-bg: var(--at-ink);
  --at-btn-fg: var(--at-paper-warm);
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 1.05em 1.7em;
  border-radius: var(--at-r-pill);
  background: var(--at-btn-bg);
  color: var(--at-btn-fg);
  font-family: var(--at-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--at-d-tap) var(--at-ease), box-shadow var(--at-d-swap) var(--at-ease), color var(--at-d-tap) linear;
  box-shadow: var(--at-lift-1);
}
.at-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--at-accent);
  translate: 0 101%;
  transition: translate var(--at-d-swap) var(--at-ease);
}
.at-btn:hover { transform: translateY(-2px); box-shadow: var(--at-lift-2); }
.at-btn:hover::before { translate: 0 0; }
.at-btn:active { transform: translateY(0) scale(0.985); box-shadow: var(--at-lift-1); }
.at-btn:focus-visible { outline: 2px solid var(--at-accent-deep); outline-offset: 3px; }

.at-btn--ghost {
  --at-btn-bg: transparent;
  --at-btn-fg: var(--at-ink);
  box-shadow: inset 0 0 0 1px var(--at-line-strong);
}
.at-btn--ghost:hover { --at-btn-fg: var(--at-paper-warm); box-shadow: var(--at-lift-2); }
.at-btn--accent { --at-btn-bg: var(--at-accent-deep); }
.at-btn--accent::before { background: var(--at-ink); }
.at-btn--big { padding: 1.25em 2.1em; font-size: 0.82rem; }
.at-btn--full { width: 100%; }
.at-btn[disabled], .at-btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none;
}
.at-btn[disabled]::before { display: none; }

.at-pick {
  appearance: none;
  border: 0;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  background: var(--at-paper-warm);
  color: var(--at-ink);
  border-radius: var(--at-r-m);
  box-shadow: inset 0 0 0 1px var(--at-line);
  font-family: var(--at-sans);
  text-align: center;
  transition: box-shadow var(--at-d-swap) var(--at-ease), transform var(--at-d-tap) var(--at-ease), background-color var(--at-d-swap) var(--at-ease);
}
.at-pick:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--at-line-strong), var(--at-lift-1); }
.at-pick:active { transform: translateY(0); }
.at-pick:focus-visible { outline: 2px solid var(--at-accent-deep); outline-offset: 2px; }
.at-pick[aria-pressed="true"], .at-pick.ist-gewaehlt {
  background: var(--at-accent-mist);
  box-shadow: inset 0 0 0 1.5px var(--at-accent), var(--at-lift-1);
}
.at-pick-check {
  position: absolute;
  top: 8px; right: 8px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--at-accent-deep);
  color: var(--at-paper-warm);
  display: grid;
  place-items: center;
  opacity: 0; scale: 0.6;
  transition: opacity var(--at-d-tap) var(--at-ease), scale var(--at-d-swap) var(--at-ease);
}
.at-pick[aria-pressed="true"] .at-pick-check, .at-pick.ist-gewaehlt .at-pick-check { opacity: 1; scale: 1; }
.at-pick-check svg { width: 12px; height: 12px; }
.at-pick[disabled] {
  cursor: not-allowed;
  color: var(--at-ink-ghost);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--at-line-hair);
}
.at-pick[disabled]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top left, transparent calc(50% - 0.5px), var(--at-line-strong) 50%, transparent calc(50% + 0.5px));
  border-radius: inherit;
}

.at-swatch {
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 38px; height: 38px;
  border-radius: 50%;
  position: relative;
  padding: 0;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--at-ink) 18%, transparent),
              inset 0 -2px 5px color-mix(in oklch, var(--at-ink) 12%, transparent);
  transition: transform var(--at-d-swap) var(--at-ease);
}
.at-swatch:hover { transform: scale(1.08); }
.at-swatch:focus-visible { outline: 2px solid var(--at-accent-deep); outline-offset: 3px; }
.at-swatch::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--at-accent);
  opacity: 0; scale: 0.82;
  transition: opacity var(--at-d-tap) var(--at-ease), scale var(--at-d-swap) var(--at-ease);
}
.at-swatch[aria-pressed="true"]::after { opacity: 1; scale: 1; }

/* --- 4: Eintritt --------------------------------------------------------- */

@keyframes at-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes at-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes at-scale-in { from { opacity: 0; transform: scale(0.965); } to { opacity: 1; transform: none; } }

.at-rise { animation: at-rise var(--at-d-move) var(--at-ease) both; }
.at-rise-2 { animation: at-rise var(--at-d-move) var(--at-ease) 70ms both; }
.at-rise-3 { animation: at-rise var(--at-d-move) var(--at-ease) 140ms both; }
.at-rise-4 { animation: at-rise var(--at-d-move) var(--at-ease) 210ms both; }
.at-rise-5 { animation: at-rise var(--at-d-move) var(--at-ease) 280ms both; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .at-enter {
      animation: at-rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
  }
}

/* --- 5: Hilfen ----------------------------------------------------------- */

.at-stack { display: flex; flex-direction: column; }
.at-stack > * + * { margin-top: var(--at-gap, var(--at-s-4)); }
.at-row { display: flex; align-items: center; gap: var(--at-gap, var(--at-s-3)); }
.at-wrap { flex-wrap: wrap; }
.at-grow { flex: 1 1 auto; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .at-rise, .at-rise-2, .at-rise-3, .at-rise-4, .at-rise-5, .at-enter,
  .at-price-wert.ist-neu { animation: none !important; }
  .at-btn, .at-pick, .at-swatch { transition-duration: 1ms !important; }
  .at-btn::before { display: none; }
}

/* ============================================================================
   Bausteine „ohne Lesen verstehen“ (30.08.2026) — Präfix bk-
   Vorlage: frontend/_Claude/GESTALTUNG_OHNE_LESEN.md
   Gilt nach styles.css; nutzt dessen Tokens (--paper, --ink, --accent, --muted,
   --f-display, --f-body). Keine Mono-Sperrschrift für Bedienelemente.
   ============================================================================ */

.v2-root {
  --bk-rahmen: 1.5px solid var(--ink);
  --bk-radius: 6px;
  --bk-tipp: 44px;            /* Mindest-Tippziel */
  --bk-gewaehlt: var(--accent);
  --bk-flaeche: var(--paper-2);
}

/* ── Kachel ─────────────────────────────────────────────────────────────── */
.bk-kachel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--f-body);
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease-out;
}
.bk-kachel:active { transform: scale(0.985); }
.bk-kachel:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--bk-radius); }
.bk-kachel-bild {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  background: var(--bk-flaeche);
  border: var(--bk-rahmen);
  border-radius: var(--bk-radius);
  overflow: hidden;
  color: var(--ink);
  transition: border-color .18s, box-shadow .18s;
}
.bk-kachel--breit .bk-kachel-bild { aspect-ratio: 4 / 3; }
.bk-kachel-bild > svg { width: 78%; height: auto; }
.bk-kachel-bild img { border-radius: calc(var(--bk-radius) - 2px); }
.ist-gefuellt .bk-kachel-bild img { border-radius: 0; }
.bk-kachel-emoji {
  font-size: clamp(44px, 12vw, 72px);
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.bk-kachel--klein .bk-kachel-emoji { font-size: 40px; }
.bk-kachel--gross .bk-kachel-emoji { font-size: clamp(64px, 14vw, 96px); }
.bk-kachel-plus {
  font-family: var(--f-display);
  font-size: 56px;
  line-height: 1;
  color: var(--muted);
}
.bk-kachel-titel {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}
.bk-kachel--klein .bk-kachel-titel { font-size: 14px; }
.bk-kachel--gross .bk-kachel-titel { font-family: var(--f-display); font-weight: 400; font-size: 26px; }
.bk-kachel-unter {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}
.bk-kachel-marke {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 3px 8px;
  font-family: var(--f-display);
  font-size: 15px;
  line-height: 1.1;
}
.bk-kachel-haken {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bk-gewaehlt);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bk-kachel.ist-gewaehlt .bk-kachel-bild {
  border: 3px solid var(--bk-gewaehlt);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bk-gewaehlt) 22%, transparent);
}
.bk-kachel.ist-gewaehlt .bk-kachel-titel { color: var(--bk-gewaehlt); }
.bk-kachel.ist-gesperrt { cursor: not-allowed; opacity: .45; }
.bk-kachel.ist-mehr .bk-kachel-bild { border-style: dashed; background: transparent; }
@media (hover: hover) {
  .bk-kachel:not(.ist-gesperrt):hover .bk-kachel-bild { border-color: var(--accent); }
}

/* ── Raster ─────────────────────────────────────────────────────────────── */
.bk-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px 16px;
}
.bk-raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk-raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bk-raster--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 900px) {
  /* Vierer-Raster wird zu 2x2, sonst steht eine Kachel allein in der zweiten Zeile (768 px). */
  .bk-raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-raster--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .bk-raster, .bk-raster--3, .bk-raster--4, .bk-raster--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
}

/* ── Bilderleiste ───────────────────────────────────────────────────────── */
.bk-leiste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  align-items: stretch;
}
.bk-leiste-feld { position: relative; }
.bk-leiste-feld + .bk-leiste-feld::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 27px;
  width: 8px;
  height: 2px;
  background: var(--paper-3);
}
.bk-leiste-knopf {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 6px 10px;
  border: var(--bk-rahmen);
  border-radius: var(--bk-radius);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  text-align: left;
  cursor: default;
}
button.bk-leiste-knopf { cursor: pointer; }
.bk-leiste-bild {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--bk-flaeche);
  overflow: hidden;
}
.bk-leiste-bild > svg { width: 24px; height: 24px; }
.bk-leiste-bild > img, .bk-leiste-bild > .bk-mini { width: 100%; height: 100%; object-fit: cover; }
.bk-leiste-haken {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bk-gewaehlt);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bk-leiste-titel { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.bk-leiste-nr {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bk-leiste-feld.ist-offen .bk-leiste-knopf { color: var(--muted); border-color: var(--paper-3); }
.bk-leiste-feld.ist-aktiv .bk-leiste-knopf { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.bk-leiste-feld.ist-aktiv .bk-leiste-bild { background: rgb(255 255 255 / 0.12); }
.bk-leiste-feld.ist-erledigt .bk-leiste-knopf { border-color: var(--bk-gewaehlt); }
.bk-leiste-feld.ist-erledigt .bk-leiste-titel { color: var(--bk-gewaehlt); }
@media (max-width: 680px) {
  .bk-leiste { gap: 6px; }
  .bk-leiste-feld + .bk-leiste-feld::before { display: none; }
  .bk-leiste-knopf { min-height: 50px; padding: 5px 6px; gap: 6px; flex-direction: column; justify-content: center; }
  .bk-leiste-bild { width: 34px; height: 34px; }
  .bk-leiste-bild > svg { width: 20px; height: 20px; }
  .bk-leiste-titel { font-size: 12px; gap: 5px; }
  .bk-leiste-nr { width: 16px; height: 16px; font-size: 10px; }
}

/* ── Preisstein ─────────────────────────────────────────────────────────── */
.bk-preis { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--f-display); color: var(--ink); white-space: nowrap; }
.bk-preis-ab { font-family: var(--f-body); font-size: 13px; color: var(--muted); }
.bk-preis-betrag { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.bk-preis--klein .bk-preis-betrag { font-size: 20px; }
.bk-preis--gross .bk-preis-betrag { font-size: 44px; }

/* ── Knopf ──────────────────────────────────────────────────────────────── */
.bk-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, color .18s, transform .18s;
}
.bk-knopf--haupt { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bk-knopf--haupt:hover { background: var(--accent); border-color: var(--accent); }
.bk-knopf--neben:hover { background: var(--paper-2); }
.bk-knopf--leise { border-color: transparent; background: transparent; color: var(--muted); }
.bk-knopf--leise:hover { color: var(--ink); }
.bk-knopf:disabled { opacity: .4; cursor: not-allowed; }
.bk-knopf:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.bk-knopf.ist-breit { width: 100%; }
.bk-knopf-zeichen, .bk-knopf-pfeil { display: inline-flex; }
.bk-knopf-pfeil.ist-links { transform: rotate(180deg); }
.bk-knopf:hover .bk-knopf-pfeil:not(.ist-links) { transform: translateX(3px); }

/* ── Faktenzeile ────────────────────────────────────────────────────────── */
.bk-fakten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.bk-fakten li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-body); font-size: 14px; color: var(--ink-soft); }
.bk-fakten-zeichen { display: inline-flex; color: var(--ink); }

/* ── Bildstreifen ───────────────────────────────────────────────────────── */
.bk-streifen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.bk-streifen-feld { position: relative; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.bk-streifen-bild {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bk-flaeche);
  border: var(--bk-rahmen);
  border-radius: var(--bk-radius);
  overflow: hidden;
  color: var(--ink);
}
.bk-streifen-bild > svg { width: 70%; height: auto; }
.bk-streifen-titel { font-family: var(--f-body); font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.bk-streifen-nr { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.bk-streifen-pfeil {
  position: absolute;
  right: -20px;
  top: calc(50% - 32px);
  width: 22px;
  color: var(--accent-text, var(--accent));
  display: flex;
}
@media (max-width: 680px) {
  .bk-streifen { gap: 10px; }
  .bk-streifen-titel { font-size: 13px; }
  .bk-streifen-pfeil { right: -12px; top: 32%; width: 14px; }
}

/* ── Handlungsleiste ────────────────────────────────────────────────────── */
.bk-handlung {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0 0;
}
.bk-handlung-links { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bk-handlung-rechts { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
@media (max-width: 680px) {
  .bk-handlung {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 10px var(--edge, 18px) calc(10px + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1.5px solid var(--ink);
  }
  .bk-handlung .bk-knopf { min-height: 50px; padding: 0 18px; }
  .bk-handlung-abstand { height: 84px; }
}

/* ── Textabdeck-Prüfung (nur für Screenshots, per Klasse am Root) ───────── */
.bk-ohne-text, .bk-ohne-text * { color: transparent !important; text-shadow: none !important; }
.bk-ohne-text svg, .bk-ohne-text svg *, .bk-ohne-text img, .bk-ohne-text .bk-kachel-emoji, .bk-ohne-text [role="img"] { color: var(--ink) !important; }
/* currentColor loest sich am Kind auf: ohne `svg *` wuerden Pfade mit stroke=currentColor durchsichtig. */
.bk-ohne-text .bk-knopf--haupt svg, .bk-ohne-text .bk-knopf--haupt svg *, .bk-ohne-text .mobile-menu-trigger svg, .bk-ohne-text .mobile-menu-trigger svg * { color: var(--paper) !important; } /* Zeichen auf dunklem Knopf bleiben hell */
.bk-ohne-text .bk-kachel-emoji { color: initial !important; }

/* ── Kachelfuß: Faktenzeile in der Kachel ───────────────────────────────── */
.bk-kachel-fuss { display: block; margin-top: 2px; }
.bk-kachel-fuss .bk-fakten { justify-content: center; gap: 6px 16px; }

/* ── Miniatur in der Bilderleiste ───────────────────────────────────────── */
.bk-leiste-bild > .bk-mini { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bk-leiste-bild > .bk-mini > svg { width: auto; height: 84%; max-width: 100%; }
.bk-leiste-bild > .bk-mini > img { width: 100%; height: 100%; object-fit: cover; }
.bk-mini-emoji {
  font-size: 24px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
@media (max-width: 680px) { .bk-mini-emoji { font-size: 20px; } }

/* ── Eingabefeld (Feld mit Zeichen) ─────────────────────────────────────── */
.bk-feld {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--paper);
  border: var(--bk-rahmen);
  border-radius: var(--bk-radius);
  transition: border-color .18s, box-shadow .18s;
}
.bk-feld:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.bk-feld-zeichen { display: inline-flex; flex-shrink: 0; padding-top: 3px; color: var(--muted); }
.bk-feld-eingabe {
  flex: 1;
  min-width: 0;
  min-height: 26px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;         /* 16px verhindert das Zoomen beim Tippen am Handy */
  line-height: 1.45;
  resize: vertical;
}
.bk-feld-eingabe::placeholder { color: var(--muted); opacity: .7; }
.bk-feld--gross { padding: 16px 18px; }
.bk-feld--gross .bk-feld-eingabe { font-size: 19px; line-height: 1.5; }
.bk-feld--gross .bk-feld-zeichen { padding-top: 5px; }

/* ============================================================================
   Wizard „ohne Lesen verstehen“ (/erstellen) — Präfix bkw-
   Die alte .wiz-*-Gestaltung in styles.css benutzt dieser Schritt nicht mehr
   (Ausnahme: die Bot-Schutz-Modal .wiz-turnstile-*). Sie bleibt dort stehen,
   weil der statische Entwurf public/v2/wizard.html sie weiter liest.
   ============================================================================ */

/* Kopf: Marke links, Bilderleiste in der Mitte, Abbrechen als Kreuz rechts. */


/* Bühne und Schrittkopf */


/* Schritt 1: zwei große Produktkacheln */


/* Schritt 2: zwei Wege, jeder zeigt in der Bildfläche, was kommt */


/* Beispielsätze als kleine Kacheln */


/* Gewähltes in der Handlungsleiste: Bild und Emoji groß, keine Aufzählung */


/* Abschluss: Zusammenfassung, Fakten, ein Knopf */


/* Feinschliff: Zielgruppe als Kacheln, Spruch als Feld */


/* Laden und Fehler: ein Zeichen, ein kurzes Wort */



/* Wizard: Beispielsaetze und Abstand unter dem Satzfeld (30.08.2026) */


/* Produktkacheln im Wizard: die Zeichnung fuellt die breite Bildflaeche (30.08.2026) */
.bk-raster--6 .bk-kachel-emoji { font-size: clamp(40px, 5vw, 64px); }

/* ── Designseite (bk-pdp-, 30.08.2026) ─────────────────────────────────── */
.bk-pdp-anker { display: flex; align-items: center; gap: 18px; margin: 14px 0 6px; color: var(--ink); }
.bk-pdp-anker > svg { flex-shrink: 0; width: 150px; height: auto; }
.bk-pdp-anker-preis { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bk-pdp-anker-versand { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-body); font-size: 13px; color: var(--muted); }
.bk-pdp-block { margin-top: 22px; }
.bk-pdp-titel { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--f-body); font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: 0; text-transform: none; }
.bk-pdp-titel small { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--muted); }
.bk-pdp-stoffbild { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink); }
.bk-pdp-gramm { font-family: var(--f-display); font-size: 26px; line-height: 1; }
.bk-pdp-gramm small { font-family: var(--f-body); font-size: 12px; color: var(--muted); }
.bk-pdp-stoffe .bk-kachel-bild, .bk-pdp-optionen .bk-kachel-bild { aspect-ratio: 5 / 3; }
.bk-pdp-optionen .bk-kachel-bild > svg { width: auto; height: 78%; }
.bk-pdp-farben { display: flex; flex-wrap: wrap; gap: 12px; }
.bk-pdp-farbe {
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--ink); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px var(--paper);
}
.bk-pdp-farbe.ist-gewaehlt { box-shadow: inset 0 0 0 3px var(--paper), 0 0 0 3px var(--accent); border-color: var(--accent); }
.bk-pdp-farbe-haken { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--paper); align-items: center; justify-content: center; }
.bk-pdp-groessen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bk-pdp-groessen .bk-kachel-bild { aspect-ratio: 5 / 3; }
.bk-pdp-groessen .bk-kachel-titel { display: none; }
.bk-pdp-groesse { font-family: var(--f-display); font-size: 30px; line-height: 1; color: var(--ink); }
.bk-pdp-kaufen { margin-top: 24px; padding-top: 18px; border-top: 1.5px solid var(--ink); }
.bk-pdp-kaufen .bk-handlung { position: static; padding: 0; border: 0; background: transparent; }
.bk-pdp-vertrauen { margin: 22px 0 10px; }
.pdp-sticky-meta .bk-preis-betrag { font-size: 20px; }
.pdp-sticky-meta > svg { width: 34px; height: auto; margin-right: 8px; }
@media (max-width: 680px) {
  .bk-pdp-anker > svg { width: 120px; }
  .bk-pdp-groessen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .bk-pdp-groesse { font-size: 24px; }
}

/* ── Warenkorb (bk-cart-, 30.08.2026) ──────────────────────────────────── */
.bk-cart-leiste { max-width: 760px; margin-bottom: 22px; }
.bk-cart-liste { list-style: none; margin: 0; padding: 0; }
.bk-cart-position { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 20px; padding: 22px 0; border-bottom: 1.5px solid var(--paper-3); align-items: start; }
.bk-cart-bild { display: block; aspect-ratio: 1 / 1; background: var(--paper-2); border: var(--bk-rahmen); border-radius: var(--bk-radius); overflow: hidden; }
.bk-cart-mitte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bk-cart-titel { font-family: var(--f-display); font-size: 21px; line-height: 1.15; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; padding: 6px 0; margin: -6px 0; }
.bk-cart-wahl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bk-cart-zeichnung { display: inline-flex; color: var(--ink); }
.bk-cart-zeichnung svg { width: 96px; height: auto; }
.bk-cart-groesse { font-family: var(--f-display); font-size: 30px; line-height: 1; color: var(--ink); padding: 6px 12px; border: var(--bk-rahmen); border-radius: var(--bk-radius); background: var(--paper-2); }
.bk-cart-farbe { font-family: var(--f-body); font-size: 14px; color: var(--ink-soft); }
.bk-cart-menge { display: inline-flex; align-items: center; gap: 8px; }
.bk-cart-mengenknopf { width: 44px; height: 44px; border-radius: 50%; border: var(--bk-rahmen); background: var(--paper); font-family: var(--f-body); font-size: 22px; line-height: 1; color: var(--ink); cursor: pointer; }
.bk-cart-mengenknopf:hover { background: var(--paper-2); }
.bk-cart-mengenzahl { min-width: 32px; text-align: center; font-family: var(--f-display); font-size: 22px; }
.bk-cart-entfernen { margin-left: 10px; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--paper-3); background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bk-cart-entfernen:hover { border-color: var(--ink); color: var(--ink); }
.bk-cart-preis { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bk-cart-stueck { font-family: var(--f-body); font-size: 12px; color: var(--muted); }
.bk-cart-uebersicht { position: sticky; top: 120px; }
.bk-cart-kasten { border: var(--bk-rahmen); border-radius: var(--bk-radius); padding: 22px 22px 24px; background: var(--paper); display: flex; flex-direction: column; gap: 12px; }
.bk-cart-zeile { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-body); font-size: 15px; color: var(--ink-soft); }
.bk-cart-zeile > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.bk-cart-gruen { color: var(--accent-text, var(--accent)); }
.bk-cart-summe { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1.5px solid var(--ink); font-family: var(--f-body); font-size: 16px; font-weight: 600; }
.bk-cart-fakten { margin: 2px 0 6px; }
@media (max-width: 680px) {
  .bk-cart-position { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .bk-cart-preis { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; }
  .bk-cart-zeichnung svg { width: 80px; }
  .bk-cart-groesse { font-size: 24px; }
  .bk-cart-uebersicht { position: static; }
}

/* ── Kasse (bk-kasse-, 30.08.2026) ─────────────────────────────────────── */
.bk-kasse-leiste { max-width: 1240px; margin: 28px auto 26px; padding: 0 var(--edge); } /* wie .section (1240 px): die Linie beginnt am Textrand, 28 px unter der Einleitung */
.bk-kasse-label { display: flex; align-items: center; gap: 8px; }
.bk-kasse-zeichen { display: inline-flex; color: var(--ink); }
.bk-kasse-raten { margin-top: 10px; }
.bk-kasse-raten .bk-kachel-bild { aspect-ratio: 5 / 2; color: var(--ink); }
.bk-kasse-wahl { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.bk-kasse-mini { display: inline-flex; color: var(--ink); }
.bk-kasse-mini svg { width: 64px; height: auto; }
.bk-kasse-groesse { font-family: var(--f-display); font-size: 22px; line-height: 1; padding: 4px 9px; border: var(--bk-rahmen); border-radius: 4px; background: var(--paper-2); }
.bk-kasse-farbe, .bk-kasse-menge { font-family: var(--f-body); font-size: 13px; color: var(--muted); }
.bk-kasse-fakten { margin-top: 14px; }
.v2k-summary .bk-fakten li { font-size: 13px; }
.v2k-form .bk-kasse-label, .v2k-label.bk-kasse-label { font-family: var(--f-body); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }

/* ── Startseite (bks-, 30.08.2026) ─────────────────────────────────────── */
.bks-hero-handlung { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.bks-hero-fakten { margin-top: 22px; }
.bks-ablauf { margin-top: 28px; }
.bks-ablauf .bk-streifen-bild { position: relative; }
.bks-ablauf .bk-streifen-bild img { object-fit: cover; }
.bks-sprechblase { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 70%; aspect-ratio: 1 / 1; color: var(--ink); }
.bks-sprechblase > svg { width: 100%; height: auto; }
.bks-sprechblase-bild { position: absolute; top: 16%; left: 50%; transform: translateX(-50%); width: 46%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; }
.bks-sprechblase-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bks-ablauf-text { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 16px; }
.bks-ablauf-text p { margin: 0; font-family: var(--f-body); font-size: 14px; line-height: 1.45; color: var(--muted); text-align: center; }
.bks-editionen-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.bks-edition .bk-kachel-bild > svg { width: 92%; }
.bks-welten { margin-top: 26px; }
.bks-schluss-knopf { margin-top: 24px; }
footer .footer-col h4 { display: flex; align-items: center; gap: 8px; }
footer .footer-col h4 svg, footer .footer-col a svg { flex-shrink: 0; }
footer .footer-col a { display: flex; align-items: center; gap: 8px; } /* flex, nicht inline-flex: sonst laufen die Links einer Spalte ineinander */
.bks-fuss-shirt svg { width: 26px; height: auto; }
@media (max-width: 680px) {
  .bks-ablauf-text { grid-template-columns: 1fr; gap: 6px; }
  .bks-ablauf-text p { text-align: left; font-size: 13px; }
  .bks-editionen-raster { grid-template-columns: 1fr; gap: 18px; }
  .bks-hero-handlung .bk-preis--gross .bk-preis-betrag { font-size: 34px; }
}

/* ---------- Nebenseiten (30.08.2026): Preise, Ablauf, Fragen, Versand, Galerie, Menü ---------- */
.bks-preise-rundum { margin-top: 18px; }
.bks-preise-rundum .bk-kachel { max-width: 720px; }
.bks-preise-fakten { margin-top: 28px; }
.bks-preise-knopf { margin-top: 28px; display: flex; justify-content: center; }
.bks-schritte { margin-top: 36px; }
.bks-schritte .bk-kachel-unter { white-space: normal; line-height: 1.5; }
.bk-faq-frage { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bk-faq-zeichen { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); }
.bk-faq-fakten { margin-bottom: 36px; }
.bks-versand { margin-bottom: 36px; }
.bks-versand .bk-kachel-emoji { font-size: 56px; }
.bks-versand-fakten { margin-top: 20px; }
.bk-galerie-filter { margin: 0 0 28px; }
.bk-galerie-zahl { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; }
.bk-dc-preis { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.bk-dc-flaeche { display: inline-flex; color: var(--muted); }
.bk-dc-flaeche svg { width: 22px; height: auto; }
/* Menue (05.09.2026, zweite Runde; Owner: "sehr ueberfuellt, Information
   overload, nicht sauber, geht deutlich moderner"): volle Breite, fuenf Ziele
   als grosse Zeilen in der Anzeigeschrift, sonst nichts; ein Knopf mit dem
   Einstiegspreis als Nebensatz; ganz unten Konto und Warenkorb. Keine
   Untertitel, keine Piktogramme in der Liste, keine Pfeile, keine Sprache
   (die steht im Fuss der Seite). */
.mobile-menu-drawer { width: 100vw !important; box-shadow: none !important; }
.mmd-head { padding: 14px var(--edge) !important; border-bottom: 0 !important; }
.mmd-nav { padding: 18px 0 8px !important; flex: 0 0 auto !important; }
/* Die Kopfzeilenregel ".v2-root .topbar .nav-right a:not(.chip-link)" (Sans, 0.92rem)
   trifft auch die Menuezeilen, weil das Menue im DOM unter .nav-right haengt;
   deshalb hier mit derselben Tiefe plus .mmd-nav. */
.v2-root .topbar .nav-right .mobile-menu-drawer nav.mmd-nav a, .v2-root .topbar .nav-right .mmd-nav a, .v2-root .mmd-nav a, .v2-root .mmd-nav a * {
  display: block !important;
  padding: 12px var(--edge) !important;
  min-height: 0 !important;
  border-bottom: 0 !important;
  font-family: var(--f-display) !important;
  font-size: 34px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.015em !important;
  color: var(--at-ink, #141311) !important;
  text-decoration: none !important;
}
.v2-root .topbar .nav-right .mmd-nav a:active, .v2-root .mmd-nav a:active { background: transparent !important; color: var(--at-ink-mute, #6B655A) !important; }
.mmd-cta-block { margin-top: auto; padding: 18px var(--edge) 10px !important; border-top: 0 !important; background: transparent !important; }
.mmd-cta-hint { display: block !important; margin-top: 10px !important; text-align: center; font-family: var(--f-body) !important; font-size: 13px !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--at-ink-mute, #6B655A) !important; }
.mmd-foot { display: flex !important; gap: 22px; padding: 8px var(--edge) 26px !important; border-top: 0 !important; }
.v2-root .topbar .nav-right .mobile-menu-drawer .mmd-foot a, .v2-root .topbar .nav-right .mmd-foot a, .mmd-foot a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-body) !important; font-size: 14px !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--at-ink-mute, #6B655A) !important; min-height: 40px; }
.mmd-nav a > .mmd-nav-label, .mmd-nav a > .mmd-nav-hint { grid-column: 2; }
.mmd-cta-hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mmd-foot a { display: inline-flex; align-items: center; gap: 8px; }
.bk-cart-sticky-zahl { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 13px; margin-top: 4px; }
.v2-cart-sticky-meta { display: flex; flex-direction: column; align-items: flex-start; }
@media (max-width: 680px) {
  .bks-versand .bk-kachel-emoji { font-size: 44px; }
  .bks-schritte.bk-raster { grid-template-columns: 1fr; }
  /* Galerie-Filter mobil vierspaltig, sonst stehen acht Kacheln vor dem ersten Shirt. */
  .bk-galerie-filter.bk-raster { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .bk-galerie-filter .bk-kachel-titel { font-size: 12px; }
  .bk-galerie-filter .bk-galerie-zahl { font-size: 10px; }
  /* 05.09.2026: Kartenfuss bleibt EINE Zeile, Name mit Auslassung, Preis rechts
     (Owner: "manche drei Zeilen, manche eine, alles einheitlich in einer Zeile"). */
  .bks-schritte .bk-kachel-bild { aspect-ratio: 16 / 9; }
}
.bk-mini-bild { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }


/* ---------- Druckflaechen als Foto (30.08.2026) ---------- */
/* Die Fotos skalieren mit der Breite: hoechstens --df-h hoch, nie breiter als
   ihr Anteil der Kachel (2 Bilder 47 %, 3 Bilder 31 %), sonst schnitt die Kachel
   auf dem Handy die Shirts an den Seiten ab. */
.bk-dfbild { display: flex; align-items: flex-end; justify-content: center; gap: 4%; width: 100%; max-height: var(--df-h, 240px); }
.bk-dfbild img { width: auto; height: auto; max-height: var(--df-h, 240px); max-width: 47%; object-fit: contain; }
.bk-dfbild--1 img { max-width: 100%; }
.bk-dfbild--3 img { max-width: 31%; }

/* ---------- Feinheiten (30.08.2026) ---------- */
/* Das Haekchen zeichnet sich, wenn eine Kachel gewaehlt wird. */
.bk-kachel.ist-gewaehlt .bk-kachel-haken svg path { stroke-dasharray: 32; stroke-dashoffset: 32; animation: bk-zeichnen .45s cubic-bezier(.2,.7,.2,1) .05s forwards; }
@keyframes bk-zeichnen { to { stroke-dashoffset: 0; } }
/* Die Demo: Satz in der Sprechblase, Shirt daneben. */
.bks-sprechblase.ist-demo { width: 82%; }
.bks-sprechblase-satz { position: absolute; top: 20%; left: 12%; right: 12%; bottom: 30%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--f-display); font-style: italic; font-size: clamp(14px, 1.5vw, 24px); line-height: 1.25; color: var(--ink); }
.bks-sprechblase-cursor { display: inline-block; width: 2px; height: 1em; margin-left: 2px; background: var(--accent); vertical-align: -0.15em; animation: bk-blink .9s steps(1) infinite; }
@keyframes bk-blink { 50% { opacity: 0; } }
.bks-demo-shirt { position: absolute; inset: 0; display: block; }
.bks-demo-haken { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; transform: scale(0); transition: transform .35s cubic-bezier(.2,.9,.3,1.3); }
.bks-demo-haken.ist-da { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .bk-kachel.ist-gewaehlt .bk-kachel-haken svg path { animation: none; stroke-dashoffset: 0; } .bks-sprechblase-cursor { animation: none; } }
@media (max-width: 680px) { .bks-sprechblase-satz { font-size: 11px; top: 18%; left: 10%; right: 10%; } }
.bks-groessen { display: flex; align-items: flex-end; justify-content: center; gap: 2%; width: 100%; }
.bks-groessen .bk-dfbild { width: auto; }
.bks-groessen .bk-dfbild img { max-width: none; }
/* In der Demo tippt der Satz IN die Blase, die gezeichneten Zeilen weichen. */
.bks-sprechblase.ist-demo > svg path:nth-of-type(2) { display: none; }
.bks-sprechblase-satz { font-size: clamp(15px, 1.7vw, 27px); top: 16%; bottom: 32%; }

/* ---------- Demo-Notizkarte (30.08.2026, ersetzt die grosse Sprechblase) ---------- */
.bks-notiz { position: relative; display: flex; flex-direction: column; justify-content: center; width: 78%; aspect-ratio: 1 / 1; padding: 8% 9%; background: var(--paper); border: 1px solid rgb(19 21 17 / 0.14); border-radius: 10px; box-shadow: 0 10px 30px -18px rgb(19 21 17 / 0.35); }
.bks-notiz-kopf { position: absolute; top: 8%; left: 9%; right: 9%; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.bks-notiz-linie { flex: 1 1 auto; height: 1px; background: rgb(19 21 17 / 0.14); }
.bks-notiz-satz { font-family: var(--f-display); font-style: italic; font-size: clamp(16px, 1.9vw, 30px); line-height: 1.2; color: var(--ink); text-align: left; letter-spacing: -0.01em; }
.bks-notiz-stift { position: absolute; right: 8%; bottom: 7%; color: var(--accent-text, var(--accent)); }
.bks-demo-shirt { background: var(--paper); }
/* Bildstreifen mobil untereinander, Pfeile zeigen nach unten */
@media (max-width: 680px) {
  .bks-ablauf.bk-streifen { grid-template-columns: 1fr; gap: 26px; }
  .bks-ablauf .bk-streifen-feld { width: 100%; }
  .bks-ablauf .bk-streifen-pfeil { position: static; transform: rotate(90deg); margin: 2px auto 0; }
  .bks-notiz-satz { font-size: 20px; }
}

/* Leere Notizkarte (Wizard 'Ich schreibe'): Zeilen statt Satz */
.bks-notiz.ist-leer { width: 72%; }
.bks-notiz-zeilen { display: flex; flex-direction: column; gap: 12px; }
.bks-notiz-zeile { display: block; height: 8px; border-radius: 4px; background: rgb(19 21 17 / 0.12); }
.bks-notiz-zeile.ist-kurz { width: 62%; }
/* 'Alle' in der Galerie: Mosaik der sechs Welten */
.bk-mosaik { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2px; padding: 6px; }
.bk-mosaik img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
/* Startseite FAQ-Kopf mobil: Eyebrow und Titel untereinander */
@media (max-width: 680px) { .section-head .idx { display: flex; flex-direction: column; gap: 4px; } }
.bks-notiz.ist-mini { width: 66%; padding: 10% 10%; border-radius: 6px; }
.bks-notiz.ist-mini .bks-notiz-kopf { top: 10%; left: 10%; right: 10%; gap: 5px; }
.bks-notiz.ist-mini .bks-notiz-zeilen { gap: 6px; }
.bks-notiz.ist-mini .bks-notiz-zeile { height: 5px; }

/* So funktioniert's: drei Textspalten unter dem Bildstreifen */
.bks-schritte-text { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgb(19 21 17 / 0.14); }
.bks-schritte-text h3 { font-family: var(--f-display); font-weight: 400; font-size: 24px; letter-spacing: -0.01em; margin: 0 0 8px; }
.bks-schritte-text p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 12px; }
.bks-schritte-text .bk-fakten { justify-content: flex-start; }
@media (max-width: 680px) { .bks-schritte-text { grid-template-columns: 1fr; gap: 22px; } }
/* Kasse: Bilderleiste mittig */
.bk-kasse-leiste { display: block; } /* die feine Linie steht linksbuendig ueber dem Formular, nicht zentriert */

/* ---------- Ablauf als Papierblaetter (30.08.2026, Sprache der Hero-Buehne) ---------- */
.bks-ablauf .bk-streifen-bild { background: transparent; border: 0; box-shadow: none; padding: 7% 6%; overflow: visible; }
.bks-blatt { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(180deg, #fbf8ef 0%, #f4efe1 100%); border-radius: 4px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 22px 44px -24px rgb(19 21 17 / 0.5), 0 2px 5px rgb(19 21 17 / 0.08); transition: rotate .6s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.bks-blatt--eins { rotate: -1.6deg; }
.bks-blatt--zwei { rotate: 1.2deg; }
.bks-blatt--drei { rotate: -1deg; overflow: hidden; }
.bks-ablauf .bk-streifen-feld:hover .bks-blatt { rotate: 0deg; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 30px 50px -26px rgb(19 21 17 / 0.55), 0 2px 5px rgb(19 21 17 / 0.08); }
.bks-blatt--eins .bk-dfbild { width: 92%; }
/* Karteikarte: Kopfzeile, Schreiblinien, der Satz auf der Linie */
.bks-karte { flex-direction: column; align-items: stretch; justify-content: center; padding: 9% 9%; }
.bks-karte-kopf { position: absolute; top: 8%; left: 9%; right: 9%; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.bks-karte-linie { flex: 1 1 auto; height: 1px; background: rgb(19 21 17 / 0.16); }
.bks-karte-linien { position: absolute; left: 9%; right: 9%; top: 34%; display: flex; flex-direction: column; gap: 19%; height: 42%; pointer-events: none; }
.bks-karte-linien span { display: block; height: 1px; background: rgb(19 21 17 / 0.09); }
.bks-karte .bks-notiz-satz { position: relative; margin-top: -4%; }
/* Polaroid rechts: Etikett wie auf der Hero-Buehne */
.bks-blatt-etikett { position: absolute; left: 10px; bottom: 10px; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); background: var(--paper); border: 1px solid rgb(19 21 17 / 0.14); padding: 5px 8px; opacity: 0; transition: opacity .5s; }
.bks-blatt-etikett.ist-da { opacity: 1; }
.bks-demo-shirt { background: linear-gradient(180deg, #fbf8ef 0%, #f4efe1 100%); }
.bks-notiz.ist-leer, .bks-notiz.ist-mini { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 18px 36px -22px rgb(19 21 17 / 0.45), 0 2px 5px rgb(19 21 17 / 0.08); border: 0; }
@media (prefers-reduced-motion: reduce) { .bks-blatt, .bks-ablauf .bk-streifen-feld:hover .bks-blatt { rotate: 0deg; transition: none; } }

/* ---------- Kacheln feiner (30.08.2026): duennere Raender, weichere Radien, Tiefe ---------- */
.bk-kachel-bild { border: 1px solid rgb(19 21 17 / 0.12) !important; border-radius: 14px !important; background: linear-gradient(180deg, rgb(255 255 255 / 0.35), rgb(255 255 255 / 0)) , var(--paper-2) !important; box-shadow: 0 1px 0 rgb(255 255 255 / 0.5) inset, 0 10px 24px -20px rgb(19 21 17 / 0.35); transition: border-color .25s, box-shadow .35s, translate .35s; }
.bk-kachel-bild img, .bk-kachel-bild > .bk-kachel-emoji { border-radius: 12px; }
@media (hover: hover) {
  .bk-kachel:not(.ist-gesperrt):hover .bk-kachel-bild { translate: 0 -2px; box-shadow: 0 1px 0 rgb(255 255 255 / 0.5) inset, 0 22px 34px -22px rgb(19 21 17 / 0.45); }
}
.bk-kachel.ist-gewaehlt .bk-kachel-bild { border: 2px solid var(--bk-gewaehlt) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--bk-gewaehlt) 18%, transparent), 0 18px 30px -22px rgb(19 21 17 / 0.4); }
.bk-preis { border-radius: 8px; }

/* ---------- Ablauf als Skizzenbuch (30.08.2026): Zeichnungen auf den Blaettern ---------- */
.bks-illu { position: absolute; inset: 8%; display: block; }
.bks-illu--oben { inset: 6% 8% 38% 8%; }
.bks-illu img { mix-blend-mode: normal; }
.bks-satzzeile { position: absolute; left: 10%; right: 10%; bottom: 14%; border-bottom: 1px solid rgb(19 21 17 / 0.35); padding-bottom: 6px; min-height: 1.5em; }
.bks-satz { font-family: var(--f-display); font-style: italic; font-size: clamp(17px, 1.9vw, 30px); line-height: 1.15; color: var(--ink); letter-spacing: -0.01em; }
.bks-polaroid { position: absolute; right: 6%; bottom: 7%; width: 44%; padding: 5% 5% 9%; background: #fdfbf5; box-shadow: 0 14px 30px -14px rgb(19 21 17 / 0.55), 0 1px 2px rgb(19 21 17 / 0.15); rotate: 5deg; opacity: 0; translate: 0 12px; transition: opacity .5s ease, translate .5s cubic-bezier(.2,.8,.2,1); }
.bks-polaroid.ist-da { opacity: 1; translate: 0 0; }
.bks-polaroid-bild { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; background: #f4efe1; }
.bks-polaroid-etikett { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bks-blatt--drei .bks-demo-haken { right: auto; left: 8%; bottom: 8%; }
@media (max-width: 680px) { .bks-satz { font-size: 21px; } .bks-polaroid-etikett { font-size: 8px; } }

/* ---------- Editionskarten mit Farbwahl und Wende (30.08.2026) ---------- */
.bks-editionen-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.bks-ed { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bks-ed-blatt { position: relative; display: block; width: 100%; aspect-ratio: 5 / 4; border-radius: 4px; background: linear-gradient(180deg, #fbf8ef 0%, #f4efe1 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 24px 46px -26px rgb(19 21 17 / 0.5), 0 2px 5px rgb(19 21 17 / 0.08); overflow: hidden; }
.bks-ed-preis { position: absolute; top: 14px; right: 14px; z-index: 2; }
.bks-ed-bild { position: absolute; inset: 7%; display: block; opacity: 0; transition: opacity .55s ease; }
.bks-ed-bild.ist-vorn { opacity: 1; }
.bks-ed-steuer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 22px; width: 100%; }
.bks-ed-wende { display: inline-flex; border: 1px solid rgb(19 21 17 / 0.16); border-radius: 999px; padding: 3px; background: var(--paper); }
.bks-ed-seite { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 600 13px var(--f-body); cursor: pointer; transition: background .25s, color .25s; }
.bks-ed-seite.ist-aktiv { background: var(--ink); color: var(--paper); }
.bks-ed-farben { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; }
.bks-ed-farbe { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgb(19 21 17 / 0.18); box-shadow: inset 0 0 0 2px var(--paper); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; padding: 0; transition: transform .2s; }
.bks-ed-farbe:hover { transform: scale(1.15); }
.bks-ed-farbe.ist-aktiv { border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--paper); }
.bks-ed-farbe-rest { font-family: var(--f-mono); font-size: 11px; color: var(--muted); margin-left: 4px; }
.bks-ed-titel { font-family: var(--f-display); font-weight: 400; font-size: 30px; letter-spacing: -0.01em; margin: 6px 0 0; }
.bks-ed-unter { font-size: 14px; color: var(--muted); margin: 0; }
@media (max-width: 680px) {
  .bks-editionen-raster { grid-template-columns: 1fr; gap: 34px; }
  .bks-ed-blatt { aspect-ratio: 1 / 1; }
  .bks-ed-titel { font-size: 26px; }
}
/* Themenwelt-Hero: Illustration auf Papierblatt statt im Rahmen (30.08.2026) */
.kat-hero-visual { border: 0 !important; border-radius: 4px; background: linear-gradient(180deg, #fbf8ef 0%, #f4efe1 100%) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 24px 46px -26px rgb(19 21 17 / 0.5), 0 2px 5px rgb(19 21 17 / 0.08) !important; }
.kat-hero-visual img { object-fit: contain !important; padding: 4%; }

/* ---------- Motiv-Faecher auf den Themenwelten (30.08.2026) ---------- */
.bk-faecher { position: absolute; left: 50%; bottom: 7%; display: flex; gap: 4px; translate: -50% 0; pointer-events: none; }
.bk-faecher-blatt { display: inline-flex; width: 40px; height: 40px; padding: 4px; border-radius: 50%; background: var(--paper); box-shadow: 0 6px 14px -8px rgb(19 21 17 / 0.5), 0 0 0 1px rgb(19 21 17 / 0.08); opacity: 0; translate: 0 10px; transition: opacity .35s ease, translate .45s cubic-bezier(.2,.8,.2,1), rotate .45s; }
.bk-faecher-blatt img { width: 100%; height: 100%; object-fit: contain; }
.bk-faecher-blatt:nth-child(1) { rotate: -10deg; transition-delay: 0s; }
.bk-faecher-blatt:nth-child(2) { transition-delay: .05s; translate: 0 14px; }
.bk-faecher-blatt:nth-child(3) { rotate: 10deg; transition-delay: .1s; }
@media (hover: hover) { .bk-kachel:hover .bk-faecher-blatt { opacity: 1; translate: 0 0; } }
@media (hover: none) { .bk-faecher-blatt { opacity: 1; translate: 0 0; width: 30px; height: 30px; } }
/* Miniaturen in der Bilderleiste: freigestellte Zeichnungen brauchen helles Papier, auch im aktiven (dunklen) Feld */
.bk-leiste .bk-mini { background: var(--paper) !important; border-radius: 6px; }
.bk-leiste .bk-mini img { object-fit: contain !important; padding: 2px; }
/* Anker ohne Schaubild: eine Zeile, Preis links, Versand rechts */
.bk-pdp-anker--schlicht { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.bk-pdp-anker--schlicht .bk-pdp-anker-preis { display: flex; align-items: baseline; gap: 16px; width: 100%; justify-content: space-between; }

/* Editionskarten v2: echte Designs, gestrichelte Linie zeichnet die Druckflaeche */
.bks-ed-linie { position: absolute; inset: 7%; width: 86%; height: 86%; pointer-events: none; }
.bks-ed-bild + .bks-ed-linie { inset: 0; width: 100%; height: 100%; }
.bks-ed-linie rect { fill: none; stroke: var(--accent-2, #1F2924); stroke-width: 0.7; stroke-dasharray: 2.2 1.6; opacity: 0; }
.bks-ed-linie.ist-da rect { opacity: 0.85; stroke-dashoffset: 100; animation: bks-linie-ziehen 1.6s ease-out forwards; }
@keyframes bks-linie-ziehen { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.bks-ed-etikett { position: absolute; left: 14px; bottom: 12px; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); background: var(--paper); border: 1px solid rgb(19 21 17 / 0.14); padding: 5px 8px; }

/* Positionstitel in Warenkorb/Kasse: hoechstens zwei Zeilen (Befund 30.08.) */
.bk-cart-titel, .v2k-summary-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Kasse-Leerzustand: bisher ungestylte v2k-empty-Klassen (Befund 30.08. 23:29) --
   jetzt ein Papierblatt mit dem leeren Buegel aus dem Skizzenbuch */
.v2k-empty { display: flex; justify-content: center; padding: 56px 20px 72px; }
.v2k-empty-card { background: var(--paper); border: 1px solid rgb(19 21 17 / 0.35); padding: 34px 30px 30px; max-width: 420px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.v2k-empty-bild { display: block; width: 140px; height: 140px; margin-bottom: 4px; }
.v2k-empty-eyebrow { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted, #6B655A); }
.v2k-empty-h2 { font-family: var(--f-editorial, serif); font-size: 26px; line-height: 1.15; margin: 0; }
.v2k-empty-p { margin: 0 0 12px; color: var(--ink-soft, #2A2723); }
/* Kontakt-Kacheln: feines Kreis-Zeichen wie im FAQ statt riesigem Roh-Icon (31.08.) */
.bk-kontakt-zeichen { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border: 1px solid rgb(19 21 17 / 0.35); border-radius: 50%; background: var(--paper); }
/* PDP-Stoffkacheln: die ab-Marke lag auf dem Icon (gemessen 1138 px2 bei 390, 837 bei 1024) --
   das Bildfeld reserviert jetzt Kopfraum und eine Mindesthoehe (31.08.) */
.bk-kachel--breit .bk-kachel-bild:has(.bk-pdp-stoffbild) { aspect-ratio: auto; min-height: 132px; padding: 36px 10px 12px; }
/* Lange Produktbeschreibung: eingeklappt fuenf Zeilen, Mehr-lesen-Knopf (31.08.) */
.pdp-description.ist-zu { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pdp-mehr { background: none; border: 0; padding: 9px 0; margin: -5px 0; cursor: pointer; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2, #1F3A2E); text-decoration: underline; text-underline-offset: 3px; }
/* Mal-Animation (Owner-Idee 31.08.): das echte Mockup wird wie mit dem Pinsel
   aufgemalt -- diagonaler Masken-Wisch, der Tuschepinsel zieht synchron mit,
   danach zeichnet sich die Druckflaechen-Linie. rotate/translate als eigene
   Properties, weil .reveal * transform:none setzt. */
.bks-ed-blatt.ist-malend .bks-ed-bild.ist-vorn img {
  -webkit-mask-image: linear-gradient(115deg, #000 44%, rgba(0 0 0 / 0) 56%);
  mask-image: linear-gradient(115deg, #000 44%, rgba(0 0 0 / 0) 56%);
  -webkit-mask-size: 340% 340%; mask-size: 340% 340%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: bks-malen 1.6s ease-in-out forwards;
}
@keyframes bks-malen { from { -webkit-mask-position: 96% 96%; mask-position: 96% 96%; } to { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; } }
.bks-ed-pinsel { position: absolute; left: 2%; top: 0; width: 36%; max-width: 175px; aspect-ratio: 1; pointer-events: none; opacity: 0; z-index: 3; }
.bks-ed-blatt.ist-malend .bks-ed-pinsel { opacity: 1; animation: bks-pinselzug 1.6s ease-in-out forwards; }
@keyframes bks-pinselzug {
  0% { translate: 2% 2%; rotate: -9deg; opacity: 0; }
  10% { opacity: 1; }
  45% { translate: 68% 30%; rotate: 5deg; }
  70% { translate: 26% 66%; rotate: -6deg; }
  90% { opacity: 1; }
  100% { translate: 92% 92%; rotate: 6deg; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .bks-ed-blatt.ist-malend .bks-ed-bild.ist-vorn img { animation: none; -webkit-mask-image: none; mask-image: none; } .bks-ed-pinsel { display: none; } }
/* Produktbeschreibung: eingeklappt nur die ersten zwei Absaetze (31.08.) */
.pdp-story.ist-zu p:nth-of-type(n+3) { display: none; }
.pdp-story.ist-zu p:nth-of-type(2) { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
/* P3 (31.08.): Bilder malen sich beim Erscheinen kurz auf -- gleiche Sprache wie die Editionskarten */
.malt-kurz img { -webkit-mask-image: linear-gradient(115deg, #000 46%, rgba(0 0 0 / 0) 54%); mask-image: linear-gradient(115deg, #000 46%, rgba(0 0 0 / 0) 54%); -webkit-mask-size: 300% 300%; mask-size: 300% 300%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: bks-malen-kurz 0.85s ease-out both; animation-delay: var(--md, 0s); }
@keyframes bks-malen-kurz { from { -webkit-mask-position: 96% 96%; mask-position: 96% 96%; } to { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; } }
@media (prefers-reduced-motion: reduce) { .malt-kurz img { animation: none; -webkit-mask-image: none; mask-image: none; } }


/* =========================================================================
   PRODUKTSEITE — Neuentwurf 31.08.2026 (Inhaber: "ganz neu")
   =========================================================================
   Was vorher schieflag und hier behoben ist:
   - Jede Entscheidung sah gleich aus (Einheitskacheln). Jetzt hat jede Wahl
     die Form ihrer Aufgabe: Stoff = Zeile mit Gewebe, Farbe = Tupfer,
     Groesse = kompaktes Feld, Zusatzdruck = Schalter.
   - Der Preis stand doppelt (gross oben, nochmal in jeder Stoffkachel).
     Jetzt gross oben und in der Zeile nur die DIFFERENZ.
   - Die Buehne war ein olivgruener Kasten ohne Licht. Jetzt eine Papier-
     flaeche mit Lichtkegel und Bodenschatten unter dem Shirt.
   ========================================================================= */

/* --- Optionsgruppe: Kopfzeile mit Wert, kein Icon-Rauschen -------------- */
.at-opt { margin-block: var(--at-s-6); }
.at-opt-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--at-s-3);
  margin-bottom: var(--at-s-3);
  padding-bottom: var(--at-s-2);
  border-bottom: 1px solid var(--at-line-hair);
}
.at-opt-wert {
  font-family: var(--at-sans);
  font-size: var(--at-t-small);
  font-weight: 500;
  color: var(--at-ink);
}
.at-opt-hint {
  font-family: var(--at-sans);
  font-size: var(--at-t-small);
  color: var(--at-ink-mute);
  font-style: italic;
}

/* --- Zeilen (Stoff, Zusatzdruck) ---------------------------------------- */
.at-lanes { display: flex; flex-direction: column; gap: var(--at-s-2); }

.at-lane {
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--at-s-3);
  padding: 0.7rem 0.9rem;
  background: var(--at-paper-warm);
  border-radius: var(--at-r-m);
  box-shadow: inset 0 0 0 1px var(--at-line);
  text-align: left;
  font-family: var(--at-sans);
  color: var(--at-ink);
  transition: box-shadow var(--at-d-swap) var(--at-ease),
              transform var(--at-d-tap) var(--at-ease),
              background-color var(--at-d-swap) var(--at-ease);
}
.at-lane:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--at-line-strong), var(--at-lift-1); }
.at-lane:active { transform: none; }
.at-lane:focus-visible { outline: 2px solid var(--at-accent-deep); outline-offset: 2px; }
.at-lane.ist-gewaehlt {
  background: var(--at-accent-mist);
  box-shadow: inset 0 0 0 1.5px var(--at-accent), var(--at-lift-1);
}
.at-lane[disabled] {
  cursor: not-allowed;
  color: var(--at-ink-ghost);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--at-line-hair);
  transform: none;
}

/* Das Gewebe: die Dichte der Kreuzung waechst mit der Grammatur. Zwei
   ueberlagerte Linienraster ergeben ein Leinwandbild ohne Bilddatei. */
.at-lane-stoff {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: var(--at-r-s);
  background-color: var(--at-paper-deep);
  background-image:
    repeating-linear-gradient(90deg, color-mix(in oklch, var(--at-ink) 13%, transparent) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg, color-mix(in oklch, var(--at-ink) 10%, transparent) 0 1px, transparent 1px 5px);
  box-shadow: inset 0 0 0 1px var(--at-line);
}
.at-lane-stoff[data-schwer="1"] {
  background-image:
    repeating-linear-gradient(90deg, color-mix(in oklch, var(--at-ink) 20%, transparent) 0 1.5px, transparent 1.5px 4px),
    repeating-linear-gradient(0deg, color-mix(in oklch, var(--at-ink) 17%, transparent) 0 1.5px, transparent 1.5px 4px);
}

.at-lane-bild {
  flex: 0 0 auto;
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: var(--at-r-s);
  background: var(--at-paper);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.at-lane-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.at-lane-name { font-size: 0.98rem; font-weight: 500; line-height: 1.25; }
.at-lane-unter { font-size: 0.78rem; color: var(--at-ink-mute); line-height: 1.3; }
.at-lane.ist-gewaehlt .at-lane-unter { color: var(--at-accent-deep); }

.at-lane-marke {
  flex: 0 0 auto;
  font-family: var(--at-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--at-ink-soft);
  white-space: nowrap;
}
.at-lane.ist-gewaehlt .at-lane-marke { color: var(--at-accent-deep); font-weight: 500; }

/* Schalter: der Knopf laeuft nach rechts und faerbt sich; die Bewegung
   sagt "eingeschaltet", nicht nur die Farbe (Barrierefreiheit). */
.at-lane-schalter {
  flex: 0 0 auto;
  width: 40px;
  height: 23px;
  border-radius: var(--at-r-pill);
  background: color-mix(in oklch, var(--at-ink) 16%, transparent);
  position: relative;
  transition: background-color var(--at-d-swap) var(--at-ease);
}
.at-lane-schalter > span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--at-paper-warm);
  box-shadow: var(--at-lift-1);
  transition: translate var(--at-d-swap) var(--at-ease);
}
.at-lane--schalter.ist-gewaehlt .at-lane-schalter { background: var(--at-accent); }
.at-lane--schalter.ist-gewaehlt .at-lane-schalter > span { translate: 17px 0; }

/* --- Farbtupfer-Reihe ---------------------------------------------------- */
.at-swatches { display: flex; flex-wrap: wrap; gap: 0.85rem; padding: 4px 2px; }

/* --- Groessen: kompakt, in einer Reihe ---------------------------------- */
.at-sizes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: var(--at-s-2);
}
.at-size {
  appearance: none;
  border: 0;
  cursor: pointer;
  position: relative;
  min-height: 52px;
  padding: 0.4rem 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: var(--at-paper-warm);
  color: var(--at-ink);
  border-radius: var(--at-r-s);
  box-shadow: inset 0 0 0 1px var(--at-line);
  font-family: var(--at-sans);
  transition: box-shadow var(--at-d-swap) var(--at-ease),
              transform var(--at-d-tap) var(--at-ease),
              background-color var(--at-d-swap) var(--at-ease);
}
.at-size:hover:not([disabled]) { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--at-line-strong), var(--at-lift-1); }
.at-size:focus-visible { outline: 2px solid var(--at-accent-deep); outline-offset: 2px; }
.at-size.ist-gewaehlt {
  background: var(--at-ink);
  color: var(--at-paper-warm);
  box-shadow: var(--at-lift-2);
}
.at-size-buchstabe { font-size: 1rem; font-weight: 500; line-height: 1; letter-spacing: 0.02em; }
.at-size-preis { font-family: var(--at-mono); font-size: 0.62rem; color: var(--at-ink-mute); line-height: 1; }
.at-size.ist-gewaehlt .at-size-preis { color: color-mix(in oklch, var(--at-paper-warm) 72%, transparent); }
.at-size[disabled] {
  cursor: not-allowed;
  color: var(--at-ink-ghost);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--at-line-hair);
}
.at-size[disabled]::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: linear-gradient(to top left, transparent calc(50% - 0.5px), var(--at-line-strong) 50%, transparent calc(50% + 0.5px));
}

/* --- Die Buehne: Papier mit Licht statt olivgruenem Kasten -------------- */
.v2-root .pdp-gallery {
  background:
    radial-gradient(88% 62% at 50% 6%, var(--at-paper-warm) 0%, var(--at-paper) 52%, var(--at-paper-deep) 100%) !important;
  border-right: 1px solid var(--at-line) !important;
}
.v2-root .pdp-hero { position: relative; }
/* Bodenschatten: das Shirt bekommt Gewicht, statt zu schweben. */
.v2-root .pdp-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: min(46%, 380px);
  height: 26px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--at-ink) 17%, transparent), transparent 76%);
  filter: blur(9px);
  pointer-events: none;
  z-index: 0;
}
.v2-root .pdp-hero .slide { z-index: 1; }

/* Miniaturen: Papier statt Kasten, der aktive traegt einen Akzentstrich */
.v2-root .pdp-thumb {
  border-radius: var(--at-r-s) !important;
  box-shadow: inset 0 0 0 1px var(--at-line-hair);
  background: var(--at-paper-warm) !important;
  transition: box-shadow var(--at-d-swap) var(--at-ease), transform var(--at-d-tap) var(--at-ease);
}
.v2-root .pdp-thumb:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--at-line), var(--at-lift-1); }
.v2-root .pdp-thumb.is-active {
  box-shadow: inset 0 0 0 1.5px var(--at-accent), var(--at-lift-1) !important;
  background: var(--at-accent-mist) !important;
}

/* --- Preis-Anker: gross, allein, mit Versandzeile ----------------------- */
.v2-root .bk-pdp-anker--schlicht {
  align-items: flex-end;
  padding-block: var(--at-s-2) var(--at-s-4);
  border-bottom: 1px solid var(--at-line-hair);
  margin-bottom: var(--at-s-2);
}

@media (max-width: 900px) {
  .at-opt { margin-block: var(--at-s-5); }
  .at-lane { padding: 0.65rem 0.75rem; }
  .at-lane-stoff { width: 40px; height: 40px; }
  .at-lane-bild { width: 46px; height: 46px; }
  .at-sizes { grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); }
  .v2-root .pdp-gallery { border-right: 0 !important; }
}

/* --- Buehne: Papierlicht mit Motivschleier (31.08.2026) ----------------- */
/* Der Ton aus dem Motiv kommt als halbtransparente Lage UEBER das Papier,
   nicht mehr als Vollflaeche. So bleibt der Lichtkegel sichtbar. */
.v2-root .pdp-hero {
  background:
    radial-gradient(78% 58% at 50% 4%, var(--at-paper-warm) 0%, var(--at-paper) 54%, var(--at-paper-deep) 100%);
}
.v2-root .pdp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--at-ton, transparent);
  opacity: 0.26;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
  transition: background-color var(--at-d-move) var(--at-ease);
}

/* --- Preis-Aufschluesselung --------------------------------------------- */
.at-preis-teile {
  margin: 0.55rem 0 0;
  font-family: var(--at-sans);
  font-size: 0.8rem;
  color: var(--at-ink-mute);
  letter-spacing: 0.01em;
}
.v2-root .bk-pdp-anker--schlicht { flex-direction: column; align-items: stretch; }
.v2-root .bk-pdp-anker--schlicht .bk-pdp-anker-preis { width: 100%; }

/* =========================================================================
   HERO-STAPEL — Neuanordnung 31.08.2026
   =========================================================================
   Befund am Ist-Stand: Die drei Karten ueberlappten so stark, dass Karte 1
   ihr eigenes Etikett verlor (Karte 3 lag darueber) und Karte 3 unten aus
   der Buehne lief. Der Stapel wirkte dadurch nicht raeumlich, sondern
   unsortiert.

   Neu: ein FAECHER statt eines Haufens. Jede Karte behaelt ihre untere linke
   Ecke frei -- dort sitzt das Etikett -- und alle drei stehen vollstaendig
   in der Buehne. Der Tilt und das Schweben aus der bestehenden Fassung
   bleiben unveraendert, sie waren gut.
   ========================================================================= */

.hs3d { min-height: min(74vh, 660px); }

/* Weicher, warmer Schatten statt harter Kante: das Blatt liegt im Licht. */
.hs3d-inner {
  border: 0 !important;
  border-radius: 3px;
  background: var(--at-paper-warm, #F6F1E4) !important;
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--at-ink, #141311) 12%, transparent),
    0 2px 5px color-mix(in oklch, var(--at-ink, #141311) 7%, transparent),
    0 26px 46px -28px color-mix(in oklch, var(--at-ink, #141311) 40%, transparent),
    0 64px 110px -54px color-mix(in oklch, var(--at-ink, #141311) 52%, transparent) !important;
}
.hs3d-card:hover .hs3d-inner {
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--at-ink, #141311) 14%, transparent),
    0 4px 8px color-mix(in oklch, var(--at-ink, #141311) 8%, transparent),
    0 36px 60px -30px color-mix(in oklch, var(--at-ink, #141311) 44%, transparent),
    0 96px 150px -56px color-mix(in oklch, var(--at-ink, #141311) 58%, transparent) !important;
}

/* Faecher: kleiner, klarer gestaffelt, nichts laeuft aus dem Bild. */
.hs3d-c1 { --w: 43%; --ry: 11deg; --rx: 3deg; --rz: -6deg; --z: 20px; --tf: 6deg; --zi: 1; top: 1%; left: 0%; }
.hs3d-c2 { --w: 41%; --ry: -12deg; --rx: 2deg; --rz: 4deg; --z: 90px; --tf: 9deg; --zi: 2; top: 21%; right: 1%; }
.hs3d-c3 { --w: 39%; --ry: 6deg; --rx: -2deg; --rz: -1.5deg; --z: 160px; --tf: 13deg; --zi: 3; bottom: 3%; left: 17%; }

/* Etikett: Papierstreifen statt Rahmen, immer in der freien Ecke. */
.hs3d-tag {
  border: 0 !important;
  border-radius: 2px;
  background: color-mix(in oklch, var(--at-paper-warm, #F6F1E4) 92%, transparent) !important;
  box-shadow: 0 1px 3px color-mix(in oklch, var(--at-ink, #141311) 12%, transparent);
  backdrop-filter: blur(2px);
  font-size: 9.5px !important;
  letter-spacing: 0.14em !important;
  padding: 5px 8px !important;
}

/* Bildunterschrift: rechts unten, aber ausserhalb der Kartenbahn. */
.hs3d-caption {
  color: var(--at-ink-mute, #6B655A) !important;
  bottom: -6px !important;
}

@media (max-width: 1100px) {
  .hs3d-c1 { --w: 40%; top: 3%; left: 1%; }
  .hs3d-c2 { --w: 38%; top: 22%; right: 2%; }
  .hs3d-c3 { --w: 36%; bottom: 4%; left: 28%; }
}
@media (max-width: 860px) {
  .hs3d { min-height: clamp(360px, 92vw, 460px); }
  .hs3d-c1 { --w: 46%; top: 1%; left: 0%; }
  .hs3d-c2 { --w: 44%; top: 20%; right: 0%; }
  .hs3d-c3 { --w: 42%; bottom: 2%; left: 26%; }
}

/* =========================================================================
   WIZARD — Aufwertung 31.08.2026
   =========================================================================
   Befund: Schritt 1 zeigte zwei flache graue Kaesten in der oberen Haelfte,
   darunter ein Drittel leere Seite. Die Karten hatten kein Licht, keine
   Tiefe, keine Reaktion. Neu: Papierblaetter mit Schatten, die sich beim
   Ueberfahren heben, vertikal in den freien Raum gerueckt.
   ========================================================================= */

/* Der Schritt nutzt die Hoehe, statt oben zu kleben */

/* Produktkarten: Blatt statt Kasten */
/* Bodenschatten unter dem Shirt: Gewicht statt Schweben */


/* Die Druckflaechen-Linie auf einem Karten-Beispiel war doppelt gemoppelt:
   das echte Design zeigt die Flaeche bereits. Nur noch ein Hauch. */

/* Preisstein an der Karte: Papierstreifen statt Kaestchen */

/* Titel unter der Karte: mehr Luft, klarere Stufe */

/* Themen-, Motiv- und Stilkacheln: gleiche Papiersprache, ruhiger Hover */


/* 31.08.2026, sofort korrigiert: Diese Regel legte einen Kasten HINTER die
   Schritt-Ueberschrift -- .bkw-schrittkopf ist der Titelbereich, nicht die
   Chip-Kette. Ersatzlos gestrichen, der Titel braucht keinen Rahmen. */

/* =========================================================================
   RESTLICHE FLAECHEN auf das Atelier-System heben (31.08.2026)
   =========================================================================
   Galerie-Karten, Editionskarten, Fusszeile und Bewertungen sprachen noch die
   alte Kasten-Sprache: harte 1,5px-Tintenrahmen, flache Flaechen, harte
   Schatten. Hier bekommen sie dieselbe Papiersprache wie Produktseite,
   Startseite und Wizard -- gleiche Tiefe, gleiche Kurven, gleicher Akzent.
   ========================================================================= */

/* --- Galerie-Karten ------------------------------------------------------ */
.dc-media {
  border: 0 !important;
  border-radius: var(--at-r-m) !important;
  background: radial-gradient(92% 74% at 50% 8%, var(--at-paper-warm) 0%, var(--at-paper) 62%, var(--at-paper-deep) 100%) !important;
  box-shadow:
    0 0 0 1px var(--at-line-hair),
    0 2px 6px color-mix(in oklch, var(--at-ink) 5%, transparent) !important;
  transition:
    box-shadow var(--at-d-move) var(--at-ease),
    transform var(--at-d-swap) var(--at-ease) !important;
}
/* Bodenschatten: auch in der Galerie steht das Shirt, statt zu schweben */
.dc-media::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: 44%;
  height: 14px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--at-ink) 14%, transparent), transparent 74%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}
a:hover > .dc-media,
.dc-card:hover .dc-media {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px var(--at-line),
    0 8px 18px color-mix(in oklch, var(--at-ink) 8%, transparent),
    0 28px 54px -28px color-mix(in oklch, var(--at-ink) 34%, transparent) !important;
}

/* --- Editionskarten (Startseite, Preise) -------------------------------- */
.bks-ed-blatt {
  border: 0 !important;
  border-radius: var(--at-r-l) !important;
  background: radial-gradient(92% 74% at 50% 6%, var(--at-paper-warm) 0%, var(--at-paper) 60%, var(--at-paper-deep) 100%) !important;
  box-shadow:
    0 0 0 1px var(--at-line-hair),
    0 3px 8px color-mix(in oklch, var(--at-ink) 5%, transparent),
    0 22px 48px -28px color-mix(in oklch, var(--at-ink) 30%, transparent) !important;
  transition:
    box-shadow var(--at-d-move) var(--at-ease),
    transform var(--at-d-swap) var(--at-ease) !important;
}
.bks-ed-blatt:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px var(--at-line),
    0 8px 18px color-mix(in oklch, var(--at-ink) 7%, transparent),
    0 34px 66px -30px color-mix(in oklch, var(--at-ink) 36%, transparent) !important;
}
.bks-ed-etikett {
  border: 0 !important;
  border-radius: var(--at-r-pill) !important;
  background: color-mix(in oklch, var(--at-paper-warm) 94%, transparent) !important;
  box-shadow: 0 1px 4px color-mix(in oklch, var(--at-ink) 12%, transparent);
  backdrop-filter: blur(3px);
}

/* --- Bewertungskarten ---------------------------------------------------- */
.v2-root .rev-card,
.v2-root .review-card {
  border: 0 !important;
  border-radius: var(--at-r-m) !important;
  background: var(--at-paper-warm) !important;
  box-shadow: 0 0 0 1px var(--at-line-hair), var(--at-lift-1) !important;
}

/* --- Kacheln allgemein (bk-Bausteine) auf Papiersprache ---------------- */
.v2-root .bk-kachel-bild {
  border: 0 !important;
  box-shadow: 0 0 0 1px var(--at-line-hair), var(--at-lift-1);
  transition:
    box-shadow var(--at-d-swap) var(--at-ease),
    transform var(--at-d-tap) var(--at-ease) !important;
}
.v2-root .bk-kachel:hover .bk-kachel-bild {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--at-line), var(--at-lift-2);
}
.v2-root .bk-kachel.ist-gewaehlt .bk-kachel-bild {
  box-shadow: 0 0 0 1.5px var(--at-accent), var(--at-lift-2);
  background: var(--at-accent-mist);
}

/* --- Knoepfe der alten Sprache auf die neuen Kurven ---------------------- */
.v2-root .bk-knopf,
.v2-root .btn-primary,
.v2-root .btn-secondary {
  transition:
    transform var(--at-d-tap) var(--at-ease),
    box-shadow var(--at-d-swap) var(--at-ease),
    background-color var(--at-d-swap) var(--at-ease) !important;
}
.v2-root .bk-knopf:hover,
.v2-root .btn-primary:hover,
.v2-root .btn-secondary:hover { transform: translateY(-2px); }
.v2-root .bk-knopf:active,
.v2-root .btn-primary:active,
.v2-root .btn-secondary:active { transform: translateY(0) scale(0.985); }

@media (prefers-reduced-motion: reduce) {
  .dc-media, .bks-ed-blatt, .v2-root .bk-kachel-bild,
  .v2-root .bk-knopf, .v2-root .btn-primary, .v2-root .btn-secondary {
    transition-duration: 1ms !important;
    transform: none !important;
  }
}

/* =========================================================================
   FREMDFARBE AUSGESCHALTET (31.08.2026, Weckerlauf-Befund)
   =========================================================================
   Der Hauptknopf im Warenkorb-Leerzustand trug einen Neon-Schein in
   rgb(20 184 166) -- das ist Tailwind-Teal aus dem alten globals.css-Erbe,
   NICHT Isakums Tuerkisgruen #4E9F78. Gemessen am lebenden Knopf:
   "rgba(20, 184, 166, 0.25) 0px 0px 16px". Auf einer Papierseite wirkt ein
   leuchtender Farbrand fremd und billig.

   globals.css selbst bleibt unangetastet (das Admin haengt daran). Der
   Kundenbereich .v2-root bekommt hier die Papiersprache: Tinte als Grund,
   Isakums Akzent beim Ueberfahren, kein Glow.
   ========================================================================= */

.v2-root .btn-primary {
  background: var(--at-ink) !important;
  color: var(--at-paper-warm) !important;
  box-shadow: var(--at-lift-1) !important;
  font-family: var(--at-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    transform var(--at-d-tap) var(--at-ease),
    box-shadow var(--at-d-swap) var(--at-ease),
    background-color var(--at-d-swap) var(--at-ease) !important;
}
.v2-root .btn-primary:hover {
  background: var(--at-accent-deep) !important;
  transform: translateY(-2px);
  box-shadow: var(--at-lift-2) !important;
}
.v2-root .btn-primary:active { transform: translateY(0) scale(0.985); }
/* Der Schimmer-Streifen aus dem Tailwind-Erbe hat auf Papier nichts zu suchen */
.v2-root .btn-primary::before { display: none !important; }

.v2-root .btn-secondary {
  background: transparent !important;
  color: var(--at-ink) !important;
  box-shadow: inset 0 0 0 1px var(--at-line-strong) !important;
  font-family: var(--at-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.v2-root .btn-secondary:hover {
  background: var(--at-ink) !important;
  color: var(--at-paper-warm) !important;
  box-shadow: var(--at-lift-2) !important;
}

/* =========================================================================
   ENGSTELLE STATT 66 AUFRUFSTELLEN (31.08.2026)
   =========================================================================
   Befund: globals.css (Tailwind-Erbe) definiert --brand-1 bis --brand-4 als
   Tailwind-Teal (13 148 136 / 20 184 166 / 6 182 212 / 34 211 238). 66 Regeln
   leiten daraus ab -- Knoepfe, Ringe, Verlaeufe, Schimmer. Ueberall dort
   leuchtet im Kundenbereich eine FREMDE Farbe, nicht Isakums #4E9F78.

   Statt 66 Stellen zu jagen: die Quelle im Kundenbereich umbiegen. Ab hier
   fuehrt jede abgeleitete Regel automatisch Isakums Gruen. globals.css selbst
   bleibt unveraendert, damit das Admin (eigene Welt) nichts abbekommt.

   Zahlen sind sRGB-Tripel, weil das Erbe rgb(var(--brand-x) / a) schreibt.
   ========================================================================= */

.v2-root {
  --brand-1: 61 122 93;    /* tiefes Isakum-Gruen  (war teal-600) */
  --brand-2: 78 159 120;   /* Isakum #4E9F78       (war teal-500) */
  --brand-3: 78 159 120;   /* kein Cyan im Kundenbereich */
  --brand-4: 124 189 158;  /* helle Stufe          (war cyan-400) */
}

/* =========================================================================
   KASSE auf das Atelier-System (31.08.2026, Weckerlauf)
   =========================================================================
   Befund am Live-Stand: Express-Block, Adressformular und Bestelluebersicht
   standen als harte Kaesten mit 1px-Tintenrahmen nebeneinander -- die alte
   Sprache, waehrend Produktseite, Startseite und Galerie schon auf Papier
   liegen. Auf der wichtigsten Seite des Shops darf das nicht die schlechteste
   Gestaltung sein.

   Neu: Blaetter mit Tiefe statt Rahmen, Eingabefelder als sanfte Vertiefung
   im Papier, Fokus in Isakums Akzent. Keine Struktur geaendert, nur Material.
   ========================================================================= */

/* --- Bloecke: Blatt statt Kasten ---------------------------------------- */
.v2-root .v2k-section,
.v2-root .v2k-summary {
  border: 0 !important;
  border-radius: var(--at-r-l) !important;
  background: var(--at-paper-warm) !important;
  box-shadow:
    0 0 0 1px var(--at-line-hair),
    0 2px 6px color-mix(in oklch, var(--at-ink) 5%, transparent),
    0 16px 36px -26px color-mix(in oklch, var(--at-ink) 26%, transparent) !important;
}

/* Die Bestelluebersicht ist die Quittung: minimal tiefer im Papier. */
.v2-root .v2k-summary {
  background: linear-gradient(180deg, var(--at-paper-warm) 0%, var(--at-paper) 100%) !important;
}

/* --- Eingabefelder: Vertiefung statt Umrandung -------------------------- */
.v2-root .v2k-input {
  border: 0 !important;
  border-radius: var(--at-r-m) !important;
  background: var(--at-paper) !important;
  box-shadow:
    inset 0 0 0 1px var(--at-line),
    inset 0 1px 2px color-mix(in oklch, var(--at-ink) 6%, transparent) !important;
  transition:
    box-shadow var(--at-d-swap) var(--at-ease),
    background-color var(--at-d-swap) var(--at-ease) !important;
}
.v2-root .v2k-input:hover { box-shadow: inset 0 0 0 1px var(--at-line-strong), inset 0 1px 2px color-mix(in oklch, var(--at-ink) 6%, transparent) !important; }
.v2-root .v2k-input:focus,
.v2-root .v2k-input:focus-visible {
  outline: 0 !important;
  background: var(--at-paper-warm) !important;
  box-shadow:
    inset 0 0 0 1.5px var(--at-accent),
    0 0 0 3px var(--at-accent-mist) !important;
}
.v2-root .v2k-input::placeholder { color: var(--at-ink-ghost); }

/* --- Beschriftungen: ruhige Mono-Zeile ---------------------------------- */
.v2-root .v2k-label {
  color: var(--at-ink-soft) !important;
  letter-spacing: 0.08em;
}

/* --- Trenner: Papierkante statt Linie ----------------------------------- */
.v2-root .v2k-divider {
  border: 0 !important;
  background: none !important;
}
.v2-root .v2k-divider::before,
.v2-root .v2k-divider::after {
  background: linear-gradient(90deg, transparent, var(--at-line), transparent) !important;
  height: 1px !important;
}

/* --- Position in der Uebersicht: Bild auf Papier ------------------------ */
.v2-root .v2k-summary-item img {
  border-radius: var(--at-r-s);
  background: var(--at-paper-warm);
}

/* --- Express-Block ------------------------------------------------------ */
.v2-root .v2k-express,
.v2-root .v2k-express-wrap {
  border: 0 !important;
  border-radius: var(--at-r-l) !important;
  box-shadow: 0 0 0 1px var(--at-line-hair), var(--at-lift-1) !important;
  background: var(--at-paper-warm) !important;
}

@media (max-width: 900px) {
  .v2-root .v2k-section,
  .v2-root .v2k-summary { border-radius: var(--at-r-m) !important; }
}

/* =========================================================================
   FORTSCHRITTSKETTE MOBIL (31.08.2026, Weckerlauf-Befund)
   =========================================================================
   Auf 390 px liefen die fuenf Schritte (Warenkorb, Adresse, Versand, Zahlung,
   Fertig) rechts aus dem Bild -- "Fertig" war nur noch als Halbkreis zu sehen.
   Eine Fortschrittsanzeige, die man nicht ganz sieht, beantwortet ihre einzige
   Frage nicht: wo stehe ich, und wie viel kommt noch?

   Loesung ohne Scrollen: die nicht aktiven Schritte zeigen mobil nur ihre
   Nummer, der aktive behaelt seinen Namen. Damit passen alle fuenf nebeneinander
   und die Antwort ist auf einen Blick da. Ab 560 px wieder mit allen Namen.
   ========================================================================= */

@media (max-width: 559px) {
  .v2-root .bk-leiste {
    display: flex;
    gap: 5px;
    overflow: visible;
    padding-inline: 0;
  }
  .v2-root .bk-leiste-feld { flex: 0 1 auto; min-width: 0; }
  .v2-root .bk-leiste-feld .bk-leiste-knopf { padding: 8px 10px !important; gap: 6px !important; }

  /* Nicht der aktive Schritt: nur die ZIFFER, kein Name.
     Korrektur 31.08. (eigener Fehler, sofort gemessen): display:none auf dem
     Titel verschluckte auch die Ziffer -- sie liegt IM Titel. Jetzt schrumpft
     nur der Text auf null, die Ziffer behaelt ihre Groesse. Damit steht
     weiterhin "3 von 5" im Bild, und die Kette passt trotzdem. */
  .v2-root .bk-leiste-feld:not(.ist-aktiv) .bk-leiste-titel {
    font-size: 0 !important;
    gap: 0 !important;
    letter-spacing: 0 !important;
  }
  .v2-root .bk-leiste-feld:not(.ist-aktiv) .bk-leiste-nr {
    font-size: 11px !important;
    letter-spacing: 0 !important;
  }
  /* Zeichen weglassen, wo die Ziffer schon spricht -- sonst zwei Signale
     auf 40 px Breite. Der erledigte Schritt behaelt seinen Haken. */
  .v2-root .bk-leiste-feld.ist-offen .bk-leiste-bild { display: none !important; }
  /* Gleiche Hoehe fuer alle Glieder, damit die Kette ruhig liegt */
  .v2-root .bk-leiste-feld .bk-leiste-knopf { min-height: 42px; }

  /* Der aktive Schritt behaelt seinen Namen und bekommt den freien Platz */
  .v2-root .bk-leiste-feld.ist-aktiv { flex: 1 1 auto; }
  .v2-root .bk-leiste-feld.ist-aktiv .bk-leiste-knopf { padding: 8px 14px !important; }
}

/* =========================================================================
   WARENKORB: der letzte Kasten (01.09.2026)
   =========================================================================
   Gemessen am Live-Stand: zwei breite Elemente trugen noch einen harten
   1,14px-Tintenrahmen -- die Zusammenfassung rechts und ihr Summenblock.
   Direkt darunter lag der Express-Block bereits auf Papier. Zwei Sprachen
   uebereinander in derselben Spalte, das faellt sofort auf.
   ========================================================================= */

.v2-root .bk-cart-kasten {
  border: 0 !important;
  border-radius: var(--at-r-l) !important;
  background: linear-gradient(180deg, var(--at-paper-warm) 0%, var(--at-paper) 100%) !important;
  box-shadow:
    0 0 0 1px var(--at-line-hair),
    0 2px 6px color-mix(in oklch, var(--at-ink) 5%, transparent),
    0 16px 36px -26px color-mix(in oklch, var(--at-ink) 26%, transparent) !important;
}

/* Das Produktbild in der Position: Papier statt Rahmen */
.v2-root .bk-cart-bild {
  border: 0 !important;
  border-radius: var(--at-r-m) !important;
  background: var(--at-paper-warm) !important;
  box-shadow: 0 0 0 1px var(--at-line-hair), var(--at-lift-1) !important;
  transition: box-shadow var(--at-d-swap) var(--at-ease), transform var(--at-d-tap) var(--at-ease) !important;
}
.v2-root .bk-cart-bild:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--at-line), var(--at-lift-2) !important;
}

/* Mengen- und Entfernen-Knoepfe: ruhige Kreise mit Papiergrund */
.v2-root .bk-cart-menge button,
.v2-root .bk-cart-entfernen {
  border: 0 !important;
  background: var(--at-paper-warm) !important;
  box-shadow: inset 0 0 0 1px var(--at-line) !important;
  transition: box-shadow var(--at-d-swap) var(--at-ease), transform var(--at-d-tap) var(--at-ease) !important;
}
.v2-root .bk-cart-menge button:hover,
.v2-root .bk-cart-entfernen:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--at-line-strong), var(--at-lift-1) !important;
}

/* Die Trennlinie ueber der Summe gehoert dorthin -- aber als Papierkante,
   nicht als volle Tinte (01.09.2026, gemessen: 1,14px rgb(19,21,17)). */
.v2-root .bk-cart-summe { border-top: 1px solid var(--at-line) !important; }

/* =========================================================================
   PRODUKTSEITE: auf den Kauf ausgerichtet (01.09.2026)
   =========================================================================
   Inhaber: "zu haesslich und kompliziert, nicht auf Verkauf optimiert".
   Gemessen: Kaufknopf bei y=1502 (fast zwei Bildschirme), vier Entscheidungen
   davor, acht fast gleiche Miniaturen. Behoben in drei Schritten:
   1. Reihenfolge (im JSX): Farbe, Groesse, KAUFEN -- dann erst Aufwertungen.
   2. Der Titel darf nicht drei Zeilen Riesenschrift fressen.
   3. Die Miniaturen treten zurueck, das Produktbild bekommt den Platz.
   ========================================================================= */

/* --- 1: Titel kompakter, damit Preis und Wahl hochruecken --------------- */
.v2-root .pdp-info h1 {
  font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.35rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
  margin-top: 10px !important;
}

/* --- 2: Miniaturen treten zurueck --------------------------------------- */
.v2-root .pdp-gallery { grid-template-columns: 68px minmax(0, 1fr) !important; }
.v2-root .pdp-thumbs { padding: 12px 8px !important; gap: 6px !important; }

/* --- 3: Preisblock straffen --------------------------------------------- */
.v2-root .bk-pdp-anker--schlicht {
  padding-block: 0 var(--at-s-3) !important;
  margin-bottom: var(--at-s-3) !important;
}
.at-preis-teile { margin-top: 0.4rem !important; font-size: 0.78rem; }

/* Optionen enger stapeln: der Weg zum Knopf wird kuerzer */
.v2-root .pdp-info .at-opt { margin-block: var(--at-s-4) !important; }
.v2-root .pdp-info .at-opt-kopf { margin-bottom: var(--at-s-2) !important; }

/* --- 4: Der Kaufblock ist der Ankerpunkt der Seite ---------------------- */
.v2-root .bk-pdp-kaufen {
  margin-block: var(--at-s-5) var(--at-s-4) !important;
  padding-top: var(--at-s-4);
  border-top: 1px solid var(--at-line-hair);
}

/* --- 5: Aufwertungen nach dem Kauf: ruhig, klar abgesetzt --------------- */
.at-upgrades {
  margin-top: var(--at-s-6);
  padding-top: var(--at-s-4);
  border-top: 1px solid var(--at-line-hair);
}
.at-upgrades-kopf {
  margin-bottom: var(--at-s-3);
  color: var(--at-ink-mute);
}
/* In der Aufwertungszone reicht die halbe Lautstaerke */
.at-upgrades .at-opt { margin-block: var(--at-s-4) !important; }
.at-upgrades .at-opt-kopf { border-bottom: 0 !important; padding-bottom: 0 !important; }

@media (max-width: 900px) {
  .v2-root .pdp-info h1 { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 1.9rem) !important; }
  .v2-root .pdp-gallery { grid-template-columns: 1fr !important; }
}

/* Der Kaufknopf ist die Handlung der Seite: volle Breite, gross, ruhig.
   Der Preis steht IM Knopf, sobald die Groesse feststeht (01.09.2026). */
.v2-root .at-kaufknopf {
  width: 100% !important;
  justify-content: center !important;
  padding-block: 1.15em !important;
  font-size: 0.84rem !important;
}
.v2-root .bk-pdp-kaufen { display: block !important; }

/* Groessenfelder: gleiche Hoehe, ob mit Aufpreis oder ohne. Vorher standen
   S bis XL niedriger als 2XL bis 5XL, die Reihe sprang (01.09.2026). */
.v2-root .at-size { min-height: 58px !important; }
.v2-root .at-size-preis { min-height: 0.7rem; }

/* =========================================================================
   PRODUKTSEITE — RADIKAL SAUBER (01.09.2026)
   =========================================================================
   Inhaber: "visuell nicht sauber, nicht ordentlich, nicht clean". Er hat
   recht. Die Seite sprach mit fuenf Schriftstimmen (Serif, Serif-kursiv in
   Akzentfarbe, Sans, Mono-Eyebrows, Mono-Preise), lag auf beigem Verlauf mit
   Bodenschatten und Motivschleier, trug ein Laufband, einen Kruemelpfad,
   Gewebe-Muster in den Stoffzeilen und acht fast gleiche Miniaturen.

   Neue Haltung: EIN Bild, EINE Schrift fuer den Titel, ruhige Optionen, EIN
   Knopf. Alles auf warmem Weiss, auf dem 8-px-Raster, ohne Hoverhuepfer.
   Bewegung bleibt nur, wo sie etwas erklaert (Bildwechsel, Wahlzustand).
   Diese Schicht liegt hinter allen frueheren und ueberschreibt sie gezielt.
   ========================================================================= */

.v2-root {
  --cl-ground: oklch(0.985 0.006 85);
  --cl-ground-2: oklch(0.972 0.008 85);
  --cl-hair: color-mix(in oklch, var(--at-ink) 10%, transparent);
  --cl-hair-2: color-mix(in oklch, var(--at-ink) 18%, transparent);
}

/* --- Grund und Raster ---------------------------------------------------- */
.v2-root .pdp {
  background: var(--cl-ground) !important;
  border-top: 1px solid var(--cl-hair);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
}

/* --- Buehne: ein Bild, sonst nichts -------------------------------------- */
.v2-root .pdp-gallery {
  background: var(--cl-ground) !important;
  border-right: 1px solid var(--cl-hair) !important;
  grid-template-columns: 1fr !important;
  grid-template-areas: "hero" "thumbs" !important;
  grid-template-rows: minmax(0, 1fr) auto;
}
.v2-root .pdp-hero {
  background: var(--cl-ground) !important;
  padding: 28px 40px !important;
}
.v2-root .pdp-hero::before,
.v2-root .pdp-hero::after { display: none !important; }
.v2-root .pdp-hero .slide img { padding: 0 !important; }
.v2-root .pdp-view-label { display: none !important; }

/* Pfeile: stille weisse Scheiben */
.v2-root .pdp-nav-btn {
  background: var(--cl-ground) !important;
  color: var(--at-ink) !important;
  border: 1px solid var(--cl-hair-2) !important;
  box-shadow: none !important;
  width: 40px !important; height: 40px !important;
}
.v2-root .pdp-nav-btn:hover { background: var(--at-ink) !important; color: var(--cl-ground) !important; }
.v2-root .pdp-zoom-hint { background: var(--cl-ground) !important; border: 1px solid var(--cl-hair-2) !important; box-shadow: none !important; }

/* Miniaturen: eine ruhige Reihe kleiner Quadrate unter dem Bild.
   05.09.2026 (Inhaber: "5 Bildkacheln sehe ich gerade, aber das ist nicht
   vollstaendig ... entweder alle, oder ein Karussell, oder irgendein Zeichen
   dafuer, dass es mehr gibt"): die Kappe "hoechstens fuenf"
   (nth-child(n+6) display:none) ist weg. Alle Ansichten stehen in der Reihe;
   passt sie nicht in die Breite, scrollt sie, und Pfeil + Verlauf an der
   Kante zeigen, dass dahinter noch Kacheln liegen (.pdp-thumbs-wrap).
   Zentriert ueber Auto-Raender der ersten/letzten Kachel, nicht ueber
   justify-content: center - das schneidet beim Ueberlauf den Anfang ab. */
.v2-root .pdp-thumbs-wrap { --pdp-thumbs-fade: var(--cl-ground); }
.v2-root .pdp-thumbs {
  grid-area: thumbs !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start;
  gap: 8px !important;
  padding: 0 40px 24px !important;
  overflow-x: auto;
  border: 0 !important;
  background: transparent !important;
}
.v2-root .pdp-thumb:first-child { margin-left: auto; }
.v2-root .pdp-thumb:last-child { margin-right: auto; }
.v2-root .pdp-thumb {
  flex: 0 0 auto;
  width: 60px !important; height: 60px !important;
  min-height: 0 !important;
  padding: 4px !important;
  border-radius: 6px !important;
  background: var(--cl-ground) !important;
  box-shadow: inset 0 0 0 1px var(--cl-hair) !important;
  transition: box-shadow 160ms ease !important;
}
.v2-root .pdp-thumb:hover { transform: none !important; box-shadow: inset 0 0 0 1px var(--cl-hair-2) !important; }
.v2-root .pdp-thumb.is-active { background: var(--cl-ground) !important; box-shadow: inset 0 0 0 1.5px var(--at-ink) !important; }
.v2-root .pdp-thumb img { width: 100% !important; height: 100% !important; object-fit: contain; }

/* --- Rechte Spalte: Ordnung ---------------------------------------------- */
.v2-root .pdp-info {
  padding: 40px 48px 56px !important;
  gap: 0 !important;
}
.v2-root .pdp-info > * + * { margin-top: 24px; }

/* Weg mit dem Laerm ueber dem Titel */
.v2-root .pdp-topline { display: none !important; }
.v2-root .at-preis-teile { display: none !important; }

/* Titel: eine Stimme, kein farbiger Kursivsprung */
.v2-root .pdp-info h1 {
  font-family: var(--at-serif) !important;
  font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.05rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  color: var(--at-ink) !important;
  text-wrap: balance;
}
.v2-root .pdp-info h1 .ital { color: inherit !important; font-style: normal !important; }

/* Preis: Sans, klar, ohne Mono-Vorsatz */
.v2-root .bk-pdp-anker--schlicht {
  border: 0 !important;
  padding: 0 !important;
  margin: 12px 0 0 !important;
}
.v2-root .bk-pdp-anker--schlicht .bk-preis,
.v2-root .bk-pdp-anker--schlicht .bk-preis-betrag {
  font-family: var(--at-sans) !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--at-ink) !important;
}
.v2-root .bk-pdp-anker--schlicht .bk-preis-ab {
  font-family: var(--at-sans) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--at-ink-mute) !important;
}
.v2-root .bk-pdp-anker-versand {
  font-family: var(--at-sans) !important;
  font-size: 0.85rem !important;
  color: var(--at-ink-mute) !important;
  margin-top: 6px;
}
.v2-root .pdp-rating-inline { font-family: var(--at-sans) !important; font-size: 0.85rem !important; margin-top: 8px !important; }

/* Optionsgruppen: keine Mono-Eyebrows, keine Linie, nur Text und Luft */
.v2-root .pdp-info .at-opt { margin: 28px 0 0 !important; }
.v2-root .pdp-info .at-opt-kopf {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
}
.v2-root .pdp-info .at-opt-kopf .at-eyebrow {
  font-family: var(--at-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--at-ink) !important;
}
.v2-root .pdp-info .at-opt-wert,
.v2-root .pdp-info .at-opt-hint {
  font-family: var(--at-sans) !important;
  font-size: 0.85rem !important;
  font-style: normal !important;
  color: var(--at-ink-mute) !important;
}

/* Farbtupfer: klein, ruhig, aktiver Ring in Tinte */
.v2-root .at-swatches { gap: 10px !important; padding: 0 !important; }
.v2-root .at-swatch {
  width: 32px !important; height: 32px !important;
  box-shadow: inset 0 0 0 1px var(--cl-hair-2) !important;
  transition: none !important;
}
.v2-root .at-swatch:hover { transform: none !important; }
.v2-root .at-swatch::after { inset: -4px !important; border: 1.5px solid var(--at-ink) !important; }

/* Groessen: gleichfoermige Felder, Aufpreis winzig und still */
.v2-root .at-sizes { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)) !important; gap: 8px !important; }
.v2-root .at-size {
  min-height: 46px !important;
  border-radius: 6px !important;
  background: var(--cl-ground) !important;
  box-shadow: inset 0 0 0 1px var(--cl-hair-2) !important;
  transition: background-color 120ms ease, color 120ms ease !important;
}
.v2-root .at-size:hover:not([disabled]) { transform: none !important; box-shadow: inset 0 0 0 1px var(--at-ink) !important; }
.v2-root .at-size.ist-gewaehlt { background: var(--at-ink) !important; color: var(--cl-ground) !important; box-shadow: none !important; }
.v2-root .at-size-buchstabe { font-size: 0.92rem !important; font-weight: 500 !important; }
.v2-root .at-size-preis { font-family: var(--at-sans) !important; font-size: 0.62rem !important; opacity: 0.75; }

/* Der Knopf: eine Handlung, Sans, kein Sperrsatz, kein Huepfer */
.v2-root .bk-pdp-kaufen { border: 0 !important; padding: 0 !important; margin: 28px 0 0 !important; }
.v2-root .at-kaufknopf,
.v2-root .at-kaufknopf * {
  font-family: var(--at-sans) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.v2-root .at-kaufknopf {
  min-height: 54px !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transition: background-color 140ms ease !important;
}
.v2-root .at-kaufknopf:hover { transform: none !important; box-shadow: none !important; }

/* Aufwertungen: schlichte Liste, ohne Gewebe, ohne Mockup-Kacheln */
.v2-root .at-upgrades { border-top: 1px solid var(--cl-hair) !important; margin-top: 32px !important; padding-top: 24px !important; }
.v2-root .at-upgrades-kopf { display: none !important; }
.v2-root .at-lane {
  padding: 12px 14px !important;
  border-radius: 8px !important;
  background: var(--cl-ground) !important;
  box-shadow: inset 0 0 0 1px var(--cl-hair) !important;
  transition: box-shadow 120ms ease !important;
}
.v2-root .at-lane:hover { transform: none !important; box-shadow: inset 0 0 0 1px var(--cl-hair-2) !important; }
.v2-root .at-lane.ist-gewaehlt { background: var(--cl-ground-2) !important; box-shadow: inset 0 0 0 1.5px var(--at-ink) !important; }
.v2-root .at-lane-stoff, .v2-root .at-lane-bild { display: none !important; }
.v2-root .at-lane-name { font-size: 0.92rem !important; font-weight: 500 !important; }
.v2-root .at-lane-unter, .v2-root .at-lane.ist-gewaehlt .at-lane-unter { font-size: 0.8rem !important; color: var(--at-ink-mute) !important; }
.v2-root .at-lane-marke, .v2-root .at-lane.ist-gewaehlt .at-lane-marke {
  font-family: var(--at-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--at-ink) !important;
}
.v2-root .at-lane-schalter { background: color-mix(in oklch, var(--at-ink) 14%, transparent) !important; }
.v2-root .at-lane--schalter.ist-gewaehlt .at-lane-schalter { background: var(--at-ink) !important; }

/* Beschreibung, Details, Story: Sans, ruhig, ein Grau */
.v2-root .pdp-description, .v2-root .pdp-story p { font-family: var(--at-sans) !important; color: var(--at-ink-soft) !important; }

@media (max-width: 900px) {
  .v2-root .pdp { grid-template-columns: 1fr !important; border-top: 0; }
  .v2-root .pdp-gallery { border-right: 0 !important; }
  .v2-root .pdp-hero { padding: 16px 20px !important; height: min(58vh, 520px) !important; }
  .v2-root .pdp-thumbs { padding: 0 20px 16px !important; justify-content: flex-start; }
  .v2-root .pdp-thumb { width: 52px !important; height: 52px !important; }
  .v2-root .pdp-info { padding: 24px 20px 40px !important; }
  .v2-root .pdp-info h1 { font-size: 1.45rem !important; }
  .v2-root .pdp-info .at-opt { margin-top: 22px !important; }
}

/* Untere Haelfte der Produktseite: Akkordeon, Details, Story in derselben Stimme */
.v2-root .pdp-info summary, .v2-root .pdp-info details, .v2-root .pdp-info .plus, .v2-root .pdp-info .pdp-gift-hook-eyebrow, .v2-root .pdp-info .pdp-section-title, .v2-root .pdp-info h2, .v2-root .pdp-info h3 { font-family: var(--at-sans) !important; letter-spacing: 0 !important; text-transform: none !important; }
.v2-root .pdp-info summary { font-size: 0.95rem !important; font-weight: 500 !important; }
.v2-root .pdp-info .pdp-gift-hook { border-left: 0 !important; padding-left: 0 !important; }
.v2-root .pdp-info .pdp-gift-hook-eyebrow { color: var(--at-ink-mute) !important; font-size: 0.8rem !important; }

/* Der Geschenk-Hinweis: keine Seitenleiste (Verbot: Side-Stripe), keine zweite Serif, kein gruener Kursivsprung */
.v2-root .pdp-info .pdp-gift-hook { border: 0 !important; border-top: 1px solid var(--cl-hair) !important; border-radius: 0 !important; padding: 20px 0 0 !important; margin: 24px 0 0 !important; background: transparent !important; }
.v2-root .pdp-info .pdp-gift-hook p, .v2-root .pdp-info .pdp-gift-hook em, .v2-root .pdp-info .pdp-gift-hook i, .v2-root .pdp-info .pdp-gift-hook .ital { font-family: var(--at-sans) !important; font-style: normal !important; color: var(--at-ink-soft) !important; font-size: 0.92rem !important; line-height: 1.6 !important; }
.v2-root .pdp-info .pdp-gift-hook-eyebrow { display: block; margin-bottom: 6px; }

/* --- Rest der Produktseite in derselben sauberen Sprache (01.09.2026) --- */
body:has(.pdp) { background: oklch(0.985 0.006 85) !important; }
.v2-root:has(.pdp) { background: var(--cl-ground) !important; }
.v2-root .pdp-mehr { font-family: var(--at-sans) !important; font-size: 0.9rem !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: underline; text-underline-offset: 3px; color: var(--at-ink) !important; }
.v2-root .pdp-remix { background: transparent !important; border: 0 !important; border-top: 1px solid var(--cl-hair) !important; border-radius: 0 !important; padding: 24px 0 0 !important; margin: 28px 0 0 !important; }
.v2-root .pdp-remix *, .v2-root .pdp-remix .ital { font-family: var(--at-sans) !important; letter-spacing: 0 !important; text-transform: none !important; font-style: normal !important; }
.v2-root .pdp-remix p { color: var(--at-ink-soft) !important; font-size: 0.92rem !important; line-height: 1.6 !important; }
.v2-root .pdp-remix .ital { color: var(--at-ink) !important; font-weight: 500; }
.v2-root .pdp-remix-cta { display: inline-flex !important; align-items: center; min-height: 44px; padding: 0 18px !important; border-radius: 999px !important; background: transparent !important; color: var(--at-ink) !important; box-shadow: inset 0 0 0 1px var(--at-ink) !important; font-size: 0.92rem !important; font-weight: 500 !important; margin-top: 12px; }
.v2-root .pdp-remix-cta:hover { background: var(--at-ink) !important; color: var(--cl-ground) !important; }
.v2-root:has(.pdp) .design-bottom { background: var(--cl-ground) !important; border-top: 1px solid var(--cl-hair); }
.v2-root:has(.pdp) .design-bottom *:not(h2):not(h3):not(.dbs-h2) { font-family: var(--at-sans) !important; letter-spacing: 0 !important; text-transform: none !important; }
.v2-root:has(.pdp) .design-bottom .dbs-h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem) !important; }
.v2-root:has(.pdp) .design-bottom .dbs-h2 .ital { color: inherit !important; font-style: normal !important; }
.v2-root:has(.pdp) .design-bottom .dc-media, .v2-root:has(.pdp) .design-bottom [class*="card"] { background: var(--cl-ground) !important; box-shadow: inset 0 0 0 1px var(--cl-hair) !important; border-radius: 8px !important; }
.v2-root:has(.pdp) .design-bottom .dc-media::after { display: none !important; }

/* =========================================================================
   GANZE SEITE — RADIKAL SAUBER (02.09.2026)
   =========================================================================
   Die Produktseite ist sauber; jetzt spricht die ganze Seite so. Was hier
   faellt: das Laufband, die Mono-Sperrschrift (eine Zeile schaltet ALLE
   Mono-Stellen auf die Textschrift), der gruene Kursivsprung in jeder
   Ueberschrift, der gruene Unterstrich, beige Verlaeufe und Bodenschatten
   unter Karten, das Icon-Geklingel in der Navigation, jeder Hoverhuepfer.
   Was bleibt: die Serif fuer Ueberschriften, die Tinte, ein Akzent, Luft.
   ========================================================================= */

/* --- Grund und eine Stimme ---------------------------------------------- */
body, .v2-root { background: oklch(0.985 0.006 85) !important; }
.v2-root { --f-mono: var(--f-body); }

.v2-root .ital,
.v2-root h1 .ital, .v2-root h2 .ital, .v2-root h3 .ital,
.v2-root .hero-title .ital, .v2-root .section-head-v2 .ital { color: inherit !important; font-style: normal !important; }

.v2-root [class*="eyebrow"], .v2-root .eyebrow-v2, .v2-root .at-eyebrow, .v2-root .bk-eyebrow,
/* .num (grosse Zahlen im Streifen) gehoert NICHT hierher -- die Regel machte 74-px-Serifenzahlen zu 13-px-Grau. */
.v2-root .hs3d-tag, .v2-root .bks-ed-etikett, .v2-root .label {
  font-family: var(--f-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 0.82rem !important;
  color: var(--at-ink-mute) !important;
}

/* --- Laufband weg -------------------------------------------------------- */
.v2-root .ticker { display: none !important; }

/* --- Kopfzeile: still, weiss, Sans ---------------------------------------- */
.v2-root .topbar {
  background: oklch(0.985 0.006 85) !important;
  border-bottom: 1px solid color-mix(in oklch, var(--at-ink) 10%, transparent) !important;
  box-shadow: none !important;
}
.v2-root .topbar .brand sup, .v2-root .topbar .brand .seit { display: none !important; }
.v2-root .topbar .nav a, .v2-root .topbar .nav-right a:not(.chip-link) {
  font-family: var(--f-body) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--at-ink-soft) !important;
}
.v2-root .topbar .nav a:hover { color: var(--at-ink) !important; }
.v2-root .topbar .nav .ico, .v2-root .topbar .nav svg { display: none !important; }
.v2-root .chip-link, .v2-root .chip-link * {
  font-family: var(--f-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.v2-root .chip-link { font-size: 0.9rem !important; font-weight: 500 !important; box-shadow: none !important; }
.v2-root .chip-link:hover { transform: none !important; }

/* --- Held: Titel ohne Farbsprung, kein Unterstrich, ruhige Fakten -------- */
.v2-root .hero-title { letter-spacing: -0.02em !important; }
.v2-root .hero-title::after, .v2-root .underline::after, .v2-root .hero .underline::after { display: none !important; }
.v2-root .hero .underline, .v2-root .hero-title .underline { border: 0 !important; text-decoration: none !important; }
.v2-root .hero-sub { font-family: var(--f-body) !important; color: var(--at-ink-soft) !important; }
.v2-root .hero .price, .v2-root .hero .price * { font-family: var(--f-body) !important; letter-spacing: 0 !important; }
.v2-root .hero .price { font-size: 1.4rem !important; font-weight: 500 !important; }
.v2-root .bks-hero-fakten, .v2-root .bks-hero-fakten * { font-family: var(--f-body) !important; color: var(--at-ink-mute) !important; letter-spacing: 0 !important; text-transform: none !important; }
.v2-root .hs3d-caption { display: none !important; }
.v2-root .hs3d-glow { display: none !important; }
.v2-root .hs3d-inner {
  border-radius: 6px !important;
  background: oklch(0.985 0.006 85) !important;
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--at-ink) 10%, transparent),
    0 12px 32px -18px color-mix(in oklch, var(--at-ink) 28%, transparent) !important;
}
.v2-root .hs3d-tag {
  background: oklch(0.985 0.006 85) !important;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--at-ink) 10%, transparent) !important;
  color: var(--at-ink) !important;
  font-size: 0.72rem !important;
  padding: 4px 8px !important;
}

/* --- Sektionen ----------------------------------------------------------- */
.v2-root .section-head-v2 h1, .v2-root .section-head-v2 h2 { letter-spacing: -0.02em !important; }
.v2-root .section-lead, .v2-root .section-lead * { font-family: var(--f-body) !important; color: var(--at-ink-soft) !important; }

/* --- Karten: weiss, Haarlinie, kein Verlauf, kein Schatten, kein Huepfer -- */
.v2-root .bks-ed-blatt, .v2-root .dc-media, .v2-root .gqv-media, .v2-root .bk-kachel-bild, .v2-root .rev-card, .v2-root .review-card, .v2-root .bk-cart-kasten, .v2-root .v2k-section, .v2-root .v2k-summary, .v2-root .at-sheet {
  background: oklch(0.985 0.006 85) !important;
  background-image: none !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--at-ink) 10%, transparent) !important;
  transition: box-shadow 140ms ease !important;
}
.v2-root .bks-ed-blatt:hover, .v2-root a:hover > .dc-media, .v2-root .dc-card:hover .dc-media, .v2-root .bk-kachel:hover .bk-kachel-bild {
  transform: none !important;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--at-ink) 22%, transparent) !important;
}
.v2-root .dc-media::after, .v2-root .at-groundshadow::after { display: none !important; }
.v2-root .bk-kachel.ist-gewaehlt .bk-kachel-bild {
  background: oklch(0.972 0.008 85) !important;
  box-shadow: 0 0 0 1.5px var(--at-ink) !important;
}
.v2-root .bks-ed-etikett {
  background: oklch(0.985 0.006 85) !important;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--at-ink) 10%, transparent) !important;
  color: var(--at-ink) !important;
}

/* --- Knoepfe: Sans, kein Sperrsatz, kein Huepfer -------------------------- */
.v2-root .bk-knopf, .v2-root .bk-knopf *, .v2-root .at-btn, .v2-root .at-btn *,
.v2-root .btn-primary, .v2-root .btn-secondary, .v2-root .bks-hero-handlung a, .v2-root .bks-hero-handlung a * {
  font-family: var(--f-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.v2-root .bk-knopf, .v2-root .at-btn, .v2-root .btn-primary, .v2-root .btn-secondary { font-weight: 500 !important; box-shadow: none !important; }
.v2-root .bk-knopf:hover, .v2-root .at-btn:hover, .v2-root .btn-primary:hover, .v2-root .btn-secondary:hover,
.v2-root .chip-link:hover, .v2-root .at-pick:hover, .v2-root .at-lane:hover, .v2-root .at-size:hover, .v2-root .at-swatch:hover,
.v2-root .bk-cart-bild:hover, .v2-root .pdp-thumb:hover { transform: none !important; }
.v2-root .at-btn::before { display: none !important; }
.v2-root .at-btn:hover { background: var(--at-accent-deep) !important; }

/* --- Fusszeile ----------------------------------------------------------- */
.v2-root footer, .v2-root .footer { background: oklch(0.972 0.008 85) !important; border-top: 1px solid color-mix(in oklch, var(--at-ink) 10%, transparent) !important; }
.v2-root footer *, .v2-root .footer * { letter-spacing: 0 !important; text-transform: none !important; }

/* --- Die Buehne der Produktseite haengt nun am kuerzeren Kopf ------------- */
.v2-root .pdp-gallery { top: 64px !important; max-height: calc(100vh - 64px) !important; }

/* --- Engstelle: das Papier-Token selbst wird weiss (02.09.2026) ---------- */
/* Jede Sektion, jede Kachel, jeder Streifen las --paper/--paper-2. Statt sie einzeln zu jagen, tragen die Tokens jetzt den sauberen Grund. Dunkle Baender (Tinte) bleiben unberuehrt. */
.v2-root { --paper: oklch(0.985 0.006 85); --paper-2: oklch(0.972 0.008 85); --paper-3: oklch(0.96 0.009 85); }
.v2-root .ital { font-weight: inherit !important; }
.v2-root a[class*="btn"], .v2-root button[class*="btn"], .v2-root [class*="knopf"], .v2-root [class*="cta"], .v2-root .bk-knopf, .v2-root [class*="btn"] * , .v2-root [class*="cta"] * { font-family: var(--f-body) !important; letter-spacing: 0 !important; text-transform: none !important; }
.v2-root .chip-link:not(.filled) { /* 02.09.: Hero-Knoepfe aus dieser Regel entfernt, sie leerte den Hauptknopf */ background: transparent !important; box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--at-ink) 22%, transparent) !important; }
.v2-root .strip, .v2-root .strip > *, .v2-root .section-head, .v2-root hr { border-color: color-mix(in oklch, var(--at-ink) 10%, transparent) !important; }
.v2-root .section-head { border-width: 0 0 1px !important; }
.v2-root hr { border-width: 1px 0 0 !important; }

/* Der Token stand in einer spezifischeren Quelle; Vorrang erzwingen */
html .v2-root, .v2-root.v2-root, body .v2-root { --paper: oklch(0.985 0.006 85) !important; --paper-2: oklch(0.972 0.008 85) !important; --paper-3: oklch(0.96 0.009 85) !important; }

/* .ital lud eine eigene Kursiv-Familie; ohne Kursiv fiel sie auf eine fette Ersatzschrift. Jetzt erbt sie. */
.v2-root .ital, .v2-root h1 .ital, .v2-root h2 .ital { font-family: inherit !important; }

/* layout.tsx setzt html/body auf #ECE7D5 !important (inline). Hoehere Spezifitaet gewinnt. */
:root, html body, html.v2 body, body.font-sans { background: oklch(0.985 0.006 85) !important; }
.v2-root [class*="crumb"], .v2-root [class*="crumb"] *, .v2-root nav[aria-label] a, .v2-root .v2k-crumbs * { font-family: var(--f-body) !important; letter-spacing: 0 !important; text-transform: none !important; font-size: 0.82rem !important; color: var(--at-ink-mute) !important; }

/* Galerie-Karten: Haarlinie statt Tintenrahmen, Nummer und Preis still (02.09.2026) */
.v2-root .design-card-v2, .v2-root .look { border: 1px solid color-mix(in oklch, var(--at-ink) 10%, transparent) !important; border-radius: 8px !important; box-shadow: none !important; overflow: hidden; transition: border-color 140ms ease !important; }
.v2-root .design-card-v2:hover { border-color: color-mix(in oklch, var(--at-ink) 26%, transparent) !important; transform: none !important; }
.v2-root .design-card-v2 .dc-media { border-radius: 0 !important; box-shadow: none !important; }
.v2-root .bk-dc-flaeche, .v2-root .dc-nr, .v2-root .design-card-v2 [class*="nr"], .v2-root .design-card-v2 [class*="num"] { font-family: var(--f-body) !important; font-size: 0.72rem !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--at-ink-ghost) !important; }
.v2-root .dc-name { font-family: var(--f-body) !important; font-size: 0.95rem !important; font-weight: 500 !important; color: var(--at-ink) !important; }
.v2-root .dc-price, .v2-root .dc-price * { font-family: var(--f-body) !important; font-size: 0.95rem !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--at-ink) !important; }
.v2-root .dc-price svg { display: none !important; }
.v2-root .dc-info { border-top: 1px solid color-mix(in oklch, var(--at-ink) 8%, transparent) !important; background: transparent !important; }
.v2-root .dc-colors { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }

/* Der Body-Grund kam aus einer weiteren Quelle mit !important; ID-Spezifitaet setzt sich durch. */
html:not(#nie), body:not(#nie), html:not(#nie):has(.v2-root), body:not(#nie):has(.v2-root) { background: oklch(0.985 0.006 85) !important; background-color: oklch(0.985 0.006 85) !important; }

/* Korrektur 02.09.: die Outline-Regel hatte den HAUPT-Knopf des Helden mit erwischt (leerer Kreis auf Mobil). Haupt = Tinte, Neben = Haarlinie. */
.v2-root .bks-hero-handlung .bk-knopf:not(.bk-knopf--neben) { background: var(--at-ink) !important; color: oklch(0.985 0.006 85) !important; box-shadow: none !important; }
.v2-root .bks-hero-handlung .bk-knopf:not(.bk-knopf--neben) * { color: inherit !important; }
.v2-root .bks-hero-handlung .bk-knopf--neben { background: transparent !important; color: var(--at-ink) !important; box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--at-ink) 26%, transparent) !important; }

/* =========================================================================
   OWNER-PUNKTE 02.09.2026, 13:35 -- "so viele haessliche Punkte"
   ========================================================================= */

/* --- H2: Newsletter + Footer waren WEISS AUF WEISS ---------------------- */
/* Beide Bloecke sind als dunkle Bloecke gebaut (helle Schrift). Meine Grund-
   Regel hatte dem Footer den dunklen Hintergrund genommen -- die Schrift
   blieb hell, das Feld wirkte leer. Dunkler Abschluss wiederhergestellt. */
.v2-root footer, .v2-root .footer {
  background: var(--at-ink) !important;
  border-top: 0 !important;
  color: oklch(0.985 0.006 85);
}
.v2-root .v2-newsletter-strip {
  background: var(--at-ink) !important;
  color: oklch(0.985 0.006 85);
}
.v2-root .v2-newsletter-strip .v2-news-input {
  background: color-mix(in oklch, oklch(0.985 0.006 85) 8%, transparent) !important;
  color: oklch(0.985 0.006 85) !important;
  border: 1px solid color-mix(in oklch, oklch(0.985 0.006 85) 26%, transparent) !important;
  border-radius: 999px !important;
}
.v2-root .v2-newsletter-strip .v2-news-input::placeholder { color: color-mix(in oklch, oklch(0.985 0.006 85) 55%, transparent); }
.v2-root .v2-newsletter-strip .v2-news-btn {
  background: oklch(0.985 0.006 85) !important;
  color: var(--at-ink) !important;
  border-radius: 999px !important;
  font-family: var(--f-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 500 !important;
}
.v2-root .v2-newsletter-strip .v2-news-btn * { color: var(--at-ink) !important; }
.v2-root .v2-newsletter-strip .v2-news-eyebrow,
.v2-root .v2-newsletter-strip .v2-news-sub { color: color-mix(in oklch, oklch(0.985 0.006 85) 70%, transparent) !important; }
.v2-root .v2-newsletter-strip .v2-news-headline { color: oklch(0.985 0.006 85) !important; }
.v2-root footer .footer-cta, .v2-root .footer-cta { background: #131511 !important; } /* dunkel wie Manifest/Newsletter; das flache Gruen wirkte billig (Inhaber 03.09.) */

/* --- H1: Sticky-Kaufleiste mobil ---------------------------------------- */
/* Kein Shirt-Icon, keine Verlaeufe: weisser Streifen mit Haarlinie oben,
   Preis links in Sans, EIN Knopf rechts mit erzwungen heller Schrift. */
.v2-root .pdp-sticky-cta {
  background: oklch(0.985 0.006 85) !important;
  border-top: 1px solid color-mix(in oklch, var(--at-ink) 12%, transparent) !important;
  box-shadow: 0 -8px 24px -16px color-mix(in oklch, var(--at-ink) 30%, transparent) !important;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important;
  gap: 12px !important;
  align-items: center !important;
}
.v2-root .pdp-sticky-meta { gap: 6px !important; align-items: baseline !important; }
.v2-root .pdp-sticky-meta > svg, .v2-root .pdp-sticky-meta .bk-druckflaechen { display: none !important; }
.v2-root .pdp-sticky-meta .bk-preis, .v2-root .pdp-sticky-meta .bk-preis * {
  font-family: var(--f-body) !important;
  font-size: 1.15rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--at-ink) !important;
}
.v2-root .pdp-sticky-meta .bk-preis-ab { font-size: 0.8rem !important; font-weight: 400 !important; color: var(--at-ink-mute) !important; text-transform: none !important; }
.v2-root .pdp-sticky-size-hint { font-family: var(--f-body) !important; font-size: 0.8rem !important; color: var(--at-ink-mute) !important; }
.v2-root .pdp-sticky-atc {
  background: var(--at-ink) !important;
  color: oklch(0.985 0.006 85) !important;
  min-height: 48px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  flex: 0 0 auto;
}
.v2-root .pdp-sticky-atc * { color: oklch(0.985 0.006 85) !important; fill: currentColor; }
.v2-root .pdp-sticky-atc:hover { background: var(--at-accent-deep) !important; transform: none !important; }

/* --- H4: Titel abgeschnitten -------------------------------------------- */
/* a) Held-Stapel: die Etiketten sitzen jetzt oben links -- dort ueberdeckt
      keine Karte die andere (unten links lag "Labrador" hinter Karte 3). */
.v2-root .hs3d-tag { top: auto !important; bottom: 8px !important; left: 8px !important; right: auto !important; } /* 05.09.2026: unten, verdeckt das Motiv nicht */
/* Die rechte Karte wird unten links von der vorderen Karte ueberdeckt, ihr Etikett sitzt deshalb rechts. */
.v2-root .hs3d-c2 .hs3d-tag { left: auto !important; right: 8px !important; }
/* b) Galeriekarten (05.09.2026, Owner: "manche drei Zeilen, manche eine, alles
   einheitlich in EINER Zeile"): Name mit Auslassung, Preis rechts auf derselben
   Grundlinie. Die Zwei-Zeilen-Fassung vom Audit ist damit zurueckgenommen. */
.v2-root .dc-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  line-height: 1.3 !important;
}
.v2-root .dc-info { align-items: baseline !important; flex-wrap: nowrap !important; gap: 10px; }

/* --- H5: Pinsel-/Mal-Animationen im Wizard und auf den Editionskarten ---- */
/* Sauber heisst still. Das Bild steht, nichts wischt, nichts zieht Linien. */
.v2-root .bks-ed-pinsel, .v2-root .bks-ed-linie { display: none !important; }
.v2-root .malt-kurz img, .v2-root .ist-malend img, .v2-root .bks-ed-blatt.ist-malend .bks-ed-bild img {
  animation: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  opacity: 1 !important;
}
.v2-root .bks-ed-blatt .bks-ed-bild { transition: none !important; }


/* --- H3: Bewertungen mobil (02.09.2026) -- die Schiene begann bei x=0 ohne Rand, Karten 260 px liefen rechts aus dem Bild */
@media (max-width: 700px) {
  .v2-root .rtb-rail { padding: 0 20px 16px !important; gap: 12px !important; scroll-snap-type: x mandatory; scroll-padding-left: 20px; scrollbar-width: none; }
  .v2-root .rtb-rail::-webkit-scrollbar { display: none; }
  .v2-root .rtb-rail > .rtb-card { flex: 0 0 min(300px, 82vw) !important; width: min(300px, 82vw) !important; scroll-snap-align: start; }
  .v2-root .rtb-rail > .bvc { flex: 0 0 auto !important; scroll-snap-align: start; border-radius: 8px !important; overflow: hidden; }
  .v2-root .rtb-head { padding-left: 20px !important; padding-right: 20px !important; }
}
.v2-root .rtb-card { background: oklch(0.985 0.006 85) !important; border: 1px solid color-mix(in oklch, var(--at-ink) 10%, transparent) !important; border-radius: 8px !important; box-shadow: none !important; }
.v2-root .rtb-eyebrow, .v2-root .rtb-agg, .v2-root .rtb-agg * { font-family: var(--f-body) !important; letter-spacing: 0 !important; text-transform: none !important; }

/* H3 Nachtrag 02.09.: die alte max-width 260px kappte die Karte, der Text lief ueber den Rand */
@media (max-width: 700px) {
  .v2-root .rtb-rail > .rtb-card { max-width: min(300px, 82vw) !important; min-width: 0 !important; overflow: hidden !important; }
  .v2-root .rtb-rail > .rtb-card > *, .v2-root .rtb-rail > .rtb-card p, .v2-root .rtb-rail > .rtb-card div { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
}
.v2-root .v2-news-btn, .v2-root .v2-news-btn * { text-transform: none !important; letter-spacing: 0 !important; }

/* --- H7: Warenkorb + Kasse, letzte Reste der alten Stimme (02.09.2026) --- */
/* Gruene Kursiv-Stueckzahl im Titel, gruene Versandzeile, Grossbuchstaben-Labels ohne Klasse (Atelier / Warenkorb / Kasse, Express bezahlen, Positionen, Gesamt) */
.v2-root h1 > span:not([class]), .v2-root h1 > span:not([class]) * { color: inherit !important; font-style: normal !important; font-family: inherit !important; }
.v2-root .bk-cart-gruen { color: var(--at-ink-mute) !important; font-weight: 400 !important; }
.v2-root :is(.v2k-grid, .v2k-summary, .v2k-section, .v2k-divider, .v2k-form, .bk-cart, .bk-cart-kasten, [class*="bk-cart"], [class*="v2k-"], .rtb, .bvc, .gq-text) :where(span, div, p, small, label, em, b, strong, time) { text-transform: none !important; letter-spacing: 0 !important; }
.v2-root :is(.rtb, .bvc) :where(span, div, p, time) { font-family: var(--f-body) !important; }
.v2-root .v2k-divider { font-size: 0.8rem !important; color: var(--at-ink-mute) !important; }

/* Letzte Grossbuchstaben-Labels ohne Klasse (Kruemelpfad der Kasse, "Positionen") -- unklassierte Spans sprechen leise */
.v2-root span:not([class]), .v2-root small:not([class]) { text-transform: none !important; letter-spacing: 0 !important; }

/* Warenkorb-Titel mobil: die Stueckzahl wird eine ruhige Unterzeile statt eines Umbruchs mitten im Satz */
@media (max-width: 480px) { .v2-root h1 > span:not([class]) { display: block !important; font-size: 0.55em !important; font-family: var(--f-body) !important; color: var(--at-ink-mute) !important; margin-top: 6px; line-height: 1.3; } }

/* Kruemelpfad-Links der Kasse (a ohne Klasse) ebenfalls leise */
.v2-root a:not([class]) { text-transform: none !important; letter-spacing: 0 !important; }

/* "Positionen" und aehnliche unklassierte Zwischentitel */
.v2-root :where(h2, h3, h4, p, div, li, dt):not([class]) { text-transform: none !important; letter-spacing: 0 !important; }

/* =========================================================================
   A1 -- Wizard auf dem Handy (Owner-Screenshot 02.09., 14:54)
   =========================================================================
   Befund: Meine Kassen-Regel (aktive Stufe bekommt den freien Platz) traf
   auch die Wizard-Kette. Dort hat die Kette nur ~200 px neben Logo und
   Schliessen-Knopf: die aktive Stufe wurde ein 233x77-Block mit Zeichen
   UEBER dem Namen, die anderen 38 px schmale Kaestchen. Die Produktkarten
   standen einspaltig (319x506): die zweite Wahl lag unter der Falz.

   Neu: im Wizard-Kopf zeigt die Kette auf dem Handy drei gleiche, kleine
   Ziffernkreise -- die aktive in Tinte. Die Produktkarten stehen zu zweit
   nebeneinander, beide Optionen auf einen Blick.
   ========================================================================= */

@media (max-width: 700px) {
  /* --- Kette im Wizard-Kopf: drei Ziffernkreise --------------------------- */
  
  
  
  
  
  
  
  

  /* --- Produktkarten: zu zweit nebeneinander ------------------------------ */
  
  
  
  
  
}

/* A1 Nachtrag: die Faktenzeile unter den Wizard-Karten als ruhige Liste, eine Angabe je Zeile */

/* A1 Nachtrag 2: die Faktenzeile heisst .bk-kachel-fuss */
/* Gesperrte Groessen: lesbar, nicht geisterhaft (Audit: 2,6:1) */
.v2-root .at-size[disabled] { color: var(--at-ink-mute) !important; }
.v2-root .at-size[disabled] .at-size-buchstabe { text-decoration: line-through; text-decoration-color: color-mix(in oklch, var(--at-ink) 40%, transparent); }
/* Galeriename: zwei Zeilen duerfen nicht aus der Karte laufen (Audit: ragt aus design-card-v2) */
.v2-root .design-card-v2, .v2-root .design-card-v2 .dc-info { height: auto !important; min-height: 0 !important; }
.v2-root .dc-name { font-size: 0.9rem !important; line-height: 1.25 !important; }
/* Hero-Etikett ohne Versalien -- staerkere Auswahl als die alte Regel */
.v2-root .hs3d-card .hs3d-tag, .v2-root .hs3d-inner .hs3d-tag { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--f-body) !important; }

/* Audit-Befunde 02.09. (lokaler Lauf) */
/* Tablet: die klebende Buehne schob sich ueber den Titel -- einspaltig klebt nichts */
@media (max-width: 900px) { .v2-root .pdp-gallery { position: static !important; max-height: none !important; top: auto !important; } }
/* Galeriekarte: Name darf zwei Zeilen haben, die Karte waechst mit (vorher Fusszeile 19 px hoch, Name lief hinaus) */
.v2-root .design-card-v2 { display: flex !important; flex-direction: column !important; height: auto !important; }
.v2-root .design-card-v2 .dc-media { flex: 0 0 auto; }
.v2-root .design-card-v2 .dc-info { position: static !important; height: auto !important; min-height: 0 !important; display: flex !important; align-items: baseline !important; justify-content: space-between; gap: 10px; padding: 10px 12px !important; }

/* Polaroid-Etikett auf den Skizzenkarten: Sans, keine Versalien, keine Ellipse (Audit: Sperrsatz + abgeschnitten) */
.v2-root .bks-polaroid-etikett { font-family: var(--f-body) !important; font-size: 10px !important; letter-spacing: 0 !important; text-transform: none !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }

/* Galerie: "Nach Motiv stoebern" (a.reveal), Schnellblick (.dc-quick), Filterchips (.gf-chip), "Neu laden" -- Audit-Befund Sperrsatz */
.v2-root a.reveal, .v2-root .dc-quick, .v2-root .gf-chip, .v2-root button:not([class]), .v2-root [class*="reload"], .v2-root [class*="neu-laden"] { font-family: var(--f-body) !important; text-transform: none !important; letter-spacing: 0 !important; }

/* Galeriekarte: die Karte selbst schneidet nicht mehr (3 px Unterlaenge lief in overflow:hidden); nur das Bild bleibt gerundet beschnitten */
.v2-root .design-card-v2 { overflow: visible !important; }
.v2-root .design-card-v2 .dc-media { overflow: hidden !important; border-radius: 8px 8px 0 0 !important; }
.v2-root .design-card-v2 .dc-info { min-height: 44px !important; }
/* Held-Stapel bis 1100 px: flach und ohne Ueberlappung, damit kein Etikett hinter einer Karte liegt (Audit: "Labrador verdeckt von IMG") */
@media (max-width: 1100px) {
  .v2-root .hs3d-card { --ry: 0deg !important; --rx: 0deg !important; --tf: 0deg !important; }
  .v2-root .hs3d-c1 { --w: 36% !important; top: 0 !important; left: 0 !important; --rz: -3deg !important; }
  .v2-root .hs3d-c2 { --w: 36% !important; top: 30% !important; right: 0 !important; --rz: 2deg !important; }
  .v2-root .hs3d-c3 { --w: 34% !important; bottom: 0 !important; left: 31% !important; --rz: -1deg !important; }
}

/* Hero-Etikett auf dem Handy: Text darf umbrechen statt beschnitten zu werden (Audit) */
.v2-root .hs3d-tag { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.25 !important; max-width: calc(100% - 20px) !important; }

/* --- Audit-Befunde Live (02.09., 13 harte) ------------------------------ */
/* Engstelle: --faint (#898C81 = 2,9:1) war die Farbe fast aller blassen Links (Kasse-Rechtstexte, Geschenk-Ziffern, "Alle Ideen", "Hub-Page lesen") */
.v2-root { --faint: #666B61 !important; --at-ink-ghost: oklch(0.60 0.01 74) !important; }
/* Kassen-/Warenkorb-Kette mobil: kein Zeichen ueber dem Namen, ein Glied 40 px hoch */
@media (max-width: 559px) {
  .v2-root .bk-leiste-feld .bk-leiste-knopf { min-height: 40px !important; height: 40px !important; padding: 0 12px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
  .v2-root .bk-leiste-feld .bk-leiste-bild { display: none !important; }
  .v2-root .bk-leiste-feld.ist-erledigt .bk-leiste-haken { position: static !important; }
}
/* "Gutscheincode einloesen" ohne Sperrsatz */
.v2-root .v2k-coupon-toggle, .v2-root .v2k-coupon-toggle * { font-family: var(--f-body) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 0.9rem !important; }

/* Kette: das aktive Glied darf nie breiter als 44 % sein (Audit: 193 px im Wizard-Abschluss) */
@media (max-width: 559px) { .v2-root .bk-leiste-feld.ist-aktiv { flex: 0 1 auto !important; max-width: 44vw !important; } .v2-root .bk-leiste-feld.ist-aktiv .bk-leiste-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30vw; } }

/* Akzent als SCHRIFTFARBE: das Markengruen #4E9F78 bleibt fuer Flaechen, Ringe, Punkte -- als Text (Audit: 2,6-2,9:1 auf Weiss) fuehrt jede Stelle jetzt die tiefere Stufe (4,8:1). Engstelle: ein Token, 40+ Stellen. */
.v2-root { --accent-text: #2F6B4E; }
/* Auf DUNKLEM Grund ist das Dunkelgruen unlesbar (Signatur im Manifest: 2,9:1 auf Tinte,
   Audit-Lauf 6). Dort traegt das Akzentgruen selbst: #4E9F78 auf #131511 = 5,8:1. */
.v2-root .section-dark, .v2-root .manifesto, .v2-root footer, .v2-root .footer,
.v2-root .v2-newsletter-strip, .v2-root .ticker { --accent-text: #4E9F78; }

/* =========================================================================
   WIZARD, neu gebaut (02.09.2026) -- Praefix wz-
   =========================================================================
   Eigenes System, keine Schicht ueber dem Alten. Grund: warmes Weiss.
   Eine Frage je Schritt in Serif, alles andere Sans. Bewegung nur als
   Ankommen (Schritt faehrt ein, Bloecke klappen auf). Keine Ziffernkreise,
   keine Kaesten in Kaesten, keine Hoverhuepfer.
   ========================================================================= */

.wz {
  --wz-grund: oklch(0.985 0.006 85);
  --wz-grund-2: oklch(0.968 0.008 85);
  --wz-tinte: oklch(0.215 0.012 62);
  --wz-tinte-2: oklch(0.42 0.011 66);
  --wz-tinte-3: oklch(0.58 0.01 72);
  --wz-haar: color-mix(in oklch, var(--wz-tinte) 10%, transparent);
  --wz-haar-2: color-mix(in oklch, var(--wz-tinte) 20%, transparent);
  --wz-akzent: #4E9F78;
  --wz-akzent-text: #2F6B4E;
  --wz-akzent-hell: color-mix(in oklch, #4E9F78 12%, var(--wz-grund));
  --wz-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wz-kopf: 60px;
  --wz-leiste: 78px;
  min-height: 100dvh;
  background: var(--wz-grund);
  color: var(--wz-tinte);
  font-family: var(--f-body, system-ui, sans-serif);
  display: flex;
  flex-direction: column;
}
.wz *, .wz *::before, .wz *::after { box-sizing: border-box; }
/* Kein color:inherit hier -- .wz button (0,1,1) schluege .wz-haupt (0,1,0); die Knopfschrift war unsichtbar. */
.wz button { font: inherit; }

/* --- Kopf ---------------------------------------------------------------- */
.wz-kopf {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklch, var(--wz-grund) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--wz-haar);
}
.wz-kopf-zeile {
  height: var(--wz-kopf);
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  padding: 0 clamp(12px, 3vw, 28px);
}
.wz-zurueck, .wz-kreuz {
  width: 44px; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: var(--wz-tinte);
  text-decoration: none;
  transition: background-color 140ms ease;
}
.wz-zurueck:hover, .wz-kreuz:hover { background: var(--wz-grund-2); }
.wz-zurueck:disabled { opacity: 0.25; cursor: default; background: transparent; }
.wz-zurueck { justify-self: start; }
.wz-kreuz { justify-self: end; }
.wz-marke {
  justify-self: center; text-decoration: none; color: var(--wz-tinte);
  font-family: var(--f-display, Georgia, serif); font-size: 1.3rem; letter-spacing: -0.01em;
  display: inline-flex; align-items: baseline; gap: 3px;
}
.wz-punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--wz-akzent); display: inline-block; }

.wz-fortschritt {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 0 clamp(12px, 3vw, 28px) 10px;
}
.wz-fortschritt > span {
  height: 3px; border-radius: 3px; background: var(--wz-haar);
  position: relative; overflow: hidden;
}
.wz-fortschritt > span::after {
  content: ""; position: absolute; inset: 0; background: var(--wz-tinte);
  transform: scaleX(0); transform-origin: left; transition: transform 460ms var(--wz-ease);
}
.wz-fortschritt > span.ist-voll::after { transform: scaleX(1); }
.wz-fortschritt > span.ist-aktiv::after { transform: scaleX(0.35); background: var(--wz-akzent); }

/* --- Rumpf: Vorschau + Schritt ------------------------------------------ */
.wz-rumpf {
  flex: 1 1 auto;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  /* Als flex-Kind fuellt der Rumpf die Viewporthoehe; ohne start wuerde das Grid den
     Ueberschuss auf beide Zeilen verteilen -- auf dem Handy klaffte eine Luecke
     zwischen Vorschau-Streifen und Frage. */
  align-content: start;
  gap: 0;
  padding-bottom: calc(var(--wz-leiste) + 24px);
}

.wz-vorschau {
  position: sticky; top: calc(var(--wz-kopf) + 13px);
  align-self: start;
  height: calc(100dvh - var(--wz-kopf) - 13px - var(--wz-leiste));
  display: flex; flex-direction: column;
  padding: clamp(20px, 3vw, 40px);
  border-right: 1px solid var(--wz-haar);
}
.wz-vorschau-bild {
  position: relative; flex: 1 1 auto; min-height: 0;
  animation: wz-atmen 6s ease-in-out infinite;
}
.wz-vorschau-bild img { transition: opacity 320ms ease; }
.wz-vorschau-text { padding-top: 16px; }
.wz-wahl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wz-wahl li {
  font-size: 0.85rem; font-weight: 500; color: var(--wz-tinte);
  padding: 6px 12px; border-radius: 999px;
  background: var(--wz-grund-2);
  animation: wz-auf 360ms var(--wz-ease) both;
}
.wz-wahl-leer { margin: 0; font-size: 0.9rem; color: var(--wz-tinte-3); }

.wz-schritt {
  padding: clamp(24px, 4vw, 56px) clamp(20px, 4vw, 64px) 40px;
  max-width: 820px;
  animation: wz-ein 420ms var(--wz-ease) both;
}
.wz-frage {
  font-family: var(--f-display, Georgia, serif); font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.05; letter-spacing: -0.02em;
  margin: 0 0 8px; color: var(--wz-tinte);
}
.wz-unter { margin: 0 0 28px; font-size: 1.02rem; color: var(--wz-tinte-2); }

/* --- Fehler -------------------------------------------------------------- */
.wz-fehler {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 14px 16px; border-radius: 12px;
  background: var(--wz-grund-2); border: 1px solid var(--wz-haar-2);
  font-size: 0.92rem; color: var(--wz-tinte);
}
.wz-fehler button {
  margin-left: auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--wz-tinte);
  background: transparent; cursor: pointer; font-size: 0.88rem; font-weight: 500;
}

/* --- 1 Shirts ------------------------------------------------------------ */
.wz-shirts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wz-shirt {
  position: relative; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 0;
  padding: 0; border-radius: 16px; overflow: hidden;
  background: var(--wz-grund); border: 1px solid var(--wz-haar-2);
  transition: border-color 160ms ease, box-shadow 220ms var(--wz-ease);
}
.wz-shirt:hover { border-color: var(--wz-tinte); }
.wz-shirt:focus-visible { outline: 2px solid var(--wz-akzent-text); outline-offset: 3px; }
.wz-shirt.ist-gewaehlt { border-color: var(--wz-tinte); box-shadow: inset 0 0 0 1px var(--wz-tinte); }
.wz-shirt-bild { position: relative; aspect-ratio: 4 / 4.2; background: var(--wz-grund-2); }
.wz-shirt-bild img { padding: 8%; }
.wz-shirt-text { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.wz-shirt-name { font-family: var(--f-display, Georgia, serif); font-size: 1.35rem; line-height: 1.1; }
.wz-shirt-preis { font-size: 0.95rem; font-weight: 500; }
.wz-shirt-fakten { font-size: 0.82rem; color: var(--wz-tinte-3); line-height: 1.4; }
.wz-shirt-haken {
  position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--wz-tinte); color: var(--wz-grund); display: grid; place-items: center;
  opacity: 0; scale: 0.6; transition: opacity 160ms ease, scale 260ms var(--wz-ease);
}
.wz-shirt.ist-gewaehlt .wz-shirt-haken { opacity: 1; scale: 1; }

/* --- 2 Idee -------------------------------------------------------------- */
.wz-feld { display: block; position: relative; }
.wz-feld textarea {
  width: 100%; resize: none; font: inherit; color: var(--wz-tinte);
  font-size: 1.15rem; line-height: 1.5;
  padding: 18px 20px 30px; border-radius: 14px;
  background: var(--wz-grund); border: 1px solid var(--wz-haar-2);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.wz-feld textarea::placeholder { color: var(--wz-tinte-3); }
.wz-feld textarea:focus { outline: 0; border-color: var(--wz-akzent); box-shadow: 0 0 0 3px var(--wz-akzent-hell); }
.wz-feld-zaehler { position: absolute; right: 14px; bottom: 10px; font-size: 0.72rem; color: var(--wz-tinte-3); }
.wz-beispiele { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }

.wz-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  background: var(--wz-grund); border: 1px solid var(--wz-haar-2);
  font-size: 0.9rem; font-weight: 500; line-height: 1;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
.wz-chip img { width: 22px; height: 22px; border-radius: 4px; }
.wz-chip:hover { border-color: var(--wz-tinte); }
.wz-chip:focus-visible { outline: 2px solid var(--wz-akzent-text); outline-offset: 2px; }
.wz-chip.ist-gewaehlt { background: var(--wz-tinte); color: var(--wz-grund); border-color: var(--wz-tinte); }
.wz-chip.ist-gewaehlt img { filter: invert(1) brightness(1.4); }
.wz-chip:disabled { opacity: 0.45; cursor: default; }
.wz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-chip--zeichen svg { width: 20px; height: 20px; }

.wz-oder {
  display: flex; align-items: center; gap: 14px; margin: 28px 0 18px;
  color: var(--wz-tinte-3); font-size: 0.82rem;
}
.wz-oder::before, .wz-oder::after { content: ""; flex: 1; height: 1px; background: var(--wz-haar); }

.wz-welten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wz-welt {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left;
  border-radius: 12px; cursor: pointer;
  background: var(--wz-grund); border: 1px solid var(--wz-haar-2);
  transition: border-color 140ms ease, background-color 140ms ease;
}
.wz-welt:hover { border-color: var(--wz-tinte); }
.wz-welt:focus-visible { outline: 2px solid var(--wz-akzent-text); outline-offset: 2px; }
.wz-welt.ist-gewaehlt { border-color: var(--wz-tinte); background: var(--wz-grund-2); box-shadow: inset 0 0 0 1px var(--wz-tinte); }
.wz-welt-bild { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--wz-grund-2); }
.wz-welt-bild img { width: 100%; height: 100%; object-fit: cover; }
.wz-welt-name { font-size: 0.92rem; font-weight: 500; line-height: 1.2; }

.wz-block { margin-top: 26px; }
.wz-auf { animation: wz-auf 380ms var(--wz-ease) both; }
.wz-block-titel { display: block; margin: 0 0 10px; font-size: 0.92rem; font-weight: 500; }
.wz-block-titel span { font-weight: 400; color: var(--wz-tinte-3); margin-left: 6px; }
.wz-laden { margin: 4px 0 0; font-size: 0.9rem; color: var(--wz-tinte-3); }

.wz-motive { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.wz-motiv {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 10px;
  border-radius: 12px; cursor: pointer; text-align: center;
  background: var(--wz-grund); border: 1px solid var(--wz-haar-2);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.wz-motiv:hover { border-color: var(--wz-tinte); }
.wz-motiv:focus-visible { outline: 2px solid var(--wz-akzent-text); outline-offset: 2px; }
.wz-motiv.ist-gewaehlt { border-color: var(--wz-tinte); box-shadow: inset 0 0 0 1px var(--wz-tinte); }
.wz-motiv-bild { aspect-ratio: 1; border-radius: 8px; background: var(--wz-grund-2); overflow: hidden; display: grid; place-items: center; }
.wz-motiv-bild img { width: 100%; height: 100%; object-fit: contain; }
.wz-motiv-name { font-size: 0.82rem; font-weight: 500; line-height: 1.2; }
.wz-motiv-haken, .wz-stil-haken {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--wz-tinte); color: var(--wz-grund); display: grid; place-items: center;
  opacity: 0; scale: 0.6; transition: opacity 160ms ease, scale 260ms var(--wz-ease);
}
.wz-motiv.ist-gewaehlt .wz-motiv-haken, .wz-stil.ist-gewaehlt .wz-stil-haken { opacity: 1; scale: 1; }

/* --- 3 Stil -------------------------------------------------------------- */
/* 05.09.2026 (Owner: "allein wie gross diese Bilder sind fuer Style ... sehen fast
   gleich aus, billig, unerklaerlich"): aus riesigen gleichen Quadraten werden
   kompakte Zeilen -- kleine Vorschau, Name, eine Zeile Beschreibung. */
.wz-stile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wz-stil {
  position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 8px 12px 8px 8px; text-align: left;
  border-radius: 12px; cursor: pointer; overflow: hidden;
  background: var(--wz-grund); border: 1px solid var(--wz-haar-2);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.wz-stil:hover { border-color: var(--wz-tinte); }
.wz-stil:focus-visible { outline: 2px solid var(--wz-akzent-text); outline-offset: 2px; }
.wz-stil.ist-gewaehlt { border-color: var(--wz-tinte); box-shadow: inset 0 0 0 1px var(--wz-tinte); }
.wz-stil-bild { position: relative; width: 54px; height: 54px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--wz-grund-2); display: grid; place-items: center; }
.wz-stil-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wz-stil-name { font-size: 0.92rem; font-weight: 600; line-height: 1.15; }
.wz-stil-beschr { font-size: 0.76rem; color: var(--wz-tinte-3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-stil--mehr { justify-content: start; }
.wz-mehr { font-family: var(--f-display, Georgia, serif); font-size: 1.3rem; color: var(--wz-tinte-2); }
.wz-eingabe {
  width: 100%; font: inherit; font-size: 1rem; padding: 12px 14px; border-radius: 12px;
  background: var(--wz-grund); border: 1px solid var(--wz-haar-2); color: var(--wz-tinte);
}
.wz-eingabe:focus { outline: 0; border-color: var(--wz-akzent); box-shadow: 0 0 0 3px var(--wz-akzent-hell); }

/* --- Klebende Leiste ----------------------------------------------------- */
.wz-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  min-height: var(--wz-leiste);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px clamp(16px, 3vw, 40px) calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in oklch, var(--wz-grund) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--wz-haar);
}
.wz-leiste-text { min-width: 0; font-size: 0.88rem; color: var(--wz-tinte-2); }
.wz-leiste-hinweis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-versprechen { display: inline-flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.wz-versprechen > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.wz-versprechen svg { color: var(--wz-akzent-text); }
.wz-haupt {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--wz-tinte); color: var(--wz-grund); font-size: 1rem; font-weight: 500;
  transition: background-color 140ms ease, opacity 140ms ease;
}
.wz-haupt:hover:not(:disabled) { background: var(--wz-akzent-text); }
.wz-haupt:disabled { opacity: 0.35; cursor: default; }
.wz-haupt:focus-visible { outline: 2px solid var(--wz-akzent-text); outline-offset: 3px; }
.wz-kreisel { width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in oklch, var(--wz-grund) 40%, transparent); border-top-color: var(--wz-grund); animation: wz-drehen 800ms linear infinite; }

/* --- Bot-Schutz-Dialog --------------------------------------------------- */
.wz-modal-grund { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: color-mix(in oklch, var(--wz-tinte) 40%, transparent); }
.wz-modal { width: min(420px, 100%); background: var(--wz-grund); border-radius: 16px; padding: 24px; border: 1px solid var(--wz-haar-2); }
.wz-modal-eyebrow { margin: 0 0 6px; font-size: 0.8rem; color: var(--wz-tinte-3); }
.wz-modal-titel { margin: 0 0 8px; font-family: var(--f-display, Georgia, serif); font-weight: 400; font-size: 1.5rem; }
.wz-modal-text { margin: 0 0 16px; font-size: 0.92rem; color: var(--wz-tinte-2); }
.wz-modal-slot { min-height: 70px; display: grid; place-items: center; }
.wz-modal-laden { margin: 0; font-size: 0.85rem; color: var(--wz-tinte-3); }
.wz-modal-abbruch { margin-top: 14px; width: 100%; padding: 10px; border-radius: 999px; border: 1px solid var(--wz-haar-2); background: transparent; cursor: pointer; font-size: 0.9rem; }

/* --- Bewegung ------------------------------------------------------------ */
@keyframes wz-ein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wz-auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wz-atmen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes wz-drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .wz-schritt, .wz-auf, .wz-wahl li, .wz-vorschau-bild { animation: none !important; }
  .wz-fortschritt > span::after { transition: none; }
}

/* --- Handy und Tablet ---------------------------------------------------- */
@media (max-width: 900px) {
  .wz { --wz-leiste: 74px; }
  .wz-rumpf { grid-template-columns: 1fr; }
  .wz-vorschau {
    position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--wz-haar);
    flex-direction: row; align-items: center; gap: 14px; padding: 12px clamp(16px, 4vw, 24px);
  }
  .wz-vorschau-bild { flex: 0 0 auto; width: 92px; height: 92px; animation: none; }
  .wz-vorschau-text { padding: 0; min-width: 0; }
  .wz-wahl li { font-size: 0.78rem; padding: 4px 9px; }
  .wz-schritt { padding: 22px clamp(16px, 4vw, 24px) 30px; }
  .wz-frage { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.2rem); }
  .wz-unter { margin-bottom: 20px; font-size: 0.95rem; }
  .wz-shirts { gap: 10px; }
  .wz-shirt-bild { aspect-ratio: 1; }
  .wz-shirt-name { font-size: 1.1rem; }
  .wz-shirt-fakten { font-size: 0.72rem; }
  .wz-shirt-text { padding: 10px 12px 12px; }
  .wz-welten { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .wz-welt { padding: 8px 10px; gap: 10px; }
  .wz-welt-bild { width: 40px; height: 40px; }
  .wz-welt-name { font-size: 0.86rem; }
  .wz-motive { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .wz-stile { grid-template-columns: 1fr; gap: 8px; }
  .wz-leiste { gap: 10px; }
  .wz-leiste-text { font-size: 0.8rem; }
  .wz-versprechen { gap: 4px 10px; }
  .wz-versprechen svg { width: 13px; height: 13px; }
  .wz-haupt { min-height: 48px; padding: 0 18px; font-size: 0.95rem; }
}

/* =========================================================================
   STARTSEITE, neue Bloecke (02.09.2026) -- Praefix st-
   =========================================================================
   Dieselbe Sprache wie der Wizard (wz-): warmes Weiss, Haarlinien, Radius 16,
   echte Fotos statt Zeichnungen, nichts ueberlappt.
   ========================================================================= */

.st-welten, .st-ablauf { list-style: none; margin: 0; padding: 0; }

/* --- Themenwelten: sechs echte Designs ----------------------------------- */
.st-welten { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.st-welt {
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit;
  border-radius: 16px; overflow: hidden;
  background: oklch(0.985 0.006 85); border: 1px solid color-mix(in oklch, oklch(0.215 0.012 62) 16%, transparent);
  transition: border-color 160ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.st-welt:hover { border-color: oklch(0.215 0.012 62); transform: translateY(-3px); box-shadow: 0 24px 40px -28px color-mix(in oklch, oklch(0.215 0.012 62) 45%, transparent); }
.st-welt:focus-visible { outline: 2px solid var(--accent-text, #2F6B4E); outline-offset: 3px; }
.st-welt-bild { position: relative; aspect-ratio: 4 / 4.4; background: oklch(0.968 0.008 85); }
.st-welt-bild img { padding: 7%; transition: opacity 360ms ease; }
.st-welt-bild img.ist-zweit { opacity: 0; }
.st-welt:hover .st-welt-bild img.ist-zweit { opacity: 1; }
.st-welt-text { display: flex; flex-direction: column; gap: 2px; padding: 0 14px 14px; }
.st-welt-name { font-size: 0.95rem; font-weight: 500; line-height: 1.25; }
.st-welt-zahl { font-size: 0.78rem; color: oklch(0.58 0.01 72); }

/* Unter den Welten: der andere Weg, ohne gestrichelten Kasten */
.st-oder {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid color-mix(in oklch, oklch(0.215 0.012 62) 10%, transparent);
}
.st-oder p { margin: 0; font-size: 1.05rem; color: oklch(0.42 0.011 66); max-width: 60ch; }
.st-oder p strong { font-weight: 500; color: oklch(0.215 0.012 62); }

/* --- In 3 Schritten: drei gleiche Blaetter ------------------------------- */
.st-ablauf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.st-schritt { min-width: 0; }
.st-blatt {
  position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden;
  background: oklch(0.968 0.008 85); border: 1px solid color-mix(in oklch, oklch(0.215 0.012 62) 10%, transparent);
  display: flex; align-items: center; justify-content: center; gap: 4%; padding: 6%;
}
.st-blatt-shirt { position: relative; flex: 1 1 0; height: 100%; }
.st-blatt-entwurf { position: relative; flex: 1 1 0; height: 78%; }
.st-blatt--feld { flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; padding: 9%; }
.st-feld {
  position: relative; display: block; padding: 16px 18px 26px; border-radius: 12px;
  background: oklch(0.985 0.006 85); border: 1px solid #4E9F78; box-shadow: 0 0 0 3px color-mix(in oklch, #4E9F78 12%, oklch(0.985 0.006 85));
  font-size: clamp(0.95rem, 0.6rem + 0.9vw, 1.15rem); line-height: 1.45; color: oklch(0.215 0.012 62);
}
.st-feld-cursor { display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: oklch(0.215 0.012 62); animation: st-blink 1.1s steps(2, start) infinite; }
.st-feld-zaehler { position: absolute; right: 12px; bottom: 8px; font-size: 0.68rem; color: oklch(0.58 0.01 72); }
.st-feld-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.st-feld-chip {
  font-size: 0.8rem; font-weight: 500; padding: 7px 12px; border-radius: 999px;
  background: oklch(0.985 0.006 85); border: 1px solid color-mix(in oklch, oklch(0.215 0.012 62) 18%, transparent);
}
.st-schritt-titel { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 6px; font-size: 1.1rem; font-weight: 500; }
.st-schritt-nr { font-family: var(--f-display, Georgia, serif); font-size: 1.5rem; line-height: 1; color: var(--accent-text, #2F6B4E); }
.st-schritt-text { margin: 0; font-size: 0.95rem; line-height: 1.5; color: oklch(0.42 0.011 66); }
@keyframes st-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .st-feld-cursor { animation: none; } .st-welt, .st-welt-bild img { transition: none; } }

@media (max-width: 1100px) {
  .st-welten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .st-welten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .st-welt-text { padding: 0 12px 12px; }
  .st-welt-name { font-size: 0.88rem; }
  .st-ablauf { grid-template-columns: 1fr; gap: 26px; }
  .st-blatt { aspect-ratio: 5 / 3; }
  .st-oder { flex-direction: column; align-items: flex-start; }
}

/* Tippziele auf dem Handy (Audit Lauf 7, weich): Vorn/Hinten-Schalter, Marke im Kopf,
   Cookie-Schliessen -- mindestens 36 px hoch, ohne das Bild zu aendern. */
@media (max-width: 700px) {
  .v2-root .bks-ed-seite { min-height: 36px; }
  .v2-root .brand { min-height: 36px; display: inline-flex; align-items: center; }
  .cookie-consent-close { width: 36px !important; height: 36px !important; }
}

/* Zahlenstreifen: eine Zahl ist EINE Zeile ("29,99 €", "2–4 min"); bei 1440 brach das
   Einheitenzeichen um. Etwas kleiner, damit vier Zellen nebeneinander Platz haben. */
.v2-root .strip .num { white-space: nowrap; font-size: clamp(36px, 4.2vw, 64px) !important; }

/* =========================================================================
   GALERIE-FILTER als Chips (03.09.2026) -- Praefix ga-
   ========================================================================= */
.ga-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.ga-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 0 14px; border-radius: 999px; cursor: pointer;
  background: oklch(0.985 0.006 85); border: 1px solid color-mix(in oklch, oklch(0.215 0.012 62) 20%, transparent);
  color: oklch(0.215 0.012 62); font: 500 0.92rem/1 var(--f-body, system-ui, sans-serif);
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
.ga-chip:hover { border-color: oklch(0.215 0.012 62); }
.ga-chip:focus-visible { outline: 2px solid var(--accent-text, #2F6B4E); outline-offset: 2px; }
.ga-chip.ist-gewaehlt { background: oklch(0.215 0.012 62); color: oklch(0.985 0.006 85); border-color: oklch(0.215 0.012 62); }
.ga-chip:disabled { opacity: 0.4; cursor: default; }
.ga-chip-zahl { font-size: 0.78rem; font-weight: 400; opacity: 0.7; }
@media (max-width: 700px) { .ga-filter { gap: 6px; margin-bottom: 18px; } .ga-chip { min-height: 36px; padding: 0 12px; font-size: 0.86rem; } }

/* =========================================================================
   FORTSCHRITT als feine Linie (Warenkorb, Kasse) -- Praefix fs-
   ========================================================================= */
.fs { margin: 0 0 22px; }
.fs-linien { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.fs-strich {
  display: block; height: 3px; border-radius: 3px; border: 0; padding: 0; cursor: default;
  background: color-mix(in oklch, oklch(0.215 0.012 62) 10%, transparent);
  position: relative; overflow: hidden;
}
.fs-strich::after { content: ""; position: absolute; inset: 0; background: oklch(0.215 0.012 62); transform: scaleX(0); transform-origin: left; transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1); }
.fs-strich.ist-erledigt::after { transform: scaleX(1); }
.fs-strich.ist-aktiv::after { transform: scaleX(0.35); background: #4E9F78; }
button.fs-strich { cursor: pointer; }
button.fs-strich:focus-visible { outline: 2px solid var(--accent-text, #2F6B4E); outline-offset: 3px; }
.fs-text { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; font-size: 0.88rem; color: oklch(0.42 0.011 66); }
.fs-zahl { font-weight: 500; color: oklch(0.215 0.012 62); }
.fs-titel::before { content: "·"; margin-right: 10px; color: oklch(0.58 0.01 72); }
.fs-vorher { color: oklch(0.58 0.01 72); }
@media (max-width: 700px) { .fs-vorher { display: none; } .fs-text { font-size: 0.82rem; } }

/* Warenkorb/Kasse: die Wahl in Worten statt Miniatur-Zeichnung */
.bk-cart-flaechen, .bk-kasse-flaechen { font-size: 0.85rem; color: oklch(0.42 0.011 66); white-space: nowrap; }
.bk-cart-anzahl { margin: 8px 0 0; font-size: 1rem; color: oklch(0.42 0.011 66); }

/* Handy-Menue: der Hauptknopf ist ein <a> im .topbar .nav-right -- die Nav-Farbregel (!important)
   machte seine Schrift tintenfarben auf tintenfarbenem Grund (Inhaber 03.09.: "schwarze Schrift
   auf schwarzem Button"). */
.v2-root .topbar .nav-right .mobile-menu-drawer a.bk-knopf--haupt,
.v2-root .topbar .nav-right .mobile-menu-drawer a.bk-knopf--haupt * { color: oklch(0.985 0.006 85) !important; }

/* Schlussblock (dunkel): Ueberschrift und Kursivteil muessen hell sein -- die Seitenregel
   fuer h2 (Tinte, !important) machte den Titel auf Tinte unsichtbar. */
.v2-root .footer-cta h2, .v2-root .footer-cta h2 * { color: oklch(0.985 0.006 85) !important; }
.v2-root .footer-cta h2 .ital { color: #4E9F78 !important; }

/* Handy-Menue: die Untertitel waren Versalien mit Sperrsatz ("ALLE GENERIERTEN UNIKATE") -- eine
   andere Sprache als der Rest der Seite. */
.v2-root .mobile-menu-drawer .mmd-nav-hint { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.82rem !important; }

/* =========================================================================
   WIZARD: leeres Shirt, Druckflaeche, Mal-Animation (03.09.2026)
   ========================================================================= */
.wz-vorschau-bild { display: grid; place-items: center; }
.wz-rahmen {
  position: relative; display: block; height: 100%; max-width: 100%;
  aspect-ratio: 1245 / 1400; /* Mass der leeren Shirt-Fotos, damit die Druckflaeche sitzt */
}
/* Karten: das Bild bekommt sein Polster ueber den Rahmen, nicht ueber das img -- sonst
   ist die Silhouetten-Maske groesser als das Shirt. */
.wz-shirt-bild .wz-rahmen { height: 86%; margin: 7% auto 0; }
.wz-shirt-bild .wz-rahmen img { padding: 0; }
/* Stilprobe auf dem Brustfeld: weich auslaufend statt als hartes Quadrat mit eigenem Grund */
.wz-rahmen--motiv .wz-probe img {
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 46%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 46%, transparent 70%);
}
/* Druckflaeche (aussen): Motiv-Shirt = Brustfeld, Rundum = die Shirt-Silhouette als Maske */
.wz-druck, .wz-probe { position: absolute; pointer-events: none; overflow: hidden; }
.wz-rahmen--motiv .wz-druck, .wz-rahmen--motiv .wz-probe { left: 25%; top: 19%; width: 50%; height: 44%; border-radius: 3% / 2%; }
.wz-rahmen--rundum .wz-druck, .wz-rahmen--rundum .wz-probe {
  inset: 0;
  -webkit-mask: url('/v2/assets/shirts/leer-rundum.webp') center / contain no-repeat;
  mask: url('/v2/assets/shirts/leer-rundum.webp') center / contain no-repeat;
}
/* Wischer (innen): malt von links nach rechts */
.wz-wisch {
  position: absolute; inset: 0; display: block;
  -webkit-mask-image: linear-gradient(105deg, #000 0 42%, transparent 58%); mask-image: linear-gradient(105deg, #000 0 42%, transparent 58%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-position: 0 0; mask-position: 0 0;
}
/* Druckbereich erklaert (05.09.2026): kein gruener Vollwischer mehr. Motiv = ein
   umrandetes Brustfeld, Rundum = ein feines Muster ueber die ganze Flaeche;
   beides mit Label, beides zeichnet sich einmal dezent ein. */
.wz-druck-flaeche, .wz-druck-kante, .wz-druck-label { position: absolute; }
.wz-druck-flaeche { inset: 0; opacity: 0; }
.wz-rahmen--motiv .wz-druck-flaeche { background: color-mix(in oklch, var(--wz-akzent, #4E9F78) 16%, transparent); }
.wz-rahmen--rundum .wz-druck-flaeche { background: repeating-linear-gradient(48deg, color-mix(in oklch, var(--wz-akzent, #4E9F78) 24%, transparent) 0 6px, transparent 6px 15px); }
.wz-druck-kante { inset: 0; border: 1.5px dashed color-mix(in oklch, var(--wz-akzent, #4E9F78) 85%, transparent); border-radius: inherit; opacity: 0; }
.wz-rahmen--rundum .wz-druck-kante { display: none; }
.wz-druck-label {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in oklch, var(--wz-grund, #fff) 90%, transparent);
  border: 1px solid color-mix(in oklch, var(--wz-akzent, #4E9F78) 55%, transparent);
  font-family: var(--f-mono, ui-monospace, monospace); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--wz-akzent-text, #1F3A2E); opacity: 0;
}
.wz-druck.ist-gemalt .wz-druck-flaeche { animation: wz-einblenden .8s ease .12s both; }
.wz-druck.ist-gemalt .wz-druck-kante { animation: wz-einblenden .7s ease both; }
.wz-druck.ist-gemalt .wz-druck-label { animation: wz-einblenden .6s ease .32s both; }
@keyframes wz-einblenden { from { opacity: 0; } to { opacity: 1; } }
.wz-probe .wz-wisch { animation: wz-malen 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
.wz-probe img { mix-blend-mode: multiply; }
.wz-rahmen--rundum .wz-probe img { opacity: 0.92; }
@keyframes wz-malen {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .wz-druck.ist-gemalt .wz-wisch, .wz-probe .wz-wisch { animation: none; } .wz-druck.ist-gemalt .wz-druck-flaeche, .wz-druck.ist-gemalt .wz-druck-kante, .wz-druck.ist-gemalt .wz-druck-label { animation: none; opacity: 1; } }

/* Schlussblock: der Knopf war zur Textzeile geworden -- als heller Pillenknopf auf Tinte */
.v2-root .footer-cta .btn, .v2-root .footer-cta .bk-knopf {
  display: inline-flex !important; align-items: center; gap: 10px;
  background: oklch(0.985 0.006 85) !important; color: #131511 !important;
  border-radius: 999px !important; padding: 16px 28px !important; min-height: 52px;
  font-size: 1rem !important; font-weight: 500 !important; text-decoration: none !important;
}
.v2-root .footer-cta .btn *, .v2-root .footer-cta .bk-knopf * { color: #131511 !important; }
.v2-root .footer-cta .btn:hover, .v2-root .footer-cta .bk-knopf:hover { background: #4E9F78 !important; color: oklch(0.985 0.006 85) !important; }
.v2-root .footer-cta .btn:hover *, .v2-root .footer-cta .bk-knopf:hover * { color: oklch(0.985 0.006 85) !important; }

/* Fuss: Sprache (05.09.2026, Owner: "hingeklatscht"). Eigene Zeile ueber dem
   Copyright, links das Wort, rechts zwei ruhige Woerter; das aktive steht
   hell, das andere gedaempft mit Unterstrich. Kein Pillenrahmen. */
.v2-root footer .footer-sprache { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0 16px; margin-top: 0; border-top: 0; border-bottom: 1px solid color-mix(in oklch, oklch(0.985 0.006 85) 14%, transparent); font-family: var(--f-body); font-size: 13px; color: var(--paper-3); }
.v2-root footer .footer-sprache-liste { display: inline-flex; align-items: center; gap: 18px; }
.v2-root footer .footer-sprache-liste strong { font-weight: 500; color: oklch(0.985 0.006 85); }
.v2-root footer .footer-sprache-liste a { color: var(--paper-3); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in oklch, var(--paper-3) 55%, transparent); padding: 10px 0; margin: -10px 0; }
.v2-root footer .footer-sprache-liste a:hover { color: oklch(0.985 0.006 85); }
/* 05.09.2026 (Task 143): Sprache links, Waehrung rechts -- je ein Paar aus Wort und Liste. */
.v2-root footer .footer-sprache-paar { display: inline-flex; align-items: center; gap: 16px; }
.v2-root footer .footer-sprache-liste .footer-sprache-knopf { background: none; border: 0; font: inherit; cursor: pointer; color: var(--paper-3); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in oklch, var(--paper-3) 55%, transparent); padding: 10px 0; margin: -10px 0; }
.v2-root footer .footer-sprache-liste .footer-sprache-knopf:hover { color: oklch(0.985 0.006 85); }
/* Hinweis unter der Summe, wenn nicht in Euro angezeigt wird: was wirklich abgebucht wird. */
.v2-root .bk-cart-waehrung-hinweis, .v2-root .v2k-summary-hinweis { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.v2-root footer .footer-bottom { padding-top: 14px; }
.v2-root footer .footer-bottom .sprachwahl { display: none !important; }

/* =========================================================================
   Startseite auf dem Handy (05.09.2026, Owner: drei Screenshots, "unordentlich,
   nicht modern, Versandliste als Erstes, drei bewegte Karten nur Abstand").
   ========================================================================= */
.hero-reel { display: none; }
@media (max-width: 680px) {
  /* Preis, dann zwei Knoepfe in voller Breite, gleich hoch. */
  .bks-hero-handlung { gap: 10px !important; margin-top: 18px !important; }
  .bks-hero-handlung .bk-preis { flex: 1 1 100%; }
  .bks-hero-handlung .bk-knopf { flex: 1 1 100%; justify-content: center; min-height: 52px; }
  /* Galeriekarten zu zweit nebeneinander: die kleine Druckflaechen-Zeichnung
     neben dem Preis kostet 28 px, die dem Namen fehlen ("Dac..."). Sie faellt
     hier weg, der Preisstein rueckt an den Rand, der Name bekommt den Rest. */
  .v2-root .design-card-v2 .bk-dc-flaeche { display: none !important; }
  /* Der Fuss hat schon 10 px Rand; die 12 px der Info-Zeile obendrauf kosteten dem Namen 24 px.
     (.v2-root davor, sonst gewinnt die allgemeine Regel mit drei Klassen.) */
  .v2-root .design-card-v2 .dc-info { gap: 8px !important; padding-left: 0 !important; padding-right: 0 !important; }
  .v2-root .design-card-v2 .dc-footer { padding: 8px 10px 9px !important; }
  .v2-root .design-card-v2 .dc-name { font-size: 13.5px !important; }
  .v2-root .design-card-v2 .bk-dc-preis .bk-preis--klein .bk-preis-betrag { font-size: 13px !important; }
  .v2-root .design-card-v2 .bk-dc-preis .bk-preis--klein { font-size: 13px !important; }
  /* Vier Fakten als ruhige Reihe: Zeichen oben, kurzer Text darunter. */
  .bks-hero-fakten { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 20px !important; padding-top: 16px; border-top: 1px solid color-mix(in oklch, var(--at-ink, #141311) 12%, transparent); }
  .bks-hero-fakten li { flex-direction: column; align-items: center; text-align: center; gap: 6px; font-size: 11px !important; line-height: 1.25; }
  .bks-hero-fakten .bk-fakten-zeichen svg { width: 20px; height: 20px; }
  /* Die 3D-Buehne bleibt dem Desktop, hier laeuft die Rolle. Die Rasterspalte
     darf nicht mit dem Inhalt der Rolle wachsen (1fr = minmax(auto, 1fr)),
     sonst wird die ganze Hero-Spalte so breit wie alle Karten nebeneinander. */
  .hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .hero-text, .hero-reel { min-width: 0; max-width: 100%; }
  .hs3d { display: none !important; }
  .hero-reel { display: block; margin: 6px calc(-1 * var(--edge)) 0; max-width: calc(100% + 2 * var(--edge)); }
  .hero-reel-rail { position: relative; display: flex; gap: 12px; overflow-x: auto; min-width: 0; scroll-snap-type: x mandatory; padding: 6px var(--edge) 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hero-reel-rail::-webkit-scrollbar { display: none; }
  .hero-reel-karte { flex: 0 0 76%; scroll-snap-align: center; display: block; text-decoration: none; color: inherit; background: var(--at-paper-warm, #F6F1E4); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in oklch, var(--at-ink, #141311) 10%, transparent), 0 20px 36px -24px color-mix(in oklch, var(--at-ink, #141311) 45%, transparent); }
  .hero-reel-bild { position: relative; display: block; aspect-ratio: 1 / 1.06; }
  .hero-reel-bild img { padding: 5% !important; }
  .hero-reel-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 14px 12px; border-top: 1px solid color-mix(in oklch, var(--at-ink, #141311) 10%, transparent); }
  .hero-reel-name { font-family: var(--f-display); font-size: 16px; color: var(--at-ink, #141311); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .hero-reel-preis { font-family: var(--f-display); font-size: 16px; color: var(--at-ink, #141311); flex: 0 0 auto; }
  .hero-reel-punkte { display: flex; justify-content: center; gap: 8px; margin-top: 8px; padding: 0 var(--edge); }
  .hero-reel-punkte button { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; position: relative; cursor: pointer; }
  .hero-reel-punkte button::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 3px; background: color-mix(in oklch, var(--at-ink, #141311) 25%, transparent); transition: width .3s, background .3s; }
  .hero-reel-punkte button.ist-aktiv::before { width: 18px; background: var(--at-ink, #141311); }
}