/* Bebas Neue Thin */
@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/bebas/bebasneue-thin-webfont.woff2") format("woff2"),
       url("fonts/bebas/bebasneue-thin-webfont.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Bebas Neue Light */
@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/bebas/bebasneue-light-webfont.woff2") format("woff2"),
       url("fonts/bebas/bebasneue-light-webfont.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Bebas Neue Book */
@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/bebas/bebasneue-book-webfont.woff2") format("woff2"),
       url("fonts/bebas/bebasneue-book-webfont.woff") format("woff");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}

/* Bebas Neue Regular */
@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/bebas/bebasneue-regular-webfont.woff2") format("woff2"),
       url("fonts/bebas/bebasneue-regular-webfont.woff") format("woff");
  font-weight: 400;
  letter-spacing: 0.4em;
  font-style: normal;
  font-display: swap;
}

/* Bebas Neue Bold */
@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/bebas/bebasneue-bold-webfont.woff2") format("woff2"),
       url("fonts/bebas/bebasneue-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {

/* Brand Colors */
  --color-primary: #23637A;
  --color-primary-light: #68BFD3;
  --color-accent: #FCCF78;
  --color-accent-hover: #E6B85F;
  --color-background: #F3F1EE;
/* Text */
  --color-text: #1e1e1e;


/* Typografie */
  --font-heading: "Bebas Neue", sans-serif;
  --font-body: "Calibri", sans-serif;


/* Schriftgrößen */
--text-sm:0.875rem;
--text-md:1rem;
--text-lg:1.25rem;
--text-xl:1.5rem;
--text-2xl:2rem;
--text-3xl:2.5rem;
--text-4xl:3rem;
--text-5xl:3.5rem;


/* Radius */
--radius-button:25px;


/* spacing */
--space-sm:8px;
--space-md:16px;
--space-lg:32px;

/* Icon Sizes */
--icon-circle-size: 80px;

}

/* ===============================
   Base / Typografie (optimiert)
   =============================== */

html {
  font-size: 100%; /* = 16px */
}

body {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  overflow-wrap: break-word;
  word-wrap: break-word; /* Fallback */
}

p, li, blockquote {
  hyphens: auto;
  margin-bottom: var(--space-lg) !important;
}

h1, h2, h3 {
  font-family: var(--font-heading) !important;
  font-weight: 400 !important;
  margin-bottom: var(--space-lg) !important;
}

h1, h2 {
  font-size: var(--text-4xl) !important;
}
h3 {
  font-size: var(--text-3xl) !important;
}
h4 {
  font-size: var(--text-xl) !important;
}


.vc_column-inner {
    margin-bottom: 0px;
}


/* ===============================
   Hero
   =============================== */

.hero-row {
  margin-bottom: 3rem;
  padding: 2rem 0;
  background-image: url("/wp-content/uploads/2025/12/Header-scaled-scaled.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-row .vcex-heading-inner {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: white;
  letter-spacing: 0.04em;
  font-weight: 400;
  margin-top: var(--space-sm);
}
/* alt edefinition auf Mainseite und allen Sprachen */
.hero-row h1 {
  font-size: var(--text-3xl) !important;
  color: #fff;
  margin-top: 0.5rem;

}


/* ===============================
   Polylang Switcher
   =============================== */

.my-lang-switcher {
  text-align: center;
  margin-top: 1.25rem;
	  margin-bottom: 2rem;
}

/* Flagge oben, Name darunter */
.polylang-switcher-shortcode {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

/* li-Abstände nicht mehr nötig wegen gap, aber sicherheitshalber neutral */
.polylang-switcher-shortcode li {
  margin: 0;
}

/* Link: Name unter Flagge */
.polylang-switcher-shortcode a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-transform: lowercase;
  color: var(--wpex-palette-288-color);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

/* Flaggen: rund & groß */
.polylang-switcher-shortcode img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
  display: block;
  margin-bottom: 0.4rem;
  transition: transform 0.2s ease;
}

.polylang-switcher-shortcode img:hover {
  transform: scale(1.12);
}

/* Aktive Sprache hervorheben */
.polylang-switcher-shortcode .current-lang img {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Footer Flaggen */
#menu-language-switcher img {
  width: 16px;
  height: auto;
  display: block;
}

/* ===============================
   Section Illustration Left (Megaphon)
   =============================== */

.section-with-icon {
  position: absolute;
  top: -3rem;
  left: 0;
  z-index: 2;
}

@media (max-width: 768px) {
  .section-with-icon {
    position: static;
    margin: 1rem auto 0;
    display: block;
  }
}

/* ===============================
   Section Illustration Right (Gears)
   =============================== */

.section-with-icon-right {
  position: absolute;
  top: 0rem;
  right: 6rem;
  z-index: 2;
}

@media (max-width: 768px) {
  .section-with-icon-right {
    position: static;
    margin: 1rem auto 0;
    display: block;
  }
}

/* ===============================
   Tiles: iPad/Tablet Layout
   =============================== */

@media (min-width: 768px) and (max-width: 1280px) {
  .tiles-row .vcex-icon-box-one.wpex-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .tiles-row .vcex-icon-box-symbol {
    margin-right: 0 !important; /* entfernt wpex-mr-20 */
    margin-bottom: 0.75rem;     /* Abstand nach unten */
  }

  .tiles-row .vcex-icon-box-text {
    width: 100%;
  }
}


/* ===============================
   Section Navigation Buttons
   =============================== */

.section-nav-buttons {
  text-align: center;
}

/* Button Wrapper */
.section-nav-buttons .vcex-button {
  display: block;
  max-width: 50%;
  margin: 0px auto;
  margin-bottom: var(--space-lg);
  text-decoration: none;
}

/* Button Design */

.theme-button {
  display: block;
  padding: 18px 40px;
  border-radius: var(--radius-button);

  background: var(--color-accent);
  color: #1e1e1e;

  font-family: var(--font-heading);
  font-size: var(--text-4xl);

  transition: background 0.2s ease;
}

/* Hover */

.theme-button:hover {
  background: var(--color-accent-hover);
}


.kontakt-text {
	font-size: var(--text-xl);
	
}

/* ===============================
   Section Primay – Kontakt, etc.
   =============================== */
.section-primary {
  background: var(--color-primary);
  color: white;
  padding: var(--space-lg) 0;
  margin-bottom: var(--space-lg);
}

.section-primary a {
  color: white;
}

.section-primary h1,
.section-primary h2,
.section-primary h3 {
  color: white;
  margin-bottom: 0px !important;
}


/* ===============================
   Feature-Card
   =============================== */
.feature-card .wpb_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: 0;
}

/* ===============================
   Icons – Kontakt, etc.
   =============================== */
.icon-circle {
  width: var(--icon-circle-size);
  height: var(--icon-circle-size);
  border-radius: 50%;

  background: white;
  color: var(--color-primary);

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0px auto;

  font-size: var(--text-3xl) !important;
}

/* ===============================
   Footer Logos – Förderer & Partner
   =============================== */

/* Layout: Gruppen untereinander (Standard) */
.footer-logos-wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

/* Desktop: Gruppen nebeneinander */
@media (min-width: 1024px) {
  .footer-logos-wrapper {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
  }	  
  .footer-logo-group:nth-of-type(2) .footer-logos { /* Zweite Gruppe tiefer */
    margin-top: 33px;
    transform: scale(1.1);
  }
}

/* Gruppe */
.footer-logo-group { /* Abstand nur relevant, wenn Gruppen untereinander stehen */
  margin-bottom: 0;
}

/* Überschrift */
.footer-logo-heading {
   font-size: 1rem;
}

/* Grid innerhalb einer Gruppe (3 Logos) */
.footer-logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.2rem;
  align-items: start;
}

/* Logo-Container */
.footer-logo {
  display: flex;
  justify-content: center;
  align-items: start;
}

/* Basis-Größe (Desktop) */
.footer-logos img {
  max-height: 120px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* Visuelle Feinjustierung je Logo */
.footer-logo.eu {  }
.footer-logo.rueckkehr img  { margin-top: 24px; }
.footer-logo.raphaelswerk img { margin-top: 20px; } 


/* Mobile */
@media (max-width: 600px) {
  .footer-logo-group {
    margin-bottom: 1.75rem;
  }

  .footer-logos {
    grid-template-columns: 1fr;
	 gap: 1rem;
  }
  .footer-logo-group:nth-of-type(2) .footer-logos {
    gap: 0rem;
  }
	
  .footer-logo-group:nth-of-type(2) .footer-logos {
    transform: scale(1.2);
  }
	
  .footer-logos img {
    max-width: 160px;
	}
	
  .footer-logo.rueckkehr img {
    margin-top: 0px;
  }
	
  .footer-logo.raphaelswerk img {
	margin-left: 10px; 
	margin-top: 30px; 
  } 
}