/*
 * Platz für eigene Änderungen direkt als CSS
 * Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.
 */

/* NOVA 1.8: Sprunglinks (.btn-skip-to) verstecken, bis sie Fokus bekommen; der Parent liefert dafuer nur das Markup, kein CSS */
.btn-skip-to{position:absolute;top:0;transition:transform 200ms;transform:scale(0);margin:1%;z-index:1070;background:#fff;border:3px solid #8eb330;font-weight:400;color:#525252;text-align:center;vertical-align:middle;padding:.625rem .9375rem;border-radius:.125rem;font-weight:bolder;text-decoration:none}
.btn-skip-to:focus{transform:scale(1)}

/* Alpujarra: gruenes Preis-Badge in der Variationsauswahl (live per Klasse alpujarra-variation in einer Kopie von variation_value.tpl) */
.variation-badge{color:#000;background:#8eb330 !important;padding:1px 2px;border-radius:4px}

/* ==========================================================================
   Startseite "Hofladen" (Entwurf A, OnPage Composer). Klassen stehen im OPC im Feld "CSS-Klasse" der Portlets.
   Bereiche = Container-Portlets (hof-sec + hof-hero|hof-saison|hof-sortiment|hof-herkunft|hof-empf|hof-laden).
   Text nie in #8eb330 auf Weiss (2,4:1): Text/Buttons #4d6a0f, Gelb nur mit dunklem Text.
   ========================================================================== */
.hof-sec{--hof-ink:#4d6a0f;--hof-brand:#8eb330;--hof-tint:#f3f7e8;--hof-sun:#f8d630;--hof-strong:#2b2b2b;--hof-muted:#707070;--hof-border:#ebebeb;--hof-r:6px;color-scheme:light;padding:2.5rem 0}
@media(min-width:992px){.hof-sec{padding:3.5rem 0}}
.hof-sec>div{max-width:1650px;margin:0 auto;padding:0 16px}
@media(min-width:768px){.hof-sec>div{padding:0 24px}}
@media(min-width:1200px){.hof-sec>div{padding:0 40px}}
.hof-sec h1,.hof-sec h2,.hof-sec h3{color:var(--hof-strong);line-height:1.25;font-weight:600;margin:0 0 .5em}
.hof-sec p,.hof-sec li{font-size:1rem;line-height:1.6}
.hof-sec h1{font-size:clamp(1.75rem,1.2rem + 2.4vw,2.9rem);text-wrap:balance}
.hof-sec h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem)}
.hof-sec h3{font-size:1.1rem}
.hof-sec p a,.hof-sec li a{color:var(--hof-ink);text-decoration:underline}
.hof-sec a:focus-visible,.hof-sec .btn:focus-visible{outline:3px solid var(--hof-ink);outline-offset:3px;border-radius:2px}
.hof-sec .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.4rem;border-radius:var(--hof-r);font-weight:600;font-size:1rem;border:2px solid var(--hof-ink);box-shadow:none}
.hof-sec .btn-primary{background:var(--hof-ink);border-color:var(--hof-ink);color:#fff}
.hof-sec .btn-primary:hover,.hof-sec .btn-primary:focus{background:var(--hof-strong);border-color:var(--hof-strong);color:#fff}
.hof-sec .btn-outline-primary{background:transparent;color:var(--hof-ink)}
.hof-sec .btn-outline-primary:hover,.hof-sec .btn-outline-primary:focus{background:var(--hof-tint);border-color:var(--hof-ink);color:var(--hof-ink)}
.hof-btn{display:inline-block;margin:1.25rem .75rem 0 0}
.hof-linkmore .btn{background:none !important;border:0;color:var(--hof-ink) !important;text-decoration:underline;text-decoration-color:var(--hof-brand);text-decoration-thickness:2px;text-underline-offset:4px;padding:0;min-height:44px}
.hof-sec .hof-caption p{font-size:.85rem;color:var(--hof-muted);margin:.4rem 0 0}
.hof-anchor{height:0;margin:0;padding:0;border:0;overflow:hidden;scroll-margin-top:90px}
.hof-anchor::before,.hof-anchor::after{display:none}
.hof-notice{background:var(--hof-sun);color:var(--hof-strong);padding:.75rem 1rem;border-radius:var(--hof-r);font-weight:600;margin-bottom:1rem}
.hof-notice p{margin:0}

/* Hero */
.hof-hero{padding-top:1.5rem}
.hof-hero .row{align-items:center}
@media(max-width:767px){.hof-hero .row>[data-area-id=col-1]{order:-1;margin-bottom:1rem}}
.hof-sec .hof-lead p{font-size:1.125rem}
.hof-lead{font-size:1.125rem;max-width:36em}
.hof-hero-img img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--hof-r);width:100%}
.hof-trust ul{list-style:none;padding:0;margin:1.75rem 0 0;display:grid;gap:.6rem;grid-template-columns:1fr}
@media(min-width:576px){.hof-trust ul{grid-template-columns:1fr 1fr}}
@media(min-width:1200px){.hof-trust ul{grid-template-columns:repeat(4,1fr)}}
.hof-sec .hof-trust li{position:relative;padding-left:32px;font-size:.95rem}
.hof-trust li::before{content:"";position:absolute;left:0;top:.15rem;width:22px;height:22px;border-radius:50%;background:var(--hof-brand);box-shadow:inset 0 0 0 6px var(--hof-tint)}
.hof-trust strong{color:var(--hof-strong)}

/* Saison-Band + Produktkarten (ProductStream, Preise aus dem Shop) */
.hof-saison{background:var(--hof-tint)}
@media(min-width:992px){.hof-saison .row{align-items:center}}
.hof-sec .hof-badge p{display:inline-block;background:var(--hof-sun);color:var(--hof-strong);font-family:Montserrat,sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.02em;padding:.2rem .6rem;border-radius:999px;margin:0 0 .6rem}
.hof-cards .product-wrapper{flex:0 0 50%;max-width:50%}
@media(min-width:992px){.hof-cards-4 .product-wrapper{flex:0 0 25%;max-width:25%}}
.hof-cards .productbox-title{display:block;min-height:44px}
.hof-cards .productbox-title a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:44px;color:var(--hof-strong);font-weight:600;font-size:.95rem;line-height:1.4;text-decoration:none;overflow-wrap:anywhere;hyphens:auto}
.hof-cards .productbox:focus-visible,.hof-cards .productbox:focus-within{outline:3px solid var(--hof-ink);outline-offset:2px;border-radius:var(--hof-r)}
.hof-cards .productbox{background:#fff;border:1px solid var(--hof-border);border-radius:var(--hof-r);padding:.75rem}
.hof-cards .productbox-price{font-weight:700;color:var(--hof-strong)}
.hof-empf:not(:has(.product-wrapper)){display:none}
.hof-empf{padding-top:0}

/* Sortiment-Kacheln: ganze Kachel klickbar (Link des Bildes wird ueber die Kachel gespannt) */
.hof-tiles{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0}
@media(min-width:768px){.hof-tiles{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.hof-tiles>.clearfix{display:none !important}
.hof-tiles>[class*=col]{position:relative;width:auto;max-width:none;flex:none;padding:0;border:1px solid var(--hof-border);border-radius:var(--hof-r);overflow:hidden;background:#fff}
.hof-tiles>[class*=col]:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.hof-tiles>[class*=col]:focus-within{outline:3px solid var(--hof-ink);outline-offset:2px}
.hof-tiles a:focus-visible{outline:0}
.hof-tiles a::after{content:"";position:absolute;inset:0}
.hof-tiles img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.hof-tiles h3{margin:.75rem 1rem .2rem}
.hof-tiles h3::after{content:" \203A";color:var(--hof-ink)}
.hof-sec .hof-tiles [data-area-id]>div:last-child p{margin:0;padding:0 1rem 1rem;font-size:.9rem;line-height:1.45}

/* Herkunft */
@media(min-width:992px){.hof-herkunft>div>.row{align-items:center}}
.hof-strip{max-width:620px;margin:0 -.25rem}
.hof-strip>[class*=col]{padding:0 .25rem .5rem}
.hof-strip img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--hof-r)}
.hof-sec .hof-fact p{margin:0;font-size:.85rem;line-height:1.4}
.hof-fact strong{display:block;font-family:Montserrat,sans-serif;font-size:1.8rem;color:var(--hof-ink);line-height:1.1}
.hof-facts{margin:1rem -15px}
.hof-seals{margin-top:1rem}
.hof-seals>[class*=col]{flex:0 0 auto;width:auto;max-width:none}
.hof-seals img{height:56px;width:auto !important}

/* Laden */
.hof-laden{background:#f5f7fa}
.hof-laden p{margin-bottom:.75rem}
.hof-laden strong{color:var(--hof-strong)}
.hof-laden a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px}
.hof-sec .hof-list li{font-size:.95rem}
.hof-list ul{columns:2;column-gap:1.5rem;padding-left:1.1rem;margin:.5rem 0 0;font-size:.95rem}
@media(prefers-reduced-motion:reduce){.hof-sec *,.hof-sec *::before,.hof-sec *::after{transition:none !important;animation:none !important}}
.hof-laden .hof-btn{margin-bottom:1.5rem}

/* ==========================================================================
   Kopf wie bis 03/2023 (Werner 2026-11-06, Issue #2): Menue in eigener Zeile (Shop-Einstellung header/menu_single_row=Y,
   Default in template.xml), gelbgruenes Band #dddd99 ueber die volle Breite, Farbverlauf Weiss -> #dddd99 ueber den ersten Bildschirm,
   danach flach #dddd99 (kein background-attachment:fixed: iOS). Inhalt ab 992 px auf weissem Panel (max. 1650 px, wie der Kopf-Container).
   Kontrast: Text #525252 / aktiv #2b2b2b auf #dddd99 (5,5:1 / 10:1); Unterstrich + Fokus #4d6a0f (nie #8eb330 auf dem Band: 1,7:1).
   ========================================================================== */
body{background:#dddd99 linear-gradient(#fff 27%,#dddd99) no-repeat;background-size:100% 100vh}
@media(min-width:992px){
  #jtl-nav-wrapper{background:#fff}
  #jtl-nav-wrapper>div[class*="menu-center-"]{background:#dddd99;position:relative}
  #jtl-nav-wrapper>div[class*="menu-center-"]::before{content:"";position:absolute;top:0;bottom:0;left:-100vmax;right:-100vmax;background:#dddd99;z-index:-1}
  #jtl-nav-wrapper{overflow-x:clip}
  #jtl-nav-wrapper #mainNavigation.nav-scrollbar{height:auto;overflow-y:hidden}
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-inner{margin-bottom:0;padding-bottom:0;height:auto}
  #jtl-nav-wrapper .navbar-nav>.nav-item>.nav-link{color:#525252;border-bottom:3px solid transparent;padding-top:1rem;padding-bottom:calc(1rem - 3px)}
  #jtl-nav-wrapper .navbar-nav>.nav-item>.nav-link::before{display:none}
  #jtl-nav-wrapper .navbar-nav>.nav-item>.nav-link:hover,
  #jtl-nav-wrapper .navbar-nav>.nav-item.active>.nav-link,
  #jtl-nav-wrapper .navbar-nav>.nav-item.show>.nav-link{color:#2b2b2b;border-bottom-color:#4d6a0f}
  #jtl-nav-wrapper .navbar-nav>.nav-item>.nav-link:focus-visible{outline:3px solid #4d6a0f;outline-offset:-3px;color:#2b2b2b}
  #jtl-nav-wrapper .main-search-wrapper #search{max-width:460px;margin-left:auto}
  #main-wrapper{background:#fff;max-width:1650px;margin:0 auto 2rem;border-radius:0 0 20px 20px;box-shadow:0 0 0 1px #ebebeb}
}

/* ==========================================================================
   Footer Variante A "Band" (Issue #9, Ben 2026-11-06, Entwurf entwuerfe/footer/a.html, Abnahme-Matrix dort).
   Footer liegt auf dem gelbgruenen Band wie das Menue; Spalten fluchten mit der Logo-Kante (Container 1650 px, Innenabstand 40 px ab 992 px);
   Widerruf als eigene Spalte mit zwei gleich breiten Rahmen-Buttons; Linklisten immer offen (kein Akkordeon); Schlussleiste dunkelgruen.
   Kontraste: #2b2b2b / #525252 auf #dddd99 10:1 / 5,5:1, #2f3d0c auf #dddd99 8,3:1, #eef3dc auf #2f3d0c 10,3:1. Kein #4d6a0f-Text und nie #8eb330 auf dem Band.
   Alle drei Widerrufswege bleiben (nativer Button, Plugin-Button, Link 'Widerrufsformular'), nur gestaltet.
   ========================================================================== */
#footer{--ft-band:#dddd99;--ft-dark:#2f3d0c;--ft-strong:#2b2b2b;--ft-on-dark:#eef3dc;--ft-line:rgba(47,61,12,.28);
  background:var(--ft-band);color:#525252;font-size:15px}
#footer>.container{max-width:1650px;margin:0 auto;padding:2rem 16px 1.25rem;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"wr" "links" "vat"}
/* Ueberschrift 'Widerruf' ohne Gruppe (kein JS): wie bisher als Pseudo-Element. Mit JS umhaengt js/custom.js die Buttons in .ft-widerruf (role=group). */
#footer>.container:not(:has(.ft-widerruf)):has(.withdrawal-link-wrapper,#revocation-button)::before{content:"Widerruf";display:block;
  font-family:Montserrat,sans-serif;font-weight:600;font-size:15px;color:var(--ft-strong);margin:0 0 .25rem}
#footer .ft-widerruf{grid-area:wr;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start}
#footer .ft-widerruf .productlist-filter-headline{margin:0 0 -4px;grid-column:1/-1}
#footer #footer-boxes{grid-area:links;display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;margin:1.75rem 0 0}
#footer #footer-boxes>[class*=col]{max-width:none;flex:none;padding:0;width:auto}
#footer .box-normal-link,#footer .box-normal-hr{display:none}
#footer .productlist-filter-headline{display:block!important;font-family:Montserrat,sans-serif;font-weight:600;font-size:15px;color:var(--ft-strong);margin:0 0 .25rem}
#footer .collapse{display:block}
#footer .nav-item{margin:0}
#footer .nav-link,#footer a:not(.btn){color:var(--ft-strong)}
#footer .nav-link{display:flex;align-items:center;min-height:44px;padding:0;text-decoration:none}
#footer a:not(.btn):hover{color:var(--ft-strong);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ft-dark)}
#footer :focus-visible{outline:3px solid var(--ft-dark);outline-offset:2px}
/* Qualitaet: kein Dropdown, gleiche Liste; Unterseiten eingerueckt und immer sichtbar */
#footer .link-group-item>.dropdown-toggle::after{display:none}
#footer .link-group-item>.dropdown-toggle{border:0;cursor:default}
#footer .link-group-item>.dropdown-toggle>a{color:var(--ft-strong);text-decoration:none;display:flex;align-items:center;min-height:44px}
#footer .link-group-item.dropdown{cursor:default;border-bottom:0!important}
#footer .box-linkgroup .dropdown .collapse{background:transparent}
#footer .link-group-item>ul.collapse{display:block!important;height:auto!important;padding-left:1rem;margin-left:.15rem;border-left:2px solid var(--ft-line)}
/* Widerruf: eigene Spalte, zwei gleich breite Rahmen-Buttons mit Abstand */
#footer .withdrawal-link-wrapper{display:contents}
#footer .withdrawal-link-wrapper>[class*=col]{max-width:none;flex:none;padding:0;width:auto}
#footer .withdrawal-link-wrapper .mt-3{margin:0!important}
#footer .withdrawal-link,#footer #revocation-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:.5rem 1rem;
  background:transparent;color:var(--ft-dark);border:2px solid var(--ft-dark);border-radius:6px;font-weight:600;font-size:15px;line-height:1.4;text-decoration:none;box-shadow:none;cursor:pointer}
#footer .withdrawal-link:hover,#footer #revocation-button:hover,
#footer .withdrawal-link:focus-visible,#footer #revocation-button:focus-visible{background:var(--ft-dark);color:var(--ft-on-dark);border-color:var(--ft-dark)}
#footer .footnote-vat{grid-area:vat;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--ft-line);font-size:13px;color:#525252}
#footer .footnote-vat a{text-underline-offset:3px;display:inline-block;padding:15px 0;margin:-15px 0}
/* Schlussleiste: volle Breite, Inhalt mittig */
#copyright{background:#2f3d0c;color:#eef3dc;font-size:13px}
#copyright .container-fluid{max-width:1650px;margin:0 auto;padding:.75rem 16px}
#copyright .row{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .5rem;text-align:center;margin:0}
#copyright .col{flex:0 0 100%;max-width:100%;padding:0;width:auto;margin:0}
#footer #copyright a:not(.btn),#footer #copyright a:not(.btn):hover{color:#eef3dc}
#copyright a{display:inline-block;padding:13px .1rem;margin:-13px 0}
#copyright .ml-2:has(>small:empty){display:none}
#copyright .icon-mr-2{margin-right:0}
#copyright :focus-visible{outline:3px solid #dddd99;outline-offset:2px}
@media(min-width:576px){
  #copyright .col{flex:0 0 auto;width:auto;max-width:none;padding:0}
  #copyright #system-credits{padding-right:0!important}
  #copyright #system-credits::before{content:"\00b7";margin-right:.5rem}
}
@media(min-width:768px){
  #footer>.container{max-width:720px;grid-template-columns:minmax(0,1fr);row-gap:1.75rem}
  #footer .ft-widerruf{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  #footer #footer-boxes{margin-top:0}
  #footer #footer-boxes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
}
@media(min-width:992px){
  #footer>.container{max-width:1650px;padding:3.5rem 40px 1.25rem;column-gap:3rem;row-gap:0;
    grid-template-columns:minmax(0,1fr) minmax(260px,320px);
    grid-template-areas:"links wr" "vat vat"}
  #footer .ft-widerruf{grid-template-columns:minmax(0,1fr)}
  #footer #footer-boxes{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));column-gap:3rem;margin:0}
  /* Panel schliesst direkt am Footer-Band ab (kein heller Verlaufsstreifen dazwischen); kurze Seiten: Panel waechst, Footer sitzt unten */
  #main-wrapper{margin-bottom:0}
  #copyright .container-fluid{padding:.9rem 40px}
}
body{min-height:100vh;display:flex;flex-direction:column}
#main-wrapper{flex:1 0 auto;width:100%}
#footer{flex:none}
@media(min-width:992px){body{background-size:100% min(100vh,440px)}}  /* Verlauf endet vor dem Footer auch auf kurzen Seiten (Warenkorb leer) */
@media print{#footer{display:none!important}}
@media(prefers-reduced-motion:reduce){#footer *,#copyright *{transition:none!important}}

/* ===== Warenkorb-Dialog (Issue #10, Entwurf A): productdetails/pushed_success.tpl ===== */
/* Kontrast: Text #2b2b2b auf #8eb330 = 5,8:1 (der Shop-Standard #525252 auf #8eb330 hat nur 3,2:1, hier bewusst nicht verwendet) */
.wk-modal,.wk-ajax{--wk-ink:#4d6a0f;--wk-brand:#8eb330;--wk-strong:#2b2b2b;--wk-text:#525252;--wk-muted:#707070;--wk-line:#ebebeb;--wk-line-strong:#767676;--wk-tint:#f3f7e8;--wk-r:6px;color-scheme:light}
/* Dialog liegt ueber dem Consent-Banner (#consent-manager 1050) und dem Sticky-Kopf (1020); eModal/Bootstrap-Modals ebenfalls (P2 aus dem Entwurf) */
.wk-modal{position:fixed;inset:0;z-index:1060;display:flex;align-items:flex-end;justify-content:center;color:var(--wk-text)}
.modal{z-index:1060}
.modal-backdrop{z-index:1055}
.wk-scrim{position:absolute;inset:0;background:rgb(43 43 43/.55);animation:wk-fade .18s ease-out}
.wk-dialog{position:relative;width:100%;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;background:#fff;border-radius:12px 12px 0 0;box-shadow:0 .5rem 2rem rgb(43 43 43/.22);padding:.75rem 16px calc(1rem + env(safe-area-inset-bottom));display:grid;gap:.9rem;animation:wk-up .22s ease-out;font-size:1rem;line-height:1.5}
.wk-dialog:focus{outline:none}
.wk-head{display:flex;align-items:center;gap:.6rem;margin-right:-.5rem}
.wk-head h2{flex:1;font-size:1.15rem;margin:0;color:var(--wk-strong);font-weight:600;line-height:1.25}
.wk-head h2:focus,.wk-head h2:focus-visible{outline:none}
.wk-check{width:28px;height:28px;flex:none;border-radius:50%;background:#d2e7d2;color:#0f4610;display:inline-flex;align-items:center;justify-content:center}
.wk-check svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:3}
.wk-x{width:44px;height:44px;flex:none;border:0;background:none;color:var(--wk-strong);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:0}
.wk-x:hover{background:#f5f5f5}
.wk-x svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.4;fill:none}
.wk-modal :where(a,button):focus-visible,.wk-ajax :where(a,button):focus-visible{outline:3px solid var(--wk-ink);outline-offset:2px;border-radius:2px}
.wk-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:.75rem;align-items:start}
.wk-item picture,.wk-item .wk-img{display:block;width:64px;height:64px}
.wk-item img{width:64px;height:64px;object-fit:contain;background:#fff;border:1px solid var(--wk-line);border-radius:var(--wk-r)}
.wk-name{font-weight:600;color:var(--wk-strong);line-height:1.35;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wk-meta{font-size:.85rem;color:var(--wk-muted);margin-top:.15rem}
.wk-meta b{color:var(--wk-text);font-weight:600}
.wk-price{font-weight:700;color:var(--wk-strong);white-space:nowrap;text-align:right}
.wk-warn{margin:0;background:#fdf1dc;color:#6b4300;border-radius:var(--wk-r);padding:.6rem .8rem;font-size:.9rem;font-weight:600}
.wk-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;background:var(--wk-tint);border-radius:var(--wk-r);padding:.6rem .8rem;color:var(--wk-strong)}
.wk-total small{display:block;color:var(--wk-text);font-size:.8rem}
.wk-total strong{font-size:1.1rem;white-space:nowrap}
.wk-ship{display:grid;gap:.4rem}
.wk-ship-text{margin:0;font-size:.92rem;color:var(--wk-strong)}
.wk-ship-bar{height:8px;border-radius:4px;background:#e4e4e4;overflow:hidden}
.wk-ship-bar span{display:block;height:100%;background:var(--wk-ink);border-radius:4px}
.wk-ship-ok .wk-ship-text::before{content:"\2713\00a0";color:var(--wk-ink);font-weight:700}
.wk-actions{display:grid;gap:.5rem}
.wk-actions .btn{width:100%;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;border-radius:var(--wk-r);text-decoration:none;white-space:normal;box-shadow:none}
.wk-actions .btn-primary{background:var(--wk-brand);border:2px solid var(--wk-brand);color:var(--wk-strong)}
.wk-actions .btn-primary:hover,.wk-actions .btn-primary:focus{background:var(--wk-ink);border-color:var(--wk-ink);color:#fff}
.wk-actions .btn-outline-secondary{background:#fff;border:2px solid var(--wk-line-strong);color:var(--wk-strong)}
.wk-actions .btn-outline-secondary:hover,.wk-actions .btn-outline-secondary:focus{border-color:var(--wk-ink);background:var(--wk-tint);color:var(--wk-strong)}
.wk-xs{border-top:1px solid var(--wk-line);padding-top:.8rem}
.wk-xs h3{font-size:.95rem;font-weight:700;margin:0 0 .5rem;color:var(--wk-strong)}
.wk-xs ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.wk-xs a{display:grid;grid-template-columns:52px minmax(0,1fr);gap:.5rem;align-items:start;min-height:64px;padding:.4rem;border:1px solid var(--wk-line);border-radius:var(--wk-r);text-decoration:none;color:var(--wk-strong);height:100%}
.wk-xs a:hover{border-color:var(--wk-ink);background:var(--wk-tint);text-decoration:none}
.wk-xs img{width:52px;height:52px;object-fit:contain}
.wk-xs picture,.wk-xs .wk-xs-img{display:block;width:52px;height:52px}
.wk-xs .t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.82rem;line-height:1.3;overflow-wrap:anywhere}
.wk-xs .p{display:block;font-size:.85rem;font-weight:700;margin-top:.15rem}
.wk-xs .bp{display:block;font-size:.75rem;color:var(--wk-muted)}
@media(min-width:480px){.wk-actions{grid-template-columns:1fr 1fr}}
@media(min-width:576px){
  .wk-modal{align-items:center;padding:2rem 1rem}
  .wk-dialog{max-width:560px;border-radius:8px;padding:1rem 1.5rem 1.5rem;max-height:calc(100dvh - 4rem);animation-name:wk-pop}
}
@keyframes wk-fade{from{opacity:0}}
@keyframes wk-up{from{transform:translateY(40px);opacity:.4}}
@keyframes wk-pop{from{transform:scale(.97);opacity:0}}
html.wk-lock{overflow:hidden;scrollbar-gutter:stable}
/* Listen/Boxen: eModal-Rahmen schmal und gleich gestaltet */
.modal-dialog:has(.wk-ajax){max-width:560px}
.modal-dialog:has(.wk-ajax) .modal-header{border-bottom:0;padding:1rem 1.5rem .25rem}
.modal-dialog:has(.wk-ajax) .modal-title{font-size:1.15rem;color:#2b2b2b;font-weight:600}
.modal-dialog:has(.wk-ajax) .modal-body{padding:.5rem 1.5rem 1.5rem}
.wk-ajax .wk-body{display:grid;gap:.9rem;font-size:1rem;line-height:1.5}
@media(prefers-reduced-motion:reduce){.wk-scrim,.wk-dialog{animation:none}}
.modal-dialog:has(.wk-ajax) .modal-footer{display:none}
.modal-dialog:has(.wk-ajax) .modal-header{position:relative;padding-right:4rem}
.modal-dialog:has(.wk-ajax) .modal-header .close{position:absolute;top:.5rem;right:.5rem;width:44px;height:44px;margin:0;padding:0;opacity:1;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#2b2b2b;background:none;box-shadow:none}
.modal-dialog:has(.wk-ajax) .modal-header .close:hover{background:#f5f5f5}
.modal-dialog:has(.wk-ajax) .modal-body{padding-bottom:1.25rem}
body.modal-open .btn-skip-to{visibility:hidden}
.modal-dialog:has(.wk-ajax) .modal-title:focus{outline:none}
.wk-xs .t{overflow-wrap:break-word;hyphens:auto}
@media(max-width:575.98px){.modal-dialog:has(.wk-ajax) .modal-header{padding:1rem 1rem .25rem}.modal-dialog:has(.wk-ajax) .modal-body{padding:.5rem 1rem 1rem}}

/* ---- Mindestalter Wein / "ab 16" (Issue #12, Variante A); Farben = wk-*-Tokens, Shop ohne Dunkelmodus ---- */
.ma-box,.ma-badge,.ma-line,.ma-row{--ma-ink:#4d6a0f;--ma-strong:#2b2b2b;--ma-text:#525252;--ma-line:#ebebeb;--ma-tint:#f3f7e8;--ma-err:#a50f0f;--ma-err-bg:#fbe9e9;--ma-r:6px}
.ma-badge{display:inline-flex;align-items:center;justify-content:center;min-width:2.6rem;height:1.5rem;padding:0 .45rem;border-radius:999px;border:1.5px solid var(--ma-ink);color:var(--ma-ink);background:#fff;font-size:.75rem;font-weight:700;white-space:nowrap;line-height:1;vertical-align:middle}
.ma-line{display:flex;gap:.5rem;align-items:center;font-size:.9rem;color:var(--ma-strong);margin:.6rem 0 0}
.ma-row{margin:.25rem 0 .35rem}
.ma-badge-list{margin:.35rem 0 .1rem}
.ma-box{border:1px solid var(--ma-line);border-left:4px solid var(--ma-ink);border-radius:var(--ma-r);padding:.7rem .85rem;display:grid;gap:.45rem;background:#fff;color:var(--ma-text);margin:0 0 1rem}
.ma-box p{margin:0;font-size:.92rem;color:var(--ma-text)}
.ma-t{display:flex;gap:.55rem;align-items:center;font-weight:700;color:var(--ma-strong)}
.ma-opt{font-size:.85rem;color:var(--ma-strong);background:var(--ma-tint);border-radius:4px;padding:.35rem .55rem}
.ma-cb{display:grid;grid-template-columns:24px minmax(0,1fr);gap:.65rem;align-items:start;min-height:44px;padding:.55rem 0;margin:0;cursor:pointer;color:var(--ma-strong);font-weight:600}
.ma-cb input{width:24px;height:24px;margin:0;accent-color:var(--ma-ink);cursor:pointer}
.ma-cb small{display:block;font-weight:400;color:var(--ma-text);font-size:.85rem;margin-top:.15rem}
.ma-box :where(input,button):focus-visible{outline:3px solid var(--ma-ink);outline-offset:2px;border-radius:2px}
.ma-box:focus{outline:none}
.ma-err{border:2px solid var(--ma-err);border-left-width:6px;background:var(--ma-err-bg)}
.ma-err .ma-cb input{outline:2px solid var(--ma-err);outline-offset:2px}
.ma-err-msg{color:var(--ma-err)!important;font-weight:700;display:flex;gap:.4rem}
.ma-actions{display:flex;flex-wrap:wrap;gap:.25rem .75rem}
.ma-link{background:none;border:0;color:var(--ma-ink);text-decoration:underline;text-underline-offset:3px;padding:.5rem .25rem;min-height:44px;font-weight:600;cursor:pointer;text-align:left}
.wk-modal .ma-box,.wk-ajax .ma-box{margin:0}