/* SpurVonMir – Grundstil nach CI-Datenblatt (CI-und-Website-Konzept.md, Teil B) */
@font-face { font-family: "Playfair Display"; src: url(fonts/playfair-display.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url(fonts/cinzel.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --c-bg: #0B0B09; --c-surface: #15140F; --c-raised: #211F18; --c-divider: #3A3529; --c-border: #7A705C;
  --c-text: #F3EDE1; --c-text-2: #BDB3A1; --c-text-3: #958B79;
  --c-gold: #C1AB80; --c-gold-light: #CCB88E; --c-gold-hover: #DCCBA3; --c-gold-deep: #857358;
  --c-success: #86B892; --c-error: #E58A80; --c-warning: #DDB060; --c-info: #93ABC6;
  --f-display: "Playfair Display", Georgia, serif; /* statt Bodoni Moda: am Handy besser lesbar (30.10.2026) */
  --f-caps: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 96px;
  --r-ctl: 4px; --r-card: 6px;
  --max: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--c-bg); color: var(--c-text); font: 400 16px/1.6 var(--f-text); -webkit-font-smoothing: antialiased; }
@media (min-width: 960px) { body { font-size: 17px; } }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s var(--ease); }
a:hover { color: var(--c-gold); }
:focus-visible { outline: 2px solid var(--c-text); outline-offset: 2px; }
::selection { background: var(--c-gold-deep); color: var(--c-text); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Typografie */
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.12; margin: 0 0 var(--s4); letter-spacing: -.005em; text-wrap: balance; }
h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 22px; font-weight: 600; }
@media (min-width: 960px) { h1 { font-size: 56px; } h2 { font-size: 40px; } h3 { font-size: 28px; } }
h4 { font: 600 18px/1.3 var(--f-text); margin: 0 0 var(--s2); }
p { margin: 0 0 var(--s4); max-width: 70ch; }
.eyebrow { font: 500 12px/1.4 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; color: var(--c-gold); margin: 0 0 var(--s4); }
@media (min-width: 960px) { .eyebrow { font-size: 13px; } }
.lead { font-size: 18px; color: var(--c-text-2); }
.muted { color: var(--c-text-2); } .small { font-size: 14px; } .faint { color: var(--c-text-3); }

/* Layout */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--s4); }
@media (min-width: 640px) { .wrap { padding: 0 var(--s5); } }
.section { padding-block: var(--s7); }
@media (min-width: 960px) { .section { padding-block: var(--s8); } }
.band { background: var(--c-surface); border-block: 1px solid var(--c-divider); }
.grid { display: grid; gap: var(--s4); }
@media (min-width: 960px) { .grid { gap: var(--s5); } }
.g2 { grid-template-columns: 1fr; } .g3 { grid-template-columns: 1fr; } .g4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .g3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .g2 { grid-template-columns: 1fr 1fr; } .g4 { grid-template-columns: repeat(4, 1fr); } }
.center { text-align: center; } .center p { margin-inline: auto; }
.stack > * + * { margin-top: var(--s4); }

/* Kopfzeile */
.skip { position: absolute; left: -9999px; top: 0; background: var(--c-gold-light); color: var(--c-bg); padding: var(--s2) var(--s4); z-index: 100; }
.skip:focus { left: var(--s4); top: var(--s4); }
.site-head { position: sticky; top: 0; z-index: 40; background: rgba(11, 11, 9, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-divider); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: var(--s4); }
.brand img { height: 32px; width: auto; }
@media (min-width: 960px) { .site-head .wrap { height: 76px; } .brand img { height: 40px; } }
.nav { display: none; gap: var(--s6); }
.nav a { font: 500 13px/1 var(--f-caps); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--c-text-2); padding: var(--s3) 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--c-gold); }
@media (min-width: 960px) { .nav { display: flex; } }
.head-actions { display: flex; align-items: center; gap: var(--s3); }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; color: var(--c-text); cursor: pointer; border-radius: var(--r-ctl); }
@media (min-width: 960px) { .menu-btn { display: none; } }
.mobile-nav { display: none; border-top: 1px solid var(--c-divider); background: var(--c-bg); }
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: var(--s4); border-bottom: 1px solid var(--c-divider); font: 500 14px/1.2 var(--f-caps); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--c-text-2); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 48px; padding: 0 var(--s5); border-radius: var(--r-ctl); font: 600 15px/1 var(--f-text); letter-spacing: .04em; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); white-space: nowrap; }
.btn-primary { background: var(--c-gold-light); color: var(--c-bg); }
.btn-primary:hover { background: var(--c-gold-hover); color: var(--c-bg); }
.btn-primary:active { background: var(--c-gold); }
.btn-secondary { background: transparent; color: var(--c-gold); border-color: var(--c-gold); }
.btn-secondary:hover { background: var(--c-raised); color: var(--c-gold); }
.btn-sm { height: 40px; padding: 0 var(--s4); font-size: 14px; }
.btn[disabled] { background: var(--c-raised); color: var(--c-text-3); border-color: transparent; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Hero */
.hero { position: relative; min-height: 80svh; display: grid; place-items: center; text-align: center; padding: var(--s7) 0; background: radial-gradient(ellipse 70% 60% at 50% 42%, #17160F 0%, #11120C 35%, var(--c-bg) 75%); overflow: hidden; }
@media (min-width: 960px) { .hero { min-height: calc(100svh - 76px); } }
.hero-logo { width: min(78vw, 560px); margin: 0 auto var(--s6); }
.hero h1 { margin-bottom: var(--s4); }
.hero .lead { margin: 0 auto var(--s6); max-width: 46ch; }
.hero .btn-row { justify-content: center; }
.hero-note { margin-top: var(--s5); font-size: 14px; color: var(--c-text-3); }

/* Versprechen */
.promise { padding: var(--s5); }
.promise .ico { width: 40px; height: 40px; color: var(--c-gold); margin-bottom: var(--s4); }
.promise h3 { font-size: 24px; margin-bottom: var(--s2); }
.promise p { color: var(--c-text-2); margin: 0; }

/* Karten */
.card { background: var(--c-surface); border: 1px solid var(--c-divider); border-radius: var(--r-card); padding: var(--s5); }
.card-link { text-decoration: none; display: block; transition: background-color .15s var(--ease); }
.card-link:hover { background: var(--c-raised); color: var(--c-text); }
.seal { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border: 1px solid var(--c-gold-deep); border-radius: 999px; font: 500 11px/1 var(--f-caps); letter-spacing: .16em; text-transform: uppercase; color: var(--c-gold); }
.seal img { width: 8px; height: auto; }

/* Profil- und Artikelkarten (Vorschau) */
.pcard { background: var(--c-surface); border: 1px solid var(--c-divider); border-radius: var(--r-card); overflow: hidden; text-decoration: none; color: var(--c-text); display: block; transition: background-color .15s var(--ease); }
.pcard:hover { background: var(--c-raised); color: var(--c-text); }
.pcard .ph { aspect-ratio: 4 / 5; overflow: hidden; }
.pcard .ph > div { width: 100%; height: 100%; transition: transform .4s var(--ease); }
.pcard:hover .ph > div { transform: scale(1.03); }
.pcard .body { padding: var(--s4); }
.pcard .name { font-weight: 600; font-size: 17px; margin: 0 0 2px; }
.pcard .meta { font-size: 14px; color: var(--c-text-2); margin: 0 0 var(--s3); }
.pcard .price { font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; }
.silk-1 { background: radial-gradient(120% 80% at 20% 10%, #3a2f22 0%, transparent 55%), linear-gradient(160deg, #1c1813 0%, #2b241a 40%, #120f0b 100%); }
.silk-2 { background: radial-gradient(90% 70% at 80% 20%, #4a2a26 0%, transparent 60%), linear-gradient(200deg, #1a1210 0%, #2e1d19 50%, #0f0b0a 100%); }
.silk-3 { background: radial-gradient(100% 80% at 30% 80%, #3b3527 0%, transparent 55%), linear-gradient(130deg, #14130f 0%, #26231a 55%, #0e0d0a 100%); }
.silk-4 { background: radial-gradient(110% 70% at 70% 70%, #2c2a26 0%, transparent 60%), linear-gradient(190deg, #191815 0%, #24221d 50%, #0d0c0a 100%); }
.scroll-row { display: grid; grid-auto-flow: column; grid-auto-columns: 70%; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s2); }
.scroll-row > * { scroll-snap-align: start; }
@media (min-width: 640px) { .scroll-row { grid-auto-columns: 40%; } }
@media (min-width: 960px) { .scroll-row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } }
.preview-flag { display: inline-block; margin-left: var(--s2); padding: 2px 8px; border-radius: 999px; background: var(--c-raised); color: var(--c-warning); font: 600 11px/1.6 var(--f-text); letter-spacing: .06em; vertical-align: middle; }

/* Schritte */
.step-num { font: 600 48px/1 var(--f-display); color: var(--c-gold-deep); margin-bottom: var(--s3); }
.step h3 { font-size: 22px; margin-bottom: var(--s2); }
.step p { color: var(--c-text-2); margin: 0; }

/* Kategorien */
.cat { position: relative; aspect-ratio: 1; border-radius: var(--r-card); overflow: hidden; display: flex; align-items: flex-end; padding: var(--s4); text-decoration: none; border: 1px solid var(--c-divider); }
.cat span { font: 500 13px/1 var(--f-caps); letter-spacing: .18em; text-transform: uppercase; color: var(--c-text); position: relative; }
.cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,11,9,.8), transparent 45%); }
.cat span { z-index: 1; }
.cat-art { position: absolute; left: 50%; top: 44%; width: 58%; height: auto; transform: translate(-50%, -50%); color: var(--c-gold); z-index: 1; transition: transform .4s var(--ease), color .2s var(--ease); }
.cat:hover .cat-art { transform: translate(-50%, -52%); color: var(--c-gold-light); }

/* Geteilt */
.split { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1.1fr .9fr; gap: var(--s8); } }
.checklist { list-style: none; padding: 0; margin: 0 0 var(--s6); }
.checklist li { position: relative; padding-left: 28px; margin-bottom: var(--s3); color: var(--c-text-2); }
.checklist li::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 14px; background: url(img/tropfen-gold.webp) center/contain no-repeat; }
.checklist strong { color: var(--c-text); font-weight: 600; }
.visual-still { aspect-ratio: 4 / 5; border-radius: var(--r-card); border: 1px solid var(--c-divider); display: grid; place-items: center; }
.visual-still img { width: 38%; opacity: .9; }

/* FAQ */
.faq { border-top: 1px solid var(--c-divider); max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--c-divider); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s5) 40px var(--s5) 0; font-weight: 600; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid var(--c-gold); border-bottom: 1.5px solid var(--c-gold); transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .a { padding: 0 0 var(--s5); color: var(--c-text-2); }
.faq .a p:last-child { margin-bottom: 0; }

/* Inhaltsseiten */
.page-head { padding: var(--s7) 0 var(--s6); border-bottom: 1px solid var(--c-divider); background: radial-gradient(ellipse 60% 120% at 50% 0%, #17160F 0%, var(--c-bg) 70%); }
@media (min-width: 960px) { .page-head { padding: var(--s8) 0 var(--s7); } }
.prose { max-width: 760px; }
.prose h2 { font-size: 28px; margin-top: var(--s7); }
.prose h3 { font-size: 22px; margin-top: var(--s6); }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 var(--s4); color: var(--c-text-2); }
.prose li { margin-bottom: var(--s2); }
.prose p { color: var(--c-text-2); }
.prose strong { color: var(--c-text); }
.note { --tone: var(--c-info); background: color-mix(in srgb, var(--tone) 7%, var(--c-raised)); border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent); border-radius: var(--r-ctl); padding: var(--s4) var(--s5); margin: var(--s5) 0; color: var(--c-text); }
.note.warn { --tone: var(--c-warning); }
.note p:last-child { margin: 0; }
.limits { --tone: var(--c-gold); }
table.t { width: 100%; border-collapse: collapse; margin: var(--s4) 0 var(--s5); font-size: 15px; }
table.t th, table.t td { text-align: left; padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--c-divider); vertical-align: top; }
table.t th { color: var(--c-text-2); font-weight: 500; font-size: 14px; }

/* Formulare */
.field { margin-bottom: var(--s5); }
.field label { display: block; font: 500 14px/1.4 var(--f-text); color: var(--c-text-2); margin-bottom: var(--s3); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-ctl); color: var(--c-text); font: 400 16px/1.4 var(--f-text); padding: 12px 14px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-gold); outline: 2px solid var(--c-text); outline-offset: 2px; }
.field .hint { font-size: 14px; color: var(--c-text-3); margin-top: var(--s2); }
.check { display: flex; gap: var(--s3); align-items: flex-start; font-size: 15px; color: var(--c-text-2); margin-bottom: var(--s4); }
.check input { width: 20px; height: 20px; accent-color: var(--c-gold-light); margin-top: 2px; flex: none; }
.msg { --tone: var(--c-success); display: none; background: color-mix(in srgb, var(--tone) 8%, var(--c-raised)); border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent); padding: var(--s4); border-radius: var(--r-ctl); margin-top: var(--s4); }
.msg.err { --tone: var(--c-error); }
.msg.show { display: block; }

/* Fuß */
.site-foot { border-top: 1px solid var(--c-divider); padding: var(--s7) 0 var(--s6); color: var(--c-text-3); font-size: 14px; }
.foot-grid { display: grid; gap: var(--s6); }
@media (min-width: 960px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.foot-logo { width: 240px; margin-bottom: var(--s4); }
.site-foot h4 { font: 500 12px/1.4 var(--f-caps); letter-spacing: .18em; text-transform: uppercase; color: var(--c-gold); margin-bottom: var(--s4); }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: var(--s2); }
.site-foot a { color: var(--c-text-3); text-decoration: none; }
.site-foot a:hover { color: var(--c-gold); }
.foot-bottom { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--c-divider); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between; }

/* Altershinweis */
.age-gate { position: fixed; inset: 0; z-index: 90; background: var(--c-bg); display: none; place-items: center; padding: var(--s5); text-align: center; }
.age-gate.show { display: grid; }
.age-gate img { width: 120px; margin: 0 auto var(--s6); }
.age-gate h2 { font-size: 28px; }
.age-gate p { color: var(--c-text-2); margin: 0 auto var(--s6); max-width: 40ch; }
.age-gate .btn-row { justify-content: center; }
.age-gate .fine { margin-top: var(--s6); font-size: 13px; color: var(--c-text-3); }
html.gate-open, html.gate-open body { overflow: hidden; }
.wrap.prose { max-width: var(--max); }
.wrap.prose > * { max-width: 760px; }

/* App: Studio, Verwaltung */
.studio-nav { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s5); }
.studio-nav a { padding: 10px 16px; border: 1px solid var(--c-divider); border-radius: 999px; text-decoration: none; color: var(--c-text-2); font-size: 14px; }
.studio-nav a[aria-current="page"], .studio-nav a:hover { border-color: var(--c-gold); color: var(--c-gold); }
.chip { display: inline-block; padding: 3px 10px; border: 1px solid; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps li { display: flex; gap: var(--s4); align-items: center; padding: var(--s4) 0; border-bottom: 1px solid var(--c-divider); }
.steps li:last-child { border-bottom: 0; }
.steps .n { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--c-gold-deep); display: grid; place-items: center; font: 600 14px/1 var(--f-text); color: var(--c-gold); }
.steps .done .n { background: var(--c-gold-light); color: var(--c-bg); border-color: var(--c-gold-light); }
.steps .t { flex: 1; } .steps .t b { display: block; font-weight: 600; } .steps .t span { color: var(--c-text-2); font-size: 14px; }
.rows { width: 100%; border-collapse: collapse; font-size: 15px; }
.rows th, .rows td { text-align: left; padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--c-divider); vertical-align: middle; }
.rows th { color: var(--c-text-3); font-weight: 500; font-size: 13px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.thumbs figure { margin: 0; position: relative; }
.thumbs img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-ctl); border: 1px solid var(--c-divider); }
.thumbs figcaption { font-size: 12px; color: var(--c-text-3); margin-top: 4px; display: flex; justify-content: space-between; gap: 4px; }
.thumbs button { background: none; border: 0; color: var(--c-error); cursor: pointer; font-size: 12px; padding: 0; }
.row2 { display: grid; gap: 0 var(--s4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .row2 { grid-template-columns: 1fr 1fr; } .row3 { grid-template-columns: 1fr 1fr 1fr; } }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 4px var(--s4); font-size: 14px; margin: 0 0 var(--s4); }
.kv dt { color: var(--c-text-3); } .kv dd { margin: 0; }
.btn-danger { background: transparent; border-color: var(--c-error); color: var(--c-error); }
.btn-danger:hover { background: var(--c-raised); color: var(--c-error); }
.inline { display: inline; }
.msg-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--c-text-2); }
.msg-link:hover { color: var(--c-gold); }
.badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--c-gold-light); color: var(--c-bg); font: 700 11px/18px var(--f-text); text-align: center; }
.filter { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.filter select { min-height: 40px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-ctl); color: var(--c-text); font: 400 15px var(--f-text); padding: 0 12px; }
.profil-kopf { display: flex; gap: var(--s5); align-items: center; flex-wrap: wrap; }
.profil-bild { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 1px solid var(--c-gold-deep); flex: none; }
.art-grid { display: grid; gap: var(--s6); }
@media (min-width: 960px) { .art-grid { grid-template-columns: 1.1fr 1fr; gap: var(--s7); align-items: start; } }
.galerie { display: grid; gap: var(--s3); }
.galerie img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-card); border: 1px solid var(--c-divider); }
.art-preis { font: 600 28px/1.2 var(--f-text); font-variant-numeric: tabular-nums; margin: 0 0 var(--s3); }
.verk-zeile { display: flex; gap: var(--s3); align-items: center; text-decoration: none; padding: var(--s3); border: 1px solid var(--c-divider); border-radius: var(--r-card); }
.verk-zeile > img, .verk-zeile > span:first-child { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.verk-zeile b { font-weight: 600; }
.vertrauen p { font-size: 14px; color: var(--c-text-2); margin-bottom: var(--s2); }
.vertrauen p:last-child { margin: 0; }
.melden { margin-top: var(--s6); font-size: 14px; color: var(--c-text-3); }
.melden summary { cursor: pointer; }
.melden form { margin-top: var(--s4); max-width: 420px; }
/* Chat */
.chat-seite { padding-top: var(--s5); }
.chat { display: grid; border: 1px solid var(--c-divider); border-radius: var(--r-card); background: var(--c-surface); overflow: hidden; height: calc(100svh - 64px - 2 * var(--s5)); min-height: 480px; }
@media (min-width: 960px) { .chat { grid-template-columns: 320px 1fr; height: calc(100svh - 76px - 2 * var(--s6)); } }
.chat-liste { border-right: 1px solid var(--c-divider); overflow-y: auto; padding: var(--s4); }
.chat-titel { font-size: 24px; margin: var(--s2) var(--s2) var(--s4); }
.chat-eintrag { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s3); padding: var(--s3); border-radius: var(--r-ctl); text-decoration: none; color: var(--c-text); }
.chat-eintrag:hover, .chat-eintrag[aria-current] { background: var(--c-raised); color: var(--c-text); }
.chat-name { font-weight: 600; display: flex; align-items: center; }
.chat-vorschau { grid-column: 1 / -1; font-size: 14px; color: var(--c-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-zeit { font-size: 12px; color: var(--c-text-3); }
.chat-verlauf { display: flex; flex-direction: column; min-height: 0; }
.chat-leer { margin: auto; }
.chat-kopf { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--c-divider); }
.chat-zurueck { font-size: 22px; text-decoration: none; padding: 0 var(--s2); }
.chat-artikel { display: block; padding: var(--s2) var(--s4); font-size: 14px; color: var(--c-text-2); border-bottom: 1px solid var(--c-divider); text-decoration: none; background: var(--c-bg); }
.chat-msgs { flex: 1; overflow-y: auto; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.bubble { max-width: 78%; align-self: flex-start; background: var(--c-raised); border-radius: 14px 14px 14px 4px; padding: var(--s3) var(--s4); }
.bubble.eigen { align-self: flex-end; background: #2c271c; border-radius: 14px 14px 4px 14px; }
.bubble p { margin: 0; max-width: none; overflow-wrap: anywhere; }
.bubble img { max-width: 240px; border-radius: 8px; margin-bottom: var(--s2); }
.bzeit { display: block; font-size: 11px; color: var(--c-text-3); margin-top: 4px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--c-text-3); font: inherit; cursor: pointer; text-decoration: underline; }
.chat-eingabe { display: flex; gap: var(--s2); align-items: flex-end; padding: var(--s3); border-top: 1px solid var(--c-divider); }
.chat-eingabe textarea { flex: 1; resize: none; min-height: 44px; max-height: 160px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 22px; color: var(--c-text); font: 400 16px/1.4 var(--f-text); padding: 11px 16px; }
.chat-eingabe textarea:focus { border-color: var(--c-gold); outline: none; }
.chat-anhang { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--c-text-2); cursor: pointer; border-radius: 50%; }
.chat-anhang.aktiv { color: var(--c-gold); background: var(--c-raised); }
.chat-anhang input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chat-hinweis { padding: var(--s4); border-top: 1px solid var(--c-divider); margin: 0; }
@media (max-width: 959px) { .chat.hat-gespraech .chat-liste { display: none; } .chat:not(.hat-gespraech) .chat-verlauf { display: none; } }
@media (min-width: 960px) { .chat-zurueck { display: none; } }
/* Bestellungen */
.kasse { display: grid; gap: var(--s5); max-width: 760px; }
.wahl { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
@media (min-width: 640px) { .wahl { grid-template-columns: repeat(3, 1fr); } }
.wahl-opt { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border: 1px solid var(--c-divider); border-radius: var(--r-card); cursor: pointer; }
.wahl-opt:has(input:checked) { border-color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 6%, transparent); }
.wahl-opt input { accent-color: var(--c-gold-light); margin-top: 4px; flex: none; }
.wahl-opt b { display: block; font-weight: 600; } .wahl-opt small { color: var(--c-text-2); font-size: 13px; }
.verlauf { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.verlauf li { font-size: 13px; color: var(--c-text-3); text-align: center; }
.verlauf li span { display: block; height: 3px; border-radius: 2px; background: var(--c-divider); margin-bottom: var(--s2); }
.verlauf li.ok { color: var(--c-text); } .verlauf li.ok span { background: var(--c-gold-light); }
.sterne { color: var(--c-gold-light); letter-spacing: 2px; } .sterne .leer { color: var(--c-divider); }
.sterne-wahl { display: inline-flex; flex-direction: row-reverse; gap: 4px; margin-bottom: var(--s4); }
.sterne-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sterne-wahl label { font-size: 32px; color: var(--c-divider); cursor: pointer; line-height: 1; }
.sterne-wahl input:checked ~ label, .sterne-wahl label:hover, .sterne-wahl label:hover ~ label { color: var(--c-gold-light); }
.sterne-wahl input:focus-visible + label { outline: 2px solid var(--c-text); outline-offset: 2px; }
.ratgeber h2 { font-size: 26px; }
.ratgeber-cta { margin: var(--s7) 0 var(--s5); max-width: 760px; }
.ratgeber-cta p, .ratgeber-cta h3 { max-width: none; }