/* ========== TOPBAR  ========== */
/* Topbar Layout 

clamp - werte: 
alpha = 100·(vmax − vmin)/(wmax − wmin) (→ Koeffizient vor vw)
beta = vmin − alpha·(wmin/100) (→ px-Offset)
Komplett: clamp(4vw, calc(alpha vw + beta px), 9vw)

*/

@font-face {font-family: 'brandon grotesque';src: url('/_/fonts/Brandon-Grotesque-Web-Regular.woff2') format('woff2');font-weight: 400;  font-style: normal;font-display: swap;}
@font-face {font-family: 'brandon grotesque';src: url('/_/fonts/Brandon-Grotesque-Web-Bold.woff2') format('woff2');font-weight: 700;font-display: swap;}
@font-face {font-family: 'palast web';src: url('/_/fonts/Palast-Web-Display-Regular.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap;}
@font-face {font-family: 'palast web';src: url('/_/fonts/Palast-Web-Display-Light-Italic.woff2') format('woff2');font-weight: 300;font-style: italic;font-display: swap;}


.hidden{display:none !important;}
.wr-topbar a { color:#fff; text-decoration:none; }
@media (max-width:799px){ 
.wr-topbar { background:#757575; color:#fff; font-size:.92rem;width: 98%;margin:0 auto; }
.wr-topbar__inner { display:flex; justify-content:space-between; align-items:center;gap:1rem; padding:0rem .65rem; white-space:nowrap;height: 12px;}
.wr-topbar__inner ul {display: none;}
img.xs-topbar {display: block; width: 125px;} 
.wr-topbar__right { font-family: var(--font-sans); font-size:8px; line-height: 20px; letter-spacing: 0.0em;display:flex; gap:4px; margin:0; padding:0; list-style:none; }
}
@media (min-width:800px){
.wr-topbar { background:#4f4a4a; color:#fff; font-size:.92rem;width: 98%;margin:0 auto; }
.wr-topbar__inner { display:flex; justify-content:space-between; align-items:center;gap:1rem; padding:0rem .65rem; white-space:nowrap;height: 18px;}
.wr-topbar__inner ul {display: flex;list-style: none;} 
img.xs-topbar {display: none; } 
.wr-topbar__list li+li::before, .wr-topbar__right a+a::before { content:""; display:inline-block;width:6px; height:6px;border-radius:50%;background:#fff; margin:0 13px 0 4px; transform:translateY(-2px);}
.wr-topbar__list, .wr-topbar__right {  font-family: var(--font-sans); font-size:12px; line-height: 12px;letter-spacing: 0.08em;display:flex; gap:18px; margin:0; padding:0; list-style:none; }

}


@media (max-width:599px){ .wr-topbar__left {display:none;} }

/* HEAD: 3-Spalten-Grid => Mitte ist Brand fr bedeutet friction und 2fr zwei Teile des zur Verfügung stehenden contents*/
.wr-head{ padding-block: clamp(24px,5vw,90px); width: 99%;}
.wr-head.checkout { padding-block: clamp(24px, 4vw, 40px); }

.wr-head__inner{display:grid; grid-template-columns: auto 1fr auto; align-items:center;margin-left: clamp(4px, calc(4px + (36 * (100vw - 375px) / 2125)), 40px);}

.wr-brand{  grid-column:1;justify-self:start;display:flex;flex-direction:column;align-items:center;text-align:center;color:inherit;}
a.wr-brand {  text-decoration:none; }
.wr-brand__title {font-family: var(--font-sans); font-weight: var(--fw-bold);font-size: clamp(17px,calc(17px + (34 * (100vw - 375px)/2125)),51px);letter-spacing: 0.18em;display:block;line-height:1.2; margin:0;}
.wr-brand__since {display:block;line-height:1.2; margin:0;}

.wr-brand__since { display:flex; align-items:center; gap:.6rem;font-size: clamp(6px,calc(6px + (5 * (100vw - 375px) / 2125)),11px); letter-spacing: 0.4em;margin: 0 clamp(4p calc(4px + (4 * (100vw - 375px) / 2125)), 8px) 0 0;}
.wr-brand__since .line{ flex:1 1 48px; height:0; border-top:1px solid #000; width:calc(22px + (78 * (100vw - 375px) / 2125));}
.wr-brand__since .txt{ white-space:nowrap; color:#000; }

.wr-utility-wrap{grid-column:3;justify-self:end;}
.wr-utility{display:flex; align-items:center; gap:14px; justify-content:flex-end;}
a.wr-utility__user {
  
  display: block;
  text-align: center;
  font-family: var(--font-sans);
  font-size: clamp(9px, calc(9px + (6 * (100vw - 375px) / 2125)), 15px);
  line-height: 1.2;
  color: #333;
  text-decoration: none;
  padding-top: 6px;
  margin-top: 4px;
  position: relative;
}
a.wr-utility__user:hover { color: #8b0000; }
a.wr-utility__user::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  border-top: 1px solid #999;
}


#logout-form { display:inline; margin:0; }
#logout-form .logout-link {padding:0;border:0;background:none;cursor:pointer;font-family: var(--font-sans);
font-size: clamp(9px, calc(9px + (6 * (100vw - 375px) / 2125)), 15px);line-height: 12px;}
/* alt entfernt */

.wr-utility__btn { display:flex; align-items:center; gap:.4em; color:#333; text-decoration:none; 
font-family: var(--font-sans);font-size: clamp(9px, calc(9px + (6 * (100vw - 375px) / 2125)), 15px); line-height:12px; }
.wr-utility__btn .ico { width:clamp(12px,calc(12px + (18 * (100vw - 375px) / 2125)), 30px); height:clamp(12px,calc(12px + (18 * (100vw - 375px) / 2125)), 30px); display:inline-block; }

/* Warenkorb-Bobble */
.wr-utility__btn.cart { position:relative; }
.wr-utility__btn.cart .bobble {position:absolute; top:-25px; right:45px;min-width:26px; height:26px; padding:0 0px;border-radius:999px; background:#c62828; color:#fff;  font-size:.75rem; line-height:27px; text-align:center; font-weight:600;box-shadow:0 0 0 2px #fff;}

/* =========================
NAV-TOP – Grundlayout
========================= */
.navigation {position: relative; }
.nav-top { position: relative;  }
.nav-top svg { position: relative; z-index: 1; display:block; width:100%; height:auto; }
.nav-top .menu-overlay {position: absolute; inset: 0;z-index: 3;pointer-events: auto;}
/* Desktop-Ornament */
#nav-top-xs{ margin-top:12px;  display: block; }

.menu-overlay { position:absolute; inset:0; container-type:inline-size; } /* cqw-Referenz */
.menu-overlay .mitem {font-family: var(--font-sans); font-weight: bold; justify-self:center; padding:.25rem .08rem;}

/* =========================
NAV-TEXT über Ornament
========================= */

.menu-overlay a {font-family: var(--font-sans); font-weight: bold;position:absolute;  top: clamp(-27px, calc(-0.37647cqw - 17.58824px), -19px); font-size: clamp(11px, calc(0.658823vw + 8.529412px), 25px);  line-height:1.2;  color: #000; text-decoration:none;}
.menu-overlay a:hover { text-decoration: underline; }
@media (max-width:599px){ .menu-overlay a { font-weight:500;  } }
@media (min-width:600px){ .menu-overlay a { font-weight:600;  } }


/* -------------- Horizontale Position des Main Menu --------------*/
#m-wein { left: clamp(5.2%, calc(11.1471vw - 21.1765px), 9.9%);} #m-winzer { left: clamp(22.9%, calc(31.026cqw - 20.654982px), 30.0%); } #m-rebsorten { left: clamp(45.03%, calc(55.03cqw - 20.65px), 52.9%); } #m-kontakt { left: clamp(57.25%, calc(81.03cqw - 14.65px), 80.21%); }

@media (max-width: 599px) {.menu-overlay a.mitem { font-size: 0.7rem; } #m-wein { transform: translateX(6px); } #m-winzer {  transform: translateX(5px); } #m-rebsorten { transform: translateX(-6px); } #m-kontakt { transform: translateX(-4px);  } }

/* ====== ORNAMENT Linien   ==================== */

@media (max-width:599px){ 
/* Ornament-Gruppen Linien verbinden Menu */
#nav-top-xs svg #ecken_5 *,#nav-utility svg #linien{stroke:#e9e6da !important;stroke-width:0.5 !important;fill:none !important;vector-effect:non-scaling-stroke; }
#nav-top-xs svg #wein-ornament *, #nav-top-xs svg #winzer-ornament *,#nav-top-xs svg #regionen-ornament *, #nav-top-xs svg #rebsorten-ornament *{
stroke:#c8c6bc !important;stroke-width:0.4 !important;fill:none !important;vector-effect:non-scaling-stroke;}
/* =========================
ORNAMENT – «gewählte» Linien dicker & rot
========================= */
#nav-top-xs.winzer svg #winzer-ornament *, #nav-top-xs.wein svg #wein-ornament *,#nav-top-xs.regionen svg #regionen-ornament *,
#nav-top-xs.rebsorten svg #regionen-ornament   *{ stroke:#ba1616 !important; stroke-width:0.4 !important; }
}
@media (min-width:600px){ 
/* Ornament-Gruppen Linien verbinden Menu */
#nav-top-xs svg #ecken_5 *,#nav-utility svg #linien{stroke:#e9e6da !important;stroke-width:0.6 !important;fill:none !important;vector-effect:non-scaling-stroke; }
#nav-top-xs svg #wein-ornament *, #nav-top-xs svg #winzer-ornament *,#nav-top-xs svg #regionen-ornament *, #nav-top-xs svg #rebsorten-ornament *{
stroke:#c8c6bc !important;stroke-width:0.6 !important;fill:none !important;vector-effect:non-scaling-stroke;}
/* =========================
ORNAMENT – «gewählte» Linien dicker & rot
========================= */
#nav-top-xs.winzer svg #winzer-ornament *, #nav-top-xs.wein svg #wein-ornament *,#nav-top-xs.regionen svg #regionen-ornament *,
#nav-top-xs.rebsorten svg #regionen-ornament *, #nav-top-xs.kontakt svg #rebsorten-ornament * { stroke:#ba1616 !important; stroke-width:0.9 !important; }
}

/* Erste Überschrift nach dem Header: kleiner Startabstand */
main h1:first-child, main h2:first-child{ margin-top:.4rem; }

/* ===========    FOOTER ==================== */

.footer {background: #f4f4f4;color: #2b2623;border-top: 1px solid #e4e1d9;}
.footer__inner {max-width: 1200px;margin: 0 auto;padding: 28px 16px 36px;}
.footer__grid {display: grid; grid-template-columns: 1fr; gap: 24px;}
.footer__col { min-width: 0; }
.footer__title {margin: 0 0 12px; font-weight: var(--fw-bold); letter-spacing: .03em;text-transform: uppercase; line-height: 1.2; font-size: 18px;}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__item { margin: 10px 0; }
.footer a { color: #2b2623; text-decoration: none; }
.footer a:hover, .footer a:focus { text-decoration: underline; text-underline-offset: 2px; }
.footer__text { margin: 10px 0; line-height: 1.6; font-size: 15px; }
.footer__badge { display: inline-block; margin: 10px 0 6px; line-height: 0; }
.footer__badge img { display: block; height: 28px; width: auto; }
.footer__bottom { margin-top: 20px; border-top: 1px solid #e4e1d9; }

/* XS-Topbar vor Footer (mobil) */
.topbar-xs--footer {
background:#fff7cc; color:#2b2623; border-top:1px solid #f0e8b3; border-bottom:1px solid #f0e8b3;
font-size:13px;
}
.topbar-xs--footer .topbar__inner { max-width:1200px; margin:0 auto; padding:8px 16px; }
.topbar-xs--footer .topbar__row { display:flex; align-items:center; gap:10px; }
.topbar-xs--footer .topbar__icon { line-height:0; }
.topbar-xs--footer .topbar__text { line-height:1.4; }

/* ab Tablet/Desktop */
@media (min-width:768px){ .footer__inner { padding: 40px 20px 48px; }
.footer__grid { grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
.footer__title { font-size: 22px; }
.footer__text  { font-size: 16px; }
.footer__badge img { height: 32px; }
.topbar-xs--footer { display:none; }
}




/* ===== Konto > Rechnungen (gekapselt) ===== */
#acc-invoices {max-width: 700px;margin: 0 auto;padding: 0 12px;font-family: inherit;}
#acc-invoices > header h2 {margin: 0 0 10px;}

#acc-invoices article { margin: 18px 0 28px; }
#acc-invoices article .head{display: flex; justify-content: space-between;  align-items: baseline;  gap: 12px;}
#acc-invoices article .head h3{  margin: 0;  font-size: clamp(16px, 2.6vw, 20px);}
#acc-invoices article .head a{  text-decoration: none;  border-bottom: 1px solid #1d6b2b;}
#acc-invoices hr{  border: 0;  border-top: 3px solid #1d6b2b;   margin: 10px 0 14px;}
#acc-invoices table{    border-collapse: collapse;}
#acc-invoices thead th{  font-weight: var(--fw-bold);  padding: 6px 4px;  font-size: clamp(10px, 1.3vw, 12px);}

/* Zellen: mobile-first, kompakt; alle Texte gleiche Schrift  */
#acc-invoices tbody td{padding: 6px 4px;font-size: clamp(10px, 1.4vw, 12px);line-height: 1.3;vertical-align: top;}
/* Spaltenausrichtung: # (1), Produkt (2), Anz (3), Preis (4), Summe (5) */
#acc-invoices tbody td:nth-child(1),
#acc-invoices thead th:nth-child(1){ text-align: center; width: 42px; }

#acc-invoices tbody td:nth-child(3),#acc-invoices thead th:nth-child(3),#acc-invoices tbody td:nth-child(4),
#acc-invoices thead th:nth-child(4),#acc-invoices tbody td:nth-child(5),#acc-invoices thead th:nth-child(5){ text-align: center;white-space: nowrap;}
#acc-invoices tbody td:nth-child(2) small{display: block;font-variant: small-caps;letter-spacing: 0.3em;opacity: .85;  margin-top: 2px;font-size: clamp(10px, 1.2vw, 12px);}
#acc-invoices article footer{margin-top: 10px;padding-top: 8px;border-top: 2px solid #b08a2e;display: flex;justify-content: flex-end;ap: 8px; }
#acc-invoices article footer span {min-width: 110px;text-align: center;display: inline-block; }

/* Hinweis-Zeile (Rechnung offen …) */
#acc-invoices .hint{ margin: 6px 0 0; }

/* etwas mehr Luft auf größeren Screens */
@media (min-width: 760px){ #acc-invoices tbody td{ padding: 8px 6px; } }


/* ====== Weine Raster – gekapselt ====== */

#acc-wines header.wr-wein-header h1 { margin: 40px 0 50px 0; } 
div.clearer-wein { margin: 35px 0 45px 0; } 
#acc-wines { max-width: 1600px; margin: 0 auto; padding: 8px 5px; }
#acc-wines .accw-head h2 { margin: 35px 0 35px 0; }
#acc-wines .accw-head p { margin: 0 0 16px; }

/* Grid */
#acc-wines .accw-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px){ #acc-wines .accw-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1040px){ #acc-wines .accw-grid { grid-template-columns: repeat(3,1fr); } }

/* Karte */
#acc-wines .accw-card { display:grid; grid-template-columns: 80px 1fr; gap:12px;box-shadow: 1px 1px 5px 1px rgba(238, 238, 234, 0.6);border: 1px solid #e5e5e5; border-radius: 6px; padding: 14px 0 5px 0; background: #fff; }
#acc-wines .accw-winzer { font-family: var(--font-sans);letter-spacing: var(--ls-0);font-size: clamp(11px, 0.75vw + 2px, 13px);opacity: .9;}
#acc-wines .accw-title { margin: 6px 0 10px; font-size: clamp(16px,2.2vw,20px); line-height: 1.2; }
#acc-wines .accw-kopfz { font-family: var(--font-sans);letter-spacing: var(--ls-0);font-size:clamp(11px, 0.75vw + 2px, 12px);opacity: .9;}
#acc-wines .accw-desc { font-family: var(--font-serif);margin: 6px 0 10px; font-style:italic;letter-spacing: 0.08em; font-size: 11px; line-height: 20px; color: #5b5b5b; }
#acc-wines .accw-trauben { font-family: var(--font-sans);letter-spacing: var(--ls-0);font-size:clamp(11px, 0.75vw + 2px, 12px);opacity: .9;}
#acc-wines .accw-mehr a { margin: 6px 0 10px; font-style:italic;letter-spacing: 0.08em;  font-size: 10px; color: #1577ad !important;  }

#acc-wines .accw-prices {margin: 15px 0 25px 0;}
#acc-wines .accw-preis { font-family: var(--font-sans); font-size: clamp(16px,2.2vw,20px);font-weight: bold;letter-spacing: var(--ls-0);display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: end; }
#acc-wines .accw-gekauft { margin: 8px 0 12px; font-variant: small-caps;letter-spacing: .087em;font-size:clamp(11px, 0.75vw + 2px, 13px);opacity: .9;}
#acc-wines .accw-gesetzl { margin: 8px 0 12px; letter-spacing: .0em;font-size:clamp(8px, 0.75vw + 2px, 10px);opacity: .9;}
#acc-wines .accw-gesetzl a { color: #1577ad !important; }

/* Actions */
#acc-wines .accw-actions { display: flex; gap: 10px; align-items: center; }
#acc-wines .accw-qtychip { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #6aa149; background: #fff; font-weight: var(--fw-bold);}
#acc-wines .accw-add { font-family: var(--font-sans);font-weight: var(--fw-regular);letter-spacing: var(--ls-008);font-size: clamp(11px, 0.75vw + 2px, 12px);flex: 1; padding: 10px 14px; border-radius: 5px; border: 0; background: #f4f4f4; color: #000;  }

/* acc-wines soll account wines heissen.

Kartenlayout: mit Bild = 2 Spalten, ohne Bild = Vollbreite */

#acc-wines .accw-card.accw--noimg{grid-template-columns: 1fr;} /* kein Bild → volle Breite */
/* Basis */
.accw-figure img.wr-bottle {display:block;width:auto;height:auto;max-height:none;object-fit:contain;visibility:visible;}
/* Der Container darf das Ergebnis nicht "korrigieren" */
#acc-wines .wein-raster-body { min-width: 0; } /* für Text-Overflow-Sicherheit */

#acc-wines .accw-figure img { display:block; width:100%; height:auto; object-fit: contain;margin: 0 auto;}
#acc-wines .accw-flip-inner {position: relative;transform-style: preserve-3d;transition: transform .6s ease;}
#acc-wines .accw-flip-front, #acc-wines .accw-flip-back {  backface-visibility: hidden;  position: absolute;  inset: 0;}
#acc-wines .accw-flip-back {  transform: rotateY(180deg);}
#acc-wines .accw-figure.is-flipped .accw-flip-inner { transform: rotateY(180deg);}
/* wein figure */
#acc-wines .accw-figure {position: relative;display: block;margin: 0;overflow: visible !important;}
#acc-wines .accw-flip-inner {transition: transform 0.6s;transform-style: preserve-3d;position: relative;}
#acc-wines .accw-flip-inner.is-flipped {transform: rotateY(180deg);}

#acc-wines .accw-flip-front, .accw-flip-back {position: absolute;top: 0; left: 0; height: 100%;backface-visibility: hidden;}
#acc-wines .accw-flip-back { transform: rotateY(180deg);}

/* Zoom-Button: Lupe zentriert über Flasche */
#acc-wines .accw-zoom-btn {position: absolute;inset: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: rgba(0,0,0,0.05);border: none;color: rgba(0,0,0,0.3);cursor: pointer;font-size: 2.5rem;z-index: 2;opacity: 0;transition: opacity 0.2s ease;}
#acc-wines .accw-figure:hover .accw-zoom-btn {opacity: 1;}
#acc-wines .accw-zoom-btn:hover {background: rgba(0,0,0,0.1);color: rgba(0,0,0,0.5);}

#acc-wines .accw-qtychip { border:1px solid #bdbdbd; color:#1577ad; background:#f4f4f4;}
#acc-wines .accw-qtychip:hover { color:#FFF; background:#8b8f69;}

#acc-wines .accw-qtychip.is-in-cart { border-color:#3d7f3d; color:#fff; background:#3d7f3d;}

/* Karte visuell ankern, solange der Mengen-Picker offen ist */
/* Karte wird sanft markiert, solange der Mengen-Picker offen ist */
#acc-wines .accw-card.is_active { outline: 2px solid #5c9e18;outline-offset: 2px;filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));}
#acc-wines .accw-card.is_active .accw-qtychip { border-width: 2px;}
#acc-wines .accw-foot {font-size: clamp(12px,1.5vw,14px); color: #333; }
#acc-wines .accw-foot span {font-size: 11px; text-align:right;}

#acc-wines .accw-card.accw-card--detail {width: 410px;display:grid; grid-template-columns: 110px 300px; }
#acc-wines .accw-card.accw-card--detail {margin: 0 2rem 1rem 0; }
#acc-wines .accw-card.accw-card--detail .accw-add { flex: none; width: 170px !important; } 


@media (min-width: 950px){
#acc-wines .accw-card { display:grid; grid-template-columns: 110px 1fr; gap:12px;box-shadow: 1px 1px 5px 1px rgba(238, 238, 234, 0.6); }
#acc-wines .accw-card.accw-card--detail {float: left; margin: 0 2rem 1rem 0;width: 345px;display:grid; grid-template-columns: 110px 200px; }
#acc-wines .accw-body {width: 90%;}
#acc-wines .accw-card.accw-card--detail .accw-add { flex: none; width: 150px !important; } 

}



/* ===========================
DETAIL – eigene Kapsel
=========================== */

.wein-detail {margin: 75px 0 0 0px; }
.wein-detail .accw-card--detail {display: grid;grid-template-columns: 110px 275px 1fr;gap: 24px;max-width: 1200px;margin: 0 0 0 40px;padding: 0 0 20px 0; }
.wein-detail .accw-card--detail.accw--noimg {display: grid;grid-template-columns: 375px 1fr;gap: 24px;max-width: 1200px;margin: 0 0 0 40px;padding: 0 0 20px 0; }

.wein-detail .accw-desc--long.xs {display: none;}
.wein-detail .accw-desc--long.md {display: grid;}


@media (max-width: 768px) {
.wein-detail .accw-desc--long.xs {display: grid; margin:0 0 0 10px; }
.wein-detail .accw-desc--long.md {display: none;}

.wein-detail .accw-card--detail {grid-template-columns: 110px 1fr;text-align: left;margin: 0 0 0 0;gap:0px;}
.wein-detail .accw-card--detail figure {margin: 0 auto 16px auto;}
.wein-detail .accw-card--detail.accw--noimg {margin-left: 0;grid-template-columns: 1fr;}
.wein-detail .accw-figure {}

.wein-detail .accw-desc--long {margin: 0 0 0 0;}


}

.wein-detail .accw-figure {width: 160px;}
.wein-detail .accw-body {font-family: var(--font-sans);}
.wein-detail .accw-winzer {font-size: 14px;opacity: .85;}
.wein-detail .accw-title {margin: 6px 0 12px;font-size: clamp(20px, 3vw, 32px);line-height: 1.2;}
.wein-detail .accw-kopfz {font-size: 14px;opacity: .85;margin-bottom: 10px;}
.wein-detail .accw-desc {font-family: var(--font-serif);font-style: italic;font-size: 15px;line-height: 1.55;margin: 10px 0 16px;}
.wein-detail .accw-trauben {font-size: 14px;margin-bottom: 18px;}
.wein-detail .accw-usp {margin: 12px 0 18px;}
.wein-detail .accw-preis {font-size: 22px;font-weight: bold;}

.wein-detail .accw-actions { display: flex;gap: 12px; margin: 18px 0 20px;}
.wein-detail .accw-qtychip { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #6aa149; background: #fff; font-weight: var(--fw-bold);}
.wein-detail .accw-qtychip { border:1px solid #bdbdbd; color:#1577ad; background:#f4f4f4;}
.wein-detail .accw-qtychip:hover { color:#FFF; background:#8b8f69;}


.wein-detail .accw-add { font-family: var(--font-sans);font-weight: var(--fw-regular);letter-spacing: var(--ls-008);font-size: clamp(11px, 0.75vw + 2px, 12px);flex: 1; padding: 10px 14px; border-radius: 5px; border: 0; background: #f4f4f4; color: #000;  }

.wein-detail .accw-gesetzl {font-size: 13px; opacity: .9; margin-top: 14px;}
.wein-detail .accw-desc--long { max-width: 900px; margin: 0px 0 0 60px;}

/* ===============================
DETAILSEITE – Flip & Zoom
vollständig isoliert unter .wr-detail
=============================== */

.wein-detail .accw-figure {position: relative;display: block;margin: 0;overflow: visible !important;}
.wein-detail .accw-flip-inner {position: relative;transform-style: preserve-3d;transition: transform .6s ease;}
.wein-detail .accw-flip-front {position: absolute;inset: 0;backface-visibility: hidden;}
.wein-detail .accw-flip-back {position: absolute;inset: 0;backface-visibility: hidden;transform: rotateY(180deg);}
.wein-detail .accw-figure.is-flipped .accw-flip-inner {transform: rotateY(180deg);}

/* ------- Buttons ------- */

.wein-detail .accw-flip-btn {position: absolute;top: -14px;left: 65px;width: 1.3rem;height: 1.3rem;border-radius: 50%;background: #5e5959;border: 0.5px solid #eec05b;color: #f9fdff;cursor: pointer;font-size: 1rem;line-height: 1;padding: 0 0px 0px 1px;z-index: 2;}
.wein-detail .accw-flip-btn:hover {background: #c2d034;}

/* Zoom-Button: Lupe zentriert über Flasche (Detail) */
.wein-detail .accw-zoom-btn {position: absolute;inset: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: rgba(0,0,0,0.05);border: none;color: rgba(0,0,0,0.3);cursor: pointer;font-size: 3rem;z-index: 2;opacity: 0;transition: opacity 0.2s ease;}
.wein-detail .accw-figure:hover .accw-zoom-btn {opacity: 1;}
.wein-detail .accw-zoom-btn:hover {background: rgba(0,0,0,0.1);color: rgba(0,0,0,0.5);}

/* ------- Bild ------- */

.wein-detail .wr-bottle {height: auto;max-height: none;object-fit: contain;}



/* Mengen-Picker (Popover) */
#acc-qtypicker[hidden] { display: none; }
#acc-qtypicker { position: fixed; inset: 0; display: grid; place-items: center; z-index: 2; }
#acc-qtypicker .accw-popover__panel {  width: min(90vw, 440px); background: #fff; border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.25); padding: 16px; }
#acc-qtypicker .accw-grid-presets { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 8px 0 12px; }
#acc-qtypicker .accw-grid-presets button { padding: 14px 0; font-size: 20px; font-weight: var(--fw-bold); border: 1px solid #ddd; border-radius: 6px; background: #fff; }
#acc-qtypicker .accw-or { background: #767d67; color: #fff; margin: 6px -16px 10px; padding: 8px 16px; font-weight: var(--fw-bold); }
#acc-qtypicker .accw-free span { display: block; font-size: 12px; margin-bottom: 4px; }
#acc-qtypicker .accw-free input {  padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; }
#acc-qtypicker .accw-popover__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
#acc-qtypicker .accw-btn { padding: 8px 12px; border-radius: 6px; border: 1px solid #ccc; background: #fff; }
#acc-qtypicker .accw-btn--primary { border-color: #6aa149; background: #6aa149; color: #fff; }

/* Sidecart (rechte Seitenleiste) */
#acc-sidecart { position: fixed; inset: 0; pointer-events: none;  }
#acc-sidecart .accw-sidecart__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s; }
#acc-sidecart .accw-sidecart__panel {
    position: absolute;
    top: 0;
    left: 10%;
    height: 100dvh;
    width: min(92vw, 720px);
    background: #fff;
    transform: translateX(100%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -12px 0 32px rgba(0,0,0,.2);
    z-index: 3;
    overflow: hidden;
}
#acc-sidecart .accw-sidecart__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#acc-sidecart[aria-hidden="false"] { pointer-events: auto; }
#acc-sidecart[aria-hidden="false"] .accw-sidecart__panel { transform: translateX(0); }
#acc-sidecart[aria-hidden="false"] .accw-sidecart__backdrop { opacity: 1; }

#acc-sidecart .modal-header,
#acc-sidecart .accw-sidecart__head { display:flex; justify-content: space-between; align-items: center; padding: 14px; border-bottom: 1px solid #eee; }
#acc-sidecart .accw-close { background: none; border: none; font-size: 24px; line-height: 1; }
#acc-sidecart .modal-body,
#acc-sidecart .accw-sidecart__body { padding: 12px 14px; overflow-y:auto; flex:1 1 auto; min-height:0; }
#acc-sidecart .modal-footer,
#acc-sidecart .accw-sidecart__foot { border-top: 1px solid #eee; padding: 12px 14px; flex-shrink:0; background:#fff; }
#acc-sidecart .accw-actions-line { display:flex; gap: 8px; margin-top: 10px; }
#acc-sidecart .accw-btn { padding: 8px 12px; border-radius: 6px; border: 1px solid #ccc; background: #fff; }
#acc-sidecart .accw-btn--primary { border-color: #6aa149; background: #6aa149; color:#fff; }
#acc-sidecart .accw-legal { font-size: 12px; }

#acc-sidecart .accw-line { display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; border-bottom:1px solid #eee; }
#acc-sidecart .accw-line__title small{ font-variant:small-caps; letter-spacing:.2em; opacity:.8; }
#acc-sidecart .accw-line__price{ text-align:right; font-weight:600; }


.wr-zoom-overlay {position: fixed;inset: 0;background: rgba(60,60,60,0.85);display: flex;justify-content: center;align-items: center;z-index: 9999;cursor: zoom-out;}
.wr-zoom-inner {position: relative;max-width: 90vw;max-height: 90vh;}
.wr-zoom-flip {  top:2rem;right:6rem;width:2rem;height:2rem;border:0;border-radius:999px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);cursor:pointer; font-size:1.25rem;line-height:1;order: 2;}
.wr-zoom-flip:hover {color: #c13d2e;}
.wr-zoom-img {max-width:90%; max-height:90%;cursor:grab;transition:transform .1s ease;transform: translateY(-15vh);z-index:2;}
.wr-zoom-bg {position: absolute;width: 1000px;height: 2000px;background: #fff;border-radius: 10px;box-shadow: 0 0 50px rgba(0,0,0,0.4);}
.wr-zoom-btns {  position: absolute;top: 1.5rem;right: 1.5rem;display: flex;flex-direction: column;align-items: flex-end;gap: 0.8rem;z-index: 3000;}

.wr-zoom-close { order: 1; top:2rem;right:6rem;}
.wr-zoom-flip  { order: 2; }

.wr-zoom-zoomgroup {order: 3;display: flex;flex-direction: column;align-items: center;gap: 0.5rem;}

/* Buttons: Grundstil */
.wr-zoom-btns button { background: #88a63b;color: #fff;border: none;border-radius: 50%;width: 3.4rem;height: 3.4rem;display: flex;align-items: center;
justify-content: center;cursor: pointer;box-shadow: 0 2px 6px rgba(0,0,0,0.3);transition: background 0.2s;font-size: 1.4rem;line-height: 1;}
.wr-zoom-btns button:hover { background: #cd643c; }
.wr-zoom-in, .wr-zoom-out { background: #6a3d38; font-size: 1.6rem; }
.wr-zoom-close { background: #fff; color: #3a2d1e; font-weight: bold; font-size: 1.8rem; }



/* ================== ACC SIDEcart – scoped ================== */
#acc-sidecart .modal-body {
  padding: 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100dvh - 80px);
}
#acc-sidecart .accw-sidecart__rows {
  padding-bottom: 10px;
}
#acc-sidecart .accw-foot {
  border-top: 1px solid #eee;
  padding: 14px 0 150px;
  margin-top: 10px;
}
#acc-sidecart .acc-cart-actions {
  margin-top: 10px;
}
#acc-sidecart .acc-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  text-align: center;
}
#acc-sidecart .acc-btn--primary {
  background: var(--color-gruen, #6aa149);
  color: #fff;
  border: 1px solid var(--color-gruen, #6aa149);
}
#acc-sidecart .acc-btn--primary:hover {
  background: #5a9139;
}

/* Landscape Mobile: Warenkorb oben starten */
@media (max-height: 500px) and (orientation: landscape) {
#acc-sidecart .accw-sidecart__panel {top: 0;height: 100dvh;margin-top: 5px;}
#acc-sidecart .modal-header {padding: 6px 14px;}
#acc-sidecart .modal-header h2 {font-size: 1rem;margin: 0;}
#acc-sidecart .modal-body {padding: 8px 14px;max-height: calc(100dvh - 40px);}
#acc-sidecart .accw-foot {padding: 10px 0 20px;}
#acc-sidecart .accw-sidecart__tablehead {display: none;}
}

/* Kopfzeile: 4 Spalten wie die Rows */
#acc-sidecart .accw-sidecart__tablehead{
display:grid;  grid-template-columns: 270px auto auto auto auto;  /* Wein | Anzahl | Preis | Gesamt */
column-gap:12px;padding:6px 0 8px;font-size:12px;color:#444;}
#acc-sidecart .accw-sidecart__tablehead .th { font-weight:600; }
#acc-sidecart .accw-sidecart__tablehead .th-wein   { text-align:left; }
#acc-sidecart .accw-sidecart__tablehead .th-anzahl { text-align:right; }
#acc-sidecart .accw-sidecart__tablehead .th-preis,
#acc-sidecart .accw-sidecart__tablehead .th-gesamt { text-align:right; }

/* Zeilenlayout: 2 Zeilen, Total rechts über beide Zeilen vertikal zentriert */
#acc-sidecart .accw-sidecart__row{
display:grid;
grid-template-columns: 300px auto auto auto;  /* name | qty | price | total & entf*/
grid-template-rows: auto auto;              /* oben / unten */
grid-template-areas:
"name  qty price total"
"meta  qty price total";
column-gap:12px;row-gap:4px;padding:10px 0;border-bottom:1px solid #eee;align-items:center;}

#acc-sidecart .cell { min-width:0; }
#acc-sidecart .cell.cell-name  { grid-area:name; }
#acc-sidecart .cell.cell-meta  { grid-area:meta; }
#acc-sidecart .cell.cell-qty   { grid-area:qty;  text-align:right; }
#acc-sidecart .cell.cell-qty .qty-ctrl {display: flex;align-items: center;gap: .35rem;}
#acc-sidecart .cell.cell-qty .qty-btn {display: inline-flex;align-items: center;justify-content: center;width: 1.4rem;height: 1.4rem;border-radius: 999px;border: 1px solid #ccc;background: #fafafa;font-size: .9rem;cursor: pointer;line-height: 1;}
#acc-sidecart .cell.cell-qty .qty-ctrl {display: flex;align-items: center;gap: .35rem;}
#acc-sidecart .cell.cell-qty .qty-btn:hover { background: #eee;}
#acc-sidecart .cell.cell-qty .qty-display {min-width: 1.5rem;text-align: center;font-weight: 600;}
#acc-sidecart .cell.cell-price { grid-area:price; text-align:right; }
#acc-sidecart .cell.cell-total { grid-area:total; text-align:right; align-self:stretch; display:flex; align-items:center; justify-content:flex-end; }

#acc-sidecart .cell-name .title{  font-weight:800;font-size: clamp(14px, 1.9vw, 18px);line-height:1.2;}


/* Meta-Zeile: Winzer + Inhalt + Grundpreis */
#acc-sidecart .cell-meta{font-family: var(--font-serif);font-style: italic;font-size:12px;color:#444;display:flex;flex-wrap:wrap;gap:4px 6px;}
#acc-sidecart .cell-meta .producer{font-family: var(--font-serif);font-style: italic;letter-spacing:.04em;}
#acc-sidecart .cell-meta .dot{ opacity:.6; }
#acc-sidecart .cell-meta .meta-inhalt{ font-family: var(--font-serif);font-style: normal; font-size:7px;padding: 1px 0 0 0;}

/* Preise */
#acc-sidecart .cell-price{ font-size:14px; color:#222; }
#acc-sidecart .cell-total .total{ font-weight:800; font-size:16px; }
#acc-sidecart .cell-total button{ border:none !important; background:#fff; }

#acc-sidecart .cell-qty .qty { display:inline-block; min-width:2ch; text-align:right; }


/* — Mobil kompakt — */
@media (max-width: 520px){
#acc-sidecart .accw-sidecart__tablehead{ display:none; } /* Kopf ausblenden */
#acc-sidecart .accw-sidecart__row{
grid-template-columns: 1fr auto;
grid-template-areas:
"name  total"
"meta  total"
"qty   total";
row-gap:6px;
}
#acc-sidecart .cell-price{ display:none; } /* Einheitspreis weglassen, schmal */
#acc-sidecart .qty-input{ width:72px; }
}

/* ========== PAKETE IM SIDECART ========== */
.accw-sidecart__row--pack {
    background: #f9f8f5;
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
}
.accw-sidecart__row--pack .pack-icon {
    margin-right: 4px;
}
.accw-sidecart__row--pack .pack-wines {
    font-size: 0.8em;
    color: #666;
    margin-top: 2px;
    line-height: 1.4;
}
.accw-sidecart__row--pack .meta-flaschen {
    font-size: 0.85em;
    color: #888;
}

/* Mobile: Paket-Zeile */
@media (max-width: 520px) {
    .accw-sidecart__row--pack {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name  total"
            "meta  total"
            "qty   total";
    }
    .accw-sidecart__row--pack .cell-name { grid-area: name; }
    .accw-sidecart__row--pack .cell-qty { grid-area: qty; }
    .accw-sidecart__row--pack .cell-meta { grid-area: meta; }
    .accw-sidecart__row--pack .cell-total { grid-area: total; }
    .accw-sidecart__row--pack .cell-price { display: none; }
    .accw-sidecart__row--pack .pack-wines {
        display: block;
        max-height: 60px;
        overflow: hidden;
    }
}

/* Legacy */
.accw-sidecart__pack {
    background: #f9f8f5;
    border-radius: 6px;
    margin-bottom: 12px;
    padding: 8px;
}
.accw-sidecart__pack .pack-title {
    font-weight: 600;
    color: #5f9b3a;
}
.accw-sidecart__pack .pack-wines {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 6px;
    font-size: 0.85em;
    color: #666;
}
.accw-sidecart__pack .pack-wine {
    white-space: nowrap;
}
.accw-sidecart__pack .bottle-count {
    font-size: 0.85em;
    color: #888;
    font-style: italic;
}
.cart-section.cart-packs {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8e5dd;
}

/* ========== BREADCRUMB ========== */
.wr-breadcrumb {
    padding: 0.75rem 1.5rem;
    background: transparent;
}
.wr-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto;
    padding: 0;
    max-width: var(--content-width, 1200px);
    list-style: none;
    font-family: var(--font-sans);
    font-size: var(--fz-xs);
    letter-spacing: var(--ls-004);
    text-transform: uppercase;
}
.wr-breadcrumb__item + .wr-breadcrumb__item::before {
    content: "›";
    margin-right: 0.5rem;
    color: #bbb;
}
.wr-breadcrumb__item a {
    color: #888;
    text-decoration: none;
    transition: color 0.2s;
}
.wr-breadcrumb__item a:hover {
    color: var(--color-rot);
}
.wr-breadcrumb__item--current {
    color: #555;
}

/* Keyfacts-CSS ist in app/views/partials/keyfacts.php (view-lokal mit nonce) */