/* Layout: eine ruhige Spalte. Oben das Studio als Bühne, darunter Anwendungen, Fragen, Fuss. Warenkorb als Seitenleiste. */
@font-face {
  font-family: "Cherry Bomb One";
  font-weight: 400;
  font-display: block;
  src: url("fonts/cherry-bomb-one.woff2") format("woff2");
}
/* Selbst gehostet (OFL-Lizenz), damit keine Daten an Google gehen */
@font-face {
  font-family: "Figtree";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/figtree-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-weight: 500;
  font-display: swap;
  src: url("fonts/figtree-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-weight: 600;
  font-display: swap;
  src: url("fonts/figtree-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 500;
  font-display: swap;
  src: url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 700;
  font-display: swap;
  src: url("fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2");
}
:root {
  --bg: #fbfafa;
  --surface: #ffffff;
  --fg: #1c191a;
  --muted: #736b6d;
  --line: #ebe6e7;
  --accent: #d6406a;
  --accent-ink: #ffffff;
  --soft: #f4eff0;
  --studio-bg: #f0ebeb;
  --studio-line: #e6e0e0;
  --band: #f4f0ef;
  --hover: #e9e3e3;
  --hover-line: #dbd3d3;
  --error: #b3261e;
  --font-letter: "Cherry Bomb One", "Arial Rounded MT Bold", sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  --radius: 14px;
  --maxw: 1080px;
  color-scheme: only light; /* nur helles Design, auch wenn das Gerät dunkel eingestellt ist */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* Falle für Spam-Bots */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.container { max-width: var(--maxw); margin: 0 auto; padding-inline: 20px; }
.eyebrow { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.005em; text-wrap: balance; }
h1 { font-size: clamp(38px, 6vw, 62px); line-height: 1.02; }
h2 { font-size: clamp(30px, 4.2vw, 42px); line-height: 1.08; }
h3 { font-size: 22px; line-height: 1.15; }

p { margin: 0; }
.muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Kopfzeile */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-bottom-color: var(--line); }
.top .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.logo { font-family: var(--font-letter); font-size: 28px; line-height: 1; text-decoration: none; color: var(--fg); letter-spacing: .01em; }
.logo svg { display: block; height: 26px; width: auto; }
@media (max-width: 640px) { .logo svg { height: 20px; } }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { text-decoration: none; font-size: 15px; color: var(--muted); }
.nav a:hover { color: var(--fg); }
@media (max-width: 640px) { .nav a { display: none; } }
.cart-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: 15px; font-weight: 500; }
.cart-btn:hover { background: var(--hover); border-color: var(--hover-line); }
.cart-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--fg); color: var(--bg); font-size: 12px; font-weight: 600; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.cart-count[data-n="0"] { background: var(--soft); color: var(--muted); }


/* Studio */
.studio { display: grid; gap: 16px; }
.stage { position: relative; border-radius: 22px; min-height: 280px; padding: 56px 24px 44px; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: background .3s; }
.stage[data-bg="wand"] { background: #f1eeeb; box-shadow: inset 0 0 0 1px #e3ded9; }
.stage[data-bg="holz"] { background: repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 2px, transparent 2px 23px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 61px), linear-gradient(180deg, #d2ab7c, #c49866); }
.stage[data-bg="pastell"] { background: #e5edf0; }
.stage[data-bg="dunkel"] { background: #22252b; }
.word-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; column-gap: calc(var(--sz) * .42); row-gap: calc(var(--sz) * .15); max-width: 100%; }
.word { display: flex; align-items: flex-end; gap: calc(var(--sz) * .03); white-space: nowrap; }
.glyph { display: block; cursor: pointer; border: 0; padding: 0; background: none; position: relative; transition: transform .15s ease; border-radius: 10px; }
.glyph svg { display: block; overflow: visible; }
.glyph:hover { transform: translateY(-3px) rotate(-2deg); }
.glyph.sel { transform: translateY(-6px); }
.glyph.sel::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -14px; height: 6px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 2px #1c191a; }
.empty-hint { color: rgba(0,0,0,.45); font-size: 17px; }
.stage[data-bg="dunkel"] .empty-hint { color: rgba(255,255,255,.55); }
.stage-tools { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; }
.bgbtn { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; padding: 0; }
.bgbtn[aria-pressed="true"] { outline: 2px solid #1c191a; outline-offset: 2px; }
.stage-hint { position: absolute; left: 18px; bottom: 14px; right: 18px; text-align: center; font-size: 13px; color: rgba(0,0,0,.5); }
.stage[data-bg="dunkel"] .stage-hint { color: rgba(255,255,255,.55); }

.controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .controls { grid-template-columns: 1fr; } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 18px; min-width: 0; }
.field { display: grid; gap: 8px; }
.label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
input[type="text"] { font: 600 22px/1.2 var(--font-body); letter-spacing: .05em; text-transform: uppercase; width: 100%; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); color: var(--fg); }
input[type="text"]:focus { outline: none; border-color: var(--accent); }
.warn { font-size: 13px; color: var(--error); min-height: 1.2em; }
.summary { display: grid; gap: 6px; }
.srow { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.srow code { font: 500 13px/1.3 var(--font-body); letter-spacing: .06em; color: var(--muted); overflow-wrap: anywhere; }
.srow .n { font-variant-numeric: tabular-nums; color: var(--muted); }
.dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.buy { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.price-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.price { white-space: nowrap; font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.buy-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; }
.qty button { width: 38px; height: 44px; border: 0; background: none; cursor: pointer; font-size: 18px; border-radius: 999px; }
.qty button:disabled { color: var(--line); cursor: default; }
.qty span { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.btn { transition: background-color .15s, border-color .15s, color .15s; border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 10px 18px; cursor: pointer; font-weight: 600; font-size: 15px; }
.btn:hover { background: var(--hover); border-color: var(--hover-line); }
.btn.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); flex: 1; min-height: 46px; }
.btn.primary:hover { background: var(--hover); border-color: var(--hover-line); color: var(--fg); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.link { border: 0; padding: 4px 0; background: none; font-weight: 500; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.btn.link:hover { color: var(--fg); background: none; }
.added { font-size: 14px; color: var(--muted); min-height: 1.3em; }

.pick-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pick-title { font-size: 17px; font-weight: 600; }
.pick-title b { color: var(--accent); font-family: var(--font-letter); font-weight: 400; font-size: 22px; }
.pick-title.idle { color: var(--muted); font-weight: 500; font-size: 15px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.sw { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: left; font: 500 14px/1.2 var(--font-body); min-width: 0; }
.sw:hover { background: var(--hover); border-color: var(--hover-line); }
.sw[aria-pressed="true"] { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
.sw:disabled { opacity: .8; cursor: default; }
.sw:disabled:hover { background: var(--surface); border-color: var(--line); }
.spool { flex: none; width: 28px; height: 28px; border-radius: 50%; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.spool::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.sw .nm { min-width: 0; overflow-wrap: anywhere; }
.foot-note { font-size: 13px; color: var(--muted); }

/* Abschnitte */
section.block { padding-block: 80px; }
section.block.alt { background: var(--band); }
.block-head { display: grid; gap: 10px; margin-bottom: 32px; max-width: 60ch; }
.studio .block-head { margin-bottom: 8px; }
.studio-card { background: var(--studio-bg); border: 1.5px solid var(--studio-line); border-radius: 28px; padding: 32px; box-shadow: 0 18px 40px -30px rgba(60, 40, 45, .3); }
@media (max-width: 640px) { .studio-card { padding: 18px 14px; border-radius: 22px; margin-inline: -6px; } }
.studio-tag { display: inline-flex; justify-self: start; background: var(--fg); color: var(--bg); padding: 5px 12px; border-radius: 999px; letter-spacing: .08em; }

/* Szenen (Anwendungsbeispiele, gezeichnet oder als Foto) */
.scene { aspect-ratio: 4 / 5; max-width: 100%; border-radius: 16px; display: grid; place-items: center; overflow: hidden; position: relative; text-decoration: none; }
.scene.wide { aspect-ratio: 5 / 4; }
.art { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; column-gap: .3em; }
.art.stack { flex-direction: column; align-items: center; row-gap: 0; }
.mini { display: flex; align-items: flex-end; gap: 1px; }
.mini svg { display: block; overflow: visible; }
.badge { position: absolute; top: 12px; left: 12px; z-index: 3; background: rgba(255,255,255,.9); color: #1c191a; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 5px 10px; border-radius: 999px; }
/* Fotos */
.scene.photo { margin: 0; background: #ece4da; }
.scene.photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* Box */
.s-box { background: #e5edf0; }
.s-box .box { position: absolute; left: 14%; right: 14%; top: 38%; bottom: 18%; background: #fbf8f4; border-radius: 6px; box-shadow: 0 10px 22px rgba(0,0,0,.12), inset 0 0 0 1px #e1d8ce; }
.s-box .lid { position: absolute; left: 11%; right: 11%; top: 32%; height: 13%; background: #f7f2ec; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.08), inset 0 0 0 1px #e1d8ce; z-index: 1; }
.s-box .art { margin-top: -14%; }
/* Kühlschrank */
.s-fridge { background: #dfe3e4; }
.s-fridge .fridge { position: absolute; inset: 8% 16% 0; background: #f7f8f8; border-radius: 14px 14px 0 0; box-shadow: inset 0 0 0 1px #d4d9db; }
.s-fridge .fridge::before { content: ""; position: absolute; left: 0; right: 0; top: 34%; height: 1px; background: #d4d9db; }
.s-fridge .fridge::after { content: ""; position: absolute; left: 10%; top: 40%; width: 6px; height: 22%; border-radius: 3px; background: #c8ced1; }
.s-fridge .art { margin-top: 18%; transform: rotate(-4deg); column-gap: 6px; }
/* Wandbild */
.s-wall { background: linear-gradient(180deg, #efe9e3 0 78%, #e3d8cc 78%); }
.poster { position: relative; z-index: 2; width: 46%; aspect-ratio: 5 / 6; border-radius: 6px; display: grid; place-items: center; box-shadow: 0 14px 26px -10px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.05); transition: background .25s; margin-top: -6%; }
.poster .art.stack { row-gap: 0; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px 6px 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: background-color .15s, border-color .15s; }
.opt:hover { background: var(--hover); border-color: var(--hover-line); }
.opt[aria-checked="true"] { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
.opt .dot { width: 16px; height: 16px; }
.opt.plain { padding-left: 12px; }
.frame-colors { display: grid; gap: 8px; }
.frame-colors .label b { color: var(--fg); font-weight: 600; text-transform: none; letter-spacing: 0; }
.dots { display: flex; flex-wrap: wrap; gap: 6px; }
.cdot { width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.cdot[aria-checked="true"] { outline: 2px solid var(--fg); outline-offset: 2px; }
.frame-prev { position: relative; z-index: 2; width: 52%; }
.frame-prev svg { display: block; width: 100%; height: auto; overflow: visible; }
.product-info .added { min-height: 0; }
.product-info .added:empty { display: none; }
/* Wellenrahmen */
.s-table { background: radial-gradient(ellipse at 50% 60%, #f6f5f3 0 55%, #ebe8e4 100%); }
.waves { position: relative; z-index: 2; width: 88%; }
.waves svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; padding-block: 48px 72px; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: 28px; padding-block: 28px 56px; } }
.hero-copy { display: grid; gap: 18px; align-content: center; }
.hero-copy h1 .line { display: block; white-space: nowrap; }
.hero-copy .lead { font-size: 18px; color: var(--muted); max-width: 46ch; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-cta .btn { text-decoration: none; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding-inline: 22px; }
.hero-facts { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--muted); }
@media (max-width: 640px) { .hero-facts { display: none; } }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero-facts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.hero-visual { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 6 / 5; max-width: 100%; background: #e9dfd4; }
.hv-wall { position: absolute; inset: 0 0 26% 0; display: grid; place-items: center; }
.hv-rail { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; border-top: 12px solid #ead9c1; background: linear-gradient(180deg, #e2cfb4 0 100%) bottom / 100% 12px no-repeat, linear-gradient(180deg, #d9cbbd, #cdbfb1); display: flex; justify-content: space-around; padding-inline: 5%; }
.hv-rail span { width: 10px; background: #ead9c1; }

/* Produkte */
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.products.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 900px) { .products, .products.two { grid-template-columns: 1fr; max-width: 520px; } }
.product { display: grid; gap: 14px; align-content: start; }
.product-info { display: grid; gap: 14px; }
.product-info p { font-size: 15px; margin-top: 6px; }
.product-buy { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.product-buy .btn { text-decoration: none; flex: 0 0 auto; display: inline-flex; padding-inline: 20px; }
.price-inline { color: var(--fg); font-weight: 600; white-space: nowrap; }
.products.two .product-buy { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; }
.products.two .price-tag { font-size: 20px; }
.price-tag { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Ideen */
.ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
@media (max-width: 900px) { .ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.idea { display: grid; gap: 10px; align-content: start; }
.idea p { font-size: 15px; color: var(--muted); }
@media (max-width: 480px) { .idea p { font-size: 14px; } .ideas { gap: 20px 12px; } }

/* Grösse */
.size { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 860px) { .size { grid-template-columns: 1fr; gap: 28px; } }
.size-photo { margin: 0; border-radius: 22px; overflow: hidden; background: #c9a77f; aspect-ratio: 4 / 3; max-width: 100%; }
.size-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.size-copy { display: grid; gap: 4px; min-width: 0; }
.dims { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px 10px; color: var(--muted); }
.dims svg { display: block; width: 100%; height: auto; overflow: visible; }
.dims text.cap { font: 600 13px var(--font-body); fill: var(--fg); }
.dims text.sub { font: 500 11px var(--font-body); fill: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.dims line, .dims path.dim { stroke: var(--muted); stroke-width: 1.2; fill: none; }
.specs { margin: 20px 0 0; display: grid; gap: 0; }
.specs div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Material */
.material { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 860px) { .material { grid-template-columns: 1fr; gap: 32px; } .material-visual { order: -1; max-width: 360px; } }
.material-copy { display: grid; gap: 4px; min-width: 0; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; gap: 18px; } }
.facts li { display: grid; gap: 6px; padding-top: 14px; border-top: 2px solid var(--line); }
.facts li:first-child { border-top-color: var(--accent); }
.facts p { font-size: 15px; color: var(--muted); }
.safety { margin-top: 24px; font-size: 13px; color: var(--muted); }
.material-visual { position: relative; aspect-ratio: 1; max-width: 100%; width: 100%; border-radius: 24px; background: #fbf9f8; overflow: hidden; }
.material-visual .spool { position: absolute; left: 8%; top: 8%; width: 64%; height: auto; aspect-ratio: 1; overflow: visible; }
.material-visual .art { position: absolute; right: 9%; bottom: 8%; }

/* Bewertungen */
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .reviews { grid-template-columns: 1fr; } }
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 12px; align-content: start; }
.stars { color: var(--accent); letter-spacing: 2px; font-size: 16px; }
.review blockquote { margin: 0; font-size: 16px; }
.review .who { font-size: 14px; color: var(--muted); }
.review .tag { font-size: 12px; color: var(--muted); }

/* Ankündigungsleiste: drei Hinweise nebeneinander */
.announce { background: var(--fg); color: var(--bg); font-size: 13px; font-weight: 500; letter-spacing: .01em; }
.announce-track { max-width: var(--maxw); margin: 0 auto; padding: 8px 20px; display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 0 48px; }
.announce-track span { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.announce-track b { font-weight: inherit; }
.announce-track .short { display: none; }
.announce-track span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
@media (max-width: 640px) {
  .announce { font-size: 11px; }
  .announce-track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; padding: 7px 12px; }
  .announce-track span { white-space: normal; text-align: center; line-height: 1.3; }
  .announce-track span::before { display: none; }
  .announce-track .long { display: none; }
  .announce-track .short { display: inline; }
}

/* Gratisversand-Hinweis im Warenkorb */
.pickup-note { font-size: 14px; color: var(--fg); background: var(--soft); border-radius: 10px; padding: 10px 12px; }
.pickup-tag { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--accent); }
.freeship { display: grid; gap: 6px; padding-bottom: 6px; font-size: 14px; }
.freeship .bar { height: 5px; background: var(--soft); border-radius: 3px; overflow: hidden; }
.freeship .bar span { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; }

/* Fragen */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 18px; color: var(--muted); max-width: 62ch; }

footer { background: var(--band); padding-block: 56px 96px; font-size: 14px; color: var(--muted); }
footer a { text-decoration: none; }
footer a:hover, .foot-link:hover { color: var(--fg); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand { display: grid; gap: 12px; align-content: start; max-width: 36ch; }
.foot-brand .logo { color: var(--fg); }
.foot-col { display: grid; gap: 8px; align-content: start; }
.foot-col h3 { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg); margin-bottom: 4px; }
.foot-link { border: 0; background: none; padding: 0; text-align: left; color: inherit; cursor: pointer; font: inherit; }
.foot-bottom { display: flex; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.foot-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* Warenkorb */
.scrim { position: fixed; inset: 0; background: rgba(20,18,19,.36); z-index: 40; opacity: 0; transition: opacity .2s; }
.scrim.on { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--surface); z-index: 41; display: grid; grid-template-rows: auto 1fr auto; box-shadow: -10px 0 40px rgba(0,0,0,.12); transform: translateX(100%); transition: transform .25s ease; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.drawer.on { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 18px; line-height: 1; }
.icon-btn:hover { background: var(--hover); border-color: var(--hover-line); }
.drawer-body { overflow-y: auto; padding: 8px 20px; }
.citem { display: grid; gap: 10px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.citem-title { font-weight: 600; font-size: 15px; }
.mini-poster { width: 58px; aspect-ratio: 5 / 6; border-radius: 4px; display: grid; place-content: center; text-align: center; font-family: var(--font-letter); font-size: 7.5px; line-height: 1.15; box-shadow: 0 4px 10px -4px rgba(0,0,0,.3); }
.mini-frame { width: 58px; }
.mini-frame svg { display: block; width: 100%; height: auto; overflow: visible; }
.citem-prev { background: var(--soft); border-radius: 12px; padding: 14px 12px 12px; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 10px; row-gap: 4px; }
.citem-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.citem-meta { font-size: 14px; color: var(--muted); }
.citem-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.citem .qty button { height: 34px; width: 32px; }
.citem-actions { display: flex; gap: 14px; }
.empty-cart { padding: 48px 0; text-align: center; color: var(--muted); display: grid; gap: 14px; justify-items: center; }
.drawer-foot { border-top: 1px solid var(--line); padding: 16px 20px 20px; display: grid; gap: 8px; }
.tline { display: flex; justify-content: space-between; font-size: 15px; font-variant-numeric: tabular-nums; }
.tline.total { font-size: 18px; font-weight: 600; padding-top: 6px; }
.tline .muted { font-size: 14px; }
.checkout-msg { font-size: 14px; color: var(--error); min-height: 0; }
.checkout-msg:empty { display: none; }
.pay-note { font-size: 13px; color: var(--muted); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glyph, .stage, .drawer, .scrim { transition: none; }
  .glyph:hover { transform: none; }
}

/* Chat */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chat-fab { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 35; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 12px 18px 12px 14px; background: var(--fg); color: var(--bg); font-weight: 600; font-size: 15px; cursor: pointer; box-shadow: 0 10px 30px -8px rgba(0,0,0,.35); transition: transform .15s; }
.chat-fab:hover { transform: translateY(-2px); }
.chat-fab[aria-expanded="true"] { display: none; }
.chat { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 36; width: min(380px, calc(100% - 32px)); height: min(560px, calc(100% - 100px)); background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 60px -16px rgba(0,0,0,.3); display: grid; grid-template-rows: auto 1fr auto auto; overflow: hidden; }
@media (max-width: 520px) { .chat { right: 0; left: 0; bottom: 0; width: 100%; height: min(78%, 620px); border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } .chat-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } }
.chat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 18px 14px; background: var(--studio-bg); }
.chat-head h2 { font-size: 22px; line-height: 1.1; }
.chat-head p { font-size: 13px; color: var(--muted); margin-top: 4px; }
.chat-log { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 86%; padding: 10px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.msg.bot { background: var(--studio-bg); border-bottom-left-radius: 5px; align-self: flex-start; }
.msg.me { background: var(--fg); color: var(--bg); border-bottom-right-radius: 5px; align-self: flex-end; }
.msg .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg .actions button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.msg .actions button:hover { background: var(--hover); }
.typing { display: inline-flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .25; } }
.chat-chips { display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; scrollbar-width: none; }
.chat-chips:empty { display: none; }
.chat-chips button { flex: none; border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; }
.chat-chips button:hover { background: var(--hover); border-color: var(--hover-line); }
.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.chat-input input, .lead-form input { text-transform: none; letter-spacing: 0; }
.chat-input input { flex: 1; min-width: 0; font: 400 15px var(--font-body); padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--fg); }
.chat-input input:focus { outline: none; border-color: var(--fg); }
.chat-input .btn.primary { flex: none; min-height: 0; padding: 10px 14px; }
.lead-form { display: grid; gap: 8px; margin-top: 8px; }
.lead-form input, .lead-form textarea { font: 400 14px var(--font-body); padding: 9px 11px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--fg); width: 100%; }
.lead-form textarea { min-height: 64px; resize: vertical; }
.lead-form .btn.primary { min-height: 40px; }
.lead-form small { color: var(--muted); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .typing i { animation: none; } .chat-fab { transition: none; } }


/* Dezente Animationen */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.12) translateY(-4px); } 100% { transform: scale(1); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes wave { 0%, 100% { transform: none; } 50% { transform: translateY(-6px); } }

/* Hero erscheint beim Laden nacheinander */
.anim-ready .hero-copy > * { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.anim-ready .hero-copy > :nth-child(2) { animation-delay: .06s; }
.anim-ready .hero-copy > :nth-child(3) { animation-delay: .14s; }
.anim-ready .hero-copy > :nth-child(4) { animation-delay: .22s; }
.anim-ready .hero-copy > :nth-child(5) { animation-delay: .3s; }
.anim-ready .hero-visual { animation: rise .9s .1s cubic-bezier(.2,.7,.2,1) both; }
/* Buchstaben im Hero schweben leicht */
.hero-visual .mini svg { animation: floaty 4.5s ease-in-out infinite; }
.hero-visual .mini svg:nth-child(2) { animation-delay: -1.1s; }
.hero-visual .mini svg:nth-child(3) { animation-delay: -2.2s; }
.hero-visual .mini svg:nth-child(4) { animation-delay: -3.3s; }

/* Einblenden beim Scrollen */
.pre { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
.pre.in { opacity: 1; transform: none; }

/* Szenen und Karten reagieren sanft */
.scene { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.idea:hover .scene, .product:hover .scene { transform: translateY(-3px); box-shadow: 0 18px 34px -22px rgba(40,25,30,.35); }
.size-photo img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.size-photo:hover img { transform: scale(1.03); }
.btn, .cart-btn, .opt, .sw, .cdot { transition: background-color .15s, border-color .15s, color .15s, transform .15s; }
.btn:active, .cart-btn:active, .opt:active, .sw:active, .cdot:active { transform: scale(.97); }
.btn.primary:hover { transform: translateY(-1px); }
.cdot:hover { transform: scale(1.12); }

/* Studio: frisch eingefärbter Buchstabe hüpft kurz, «für alle» lässt das Wort winken */
.glyph.pop svg { animation: pop .45s cubic-bezier(.2,.7,.2,1); }
.word-line.wave .glyph svg { animation: wave .5s ease-in-out both; }
.word-line.wave .word .glyph:nth-child(2) svg { animation-delay: .04s; }
.word-line.wave .word .glyph:nth-child(3) svg { animation-delay: .08s; }
.word-line.wave .word .glyph:nth-child(4) svg { animation-delay: .12s; }
.word-line.wave .word .glyph:nth-child(5) svg { animation-delay: .16s; }
.word-line.wave .word .glyph:nth-child(n+6) svg { animation-delay: .2s; }
.poster, .frame-prev svg { transition: background .3s, opacity .3s; }

/* Warenkorb-Zähler */
.cart-count.bump { animation: bump .45s cubic-bezier(.2,.7,.2,1); }

/* Chat-Knopf erscheint sanft */
.anim-ready .chat-fab { animation: rise .6s .8s both; }
.chat:not([hidden]) { animation: rise .3s cubic-bezier(.2,.7,.2,1); }
.msg { animation: rise .3s cubic-bezier(.2,.7,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pre { opacity: 1; transform: none; }
}

/* Newsletter */
.news-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; background: var(--studio-bg); border: 1.5px solid var(--studio-line); border-radius: 28px; padding: 40px; }
@media (max-width: 860px) { .news-card { grid-template-columns: 1fr; gap: 20px; padding: 28px 22px; } }
.news-art { aspect-ratio: 16 / 9; max-width: 100%; display: grid; place-items: center; }
.news-copy { display: grid; gap: 12px; min-width: 0; }
.news-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.news-form input { flex: 1 1 220px; min-width: 0; font: 400 15px var(--font-body); text-transform: none; letter-spacing: 0; padding: 12px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--fg); }
.news-form input:focus { outline: none; border-color: var(--fg); }
.news-form .btn.primary { flex: 0 0 auto; min-height: 46px; padding-inline: 22px; }
.news-note { font-size: 13px; color: var(--muted); }
.news-note.err { color: var(--error); }
.news-code { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 14px; background: var(--surface); border: 1.5px dashed var(--fg); border-radius: 16px; padding: 14px 16px; }
.news-code span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.news-code b { font-size: 22px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.news-code p { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }