:root{
  --bg:#0b0c10; --bg-soft:#111218; --panel:#141622; --text:#e9ecf1; --muted:#a9b0bd;
  --brand:#6b2fb8; --brand-2:#3fd7c6; --ok:#22c55e; --warn:#f59e0b;
  --shadow:0 10px 30px rgba(0,0,0,.25); --radius:18px;
}

/* Fix: verhindert Überlappungen durch Padding/Borders */
*, *::before, *::after { box-sizing: border-box; }

html{scroll-behavior:smooth}
body{
  margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  background:linear-gradient(180deg,var(--bg),#0e1016 35%,var(--bg-soft));
  color:var(--text)
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin-inline:auto;padding:0 20px}

header{
  position:sticky;top:0;z-index:50;background:rgba(14,16,22,.7);
  backdrop-filter:blur(10px);border-bottom:1px solid #1f2330
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;gap:10px;align-items:center;font-weight:700}
.logo-img{height:51px;width:auto;display:block}
nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;align-items:center}

.btn{
  display:inline-flex;gap:.6rem;align-items:center;padding:10px 14px;border-radius:12px;
  border:1px solid #283044;background:#151a24;color:var(--text);text-decoration:none
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border:0;color:#101114;font-weight:700}
.btn-outline{background:transparent;border:1px solid #2a3142}
.btn-wide{min-width:220px;justify-content:center;text-align:center}

.hero{padding:70px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px}
.card{background:linear-gradient(180deg,#0f1220,#0b0d16);border:1px solid #1c2133;border-radius:var(--radius);box-shadow:var(--shadow)}
.panel{padding:24px}
h1{font-size:clamp(30px,4vw,46px);line-height:1.1;margin:.2em 0 .4em}
h2{font-size:clamp(24px,3vw,34px);margin:0 0 .6em}
h3{font-size:clamp(18px,2.2vw,22px);margin:0 0 .4em}
p.lead{color:var(--muted);font-size:1.1rem}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.kpi{padding:14px 16px;border-radius:14px;background:#0f1320;border:1px solid #1c2236;text-align:center}

.grid{display:grid;gap:18px}
.pillars{grid-template-columns:repeat(4,1fr)}
.pillar{padding:20px}
.pillar h3{white-space:nowrap}
.pill-icon{
  width:28px;height:28px;object-fit:contain;vertical-align:-6px;margin-right:10px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))
}

.list{margin:8px 0 0 0;padding-left:18px;color:var(--muted)}
section{padding:48px 0}
.process{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.step{padding:16px;border-radius:14px;background:#0f1320;border:1px solid #1c2236}

/* Galerie */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.gal-wrap{min-width:0}
.gal-wrap h4{margin:0 0 6px;font-size:1rem;color:#c7ceda}
.gal-item{
  position:relative;border:1px solid #1c2236;border-radius:16px;overflow:hidden;
  background:#0f1320;aspect-ratio:1/1;display:grid;place-items:center;color:#667085
}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;
  justify-content:center;z-index:1000;padding:20px
}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:90vh;border-radius:12px;box-shadow:var(--shadow)}
.lightbox .caption{margin-top:10px;color:var(--text);text-align:center}
.lightbox .close{
  position:absolute;top:20px;right:20px;font-size:28px;background:#0f1220;border:1px solid #333;
  color:#fff;border-radius:12px;padding:6px 10px;cursor:pointer
}

/* Kontaktbereich */
.contact{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr)); /* Fix: robustes Schrumpfen */
  gap:18px
}

/* Formular-Layout */
input,textarea,select{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid #2a3142;background:#0f1320;color:var(--text);
  box-sizing:border-box; /* Sicherheitsnetz, falls globales box-sizing entfernt wird */
}
label{display:block;margin:.4rem 0 .2rem;color:#c7ceda}
form .row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr)); /* Fix: keine Überlappung */
  gap:12px
}
form .row > div{min-width:0} /* Fix: Kinder dürfen schrumpfen */
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;color:var(--muted)}

/* Select Pfeil/Fokus */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23aab4c5' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px
}
select:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(63,215,198,.25)}
select option{color:#0b0c10}
select::-ms-expand{display:none}

footer{padding:40px 0 60px;border-top:1px solid #1c2332;background:#0c0f18;color:#b7c0ce}
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
.copyright{margin-top:18px;color:#7e8796}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.icon-wa{width:18px;height:18px;vertical-align:-3px;margin:0 6px}

/* Responsive */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .pillars,.process,.gallery,.contact,.footer-cols{grid-template-columns:1fr}
  form .row{grid-template-columns:1fr}
  .btn-wide{min-width:auto;width:100%}
}

/* Bewegungsreduktion */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .btn:hover{transform:none}
}

/* Checkbox größer + Einwilligungsblock zentrieren */
.consent{
  display:flex;
  align-items:center;
  justify-content:center;   /* horizontal zentriert */
  text-align:center;        /* Text zentriert */
  gap:.8rem;
  flex-wrap:wrap;           /* sauberes Umbrechen bei schmalen Breiten */
}

.consent input[type="checkbox"]{
  transform: scale(1.35);   /* leicht vergrößern */
  transform-origin: center;
  accent-color: var(--brand-2);   /* Markenfarbe für Häkchen */
}

/* Button „Nachricht senden“ zentrieren */
#contactForm button[type="submit"]{
  display:block;
  margin:12px auto 0;       /* zentriert durch auto-Margins */
}

/* Bessere Lesbarkeit im dunklen Theme */
select{
  color: var(--text);
  background: #0f1320;
  color-scheme: dark; /* hilft v. a. auf iOS/Safari */
}

/* Einträge im Dropdown */
select option,
select optgroup{
  color: var(--text);          /* weiß/hell */
  background: #0f1320;         /* dunkel */
}

/* Platzhalter/disabled-Option dezenter */
select option[disabled]{
  color: var(--muted);
}

/* Hervorhebung bei Auswahl/Hover (wo unterstützt) */
@supports selector(option:checked){
  select option:checked,
  select option:hover{
    background:#1b2437;
    color: var(--text);
  }
}
/* Datenschutzerklärung – Seitenspezifische Styles */
.page{ padding-top:56px; } /* Abstand unter dem sticky Header */

.page .toc{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  margin:18px 0;
}
.page .toc a{
  display:block;
  padding:10px 12px;
  border:1px solid #2a3142;
  border-radius:12px;
  background:#0f1320;
}
@media (max-width:980px){
  .page .toc{ grid-template-columns:1fr; }
}

/* Honeypot-Feld unsichtbar, aber im DOM (wirksamer gegen Bots als display:none) */
.hp{
  position:absolute !important;
  left:-5000px !important;
  height:0 !important;
  width:0 !important;
  overflow:hidden !important;
}