@import url("../fonts/fonts.css"); /* lokal gehostete Schriften (DSGVO): Cormorant Garamond + Varta */
/* =====================================================================
   WIENINGER · UI-Basis  —  wgn-ui.css
   Zentrale Design-Tokens + Button-System. Wird von ALLEN Widgets geteilt
   (Header, Hero, …). Einzige Quelle der Tokens.
   ===================================================================== */

/* ---------- Design-Tokens ---------- */
:root {
	/* CI Brand Guide 2026 (Sophie/Katharina). Primaer = Oliv (NICHT Rot;
	   Bordeaux nur Mini-Akzent). Token-Namen bleiben, damit alle Widgets ohne
	   Markup-Aenderung umfaerben. */
	--wgn-cream:      #e7e0ce;   /* Sektions-/Sand-Hintergrund */
	--wgn-paper:      #f0ece8;   /* Seiten-/Papier-Hintergrund */
	--wgn-ink:        #46462d;   /* Text & Ueberschriften (Oliv) */
	--wgn-ink-soft:   #5f5c49;   /* gedaempfter Text (AA-konform) */
	--wgn-line:       #d8cfba;   /* Linien/Raender */
	--wgn-red:        #46462d;   /* PRIMAER (Buttons/Akzent) = Oliv */
	--wgn-red-hover:  #84784c;   /* Hover = Gold */
	--wgn-bordeaux:   #831716;   /* echtes Bordeaux, nur sparsam */
	--wgn-dark:       #4c211b;   /* dunkle Sektionen/Footer/Overlay (Wein-Braun) */
	--wgn-gold:       #84784c;   /* Sekundaer-Akzent (Gold/Oliv-Gold) */
	--wgn-gold-light: #d3bd86;   /* HELLES Gold - nur fuer Akzente UEBER Fotos (Kontrast) */
	--wgn-blue:       #4a6678;   /* Akzent Blaugrau (Links/sekundaer) */
	--wgn-blue-soft:  #b9d0d5;   /* weicher Hintergrund-Akzent */

	--wgn-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--wgn-sans:  "Varta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--wgn-shell:  1280px;                         /* max. Inhaltsbreite */
	--wgn-pad-x:  clamp(1rem, 4vw, 3rem);
	--wgn-bar-h:  clamp(4rem, 6vw, 5.75rem);      /* Header: Hauptbar transparent */
	--wgn-bar-h-stuck: clamp(3.5rem, 4.5vw, 4.5rem);
	--wgn-top-h:  2.25rem;

	--wgn-ease:   cubic-bezier(.22,.61,.36,1);
	--wgn-shadow: 0 .25rem 1.5rem rgba(30,30,30,.10);
}

/* ---------- Überlauf-Riegel ----------
   Verhindert horizontalen Seiten-Überlauf (z. B. enge Mobile-Spalten / nowrap-
   Texte). Ohne das bläht ein Überlauf den Initial-Containing-Block auf → fixed-
   Elemente wie das Off-Canvas-Menü (right:0 / 86vw) landen rechts außerhalb des
   Bildschirms. `clip` statt `hidden`, damit der sticky Header NICHT bricht. */
html { overflow-x: clip; }

/* ---------- A11y-Hilfsklasse (nur für Screenreader) ---------- */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; white-space: nowrap;
}

/* ---------- Button-System ---------- */
.wgn-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	font-family: var(--wgn-sans);
	font-weight: 600; font-size: .82rem; line-height: 1.1;
	letter-spacing: .1em; text-transform: uppercase; text-align: center;
	padding: .95em 1.9em;
	border: 1.5px solid transparent; border-radius: .2rem;
	cursor: pointer; text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: background .25s var(--wgn-ease), color .25s var(--wgn-ease),
	            border-color .25s var(--wgn-ease), transform .15s var(--wgn-ease);
}
.wgn-btn:active { transform: translateY(1px); }
.wgn-btn:focus-visible { outline: 2px solid var(--wgn-red); outline-offset: 3px; }

/* gefüllt / rot (primärer CTA) */
.wgn-btn--primary { background: var(--wgn-red); color: #fff; border-color: var(--wgn-red); }
.wgn-btn--primary:hover { background: var(--wgn-red-hover); border-color: var(--wgn-red-hover); color: #fff; }

/* heller Umriss (auf dunklem/Bild-Hintergrund) */
.wgn-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); }
.wgn-btn--ghost:hover { background: #fff; color: var(--wgn-ink); border-color: #fff; }

/* dunkel gefüllt (auf hellem Hintergrund) */
.wgn-btn--ink { background: var(--wgn-ink); color: #fff; border-color: var(--wgn-ink); }
.wgn-btn--ink:hover { background: #000; border-color: #000; color: #fff; }

/* dunkler Umriss (auf hellem Hintergrund) */
.wgn-btn--outline { background: transparent; color: var(--wgn-ink); border-color: var(--wgn-ink); }
.wgn-btn--outline:hover { background: var(--wgn-ink); color: #fff; }

/* gold gefüllt (Akzent) */
.wgn-btn--gold { background: var(--wgn-gold); color: #fff; border-color: var(--wgn-gold); }
.wgn-btn--gold:hover { background: #a99863; border-color: #a99863; color: #fff; }

/* heller Umriss auf dunklem Grund (z. B. Weinclub) */
.wgn-btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.wgn-btn--light:hover { background: var(--wgn-paper); color: var(--wgn-dark); border-color: var(--wgn-paper); }

/* ---------- Schutz gegen globale Kit-Linkfarbe ----------
   Das Elementor-Kit setzt jetzt site-weit a { color: Blaugrau } (0-1-1).
   Doppelklassige Selektoren (0-2-0) halten die Button-Textfarben stabil. */
.wgn-btn.wgn-btn--primary, .wgn-btn.wgn-btn--primary:hover { color: #fff; }
.wgn-btn.wgn-btn--ink, .wgn-btn.wgn-btn--ink:hover { color: #fff; }
.wgn-btn.wgn-btn--ghost { color: #fff; }
.wgn-btn.wgn-btn--ghost:hover { color: var(--wgn-ink); }
.wgn-btn.wgn-btn--club { color: var(--wgn-gold); }
.wgn-btn.wgn-btn--club:hover { color: #fff; }
.wgn-btn.wgn-btn--disabled { color: var(--wgn-ink-soft); }
.wgn-btn.wgn-btn--gold, .wgn-btn.wgn-btn--gold:hover { color: #fff; }
.wgn-btn.wgn-btn--light { color: #fff; }
.wgn-btn.wgn-btn--light:hover { color: var(--wgn-dark); }
.wgn-btn.wgn-btn--outline { color: var(--wgn-ink); }
.wgn-btn.wgn-btn--outline:hover { color: #fff; }

/* ---------- Layout-Utility ----------
   .wgn-tight-top auf einem Elementor-Container: zieht die Widget-Sektion
   darin naeher an die vorige Sektion (z. B. Kacheln direkt nach einem Intro,
   sonst addieren sich zwei grosse Sektions-Paddings). */
.wgn-tight-top section { padding-top: clamp(.5rem, 2vw, 1.5rem) !important; }