/* ===== Theme ===== */
:root{
  --bg:#0b0d10;
  --bg-2:#0e1116;
  --card:rgba(14,17,22,.55);
  --card-stroke:rgba(255,255,255,.10);
  --text:#e8eaee;
  --muted:#a6adbb;
  --primary:#7aa2ff;   /* änderbar */
  --primary-2:#4a7fff; /* änderbar */
  --accent:#b8ffdc;
  --shadow: 0 20px 50px rgba(0,0,0,.45);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color:var(--text);
  background: var(--bg);
  display:flex;
  flex-direction:column;          /* Sticky Footer */
  min-height:100dvh;
}

/* Background Video */
.bg{ position:fixed; inset:0; z-index:-2; overflow:hidden; background: radial-gradient(1200px 800px at 10% 10%, #10131a 0%, var(--bg) 60%) }
.bg-video{ width:100%; height:100%; object-fit:cover; filter: saturate(110%) contrast(110%); opacity:.25 }
.bg-overlay{ position:absolute; inset:0; background:
  radial-gradient(80% 60% at 50% 0%, rgba(0,0,0,.35), rgba(0,0,0,.7) 70%),
  linear-gradient(180deg, rgba(10,12,16,.85), rgba(10,12,16,.9)); }

/* Containers & Layout */
.container{ width:min(1160px, 92vw); margin:0 auto; }
.container.narrow{ width:min(820px, 92vw); }
.section-padding{ padding: clamp(56px, 8vw, 108px) 0; }
.grid-2{ display:grid; grid-template-columns: 1fr; gap:24px; }
.grid-3{ display:grid; grid-template-columns: 1fr; gap:24px; }
@media(min-width:900px){
  .grid-2{ grid-template-columns: 1.1fr .9fr; gap:40px; }
  .grid-3{ grid-template-columns: repeat(3, 1fr); gap:24px; }
}
main.page{ flex:1; } /* Sticky Footer: Main nimmt Resthöhe */

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: blur(14px) saturate(140%);
  background: linear-gradient(180deg, rgba(8,10,14,.65), rgba(8,10,14,.35));
  border-bottom:1px solid var(--card-stroke);
}
.nav{ display:flex; align-items:center; gap:20px; padding:14px 0; }
.logo{ font-weight:800; letter-spacing:.5px; text-decoration:none; color:var(--text); font-size:1.25rem; }
.logo span{ color:var(--primary); }
.menu{ display:flex; gap:18px; align-items:center; margin-left:auto; }
.menu a{ color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:12px; transition:.25s ease; }
.menu a:hover, .menu a.active{ color:var(--text); background:rgba(255,255,255,.06); }
.burger{ display:inline-flex; flex-direction:column; gap:4px; margin-left:auto; background:transparent; border:0; cursor:pointer; padding:8px; }
.burger span{ width:24px; height:2px; background:var(--text); display:block; border-radius:4px; transition:.25s; }
@media(min-width:900px){ .burger{ display:none; } }

/* Mobile menu */
.menu{ position: fixed; inset: 64px 16px auto 16px; background: rgba(20,24,30,.92); border:1px solid var(--card-stroke); border-radius:16px; padding:12px; display:none; flex-direction:column; }
.menu.open{ display:flex; }
@media(min-width:900px){ .menu{ all:unset; display:flex; margin-left:auto; } }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; padding:12px 16px; border-radius:14px; border:1px solid transparent; transition:.25s; cursor:pointer; }
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary{ background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:#0b0d10; font-weight:700; }
.btn-ghost{ background: rgba(255,255,255,.04); border-color: var(--card-stroke); color: var(--text); }
.btn-lg{ padding:14px 20px; font-size:1.05rem; }

/* Typography */
h1,h2,h3{ line-height:1.15; margin:0 0 12px; }
.lead{ color:var(--muted); font-size:1.1rem; }
.section-title{ font-size: clamp(1.4rem, 2.6vw, 1.8rem); }

/* Gradient Outline Text */
.gradient-outline{
  position:relative; display:inline-block;
  background: linear-gradient(90deg, #c1d7ff, #7aa2ff, #b8ffdc);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(122,162,255,.25);
  font-weight: 800;
}

/* Cards / Surfaces */
.card, .service-card, .cta-box, .quote, .rounded{
  backdrop-filter: blur(6px);
  background: var(--card);
  border:1px solid var(--card-stroke);
  border-radius: var(--radius);
  padding: clamp(18px, 3vw, 26px);
  box-shadow: var(--shadow);
}
.rounded{ overflow:hidden; }

/* Hero */
.hero .hero-copy h1{ font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height:1.08; margin:0 0 12px; }
.hero .hero-copy p{ color:var(--muted); }
.hero-cta{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.trust-badges{ list-style:none; padding:0; display:flex; gap:16px; flex-wrap:wrap; color:var(--muted); margin:18px 0 0; }
.media-card{ border-radius: clamp(14px, 2vw, var(--radius)); overflow:hidden; border:1px solid var(--card-stroke); background:rgba(0,0,0,.25); }
.media-card img{ display:block; width:100%; height:auto; }

/* Carousel – smooth & elegant via scroll-snap */
.carousel-wrap{ position:relative; display:flex; align-items:center; gap:12px; }
.carousel{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding: 6px; border-radius: var(--radius);
  -ms-overflow-style: none; scrollbar-width: none; /* hide */
  mask-image: linear-gradient(to right, transparent 0, black 4%, black 96%, transparent 100%);
}
.carousel::-webkit-scrollbar{ display:none; }
.slide{ min-width: 76%; flex: 0 0 76%; scroll-snap-align:center; }
.slide img{ width:100%; height:auto; display:block; border-radius:12px; }
.slide figcaption{ color:var(--muted); margin-top:8px; font-size:.95rem; }
.ctrl.soft{
  background:rgba(255,255,255,.06); border:1px solid var(--card-stroke);
  border-radius:12px; padding:10px 14px; color:var(--text); cursor:pointer;
  transition:.2s ease; backdrop-filter: blur(6px);
}
.ctrl.soft:hover{ transform: translateY(-1px); }
.dots{ display:flex; gap:8px; justify-content:center; margin-top:12px; }
.dots button{
  width:8px; height:8px; border-radius:50%; border:0; background:rgba(255,255,255,.3); cursor:pointer; transition:.2s;
}
.dots button[aria-current="true"]{ background:linear-gradient(135deg, var(--primary), var(--primary-2)); transform:scale(1.1); }

/* Map */
.map-embed{ border-radius: var(--radius); overflow:hidden; border:1px solid var(--card-stroke); }
.map-embed iframe{ width:100%; height:380px; border:0; display:block; }

/* Forms */
.contact-form .field{ margin-bottom:14px; }
label{ display:block; margin-bottom:6px; color:var(--muted); }
input, select, textarea{
  width:100%; padding:12px 12px; border-radius:12px; border:1px solid var(--card-stroke);
  background: rgba(255,255,255,.04); color:var(--text); outline:none;
}
input:focus, select:focus, textarea:focus{ border-color: var(--primary); box-shadow:0 0 0 3px rgba(122,162,255,.25); }
.form-note{ color:var(--muted); font-size:.95rem; }
.hidden{ display:none !important; }

/* Submit button spinner */
.btn .btn-spinner{
  width: 1em; height:1em; border:2px solid rgba(255,255,255,.6); border-top-color: transparent; border-radius:50%;
  display:inline-block; margin-left:6px; opacity:0; transform:scale(.6); transition:.2s;
}
.btn.loading .btn-spinner{ opacity:1; animation:spin 1s linear infinite; transform:scale(1); }
@keyframes spin{ to{ transform: rotate(360deg);} }

/* Footer – sticky am Seitenende, ohne Überlappung */
.site-footer{
  background: linear-gradient(180deg, rgba(10,12,16,.85), rgba(10,12,16,.95));
  border-top:1px solid var(--card-stroke);
  backdrop-filter: blur(8px);
  padding:22px 0;
}
.footer-grid{ display:grid; grid-template-columns: 1fr; gap:16px; align-items:start; }
@media(min-width:900px){
  .footer-grid{ grid-template-columns: 1.3fr .7fr .7fr; gap:24px; }
}
.footer-nav a{ color:var(--muted); text-decoration:none; margin-right:16px; }
.footer-nav a:hover{ color:var(--text); }
.logo.-footer{ display:inline-block; margin-bottom:8px; }

/* Reveal Animations */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:none; }
.delay-1{ transition-delay:.12s; }
.delay-2{ transition-delay:.24s; }

/* Parallax micro-hover */
.parallax{ transition: transform .4s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.parallax:hover{ transform: translateY(-4px) scale(1.01); }

/* Small helpers */
.link{ color:var(--primary); text-decoration:none; border-bottom: 1px solid transparent; }
.link:hover{ border-color: currentColor; }
.centered{ display:grid; place-items:center; min-height:100dvh; }



/* Background Video (heller steuerbar über Variablen) */
:root{
  /* … deine bisherigen Variablen … */
  --bg-video-opacity: .55;          /* vorher .25 → höher = heller sichtbar */
  --bg-video-brightness: 1.05;      /* 1 = unverändert */
  --bg-video-contrast: 1.05;        /* 1 = unverändert */
  --overlay-top: .18;               /* 0–1 → Helligkeit oben (Radial) */
  --overlay-bottom: .45;            /* 0–1 → Helligkeit unten (Radial) */
  --overlay-linear-top: .45;        /* 0–1 → Linearverlauf oben */
  --overlay-linear-bottom: .55;     /* 0–1 → Linearverlauf unten */
}

.bg{
  position:fixed; inset:0; z-index:-2; overflow:hidden;
  background: radial-gradient(1200px 800px at 10% 10%, #10131a 0%, var(--bg) 60%);
}
.bg-video{
  width:100%; height:100%; object-fit:cover;
  filter: brightness(var(--bg-video-brightness)) contrast(var(--bg-video-contrast)) saturate(110%);
  opacity: var(--bg-video-opacity);
}
.bg-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at 50% 0%,
      rgba(0,0,0,var(--overlay-top)),
      rgba(0,0,0,var(--overlay-bottom)) 70%),
    linear-gradient(180deg,
      rgba(10,12,16,var(--overlay-linear-top)),
      rgba(10,12,16,var(--overlay-linear-bottom)));
}


/* --- iOS/Safari Autoplay-Fallback-Button (wird nur bei Blockade angezeigt) --- */
.bg-play{
  position:fixed;
  inset:auto 16px 16px auto;
  z-index:10;
  border:0;
  cursor:pointer;
  width:56px;
  height:56px;
  border-radius:50%;
  font-size:22px;
  font-weight:700;
  line-height:56px;
  text-align:center;
  color:#0b0d10;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.bg-play:active{ transform: scale(.98); }

/* Optional: Video etwas heller wirken lassen (anpassbar) */
:root{
  --bg-video-opacity: .65;
  --bg-video-brightness: 1.1;
  --bg-video-contrast: 1.03;
  --overlay-top: .12;
  --overlay-bottom: .28;
  --overlay-linear-top: .30;
  --overlay-linear-bottom: .40;
}


/* Carousel – robust */
.carousel-wrap{ position:relative; display:flex; align-items:center; gap:12px; }
.carousel{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-snap-stop: always;
  scroll-behavior:smooth;
  padding: 6px;
  border-radius: var(--radius);
  -ms-overflow-style: none; scrollbar-width: none;
  mask-image: linear-gradient(to right, transparent 0, black 4%, black 96%, transparent 100%);
}
.carousel::-webkit-scrollbar{ display:none; }

/* WICHTIG: Slide-Breite so wählen, dass wirklich horizontal gescrollt wird */
.slide{
  flex: 0 0 86%;          /* war 76% – etwas breiter = hochwertiger Look, klare Swipe-Strecke */
  min-width: 320px;       /* verhindert, dass sehr kleine Geräte alles quetschen */
  scroll-snap-align: center;
}
@media (min-width: 900px){
  .slide{ flex-basis: 66%; } /* auf Desktop etwas kompakter */
}

/* Bilder sauber, und falls ein Bild fehlt -> neutrale Fläche statt „nichts“ */
.slide img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

/* Punkte unverändert */
.dots{ display:flex; gap:8px; justify-content:center; margin-top:12px; }
.dots button{
  width:8px; height:8px; border-radius:50%; border:0; background:rgba(255,255,255,.3); cursor:pointer; transition:.2s;
}
.dots button[aria-current="true"]{ background:linear-gradient(135deg, var(--primary), var(--primary-2)); transform:scale(1.1); }


/* --- Über uns Seite --- */
.team-section {
  text-align: center;
  background: var(--card);
  border-radius: var(--radius);
  padding: clamp(20px, 4vw, 40px);
  box-shadow: var(--shadow);
}

.team-section img {
  width: min(800px, 90%);
  height: auto;
  border-radius: var(--radius);
  margin-bottom: 20px;
  display: block;
  margin-inline: auto;
}

.team-section blockquote {
  margin: 0 auto;
  max-width: 600px;
  font-style: italic;
  color: var(--muted);
  font-size: 1.1rem;
}

.team-section footer {
  margin-top: 10px;
  color: var(--text);
  font-weight: 600;
}

blockquote::before {
  font-size: 3rem;
  color: var(--primary);
  vertical-align: middle;
  line-height: 0;
  margin-right: 4px;
}

blockquote::after {
  font-size: 3rem;
  color: var(--primary);
  vertical-align: middle;
  line-height: 0;
  margin-left: 4px;
}



/* Über-uns: bessere Proportionen & Layout */
.about-hero .about-hero-media img{ display:block; width:100%; height:auto; }
.about-highlights{ list-style:none; padding:0; margin:14px 0 0; color:var(--muted); display:grid; gap:8px; }
.about-highlights li::before{ content:"• "; color:var(--primary); }

/* Story Grid */
.story-grid{
  display:grid; grid-template-columns: 1fr; gap:24px;
}
@media(min-width: 980px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; gap:32px; align-items:stretch; }
}
.story-media{ padding:0; overflow:hidden; }
.story-media img{ display:block; width:100%; height:auto; }
.story-media figcaption{
  padding:12px 16px; color:var(--muted); font-size:.95rem; border-top:1px solid var(--card-stroke);
}
.story-card h2{ margin-bottom:8px; }
.story-card p{ color:var(--muted); }

/* Timeline (dezent, edel) */
.timeline{ margin-top:14px; border-left:1px solid var(--card-stroke); padding-left:16px; display:grid; gap:10px; }
.t-item{ position:relative; }
.t-item::before{
  content:""; position:absolute; left:-9px; top:.35rem; width:10px; height:10px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow:0 0 0 3px rgba(122,162,255,.18);
}
.t-year{ font-weight:800; color:var(--text); margin-right:8px; }

/* Stats / Trust */
.stats .stat{ text-align:center; }
.stat-num{
  font-size: clamp(2rem, 5.5vw, 3rem);
  font-weight: 800;
  background: linear-gradient(90deg, #c1d7ff, #7aa2ff, #b8ffdc);
  -webkit-background-clip: text; color: transparent;
  text-shadow: 0 0 24px rgba(122,162,255,.25);
  display:block;
}
.stat-label{ color:var(--muted); display:block; margin-top:6px; }

/* Team/Quote */
.team-section{ text-align:center; }
.team-section img{ width:min(840px, 92%); margin:0 auto 16px; display:block; }
.team-section blockquote{ max-width:680px; margin:0 auto; color:var(--muted); font-size:1.15rem; font-style:italic; }
.team-section footer{ margin-top:8px; color:var(--text); font-weight:600; }

/* Alt-Background für Sections */
.alt-bg{
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(6px);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}


/* ===== Leistungen: ausgewogene Bild/Text-Layouts ===== */

/* Grid-Gerüst je Abschnitt */
.service-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 28px 0 10px;
}
@media (min-width: 980px){
  .service-grid{
    grid-template-columns: 0.95fr 1.05fr; /* etwas mehr Platz fürs Bild */
    gap: 28px;
    align-items: stretch;
  }
}
/* Reihenfolge auf Desktop tauschen für alternierende Abschnitte */
@media (min-width: 980px){
  .service-grid.reverse > *:first-child{ order:2; }
  .service-grid.reverse > *:last-child{ order:1; }
}

/* Text-Card */
.service-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.service-copy h2{ margin-bottom: 6px; }
.service-copy p{ color: var(--muted); margin: 0 0 10px; }
.service-copy .bullets{ margin: 0; padding-left: 18px; color: var(--muted); }
.service-copy .btn{ margin-top: 10px; }

/* Medien-Card mit fixem Seitenverhältnis & Cover-Zuschnitt */
.service-media{
  padding: 0;               /* Bild berührt die Card-Kante */
  overflow: hidden;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--card-stroke);
  position: relative;
}
/* Einheitliches Seitenverhältnis – wirkt ruhig & hochwertig */
.service-media{
  aspect-ratio: 16 / 10;    /* Desktop-Format */
}
@media (max-width: 979.98px){
  .service-media{ aspect-ratio: 4 / 3; }  /* etwas höher auf Mobile */
}
/* Bild sauber zuschneiden */
.service-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* zentriert, füllt die Fläche ohne Verzerren */
  display: block;
  transform: scale(1.001);  /* Anti-Subpixel-Saum */
}

/* Optional: feiner Hover für „Glas“-Look */
.service-media:hover img{
  transform: scale(1.02);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}


/* ===== Kontakt: Bild & Karte unter dem Formular nebeneinander ===== */

/* Grid mit 2 Spalten ab Desktop; mobil untereinander */
.media-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
}
@media (min-width: 980px){
  .media-grid{
    grid-template-columns: 1fr 1fr;
    gap:24px;
  }
}

/* Cards ohne Innenabstand für volle Fläche */
.media-cell{
  padding:0;
  overflow:hidden;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--card-stroke);
}

/* Einheitliche Höhe für Bild & Karte */
.media-cell{
  aspect-ratio: 16/9;           /* Desktop-Höhe; mobil passt sich an */
}
@media (max-width: 979.98px){
  .media-cell{ aspect-ratio: 4/3; }
}

/* Bild sauber zuschneiden */
.media-cell img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Karte füllt die Card */
.media-cell iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* dezent: Bildunterschrift nur beim Bild-Card */
.media-cell figcaption{
  padding:10px 14px;
  color:var(--muted);
  font-size:.95rem;
  border-top:1px solid var(--card-stroke);
}




/* ===== Saubere Kontaktseite (gleichmäßige Höhe & Abstände) ===== */

.contact-layout.clean {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: stretch;
}

@media (min-width: 980px) {
  .contact-layout.clean {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}

.contact-card,
.contact-form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

/* Gleiche Innenabstände und Ausrichtung */
.contact-card h1 {
  margin-bottom: 12px;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
}

.contact-card .lead {
  margin-bottom: 22px;
}

.contact-lines {
  flex: 1;
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
}

.contact-lines strong {
  color: var(--text);
  display: block;
  margin-bottom: 4px;
}

.contact-lines p {
  margin: 0;
  color: var(--muted);
}

.contact-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 700px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .form-grid .-full {
    grid-column: 1 / -1;
  }
}

/* Gleichmäßige Höhe für Bild & Karte */
.media-grid.equal-height {
  align-items: stretch;
}

.media-grid.equal-height .media-cell {
  height: 100%;
  aspect-ratio: 16/9;
}

.media-grid.equal-height iframe,
.media-grid.equal-height img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}



/* ===== Kontakt: Foto & Karte sauber, gleich hoch, edel ===== */

/* eigenes Grid nur für diese Sektion, damit nichts anderes beeinflusst wird */
.media-grid.-balanced{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 980px){
  .media-grid.-balanced{
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
  }
}

/* einheitliche Kartenoberfläche */
.media-card{
  position: relative;
  padding: 0;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--card-stroke);
  border-radius: var(--radius);
  overflow: hidden;                /* schneidet Map & Bild sauber rund */
  box-shadow: var(--shadow);
  aspect-ratio: 16/9;
}
@media (max-width: 979.98px){
  .media-card{ aspect-ratio: 4/3; }
}

/* Bild sauber füllen */
.media-card.photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.001);
}

/* Map: garantiert exakt passend und rund */
.media-card.map .map-frame{
  position: relative;
  width: 100%;
  height: 100%;
}
.media-card.map iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* dezente Veredelung, damit besser zum Theme passt */
  filter: brightness(0.97) contrast(1.02) saturate(0.95);
}

/* dezente Badge-Beschriftung unten links (statt figcaption unterhalb) */
.media-card .badge{
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(10,12,16,.55);
  border: 1px solid var(--card-stroke);
  backdrop-filter: blur(6px);
  pointer-events: none;
}