/*
	Theme Name: Dock Wayuu
	Version: 1.0
	Author: Daniel Carvalho
	Text Domain: dock-wayuu
*/
/* ================================
   Fonts
================================== */


@import url('css/bootstrap.css');
@import url('fonts/bootstrap-icons/bootstrap-icons.min.css');
/*@import('material_symbols_outlined.css')*/



/* ================================
   CSS Variables
================================== */
:root{
  --bs-primary: #f27d72;
  --primary: #f27d72;
  --primary-t: rgba(242, 126, 115, 0.7);
  --secondary: #4a90e2;
  --dark: #1e2a38;
  --lightblue: #00c8c8;
  --darkblue: #15283b;
  --darkblue-t: rgba(21, 40, 59, .5);
  --white: #ffffff;
  --light: #e6f0fa;
  --cream: #fcebe6;
  --font: #222222;
}

/* ================================
   Base Typography
================================== */
/* roboto-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('fonts/roboto-v49-latin/roboto-v49-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  src: url('fonts/roboto-v49-latin/roboto-v49-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 200;
  src: url('fonts/roboto-v49-latin/roboto-v49-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 200;
  src: url('fonts/roboto-v49-latin/roboto-v49-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/roboto-v49-latin/roboto-v49-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/roboto-v49-latin/roboto-v49-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v49-latin/roboto-v49-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/roboto-v49-latin/roboto-v49-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/roboto-v49-latin/roboto-v49-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/roboto-v49-latin/roboto-v49-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/roboto-v49-latin/roboto-v49-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/roboto-v49-latin/roboto-v49-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v49-latin/roboto-v49-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/roboto-v49-latin/roboto-v49-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/roboto-v49-latin/roboto-v49-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 800;
  src: url('fonts/roboto-v49-latin/roboto-v49-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/roboto-v49-latin/roboto-v49-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  src: url('fonts/roboto-v49-latin/roboto-v49-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



body {
  font-family: "Roboto", sans-serif;
  font-size: 1.25rem;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
}

h2, h3, h4, h5, h6 {
  padding-bottom: 1rem;
  padding-top: 2rem;
}
.heading {
  font-size: 2rem;
  font-weight: 900;

  /* Fast komplett #ff826e, nur ein kleiner Teil #000046 */
  background: linear-gradient(90deg, #000046 5%, #ff826e 30%, #ff826e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
a { color: var(--primary); }

/* ================================
   Utilities / Colors
================================== */
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-dark { background-color: var(--dark) !important; }
.bg-darkblue { background-color: var(--darkblue) !important; }
.bg-lightblue { background-color: var(--lightblue) !important; }
.bg-light { background-color: var(--light) !important; }
.bg-cream { background-color: var(--cream) !important; }

.bg-primary-t::after { background: var(--primary-t); }
.bg-darkblue-t::after {
  background-color: var(--darkblue-t);
  color: var(--white);
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
}

.overlay {
  position: absolute; inset: 0;
  padding: var(--bs-card-img-overlay-padding);
  border-radius: var(--bs-card-inner-border-radius);
  text-align: center;
}

.gradient-1 {
  background: linear-gradient(63deg, rgba(30,42,56,1) 0%, rgba(242,125,114,0.56) 100%);
}
.gradient-2 {
  background: linear-gradient(63deg, rgba(30,42,56,1) 0%, rgba(0,200,200,0.56) 100%);
}
.gradient-3 {
  background: linear-gradient(63deg, rgba(20,56,97,1) 0%, rgba(56,50,50,0.31) 100%);
}
.gradient-4 {
  background: linear-gradient(90deg, rgba(242,125,114,0.6) 30%, rgba(74,144,226,0.56) 100%);
}

/*Overlay*/
.overlay1 {
	background: rgba(243, 125, 115, 0.5);
}
.overlay2 {
	background: rgba(0, 200, 200, 0.5);
}
.overlay3 {
	background: rgba(30, 42, 56, 0.5);
}
.overlay4 {
	background: rgba(16, 66, 124, 0.5);
}
.dark { background: rgba(0,0,0,0.5); }
.bg-gradient-dark { background-image: linear-gradient(195deg,#42424a,#191919); }


.bg:after{
     position:absolute;
     top:0;
     bottom:0;
     left:0;
     height:100%;
     width:100%;
     z-index:1;
     display:block;
     content:"";
     background:rgba(243,125,115,.56);

}
.grad::after,
.grad-1::after {
  content: '';
  position: absolute; inset: 0;
}
.grad::after {
  background: linear-gradient(90deg, rgba(242,125,114,1) 0%, rgba(74,144,226,0.56) 100%);
}
.grad-1::after {
  background: linear-gradient(63deg, rgba(30,42,56,1) 0%, rgba(242,125,114,0.56) 100%);
}
  /* Material-Design-Anmutung */
  .shadow-md { box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15); }

  /* Overlay mit sanftem Verlauf & gute Lesbarkeit */
  .gradient-primary {
    background: linear-gradient(180deg, rgba(18,18,18,0.05) 0%, rgba(18,18,18,0.35) 40%, rgba(18,18,18,0.65) 100%);
  }

  /* Objektfüllung, falls Bootstrap < 5.3: ersatzweise inline style nutzen */
  .object-fit-cover { object-fit: cover; }

  /* dezente Textkontur für bessere Lesbarkeit auf Bildern */
  .text-shadow { text-shadow: 0 2px 8px rgba(0,0,0,.45); }


/* ================================
   Buttons
================================== */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg:#f27d72;
  --bs-btn-border-color:#f27d72;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #f27d72;
  --bs-btn-hover-border-color:#f27d72;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #f27d72;
  --bs-btn-active-border-color:#f27d72;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #f27d72;
  --bs-btn-disabled-border-color: #f27d72;
}
.btn-outline-primary {
  --bs-btn-color: #f27d72;
  --bs-btn-border-color: #f27d72;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #f27d72;
  --bs-btn-hover-border-color: #f27d72;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #f27d72;
  --bs-btn-active-border-color: #f27d72;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
  --bs-btn-disabled-color: #f27d72;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f27d72;
  --bs-gradient: none;
}

.btn-white {
  --bs-btn-color: #f27d72;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #0a0a0a;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-focus-shadow-rgb: 218,218,218;
  --bs-btn-active-color: #0a0a0a;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #0a0a0a;
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: #fff;
}

.page-link.active, .active > .page-link {
  z-index: 3;
  color: var(--white);
  background-color: var(--primary);
  border-color: var(--primary);
}
.carousel-fade .carousel-item {
  transition-duration: 1.2s; /* default ~0.6s */
}

/* ================================
   Hero / Intro
================================== */
.intro { color: var(--white); }
.intro h1 { font-size: 6rem; text-transform: uppercase; font-weight: 900; }

header h1 { font-size: 4rem; }
.intro p { font-size: 3rem; }
.title h1 {font-size: 4rem; text-transform: uppercase; font-weight: 900;}
section h2 { font-size: 2rem; font-weight: 900; text-transform: uppercase; }
.card h1 { text-transform: uppercase; font-size: 3rem; font-weight: 900; }
.card h3 { text-transform: uppercase; font-weight: 600; }
h2.section-header { color: #f27d72; }

/* ================================
   Navbar / Branding (.navbar)
================================== */
.navbar.scrolled {
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 10px 0;
}

.languages {
  color: #fff;
  font-size: 1.7rem;
  transition: color 0.3s ease;
}
.languages.scrolled { color: #222 !important; }
.languages a { color: inherit; text-decoration: none; }

.logo { height: 140px; transition: all 0.3s ease; }
.logo-scrolled { height: 90px !important; transition: all 0.3s ease; }

.icon { width: 40px !important; height: auto; }

/* ================================
   Hamburger & Fullscreen Nav (korrigiert)
================================== */
.hamburger-container { display: flex; justify-content: flex-end; width: 44px; }
.hamburger { position: relative; width: 44px; }

.menu-toggle{
  position: relative;
  width: 44px;
  height: 36px;
  cursor: pointer;
  z-index: 20001;
  border: 0;
  padding: 0;
  background: transparent !important;
  -webkit-tap-highlight-color: transparent;
}

/* --- Bars: Basis (default: weiß) --- */
.menu-toggle span{
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  display: block;
  background-color: #fff;
  transition: transform .3s ease, top .3s ease, opacity .2s ease, background-color .2s ease;
}
.menu-toggle span:nth-child(1){ top: 0; }
.menu-toggle span:nth-child(2){ top: 12px; }
.menu-toggle span:nth-child(3){ top: 24px; }

/* Scrollzustand (NUR wenn NICHT offen): Balken dunkel */
.menu-toggle.dark:not(.open) span,
.navbar.scrolled .menu-toggle:not(.open) span{
  background-color: #222 !important;
}

/* --- OFFEN: Button fixieren, X immer weiß, nie ausgeblendet --- */
.menu-toggle.open {
  position: relative !important;   /* statt fixed */
  top: auto !important;            /* zurücksetzen */
  right: auto !important;          /* zurücksetzen */
  background: rgba(0,0,0,.35);     /* falls du den Chip behalten willst */
  border-radius: 10px;
  padding: 6px;
}

.menu-toggle.open span{
  opacity: 1 !important;
  visibility: visible !important;
  background-color: #fff !important; /* <- garantiert weiß */
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}

/* X-Form */
.menu-toggle.open span:nth-child(1){
  top: 12px;
  transform: rotate(45deg);
}
.menu-toggle.open span:nth-child(2){
  opacity: 0 !important;
}
.menu-toggle.open span:nth-child(3){
  top: 12px;
  transform: rotate(-45deg);
}

/* Fullscreen Navigation */
.fullscreen-nav{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10,10,10,0.96);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  z-index: 20000;
  backdrop-filter: blur(2px);
}
.fullscreen-nav.open{
  opacity: 1;
  visibility: visible;
}

/* Menülinks */
.nav-links{
  list-style: none;
  padding: 0;
  margin: 0;
  width: min(90vw, 1000px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2.8vh, 22px);
  justify-items: center;
  text-align: center;
}
.nav-links li{ margin: 0; }
.nav-links a{
  color: #fff;
  text-decoration: none;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: .02em;
  padding: .25rem .5rem;
  position: relative;
  transition: transform .15s ease, color .15s ease;
}
.nav-links a::after{
  content:"";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--primary);
  transform: translateX(-50%);
  transition: width .2s ease;
}
.nav-links a:hover{ color: var(--primary); transform: translateY(-1px); }
.nav-links a:hover::after{ width: 60%; }

@media (min-width: 768px){
  .nav-links{ grid-template-columns: repeat(2, minmax(220px,1fr)); }
}
@media (min-width: 992px){
  .nav-links{ grid-template-columns: repeat(3, minmax(220px,1fr)); }
}

/* Stacking: Overlay über Navbar; Toggle über allem */
.navbar{ z-index: 1000 !important; }
.languages, .navbar-brand{ z-index: 1000 !important; }
.fullscreen-nav{ z-index: 20000 !important; }
.menu-toggle, .hamburger, .hamburger-container{ z-index: 20001 !important; }

/* Beim offenen Menü: Navbar/Languages/Logo auf „hell“ und transparent,
   damit das weiße X nie auf weißem Grund verschwindet */
body.menu-open .navbar,
body.menu-open .navbar.scrolled{
  background: transparent !important;
  box-shadow: none !important;
}
/* Logo & Sprachen im offenen Menü unsichtbar machen */
body.menu-open .languages,
body.menu-open .navbar-brand {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important; /* keine Klicks durchlassen */
}

/* Mobile Feinjustierung */
@media (max-width: 575.98px){
  .menu-toggle.open{ top: 12px !important; right: 12px !important; }
}

/* Fullscreen Navigation */
.fullscreen-nav{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10,10,10,0.96);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  z-index: 20000;
  backdrop-filter: blur(2px);
}
.fullscreen-nav.open{
  opacity: 1;
  visibility: visible;
}

/* Menülinks – zentriert & responsiv via Grid */
.nav-links{
  list-style: none;
  padding: 0;
  margin: 0;
  width: min(90vw, 1000px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2.8vh, 22px);
  justify-items: center;
  text-align: center;
}
.nav-links li{ margin: 0; }
.nav-links a{
  color: #fff;
  text-decoration: none;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: .02em;
  padding: .25rem .5rem;
  position: relative;
  transition: transform .15s ease, color .15s ease;
}
.nav-links a::after{
  content:"";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--primary);
  transform: translateX(-50%);
  transition: width .2s ease;
}
.nav-links a:hover{ color: var(--primary); transform: translateY(-1px); }
.nav-links a:hover::after{ width: 60%; }

@media (min-width: 768px){
  .nav-links{ grid-template-columns: repeat(2, minmax(220px,1fr)); }
}
@media (min-width: 992px){
  .nav-links{ grid-template-columns: repeat(3, minmax(220px,1fr)); }
}

/* Stacking: Overlay über Navbar/Logo/Languages; Button (X) über Overlay */
.navbar{ z-index: 1000 !important; }
.languages, .navbar-brand{ z-index: 1000 !important; }
.fullscreen-nav{ z-index: 20000 !important; }
.menu-toggle, .hamburger, .hamburger-container{ z-index: 20001 !important; }

/* Beim offenen Menü die Navbar + Toggle ÜBER das Overlay heben */
body.menu-open .navbar { z-index: 30000 !important; }
body.menu-open .menu-toggle { z-index: 30001 !important; }

/* ================================
   Header / Video
================================== */
.video-header {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
/* Mobile Hintergrundbild statt Video */
.video-header .bg-mobile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url('https://dockwayuu.com/wp-content/uploads/Bildschirmfoto-2025-09-24-um-17.30.36-scaled.png') center center / cover no-repeat;
  z-index: 0;
}

/* Nur auf kleinen Geräten sichtbar */
@media (min-width: 768px) {
  .video-header .bg-mobile {
    display: none;
  }
}
#bg-video {
  position: absolute; inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.header {
  height: 50vh;
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: 50%;
}
.header1 {
  height: 100vh;
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: 50%;
}


.overlay.gradient-primary { z-index: 1; }

/* ================================
   Layout Helpers & Misc
================================== */
.overlap { margin-top: -3rem !important; position: relative; z-index: 1; }
.overlapbottom { margin-bottom: -3rem !important; position: relative; z-index: 1; }
.search-container {
  position: relative;
  min-width: 200px;
}

.search-form {
  position: relative;
}

.search-input {
  height: 50px;
  border-radius: 30px;
  padding-right: 48px;           /* Platz für Icon rechts */
  border: none;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Icon rechts im Feld */
.avatar-icon.bi-search {
  font-size: 1.2rem;
  color: #888;
  z-index: 10;
  pointer-events: none;          /* blockiert keine Klicks */
}



.card.card-background{ align-items: center; }
.card.card-background .full-background{
  background-position: 50%;
  background-size: cover;
  margin-bottom: 30px;
  width: 100%; height: 100%;
  position: absolute;
  border-radius: .5rem;
  background: rgba(255,255,255,0.7);
}
.card.card-background .card-body{
  color: #fff;
  position: relative;
  z-index: 2;
}
.card.card-background:after{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  content:"";
  background-color: rgba(7,20,83,0.7);
  border-radius: .5rem;
}





.card {
     overflow: hidden;
}
 .card-img {
     height:450px;
     object-fit:cover;
}
 .card-img-overlay {
     /*background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);*/
     display: flex;
     flex-direction: column;
}
 .author-icon {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: linear-gradient(135deg, #6f42c1 0%, #0dcaf0 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-weight: bold;
     margin-right: 0.8rem;
}
.pt-12 { padding-top: 16rem !important; }
.py-8 { padding: 6rem 2rem; }
.my-10 { margin-top: 12rem !important; margin-bottom: 12rem !important; }

.features i { font-size: 2rem; padding-right: 1rem; }
.feature, .card-icon {
  display: flex; align-items: center; justify-content: center;
  height: 3rem !important; width: 3rem !important;
  font-size: 1.5rem; text-align: center;
}

.z-index-0 { z-index: 0; }
.opacity-1 { opacity: .1 !important; }
.opacity-7 { opacity: .7 !important; }
.border-radius-xl { border-radius: .75rem; }

.avatar-xxl { width: 110px !important; height: 110px !important; }
.avatar {
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; height: 48px; width: 48px;
  transition: all .2s ease-in-out;
}

.nav.nav-pills .nav-link { z-index: 3; color: #262626; border-radius: .5rem; background-color: inherit; }
.nav.nav-pills .nav-link.active { animation: .2s ease; }
.nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link { width: 100%; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: var(--bs-nav-pills-link-active-color);
  background-color: var(--bs-nav-pills-link-active-bg);
}
.nav-pills .nav-link { border-radius: var(--bs-nav-pills-border-radius); }

.bi-instagram { font-size: 3rem; }

.donate-form {
  border-radius: 1rem !important;
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.08);
}
.btn-check:checked + .btn-outline-primary {
  background-color: var(--bs-primary);
  color: white;
}
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-floating label { color: #6c757d; }

.count { font-size: 3rem; }
.progress-bar { background-color: var(--bs-primary); }

#img1 { filter: hue-rotate(200deg); }

/* Mobile Feinjustierung */
@media (max-width: 575.98px){
  .menu-toggle.open{ top: 12px !important; right: 12px !important; }
}
/* ================================
   Blog: feste Navbar-Variante
   (über .site-header)
================================== */
.site-header #logo-img {
  content: url("img/logo2.png") !important; /* Immer das gleiche Bild */
  height: 70px !important;                 /* Fixe Höhe */
  width: auto !important;
  transition: none !important;
}

/* Keine Größenänderung beim Scrollen */
.site-header .logo,
.site-header .logo-scrolled {
  height: 96px !important;
  width: auto !important;
  transition: none !important;
}
.site-header .navbar {
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
  padding: 12px 0 !important;
}

.site-header .languages,
.site-header .languages a,
.site-header .navbar a,
.site-header .navbar .nav-link {
  color: #222 !important;
  text-decoration: none;
}

.site-header #logo-img,
.site-header .logo,
.site-header .logo-scrolled {
  height: 96px !important;
  width: auto !important;
  transition: none !important;
}

/* Hamburger geschlossen → immer #222 */
.site-header .menu-toggle span {
  background-color: #222 !important;
}

/* ================================
   Blog: Menü geöffnet (Fullscreen)
================================== */
.site-header.menu-open .menu-toggle span {
  background-color: #fff !important;  /* X immer weiß */
}

.site-header.menu-open .menu-toggle.open span:nth-child(1){
  top: 12px !important;
  transform: rotate(45deg) !important;
}
.site-header.menu-open .menu-toggle.open span:nth-child(2){
  opacity: 0 !important;
}
.site-header.menu-open .menu-toggle.open span:nth-child(3){
  top: 12px !important;
  transform: rotate(-45deg) !important;
}

/* Vollbildmenü Hintergrund & Links */
.site-header .fullscreen-nav { 
  background: rgba(10,10,10,0.96); 
}
.site-header .fullscreen-nav .nav-links a {
  color: #fff !important;
}
.site-header .fullscreen-nav .nav-links a::after {
  background: #fff !important;
}
.site-header .fullscreen-nav .nav-links a:hover {
  color: var(--primary) !important;
}


/* sanfter Ladezustand */
#postsGrid { transition: opacity .2s ease; }
/* Author-Icon fallback */
.author-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: .5rem; font-weight: 700; color: #fff;
}




/* ==== VIDEO-KARTEN – ROBUST ==== */
.video-card .video-media { position: relative; }

/* Thumbnail-Bild ohne Abstände, füllt die Ratio komplett */
.video-card .video-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Thumbnail-Link deckt die Ratio vollständig ab */
.video-card .video-thumb { position: absolute; inset: 0; display: block; }

/* Overlay immer oben drauf */
.video-card .card-img-overlay { z-index: 2; }

/* Iframe/Embed muss die Ratio vollständig ausfüllen */
.video-card .video-embed,
.video-card .video-embed iframe,
.video-card .video-embed embed,
.video-card .video-embed video {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  display: block !important; border: 0 !important;
}

/* Falls der oEmbed Wrapper extra Divs setzt (z.B. <div class="wp-embedded-content">), diese ebenfalls strecken */
.video-card .video-embed > * { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Meta unter dem Video – sichtbar wenn JS Klasse entfernt */
.video-card .video-meta { background: transparent; }

/* Hilfsklasse, falls Themes „d-none“ überschreiben */
.video-card .is-hidden { display: none !important; }

/*nav-tabs*/
/* Bootstrap-Tab-Reset für konsistente Höhe/Breite */
#blogFilterTabs.nav-tabs {
  border-bottom: 0; /* keine Grundlinie, damit nichts die Höhe ändert */
}

/* Li so strecken, dass Links die volle Höhe füllen können */
#blogFilterTabs .nav-item {
  display: flex;
}

/* Einheitliche Basis für ALLE Tabs (aktiv & inaktiv) */
#blogFilterTabs .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;      /* feste Innenabstände -> keine Sprünge */
  line-height: 1;             /* stabiler Zeilenabstand */
  height: 100%;               /* volle Höhe im Tab-Container */
  border: 1px solid transparent; /* gleicher Rand in allen Zuständen */
  background: transparent;
  color: #1e2a38;             /* dunkle Textfarbe (wie gewünscht) */
  font-weight: 600;           /* gleich wie active -> keine Breitenänderung */
  transition: background-color 0.15s ease, color 0.15s ease;
  box-shadow: none;
}

#blogFilterTabs .nav-link:focus {
  box-shadow: none; /* Fokus-Ring verschiebt nix */
}

/* Hover (inaktiv) – nur Farbe/leichter Hintergrund, keine Maße ändern */
#blogFilterTabs .nav-link:not(.active):hover {
  background-color: rgba(30, 42, 56, 0.08);
  color: #1e2a38;
}

/* Aktiver Tab: gleicher Rand, nur Farbe/Hintergrund wechseln */
#blogFilterTabs .nav-link.active {
  background-color: #1e2a38;  /* Hintergrund */
  color: #fff;                /* weiße Schrift */
  border-color: #1e2a38;      /* gleicher Rand -> keine Verschiebung */
}


/*Intro animation*/
/* H1: Rotation + Blur-Effekt */
@keyframes spinBlur {
  0% {
    opacity: 0;
    transform: rotateX(90deg) scale(0.8);
    filter: blur(8px);
  }
  60% {
    opacity: 1;
    transform: rotateX(0deg) scale(1.05);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg) scale(1);
    filter: blur(0);
  }
}

header.video-header h1 {
  opacity: 0;
  animation: spinBlur 2s ease-out forwards;
}

/* P: Farbverlauf-Schimmer */
@keyframes shimmerText {
  0% {
    opacity: 0;
    background-position: -200% 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    background-position: 200% 0;
  }
}

header.video-header p {
  opacity: 0;
  background: linear-gradient(90deg, #ffffff, #ffffff, #ffffff, #ffffff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerText 3s ease forwards;
  animation-delay: 2s; /* startet nach H1 */
}


/* Scroll-Down Container */
.scroll-down {
  margin-top: 2rem;          /* Abstand nach dem <p> */
  text-align: center;        /* Icon mittig unter dem Text */
  cursor: pointer;
}

/* Icon Styling */
.scroll-down i {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;           /* Größe des Pfeils */
  font-weight: 700;
  color: #ff826e;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: background 0.3s, color 0.3s;
  animation: bounce 2s infinite;
}

/* Hover Effekt */
.scroll-down i:hover {
  background: #ff826e;
  color: #fff;
}

/* Bounce Animation */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(8px);
  }
  60% {
    transform: translateY(4px);
  }
}


/**/
/* Spinner bei Number-Input entfernen */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}

/* Gleiche Höhe wie .btn-sm.py-2 (~38px) */
.custom-amount-group .form-control,
.custom-amount-group .input-group-text {
  height: 38px;                          /* exakt wie die Buttons */
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.5;
  display: flex;
  align-items: center;                   /* vertikal mittig */
  border-color: var(--bs-primary) !important;
  border-radius: var(--bs-border-radius-sm, .2rem);
}

/* Focus-Effekt wie Buttons */
.custom-amount-group .form-control:focus {
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
.btn-primary, btn-primary:hover {
	background-color: #ff826e;
}



.bg-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cookie-settings-btn {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1050; /* über Footer/Content */
  
  background-color: #ff826e;
  border: none;
  border-radius: 0 .5rem .5rem 0; /* nur rechte Seite abgerundet */
  padding: 0.75rem 1rem;
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  transition: background-color 0.3s, transform 0.2s;
}

.cookie-settings-btn:hover {
  background-color: #e66d58; /* dunklere Variante beim Hover */
  transform: translateY(-50%) scale(1.05);
}

.cookie-settings-btn i {
  display: block;
  line-height: 1;
}
/**/
.language-switcher {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.language-switcher li {
  display: inline-block;
}

.language-switcher li.active {
  font-weight: bold;
  color: var(--primary);
}
.languages a {
  color: #222 !important; /* statt weiß */
  text-decoration: none;
}

.partner {
  filter: grayscale(100%);
  max-height: 100px;
  width: auto;
}

.switsch-white a {
  color: #fff !important;
}
/* ================================
   Responsive Typography
================================== */

/* Tablets (bis 991px) */
@media (max-width: 991.98px) {
  body {
    font-size: 1.1rem; /* etwas kleiner als 1.25rem */
  }

  .intro h1 {
    font-size: 4rem; /* statt 6rem */
  }

  .intro p {
    font-size: 2rem; /* statt 3rem */
  }

  header h1 {
    font-size: 3rem;
  }
  .title h1 {
    font-size: 3rem; 
  }
  section h2,
  h2.section-header {
    font-size: 1.75rem;
  }

  .card h1 {
    font-size: 2.2rem;
  }

  .count {
    font-size: 2.2rem;
  }
}

/* Smartphones (bis 575px) */
@media (max-width: 575.98px) {
  body {
    font-size: 1rem; /* Lesefreundlich auf kleinen Screens */
  }
  .logo {
	  height: 70px;
	  transition: all 0.3s ease;
	}
  .logo-scrolled { height: 70px !important; transition: all 0.3s ease; }
  .intro h1 {
    font-size: 2.5rem;
  }

  .intro p {
    font-size: 1.4rem;
  }

  header h1 {
    font-size: 2rem;
  }
  .title h1 {
    font-size: 2rem;      
  }
  section h2,
  h2.section-header {
    font-size: 1.5rem;
  }

  .card h1 {
    font-size: 1.8rem;
  }

  .count {
    font-size: 1.8rem;
  }
}