/* Eine Schriftfamilie (Newsreader, inkl. Latin-Extended für ă â î ș ț),
   drei Größen: --fs-l Seitentitel, --fs-m Text, --fs-s Kopf-/Fußzeilen-Angaben.
   Auszeichnung nur über Fett (600) oder normal (400), keine Kursive. */
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-latin-standard-normal.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-latin-ext-standard-normal.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --wein:#5b0055;
  --creme:#fbf9f5; --tinte:#000; --grau:#4c454f; --linie:#e7e0d8;
  --fs-l:34px; --fs-m:18px; --fs-s:15px;
  --maxw:1240px; --pad:60px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body{background:var(--creme);color:var(--tinte);font-family:'Newsreader',Georgia,serif;font-optical-sizing:auto;font-size:var(--fs-m);font-weight:400;line-height:1.6}
img{max-width:100%;height:auto}
a{color:inherit}
strong,b{font-weight:600}
em,i{font-style:normal}
h1{font-size:var(--fs-l);font-weight:600;line-height:1.15;color:var(--wein);overflow-wrap:break-word}
.wrap{max-width:var(--maxw);margin:0 auto}

header.site{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:30px var(--pad);border-bottom:1px solid var(--linie);gap:24px}
.brand{display:flex;align-items:center;gap:15px;text-decoration:none}
.mark{height:50px;width:auto;display:block}
.brand .mark{position:relative;top:-4px}
.brand .name strong{display:block;font-size:var(--fs-m);color:var(--tinte);line-height:1.2}
.brand .name span{display:block;font-size:var(--fs-s);color:var(--wein);line-height:1.3;margin-top:2px}
nav.main{display:flex;gap:32px;justify-self:center;flex-wrap:wrap}
nav.main a{text-decoration:none}
nav.main a.on{color:var(--wein);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.lang{justify-self:end;font-size:var(--fs-s);color:var(--grau);display:flex;gap:8px;align-items:center}
.lang a{text-decoration:none}
.lang a.on{color:var(--wein);font-weight:600}
.lang span{opacity:.5}

footer.site{border-top:1px solid var(--linie);margin-top:80px;padding:44px var(--pad) 40px;font-size:var(--fs-s);color:var(--grau)}
footer.site .mark{margin:0 auto 30px}
.footer-cols{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
footer.site .fbrand{font-weight:600;color:var(--tinte)}
footer.site nav{display:flex;gap:20px;flex-wrap:wrap}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--wein)}

.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;padding:72px var(--pad) 60px;align-items:start}
.hero h1{margin:0 0 28px}
.kammern{margin:0 0 26px;padding-top:16px;border-top:1px solid var(--linie);max-width:34ch;color:var(--wein)}
.kammern span{display:block}
.lead{color:var(--tinte)}
.lead span{display:block}
.lead span+span{margin-top:10px}
.felder{margin-top:52px}
.felder h2{font-size:var(--fs-m);font-weight:600;color:var(--wein);margin-bottom:20px}
.felder dl{display:grid;grid-template-columns:auto minmax(190px,1fr);gap:0 24px}
.felder dt{font-weight:600;color:var(--tinte);padding-bottom:16px}
.felder dd{color:var(--tinte);padding-bottom:16px}
.side{display:flex;flex-direction:column;align-items:flex-end}
/* Porträt: randlos mit versetztem, hellem Wein-Flächenfeld, warmer Ton */
.frame{width:330px;max-width:100%;position:relative;margin-right:12px}
.frame img{display:block;width:100%;aspect-ratio:7/9;object-fit:cover;object-position:50% 22%;filter:sepia(.08) saturate(1.03) contrast(1.01);box-shadow:14px 14px 0 #efe4ee}
.cap{width:330px;max-width:100%;margin-top:22px;text-align:right;font-weight:600}

.page{padding:64px var(--pad) 0}
.page-head{max-width:760px;margin:0 auto 40px}
.prose{max-width:760px;margin:0 auto;overflow-wrap:break-word}
.prose>*+*{margin-top:1em}
.prose h2{font-size:var(--fs-m);font-weight:600;color:var(--wein);margin-top:2em}
.prose h2+*{margin-top:.4em}
.prose a{color:var(--wein);text-decoration:underline;text-underline-offset:3px}
.prose ul{padding-left:1.3em}
.prose li+li{margin-top:.3em}

@media (max-width:900px){
  :root{--pad:24px}
  header.site{grid-template-columns:1fr;justify-items:start;gap:14px}
  nav.main{justify-self:start;gap:10px 22px}
  .lang{justify-self:start}
  .hero{display:block;padding:44px var(--pad) 40px}
  .hero>div{min-width:0;max-width:100%}
  .hero h1,.lead,.felder dd,.page-head h1{overflow-wrap:anywhere}
  .felder{margin-top:40px}
  .felder dl{grid-template-columns:minmax(0,1fr)}
  .felder dt{padding-bottom:0}
  .felder dd{padding-bottom:16px}
  .side{margin-top:32px;align-items:flex-start}
  .frame,.cap{width:100%;max-width:360px}
  .frame{margin-right:0}
  .frame img{box-shadow:10px 10px 0 #efe4ee}
  .cap{text-align:left}
  .page{padding-top:40px}
  footer.site .footer-cols{flex-direction:column;gap:20px}
}
@media (max-width:600px){
  :root{--fs-l:28px}
}