/* 
Theme Name: Württemberger Medien
Theme URI: https://github.com/elementor/hello-theme/
Description: Württemberger Medien Elementor Child Theme
Author: Württemberger Medien
Author URI: https://w-medien.de/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elemento
r-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ===========================================================
   Design Tokens (Single Source of Truth)
   ===========================================================
   Generiert via https://coreframework.com.
   Werte koennen pro Projekt/Designer variieren — Struktur und
   Variablennamen bleiben identisch. Aenderungen ausschliesslich
   hier; nicht im Customizer, Elementor Custom CSS oder pro Seite.
   =========================================================== */

:root {
    --space-4xs: clamp(0.52rem, calc(-0.03vw + 0.54rem), 0.49rem);
    --space-3xs: clamp(0.66rem, calc(0.04vw + 0.63rem), 0.7rem);
    --space-2xs: clamp(0.82rem, calc(0.17vw + 0.74rem), 0.99rem);
    --space-xs:  clamp(1.02rem, calc(0.37vw + 0.85rem), 1.4rem);
    --space-s:   clamp(1.28rem, calc(0.69vw + 0.95rem), 1.98rem);
    --space-m:   clamp(1.6rem,  calc(1.17vw + 1.04rem), 2.8rem);
    --space-l:   clamp(2rem,    calc(1.92vw + 1.08rem), 3.96rem);
    --space-xl:  clamp(2.5rem,  calc(3.03vw + 1.05rem), 5.6rem);
    --space-2xl: clamp(3.13rem, calc(4.69vw + 0.88rem), 7.92rem);
    --space-3xl: clamp(3.91rem, calc(7.13vw + 0.5rem),  11.19rem);
    --space-4xl: clamp(4.88rem, calc(10.71vw + -0.24rem), 15.83rem);

    --text-xs:  clamp(1.42rem, calc(-0.03vw + 1.44rem), 1.39rem);
    --text-s:   clamp(1.6rem,  calc(0.07vw + 1.57rem), 1.67rem);
    --text-m:   clamp(1.8rem,  calc(0.2vw + 1.71rem),  2rem);
    --text-l:   clamp(2.02rem, calc(0.37vw + 1.85rem), 2.4rem);
    --text-xl:  clamp(2.28rem, calc(0.59vw + 2rem),    2.88rem);
    --text-2xl: clamp(2.56rem, calc(0.87vw + 2.15rem), 3.46rem);
    --text-3xl: clamp(2.88rem, calc(1.24vw + 2.29rem), 4.15rem);
    --text-4xl: clamp(3.24rem, calc(1.7vw + 2.43rem),  4.98rem);
    --text-5xl: clamp(6.48rem, calc(3.4vw + 4.86rem),  9.96rem);

    --radius-xs:   clamp(0.4rem, calc(0vw + 0.4rem),     0.4rem);
    --radius-s:    clamp(0.6rem, calc(-0.2vw + 0.89rem), 0.8rem);
    --radius-m:    clamp(1rem,   calc(-0.2vw + 1.29rem), 1.2rem);
    --radius-l:    clamp(1.6rem, calc(-0.39vw + 2.19rem), 2rem);
    --radius-xl:   clamp(2.6rem, calc(-0.59vw + 3.48rem), 3.2rem);
    --radius-full: 999rem;

    --shadow-primary: hsla(0, 0%, 0%, 0.15);
    --shadow-xs: 0 1px 2px var(--shadow-primary);
    --shadow-s:  0 1.5px 3px var(--shadow-primary);
    --shadow-m:  0 2px 6px var(--shadow-primary);
    --shadow-l:  0 3px 12px var(--shadow-primary);
    --shadow-xl: 0 6px 48px var(--shadow-primary);
}

/* 1rem = 10px Basis. NIE entfernen — sonst skalieren alle Tokens 60% zu gross. */
html {
    font-size: 62.5%;
}

body {
    font-size: 18px;
}

/*
    Add your custom styles here
*/

.option {
  cursor: pointer;
  position: relative;
  margin-bottom: 1px;
}
.contact-info {
  position: fixed;
  top: 30%;
  right: 0px;
z-index:9999;
}
 
.option i {
  display: block;
  font-size: 20px;
  background: #262626;
  color: #fff;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
}
 
.mylocation {
  position: absolute;
  height: 50px;
  width: 220px;
  top: 0;
  right: -180px;
  z-index: -1;
  background: #262626;
  color: #fff;
  line-height: 50px;
  text-align: center;
  transition: 0.5s;
}
.option:hover .mylocation {
  position: absolute;
  right: 50px;
}
 
.mylocation .social-media li {
  display: block;
}
.social-media i {
  background: none;
  color: #fff;
  position: absolute;
  top: 0px;
  right: 0;
}
/* ====== K2 Footer Premium Rebuild (2026-05-15) ====== */

/* Logo helle Variante via CSS-Filter -- aktuelles dunkles Logo wird automatisch
   zu weiss umgerechnet. Spart eine separate light-Logo-Datei. */
.elementor .footer-logo-light img {
  filter: brightness(0) invert(1);
}

/* Partner-Logo (W-Medien) ebenfalls hell darstellen. SVG wird via Filter
   invertiert sichtbar auf dunklem Footer. */
.elementor .footer-partner-logo-light svg,
.elementor .footer-partner-logo-light img {
  filter: brightness(0) invert(1);
}
.elementor .footer-partner-logo-light .elementor-icon-box-icon {
  background: transparent !important;
}

/* Footer-Hover auf icon-box-Frames (CTA-Effekt fuer anklickbare Kontaktitems).
   Scope ueber den echten Footer-Wrapper .elementor-location-footer -- die
   _css_classes-Klasse "footer-main-premium" rendert Elementor auf dem Container
   NICHT, daher waren die alten .footer-main-premium-Regeln wirkungslos (rote
   Default-Link-Farbe schlug auf Impressum/Datenschutz durch). */
.elementor-location-footer .elementor-icon-box-wrapper .elementor-icon {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.elementor-location-footer .elementor-widget-icon-box:hover .elementor-icon {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.elementor-location-footer .elementor-icon-box-title {
  color: var(--color-footer-text, #ffffff) !important;
}
.elementor-location-footer .elementor-icon-box-title a {
  color: var(--color-footer-text, #ffffff) !important;
  text-decoration: none;
  transition: color 0.15s ease;
}
.elementor-location-footer .elementor-icon-box-title a:hover {
  color: var(--color-footer-link-hover, rgba(255,255,255,0.7)) !important;
}

/* Legal-Shortcode-Output + alle Footer-Links in der Footer-Textfarbe (CI-konform,
   kein Default-Rot). Tenant-aware: --color-footer-text wird aus COLOR_FOOTER_TEXT
   in die Kit-custom_css (:root) injiziert, sonst greift der helle Fallback. */
.elementor-location-footer a,
.elementor-location-footer .b-business-data,
.elementor-location-footer .b-business-data * {
  color: var(--color-footer-text, #ffffff) !important;
}
.elementor-location-footer a:hover {
  color: var(--color-footer-link-hover, rgba(255,255,255,0.7)) !important;
}

/* Sticky-Kontakt-Buttons ([stickysocials]-Shortcode -> contactData() -> .contact-info).
   2026-05-30: Echtes Markup ist .contact-info > .option > i + .mylocation -- die
   alten .stickysocials/.sticky-socials-wrap-Selektoren trafen dieses Markup NIE,
   daher blieben die Icons schwarz (#262626 aus den .option-i/.mylocation-Basis-
   regeln oben). Jetzt CI-Optik wie die CTA-Buttons (K3): Primary-BG, weisse
   Glyphen/Schrift, Shadow + Hover-Accent. Position/Abstaende bleiben wie im
   Original (rechts an der Kante, margin-bottom aus .option). Ecken NUR links aussen
   gerundet (var(--radius-s) = Theme-Style-Button-Radius); rechte Kante buendig zum
   Bildschirmrand. Farben ueber :root-Tokens -> tenant-agnostisch. */
.contact-info .option i,
.contact-info .mylocation {
  background: var(--color-primary, #2563eb) !important;
  color: #ffffff !important;
  border-radius: var(--radius-s, 0.8rem) 0 0 var(--radius-s, 0.8rem) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.22) !important;
  transition: background-color 0.18s ease, box-shadow 0.18s ease !important;
}
.contact-info .option:hover i,
.contact-info .option:hover .mylocation {
  background: var(--color-accent, #7c3aed) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.32) !important;
}
/* ====== /K2 Footer Premium Rebuild ====== */

/* ====== K3 CTA-Buttons Premium-Look (2026-05-15) ======
 *
 * Zugehoeriger Code: app.js  buildDesignTokenKitSettings() (Button-Tokens)
 * Audit-Eintrag:    AUDIT.md K3
 *
 * Ergaenzung zum Theme-Style-Kit. Das Kit liefert Padding/Radius/Letter-Spacing
 * ueber globale CSS-Tokens; was darueber hinausgeht (Box-Shadow im Default-State,
 * Hover-Lift, Active-Pressdown) braucht echte CSS-Regeln, weil das Elementor-Kit
 * keine translateY-Transitionen modellieren kann.
 *
 * Wirkung:
 *  - Default-State: subtle Schatten in Primary-Farbe (Glow-Effekt)
 *  - Hover:         Lift (translateY -2px) + staerkerer Schatten
 *  - Active/Press:  zurueck auf Baseline (gedruckter Eindruck)
 *
 * Scope: ALLE Elementor-Buttons (.elementor-button) -- damit ist jede CTA
 * automatisch upgegradet, ohne Per-Widget-Eingriff im Generator.
 *
 * MITTWALD-DEPLOY: Block ans Ende der Live-style.css anhaengen, dann
 * /applyDesignTokens gegen Live-DB ausfuehren.
 */

.elementor-button-wrapper .elementor-button,
.elementor-widget-button .elementor-button,
.elementor-widget-slides .elementor-slide-button {
  transition:
    transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.18s ease !important;
  will-change: transform, box-shadow;
}

/* !important auf Hover, weil Elementor's Per-Widget box_shadow_hover_box_shadow
   als Inline-CSS rendert und sonst gewinnt. Lift + staerkerer Glow als Default. */
.elementor-button-wrapper .elementor-button:hover,
.elementor-widget-button .elementor-button:hover,
.elementor-widget-slides .elementor-slide-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32) !important;
}

.elementor-button-wrapper .elementor-button:active,
.elementor-widget-button .elementor-button:active,
.elementor-widget-slides .elementor-slide-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.24) !important;
  transition-duration: 0.05s !important;
}

/* Arrow-Icon-Aufwertung: das fas fa-arrow-right shiftet auf Hover leicht nach
   rechts -- klassisches CTA-Motion-Pattern. */
.elementor-button-wrapper .elementor-button .elementor-button-icon i,
.elementor-widget-button .elementor-button .elementor-button-icon i {
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.elementor-button-wrapper .elementor-button:hover .elementor-button-icon i,
.elementor-widget-button .elementor-button:hover .elementor-button-icon i {
  transform: translateX(3px);
}

/* WPForms-Submit-Button bekommt denselben Premium-Look. WPForms rendert mit
   eigenem Selector, daher zusaetzlich gestylt. */
.wpforms-container .wpforms-submit {
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
  transition:
    transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.wpforms-container .wpforms-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.38);
}
.wpforms-container .wpforms-submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
}
/* ====== /K3 CTA-Buttons Premium-Look ====== */

/* ====== Gallery Uniform Images ======
 * app.js finalizeCurrentSection() taggt Galerie-Bilder (allein in Spalte, >=2
 * solche Spalten) mit .gallery-img-uniform -> einheitliches 4:3-Raster trotz
 * unterschiedlicher Freepik-Seitenverhaeltnisse. Spiegel: theme-css-snippets/gallery-uniform-images.css */
.gallery-img-uniform img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
/* ====== /Gallery Uniform Images ====== */

/* ====== K5 Logo-aware (feat/logo-aware-header-scheme) ======
 * Logo-Bild darf keinen border-radius haben -- der randbuendige Schriftzug wuerde
 * an den gerundeten Ecken abgeschnitten ("abgerundet abgeschnitten"). Logo-spezifisch,
 * Content-Bilder behalten ihren Radius. Spiegel: theme-css-snippets/k5-logo-aware.css */
[data-elementor-type="header"] .elementor-widget-image img,
[data-elementor-type="footer"] .elementor-widget-image img,
.elementor .wtv-logo-img img {
  border-radius: 0 !important;
  overflow: visible !important;
}
/* ====== /K5 Logo-aware ====== */

/* ====== Scroll-Reveal Animations (feat/container-scroll-animations) ======
 * Body-Container faden beim Reinscrollen dezent ein. Ausfallsicher (vgl. F30):
 * der Hide-Zustand greift NUR unter html.wtv-anim-ready -- diese Klasse vergibt
 * wtv-script.js erst, nachdem der IntersectionObserver steht. Ohne JS / ohne
 * IO-Support / bei JS-Fehler bleiben die Container sichtbar.
 * Spiegel: theme-css-snippets/anim-reveal.css (synchron halten). */
@media (prefers-reduced-motion: no-preference) {
  html.wtv-anim-ready .wtv-anim {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  html.wtv-anim-ready .wtv-anim.is-visible {
    opacity: 1;
    transform: none;
  }
  html.wtv-anim-ready .wtv-anim--up {
    transform: translateY(34px);
  }
  html.wtv-anim-ready .wtv-anim--left > .e-con-inner,
  html.wtv-anim-ready .wtv-anim--left > .elementor-container {
    transform: translateX(-36px);
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
  }
  html.wtv-anim-ready .wtv-anim--left.is-visible > .e-con-inner,
  html.wtv-anim-ready .wtv-anim--left.is-visible > .elementor-container {
    transform: none;
  }
  @media (max-width: 767px) {
    html.wtv-anim-ready .wtv-anim--left > .e-con-inner,
    html.wtv-anim-ready .wtv-anim--left > .elementor-container {
      transform: none;
    }
  }
}
/* ====== /Scroll-Reveal Animations ====== */

/* WTV-FONTS START */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/playfair-display-600.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/playfair-display-700.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-600.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/manrope-800.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jetbrains-mono-500.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/jetbrains-mono-700.woff2') format('woff2');}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/archivo-black-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/archivo-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/archivo-600.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/fraunces-500.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/fraunces-700.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/karla-400.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/karla-700.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/space-grotesk-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-grotesk-700.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/nunito-700.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/nunito-800.woff2') format('woff2');}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/nunito-sans-400.woff2') format('woff2');}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/nunito-sans-700.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/cormorant-garamond-600.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/cormorant-garamond-700.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jost-400.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jost-500.woff2') format('woff2');}
/* WTV-FONTS END */