/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#0f172a;background:#fff;line-height:1.55}
img,video{max-width:100%;display:block}

/* Layout */
:root{ --header-h: 72px; }
.container{width:min(1100px,92vw);margin:0 auto}
.narrow{width:min(850px,92vw)}
.section{position:relative;scroll-margin-top:calc(var(--header-h) + 8px)}
#home{scroll-margin-top:0} /* Home ohne Offset */
.section-pad{padding:30px 0}
.section-pad.alt{background:#f8fafc}
.lead{font-size:clamp(1.05rem,1.4vw,1.25rem);color:#334155}

/* Header / Nav */
.site-header{position:sticky;top:0;z-index:50;background:transparent;transition:background .2s,box-shadow .2s,backdrop-filter .2s}
.site-header.solid{background:rgba(255,255,255,.85);backdrop-filter:saturate(120%) blur(6px);box-shadow:0 4px 18px rgba(2,6,23,.06)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand-logo{height:70px;width:auto;display:block;padding: 8px}
.main-nav ul{display:flex;gap:clamp(10px,1.6vw,24px);align-items:center;margin:0;padding:0;list-style:none}
.main-nav a{text-decoration:none;color:#0f172a;opacity:.8;font-weight:600;padding:10px 6px;border-radius:8px;transition:opacity .15s, background .15s}
.main-nav a:hover{opacity:1;background:rgba(15,23,42,.06)}
.main-nav a.is-active{opacity:1;background:rgba(15,23,42,.10)}

/* Burger */
.burger{display:none;border:0;background:#0f172a;width:42px;height:42px;border-radius:10px;color:#fff;align-items:center;justify-content:center}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:3px 0;transition:transform .18s,opacity .18s}

/* Mobile nav */
@media (max-width:980px){
  .main-nav{position:fixed;inset:var(--header-h) 0 auto 0;background:rgba(255,255,255,.98);box-shadow:0 14px 30px rgba(2,6,23,.1);transform:translateY(-120%);transition:transform .2s;padding:14px 4vw;border-radius:0 0 18px 18px}
  .main-nav.open{transform:translateY(0)}
  .main-nav ul{flex-direction:column;align-items:flex-start;gap:6px}
  .main-nav a{padding:12px 10px;width:100%;border-radius:10px}
  .burger{display:inline-flex}
  body.nav-open{overflow:hidden}
  body.nav-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
  body.nav-open .burger span:nth-child(2){opacity:0}
  body.nav-open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
}

/* Hero (Video) */
.hero{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-fallback,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-video{opacity:1;transition:opacity .3s}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(2,6,23,.55), rgba(2,6,23,.45) 35%, rgba(2,6,23,.35) 60%, rgba(2,6,23,.4))}
.hero-content{position:relative;text-align:center;color:#fff;padding:24px 0 10vh}
.hero-logo{width:min(480px,60vw);margin:0 auto 16px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.25))}
.hero h1{font-weight:800;letter-spacing:.2px;margin:8px 0 10px;font-size:clamp(1.6rem,3.2vw,2.6rem);color:#fff}
.hero p{color:#e2e8f0;font-size:clamp(1rem,1.5vw,1.15rem);max-width:800px;margin:0 auto}
.cta-row{display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap}

/* Scroll cue */
.scroll-cue{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:26px;height:42px;border:2px solid rgba(255,255,255,.7);border-radius:20px;display:grid;place-items:start center;padding-top:8px;opacity:.9}
.scroll-cue span{width:4px;height:8px;background:rgba(255,255,255,.9);border-radius:2px;animation:drop 1.6s infinite}
@keyframes drop{0%{transform:translateY(0);opacity:1}80%{transform:translateY(8px);opacity:0}100%{transform:translateY(0);opacity:0}}

/* Sections & Cards */
.section h2{font-size:clamp(1.3rem,2.4vw,2rem);margin:0 0 10px}
.section .section-head p{color:#475569;margin:6px 0 2px}

.about-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:18px}
.about-card{background:#0f172a;color:#fff;border-radius:14px;padding:16px 18px;box-shadow:0 10px 22px rgba(2,6,23,.06)}
.about-card h3{margin:0 0 6px;font-size:1rem}
.about-card p{margin:0;color:#e2e8f0;font-size:.95rem}

/* (Alte bunte Karten – bleiben im CSS, werden aber im HTML nicht mehr verwendet) */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-auto-rows:140px;gap:12px}
.card{position:relative;display:grid;place-items:center;text-decoration:none;color:#fff;font-weight:800;border-radius:16px;box-shadow:0 10px 22px rgba(2,6,23,.08);overflow:hidden;isolation:isolate}
.card span{position:relative;z-index:1;padding:8px 10px;text-align:center;font-size:clamp(.95rem,1.4vw,1.15rem);text-shadow:0 2px 10px rgba(0,0,0,.35)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(0,0,0,.15),rgba(0,0,0,.35));z-index:0}
.card:hover{transform:translateY(-2px);box-shadow:0 16px 28px rgba(2,6,23,.12)}
.card-sm{grid-row:span 1}.card-md{grid-row:span 2}.card-lg{grid-row:span 3}
@media (max-width:980px){.card-lg{grid-row:span 2}}
@media (max-width:640px){.card-md,.card-lg{grid-row:span 1}}

/* Color themes (Solutions) */
.bg-1{background:linear-gradient(135deg,#0ea5e9,#0369a1)}
.bg-2{background:linear-gradient(135deg,#10b981,#047857)}
.bg-3{background:linear-gradient(135deg,#8b5cf6,#5b21b6)}
.bg-4{background:linear-gradient(135deg,#f97316,#c2410c)}
.bg-5{background:linear-gradient(135deg,#f59e0b,#b45309)}
.bg-6{background:linear-gradient(135deg,#0284c7,#0c4a6e)}
.bg-7{background:linear-gradient(135deg,#0f172a,#020617)}
.bg-8{background:linear-gradient(135deg,#ef4444,#991b1b)}

/* Color themes (Media) */
.m-bg1{background:linear-gradient(135deg,#0891b2,#164e63)}
.m-bg2{background:linear-gradient(135deg,#2563eb,#1e3a8a)}
.m-bg3{background:linear-gradient(135deg,#9333ea,#6b21a8)}
.m-bg4{background:linear-gradient(135deg,#0ea5e9,#0369a1)}
.m-bg5{background:linear-gradient(135deg,#84cc16,#3f6212)}
.m-bg6{background:linear-gradient(135deg,#dc2626,#7f1d1d)}
.m-bg7{background:linear-gradient(135deg,#334155,#0f172a)}
.m-bg8{background:linear-gradient(135deg,#f59e0b,#b45309)}

/* Color themes (Global) */
.g-bg1{background:linear-gradient(135deg,#0ea5e9,#1e293b)}
.g-bg2{background:linear-gradient(135deg,#10b981,#065f46)}
.g-bg3{background:linear-gradient(135deg,#8b5cf6,#4c1d95)}
.g-bg4{background:linear-gradient(135deg,#f97316,#7c2d12)}
.g-bg5{background:linear-gradient(135deg,#f59e0b,#7c2d12)}
.g-bg6{background:linear-gradient(135deg,#0284c7,#0f172a)}
.g-bg7{background:linear-gradient(135deg,#0f172a,#111827)}
.g-bg8{background:linear-gradient(135deg,#ef4444,#1f2937)}

/* Contact */
.contact-form{margin-top:14px;display:grid;gap:12px}
.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
label span{display:block;font-weight:600;margin-bottom:6px;color:#0f172a}
input,textarea{width:100%;padding:12px 12px;border-radius:10px;border:1px solid #cbd5e1;background:#fff;color:#0f172a;font:inherit}
input:focus,textarea:focus{outline:2px solid #0ea5e9;border-color:transparent}
@media (max-width:720px){.form-row{grid-template-columns:1fr}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:999px;font-weight:700;text-decoration:none;border:1px solid transparent}
.btn-primary{background:#0ea5e9;color:#fff}
.btn-primary:hover{background:#0284c7}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* Footer */
.site-footer{background:#0f172a;color:#cbd5e1;padding:24px 0}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.to-top{color:#cbd5e1;text-decoration:none;border:1px solid #334155;border-radius:999px;padding:6px 10px}
.to-top:hover{background:#111827}

/* Accessibility / Prefs */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card:hover{transform:none}
}

/* ==== Neutral Tiles (Grautöne, einheitlich) ==== */
.tiles{
  display:grid;
  gap:12px; /* ~10–12px Abstand */
}

/* Desktop-Spalten je Bereich */
@media (min-width:981px){
  .tiles-2{grid-template-columns:repeat(2,1fr);}
  .tiles-3{grid-template-columns:repeat(3,1fr);}
  .tiles-4{grid-template-columns:repeat(4,1fr);}
}
/* Mobile: immer untereinander */
@media (max-width:980px){
  .tiles-2,.tiles-3,.tiles-4{grid-template-columns:1fr;}
}

.tile{
  display:block;
  text-decoration:none;
  border-radius:14px;
  padding:16px 18px;
  background:#f3f4f6;              /* helles Grau */
  border:1px solid #e5e7eb;        /* feine Kontur */
  color:#0f172a;                   /* Text dunkel */
  box-shadow:0 6px 14px rgba(2,6,23,.04);
  transition:transform .12s, box-shadow .12s, background .12s, border-color .12s;
  min-height:110px;                /* einheitliche Haptik, aber flexibel */
}
.tile:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(2,6,23,.06);
  background:#eef2f7;
  border-color:#d1d5db;
}
.tile h3{
  margin:0 0 6px;
  font-size:1.05rem;
  font-weight:800;
  color:#0f172a;
}
.tile p{
  margin:0;
  font-size:.95rem;
  line-height:1.35;
  color:#475569;                   /* Sekundärtext in Grau */
}

.to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  background:#0ea5e9;
  color:#fff;
  border:none;
  padding:10px 14px;
  border-radius:50%;
  font-weight:bold;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}

.to-top.show {
  opacity: 1;
  pointer-events: auto;
}

/* ==== Logo-Strip unter den Sections ==== */
.brand-strip{
  padding: 32px 0 12px;
  background: transparent;
}
.brand-strip-title{
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
}
.brand-logos{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: center;
}
@media (max-width: 980px){
  .brand-logos{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .brand-logos{ grid-template-columns: repeat(2, 1fr); }
}
.brand-logos a{
  display: grid;
  place-items: center;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
  transition: transform .12s, box-shadow .12s, border-color .12s, background .12s, filter .12s, opacity .12s;
}
.brand-logos a:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(2,6,23,.06);
  border-color: #d1d5db;
  background: #ffffff;
}
.brand-logos img{
  max-width: 120px;
  max-height: 46px;
  width: auto;
  height: auto;
  filter: grayscale(100%);
  opacity: .85;
}
.brand-logos a:hover img{
  filter: grayscale(0%);
  opacity: 1;
}

/* ToTop sichtbar bei Scroll (falls noch nicht vorhanden) */
.to-top{
  position: fixed;
  bottom: 20px;
  right: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  background:#0ea5e9;
  color:#fff;
  border:none;
  padding:10px 14px;
  border-radius:50%;
  font-weight:bold;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.to-top.show{ opacity:1; pointer-events:auto; }

/* Icons in Kacheln *//* Icon vor dem Titel (inline, zentriert) */
.tile h3{
  margin:0 0 6px;
  font-size:1.05rem;
  font-weight:800;
  color:#0f172a;
  display:flex;                 /* Icon + Text in einer Zeile */
  align-items:center;
  justify-content:center;       /* zentriert */
  gap:8px;
  text-align:center;
}

.tile p{ text-align:center; }

/* Icon selbst */
.tile-icon{
  display:inline-block;
  width:28px;                   /* inline etwas kleiner als 48px */
  height:28px;
  margin:0;                     /* kein Auto-Margin mehr */
  opacity:.9;
  filter:grayscale(100%);
  flex:0 0 auto;
}
.tile:hover .tile-icon{ opacity:1; filter:none; }

/* Kontakt-Overlay: Formular sichtbar, aber deaktiviert */
#contact{ position: relative; }

.contact-disabled .contact-form{
  filter: grayscale(100%) opacity(.45);
  pointer-events: none;          /* blockt Maus */
  user-select: none;
}

.contact-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(15,23,42,.55); /* transparentes Grau */
  display: grid;
  place-items: center;
  padding: 16px;
}

.contact-overlay-text{
  margin: 0;
  color: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 1.45;
}

.contact-overlay a{
  color: #fff;
  text-decoration: underline;
}
/* Mobile-Nav: vollständig verstecken, wenn geschlossen */
@media (max-width:980px){
  .main-nav{
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: rgba(255,255,255,.98);
    box-shadow: 0 14px 30px rgba(2,6,23,.1);
    z-index: 60;

    /* statt nur weit nach oben schieben: auch unsichtbar + unanklickbar */
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* sanfter Übergang + Visibility-Delay fürs Ausblenden */
    transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
    border-radius: 0 0 18px 18px;
  }
  .main-nav.open{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .2s ease, opacity .2s ease;
  }
}
.about-cards--stack{ grid-template-columns:1fr !important; gap:12px; }

/* Module: Stack-Layout für einspaltige Kartenblöcke */
.about-cards--stack{ grid-template-columns:1fr !important; gap:12px }

/* Module: KPIs (kleine helle Kacheln) */
.kpi-tiles{ display:grid; gap:12px }
@media (min-width:981px){ .kpi-tiles{ grid-template-columns:repeat(3,1fr) } }
.kpi{
  background:#f3f4f6;border:1px solid #e5e7eb;border-radius:14px;
  padding:16px 18px;text-align:center
}
.kpi h3{ margin:0 0 4px;font-size:1.1rem }
.kpi p{ margin:0;color:#475569 }

/* Module: Prozess-Schritte */
.steps{ display:grid; gap:12px }
@media (min-width:981px){ .steps{ grid-template-columns:repeat(4,1fr) } }
.step{ background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px 18px }
.step h4{ margin:0 0 6px;font-size:1rem }
.step p{ margin:0;color:#475569 }

/* Module: FAQ (Accordion light) */
.faq-item{ border:1px solid #e5e7eb;border-radius:12px;background:#fff }
.faq-q{ width:100%; text-align:left; background:transparent; border:0; padding:14px 16px; font-weight:700 }
.faq-a{ padding:0 16px 14px; color:#475569; display:none }
.faq-item.open .faq-a{ display:block }

/* Module: Inventar-Liste */
.slot-list{ display:grid; gap:8px }
.slot-card{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px
}
.badge{
  display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; border:1px solid #e5e7eb; background:#f8fafc
}
.badge.ok{ background:#eafff3; border-color:#bbf7d0 }
.badge.hold{ background:#fff7e6; border-color:#fde68a }
.badge.out{ background:#ffecec; border-color:#fecaca }
/* Module: Stack-Layout für einspaltige Kartenblöcke */
.about-cards--stack{ … }