/* ============================================================
   Weingut Klug - Design-System
   Uebernommen aus dem Entwurf (weingut-klug.at, src/style.css).
   Die Werte hier sind die Wahrheit; in Elementor werden dieselben
   Farben und Schriften als globale Werte eingetragen, damit die
   Widgets von sich aus richtig aussehen.
   ============================================================ */

:root {
  --paper: #FFFFFF;
  --paper-2: #FAFAF7;
  --ink: #11130B;
  --ink-2: #4F5445;
  --ink-3: #8E9382;
  --line: #E7E8E0;
  --line-2: #F0F1EB;
  --accent: #7E8B06;
  --accent-bright: #B7C61E;

  --maxw: 1420px;
  --gut: clamp(18px, 5vw, 72px);

  --font-display: "Archivo", "Geist", system-ui, sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
}

/* --- Grundlagen ------------------------------------------------------ */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 350;
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4,
.elementor-heading-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "wdth" 112;
  letter-spacing: -.025em;
  line-height: .98;
  text-wrap: balance;
  color: var(--ink);
}

h1 { font-size: clamp(2.9rem, 8.4vw, 7.2rem); }
h2 { font-size: clamp(2.1rem, 5.2vw, 4.1rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.1; letter-spacing: -.018em; }
h4 { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.2; letter-spacing: -.015em; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--accent-bright); color: var(--ink); }

/* --- Hilfsklassen ----------------------------------------------------
   In Elementor unter "Erweitert > CSS-Klassen" eintragen.
   ------------------------------------------------------------------- */

/* Fliesstext zweiter Ordnung: etwas groesser, ruhiger, begrenzte Zeilenlaenge */
.klug-lead {
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  color: var(--ink-2);
  max-width: 54ch;
}

/* Kleine Grossbuchstaben-Zeile, z. B. "8 HEKTAR RIEDEN" */
.label,
.klug-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Grosses Zitat */
.klug-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "wdth" 108;
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -.022em;
  max-width: 20ch;
}
.klug-quote-by {
  display: block;
  font-family: var(--font-body);
  font-size: .86rem;
  color: var(--ink-3);
  margin-top: 20px;
  letter-spacing: 0;
}

/* Zahl mit Beschriftung, fuer die Eckdaten (8 ha, 13 Weine, 2. Generation) */
.klug-fact b {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "wdth" 116;
  font-size: clamp(2.9rem, 6vw, 5rem);
  line-height: .95;
  letter-spacing: -.035em;
}
.klug-fact span {
  display: block;
  font-size: .88rem;
  color: var(--ink-2);
  margin-top: 14px;
  max-width: 26ch;
}

/* Trennlinie wie im Entwurf */
.klug-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* --- Buttons ---------------------------------------------------------
   Gilt auch fuer Elementor-Buttons, damit niemand sie einzeln stylen muss.
   ------------------------------------------------------------------- */

.klug-btn,
.elementor-button,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 450;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 22px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  transition: transform .18s ease, background .3s, color .3s, border-color .3s;
  white-space: nowrap;
}

.klug-btn:hover,
.elementor-button:hover,
.wp-block-button__link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.klug-btn:active,
.elementor-button:active { transform: translateY(1px); }

/* Heller Button: in Elementor die Klasse klug-btn-ghost zusaetzlich setzen */
.klug-btn-ghost,
.elementor-button.klug-btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.klug-btn-ghost:hover,
.elementor-button.klug-btn-ghost:hover {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

/* --- Oeffnungsstatus -------------------------------------------------
   Ausgabe von [klug_status].
   ------------------------------------------------------------------- */

.klug-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.klug-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  flex: 0 0 auto;
}
.klug-dot.is-open {
  background: var(--accent-bright);
  box-shadow: 0 0 0 4px rgba(183, 198, 30, .25);
}

/* --- Bildband --------------------------------------------------------
   Ein Bild ueber die ganze Breite. In Elementor: Abschnitt auf volle
   Breite, Innenabstand 0, Klasse klug-band am Abschnitt.
   ------------------------------------------------------------------- */

.klug-band,
.klug-band .elementor-widget-image,
.klug-band figure { margin: 0; }

.klug-band img {
  width: 100%;
  height: clamp(340px, 62vh, 640px);
  object-fit: cover;
}

/* --- Bildkachel mit Zoom beim Darueberfahren ------------------------- */

.klug-tile .elementor-widget-image,
.klug-tile figure { overflow: hidden; margin: 0; }

.klug-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.klug-tile:hover img { transform: scale(1.05); }

/* --- Oeffnungszeiten als Liste --------------------------------------- */

.klug-hours { margin: 0; }
.klug-hours .row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line-2);
}
.klug-hours dt { font-weight: 400; }
.klug-hours .sub {
  display: block;
  font-size: .82rem;
  color: var(--ink-3);
}
.klug-hours dd { margin: 0; white-space: nowrap; }
.klug-hours .rest dt,
.klug-hours .rest dd { color: var(--ink-3); }

/* --- Ruhige Einblendung ---------------------------------------------
   Elementor bringt eigene Animationen mit; diese hier ist die aus dem
   Entwurf und respektiert "Bewegung reduzieren" im Betriebssystem.
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .klug-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
  }
  .klug-reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

/* --- Druck ----------------------------------------------------------- */

@media print {
  .klug-band img { height: auto; }
  .klug-reveal { opacity: 1; transform: none; }
}