/* =========================================================
   z-override.css – Clean Final
   Ziel:
   - Buttons: petrol (#2c687d) + weiße Schrift; Hover NUR Text #000
   - Menü: Links petrol, Hover grau; keine Flächen, "Kontakt" neutral
   - Hero: volle Breite, ~10px Rand; kompakter
   - Kacheln: 2 Spalten Desktop, 1 Spalte mobil
========================================================= */

/* ---------- Variablen ---------- */
:root {
  --petrol: #2c687d;
  --menu-hover: #7a8a91;
}

/* ---------- Allgemein ---------- */
section { scroll-margin-top: 90px; }          /* Anker-Offset für fixe Navbar */
.content .container, .container { max-width: 1140px; }

/* ---------- Buttons (global, EIN Stil) ---------- */
a.button, .button,
a.btn, .btn, .btn-ghost, .btn-contrast,
.more-link, .cta-button,
input[type="submit"], button {
  -webkit-appearance: none; appearance: none;
  background: var(--petrol) !important;
  color: #fff !important;
  border: 2px solid var(--petrol) !important;
  border-radius: 40px !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  display: inline-block !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color .2s ease !important;     /* NUR Textfarbe animieren */
  cursor: pointer !important;
}

/* Hover/Focus: nur Schrift schwarz; Hintergrund bleibt petrol */
a.button:hover, .button:hover,
a.btn:hover, .btn:hover, .btn-ghost:hover, .btn-contrast:hover,
.more-link:hover, .cta-button:hover,
input[type="submit"]:hover, button:hover,
a.button:focus, .button:focus,
a.btn:focus, .btn:focus, .btn-ghost:focus, .btn-contrast:focus,
.more-link:focus, .cta-button:focus,
input[type="submit"]:focus, button:focus {
  background: var(--petrol) !important;
  color: #000 !important;
  border-color: var(--petrol) !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Ghost-/Sekundärvarianten auf Primärstil vereinheitlichen */
.btn-ghost, .button.btn-ghost, .more-link {
  background: var(--petrol) !important;
  color: #fff !important;
  border-color: var(--petrol) !important;
}

/* Alte Pseudo-Rahmen/Underlines deaktivieren */
a.button::after, .button::after,
.btn::after, .btn-ghost::after, .btn-contrast::after,
.more-link::after, .cta-button::after,
input[type="submit"]::after, button::after { content: none !important; }

/* ---------- Navigation (neutral, ohne Flächen) ---------- */
.navbar-default .navbar-nav>li>a,
#top-nav .cta-nav {
  background: transparent !important;
  color: var(--petrol) !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  padding: 15px 15px !important;            /* Standard Bootstrap */
}
#top-nav {
  will-change: transform;
  transform: translateZ(0);
}

/* Hover/Fokus: nur grau, keine Fläche */
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus,
#top-nav .cta-nav:hover,
#top-nav .cta-nav:focus {
  background: transparent !important;
  color: var(--menu-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Active: NICHT hervorheben/hinterlegen */
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
  background: transparent !important;
  color: var(--petrol) !important;
  box-shadow: none !important;
}

/* Sicherheitsnetz: evtl. alte Unterstreichungen entfernen */
.navbar-default .navbar-nav>li>a::after { content: none !important; }

/* ---------- Hero (volle Breite, kompakt) ---------- */
#home .content.home-alice.full-size {
  min-height: 56vh !important;
  padding-top: 90px !important;             /* unter Navbar */
  padding-bottom: 20px !important;          /* Reduziert den Abstand unter dem Button */
  display: flex !important;
  align-items: center !important;
}

#home .heading {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 10px !important;               /* ~10px Rand */
  letter-spacing: -0.02em !important;
}

#home .title {
  width: 100% !important;
  max-width: 100%;
  margin: 12px auto 0;
  padding: 0 10px !important;               /* ~10px Rand */
  padding-top: 90px !important;  
  padding-left: 190px !important;
}

/* ---------- Feature-Kacheln (About) ---------- */
.feature-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 28px !important;
  margin-top: 24px !important;
}

@media (max-width: 991px) {
  .feature-grid { grid-template-columns: 1fr !important; }
}

.card-simple {
  background:#fff !important;
  border-radius:14px !important;
  padding:28px 24px !important;
  box-shadow:0 8px 22px rgba(0,0,0,.12) !important;
  border-left:6px solid var(--petrol) !important;
}

.card-simple h4 { margin:0 0 10px !important; font-weight:700 !important; }
.card-simple p { margin:0 0 18px !important; line-height:1.6 !important; }

/* Rest of the content */
footer {
  position: relative;  /* Positionierung sicherstellen */
  z-index: 1000;       /* Stellen sicher, dass der Footer oben ist */
  visibility: visible !important;  /* Sichtbarkeit des Footers erzwingen */
}

footer {
  display: block !important; /* Footer als Blockelement anzeigen */
  position: relative;        /* Positionierung überprüfen */
  bottom: 0;                 /* Footer an den unteren Rand setzen */
  width: 100%;               /* Footer über die gesamte Breite anzeigen */
}

.overlay-window {
  z-index: 500 !important; /* Sicherstellen, dass das Overlay unter dem Footer bleibt */
}

footer {
  display: block !important; /* Sicherstellen, dass der Footer als Blockelement angezeigt wird */
  visibility: visible !important; /* Sichtbarkeit des Footers erzwingen */
}

/* === LCP-FIX: Hero ohne Hintergrund === */
#home,
#home .view,
.eposs-home {
  background: none !important;
  background-image: none !important;
}

/* Anpassung für den Abstand nach dem Button */
#home .content.home-alice.full-size {
  padding-bottom: 20px !important; /* Reduziert den Abstand unter dem Button */
}

#home .title {
  margin-bottom: 0 !important; /* Entfernt den unteren Rand */
}

/* Reduziert den Abstand nach dem Button */
#home {
  padding-bottom: 10px !important; /* Verringert den Abstand unter dem Button */
}

#home .container {
  margin-bottom: 0 !important; /* Entfernt den unteren Rand der Container-Umgebung */
}

/* Optional: Der Button selbst kann auch ein wenig mehr Abstand erhalten */
#home .btn {
  margin-bottom: 0 !important; /* Entfernt zusätzlichen Abstand unter dem Button */
}

/* Verhindert den Abstand nach dem Button in der Sektion */
#home {
  padding-bottom: 0 !important; /* Entfernt das Padding unterhalb der Section */
  margin-bottom: 0 !important; /* Entfernt den Margin unterhalb der Section */
}

/* Container: Verhindert den Abstand unter dem Container */
#home .container {
  padding-bottom: 0 !important; /* Entfernt das Padding unter dem Container */
  margin-bottom: 0 !important; /* Verhindert, dass der Container mehr Abstand hat */
}

/* Button: Sorgt dafür, dass der Button keinen zusätzlichen Abstand hat */
#home .btn {
  margin-bottom: 0 !important; /* Entfernt den zusätzlichen Abstand unter dem Button */
}

/* Optionale Anpassung für größere Auflösung */
@media (min-width: 768px) {
  #home {
    padding-bottom: 0 !important; /* Doppelte Sicherstellung, dass der Abstand auch hier entfernt wird */
  }
}

/* #home Sektion - Entfernt Padding und Margin unterhalb */
#home {
  padding-bottom: 0 !important;  /* Entfernt das Padding unter der Sektion */
  margin-bottom: 0 !important;   /* Entfernt den Margin unter der Sektion */
}

/* Entfernt den Abstand innerhalb des Containers nach unten */
#home .container {
  padding-bottom: 0 !important;  /* Entfernt Padding im Container */
  margin-bottom: 0 !important;   /* Entfernt Margin im Container */
}

/* Anpassung des Buttons: Sicherstellen, dass der Button keinen zusätzlichen Abstand hat */
#home .btn {
  margin-bottom: 0 !important;  /* Entfernt den Abstand unter dem Button */
}

/* Sicherstellen, dass auch auf mobilen Geräten keine Abstände bestehen */
@media (max-width: 991px) {
  #home {
    padding-bottom: 0 !important;  /* Sicherstellen, dass keine Abstände auf mobilen Geräten vorhanden sind */
  }

  #home .container {
    padding-bottom: 0 !important;  /* Entfernt Padding auf kleineren Bildschirmen */
  }

  /* Anpassung der H1 um den Platz zu optimieren */
  .hero-h1 {
    margin-bottom: 0 !important;  /* Verhindert zusätzlichen Abstand nach dem H1 */
  }
}

/* Zusätzliche Sicherheitsanpassung für extreme Fälle */
#home .eposs-home {
  margin-bottom: 0 !important;  /* Verhindert ungewollte Margins auf den inneren Sektionen */
  padding-bottom: 0 !important; /* Entfernt das Padding innerhalb der Sektion */
}

/* Optionale Überprüfung für den Abstand auf der gesamten Seite */
body {
  padding-bottom: 0 !important;  /* Entfernt zusätzliche Abstände am unteren Ende der Seite */
}
/* --- Sicherstellen, dass der Button keinen Abstand hat --- */
#home .btn {
  margin-bottom: 0 !important;  /* Entfernt den Abstand unter dem Button */
  padding-bottom: 0 !important; /* Sicherstellen, dass kein zusätzliches Padding nach dem Button bleibt */
}

/* --- Lücke unter der Sektion #home entfernen --- */
#home {
  margin-bottom: 0 !important; /* Entfernt Margin unterhalb der Sektion */
  padding-bottom: 0 !important; /* Entfernt Padding unterhalb der Sektion */
}

/* --- Entfernt Padding und Margin innerhalb des Containers --- */
#home .container {
  padding-bottom: 0 !important; /* Entfernt Padding unter dem Container */
  margin-bottom: 0 !important;  /* Entfernt Margin unter dem Container */
}

/* --- Füge einen Test-Border hinzu, um den Abstand zu sehen --- */
#home {
  border: 1px solid red !important; /* Zum Testen, welcher Bereich die Lücke verursacht */
  padding-bottom: 0 !important;
}

/* --- Button: Verhindert zusätzliche Ränder --- */
#home .btn-primary {
  margin-bottom: 0 !important; /* Entfernt den Abstand unter dem Button */
}

/* --- Teste auch den Abstand innerhalb des .container Elements --- */
#home .container {
  border: 1px dashed blue !important; /* Test-Border für den Container */
}
/* Profilbox – ruhig & konzernfähig */
.ep-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.ep-profile-photo {
  width: 80px;
  height: 80px;
  border-radius: 6px;        /* leicht, nicht rund */
  object-fit: cover;
  flex-shrink: 0;
}

.ep-profile-meta {
  font-size: 0.95rem;
  line-height: 1.35;
}

.ep-profile-sub {
  color: #666;
  font-size: 0.85rem;
}

/* Mobile etwas kompakter */
@media (max-width: 767px) {
  .ep-profile {
    gap: 10px;
  }

  .ep-profile-photo {
    width: 64px;
    height: 64px;
  }
}
.ep-project {
  margin-bottom: 22px;
}

.ep-project-meta {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 6px;
}
/* Titelbanner unter H1 */
.ep-title-banner {
  margin: 18px auto 26px;
  max-width: 100%;
}

.ep-title-banner-img {
  width: 100%;
  max-width: 1564px;   /* Originalbreite des Banners */
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 6px;  /* optional, ruhig */
}