:root {
      --card-radius: 1rem;
      --shadow-soft: 0 10px 24px rgba(0,0,0,.08);
      --shadow-hover: 0 14px 34px rgba(0,0,0,.14);
		
	  --hero-min-h: 60svh; /* schön hoch, aber nicht zu groß */
      --logo-size: clamp(160px, 30vw, 600px);
      --spin-factor: 0.25turn; /* wie stark pro Scroll-Einheit gedreht wird (Basiswert) */
    }
	.bg-grey, section#contact-section, .gal-wrapper, { background-color: darkslategrey; }

.bg-silver {
  background: radial-gradient(
    circle at center,
    #a6afb1 0%,   /* etwas heller in der Mitte */
    #97A0A2 40%,  /* deine Basisfarbe */
    #848c8e 100%  /* etwas dunkler außen */
  );
}

	  
	body{min-height:200svh;background:#0a0a0a;color:#e2e8f0;}
	  
	  ul.custom-list {
  list-style: none; /* entfernt die Standardpunkte */
  padding-left: 1.2em;
}

ul.custom-list li::before {
  content: "⚙️";
  margin-right: 0.5em;
}
	  
	  /* Zahnrad-Span, das durch JS eingefügt wird */
ul.custom-list li .gear {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  transform-origin: center center;
  width: 1em;
  text-align: center;
}
	  
    .page-title { letter-spacing:.4px; }
    header, hero { background:#0a0a0a; }
    section { padding:4rem 0; }
    footer { padding:1rem 0; }
    .lead, li { font-size: 1.25rem; font-weight: 400; }
    li { line-height: 1.6; margin-bottom:.5rem; }
	  div#gallery {
    border-radius: 10px; margin-bottom: 50px;
}
    /* Galerie-Kacheln */
    .gal-item { position: relative; overflow: hidden; border-radius: var(--card-radius); box-shadow: var(--shadow-soft); background:#0b1223; }
    .gal-item img { width: 100%; height: 100%; object-fit: cover; border: 1px solid silver; border-radius: var(--card-radius); display:block; transition: transform .5s ease, filter .4s ease; }
    .gal-item:hover img { transform: scale(1.06); filter: saturate(1.15) contrast(1.05); }
    .gal-item::after {
      content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s ease;
      background: radial-gradient(120px 80px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.18), transparent 60%);
    }
    .gal-item:hover::after { opacity:1; }
    .gal-item:hover { box-shadow: var(--shadow-hover); }
    .gal-caption { position:absolute; left:.6rem; bottom:.6rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      background: rgba(#fafafa,.55); color:#fff; padding:.25rem .55rem; font-size:.8rem; border-radius:.5rem; border:1px solid rgba(255,255,255,.15); }
    /*.gal-wrapper { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); border-radius: 1.25rem; padding:1rem 1rem 1.5rem; } */
    .gal-item { --mx:50%; --my:50%; }

	  /* Galerie-Bildgröße anpassen */
#galleryGrid .col {
  display: flex;
  justify-content: center;
}

#galleryGrid .gal-item {
  width: 100%;
  max-width: 650px; /* maximale Breite am Desktop */
}
	  
    .btn { background-color: #efefef; border-color: #000; color: black; text-decoration: none; }
	.btn-link:hover, .btn-primary:hover { background-color: #fafafa; color: #0a0a0a; text-decoration: underline;}
	  a { color: black; text-decoration: none;}
	  a:hover { color: grey; text-decoration: underline;}
	  
	  #contact p {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

#contact a:hover {
  text-decoration: underline;
  color: #66b3ff;
}

#contact i {
  font-size: 1.4rem;
}
	  
    /*[id] {
      scroll-margin-top: 50px; /* Abstand zum oberen Rand beim Scrollen */
    }*/
	  
/* Hero */
    .hero {
      min-height: var(--hero-min-h);
      display: grid;
      place-items: center;
      position: relative;
      overflow: clip;
      /* background: radial-gradient(80% 60% at 50% 30%, rgba(255,255,255,.06), transparent),
                  linear-gradient(#0b1223, #0f172a); */
    }
    .hero h1{
      /* position: absolute; inset: auto 0 2rem 0; */
      	text-align: center; font-weight:600; letter-spacing:.02em;
		font-size: clamp(2rem, 4vw, 3rem);
  		line-height: 1.3;
    }
	  .hero h2 {
	  color: rgba(255,255,255,0.8);
	  letter-spacing: 1px;
	  font-size: 2rem;
	text-align: center;
	}
	.hero .lead {
	  font-size: 1.15rem;
	  color: #e0e8f0;
	}

    /* Logo */
    .hero-logo-wrap{
      width: var(--logo-size);
      aspect-ratio: 1/1;
      display: grid;
      place-items:center;
      border-radius: 50%;
      background: radial-gradient(closest-side, rgba(255,255,255,.08), rgba(255,255,255,0));
      /* box-shadow: 0 20px 50px rgba(0,0,0,.35), inset 0 0 40px rgba(255,255,255,.05); */
    }
    .hero-logo{
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
      /* transform: rotate(0turn);
      transform-origin: 50% 50%;
      will-change: transform;
      transition: transform .2s cubic-bezier(.22,.8,.36,1); /kleiner Fallback bei Sprüngen */
    }

    /* Motion-Respect */
    @media (prefers-reduced-motion: reduce){
      .hero-logo{ transition:none; }
      /* Optional: Statik oder langsame, fixe Rotation */
      /* .hero-logo{ animation: slowspin 20s linear infinite; } */
      /* @keyframes slowspin{ to{ transform: rotate(1turn); } } */
    }	  
	 
	  hr {
    width: 90%;
    margin-left: 5%;
}
	  
.parallax-section {
  position: relative;
  overflow: hidden;
  /* min-height: 75vh; */
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0f172a;
}

.parallax-bg, .parallax-bg-top {
  position: absolute;
  top: 45%; left: 50%;
  width: 110%; height: auto;
  aspect-ratio: 16/9;
  transform: translate(-50%, -50%) translateY(0); /* zentriert */
  transition: transform 0.1s linear;
  will-change: transform;
  z-index: 0;
}

#parallax-bg {
	background: url("/images/fullsize/asphalt.webp") center / cover no-repeat; 
}
	  
#parallax-bg-top {
	background: url("/images/fullsize/aushub-hell.webp") center / cover no-repeat; 
}
	  
.parallax-section .container {
  z-index: 1;
}

.parallax-section::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.65));
  z-index: 0;
}

@media (max-width: 768px) {
  .parallax-bg {
    top: 30%; /* früherer Startpunkt */
    transform: translate(-50%, -30%) translateY(0);
    width: 350%; /* optional, damit kein Rand sichtbar wird */
  }
}
	
@media (min-width: 769px) {
  .parallax-section {
	 min-height: 75vh;
  }
}
	  
.hero-logo-wrap {
  margin: 0 auto 2rem; /* zentriert und mit Abstand nach unten */
  display: flex;
  justify-content: center;
}

.hero-logo {
  max-width: 100%;
  width: var(--logo-size);
  height: auto;
}

.contact-info p {
    font-size: 1.3em;
}