/* Produktseite nach Vorbild celinasuchy.com, so breit wie der Rest der Seite (.wrap).
   Links das Bild in einem breiten Rahmen: Das Produkt bleibt so hoch wie das Fenster erlaubt, der Rahmen füllt die Spalte
   (quadratisch oder breiter als hoch). Rechts die Infospalte über die restliche Breite: Titel, Preis, Auswahl mit
   Größentabelle in einer Zeile, ein Knopf, drei Symbole, dann Akkordeons. Überschreibt die älteren Regeln aus shop.css. */
/* Feldrand gilt auch im Schnellkauf-Panel auf anderen Seiten */
:root { --feld-rand: #ccced1; }
.tpl-product {
  --bild-h: max(440px, calc(100svh - var(--header-h) - 44px));
  --spalt: clamp(28px, 3.4vw, 72px);
}
.product-page {
  grid-template-columns: minmax(0, 1.3fr) minmax(min(380px, 100%), 1fr);
  gap: var(--spalt); align-items: start; padding-block: 20px clamp(48px, 6vw, 88px);
}
/* Das Bild bleibt stehen: kein Mitlaufen, kein vertikales Zentrieren, wenn rechts etwas aufklappt */
.product-page__visual { position: static; align-self: start; min-width: 0; }
.product-page__media {
  position: relative; display: flex; justify-content: center; align-items: center;
  width: 100%; aspect-ratio: 1; max-height: var(--bild-h); overflow: hidden; border-radius: 14px; background: #e9ebee;
}
.product-page__media picture { position: static; display: flex; justify-content: center; height: 100%; width: 100%; }
/* Foto in voller Höhe; der Rahmen trägt das Off-White des Fotohintergrunds (content.py bildrand), das Foto läuft seitlich
   weich aus, aber nur an Seiten ohne Motiv im Randstreifen (content.py bildmaske, --maske): sonst läge ein heller Schleier auf dem Ärmel */
.product-page__media picture img {
  width: auto; max-width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image: var(--maske, linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent));
  mask-image: var(--maske, linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent));
}
.product-page__details { position: static; min-width: 0; padding-top: 4px; }

.product-page__title { margin: 0; font: 600 clamp(1.35rem, 1.1rem + .55vw, 1.85rem)/1.2 var(--disp); letter-spacing: -.012em; }
.product-page__price { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 500 1.12rem/1.3 var(--sans); }
.product-page__tax { font-size: .82rem; font-weight: 400; color: #5f5f5f; }

/* Auswahl-Ebenen (Schnitt, Farbe, Größe, Garnfarbe, Personalisierung) enger beieinander (Celina 25.10.2026) */
.product-buy { display: flex; flex-direction: column; gap: 12px; margin: 17px 0 0; }
.product-field.product-sizes, .product-field.product-thread { gap: 8px; }
.product-thread > span, .product-choices legend, .perso .product-choices legend, .product-fit > span { font: 500 .9rem/1.4 var(--sans); }

/* Größe und Größentabelle teilen sich eine Zeile wie bei celinasuchy.com */
.product-size-block { position: relative; --guide-w: 50%; }   /* Größe und Größentabelle je halb (Celina 25.10.2026) */
.product-size-block .product-sizes { margin-right: var(--guide-w); }
.product-size-block .product-select::after { top: 21px; }
.product-size-block .product-select select { height: 52px; border: 1px solid var(--feld-rand); border-right: 0; border-radius: 10px 0 0 10px; font-size: .95rem; }
.product-size-block .size-guide-btn {
  position: absolute; top: 0; right: 0; width: var(--guide-w); height: 52px;
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px;
  border: 1px solid var(--feld-rand); border-left: 0; border-radius: 0 10px 10px 0; background: #fff; color: var(--ink);
  font: 500 .95rem/1 var(--sans); cursor: pointer;
}
.product-size-block .size-guide-btn::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; border-left: 1px solid var(--feld-rand); }
/* Nur eine Größe: als fester Text ohne Pfeil, nicht anklickbar (product.html eine_groesse) */
.product-sizes--eine .product-select::after { display: none; }
.product-sizes--eine .product-select select { pointer-events: none; cursor: default; padding-right: 15px; }
.product-size-block .size-guide-btn:hover span { text-decoration: underline; text-underline-offset: 4px; }
.size-guide-btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
/* Größentabelle im Pop-up: am Computer mittig und breiter, am Handy über den ganzen Bildschirm */
.lb-popover.lb-popover--tabelle { width: min(760px, calc(100vw - 48px)); }
.lb-popover--tabelle .size-guide { margin: 0; }
.size-guide__body { margin: 0; padding: 0; background: none; border-radius: 0; }
@media (max-width: 600px) {
  .lb-popover.lb-popover--tabelle { width: 100vw; max-width: none; height: 100dvh; max-height: none; border-radius: 0; transform: none;
    padding: max(20px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
  @starting-style { .lb-popover.lb-popover--tabelle:popover-open { transform: none; } }
}
.size-guide__body p { font-size: .9rem; color: #444; }
.size-guide table { font-size: .88rem; }
.size-guide th, .size-guide td { border-bottom: 1px solid var(--line); }

/* Fokus nur als Ring bei Tastaturbedienung; fehlt die Größe, rote Umrandung und roter Text darunter */
.product-select select:focus { outline: none; border-color: var(--ink); }
.product-select select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.product-buy:has(.form-status.is-error) .product-select select:invalid { border-color: #c4473a; outline: none; }
.product-buy .form-status { margin: -6px 0 0; font-size: .9rem; }
.product-buy .form-status.is-error { color: #b3392c; }
.product-buy .form-status:empty { display: none; }

/* Personalisierung: weiße Felder mit klarer Umrandung, als eigener Kasten erkennbar */
.perso {
  display: grid; gap: 16px; margin: 4px 0 0; padding: 18px 18px 20px;
  border: 1px solid var(--feld-rand); border-radius: 12px; background: #fff;
}
.perso legend { float: none; margin: 0; padding: 0 8px; font: 600 1rem/1.3 var(--sans); letter-spacing: 0; }
.perso__note { display: none; }
.perso .product-field input:not([type="file"]), .product-field input:not([type="file"]) {
  background: #fff; border: 1px solid var(--feld-rand); border-radius: 10px;
}
/* Textfelder: ruhiger Fokus ohne dicken Ring; Fehler rot umrandet (personalize.js setzt aria-invalid) */
.product-field input:not([type="file"]):is(:focus, :focus-visible) { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20, 20, 20, .08); background: #fff; }
.product-field [aria-invalid="true"], .product-field [aria-invalid="true"]:is(:focus, :focus-visible) { outline: none; border-color: #c4473a; box-shadow: 0 0 0 3px rgba(196, 71, 58, .12); }
.product-field--upload { background: #fff; border: 1px dashed #b9bab4; }
.upload-prompt__icon { background: #fff; }
.choice-label { border-color: var(--feld-rand); }
.thread-picker__trigger { border-color: var(--feld-rand); }
.thread-picker__option:hover, .thread-picker__option:focus-within { background: #f4f4f2; }
.thread-picker__option:has(input:checked) { background: #f4f4f2; }
.perso__preview { margin: 0; padding: 2px 0 0; border: 0; border-radius: 0; background: none; font-size: .92rem; }
.perso__preview span { color: #5f5f5f; }

/* Menge klein links, ein schwarzer Knopf über den Rest der Zeile */
.product-buy__actions { display: flex; gap: 10px; align-items: stretch; }
.product-buy__actions .product-field--quantity { flex: none; }
.product-buy__actions .quantity-picker { width: 116px; height: 54px; border: 1px solid var(--feld-rand); border-radius: 10px; }
.product-buy__actions .quantity-picker button { width: 34px; font-size: 18px; }
.product-buy__actions .quantity-picker input[type="number"] { width: 48px; min-height: 0; height: 100%; padding: 0; }
.product-buy__actions .btn--solid { flex: 1; min-height: 54px; padding: 0 16px; border-radius: 10px; font-size: 1rem; font-weight: 600; }
/* Personalisierte Stücke: Ausschluss von Umtausch und Widerruf direkt beim Knopf */
.product-buy__final { margin: -4px 0 0; padding: 12px 14px; border-left: 3px solid var(--ink); background: #f2f4f7; font-size: .9rem; line-height: 1.5; color: var(--ink); }
.product-buy__final a { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Drei Symbole: Fertigung, Versand, Widerruf bzw. Prüfung */
.product-usp { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 28px 0 0; padding: 18px 0; border-block: 1px solid var(--line); }
.product-usp li { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 14px; border-left: 1px solid var(--line); }
.product-usp li:first-child { padding-left: 0; border-left: 0; }
.product-usp svg { width: 23px; height: 23px; margin-bottom: 6px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.product-usp strong { font-size: .92rem; font-weight: 600; line-height: 1.3; }
.product-usp span, .product-usp a { font-size: .88rem; line-height: 1.45; color: #4a4a4a; }
.product-usp a { text-decoration: underline; text-underline-offset: 2px; width: fit-content; }
.product-usp a:hover { color: var(--ink); }
.product-usp .usp-kurz { display: none; }

.product-page__ask { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.product-page__ask:hover { text-decoration: underline; text-underline-offset: 3px; }

.product-info { margin-top: 0; border-top: 0; }
.product-info summary { padding: 17px 0; font-size: .98rem; font-weight: 600; }
.product-info .acc-body > p { margin: 0 0 12px; max-width: 70ch; font-size: .95rem; line-height: 1.65; color: #3d3d3d; }
.product-info .acc-body > p:last-child { margin-bottom: 18px; }

/* Ziehharmonika: Akkordeons und Größentabelle öffnen und schließen weich (::details-content, ohne Skript).
   Browser ohne Unterstützung klappen wie bisher sofort auf. */
:is(.product-info details, .size-guide)::details-content {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .38s cubic-bezier(.3, 0, .2, 1), content-visibility .38s allow-discrete;
}
:is(.product-info details, .size-guide)[open]::details-content { grid-template-rows: 1fr; }
:is(.product-info details > .acc-body, .size-guide > .size-guide__body) { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  :is(.product-info details, .size-guide)::details-content { transition: none; }
}

/* „Passt dazu“ wie das Cross-Selling bei celinasuchy.com: Überschrift mittig, Bilder fast randlos mit wenig Abstand */
.related--cross { max-width: calc(var(--wrap-inner) + 2 * var(--side)); margin-inline: auto; padding: clamp(40px, 5vw, 72px) 8px clamp(48px, 6vw, 88px); }
.related__title { margin: 0 0 clamp(28px, 3.2vw, 48px); text-align: center; font: 600 clamp(1.25rem, 1.05rem + .6vw, 1.7rem)/1.2 var(--disp); letter-spacing: -.01em; }
.related--cross .product-grid { gap: 28px 8px; }

@media (max-width: 1100px) {
  .product-page { grid-template-columns: minmax(0, 1.1fr) minmax(min(340px, 100%), 1fr); }
}
@media (max-width: 820px) {
  .product-page { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 10px; }
  .product-page__visual { margin-inline: calc(-1 * var(--side)); }
  .product-page__media { aspect-ratio: 1; max-height: 74svh; border-radius: 0; }
  .related--cross .product-grid { gap: 22px 6px; }
}
@media (max-width: 480px) {
  /* Wie celinasuchy.com mobil: Auswahl über die volle Breite, Größentabelle als Link darunter */
  /* Handy: Größentabelle bleibt in der Zeile von „Größe wählen“ (Celina 25.10.2026), nur schmaler */
  .product-size-block .size-guide-btn { gap: 6px; padding: 0 8px; }
  /* Infoleiste auch am Handy in einer Zeile mit Trennstrichen, wie bei celinasuchy.com (Celina 25.10.2026); kurze Texte,
     damit die Schrift lesbar groß bleibt (mindestens 14 px) */
  .product-usp { margin-top: 22px; padding: 14px 0; }
  .product-usp li { padding: 0 9px; gap: 3px; }
  .product-usp svg { width: 21px; height: 21px; margin-bottom: 4px; }
  .product-usp strong, .product-usp .usp-info { font-size: .875rem; line-height: 1.25; }
  .product-usp span, .product-usp a { font-size: .875rem; line-height: 1.35; }
  .product-usp .usp-lang { display: none; }
  .product-usp .usp-kurz { display: inline; }
  /* Titel je in einer Zeile: Spalten so breit wie ihr Titel, Rest verteilt */
  .product-usp { grid-template-columns: repeat(3, auto); justify-content: space-between; }
  .product-usp li { padding: 0 8px; }
  .product-usp li:last-child { padding-right: 0; }
  .product-usp strong, .product-usp .usp-info { white-space: nowrap; }
}

/* Überarbeitung: Infospalte wieder bis 560 px; das Bild in seiner früheren Größe (Höhe wie vor der zweiten Kopfzeile),
   die Fläche in den Randfarben des Fotos füllt die restliche Breite, damit es größer wirkt, ohne zu skalieren */
@media (min-width: 821px) {
  .tpl-product { --bild-h: max(480px, calc((100svh - var(--bar-h) - 32px) * .9)); }
  .product-page { grid-template-columns: minmax(0, 1fr) clamp(380px, 44vw, 660px); }
  .product-page__media { aspect-ratio: auto; height: var(--bild-h); max-height: none; }
}
@media (min-width: 821px) and (max-width: 1100px) { .product-page { grid-template-columns: minmax(0, 1fr) minmax(340px, 44%); } }

/* Bild anklickbar: öffnet groß über der Seite (assets/js/bild-zoom.js); ohne Skript öffnet der Link das Foto */
.product-page__zoom { display: flex; justify-content: center; width: 100%; height: 100%; cursor: zoom-in; }
.bild-zoom { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); background: #fff; cursor: zoom-out; }
.bild-zoom img { width: auto; height: 100%; max-width: 100vw; max-height: 100svh; object-fit: contain;
  -webkit-mask-image: var(--maske, linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent)); mask-image: var(--maske, linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent)); }
.bild-zoom__close { position: fixed; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.bild-zoom__close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
body.zoom-is-open { overflow: hidden; }

/* Dritte Angabe bei personalisierbaren Stücken: Ausschluss von Umtausch und Widerruf, gut lesbar mit Link */
.product-usp li > span a { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* Steht jetzt in der Symbolzeile; der Hinweis direkt am Knopf bleibt nur im Schnellkauf */
.product-page .product-buy__final { display: none; }

/* Bild läuft beim Scrollen mit (sticky); Aufklappen rechts verschiebt es nicht, weil es oben verankert ist */
@media (min-width: 821px) {
  .product-page__visual { position: sticky; top: calc(var(--header-h) + 16px); align-self: start; }
}
/* Personalisierung zum Ausklappen; bei einer fehlenden Pflichtangabe öffnet personalize.js den Bereich */
.perso-box { border: 1px solid var(--feld-rand); border-radius: 12px; background: #fff; }
.perso-box > summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; font: 600 1rem/1.3 var(--sans); cursor: pointer; list-style: none; }
.perso-box > summary::-webkit-details-marker { display: none; }
.perso-box > summary::after { content: "+"; font-weight: 400; font-size: 1.3rem; line-height: 1; }
.perso-box[open] > summary::after { content: "−"; }
.perso-box > .perso { margin: 0; padding: 0 18px 20px; border: 0; border-radius: 0; }
.perso-box:has([aria-invalid="true"]) { border-color: #c4473a; }
.perso-box::details-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.3, 0, .2, 1), content-visibility .38s allow-discrete; }
.perso-box[open]::details-content { grid-template-rows: 1fr; }
.perso-box > .perso { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .perso-box::details-content { transition: none; } }
/* Dritte Angabe: kurzer Link statt langem Satz */
.product-usp li > a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* „Auf Bestellung gestickt“: unterstrichen, öffnet ein Pop-up, das weich einblendet (popover, ohne Skript) */
.usp-info { min-height: 0; padding: 0; border: 0; background: none; color: var(--ink); font: 600 .95rem/1.3 var(--sans); text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.usp-info:hover { text-decoration-thickness: 2px; }
.lb-popover {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; margin: auto; padding: clamp(24px, 3vw, 36px);
  border: 0; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .9, .3, 1), overlay .35s allow-discrete, display .35s allow-discrete;
}
.lb-popover:popover-open { opacity: 1; transform: none; }
@starting-style { .lb-popover:popover-open { opacity: 0; transform: translateY(14px) scale(.98); } }
.lb-popover::backdrop { background: rgba(18, 20, 26, 0); transition: background .3s ease, overlay .35s allow-discrete, display .35s allow-discrete; }
.lb-popover:popover-open::backdrop { background: rgba(18, 20, 26, .42); }
@starting-style { .lb-popover:popover-open::backdrop { background: rgba(18, 20, 26, 0); } }
.lb-popover__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.lb-popover__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.lb-popover__bild { display: block; width: 120px; margin: 0 0 6px; }
.lb-popover__bild img { display: block; width: 100%; height: auto; }
.lb-popover h2 { margin: 0 0 16px; padding-right: 36px; font: 700 clamp(1.3rem, 1.15rem + .5vw, 1.6rem)/1.2 var(--disp); letter-spacing: -.01em; }
.lb-popover__liste { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lb-popover__liste li { position: relative; padding-left: 28px; font-size: 1rem; line-height: 1.5; }
.lb-popover__liste li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 14px; height: 8px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .lb-popover, .lb-popover::backdrop { transition: none; } }

/* Aufklappen glatter: kein Sprung durch Innenabstand, Inhalt blendet sanft ein */
.perso-box > .perso { padding: 0 18px; }
.perso-box > .perso::after { content: ""; display: block; height: 4px; }
.perso-box::details-content, :is(.product-info details, .size-guide)::details-content { transition-duration: .42s; transition-timing-function: cubic-bezier(.25, .8, .25, 1); }
@keyframes lb-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.perso-box[open] > .perso > *, .product-info details[open] > .acc-body > *, .size-guide[open] > .size-guide__body > * { animation: lb-auf .42s ease both; }
@media (prefers-reduced-motion: reduce) { .perso-box[open] > .perso > *, .product-info details[open] > .acc-body > *, .size-guide[open] > .size-guide__body > * { animation: none; } }
/* Großes Produktbild auf eigener Ebene: beim Aufklappen rechts nicht jedes Bild neu zeichnen */
.product-page__visual { will-change: transform; }
/* Weiches Schließen (main.js setzt is-zu, schließt nach der Animation) */
:is(.perso-box, .product-info details, .size-guide).is-zu::details-content { grid-template-rows: 0fr; }
@keyframes lb-zu { from { opacity: 1; } to { opacity: 0; transform: translateY(-4px); } }
.perso-box.is-zu > .perso > *, .product-info details.is-zu > .acc-body > *, .size-guide.is-zu > .size-guide__body > * { animation: lb-zu .3s ease both; }

/* Zweite Ansicht (Nacken): Umschalten über versteckte Radio-Knöpfe, Vorschaubilder unten links im Bild */
.ansicht-radio { position: absolute; opacity: 0; pointer-events: none; }
.product-page__zoom--detail { display: none; }
.product-page__visual:has(#ansicht-nacken:checked) .product-page__zoom:not(.product-page__zoom--detail) { display: none; }
.product-page__visual:has(#ansicht-nacken:checked) .product-page__zoom--detail { display: flex; }
.ansicht-wahl { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; z-index: 2; }
.ansicht-wahl label { display: block; width: 52px; aspect-ratio: 52 / 64; border-radius: 6px; overflow: hidden; cursor: pointer; background: #fff; box-shadow: 0 0 0 1px rgba(20,20,20,.12); transition: box-shadow .2s ease; }
.ansicht-wahl img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-page__visual:has(#ansicht-vorne:checked) label[for="ansicht-vorne"],
.product-page__visual:has(#ansicht-nacken:checked) label[for="ansicht-nacken"] { box-shadow: 0 0 0 2px #141414; }
.product-page__visual:has(.ansicht-radio:focus-visible) .ansicht-wahl { outline: 2px solid #141414; outline-offset: 3px; border-radius: 8px; }

/* Farbauswahl (Rohling-Farben): runde Farbpunkte, gewählte Farbe mit Ring */
.farbwahl { border: 0; padding: 0; margin: 0 0 5px; min-width: 0; }   /* Farbe mittig zwischen Preis und Größe: je 17 px */
.farbwahl legend { padding: 0; margin-bottom: 8px; font-size: .92rem; font-weight: 500; }
.farbwahl legend span { font-weight: 400; color: #4b4f55; }
.farbwahl__punkte { display: flex; flex-wrap: wrap; gap: 8px; }
.farbe { position: relative; display: block; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; }
.farbe input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.farbe__punkt { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--farbe); box-shadow: inset 0 0 0 1px rgba(20,20,20,.18); transition: box-shadow .15s ease; }
.farbe input:checked + .farbe__punkt { box-shadow: inset 0 0 0 1px rgba(20,20,20,.18), 0 0 0 2px #fff, 0 0 0 3.5px #141414; }
.farbe input:focus-visible + .farbe__punkt { outline: 2px solid #141414; outline-offset: 4px; }
.farbwahl__foto { margin: 8px 0 0; font-size: .8rem; color: #6b6f75; }

/* Extrawunsch (product.html, shop.js): Kasten wie die Personalisierung, Textfeld mit Zähler, Hinweis klein darunter;
   im Warenkorb als eigene Zeile unter der Personalisierung, Umbrüche bleiben sichtbar */
.wunsch-box > summary { font-weight: 600; }
.wunsch-box__optional { margin-left: 6px; margin-right: auto; font-weight: 400; color: #6b6f75; }
.wunsch-box > .wunsch { gap: 6px; }
.wunsch .product-field { font-weight: 500; }
.wunsch-box > .wunsch::after { height: 14px; }
/* Der Zähler steht wie bei den Textfeldern unten rechts im Feld (shop.css), der Text läuft nicht darunter */
.wunsch textarea {
  display: block; width: 100%; min-height: 96px; padding: 11px 13px 28px; resize: vertical;
  border: 1px solid var(--feld-rand); border-radius: 10px; background: #fff; color: var(--ink); font: 400 16px/1.45 var(--sans);
}
.wunsch textarea:is(:focus, :focus-visible) { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20, 20, 20, .08); }
.wunsch__hinweis { margin: 0; font-size: .82rem; line-height: 1.45; color: #6b6f75; }
.cart-line__perso li { white-space: pre-line; overflow-wrap: anywhere; }

/* Produktdetails: Angaben des Rohlings als ruhige Liste (rohlinge.py DETAILS), Begriffe links, am Handy darüber */
.produkt-details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; margin: 14px 0 0; font-size: .95rem; line-height: 1.5; }
.produkt-details dt { font-weight: 600; color: var(--ink); }
.produkt-details dd { margin: 0; color: #3d3d3d; }
.produkt-details ul { margin: 0; padding-left: 18px; }
.produkt-details li + li { margin-top: 2px; }
.product-info .acc-body > .produkt-details__quelle { margin: 16px 0 18px; font-size: .94rem; color: #6b6b6b; }
@media (max-width: 560px) {
  .produkt-details { grid-template-columns: 1fr; gap: 2px; }
  .produkt-details dd + dt { margin-top: 10px; }
}
/* Business-Preise (Erst- und Folgepreis, Mengenrabatt), Produkt- und Kategorieseite, teile/business-preise.html */
.business-preise { display: grid; gap: 4px; margin: 14px 0 0; font-size: .95rem; line-height: 1.5; color: #3d3d3d; }
.business-preise p { margin: 0; }
.business-preise a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.area-head .business-preise { max-width: 62ch; margin: 0 0 16px; }
/* Business: „Günstiger ab 2 Stück …“ unter dem Preis als hellgrüne Kachel (Celina 08.11.2026: soll sofort auffallen),
   öffnet die Sonderpreise im Pop-up */
.preis-hinweis-rahmen { margin: 14px 0 0; container-type: inline-size; }
.preis-hinweis { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; margin: 0; padding: 11px 12px;
  border: 1px solid #c9e7d3; border-radius: var(--r); background: #e7f6ec; color: #1b5234;
  font: 600 .95rem/1.35 var(--sans); text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.preis-hinweis span { flex: 1; min-width: 0; }
.preis-hinweis svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.preis-hinweis .preis-hinweis__pfeil { width: 15px; height: 15px; stroke-width: 1.9; }
/* Immer eine Zeile (Celina 08.11.2026): die Schrift wird nur so klein, wie die Kachel es verlangt (Text ≈ 22 × Schriftgröße,
   dazu 74 px für Ränder, Symbole und Abstände); am Computer bleibt sie bei .95rem, auf einem 390er Handy etwa 13 px */
@supports (width: 1cqi) {
  .preis-hinweis { font-size: min(.95rem, calc((100cqi - 78px) / 22.4)); }
  .preis-hinweis span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.preis-hinweis:hover { background: #daf0e2; border-color: #b4dcc2; }
.preis-hinweis:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#mengenpreise .business-preise p { margin: 0 0 10px; font-size: 1rem; line-height: 1.55; }
/* Mengenpreis ab 2 Stück: normaler Einzelpreis durchgestrichen, daneben der günstigere Preis pro Stück (mengenpreis.js) */
.product-page__price .preis-alt { color: #8a8d92; font-weight: 400; }
.product-page__price .preis-menge { font-weight: 600; }
/* Belegte Materialeigenschaft unter der Infoleiste */
.product-material-zeile { margin: 12px 0 0; font-size: .95rem; font-weight: 600; line-height: 1.5; color: var(--ink); }

/* Link vom bestickten Stück auf denselben Rohling ohne Stickerei (Celina 05.11.2026) */
.product-roh-link { margin: 6px 0 0; font-size: .95rem; line-height: 1.5; }
.product-roh-link a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Unbestickt: ohne Hinweis unter den Produktdetails braucht die Liste selbst Abstand zur nächsten Zeile */
.acc-body > .produkt-details:last-child { margin-bottom: 16px; }