/* =========================================================================
   Brennholzbuben — shop.css
   Kundenbereich (/shop): Startseite, Produkte, Warenkorb, Checkout (Kalender,
   Uhr, Bestellübersicht), Konto, Bestellungen, FAQ, Glossar, Anfrage, Login,
   Rechtstexte, Chat-Widget, Cookie-Hinweis. Baut auf base.css auf.
   ========================================================================= */

/* ------------------------------------------------------------- Startseite */
.hero {
  position: relative; overflow: hidden;
  margin: var(--s-2) 0 var(--s-6); padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  border-radius: var(--r-xl); border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-softer), transparent 60%),
    linear-gradient(180deg, var(--bg-elev), var(--bg));
}
.hero h1 { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.03em; margin: var(--s-4) 0 var(--s-4); max-width: 16ch; }
.hero h1 .gradient-text, .hero h1 .accent { color: var(--accent-text); }
.hero p { font-size: var(--fs-callout); color: var(--text-2); max-width: 38rem; margin: 0 0 var(--s-3); }
.hero .badge-pill .icon { width: 1rem; height: 1rem; }
.eco-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: var(--r-pill);
  background: var(--ok-soft); color: var(--ok-text); font-size: var(--fs-foot); font-weight: 600; }
.eco-tag .icon { width: 1rem; height: 1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-6);
  padding-top: var(--s-5); border-top: 1px solid var(--line); }
.hero-stats > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; align-items: center; }
.hero-stats .icon { grid-row: span 2; width: 2.25rem; height: 2.25rem; padding: .45rem; border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent-text); }
.hero-stats .n { font-size: var(--fs-t3); font-weight: 700; letter-spacing: -.01em; color: var(--text); line-height: 1.2; }
.hero-stats .l { font-size: var(--fs-foot); color: var(--text-2); }
@media (max-width: 720px) { .hero-stats { grid-template-columns: 1fr; gap: var(--s-3); } }

/* ------------------------------------------------------------- Produkte */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: var(--s-5); margin: var(--s-5) 0; }
.product-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.product-card:hover { box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.product-card > a { display: block; background: var(--bg-sunken); }
.product-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: var(--s-3);
  background: var(--bg-sunken); transition: transform var(--dur-3) var(--ease-out); }
@media (prefers-reduced-motion: no-preference) { .product-card:hover .product-img { transform: scale(1.025); } }
.product-card .pad { display: flex; flex-direction: column; gap: .35rem; flex: 1; padding: var(--s-4) var(--s-4) var(--s-5); }
.prod-title { margin: 0; font-size: var(--fs-t3); font-weight: 650; letter-spacing: -.012em; line-height: 1.25;
  hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: keep-all; }
.product-card .variant { margin: 0; color: var(--text-2); font-size: var(--fs-sub); }
.dry-tag { display: inline-block; margin-left: .3rem; padding: .05rem .5rem; border-radius: var(--r-pill);
  background: var(--bg-sunken); color: var(--text-2); font-size: var(--fs-cap); font-weight: 600; vertical-align: .1em; }
.product-card .price { margin: var(--s-2) 0 0; font-size: var(--fs-t2); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.product-card .price .gradient-text { color: var(--text); }
.product-card .price .meta { font-size: var(--fs-sub); font-weight: 500; letter-spacing: 0; }
.price-star { color: var(--text-3); font-weight: 500; margin-left: 1px; }
.product-card form { margin-top: auto; padding-top: var(--s-3); }
.cart-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.cart-icon-btn { min-width: 52px; padding: 0 1rem; }
.cart-icon-btn .cart-svg { width: 20px; height: 20px; }
.card-price-live { display: flex; flex-direction: column; gap: .1rem; margin: var(--s-2) 0 0; font-size: var(--fs-sub); }
.card-price-live .card-unit { color: var(--text-2); font-size: var(--fs-foot); font-variant-numeric: tabular-nums; }
.card-price-live strong { font-variant-numeric: tabular-nums; }
.tier-note { color: var(--ok-text); font-size: var(--fs-foot); font-weight: 600; }
.tier-badge { display: inline-flex; align-items: center; margin-left: .5rem; padding: .1rem .55rem; border-radius: var(--r-pill);
  background: var(--ok-soft); color: var(--ok-text); font-size: var(--fs-cap); font-weight: 650; vertical-align: .2em; }
.tier-hint { max-width: var(--w-prose); }
.vat-note { text-align: center; font-size: var(--fs-foot); color: var(--text-2); margin: var(--s-3) 0 var(--s-6); }

/* Produktdetail: Bild links, Kaufbereich rechts */
.product-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start; margin: var(--s-4) 0 var(--s-6); }
.product-detail .product-img.big { aspect-ratio: 1 / 1; border-radius: var(--r-xl); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; padding: var(--s-5); }
.product-detail .product-img.big img { width: 100%; height: auto; }
.product-detail h1 { margin-top: 0; }
.product-detail .variant { color: var(--text-2); font-size: var(--fs-callout); margin: -.5rem 0 var(--s-3); }
.product-detail .desc { color: var(--text); max-width: var(--w-prose); }
.product-detail .price.big { font-size: var(--fs-t1); font-weight: 700; letter-spacing: -.02em; margin: var(--s-4) 0; }
.product-detail form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); margin-top: var(--s-4); }
.product-detail form label { margin: 0; }
.detail-price-live { flex-basis: 100%; margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--bg-sunken); line-height: 1.6; }
.detail-price-live strong { font-variant-numeric: tabular-nums; font-size: var(--fs-callout); }
@media (max-width: 760px) { .product-detail { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- Warenkorb */
table.cart { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); border-collapse: separate;
  border-spacing: 0; overflow: hidden; box-shadow: var(--shadow-1); }
table.cart th { background: var(--bg-sunken); }
table.cart td { vertical-align: middle; }
table.cart tfoot td { border-top: 1px solid var(--line-strong); border-bottom: 0; font-size: var(--fs-callout); }
table.cart .muted { font-size: var(--fs-foot); }
.cart-savings-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  margin: var(--s-4) 0; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--ok-soft); color: var(--ok-text); }
.csb-label { font-weight: 600; }
.csb-amount { font-size: var(--fs-t2); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-saved-hint { color: var(--ok-text); font-size: var(--fs-foot); }
p.actions { margin-top: var(--s-4); }
@media (max-width: 640px) {
  table.cart { display: block; overflow-x: auto; white-space: nowrap; }
  .cart-savings-banner { flex-direction: column; align-items: flex-start; gap: .2rem; }
}

/* ------------------------------------------------------------- Checkout */
#checkout-form > section { margin-bottom: var(--s-4); }
#checkout-form h2.headline { display: flex; align-items: baseline; gap: .4rem; }
.address-pick { display: flex; gap: .75rem; align-items: flex-start; margin: var(--s-2) 0; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg-elev); cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.address-pick:hover { border-color: var(--accent); }
.address-pick:has(input:checked) { border-color: var(--accent); background: var(--accent-softer); box-shadow: 0 0 0 1px var(--accent) inset; }
.address-pick input { margin-top: .2rem; }
.addr-zone-price { color: var(--text-2); white-space: nowrap; }
.radio { min-height: 44px; }
.delivery-cost-line { margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-sunken); }
.delivery-cost-line strong { font-size: var(--fs-callout); }
.pay-hint { margin: .2rem 0 var(--s-3) 1.8rem; color: var(--text-2); font-size: var(--fs-sub); }
.combine-hint { display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md); background: var(--ok-soft); color: var(--ok-text); font-size: var(--fs-sub); }
.combine-dot { flex: none; width: 12px; height: 12px; margin-top: .3rem; border-radius: 50%; background: var(--ok); }
.voucher-row { display: flex; gap: var(--s-2); flex-wrap: wrap; max-width: 30rem; }
.voucher-row input { flex: 1; min-width: 12rem; text-transform: uppercase; }
.voucher-msg { margin-top: var(--s-2); min-height: 1.2em; }
.voucher-ok { color: var(--ok-text); font-weight: 600; }
.voucher-bad { color: var(--danger-text); font-weight: 600; }
.checkout-hint { margin-top: var(--s-2); }
.checkout-legal { margin-top: var(--s-5); max-width: var(--w-prose); }
[data-checkout-submit] { min-width: 12rem; }

/* Datumswahl: Kalender mit gut lesbaren Zellen; gewählter Tag gefüllt */
.cal-pick { margin: var(--s-4) 0; }
.cal-pick-head, .cal-pick-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.cal-pick-head { margin-bottom: .35rem; color: var(--text-3); font-size: var(--fs-cap); font-weight: 600; text-align: center; }
.cal-pick-row { margin-bottom: .35rem; }
.cal-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 56px; padding: .3rem .1rem; border-radius: var(--r-md); font-variant-numeric: tabular-nums; }
.cal-cell.muted { color: var(--text-3); opacity: .55; }
.cal-cell.selectable { cursor: pointer; background: var(--bg-elev); border: 1px solid var(--line-strong);
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), transform var(--dur-press) var(--ease-out); }
.cal-cell.selectable:hover { border-color: var(--accent); }
.cal-cell.selectable:active { transform: scale(.96); }
.cal-cell.selectable input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.cal-cell.selectable:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.cal-dom { font-size: var(--fs-callout); font-weight: 650; line-height: 1.1; }
.cal-mon { font-size: .6875rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; }
.cal-hint { display: block; font-size: .625rem; color: var(--text-2); line-height: 1; margin-top: 2px; }
.cal-cell.selectable:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cal-cell.selectable:has(input:checked) .cal-mon,
.cal-cell.selectable:has(input:checked) .cal-hint { color: var(--on-accent); opacity: .85; }
.cal-cell.cal-sat { border-style: dashed; }
.cal-cell.cal-combine { background: var(--ok-soft); border-color: var(--ok); }
.cal-combine-badge { display: block; font-size: .625rem; font-weight: 700; color: var(--ok-text); line-height: 1; margin-top: 2px; }
.cal-cell.selectable.cal-full { border: 1px dashed var(--danger); background: var(--danger-soft); }
.cal-cell.selectable.cal-full::after { content: "belegt"; display: block; font-size: .5625rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--danger-text); line-height: 1; margin-top: 2px; }
@media (max-width: 420px) { .cal-pick-head, .cal-pick-row { gap: .2rem; } .cal-cell { min-height: 50px; } .cal-mon { display: none; } }

/* Uhr: Startzeit eines 2-Stunden-Fensters */
.time-pick { display: block; margin-top: var(--s-4); }
.tp-label { display: block; font-weight: 600; margin-bottom: var(--s-2); }
.clock-pick { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.clock-svg { width: 240px; max-width: 72vw; height: auto; cursor: pointer; touch-action: manipulation; border-radius: 50%; }
.clock-face { fill: var(--bg-elev); }
.clock-rim { stroke: var(--line-strong); stroke-width: 2; }
.clock-tick { stroke: var(--text-3); stroke-width: 2; }
.clock-num { fill: var(--text); font: 600 15px var(--font-sans); cursor: pointer; transition: fill var(--dur-1) var(--ease); }
.clock-hot { cursor: pointer; }
.clock-wedge { fill: var(--accent); opacity: .22; }
.clock-hand { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.clock-hub { fill: var(--accent); }
.clock-svg .clock-num.sel, .clock-svg:hover .clock-num.sel { fill: var(--accent-text); font-weight: 750; }
.clock-num.off { opacity: .25; }
.clock-svg .clock-num.busy, .clock-svg:hover .clock-num.busy { fill: var(--danger); opacity: .9; text-decoration: line-through; cursor: not-allowed; }
.clock-hot.busy { stroke: var(--danger); stroke-opacity: .55; stroke-width: 2; stroke-dasharray: 3 3; cursor: not-allowed; }
.clock-svg .clock-num.busy.sel, .clock-svg:hover .clock-num.busy.sel { fill: var(--accent-text); opacity: 1; text-decoration: none; }
.clock-caption { font-size: var(--fs-callout); }
.clock-caption strong { color: var(--accent-text); }
.clock-hint { font-size: var(--fs-foot); color: var(--text-2); text-align: center; }

/* Bestellübersicht (§ 312j BGB) */
.order-summary .table-wrap { overflow-x: auto; }
.order-summary .summary-lines { margin: var(--s-2) 0; }
.order-summary .summary-lines td { vertical-align: top; }
.order-summary .summary-lines .num { white-space: nowrap; }
.summary-totals { margin: var(--s-4) 0 var(--s-2) auto; max-width: 28rem; display: grid; gap: .35rem; }
.summary-totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); }
.summary-totals > div[hidden] { display: none; }
.summary-totals dt, .summary-totals dd { margin: 0; }
.summary-totals dt { color: var(--text-2); }
.summary-totals dd { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.summary-totals .sum-total { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line-strong);
  font-weight: 700; font-size: var(--fs-t3); }
.summary-totals .sum-total dt { color: var(--text); }
.summary-totals .sum-total small { font-weight: 500; font-size: var(--fs-foot); color: var(--text-2); }
@media (max-width: 560px) {
  .order-summary .summary-lines th:nth-child(3), .order-summary .summary-lines td:nth-child(3) { display: none; }
}

/* ------------------------------------------------------------- Konto */
.address-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--s-3); margin: var(--s-4) 0; }
.address-card, .offer-card { padding: var(--s-4); }
.offer-card { margin-bottom: var(--s-3); border-color: var(--accent); background: linear-gradient(var(--accent-softer), var(--accent-softer)), var(--bg-elev); }
.addr-roles { margin: 0 0 var(--s-2); display: flex; gap: .3rem; flex-wrap: wrap; }
.addr-actions { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; margin-top: var(--s-3); }
.lock-note { font-size: var(--fs-foot); }
.addr-add-wrap { margin-top: var(--s-4); }
.addr-form { margin-top: var(--s-4); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); }
.addr-roles-pick { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; align-items: center; }
.addr-roles-pick legend { width: 100%; }
.addr-roles-pick .check { display: inline-flex; }
.onboarding-banner p { margin: .2rem 0; }

/* ------------------------------------------------------------- Bestellungen */
.order-card { padding: var(--s-4) var(--s-5); margin-bottom: var(--s-3); }
.order-card h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0 0 var(--s-1); font-size: var(--fs-t3); }
.order-card ul.lines { list-style: none; margin: var(--s-3) 0; padding: 0; }
.order-card ul.lines li { padding: .3rem 0; border-bottom: 1px solid var(--line); }
.order-card ul.lines li:last-child { border-bottom: 0; }
.order-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: var(--s-3) 0 0; }
.order-actions form { margin: 0; }
table.lines td.right { white-space: nowrap; }
table.lines tr.total th, table.lines tr.total td { font-size: var(--fs-callout); font-weight: 700; color: var(--text);
  border-top: 1px solid var(--line-strong); border-bottom: 0; }
.addr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s-4); }
.addr-cols h2 { font-size: var(--fs-t3); margin-top: 0; }
.delivery-photo { max-width: min(360px, 100%); border-radius: var(--r-lg); border: 1px solid var(--line); }

/* Status als Stepper: erledigte Schritte gefüllt, Linie verbindet */
.status-timeline h2 { margin-bottom: var(--s-3); }
.status-timeline ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; counter-reset: step; }
.status-timeline li { position: relative; display: flex; flex-direction: column; gap: .1rem; padding: .55rem .9rem .55rem 2.3rem;
  border-radius: var(--r-md); background: var(--bg-elev); border: 1px solid var(--line); font-size: var(--fs-sub); font-weight: 550;
  counter-increment: step; color: var(--text-2); }
.status-timeline li::before { content: counter(step); position: absolute; left: .7rem; top: .6rem; width: 1.15rem; height: 1.15rem;
  border-radius: 50%; display: grid; place-items: center; font-size: .6875rem; font-weight: 700;
  background: var(--bg-sunken); color: var(--text-2); }
.status-timeline li.done { color: var(--text); border-color: transparent; background: var(--ok-soft); }
.status-timeline li.done::before { content: "✓"; background: var(--ok); color: #fff; }
.status-timeline li small { color: var(--text-2); font-weight: 400; }

/* ------------------------------------------------------------- FAQ, Glossar */
.faq-list { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-4) 0 var(--s-5); max-width: var(--w-prose); }
.faq-item { padding: 0; overflow: hidden; }
.faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 52px; padding: var(--s-3) var(--s-4); font-weight: 600; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: ""; flex: none; width: .55rem; height: .55rem; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur-2) var(--ease-out); }
.faq-item[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-item > :not(summary) { padding: 0 var(--s-4) var(--s-4); margin: 0; color: var(--text-2); }
.glossary-page { max-width: 60rem; }
.glossary-jump { margin: var(--s-4) 0 var(--s-6); }
.glossary-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.glossary-jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .85rem; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--text); font-size: var(--fs-sub); white-space: nowrap; }
.glossary-jump a:hover { background: var(--bg-hover); text-decoration: none; }
.glossary-list { margin: 0; }
.glossary-item { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--bar-h) + 1rem); }
.glossary-item dt { font-size: var(--fs-t3); font-weight: 650; letter-spacing: -.01em; margin-bottom: var(--s-1); }
.glossary-item dd { margin: 0; color: var(--text-2); max-width: var(--w-prose); }
.glossary-foot { margin-top: var(--s-6); }

/* ------------------------------------------------------------- Anfrage, Login */
.inquiry { max-width: 44rem; }
.inquiry textarea { min-height: 8rem; }
.auth-form { max-width: 26rem; margin: var(--s-4) 0; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--bg-elev); box-shadow: var(--shadow-1); }
.auth-form .btn { width: 100%; margin-top: var(--s-2); }
.dev-banner { max-width: 40rem; margin: var(--s-4) 0; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg);
  border: 1px dashed var(--warn); background: var(--warn-soft); }
.dev-banner h2 { margin-top: 0; font-size: var(--fs-t3); color: var(--warn-text); }
.dev-link { word-break: break-all; }

/* ------------------------------------------------------------- Rechtstexte */
.legal { max-width: var(--w-prose); line-height: 1.65; overflow-wrap: break-word; }
.legal h1 { line-height: 1.15; }
.legal h2 { font-size: var(--fs-t3); margin-top: var(--s-6); }
.legal h3 { font-size: var(--fs-body); }
.legal p, .legal li { color: var(--text); }
.legal ul, .legal ol { padding-left: 1.3rem; }
.legal .muster { margin: var(--s-4) 0; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--bg-sunken); border: 1px solid var(--line); }
.legal-note { margin-top: var(--s-6); }

/* ------------------------------------------------------------- Chat-Widget */
.chat-widget { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 1500; }
.chat-fab { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; height: 52px;
  padding: 0 1.1rem 0 .95rem; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 650; font-size: var(--fs-sub);
  box-shadow: var(--shadow-2); transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-1) var(--ease); }
.chat-fab:hover { background: var(--accent-hover); }
.chat-fab:active { transform: scale(.96); }
.chat-fab .icon { width: 1.35rem; height: 1.35rem; }
.chat-panel { position: absolute; right: 0; bottom: 64px; width: min(380px, calc(100vw - 32px)); display: flex; flex-direction: column;
  overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--bg-elev); box-shadow: var(--shadow-3);
  transform-origin: bottom right; }
@media (prefers-reduced-motion: no-preference) { .chat-panel:not([hidden]) { animation: bhb-sheet var(--dur-3) var(--ease-out) both; } }
.chat-panel[hidden] { display: none !important; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: .6rem .6rem .6rem 1rem;
  border-bottom: 1px solid var(--line); font-weight: 650; }
.chat-x { width: 36px; height: 36px; min-height: 0; border: 0; border-radius: var(--r-pill); background: var(--bg-sunken); color: var(--text-2);
  font-size: 1.25rem; line-height: 1; cursor: pointer; }
.chat-x:hover { color: var(--text); }
.chat-log { height: min(360px, 50vh); overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding: var(--s-3); background: var(--bg); }
.chat-msg { max-width: 85%; padding: .55rem .8rem; border-radius: 18px; font-size: var(--fs-sub); line-height: 1.4; white-space: pre-wrap; }
.chat-msg.bot { align-self: flex-start; background: var(--bg-elev); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.chat-msg.user { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 6px; }
.chat-msg.typing { opacity: .6; font-style: italic; }
.chat-choices { display: flex; flex-direction: column; gap: .4rem; }
.chat-choice { text-align: left; min-height: 44px; padding: .55rem .8rem; border-radius: var(--r-md); cursor: pointer; font: inherit;
  font-size: var(--fs-sub); color: var(--accent-text); background: var(--accent-softer); border: 1px solid var(--accent-soft);
  transition: background-color var(--dur-1) var(--ease), transform var(--dur-press) var(--ease-out); }
.chat-choice:hover { background: var(--accent-soft); }
.chat-choice:active { transform: scale(.98); }
.chat-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.chat-input { display: flex; gap: .4rem; padding: .6rem; border-top: 1px solid var(--line); background: var(--bg-elev); }
.chat-input input { flex: 1; }
.chat-input .btn { flex: none; }
.chat-note { margin: 0; padding: 0 .9rem .7rem; font-size: var(--fs-cap); color: var(--text-3); background: var(--bg-elev); }
@media (max-width: 560px) {
  .chat-fab { width: 52px; padding: 0; }
  .chat-fab .chat-fab-label { display: none; }
  .chat-panel { right: -4px; }
}

/* ------------------------------------------------------------- Cookie-Hinweis */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1600;
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: var(--material-sheet); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .2);
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease); }
.cookie-banner.cookie-banner-hide { transform: translateY(105%); opacity: 0; }
.cookie-banner-inner { max-width: var(--w-content); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s-3) var(--s-5); }
.cookie-banner-text { margin: 0; flex: 1 1 22rem; font-size: var(--fs-sub); color: var(--text); }
.cookie-banner-text a { text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: var(--s-2); flex: none; }
@media (max-width: 560px) { .cookie-banner-inner { flex-direction: column; align-items: stretch; } .cookie-banner-actions .btn { flex: 1; } }
@media (prefers-reduced-transparency: reduce) { .cookie-banner { background: var(--bg-elev); -webkit-backdrop-filter: none; backdrop-filter: none; } }