/* =====================================================================
   moselriesling.com — Ergänzungen zum pruem.org-Design (site.css)
   Schwarz. Weiß. Rot. Bilder in Schwarz-Weiß.
   ===================================================================== */

/* ---------- Bilder: immer Schwarz-Weiß, auch beim Hover ---------- */
.teaser img,.albums img,.gallery img{filter:grayscale(1) contrast(1.15) brightness(.82);}
.teaser a:hover img,.albums a:hover img,.gallery button:hover img{filter:grayscale(1) contrast(1.05) brightness(.95);}

/* ---------- Hero Startseite mit Bild ---------- */
.hero.bild{background:var(--bk);}
.hero.bild::before{content:"";position:absolute;inset:0;background:url(../bilder/wehlen-schleife.jpg) center 40%/cover no-repeat;
  filter:grayscale(1) contrast(1.15) brightness(.42);z-index:0;}
.hero.bild::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(7,7,7,.35),rgba(7,7,7,.15) 50%,rgba(7,7,7,.95));z-index:0;}
.hero.bild>*:not(.claim):not(.credit){position:relative;z-index:2;}
.hero.bild .claim{z-index:2;}
.hero.bild{padding-bottom:46px;}
.hero.bild .l2{font-size:clamp(96px,27vw,520px);}
.hero .meta a:hover{color:var(--red);}
.hero .credit{position:absolute;left:var(--gut);bottom:12px;color:var(--grey);z-index:3;font-size:10.5px;}

/* ---------- Kopf: Marke ---------- */
.top .logo small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--grey);display:block;margin-top:5px;text-transform:uppercase;}
@media(max-width:640px){.top .logo small{display:none;}}

/* ---------- Unterseiten-Kopf mit Bild ---------- */
.phead.bild{min-height:min(70vh,640px);display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(48px,6vw,76px);}
.phead .pbg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;filter:grayscale(1) contrast(1.15) brightness(.45);z-index:0;}
.phead.bild::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(7,7,7,.55),rgba(7,7,7,.1) 45%,rgba(7,7,7,.98));z-index:0;}
.phead.bild>*:not(.pbg){position:relative;z-index:1;}
.phead .credit{position:absolute;right:var(--gut);bottom:14px;color:var(--grey);z-index:1;text-align:right;font-size:10.5px;}
.phead .intro{max-width:720px;}

/* ---------- Kapitelnavigation (Inhaltsverzeichnis) ---------- */
.tnav.kap{padding-top:6px;}
.tnav.kap a{max-width:100%;overflow-wrap:anywhere;}
.tnav.kap a b{font-weight:700;color:var(--red);margin-right:6px;}
.tnav.kap a[aria-current] b{color:var(--bk);}

/* ---------- Artikel ---------- */
.art{padding:0 var(--gut);max-width:1180px;}
.art .p{max-width:760px;}
.art h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.88;margin:clamp(70px,10vw,130px) 0 22px;
  font-size:clamp(44px,7vw,110px);letter-spacing:-.005em;break-after:avoid;page-break-after:avoid;scroll-margin-top:80px;}
.art h2 .n{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--red);margin-bottom:14px;}
.art h2 i{font-family:var(--serif);font-style:italic;text-transform:none;font-size:.62em;}
.art section:nth-of-type(even) h2{color:var(--red);}
.art section:nth-of-type(3n) h2{color:transparent;-webkit-text-stroke:1.4px var(--wh);}
.art section:nth-of-type(3n) h2 i{color:var(--wh);-webkit-text-stroke:0;}
.art h3{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(26px,2.6vw,36px);line-height:1.05;margin:44px 0 12px;max-width:760px;
  break-after:avoid;page-break-after:avoid;}
.art h3::before{content:"";display:inline-block;width:22px;height:2px;background:var(--red);vertical-align:.32em;margin-right:12px;}
.art h4{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin:32px 0 8px;break-after:avoid;}
.art p{margin:0 0 18px;max-width:760px;font-size:clamp(18px,1.35vw,21px);line-height:1.5;}
.art p.lead{font-size:clamp(21px,1.9vw,28px);line-height:1.25;font-style:italic;max-width:820px;}
.art p.lead::first-letter{color:var(--red);}
.art a{border-bottom:1px solid var(--red);}
.art a:hover{color:var(--red);}
.art ul,.art ol{max-width:760px;margin:0 0 20px;padding-left:1.2em;}
.art li{margin-bottom:8px;font-size:clamp(17px,1.3vw,20px);}
.art li::marker{color:var(--red);}
.art strong{font-weight:400;color:var(--red);font-style:normal;}
.art em{font-style:italic;}
.art .mono.hint{color:var(--grey);margin-top:-6px;}

/* Zwei Spalten: Text + Randnotiz */
.art .spalten{display:grid;grid-template-columns:minmax(0,760px) minmax(220px,1fr);gap:20px 48px;align-items:start;}
.art .rand{font-size:16px;line-height:1.4;color:var(--grey);border-top:2px solid var(--red);padding-top:10px;position:sticky;top:90px;}
.art .rand b{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--wh);display:block;margin-bottom:8px;}
.art .rand p{font-size:16px;margin:0 0 10px;}
@media(max-width:900px){.art .spalten{grid-template-columns:1fr;} .art .rand{position:static;}}

/* Zitate */
.zit{margin:36px 0;padding:0 0 0 clamp(18px,3vw,40px);border-left:3px solid var(--red);max-width:820px;}
.zit p{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.2vw,32px);line-height:1.15;margin:0 0 12px;max-width:none;}
.zit p::before{content:"„";color:var(--red);}
.zit p::after{content:"“";color:var(--red);}
.zit cite{display:block;font-family:var(--mono);font-style:normal;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);}
.zit cite a{border:0;color:var(--wh);}
.zit.gross{border:0;padding:0;max-width:none;margin:clamp(50px,7vw,100px) 0;}
.zit.gross p{font-family:var(--disp);font-style:normal;text-transform:uppercase;font-size:clamp(36px,6vw,92px);line-height:.9;color:var(--wh);}
.zit.gross p::before,.zit.gross p::after{content:"";}
.zit.gross p em{font-family:var(--serif);font-style:italic;text-transform:none;color:var(--red);font-size:.85em;}
.zit.gross cite{margin-top:16px;}

/* Kernidee-Kasten */
.kern{border:1.5px solid var(--wh);padding:18px 22px;margin:30px 0;max-width:760px;display:grid;grid-template-columns:auto 1fr;gap:14px 18px;align-items:start;}
.kern b{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bk);background:var(--red);padding:5px 8px;white-space:nowrap;}
.kern p{margin:0;font-size:clamp(17px,1.3vw,20px);}
.kern.rot{border-color:var(--red);}

/* Fakten (Steckbrief) */
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border-top:2px solid var(--wh);border-bottom:1px solid var(--line);margin:34px 0 40px;}
.fakten div{padding:16px 18px 14px 0;border-bottom:1px solid var(--line);}
.fakten dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:6px;}
.fakten dd{margin:0;font-family:var(--disp);font-size:clamp(24px,2.4vw,38px);line-height:1;text-transform:uppercase;}
.fakten dd small{display:block;font-family:var(--serif);font-style:italic;text-transform:none;font-size:16px;color:var(--grey);margin-top:6px;line-height:1.25;}
.fakten dd.red{color:var(--red);}

/* Kennzahlen-Zeile (Startseite) */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:4px;}
.zahlen div{border:1px solid var(--line);padding:22px 20px 18px;}
.zahlen b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(40px,4.4vw,72px);line-height:.9;color:var(--red);white-space:nowrap;}
.zahlen div:nth-child(even) b{color:var(--wh);}
.zahlen span{display:block;margin-top:10px;color:var(--grey);}

/* Tabellen */
.tab{width:100%;max-width:900px;border-collapse:collapse;margin:26px 0 40px;font-size:clamp(16px,1.2vw,19px);}
.tab th{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);text-align:left;padding:10px 14px 10px 0;border-bottom:2px solid var(--wh);vertical-align:bottom;}
.tab td{padding:10px 14px 10px 0;border-bottom:1px solid var(--line);vertical-align:top;}
.tab td:first-child{font-family:var(--disp);text-transform:uppercase;font-size:1.15em;letter-spacing:.01em;white-space:nowrap;}
.tab.zahl td:not(:first-child){font-family:var(--mono);font-size:.85em;}
.tab caption{caption-side:bottom;text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);padding:10px 0;}
@media(max-width:640px){.tab td:first-child{white-space:normal;font-size:1em;}}

/* Zeitleiste */
.zeit{list-style:none;margin:30px 0 40px;padding:0;max-width:900px;border-top:2px solid var(--wh);}
.zeit li{display:grid;grid-template-columns:150px 1fr;gap:10px 28px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline;}
.zeit .j{font-family:var(--disp);font-size:clamp(24px,2.6vw,40px);line-height:1;text-transform:uppercase;color:var(--red);}
.zeit li:nth-child(4n+3) .j{color:var(--wh);}
.zeit li:nth-child(4n+1) .j{color:transparent;-webkit-text-stroke:1.2px var(--wh);}
.zeit .t{font-size:clamp(17px,1.25vw,20px);line-height:1.4;}
.zeit .t small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-top:5px;}
@media(max-width:640px){.zeit li{grid-template-columns:1fr;gap:4px;}}

/* Bilder im Artikel */
.fig{margin:40px 0;max-width:900px;}
.fig.breit{max-width:none;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));}
.fig.breit img{width:100%;max-height:78vh;object-fit:cover;}
.fig.schmal{max-width:520px;}
.fig.rechts{float:right;max-width:min(46%,460px);margin:6px 0 24px 40px;}
.fig img{width:100%;filter:grayscale(1) contrast(1.1);background:var(--bk2);}
.fig figcaption{display:flex;gap:14px;align-items:baseline;padding:10px 0 0;font-size:15px;line-height:1.35;color:var(--grey);font-style:italic;max-width:760px;}
.fig.breit figcaption{padding:10px var(--gut) 0;}
.fig figcaption::before{content:"";flex:0 0 22px;height:2px;background:var(--red);transform:translateY(-.35em);}
.fig figcaption b{font-family:var(--mono);font-style:normal;font-weight:400;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--wh);display:block;margin-bottom:3px;}
@media(max-width:640px){.fig.rechts{float:none;max-width:none;margin:30px 0;}}
.figs2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:40px 0;max-width:1000px;}
.figs2 .fig{margin:0;max-width:none;}
.figs3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:40px 0;}
.figs3 .fig{margin:0;max-width:none;}
.figs3 .fig img,.figs2 .fig img{aspect-ratio:4/3;object-fit:cover;}
@media(max-width:760px){.figs2,.figs3{grid-template-columns:1fr;}}

/* Karten-Liste (Orte, Weingüter) */
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:4px;margin:30px 0 40px;}
.karte{border:1px solid var(--line);padding:22px 20px 20px;position:relative;isolation:isolate;transition:border-color .2s;}
.karte:hover{border-color:var(--wh);}
.karte .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:10px;display:block;}
.karte h3{margin:0 0 10px;font-size:clamp(26px,2.2vw,34px);}
.karte h3::before{display:none;}
.karte h3 a{border:0;}
.karte p{font-size:16.5px;line-height:1.4;margin:0 0 8px;color:var(--wh);}
.karte p.g{color:var(--grey);}
.karte .lag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--grey);line-height:1.6;}
.karte.rot{border-color:var(--red);}
.karte .fig{margin:0 0 16px;}
.karte .fig img{aspect-ratio:3/2;object-fit:cover;}

/* Prädikatsleiter */
.leiter{list-style:none;margin:30px 0 40px;padding:0;max-width:900px;}
.leiter li{display:grid;grid-template-columns:minmax(140px,220px) 1fr auto;gap:8px 24px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line);}
.leiter li:last-child{border-bottom:1px solid var(--line);}
.leiter .h{font-family:var(--disp);text-transform:uppercase;font-size:clamp(24px,3vw,44px);line-height:.95;}
.leiter li:nth-child(odd) .h{color:var(--red);}
.leiter .d{font-size:clamp(16px,1.2vw,19px);line-height:1.4;}
.leiter .o{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--grey);white-space:nowrap;}
@media(max-width:640px){.leiter li{grid-template-columns:1fr;} .leiter .o{white-space:normal;}}

/* Bibliothek */
.buecher{list-style:none;margin:20px 0 40px;padding:0;counter-reset:b;}
.buecher li{display:grid;grid-template-columns:56px minmax(0,1.1fr) minmax(0,1.3fr);gap:10px 28px;padding:clamp(22px,3vw,40px) 0;border-top:1px solid var(--line);}
.buecher li:last-child{border-bottom:1px solid var(--line);}
.buecher .n{font-family:var(--mono);font-size:13px;color:var(--red);padding-top:.6em;}
.buecher .h{font-family:var(--disp);text-transform:uppercase;font-size:clamp(28px,3.6vw,56px);line-height:.92;}
.buecher li:nth-child(3n+2) .h{font-family:var(--serif);font-style:italic;text-transform:none;font-size:clamp(32px,4vw,62px);}
.buecher li:nth-child(4n+3) .h{color:transparent;-webkit-text-stroke:1.3px var(--wh);}
.buecher .h small{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--grey);margin-top:10px;-webkit-text-stroke:0;text-transform:uppercase;font-style:normal;}
.buecher .d{font-size:clamp(16px,1.25vw,19px);line-height:1.4;}
.buecher .d p{margin:0 0 10px;font-size:inherit;}
.buecher .d .mehr{display:inline-block;border-bottom:2px solid var(--red);font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;margin-top:4px;}
.buecher .d .mehr:hover{color:var(--red);}
@media(max-width:760px){.buecher li{grid-template-columns:34px 1fr;} .buecher .d{grid-column:2;}}

/* Quellen */
.quellen{max-width:820px;margin:20px 0 0;padding:0;list-style:none;}
.quellen li{font-size:15.5px;line-height:1.4;color:var(--grey);padding:8px 0;border-top:1px solid var(--line);}
.quellen li b{color:var(--wh);font-weight:400;}
.quellen li a{color:var(--wh);}

/* Weiterlesen-Kacheln */
.weiter{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:4px;margin:20px 0 0;}
.weiter a{border:1.5px solid var(--wh);padding:20px 20px 18px;display:block;position:relative;isolation:isolate;overflow:hidden;transition:color .25s;}
.weiter a::before{content:"";position:absolute;inset:0;background:var(--red);transform:translateY(101%);transition:transform .4s cubic-bezier(.7,0,.2,1);z-index:-1;}
.weiter a:hover::before{transform:none;}
.weiter a:hover{color:var(--bk);}
.weiter a .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:10px;}
.weiter a:hover .k{color:var(--bk);}
.weiter a .h{font-family:var(--disp);text-transform:uppercase;font-size:clamp(26px,2.6vw,38px);line-height:.92;display:block;}
.weiter a .d{display:block;margin-top:10px;font-size:16px;line-height:1.35;font-style:italic;}

/* Start: Laufband Orte */
.band.orte a::after{content:"·";}

/* Start: Aus der Bibliothek */
.stimmen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:4px;}
.stimme{border:1px solid var(--line);padding:26px 24px 22px;display:flex;flex-direction:column;gap:14px;}
.stimme p{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.6vw,25px);line-height:1.2;margin:0;flex:1;}
.stimme p::before{content:"„";color:var(--red);}
.stimme p::after{content:"“";color:var(--red);}
.stimme cite{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);}
.stimme cite b{color:var(--wh);font-weight:400;display:block;margin-bottom:3px;}

/* Bilderseite */
.gallery figure{margin:0;}
.gallery figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);padding:6px 0 14px;}
.gallery button{width:100%;}

/* Sprachhinweis / Hinweis-Kasten */
.hinweis{border-top:2px solid var(--red);padding:14px 0 0;color:var(--grey);font-style:italic;max-width:760px;margin:30px 0;}

/* Fußzeile: kleinere Wortmarke */
.foot .big{font-size:clamp(70px,22vw,400px);}
.foot .big span{color:var(--wh);-webkit-text-stroke:0;}

/* Druck */
@media print{
  .art h2,.art h3,.art h4{break-after:avoid;page-break-after:avoid;}
  .fig,.zit,.kern,.fakten,table{break-inside:avoid;}
  .hero.bild::before,.phead .pbg{display:none;}
}

/* Listen im Artikel: Sonderformen ohne 760px-Begrenzung */
.art ol.buecher{max-width:none;padding:0;}
.art ol.zeit,.art ol.leiter{max-width:900px;padding:0;}
.art ol.buecher li,.art ol.zeit li,.art ol.leiter li{margin:0;font-size:inherit;}
.art ul.quellen{max-width:820px;padding:0;}
.art p.mono.hint{font-size:11.5px;letter-spacing:.12em;line-height:1.5;margin:-4px 0 14px;}

/* Wortmarke moselriesling.com */
.top .logo{text-transform:none;letter-spacing:.01em;color:var(--red);}
.top .logo b{color:var(--wh);}
body.mopen .top .logo{color:var(--wh);} body.mopen .top .logo b{color:var(--bk);}
.hero .claim{max-width:none;}
.hero .claim .brand{font-size:min(3.4vw,64px);text-transform:none;color:var(--red);white-space:nowrap;}
.hero .claim .brand b{color:var(--wh);}
@media(max-width:640px){.hero .claim .brand{font-size:min(8.2vw,34px);}}