/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme – Child Theme für Elementor Pro
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* --------------------------------------------------
   SCHRIFTART INTER EINBINDEN
   -------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter/InterVariable.woff2') format('woff2-variations'),
       url('fonts/inter/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter/InterVariable-Italic.woff2') format('woff2-variations'),
       url('fonts/inter/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------
   GRUNDLEGENDES TYPOGRAFIE-SETUP
   -------------------------------------------------- */
body, button, input, select, textarea {
  font-family: 'Inter', Arial, sans-serif;
}

/* Fließtext */
body, p {
  font-size: clamp(16px, 1.2vw, 21px) !important;
  line-height: 1.5 !important;
  font-family: 'Inter', Arial, sans-serif !important;
  color: #3C3C3C!important;
}

/* --------------------------------------------------
   ÜBERSCHRIFTEN (RESPONSIV)
   -------------------------------------------------- */
h1 {
  font-size: clamp(31px, 4vw, 53px) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color:  #837060 !important;
}

h2 {
  font-size: clamp(30px, 4vw, 52px) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #837060 !important;
}

h3 {
  font-size: clamp(18px, 3vw, 29px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

h4 {
  font-size: clamp(16px, 2.5vw, 20px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

h5 {
  font-size: clamp(16px, 2vw, 20px) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

h6 {
  font-size: clamp(14px, 1.5vw, 16px) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

/* --------------------------------------------------
   ELEMENTOR PRO NAV MENU
   -------------------------------------------------- */

/* Hauptmenü-Links */
.elementor-nav-menu a,
.elementor-nav-menu--main a {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: clamp(15px, 1.2vw, 18px) !important;
  font-weight: 500 !important;
  text-transform: none;
  letter-spacing: 0.02em;
  color: inherit;
  text-decoration: none;
  color: #3C3C3C!important;
}

/* Hover / Aktive Zustände */
.elementor-nav-menu a:hover,
.elementor-nav-menu a:focus,
.elementor-nav-menu a.elementor-item-active {
  color: var(--e-global-color-primary, #000) !important;
  text-decoration: none;
}

/* Dropdown-Menü */
.elementor-nav-menu--dropdown a {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: clamp(14px, 1vw, 16px) !important;
  font-weight: 400 !important;
  color: #3C3C3C!important;
}

/* Responsive Menü (Burger-Menü & Dropdown) */
.elementor-menu-toggle,
.elementor-nav-menu--dropdown {
  font-family: 'Inter', Arial, sans-serif !important;
  color: #3C3C3C!important;
}

/* --------------------------------------------------
   SILBENTRENNUNG & TEXTFLUSS
   -------------------------------------------------- */

/* Fließtext */
p,
.elementor-widget-text-editor,
.elementor-text-editor,
.entry-content {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Überschriften – keine Silbentrennung */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
}

/* Buttons, Menüs & Links – keine Trennung */
button, .button, .menu, nav, a {
  hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
}









/* --------------------------------------------------
   ELEMENTOR FOOTER-STYLING
   -------------------------------------------------- */

/* Allgemeiner Footer-Bereich */
.elementor-location-footer,
.elementor-footer,
footer {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: clamp(14px, 1.2vw, 16px) !important;
  line-height: 1.4 !important;
  color: #fff; /* Standardtextfarbe im Footer */
  background-color: #111; /* Hintergrundfarbe – anpassbar */
}

/* Footer-Links */
.elementor-location-footer a,
.elementor-footer a,
footer a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Hover-Zustand der Links */
.elementor-location-footer a:hover,
.elementor-footer a:hover,
footer a:hover {
  color: var(--e-global-color-primary, #00bfff); /* Elementor-Primärfarbe */
}

/* Footer-Texte und Listen */
.elementor-location-footer p,
.elementor-location-footer li,
.elementor-location-footer span,
.elementor-location-footer div {
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.4 !important;
  font-family: 'Inter', Arial, sans-serif !important;
}

/* Social Icons im Footer (Elementor-Widget) */
.elementor-social-icon {
  transition: transform 0.3s ease;
}
.elementor-social-icon:hover {
  transform: scale(1.1);
}

/* Optional: Zentrierter Copyright-Text */
.footer-copyright,
.elementor-location-footer .elementor-widget-text-editor:last-child {
  text-align: center;
  font-size: clamp(13px, 1vw, 15px) !important;
  opacity: 0.8;
}







/* --------------------------------------------------
   ZOOM-IN BILDEFFEKT WIE ELEMENTOR CTA
   -------------------------------------------------- */

/* Container */
.zoom-img {
  position: relative;
  overflow: hidden;          /* Verhindert, dass das wachsende Bild über den Rand hinausragt */
  display: block;
  width: 100%;               /* passt sich Spaltenbreite an */
  height: 100%;
  line-height: 0;            /* entfernt mögliche Lücken durch Inline-Bild-Abstände */
}

/* Bild */
.zoom-img img {
  display: block;            /* verhindert weiße Zwischenräume unterhalb */
  width: 100%;
  height: auto;
  transition: transform 0.6s ease, filter 0.4s ease;
  transform-origin: center center;
  will-change: transform;
}

/* Hover-Effekt */
.zoom-img:hover img {
  transform: scale(1.08);    /* sanftes Vergrößern innerhalb des Containers */
  filter: brightness(1.05);
}

/* Optional: Overlay wie beim CTA */
.zoom-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25); /* dunkles Overlay */
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;      /* keine Klicks blockieren */
}

/* Overlay beim Hover aktivieren */
.zoom-img:hover::after {
  opacity: 1;
}