/* =========================================================
   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) ---------- */
/* Deckt alle üblichen Button-Klassen und native Buttons ab */
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 */
}

/* 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: 48px !important;
  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: 1100px !important;
  margin: 12px auto 0 auto !important;
  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; }

/* ---------- CTA-Banner ---------- */
.cta-banner{
  background:#f6fbfd !important;
  border:1px solid #e5eef2 !important;
  border-radius:14px !important;
  padding:28px !important;
  margin:18px 0 36px !important;
}
.cta-banner h3{ margin:0 0 6px !important; }
.cta-banner p{ margin:0 0 16px !important; }

/* Tastaturfokus klar sichtbar, aber nur bei Tastatur (focus-visible) */
a.button:focus-visible,
.button:focus-visible,
.btn:focus-visible,
input[type="submit"]:focus-visible,
button:focus-visible,
.navbar-default .navbar-nav>li>a:focus-visible {
  outline: 3px solid rgba(44,104,125,.75);     /* petrol */
  outline-offset: 3px;
  border-radius: 6px;
}

/* Mouse-Fokus nicht doppelt zeigen */
a.button:focus:not(:focus-visible),
.button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
input[type="submit"]:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.navbar-default .navbar-nav>li>a:focus:not(:focus-visible) {
  outline: none;
}
/* -------------------------- */
/* ===== Leistungen: Raster & Karten ===== */
.services-header .lead { margin-top: 8px; }

.services-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:28px;
  margin-top:28px;
}

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

.service-card{
  background:#fff;
  border-radius:14px;
  padding:26px 24px;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  border-left:6px solid #2c687d; /* petrol */
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height: 100%;
}

.service-icon{
  font-size: 34px;
  line-height: 1;
  color:#2c687d;
}

.service-card h3{
  margin:0 0 2px 0;
  font-weight:800;
  letter-spacing:-.01em;
}

.service-points{
  margin:0 0 8px 0;
  padding-left: 18px;
}
.service-points li{
  margin:4px 0;
  line-height:1.55;
}

/* Button-Ausrichtung in Karten: immer unten schön bündig */
.service-card .btn{
  margin-top:auto;
  align-self:flex-start;
}

/* Sekundärer CTA unten */
.services-cta{ margin-top:32px; }

/* ----------------------------- */
/* ===== Referenzen (Work) ===== */
.work-header .lead { margin-top: 8px; }

/* 2x2 Raster wie bei Leistungen, gleiche Breakpoints */
.work-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  margin-top:28px;
}
@media (max-width: 991px){ .work-grid{ grid-template-columns:1fr; } }

.work-card{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.work-media{
  display:block;
  aspect-ratio: 3 / 2;              /* 600x400 */
  background:#f3f7f9;
  overflow:hidden;
}
.work-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.01);
  transition: transform .35s ease;
}
.work-card:hover .work-media img{ transform: scale(1.06); }

.work-body{
  padding:18px 18px 20px;
  display:flex; flex-direction:column; gap:10px;
}
.work-title{
  margin:0; font-weight:800; letter-spacing:-.01em;
}
.work-teaser{ margin:0; color:#334; }
.work-tags{
  display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 4px 0; padding:0; list-style:none;
}
.work-tags li{
  padding:6px 10px; border-radius:999px;
  background:#eef5f8; color:#2c687d; font-weight:700; font-size:.9rem;
}

/* Logoleiste */
.client-strip{
  display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:center;
  padding:28px 0 6px; opacity:.9;
}
.client-strip img{ filter: grayscale(100%); opacity:.85; }
.client-strip img:hover{ filter:none; opacity:1; }

/* CTA unten */
.work-cta{ margin-top: 26px; }
/* Preloader dauerhaft aus */
.gate { display: none !important; visibility: hidden !important; opacity: 0 !important; }


/* ===== HERO MIT DEZENTEM HINTERGRUNDBILD ===== */

#home .content.home-alice.full-size::before {
  content: "";
  position: absolute;
  inset: 0;

  /* Verlauf + Bild kombiniert */
  background-image:
    linear-gradient(to right, rgba(44,104,125,0) 60%, rgba(44,104,125,1) 100%), /* Verlauf */
    url("images/hero-overlay.webp"); /* dein Bild */

  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  opacity: 0.35;                 /* leicht durchscheinend */
  filter: grayscale(100%);
  pointer-events: none;
  z-index: 0;
}


/* Text bleibt immer oben */
#home .content.home-alice.full-size > * {
  position: relative;
  z-index: 1;
}

html { scroll-behavior: smooth; }

/* ===== Ablauf / Process ===== */
.process-header .lead { margin-top: 8px; }

.steps-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:28px;
  margin-top:28px;
}
@media (max-width: 1199px){ .steps-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 767px){  .steps-grid{ grid-template-columns:1fr; } }

.step-card{
  background:#fff;
  border-radius:14px;
  padding:26px 24px;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  border-top:6px solid var(--petrol);
  display:flex; flex-direction:column; gap:12px; min-height:100%;
}

.step-badge{
  width:40px; height:40px; border-radius:50%;
  background: var(--petrol);
  color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center;
  margin-bottom:4px;
}

.step-card h3{
  margin:0; font-weight:800; letter-spacing:-.01em;
}

.step-card p{ margin:0; color:#334; line-height:1.6; }

.step-points{ margin:6px 0 0 0; padding-left:18px; }
.step-points li{ margin:4px 0; line-height:1.55; }

.process-cta{ margin-top:32px; }

/* ===== CASE PAGES ===== */
#case-hero{
  background:#2c687d; color:#fff;
  padding: 90px 0 28px; /* unter Navbar + unten Luft */
}
#case-hero .heading{ color:#fff !important; letter-spacing:-.02em; }
#case-hero .lead{ color:#fff; opacity:.95; margin-top:6px; }

/* Contentbereich */
#case-content{ padding: 28px 0 40px; }

/* Grid */
.case-grid{
  display:grid; grid-template-columns: 2fr 1fr; gap:28px;
}
@media (max-width: 991px){
  .case-grid{ grid-template-columns:1fr; }
}

.case-facts{
  background:#fff; border-radius:14px; padding:18px;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  border-left:6px solid var(--petrol);
}
.case-facts h4{ margin-top:6px; margin-bottom:6px; font-weight:800; }
.case-facts .simple{ margin:0 0 10px 0; }

/* Medien */
.work-media{
  display:block; aspect-ratio: 3/2; background:#f3f7f9; overflow:hidden; border-radius:12px;
}
.work-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ========================
   Case-Seiten Hero kompakter
   ======================== */
#case-solarfloor-hero .content.home-alice.full-size {
  min-height: 32vh !important;      /* Höhe reduzieren */
  padding-top: 70px !important;     /* unter Navbar */
  padding-bottom: 30px !important;  /* kompakter */
}
#case-solarfloor-hero .heading {
  font-size: 2.2rem !important;
  margin-bottom: 10px !important;
}
#case-solarfloor-hero .title {
  max-width: 880px !important;
  margin: 0 auto 10px auto !important;
}
#case-solarfloor-hero .hero-tags {
  margin-top: 14px !important;
}