/* =========================================================
   D.O. Weinbar – Startseite (Canva-Relaunch) v2
   Originalgetreu nach Canva: zentriert, einspaltig, hell.
   ========================================================= */

/* --- Schriften: SIL Open Font License, selbst gehostet ---------------------
   Ersetzen die ursprünglich aus Canva übernommenen Dateien. Die waren:
     Recoleta Alt Bold (Latinotype) · Nexa (Fontfabric) · Canva Sans (Colophon)
   Alle drei sind kommerziell lizenziert; Canva Sans sogar ausdrücklich nur
   „to be utilised by Canva Pty Ltd and associated parties" – sie durften von
   dieser Website nicht ausgeliefert werden.

   Die Ersatzschriften sind nach GEMESSENEN Metriken gewählt (Versalhöhe,
   x-Höhe, Laufweite einer Referenzzeile), nicht nach Augenmaß:
     Recoleta Alt Bold -> Playfair Display Bold  (Laufweite -0,3 %)
     Nexa              -> Montserrat             (x-Höhe am nächsten, +2,7 %)
     Canva Sans Bold   -> Inter Bold             (Versal-/x-Höhe am nächsten)
   Keine Einbindung über Google-Server – die Dateien liegen hier im Theme,
   es wird also keine Besucher-IP an Dritte übertragen.
   -------------------------------------------------------------------------- */
@font-face{font-family:"Weinbar Display";src:url("../fonts/playfair-display-700.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Weinbar Body";src:url("../fonts/montserrat-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Weinbar Body";src:url("../fonts/montserrat-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Weinbar Sub";src:url("../fonts/inter-700.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap;}

:root{
	--ink:#000;        /* Canva nutzt reines Schwarz für Text/Headline */
	--btn:#0E1318;     /* Pill-/Button-Hintergrund */
	--paper:#ffffff;
	--maxw:960px;
	--font-display:"Weinbar Display","Playfair Display",Georgia,serif;
	--font-body:"Weinbar Body",system-ui,-apple-system,"Segoe UI",sans-serif;
	--font-sub:"Weinbar Sub",var(--font-body);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

/* Layout-Helfer – alles zentriert (wie Canva) */
.wb-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.wb-sec{padding:110px 0;background:var(--paper);text-align:center;}

/* Überschriften */
.wb-h{font-family:var(--font-body);font-weight:700;font-size:clamp(2rem,4.5vw,2.5rem);margin:0 0 .6em;line-height:1.1;}
.wb-h--tag{font-weight:400;font-size:clamp(1.5rem,3.2vw,1.95rem);}  /* #moinlekkerwein / -karte / -leidenschaft */
.wb-lead{font-size:clamp(1.15rem,2.4vw,1.45rem);max-width:60ch;margin:0 auto;line-height:1.5;}
.wb-lead + .wb-lead{margin-top:1.1em;}
.wb-cta{margin-top:1.6rem;}

/* Buttons (Pills) */
.wb-btn{display:inline-block;background:var(--btn);color:var(--paper);text-decoration:none;font-weight:400;
	font-size:clamp(1.1rem,2.2vw,1.35rem);padding:.55em 1.5em;border-radius:999px;line-height:1.2;transition:transform .15s,opacity .15s;}
.wb-btn:hover{opacity:.85;transform:translateY(-1px);}

/* HERO
   Höhe fließend: am Desktop volle Bildschirmhöhe, am Handy ein kompaktes
   quadratisches Band – so macht es die Canva-Mobilansicht (375×370). */
.wb-hero{position:relative;min-height:min(100svh, max(340px, 97vw));display:flex;flex-direction:column;align-items:center;text-align:center;padding:60px 24px 56px;
	isolation:isolate;overflow:hidden;}
/* Foto und Abdunklung als eigene Ebenen hinter dem Inhalt. Das Foto ist um
   --hero-zoom vergrößert und oben festgehalten: Der Horizont rutscht so nach
   unten, das Logo steht im hellen Himmel statt auf den dunklen Hügeln, und
   unten fällt dafür etwas Feld weg. Bloß „oben ausrichten" reicht nicht –
   bei 3:2-Foto auf Desktop-Formaten bleibt oben kaum etwas zum Aufdecken.
   Den Himmel nach oben mit einer Farbe fortsetzen geht auch nicht: Er läuft
   von links dunkel nach rechts hell, jede Fläche hätte eine sichtbare Kante. */
.wb-hero{--hero-zoom:1.1;}  /* 1.2 schob den Horizont zu weit nach unten */
.wb-hero::before,
.wb-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;}
.wb-hero::before{background:url("../img/hero-vineyard.jpg") center top/cover no-repeat;
	transform:scale(var(--hero-zoom));transform-origin:center top;}
.wb-hero::after{background:linear-gradient(to bottom, rgba(255,255,255,.12) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,.46) 100%);}
.wb-hero__inner{display:flex;flex-direction:column;justify-content:space-between;align-items:center;flex:1 1 auto;width:100%;max-width:1000px;margin:0 auto;}
.wb-hero__top{display:flex;flex-direction:column;align-items:center;gap:22px;}
.wb-hero__bottom{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;}
/* Untergrenze 2.5rem, damit „D.O. WEINBAR" auch auf 320px-Geräten einzeilig
   bleibt; ab ~375px greift ohnehin der 12vw-Wert (unverändert). */
.wb-hero__title{font-family:var(--font-display);font-weight:700;color:var(--ink);text-transform:uppercase;
	font-size:clamp(2.5rem,12vw,8.2rem);line-height:.92;margin:0;}
.wb-hero__row{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:6px;}
.wb-hero__logo{width:120px;height:auto;flex:0 0 auto;}
/* Untergrenze 2.1rem ≈ 33.6px = Canva-Mobilwert (vorher 1.7rem → zu klein am Handy) */
.wb-hero__hours{font-family:var(--font-sub);font-weight:700;color:var(--paper);
	font-size:clamp(2.1rem,4.4vw,2.8rem);line-height:1.18;margin:0;text-shadow:0 1px 16px rgba(0,0,0,.35);}
.wb-hero__addr{font-size:clamp(1.05rem,2vw,1.25rem);color:#fff;margin:0;text-shadow:0 1px 10px rgba(0,0,0,.6);}
.wb-hero__addr a{text-decoration:none;}

/* #moin – zweispaltig: Text neben Foto */
.wb-moin__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;text-align:left;max-width:1060px;}
.wb-moin__text .wb-h{margin-bottom:.35em;}
.wb-moin__text p{font-size:1.45rem;margin:.6em 0;}  /* Canva: 23px – auch mobil */
.wb-sign{font-weight:700;margin-top:1em;}
.wb-tag{margin-top:.3em;}
.wb-tag span{opacity:.55;}
.wb-moin__photo{margin:0;}
.wb-moin__photo img{border-radius:4px;width:100%;}

/* Footer */
.wb-footer{background:var(--btn);color:var(--paper);padding:64px 0;text-align:center;font-size:1rem;}
.wb-footer a{color:var(--paper);}
.wb-footer__logo{filter:invert(1);margin:0 auto 16px;width:60px;}
.wb-footer__name{font-family:var(--font-display);font-size:1.8rem;margin:0 0 10px;text-transform:uppercase;}
.wb-footer p{margin:.25em 0;}
.wb-footer__legal{margin-top:14px;}
.wb-footer__copy{opacity:.55;margin-top:18px;font-size:.85rem;}

/* Veranstaltungen – gepflegte Termine */
.wb-events{list-style:none;margin:0 0 3rem;padding:0;max-width:640px;margin-left:auto;margin-right:auto;text-align:left;}
/* Mehr Luft unter „Veranstaltungen" als unter den anderen Überschriften:
   Dort folgt großer Fließtext, hier die kleine graue Datumszeile – mit dem
   üblichen Abstand las die sich wie eine Unterzeile der Überschrift.
   Innen- statt Außenabstand: Ein margin-top fiele mit dem margin-bottom
   der Überschrift zusammen, statt sich dazuzuaddieren. */
.wb-h + .wb-events{padding-top:clamp(1.1rem,3vw,1.8rem);}
.wb-event + .wb-event{margin-top:2.4rem;padding-top:2.4rem;border-top:1px solid rgba(0,0,0,.12);}
.wb-event__termin{font-family:var(--font-sub);font-weight:700;font-size:1.05rem;margin:0 0 .25em;opacity:.7;}
.wb-event__titel{font-family:var(--font-body);font-weight:700;font-size:clamp(1.25rem,2.4vw,1.5rem);line-height:1.25;margin:0 0 .4em;}
.wb-event__text{font-size:1.05rem;line-height:1.55;}
.wb-event__text p{margin:0 0 .7em;}
/* Plakat als Bild. Ab Tablet zweispaltig: Plakat links, Text rechts – ein
   Plakat in voller Spaltenbreite wäre bei mehreren Terminen zu dominant. */
.wb-event__bild{display:block;width:100%;height:auto;border-radius:4px;}
.wb-event__bildlink{display:block;}
.wb-event__bildlink:hover .wb-event__bild{opacity:.92;}
.wb-event--mit-bild .wb-event__bild{margin:0 0 1.1rem;}

@media (min-width:640px){
	.wb-event--mit-bild{display:grid;grid-template-columns:200px 1fr;gap:30px;align-items:start;}
	.wb-event--mit-bild > .wb-event__bild,
	.wb-event--mit-bild > .wb-event__bildlink{grid-column:1;grid-row:1 / span 4;margin:0;}
	.wb-event--mit-bild > *:not(.wb-event__bild):not(.wb-event__bildlink){grid-column:2;}
}
/* Ohne Bild: dezenter Textlink statt Knopf – ein dunkler Button pro Termin
   wirkt auf einer sonst rein typografischen Seite wie Verwaltungsmöbel. */
.wb-event__plakat{margin:1rem 0 0;font-size:1rem;}
.wb-event__plakat a{text-decoration:underline;text-underline-offset:3px;opacity:.75;}
.wb-event__plakat a::after{content:" \2192";text-decoration:none;}
.wb-event__plakat a:hover{opacity:1;}
@media (max-width:760px){
	.wb-events{text-align:center;margin-bottom:2.4rem;}
	.wb-event + .wb-event{margin-top:2rem;padding-top:2rem;}
}

/* Vergangene Veranstaltungen – dasselbe Markup, eine Stufe leiser:
   kleineres Plakat, gedämpfter Text. Wer nach unten scrollt, soll sehen,
   was los war, ohne dass es mit den kommenden Terminen konkurriert. */
.wb-vorbei{max-width:640px;margin:0 auto 3rem;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);}
/* Klappzeile: eigener Pfeil statt des Browser-Dreiecks, das je nach Browser
   anders aussieht (und in Safari einen eigenen Selektor braucht). */
.wb-vorbei__titel{display:flex;align-items:center;justify-content:center;gap:.6em;cursor:pointer;list-style:none;
	padding:1.1rem 0;font-family:var(--font-body);font-weight:400;font-size:clamp(1.2rem,2.4vw,1.45rem);}
.wb-vorbei__titel::-webkit-details-marker{display:none;}
.wb-vorbei__titel::after{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
	transform:translateY(-.15em) rotate(45deg);transition:transform .2s;}
.wb-vorbei[open] > .wb-vorbei__titel::after{transform:translateY(.1em) rotate(-135deg);}
.wb-vorbei__titel:hover{opacity:.75;}
.wb-vorbei__titel:focus-visible{outline:2px solid currentColor;outline-offset:4px;}
.wb-events--vorbei{margin:.6rem 0 2rem;}
.wb-events--vorbei .wb-event{opacity:.78;}
.wb-events--vorbei .wb-event + .wb-event{margin-top:1.8rem;padding-top:1.8rem;}
.wb-events--vorbei .wb-event__titel{font-size:clamp(1.1rem,2vw,1.25rem);}
.wb-events--vorbei .wb-event__text{font-size:1rem;}
.wb-events--vorbei .wb-event--mit-bild .wb-event__bild{max-width:160px;margin-left:auto;margin-right:auto;}
@media (min-width:640px){
	.wb-events--vorbei .wb-event--mit-bild{grid-template-columns:120px 1fr;gap:24px;}
	.wb-events--vorbei .wb-event--mit-bild .wb-event__bild{max-width:none;}
}

/* Instagram / Veranstaltungen
   Der Feed kommt von Smash Balloon; hier wird er nur eingepasst, nicht umgebaut.
   Zurückhaltend halten – das Plugin bringt eigene Styles mit, die bei Updates
   wechseln können. */
.wb-insta__feed{margin-top:40px;max-width:900px;margin-left:auto;margin-right:auto;}
.wb-insta__feed #sb_instagram{padding-bottom:0 !important;}
.wb-insta__feed .sbi_photo{border-radius:4px;}
/* Der plugin-eigene Follow-Button ist abgeschaltet (showfollow=false);
   falls er doch auftaucht, nicht in Plugin-Blau stehen lassen. */
.wb-insta__feed .sbi_follow_btn a{background:var(--btn) !important;border-radius:999px;}

/* Inhaltsseiten (Impressum, Datenschutz) – Fließtext linksbündig, lesbare Spalte */
.wb-page{text-align:left;}
.wb-page .wb-h{text-align:center;margin-bottom:1.1em;}
.wb-page .wb-cta{margin-top:3rem;text-align:center;}
.wb-prose{max-width:70ch;margin:0 auto;font-size:1.05rem;line-height:1.65;}
.wb-prose h2{font-family:var(--font-body);font-weight:700;font-size:1.35rem;margin:2em 0 .5em;}
.wb-prose h3{font-family:var(--font-body);font-weight:700;font-size:1.08rem;margin:1.6em 0 .4em;}
.wb-prose p{margin:0 0 1em;}
.wb-prose ul{margin:0 0 1em;padding-left:1.3em;}
.wb-prose li{margin:.3em 0;}
.wb-prose a{text-decoration:underline;}
.wb-prose strong{font-weight:700;}

/* Umbruch der Öffnungszeiten – nur mobil (Canva bricht nach „Samstags") */
.wb-brk{display:none;}

/* =========================================================
   Mobil (≤760px) – nachgebaut nach der Canva-Mobilansicht,
   gemessen bei 375×812: Hero 375×370, Buttons + Logo in EINER
   Reihe, Adresse schwarz auf weißem Band unter dem Foto.
   ========================================================= */
@media (max-width:760px){
	.wb-brk{display:inline;}
	.wb-sec{padding:64px 0;}

	/* Hero kompakt: schmale Innenabstände, Adressband sitzt bündig unten */
	.wb-hero{padding:30px 16px 0;}
	.wb-hero__top{gap:14px;}
	.wb-hero__bottom{gap:8px;}

	/* Buttons + Logo bleiben einreihig – vorher brach „Veranstaltungen"
	   in eine zweite Zeile und das Logo stand schief daneben. */
	.wb-hero__row{flex-wrap:nowrap;gap:8px;margin-top:2px;}
	.wb-hero__row .wb-btn{font-size:.82rem;padding:.62em 1em;white-space:nowrap;}
	.wb-hero__logo{width:58px;}

	/* Öffnungszeiten: so groß, dass „Mittwochs–Samstags" auch auf 320px-Geräten
	   noch in EINE Zeile passt (sonst dreizeiliger Umbruch statt zweizeilig). */
	.wb-hero__hours{font-size:clamp(1.6rem,8.5vw,2.1rem);}

	/* Adresse wie in Canva: kein Weiß auf Foto, sondern eigenes weißes Band
	   in voller Breite direkt unter dem Hero-Bild. */
	.wb-hero__addr{background:var(--paper);color:var(--ink);text-shadow:none;
		font-size:.92rem;line-height:1.35;
		margin:0 -16px;width:calc(100% + 32px);padding:11px 16px;}
	.wb-hero__addr a{text-decoration:underline;}

	/* #moin einspaltig (Foto unter den Text), Foto wie Canva 286px breit */
	.wb-moin__grid{grid-template-columns:1fr;gap:26px;text-align:center;}
	.wb-moin__photo{max-width:286px;margin:0 auto;}
}

/* Sehr schmale Geräte (iPhone SE & Co.): Button-Reihe zusätzlich verkleinern,
   damit Reservierung + Logo + Veranstaltungen weiterhin in eine Zeile passen. */
@media (max-width:360px){
	.wb-hero__row{gap:6px;}
	.wb-hero__row .wb-btn{font-size:.75rem;padding:.6em .85em;}
	.wb-hero__logo{width:46px;}
}