/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* Theme */
:root {
  --bg-dark: #0f0f0f;
  --bg-light: #1c1c1c;
  --panel: #141414;
  --accent: #37b44a;      /* neues Grün */
  --accent-2: #46d75b;    /* hellere Variante für Hover / Verlauf */
  --text: #f5f5f5;
  --muted: #cfcfcf;
  --line: #232323;
  --shadow: 0 8px 30px rgba(0, 0, 0, .35);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg-dark);
  color:var(--text);
  line-height:1.6;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  background:rgba(28,28,28,.9);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--accent);
  padding:.9rem 1.2rem;
}
.logo{
  font-family:'Orbitron', sans-serif;
  font-weight:700;
  font-size:1.35rem;
  letter-spacing:.5px;
  color:var(--text); text-decoration:none;
}
.logo span{color:var(--accent)}
.nav-toggle{
  display:none;
  background:transparent; border:0; cursor:pointer;
  padding:.25rem; margin-left:.5rem;
}
.nav-toggle-bar{
  display:block; width:26px; height:2px; background:var(--text); margin:5px 0; transition:transform .2s ease;
}
.nav ul{list-style:none; display:flex; gap:1.25rem}
.nav a{
  color:var(--muted); text-decoration:none; font-weight:600; font-size:.95rem;
  padding:.4rem .2rem; transition:color .2s ease, opacity .2s ease;
}
.nav a:hover{color:var(--accent)}

/* Hero */
.hero{
  position:relative;
  display:grid; place-items:center;
  min-height:60svh;
  padding:6rem 1rem 5rem;
  color:var(--text);
  border-bottom:2px solid var(--accent);
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.85)),
    url('assets/hero-bg.png') center/cover no-repeat fixed;
}
.hero-logo {
  width: min(90%, 600px);
  height: auto;
  display: block;
  margin: 0 auto 2rem;
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.6));
  animation: fadeIn 1.2s ease forwards;
}

.hero-inner{text-align:center; max-width:900px}
.hero h1{
  font-family:'Orbitron', sans-serif;
  font-size:clamp(2rem, 4.5vw, 3.5rem);
  letter-spacing:1px;
}
.subline{color:var(--accent); font-weight:700; margin:.6rem 0 1.2rem}
.btn{
  display:inline-block; text-decoration:none; cursor:pointer; user-select:none;
  padding:.9rem 1.1rem; border-radius:12px; font-weight:700; border:1px solid transparent;
}
.btn-primary{
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#fff; box-shadow:var(--shadow);
}
.btn-primary:hover{filter:brightness(1.05)}

/* Sections */
.content{padding:4rem 1.25rem; border-bottom:1px solid var(--line)}
.section-head{max-width:950px; margin:0 auto 2rem}
.content h2{
  font-family:'Orbitron', sans-serif;
  color:var(--accent); margin-bottom:.6rem; letter-spacing:.5px;
}
.content p{color:var(--muted)}

/* About */
.about-grid{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center;
}
.card-media{
  width:100%; height:auto; border-radius:14px; box-shadow:var(--shadow);
  outline:1px solid #222;
}
.about-copy h3{margin:.5rem 0 .4rem}
.badges{display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0}
.badge{
  display:inline-block; padding:.35rem .6rem; border-radius:999px;
  background:#1d1d1d; border:1px solid #2a2a2a; color:var(--muted); font-weight:600; font-size:.85rem;
}
.checklist{margin: .6rem 0 0 1.2rem; color:var(--muted)}
.checklist li{margin:.2rem 0}

/* Cards / grids */
.card{
  background:var(--bg-light);
  border:1px solid #222;
  border-left:4px solid var(--accent);
  border-radius:12px;
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 10px 36px rgba(0,0,0,.45)}

/* Leistungen (Accordion) */
.leistungen-grid{
  max-width:1000px; margin:0 auto; display:grid; gap:1rem;
}
.leistung-header{
  width:100%;
  background:none; border:0; color:var(--text); font-weight:800; font-size:1.1rem;
  text-align:left; padding:1rem 1.2rem; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
}
.leistung-header:hover{background:rgba(255,255,255,.04); border-radius:12px}
.chevron{
  width:10px; height:10px; border-right:2px solid var(--text); border-bottom:2px solid var(--text);
  transform:rotate(45deg); transition:transform .25s ease;
}
.leistung.active .chevron{transform:rotate(-135deg)}
.leistung-content{
  max-height:0; overflow:hidden; background:#121212;
  padding:0 1.2rem; color:var(--muted);
  transition:max-height .45s ease, padding .25s ease, opacity .25s ease;
  opacity:.9; border-top:1px solid #1f1f1f; border-bottom-left-radius:12px; border-bottom-right-radius:12px;
}
.leistung-content p{padding:.4rem 0 .4rem}
.dots{margin:.2rem 0 .8rem 1.2rem}
.dots li{margin:.2rem 0}
.leistung.active .leistung-content{ /* JS setzt Höhe dynamisch; diese Klasse ist für Pfeil/Styling */
  /* rein visuelle Markierung */
}

/* Vermietung */
/* Vermietung */
.rental-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.rental {
  display: flex;
  flex-direction: column;
  background: var(--bg-light);
  border: 1px solid #222;
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rental:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.rental img {
  width: 100%;
  height: 220px;              /* Einheitliche Höhe */
  object-fit: cover;          /* Zuschneiden, ohne Verzerrung */
  display: block;
}

.rental h3 {
  margin: 0.8rem 1rem 0.3rem;
  color: var(--accent);
}

.rental p {
  margin: 0 1rem 1rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Responsive Anpassung */
@media (max-width: 820px) {
  .rental-grid {
    grid-template-columns: 1fr 1fr;
  }
}

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


/* Downloads */
.download-list{max-width:900px; margin:0 auto; list-style:none; display:grid; gap:.7rem}
.download-link{
  display:inline-block; padding:.9rem 1rem; border-radius:10px; background:#151515; border:1px solid #242424;
  color:var(--text); text-decoration:none; font-weight:700;
}
.download-link:hover{border-color:var(--accent); color:var(--accent)}

/* Form */
.contact-form{max-width:900px; margin:0 auto}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem}
input, textarea{
  width:100%; background:#1b1b1b; color:var(--text);
  border:1px solid #333; border-radius:10px; padding:.9rem 1rem; outline:none;
}
input:focus, textarea:focus{border-color:var(--accent)}
button.btn{border:0}

/* Footer */
.site-footer{background:var(--bg-light); border-top:2px solid var(--accent); margin-top:1rem}
.footer-inner{
  max-width:1100px; margin:0 auto; padding:2rem 1.25rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
}
.site-footer nav a{color:var(--muted); text-decoration:none; margin-right:1rem}
.site-footer nav a:hover{color:var(--accent)}

/* Navigation: responsive */
@media (max-width: 992px){
  .about-grid{grid-template-columns:1fr; gap:1.25rem}
}
@media (max-width: 820px){
  .rental-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .site-header{padding:.8rem .9rem}
  .nav-toggle{display:block}
  .nav{position:absolute; top:100%; left:0; right:0; background:#161616; border-bottom:1px solid #222; transform-origin:top; transform:scaleY(0); transition:transform .2s ease}
  .nav.open{transform:scaleY(1)}
  .nav ul{flex-direction:column; padding:.6rem}
  .nav a{padding:.6rem .4rem}
  .form-row{grid-template-columns:1fr}
}

/* Subtle section alternation */
section.content:nth-of-type(even){background:var(--panel)}

/* Utilities */
.fade-in{animation:fadeIn .6s ease both}
@keyframes fadeIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
/* Cookie Banner / Modal */
.cookie-banner{
  position: fixed; inset: auto 0 0 0; z-index: 70;
  background: #121212; border-top: 2px solid var(--accent);
  box-shadow: 0 -8px 30px rgba(0,0,0,.45);
  padding: 1rem .8rem;
}
.cookie-inner{
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center;
}
.cookie-text h3{margin-bottom:.25rem; font-family:'Orbitron',sans-serif; color:var(--accent)}
.cookie-text p{color:var(--muted)}
.cookie-text a{color:var(--accent); text-decoration:underline}
.cookie-actions{display:flex; gap:.6rem; flex-wrap:wrap; justify-content:flex-end}
.btn.btn-secondary{
  background:#1c1c1c; color:var(--text); border:1px solid #2a2a2a; border-radius:12px; padding:.8rem 1rem; font-weight:700; cursor:pointer;
}
.btn.btn-outline{
  background:transparent; color:var(--text); border:1px solid var(--accent); border-radius:12px; padding:.8rem 1rem; font-weight:700; cursor:pointer;
}
.cookie-modal{
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
}
.cookie-modal__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.6);
}
.cookie-modal__dialog{
  position:relative; width:min(680px, 95vw); background:#141414; border:1px solid #222; border-top:3px solid var(--accent);
  border-radius:14px; box-shadow: var(--shadow); color:var(--text);
}
.cookie-modal__header, .cookie-modal__footer{padding:1rem 1rem; border-bottom:1px solid #232323}
.cookie-modal__footer{border-top:1px solid #232323; border-bottom:0; display:flex; justify-content:flex-end; gap:.6rem}
.cookie-modal__body{padding:1rem}
.cookie-modal__close{
  position:absolute; right:.6rem; top:.35rem; background:transparent; border:0; color:var(--text); font-size:1.6rem; cursor:pointer;
}
.cookie-group{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0; border-bottom:1px solid #1f1f1f;
}
.cookie-group:last-child{border-bottom:0}
.cookie-group__text p{color:var(--muted); font-size:.95rem}

/* Toggle Switch */
.switch{position:relative; display:inline-block; width:54px; height:30px}
.switch input{opacity:0; width:0; height:0}
.slider{
  position:absolute; cursor:pointer; inset:0; background:#2a2a2a; transition:.2s; border-radius:999px; border:1px solid #333;
}
.slider:before{
  position:absolute; content:""; height:22px; width:22px; left:4px; top:3px; background:#fff; border-radius:50%; transition:.2s;
}
.switch input:checked + .slider{background: var(--accent)}
.switch input:checked + .slider:before{transform:translateX(24px)}

/* Responsive */
@media (max-width: 780px){
  .cookie-inner{grid-template-columns: 1fr}
  .cookie-actions{justify-content:flex-start}
}


/* --- Leihkatalog (vermietung.html) --- */
.hero--compact{
  min-height: 45svh;
  padding: 5rem 1rem 4rem;
}

.catalog-layout{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.2rem;
  align-items: start;
}

.catalog-filters{
  position: sticky;
  top: 86px;
  border-left: 4px solid var(--accent);
}
.catalog-filters__inner{ padding: 1rem 1rem 1.1rem; }
.catalog-filters h3{
  font-family:'Orbitron', sans-serif;
  color: var(--accent);
  margin-bottom: .8rem;
  letter-spacing: .5px;
}
.field{display:grid; gap:.35rem; margin-bottom:.85rem}
.field span{color:var(--muted); font-weight:700; font-size:.9rem}
.field select{
  width:100%;
  background:#1b1b1b; color:var(--text);
  border:1px solid #333; border-radius:10px; padding:.75rem 1rem; outline:none;
}
.field select:focus{border-color:var(--accent)}
.filter-actions{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.4rem}
.hint{margin-top:.8rem; color:var(--muted); font-size:.9rem}

.catalog-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

.product{overflow:hidden}
.product__media{position:relative}
.product__media img{
  width:100%;
  height: 170px;
  object-fit: cover;
  display:block;
}
.product__pill{
  position:absolute;
  left:.75rem; bottom:.75rem;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  padding: .25rem .5rem;
  border-radius: 999px;
  font-size: .78rem;
  color: var(--text);
  backdrop-filter: blur(6px);
}
.product__body{padding: .9rem 1rem 1rem}
.product__body h4{
  color: var(--accent);
  margin-bottom: .25rem;
  font-size: 1.05rem;
}
.product__body p{color: var(--muted); font-size: .95rem}
.product__actions{margin-top:.85rem}

/* Cart */
.cart{ border-left: 4px solid var(--accent); height: fit-content; }
.cart__inner{padding: 1rem}
.cart__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem}
.cart__close{padding:.45rem .75rem; line-height:1}
.cart__list{display:grid; gap:.6rem; margin-bottom:.9rem}
.cart-item{
  display:grid; grid-template-columns: 1fr auto;
  gap:.6rem; padding:.65rem .7rem;
  border-radius: 12px;
  background:#151515;
  border:1px solid #242424;
}
.cart-item__title{font-weight:800}
.cart-item__sub{color:var(--muted); font-size:.85rem}
.cart-item__remove{padding:.45rem .75rem}
.cart-empty{
  padding:.85rem .9rem;
  border-radius: 12px;
  background:#151515;
  border:1px dashed #2a2a2a;
  color:var(--muted);
}
.cart__actions{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.3rem}

@media (max-width: 1100px){ .catalog-grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 920px){
  .catalog-layout{grid-template-columns: 1fr}
  .catalog-filters{position:relative; top:auto}
  .cart{
    position: fixed;
    right: 1rem; bottom: 1rem; left: 1rem;
    max-height: 75svh; overflow:auto;
    transform: translateY(120%);
    transition: transform .25s ease;
    z-index: 65;
  }
  .cart--open{transform: translateY(0)}
}
@media (max-width: 620px){ .catalog-grid{grid-template-columns: 1fr} }
/* PREMIUM LOGO CAROUSEL */

.logo-carousel {
  position: relative;
  overflow: hidden;
  padding: 2rem 0;
}

.logo-track {
  display: flex;
  gap: 4rem;
  animation: scroll 30s linear infinite;
}

.logo-track img {
  height: 60px;
  opacity: 0.7;
  filter: grayscale(100%);
  transition: 0.3s;
}

.logo-track img:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* Blur Fade */
.logo-fade {
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.logo-fade.left {
  left: 0;
  background: linear-gradient(to right, #0f0f0f, transparent);
}

.logo-fade.right {
  right: 0;
  background: linear-gradient(to left, #0f0f0f, transparent);
}

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* --- Kunden Section Premium --- */
.kunden-section {
  padding: 6rem 1.5rem;
  text-align: center;
  position: relative;
}

/* Heading */
.kunden-header h2 {
  font-size: 3rem;
  font-weight: 500;
}

.kunden-header span {
  font-size: 3rem;
  font-style: italic;
  color: var(--muted);
}

/* Logo Area */
.logo-wrapper {
  position: relative;
  margin: 4rem auto;
  max-width: 1100px;
  overflow: hidden;
}

/* Soft Fade oben + unten */
.logo-wrapper::before,
.logo-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 120px;
  z-index: 2;
  pointer-events: none;
}



/* Grid */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3rem;
  align-items: center;
  opacity: 1.0;
}

/* Logos */
.logo-grid img {
  width: 100%;
  max-height: 250px;
  object-fit: contain;

  transition: all 0.4s ease;
}

/* Hover Effekt */
.logo-grid img:hover {
  transform: scale(1.05);
}

/* Stats */
.stats {
  display: flex;
  justify-content: center;
  gap: 6rem;
  margin-top: 3rem;
}

.stats strong {
  font-size: 3rem;
  display: block;
}

.stats span {
  color: var(--muted);
}

/* CTA */
.cta {
  margin-top: 3rem;
  font-size: 1.2rem;
  cursor: pointer;
}

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

  .stats {
    flex-direction: column;
    gap: 2rem;
  }
}