/* ===========================
   DESIGN-TOKENS (LIGHT THEME)
   =========================== */
:root{
  --bg:#ffffff;              /* Seitenhintergrund */
  --fg:#111827;              /* Primärtext */
  --muted:#6b7280;           /* Sekundärtext */
  --brand:#13358e;           /* Hauptblau */
  --brandLight:#6B9DC2;      /* helles Blau (CTA im Balken) */
  --nav1:#3a3a3a;            /* Navbar-Verlauf oben */
  --nav2:#2e2e2e;            /* Navbar-Verlauf unten */
  --surface:#ffffff;         /* Kartenfläche hell */
  --border:#e5e7eb;          /* feine Ränder */

  /* Fixe Navbar: EINMAL definieren */
  --nav-bar: 6px;            /* blaue Linie unter der Navbar */
  --nav-h: 148px;            /* Desktop-Offset (Logo + Padding + Reserve) */

  /* Karten/Bildhöhen als Variable – sorgt für Konsistenz */
  --svc-img-h: 240px;        /* Service-Karten-Bildhöhe */
  --gal-img-h: 200px;        /* Galerie-Bildhöhe */
  /* wie viel Luft unter dem Balken? (mobil → desktop) */
  --feature-gap: clamp(18px, 3vw, 42px);
}
@media (max-width: 991.98px){ :root{ --nav-h: 126px; } }  /* Tablet */
@media (max-width: 575.98px){ :root{ --nav-h: 108px; } }  /* Phone  */

/* ===========================
   BASE
   =========================== */
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Inter",system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
a{ color:var(--brand); text-decoration:none }
a:hover{ opacity:.9 }
.text-app-subtle{ color:var(--muted); }
.object-cover{ object-fit:cover }

/* Abstand oben für Seiteninhalte mit fixer Navbar (Fallback via --pt-nav überschreibbar) */
.pt-nav{ padding-top: var(--pt-nav, calc(var(--nav-h) + var(--nav-bar) + 14px)); }

/* ===========================
   NAVBAR + AKZENTLINIE
   =========================== */
.bg-nav{
  background:linear-gradient(180deg,var(--nav1),var(--nav2));
  border-bottom:1px solid #242424;
}
.has-blue-underline{ border-bottom:6px solid var(--brand); } /* blaue Linie */

/* Logo-Größe (weißes PNG/SVG) – EINMAL */
.logo-navbar{ height:76px; width:auto; display:block; }      /* Desktop */
@media (max-width: 991.98px){ .logo-navbar{ height:64px; } } /* Tablet  */
@media (max-width: 575.98px){ .logo-navbar{ height:56px; } } /* Phone   */

/* Mehr vertikale Luft in der Navbar */
header.navbar .container{ padding-top:14px; padding-bottom:14px; }

/* Mobile: mehr Platz zwischen Logo und erstem Menüpunkt */
@media (max-width: 991.98px){
  header.navbar .navbar-brand{ margin-bottom:14px; }
  header.navbar .navbar-collapse{ padding-top:6px; }
  header.navbar .navbar-nav .nav-item:first-child{ margin-top:4px; }
  header.navbar .navbar-nav .nav-link{ padding-top:.6rem; padding-bottom:.6rem; }
}

/* Links */
.navbar .nav-link{ color:rgba(255,255,255,.85) }
.navbar .nav-link:hover{ color:#fff }
.navbar .nav-link.active{
  color:#fff;
  box-shadow:inset 0 -3px 0 var(--brand);
}

/* ===========================
   BUTTONS
   =========================== */
.btn-primary{ background:var(--brand); border-color:var(--brand); color:#fff }
.btn-objektbau{ background:#2f5eb9; border-color:#2f5eb9; color:#fff }
.btn-privat{    background:#1f9e5f; border-color:#1f9e5f; color:#fff }
.btn-skyframe{  background:#6aa7ff; border-color:#6aa7ff; color:#06224a }

/* ===========================
   KARTEN / SEKTIONEN
   =========================== */
.card-dark{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.25rem;
  color:var(--fg);
}
.balken{
  background:#f7f9fc;
  border:1px solid var(--border);
  border-radius:16px;
}

/* ===========================
   FOOTER
   =========================== */
.bg-footer{
  background:#f7f9fc;
  color:var(--fg);
  border-top:1px solid var(--border);
}
.bg-footer a{ color:var(--brand); }
.bg-footer .small,
.bg-footer .text-app-subtle{ color:var(--muted); }

/* Footer-Logo: groß, aber responsiv */
.footer-logo{
  height:clamp(52px, 7vw, 80px);
  width:auto;
  display:block;
}

/* ===========================
   OBJEKTBAU / BREADCRUMBS
   =========================== */
.page-hero img{ object-fit:cover }
.objektbau-bar{
  height:10px; background:var(--brand);
  margin:8px 0 24px; border-bottom:1px solid #cfe0ff;
}
.breadcrumb{ --bs-breadcrumb-divider:'›' }

/* ===========================
   GALERIE (Projekte, Privatkunden)
   =========================== */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}
.gallery-item{
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.gallery-item img{
  width:100%;
  height:var(--gal-img-h);
  object-fit:cover;
  display:block;
}
@media (min-width: 992px){
  :root{ --gal-img-h: 220px; }
}

/* ===========================
   VOLLBREITE BLÖCKE (für Bänder)
   =========================== */
.full-bleed{
  position:relative;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  width:100vw;
}

/* ===========================
   VOLLBREITER HERO / SLIDER
   =========================== */
.hero-bleed{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}
.hero-bleed .carousel,
.hero-bleed .carousel-inner,
.hero-bleed .carousel-item{
  height: clamp(520px, 78vh, 900px);
}
.hero-bleed .carousel-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero direkt als 1. Element in <main class="pt-nav">? Offset kompensieren. */
.pt-nav > .hero-bleed{
  margin-top: calc(-1 * var(--pt-nav, calc(var(--nav-h) + var(--nav-bar) + 14px)));
}

/* Bedienelemente/Indikatoren */
.hero-bleed .carousel-control-prev-icon,
.hero-bleed .carousel-control-next-icon{
  filter: drop-shadow(0 0 6px rgba(0,0,0,.65));
}
.hero-bleed .carousel-indicators [data-bs-target]{
  width: 28px; height: 6px; border-radius: 3px;
  background: #fff; opacity: .65;
}
.hero-bleed .carousel-indicators .active{
  background: var(--brand); opacity: 1;
}
@media (max-width: 575.98px){
  .hero-bleed .carousel,
  .hero-bleed .carousel-inner,
  .hero-bleed .carousel-item{ height: 58vh; }
}

/* ===========================
   FEATURE-BALKEN UNTER HERO
   =========================== */
.feature-strip{
  background:var(--brand);
  color:#fff;
  padding:46px 0 58px;            /* größer & edler */
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(0,0,0,.12);
  position:relative;
  /* NEU: Abstand nach unten (unter dem Pfeil) */
  margin-bottom: var(--feature-gap);
}
.feature-strip::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  /* Der Pfeil bleibt gleich – wenn du ihn etwas höher haben willst,
     nimm hier z.B. bottom:-12px statt -16px. */
  bottom:-16px;
  width:0; height:0;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-top:16px solid var(--brand);
}
.feature-text{
  font-weight:700;
  letter-spacing:.3px;
  font-size:clamp(1.05rem, 0.7rem + 0.9vw, 1.35rem);
  margin-bottom:18px;
}

/* CTAs im Band – gut lesbar */
.cta-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  max-width:1100px; margin:0 auto;
}
.feature-strip .btn-cta{
  background:#2f5eb9;
  color:#fff;
  border:1px solid rgba(255,255,255,.45);
  text-shadow:0 1px 1px rgba(0,0,0,.25);
  padding:1.05rem 1.6rem;
  border-radius:12px;
  min-width:220px;
  font-weight:600;
  font-size:clamp(1rem, 0.9rem + .25vw, 1.15rem);
  box-shadow:0 2px 0 rgba(255,255,255,.25) inset,
             0 6px 18px rgba(0,0,0,.10);
  transition:transform .12s ease, box-shadow .15s ease, filter .15s ease;
  will-change: transform;
}
.feature-strip .btn-cta:hover{
  background:#3a69c3;
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(0,0,0,.14);
}
@media (max-width: 575.98px){
  .cta-grid{ grid-template-columns:1fr; }
  .feature-strip .btn-cta{ width:100%; min-width:0; }
}

/* ===========================
   LEISTUNGEN – GRID CARDS
   =========================== */
.service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:18px;
}
.service-card{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:16px;
  border:1px solid var(--border);
  background:#fff;
  transition:transform .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.service-card img{
  display:block;
  width:100%;
  height:var(--svc-img-h);
  object-fit:cover;
  transition:transform .4s ease;
  border-radius:16px;
}
.service-card .overlay{
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:var(--svc-img-h);
  background:linear-gradient(to top,
               rgba(0,0,0,.55),
               rgba(0,0,0,.08) 60%,
               rgba(0,0,0,0));
  pointer-events:none;
  border-radius:16px;
}
.service-card .title{
  position:absolute;
  left:16px; right:16px;
  bottom:12px;
  margin:0;
  color:#fff;
  font-size:1.1rem;
  font-weight:800;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  line-height:1.2;
}
.service-card .body{ display:none !important; } /* nur EIN Titel */
.service-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 26px rgba(0,0,0,.08);
}
.service-card:hover img{ transform:scale(1.03); }

/* ===========================
   RECHTSTEXTE (Datenschutz, Impressum)
   =========================== */
.legal{
  max-width:900px;
  margin:0 auto;
}
.legal h1, .legal h2{ margin-top:.5rem; }
.legal h3{ margin-top:1.2rem; }

/* ===========================
   CTA-Band (Kontakt)
   =========================== */
.cta-band{
  background:var(--brand); color:#fff;
  border-radius:16px; padding:20px;
  border:1px solid rgba(0,0,0,.08);
}
.cta-band .btn{ white-space:nowrap; }

/* ===========================
   USP-Liste – Marker ausblenden
   =========================== */
.usp-list{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.usp-list li{
  list-style: none !important;
}
.usp-list li::marker{
  content: "" !important;
}

/* Motion-Respekt für Leute mit "Bewegung reduzieren" */
@media (prefers-reduced-motion: reduce){
  * { transition:none !important; animation:none !important; }
}
/* Mehr Luft unter dem blauen Feature-Balken */
:root{
  /* etwas größer als vorher */
  --feature-gap: clamp(90px, 5vw, 72px);
}

/* Startseiten-Intro direkt unter dem Feature-Band lockern */
.feature-strip + article .lead{
  line-height: 1.65;                                  /* Zeilenabstand erhöht */
  margin-top: clamp(10px, 1.8vw, 22px);               /* Luft vom Pfeil/oben */
  margin-bottom: clamp(14px, 2.2vw, 28px);            /* Luft nach unten */
}

/* Auch der Abstand zum Button etwas größer */
.feature-strip + article .lead + .mt-3{
  margin-top: clamp(18px, 2.8vw, 34px) !important;
}