:root {
      --header-bg: #dddedf;
      --text: #444444;
      --hover: #777777;
      --active-bg: #000000;
      --active-text: #ffffff;
      --header-h: 125px;
      --nav-h: 36px;
      --cta-bg: #fbec54;
      --cta-text: #000000;
      --services-bg: #fbec54;
    }

    /* --- Container-Breiten wie auf zimmerei-sprenger.de (breiter) --- */
    @media (min-width:1200px){ .container{ max-width:1320px; } }
    @media (min-width:1400px){ .container{ max-width:1440px; } }

/* inter-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../font/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../font/inter-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../font/inter-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../font/inter-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-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: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('../font/inter-v20-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-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: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('../font/inter-v20-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

    html, body { height: 100%; scroll-behavior: smooth; }

    /* Hintergrund vollflächig, nicht kachelnd, fixiert */
    body {
      font-family: "Inter", sans-serif;
	  letter-spacing: 0.05em;
	  line-hight: 2em;
      color: var(--text);
      margin: 0;
      padding: 0;
	  font-weight: 400;
      background: url("../img/bg_wood.jpg") center top / cover no-repeat fixed;
      background-attachment: fixed;
      /* Platz für fixen Header schaffen */
      padding-top: var(--header-h);
    }

    /* iOS/Safari-Fallback für fixed BG */
    @supports (-webkit-overflow-scrolling: touch) {
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background: url("../img/bg_wood.jpg") center / cover no-repeat;
      }
    }

    /* ---------- Header fixiert oben ---------- */
    .site-header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1050;
      background: var(--header-bg);
      height: var(--header-h);
      display: flex;
      align-items: center;
      box-shadow: 0 2px 12px rgba(0,0,0,.08);
    }

    /* ---------- Global: ALLE runden Ecken entfernen ---------- */
    .container,
    .about-card,
    .services-block,
    .service-card,
    .parallax-box,
    .parallax-overlay,
    .ig-card,
    .footer-box,
    .footer-bar,
    .dropdown-menu {
      border-radius: 0 !important;
    }

    .brand img { height: 95px; width: auto; display: block; }

    .navbar { padding: 0; }
    .navbar-nav { align-items: center; }
    .navbar-nav .nav-link {
      text-transform: capitalize;
      color: var(--text);
      height: var(--nav-h);
      display: flex;
      align-items: center;
      padding: 0 20px;
      margin: 0 18px;
      text-decoration: none;
      transition: color .2s ease;
      white-space: nowrap;
    }
    .navbar-nav .nav-link:hover { color: var(--hover); }
    .navbar-nav .nav-link.active { background: var(--active-bg); color: var(--active-text); padding: 0 10px; }
    .navbar-toggler { border: none; }
    .navbar-toggler-icon { filter: invert(0); }

    /* Dropdowns */
    .dropdown-menu { border: 1px solid rgba(0,0,0,.08); padding: .5rem; }
    .dropdown-item { color: #000; text-transform: none; }
    .dropdown-item:hover { color: var(--hover); background: rgba(0,0,0,.03); }
    @media (min-width: 992px) { .navbar .dropdown:hover .dropdown-menu { display: block; margin-top: 0; } }

    /* Mobile Menü Overlay */
    @media (max-width: 991.98px) {
      .navbar-collapse {
        position: fixed !important;
        top: var(--header-h);
        right: 12px;
        left: auto;
        width: min(320px, 90vw);
        background: var(--header-bg);
        box-shadow: 0 10px 30px rgba(0,0,0,.15);
        padding: .5rem;
        z-index: 1100;
      }
      .navbar-nav { align-items: stretch; flex-direction: column; }
      .navbar-nav .nav-link { margin: 2px 0; padding: 8px 12px; height: var(--nav-h); }
      .navbar-collapse.collapse:not(.show) { display: none; }
    }

    /* Slider */
    .hero-slider { width: 100%; height: 700px; position: relative; overflow: hidden; }
    .hero-slider .carousel-item, .hero-slider .carousel-item img { height: 700px; }
    .hero-slider .carousel-item img { width: 100%; object-fit: cover; object-position: center; display: block; }
    .hero-slider::after { content:""; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.1),rgba(0,0,0,.25)); pointer-events:none; z-index:1; }

    .slide-caption { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; pointer-events:none; z-index:2; }
    .slide-caption .caption-inner { pointer-events:auto; }
    .slide-title { font-size:60px; color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.3); }
    .slide-subtitle { font-size:2rem; color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.25); margin-bottom:1rem; }
    .btn-cta { background:var(--cta-bg); color:var(--cta-text); border:none; padding:.6rem 1.2rem; font-weight:600; text-decoration:none; transition:background .2s; }
    .btn-cta:hover { background:#f0f000; color:var(--cta-text); }
    @media (max-width: 575.98px) { .hero-slider,.hero-slider .carousel-item,.hero-slider .carousel-item img{height:520px} .slide-title{font-size:42px} .slide-subtitle{font-size:1.4rem} }

    /* Über uns */
    .about-wrap { position:relative; z-index:5; margin-top:-50px; }
    .about-card {
      background:#fff;
      box-shadow:10px 0 30px rgba(0,0,0,.08), -10px 0 30px rgba(0,0,0,.08);
      padding:3rem; text-align:center;
    }
    .about-card h2 { text-transform:none; font-size:1.25rem; color: #000000;}

.about-card h1 { text-transform:none; font-size:1.75rem; color: #000000;}

h4 { text-transform:none; font-size:1.25rem; color: #000000;}

h1 { text-transform:none; font-size:1.75rem; color: #000000;}

    /* Services (NICHT fluid) */
    .services-block { background:var(--services-bg); padding:2rem 1rem; }
    .services-title { font-size:2rem; font-weight:700; margin-bottom:1rem; }
    .service-card {
      border:none; background:#fff; overflow:hidden; height:100%;
      box-shadow:0 4px 14px rgba(0,0,0,.12); transition:transform .2s, box-shadow .2s;
    }
    .service-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.18); }
    .service-card .card-img-top { height:160px; object-fit:cover; }
    .service-card .card-body { position:relative; padding-bottom:68px; }
    .btn-more { position:absolute; left:1rem; bottom:20px; color:#000; font-weight:600; text-decoration:none; }
    .btn-more:hover { text-decoration:underline; }
    .service-card:hover .btn-more .arrow { transform:translateX(4px); }

    	  /* Parallax (NICHT fluid, direkt drunter) */
    .parallax-box { color:#fff; }
    .parallax-overlay { background:rgba(0,0,0,.25); }
    .parallax-inner { padding:90px 1rem; text-align:center; }
    .parallax-inner h2 { font-size:2rem; font-weight:700; margin-bottom:1rem; text-shadow:0 2px 12px rgba(0,0,0,.35); }
    .parallax-inner p { max-width:1000px; margin:0 auto; line-height:1.7; text-shadow:0 1px 10px rgba(0,0,0,.3); }

    /* Instagram (NICHT fluid, weiß) */
    .ig-card { background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.08); padding:1.25rem; }
    .ig-title { font-size:2rem; font-weight:700; margin:0 0 1rem 0; }

    /* ---------- Footer (ein Container, identische Breite) ---------- */
    .site-footer { margin-top:0; font-size:.95rem; }
    .footer-box { background:#000; color:#fff; padding:3rem 1rem; }
    .footer-bar { background:#555; color:#fff; border-top:1px solid rgba(255,255,255,.15); text-align:center; font-size:.85rem; padding:.75rem 1rem; }

    /* Footer-Links */
    .footer-box h5 { font-size:1.1rem; margin-bottom:1rem; }
    .footer-box a { color:#fff; opacity:.9; text-decoration:none; }
    .footer-box a:hover { opacity:1; text-decoration:underline; }

    /* ============================================================
       Seitliche Abstände: kleiner, Breite der Container unverändert
       ============================================================ */

    /* Nur die Bootstrap-Gutter-Variable anpassen (Container-BREITE bleibt!) */
    .container { --bs-gutter-x: 1rem; }               /* XS */
    @media (min-width: 576px)  { .container { --bs-gutter-x: 1.25rem; } } /* SM */
    @media (min-width: 768px)  { .container { --bs-gutter-x: 1.5rem;  } } /* MD */
    @media (min-width: 992px)  { .container { --bs-gutter-x: 1.75rem; } } /* LG */
    @media (min-width: 1200px) { .container { --bs-gutter-x: 2rem;    } } /* XL */
    @media (min-width: 1400px) { .container { --bs-gutter-x: 2.25rem; } } /* XXL */

    /* Sektionen, die vorher fest 1rem Seiten-Padding hatten, koppeln wir
       leicht an die Gutter an (etwas mehr als der Container-Innenabstand). */
    .services-block,
    .parallax-inner,
    .ig-card,
    .footer-box,
    .footer-bar {
      padding-left:  calc(var(--bs-gutter-x) + .5rem);
      padding-right: calc(var(--bs-gutter-x) + .5rem);
    }

/* --- Media-Block (Bild/Text links-rechts) --- */
.media-block{
  display:flex;
  gap: 24px;
  align-items: flex-start;
  margin: 24px 0;
}

/* Standard-Breiten */
.media-block .media-text{
  flex: 1 1 0;
  min-width: 0; /* wichtig für lange Wörter/Listen */
}
.media-block .media-img{
  flex: 0 0 400px;          /* Bildspalte */
  max-width: 400px;
}
.media-block .media-img img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 10px;      /* optional */
}

/* left: Bild links, Text rechts (Standard) */
.media-block.left{
  flex-direction: row;
}

/* right: Text links, Bild rechts */
.media-block.right{
  flex-direction: row-reverse;
}

/* Mobile: immer untereinander */
@media (max-width: 768px){
  .media-block,
  .media-block.left,
  .media-block.right{
    flex-direction: column;
  }
  .media-block .media-img{
    flex: 0 0 auto;
    max-width: 100%;
  }
}

/* Seitennavigation – aktiver Punkt */
.col-md-3 .list-group-item.active{
  background-color: #ffff8d;
  border-color: #ffff8d;
  color: #000;            /* Textfarbe, ggf. anpassen */
  font-weight: 600;       /* optional */
}

#jobs { scroll-margin-top: 140px; }

/* Unterseiten-Cards (Leistungen / Service) */
.subpage-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 40px 0;
}

.subpage-card {
  border: 1px solid #ddd;
  background: #fff;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}

.subpage-card:hover {
  box-shadow: 0 12px 25px rgba(0,0,0,0.12);
  transform: translateY(-4px);
}

.subpage-card img {
  width: 100%;
  height: auto;
  display: block;
}

.subpage-card-content {
  padding: 20px;
  flex: 1;
}

.subpage-card h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.subpage-card a.more-link {
  margin-top: 10px;
  display: inline-block;
  color: #000;
  text-decoration: none;
  font-weight: 600;
}

.subpage-card a.more-link::before {
  content: "> ";
}

.subpage-card a.more-link:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 900px) {
  .subpage-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .subpage-cards {
    grid-template-columns: 1fr;
  }
}