html { }

body {
font-family: "brandon grotesque", "Helvetica Neue", Arial, sans-serif;
font-size: 17px;
font-weight: normal;
line-height: 26px;
letter-spacing: 0.08em;
text-rendering: optimizeLegibility;
hyphens: auto;
}

h1, h2, h3, h4, h5, h6 {
font-family: "brandon grotesque", "Helvetica Neue", Arial, sans-serif;font-weight: bold;
line-height: 1.2;
letter-spacing: 0.02em;
margin: 1.2em 0 0.4em;
}

h1 {font-size: clamp(1.2rem, 3vw, 2.75rem);}
h2 {font-size: clamp(1.625rem, 2.3vw, 2rem);}
h3 {font-size: clamp(1.375rem, 1.8vw, 1.625rem);}
h4 {font-size: 1.25rem;}
h5 {font-size: 1.125rem;}
h6 {font-size: 1rem;}

a {color: var(--color-link);}
.hero h1, .page-title h1 { font-family: "brandon grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: bold;}

.price, .table td, .table th { font-variant-numeric: tabular-nums; }

/* Section Wrapper */
.wr-section, .section-wr-kasse {background: #f7f7f7;border: 1px solid var(--zawe-line);border-radius: 0.3rem;padding:0 1.0rem 0 1.0rem;margin: 1.5rem auto;max-width: var(--grid-width-max);}

div.ek-warenkorb { h1.warenkorb {margin: 35px 0 25px 15%;}  }
div.ek-warenkorb .wk-weine .winzer { font-family: var(--font-serif); font-style: italic;}
div.ek-warenkorb .wk-weine .wein { font-family: var(--font-sans);font-weight: bold; }
div.ek-warenkorb .kasse-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
div.ek-warenkorb .kasse-head .wr-link{font-size:.9rem;white-space:nowrap;}
div.ek-warenkorb .kasse-grid-address{display:grid;grid-template-columns:1fr 1.4fr;}

div.ek-warenkorb.section-wr-kasse {margin-top: clamp(16px, 2vw, 28px);padding: clamp(18px, 2.2vw, 32px);background: rgba(0,0,0,0.015);border-radius: 12px;}
div.ek-warenkorb.section-wr-kasse {margin-top: clamp(-10px, -1vw, -4px);padding: clamp(20px, 2.4vw, 34px);background: rgba(0,0,0,0.022);border-radius: 12px;}
div.ek-warenkorb.wr-section + div.ek-warenkorb.section-wr-kasse {margin-top: clamp(18px, 2vw, 30px);}



@media (max-width: 599px) {
div.ek-warenkorb .kasse-grid-address{grid-template-columns:1fr;}
div.ek-warenkorb .wk-weine.xs { display: grid;}
div.ek-warenkorb .wk-weine.md { display: none;}
.wk-weine .medium { font-size:8px;  }
.wk-weine.winzer { grid-template-columns: 1fr !important; gap: var(--field-gap-xs) !important; height: 13px }
.wk-weine { grid-template-columns: 185px 35px 1fr 1fr !important; gap: var(--field-gap-xs) !important;  }
div.ek-warenkorb .wk-weine .winzer { font-size:9px;  }
div.ek-warenkorb .wk-weine .wein { font-size:12px; letter-spacing: 0; }
div.ek-warenkorb .wk-weine .gesetzl {font-size:8px; } 
div.ek-warenkorb .wk-weine.gesetzl {margin: -4px 0 0 0; } 

div.ek-warenkorb  .wk-weine .anzahl,div.ek-warenkorb .wk-weine .preis {font-size:10px;font-weight: bold; } 
div.ek-warenkorb .kasse-addr-block h3.lie-adr {margin: 0 0 0 0;}

}
@media (min-width: 600px) {
div.ek-warenkorb .wk-weine.xs { display: none;}
div.ek-warenkorb .wk-weine.md { display: grid;}

.wk-weine { grid-template-columns: 420px 1fr 1fr 1fr !important; }
div.ek-warenkorb .wk-weine .winzer { font-size:10px;  }
div.ek-warenkorb .wk-weine .wein { font-size:15px;  margin: -7px 0 4px 0; }
div.ek-warenkorb .wk-weine .gesetzl {font-size:10px; margin: -10px 0 0px 0;} 

div.ek-warenkorb .wk-weine .anzahl,div.ek-warenkorb .wk-weine .preis {font-size:13px; margin: 26px 0 0 0;} 


}


/* Account-Edit Grid */
.konto-edit { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem;}
.konto-edit h1 { font-family: var(--font-sans); font-size: clamp(1.6rem, 2.5vw, 2.4rem);margin-bottom: 1.8rem;}
.konto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 2rem;}
.feld { display: flex; flex-direction: column; }
.feld-span2 { grid-column: 1 / -1; }
.lbl { font-family: var(--font-sans);font-size: .9rem;font-weight: 600; margin-bottom: .15rem;}
.konto-grid input,.konto-grid select,.konto-grid textarea {padding: .25rem .8rem;border-radius: 10px;border: 1px solid #bbb;font-size: 1rem;font-family: var(--font-sans);}

textarea { resize: vertical;}

/* Submit */
.btn-save {width: 100%;padding: .85rem;background: var(--color-gruen);color: #fff;border-radius: 10px;border: 1px solid var(--color-gruen);font-size: 1.1rem;font-weight: 600;cursor: pointer;}

/* Mobile */
@media (max-width: 720px) {.konto-grid {grid-template-columns: 1fr;} }

.kasse-address-wrap { align-items: start; }

button.loeschen {display: inline-block;font: inherit;padding: 0.25rem 0.25rem;border: 1px solid var(--color-grau-dunkler);border-radius: 3px;background-image: linear-gradient(to bottom, var(--color-grau-hell), var(--color-grau-dunkler));color: #fff;text-align: center;text-decoration: none;transition: border-color 0.2s, box-shadow 0.2s, background 0.3s;}
button.loeschen:hover {background-image: linear-gradient(to bottom, var(--color-grau--hell), var(--color-orange-dezent));}



/* =========================================
   Content Wrapper
========================================= */
.wr_content {  max-width: var(--content-max-width);padding: 0 var(--content-side);margin: 55px auto 35px auto;box-sizing: border-box;}
/* =========================================
   Tokens
========================================= */
:root { --content-max-width: 950px; --content-image-max-width: 1000px; --content-slice-gap: 3rem; }

/* =========================================
   Global Content Defaults
========================================= */
.wr_content p { margin: 0 0 1.2rem 0; font-size: var(--fz-m); line-height: 1.6; }
.wr_content h1, .wr_content h2, .wr_content h3, .wr_content h4, .wr_content h5, .wr_content h6 { margin: 1.6rem 0 0.8rem 0; font-family: var(--font-sans); font-weight: var(--fw-bold); line-height: 1.25; letter-spacing: var(--ls-0); }

/* Journal-Header über Content-Titeln */
.wr-journal-header { border-bottom: 1px solid #ccc; padding-bottom: 0.5rem; margin-bottom: 1rem; }
.wr-journal-label { font-family: var(--font-serif); font-style: italic; font-size: var(--fz-s); color: #666; letter-spacing: 0.02em; }
.wr_content .wr-journal-header + h1 { margin-top: 0; }
@media (min-width: 769px) {
    .wr-journal-label { font-size: var(--fz-l); letter-spacing: 0.12em; }
}
.wr_content img { width: 100%; height: auto; display: block; }
.wr_content ul, .wr_content ol { padding-left: 1.2rem; margin: 0 0 1.2rem 0; }
.wr_content li { margin-bottom: 0.4rem; }
.wr_content table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: var(--fz-m); }
.wr_content td, .wr_content th { padding: 0.6rem; border: 1px solid #ddd; }
.wr_content blockquote { margin: 1.2rem 0; padding: 1rem 1.4rem; border-left: 4px solid var(--color-rot); background: #fafafa; }

/* =========================================
   Allgemeine Slice-Basis
========================================= */
.wr_content .wr-slice { margin: var(--content-slice-gap) auto; width: 100%; }

/* =========================================
   TEXT
========================================= */
.wr_content .wr-slice--text { max-width: var(--content-max-width); margin-left: auto; margin-right: auto; font-family: var(--font-sans); font-size: var(--fz-m); line-height: 1.6; }

/* =========================================
   TEXT + IMAGE
========================================= */
.wr_content .wr-slice--text-image .wr-figure-image { max-width: var(--content-image-max-width); margin: 0 auto var(--content-slice-gap) auto; }
.wr_content .wr-slice--text-image img { width: 100%; height: auto; max-height: 70vh; object-fit: cover; }
.wr_content .wr-figure-caption { margin-top: 0.4rem; font-family: var(--font-serif); font-size: var(--fz-xs); color: rgba(0,0,0,0.65); }
.wr_content .wr-slice--text-image .wr-textblock { max-width: var(--content-max-width); margin: 0 auto var(--content-slice-gap) auto; font-family: var(--font-sans); font-size: var(--fz-m); line-height: 1.6; }

/* =========================================
   QUOTE
========================================= */
.wr_content .wr-slice--quote { max-width: var(--content-max-width); margin-left: auto; margin-right: auto; }
.wr_content .wr-quote-wrap { display: grid; grid-template-columns: min-content 1fr; gap: var(--field-gap); }
@media (max-width: 600px) { .wr_content .wr-quote-wrap { grid-template-columns: 1fr; } }
.wr_content .wr-quote-mark { font-family: var(--font-serif); font-size: 4rem; line-height: 0.9; color: var(--color-rot); }
.wr_content .wr-quote-text { font-family: var(--font-serif); font-size: var(--fz-xl); line-height: 1.4; letter-spacing: var(--ls-002); margin: 0 0 0.5rem 0; }
.wr_content .wr-quote-author { font-family: var(--font-serif); font-style: italic; font-size: var(--fz-s); opacity: 0.7; }

/* =========================================
   HERO
========================================= */
.wr_content .wr-slice--hero { max-width: 100%; text-align: center; }
.wr_content .wr-hero-title { font-family: var(--font-sans); font-size: var(--fz-hero); margin-bottom: 1rem; }
.wr_content .wr-hero-image img { width: 100%; height: auto; }
.wr_content .wr-hero-caption { font-family: var(--font-serif); font-style: italic; font-size: var(--fz-s); margin-top: 0.5rem; }

/* =========================================
   HOME SECTIONS (Shop-Startseite)
   → bleiben NICHT unter wr_content (.home ist Shop)
========================================= */
.wr-home-row { margin: clamp(20px, 3vw, 40px) auto; max-width: var(--grid-width-default); padding: 0 12px; }
.wr-home-cell { min-width: 0; }
.wr-home-placeholder { border: 1px dashed var(--color-grau-dunkler); border-radius: 8px; padding: 1.5rem; text-align: center; font-family: var(--font-sans); }
.wr-home-article { max-width: var(--grid-width-default); margin: clamp(20px, 3vw, 40px) auto; padding: 0 12px; }
.wr_home_intro{text-align:center;margin:2rem 0 3rem}
.wr_home_title{font:var(--fw-bold) 2.2rem/1.15 var(--font-sans);margin:0 0 .7rem}
.wr_home_sub{font:var(--fw-regular) 1.2rem/1.4 var(--font-sans);opacity:.7;margin:0}

/* =========================================
   TEASER CARD
========================================= */
.wr_teaser_grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin:3rem 0}
.wr_teaser_card {display: block;text-decoration:none;color:inherit;background: #fff;border-radius: 12px;border: 1px solid rgba(0,0,0,0.08);box-shadow: 0 2px 4px rgba(0,0,0,0.06);transition: transform .15s ease, box-shadow .15s ease;}
.wr_teaser_card:hover {transform: translateY(-2px);box-shadow: 0 4px 8px rgba(0,0,0,0.08);}


.wr_teaser_img picture,img{display:block;width:100%;height:auto}
.wr_teaser_body{padding:1.4rem 1.2rem}
.wr_teaser_title{font:var(--fw-bold) 1.25rem/1.3 var(--font-sans);margin:0 0 .4rem}
.wr_teaser_excerpt{margin:0;font:var(--fw-regular) 1rem/1.5 var(--font-sans);opacity:.75}

.wr_content .wr-auto-weinlink {margin-top:4rem; padding:2rem 0; border-top:1px solid #ddd;}
.wr_content .wr-auto-weine-link {font-size:1.1rem; color:#444; text-decoration:none;}
.wr_content .wr-auto-weine-link:hover {text-decoration:underline;}

.wr_content_neu h1 {margin:55px 0 5px 0;}
.wr_content_neu img {width: 85%;}

.wr_content_neu p {width: 85%; text-align: left;}


/* ============================================
   WEINRAUM – GESAMTE CONTENT-KAPSEL
   NICHTS wirkt außerhalb von .weinraum
============================================ */

.weinraum {  max-width: var(--grid-width-max);margin: 0 auto;padding: clamp(16px, 3vw, 40px) 12px;box-sizing: border-box;font-family: var(--font-sans);}
/* GRID */
.weinraum .wr-layout {display: grid;grid-template-columns: 240px 1fr;gap: clamp(24px, 3vw, 48px);}

@media (max-width: 900px) {
.weinraum .wr-layout {grid-template-columns: 1fr;}
}

/* Menü */
.weinraum .wr-menu {position: sticky;top: 2.5rem;align-self: start;}
.weinraum .wr-menu ul {list-style: none;padding: 0;margin: 0;}
.weinraum .wr-menu a {text-decoration: none;color: var(--color-link);font-size: var(--fz-m);line-height: 1.8;}

/* Inhalt */
.weinraum .wr-content {max-width: var(--content-max-width);}
.weinraum h1,.weinraum h2,.weinraum h3 {font-family: var(--font-sans);font-weight: var(--fw-bold);margin: 1.6rem 0 0.7rem;line-height: 1.25;}
.weinraum p {font-family: var(--font-sans);font-size: var(--fz-m);line-height: 1.6;margin-bottom: 1.2rem;}
.weinraum img {display: block;width: 100%;height: auto;}
.weinraum .slice {margin: clamp(24px, 3vw, 48px) 0;}