/* ===================================================================
   Bergischer Automatiktüren – Haupt-CSS
   Farbschema: Anthrazit + Eisblau + Gebrochenes Weiß + Bordeaux
   =================================================================== */

/* ─── 1. CSS-Variablen ─────────────────────────────────────────── */
:root {
  --anthracite:      #2C3E50;
  --anthracite-dark: #1A252F;
  --ice-blue:        #A8C8DC;
  --ice-blue-light:  #D6EAF3;
  --bordeaux:        #6B2737;
  --bordeaux-light:  #8B3748;
  --cream:           #F8F5F0;
  --cream-dark:      #EDE8E1;
  --accent-red:      #DC2626;

  --bg:              #FFFFFF;
  --bg-alt:          #F8F5F0;
  --bg-dark:         #2C3E50;

  --text:            #1C1C1E;
  --text-muted:      #6B7280;
  --text-on-dark:    #F8F5F0;

  --border:          #D8D0C8;
  --border-light:    #EDE8E1;

  --shadow:          0 4px 16px rgba(44,62,80,.10);
  --shadow-lg:       0 16px 48px rgba(44,62,80,.18);

  --radius:          10px;
  --radius-lg:       18px;

  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --transition: .3s cubic-bezier(.4,0,.2,1);
}

/* ─── 2. Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { font-size: 16px; scroll-behavior: smooth }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block }
a { color: inherit; text-decoration: none }
ul { list-style: none }
button { cursor: pointer; font: inherit; border: none; background: none }
address { font-style: normal }

/* ─── 3. Skip-Link ─────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%; left: 50%;
  transform: translateX(-50%);
  background: var(--anthracite);
  color: #fff;
  padding: .75rem 1.5rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600; z-index: 9999;
  transition: top .2s;
  white-space: nowrap;
}
.skip-link:focus { top: 0 }

/* ─── 4. Container ─────────────────────────────────────────────── */
.container {
  width: 100%; max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1rem,4vw,2rem);
}
.container--sm { max-width: 900px }
.container--md { max-width: 1024px }

/* ─── 5. Header / Navigation ───────────────────────────────────── */
#site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transition: box-shadow var(--transition);
}
#site-header.scrolled { box-shadow: 0 4px 24px rgba(44,62,80,.22) }

/* Topbar */
.header-topbar {
  background: var(--anthracite);
  color: var(--text-on-dark);
  font-size: .8rem;
  padding: .45rem 0;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.topbar-inner span { opacity: .85 }
.topbar-inner a {
  color: var(--ice-blue-light);
  transition: color var(--transition);
}
.topbar-inner a:hover { color: #fff }
.topbar-right {
  display: flex; align-items: center; gap: 1.25rem;
}
.topbar-phone {
  font-weight: 700;
  color: #fff !important;
  background: var(--bordeaux);
  padding: .2rem .65rem;
  border-radius: 4px;
  transition: background var(--transition) !important;
}
.topbar-phone:hover { background: var(--bordeaux-light) !important }

/* Main Header */
.header-main {
  background: #fff;
  border-bottom: 2px solid var(--cream-dark);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 1rem;
}

/* Logo */
.logo {
  display: flex; align-items: center; gap: .75rem;
  font-weight: 700; font-size: 1.05rem; flex-shrink: 0;
}
.logo-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--anthracite), var(--anthracite-dark));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-text { line-height: 1.2 }
.logo-title { color: var(--anthracite); font-size: .9rem }
.logo-sub { color: var(--text-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em }

/* Main nav */
#main-nav > ul {
  display: flex;
  align-items: center;
  gap: .25rem;
  justify-content: flex-start;
}
#main-nav a {
  color: var(--text);
  font-weight: 500;
  font-size: .9rem;
  padding: .5rem .75rem;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
}
#main-nav a:hover,
#main-nav a.active { background: var(--cream); color: var(--anthracite) }

/* Dropdown */
.has-dropdown { position: relative }
.nav-toggle-sub {
  color: var(--text);
  font-weight: 500;
  font-size: .9rem;
  padding: .5rem .75rem;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
  display: flex; align-items: center; gap: .3rem;
  text-align: left;
  cursor: pointer;
}
.nav-toggle-sub:hover,
.has-dropdown.open > .nav-toggle-sub { background: var(--cream); color: var(--anthracite); }
.dropdown {
  display: none;
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: .5rem;
  z-index: 500;
}
.has-dropdown.open .dropdown { display: flex; }
.dropdown li a {
  display: block;
  padding: .6rem .85rem;
  font-size: .875rem;
  border-radius: 8px;
  color: var(--text);
  transition: background var(--transition);
  text-align: left;
}
.dropdown li a:hover { background: var(--cream); color: var(--anthracite); }

/* Header CTA */
.header-cta {
  display: flex; align-items: center; gap: .75rem;
  flex-shrink: 0;
}

/* Mobile hamburger button */
#nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--anthracite);
  transition: background var(--transition);
}
#nav-toggle:hover { background: var(--cream) }

/* Body spacer for fixed header */
body { padding-top: 68px; }

/* Nav-Close nur auf Mobile */
.nav-close { display: none; }

/* ─── Mobile Navigation ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .header-topbar { display: none }
  body { padding-top: 68px }

  #nav-toggle { display: flex }
  .header-cta .btn { display: none }

  #main-nav {
    position: fixed;
    inset: 0;
    background: var(--anthracite-dark);
    transform: translateX(-100%);
    transition: transform .3s ease;
    overflow-y: auto;
    padding: 5rem 1.5rem 2rem;
    z-index: 200;
  }
  #main-nav.open { transform: translateX(0) }
  #main-nav > ul { flex-direction: column; gap: 0; align-items: stretch; }
  #main-nav > ul > li { border-bottom: 1px solid rgba(248,245,240,.08) }
  #main-nav a {
    color: var(--cream);
    padding: .875rem .5rem;
    display: block;
    border-radius: 0;
    font-size: 1rem;
  }
  #main-nav a:hover,
  #main-nav a.active { background: rgba(168,200,220,.12); color: var(--ice-blue-light) }
  .nav-toggle-sub {
    color: var(--cream);
    padding: .875rem .5rem;
    display: flex; width: 100%;
    border-radius: 0;
    font-size: 1rem;
    border-bottom: 1px solid rgba(248,245,240,.08);
  }
  .dropdown {
    display: none;
    position: static;
    background: rgba(255,255,255,.04);
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 0 1rem;
    align-items: stretch;
  }
  .dropdown li a {
    color: var(--ice-blue-light);
    border-radius: 0;
    font-size: .9rem;
    padding: .65rem .5rem;
    text-align: left;
  }
  .dropdown li a:hover { background: rgba(168,200,220,.1); color: #fff }

  /* Overlay */
  #nav-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 199;
  }
  #nav-overlay.open { display: block }

  /* Close button in mobile nav */
  .nav-close {
    position: absolute;
    top: 1rem; right: 1rem;
    color: var(--cream);
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    z-index: 201;
    border: none;
    cursor: pointer;
  }
}

/* ─── 6. Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.35rem;
  border-radius: var(--radius);
  font-weight: 600; font-size: .9rem;
  transition: all var(--transition);
  cursor: pointer;
  white-space: nowrap;
  border: 2px solid transparent;
}
.btn-lg { padding: .85rem 1.75rem; font-size: 1rem }
.btn-sm { padding: .45rem .9rem; font-size: .82rem }

.btn-primary {
  background: var(--anthracite);
  color: #fff;
  border-color: var(--anthracite);
}
.btn-primary:hover {
  background: var(--anthracite-dark);
  border-color: var(--anthracite-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn-bordeaux {
  background: var(--bordeaux);
  color: #fff;
  border-color: var(--bordeaux);
}
.btn-bordeaux:hover {
  background: var(--bordeaux-light);
  border-color: var(--bordeaux-light);
  transform: translateY(-1px);
}

.btn-danger {
  background: var(--accent-red);
  color: #fff;
  border-color: var(--accent-red);
}
.btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--ice-blue);
  color: var(--anthracite-dark);
  border-color: var(--ice-blue);
}
.btn-secondary:hover {
  background: #90b8d0;
  border-color: #90b8d0;
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--anthracite);
  border-color: var(--anthracite);
}
.btn-outline:hover {
  background: var(--anthracite);
  color: #fff;
  transform: translateY(-1px);
}
.btn-outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.5);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.8);
}

/* ─── 7. Divider ────────────────────────────────────────────────── */
.divider {
  height: 3px;
  border: none;
  background: linear-gradient(90deg, var(--bordeaux), var(--ice-blue));
  opacity: .7;
}

/* ─── 8. Section Headers ────────────────────────────────────────── */
.section-header { margin-bottom: clamp(2rem,4vw,3rem) }
.section-header--center { text-align: center }
.section-label {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--bordeaux);
  margin-bottom: .6rem;
}
.section-title {
  font-size: clamp(1.6rem,3.5vw,2.4rem);
  font-weight: 800;
  color: var(--anthracite);
  line-height: 1.2;
  margin-bottom: .75rem;
}
.section-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 640px;
  line-height: 1.7;
}
.section-header--center .section-subtitle { margin-inline: auto }

/* ─── 9. Hero ───────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, #1A252F 0%, #2C3E50 60%, #2E4057 100%);
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: clamp(3rem,7vw,6rem) 0;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(168,200,220,.07) 0%, transparent 70%);
  pointer-events: none;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: clamp(2rem,5vw,4rem);
  align-items: center;
}
.hero-badges {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 1.5rem;
}
.badge {
  background: rgba(168,200,220,.18);
  color: var(--ice-blue-light);
  border: 1px solid rgba(168,200,220,.3);
  padding: .3rem .8rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.badge-red {
  background: rgba(220,38,38,.15);
  color: #fca5a5;
  border-color: rgba(220,38,38,.3);
}
.hero-title {
  font-size: clamp(1.9rem,4vw,3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.hero-subtitle {
  font-size: clamp(1rem,2vw,1.15rem);
  color: var(--text-on-dark);
  opacity: .85;
  margin-bottom: 2rem;
  max-width: 520px;
  line-height: 1.7;
}
.hero-actions {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-bottom: 1.75rem;
}
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
}
.trust-item {
  display: flex; align-items: center; gap: .45rem;
  font-size: .875rem;
  color: var(--ice-blue-light);
}
.trust-item svg { color: var(--ice-blue); flex-shrink: 0 }

/* Sister Cards (hell, nicht dunkles Glaseffekt) */
.hero-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sister-card {
  background: white;
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  transition: all .25s ease;
  text-decoration: none;
  display: block;
  color: var(--text);
}
.sister-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.sister-card--bsa {
  border: 2px solid #1B4F8A;
  background: #EEF4FB;
}
.sister-card--schluessel {
  border: 2px solid var(--accent-red);
  background: #FFF5F5;
}
.sister-card-head {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .75rem;
}
.sister-card-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sister-card-icon--bsa { background: #1B4F8A }
.sister-card-icon--schluessel { background: var(--accent-red) }
.sister-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--anthracite);
  margin-bottom: 0;
}
.sister-card-text {
  font-size: .875rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  line-height: 1.5;
}
.sister-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
  color: white;
  transition: opacity var(--transition);
}
.sister-btn:hover { opacity: .88 }
.sister-btn--bsa { background: #1B4F8A }
.sister-btn--schluessel { background: var(--accent-red) }

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }
  .hero-cards {
    flex-direction: row;
  }
  .sister-card { flex: 1 }
}
@media (max-width: 600px) {
  .hero-cards { flex-direction: column }
  .hero { min-height: auto }
}

/* ─── Header CTA Buttons ─────────────────────────────────────────── */
.header-cta {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-shrink: 0;
}
.btn-notdienst-header {
  display: inline-flex;
  align-items: center;
  padding: .5rem 1rem;
  background: var(--accent-red);
  color: #fff;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}
.btn-notdienst-header:hover { background: #b91c1c; }
.btn-phone-sq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  background: var(--accent-red);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
  transition: background .2s;
}
.btn-phone-sq:hover { background: #b91c1c; }
.btn-phone-sq svg { width: 18px; height: 18px; }

/* ─── 10. Tür-Animation Section ─────────────────────────────────── */
.door-section {
  background: var(--anthracite);
  padding: clamp(4rem,7vw,6rem) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.door-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 39px,
    rgba(168,200,220,.04) 39px,
    rgba(168,200,220,.04) 40px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 39px,
    rgba(168,200,220,.04) 39px,
    rgba(168,200,220,.04) 40px
  );
  pointer-events: none;
}
.door-section-text { margin-bottom: 2.5rem; position: relative; }
.door-section-text h2 {
  font-size: clamp(1.4rem,3vw,2rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: .625rem;
}
.door-section-text p { color: rgba(255,255,255,.6); max-width: 500px; margin-inline: auto; line-height: 1.7; }

/* Türrahmen */
.door-frame {
  width: 320px;
  height: 240px;
  margin: 0 auto 1.5rem;
  position: relative;
  cursor: default;
}
/* Äußerer Rahmen */
.door-frame-outer {
  position: absolute;
  inset: 0;
  border: 3px solid rgba(168,200,220,.45);
  border-radius: 3px;
}
/* Obere Antriebsschiene */
.door-frame-cap {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 20px;
  background: linear-gradient(180deg, #3a5068, #2C3E50);
  border-bottom: 2px solid rgba(168,200,220,.3);
  z-index: 2;
}
/* Motor-Indikator */
.door-motor {
  position: absolute;
  top: 4px; right: 20px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ice-blue);
  box-shadow: 0 0 6px rgba(168,200,220,.8);
  animation: blink 1.8s ease-in-out infinite;
  z-index: 3;
}
/* Bodenleiste */
.door-frame-cap.bottom {
  top: auto; bottom: 0;
  height: 10px;
  background: linear-gradient(0deg, #3a5068, #2C3E50);
  border-top: 2px solid rgba(168,200,220,.2);
  border-bottom: none;
}
/* Sensoren oben */
.door-sensors {
  position: absolute;
  top: 22px; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 0 10px;
  z-index: 2;
}
.door-sensor-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ice-blue);
  opacity: .6;
  animation: blink 1.5s ease-in-out infinite;
}
.door-sensor-dot:last-child { animation-delay: .75s; }

/* Türpanele */
.door-track {
  position: absolute;
  top: 22px; bottom: 10px; left: 3px; right: 3px;
  display: flex; gap: 3px;
  background: rgba(168,200,220,.04);
}
.door-panel {
  flex: 1;
  background: linear-gradient(160deg, #3d5a73 0%, #2C3E50 100%);
  border-radius: 1px;
  transition: transform 1.4s cubic-bezier(.4,0,.2,1);
  position: relative;
}
/* Fenster-Streifen auf Panel */
.door-panel::before {
  content: '';
  position: absolute;
  top: 15%; left: 12%; right: 12%; bottom: 15%;
  border: 1px solid rgba(168,200,220,.15);
  border-radius: 1px;
}
.door-panel.left  { transform-origin: left;  }
.door-panel.right { transform-origin: right; }

/* Öffnungs-Zustand via JS-Klasse */
.door-frame.door-open .door-panel.left  { transform: translateX(-88%); }
.door-frame.door-open .door-panel.right { transform: translateX(88%); }
/* Schließen nach kurzer Zeit */
.door-frame.door-close .door-panel.left  { transform: translateX(0); }
.door-frame.door-close .door-panel.right { transform: translateX(0); }

/* Sensor-Strahlen beim Öffnen */
.door-beam {
  position: absolute;
  top: 26px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 0;
  background: linear-gradient(180deg, rgba(168,200,220,.7), transparent);
  transition: height 1.4s ease;
  z-index: 1;
}
.door-frame.door-open .door-beam {
  height: calc(100% - 36px);
}

.door-label {
  font-size: .75rem;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 2rem;
  position: relative;
}
.door-cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; position: relative; }

@keyframes blink {
  0%,100% { opacity: .8; }
  50% { opacity: .2; }
}

/* ─── 11. Services Grid ─────────────────────────────────────────── */
.services-section {
  background: var(--cream);
  padding: clamp(3rem,6vw,5rem) 0;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
  gap: 1.5rem;
}
.service-card {
  background: white;
  border: 1px solid var(--border);
  border-left: 4px solid var(--bordeaux);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: all var(--transition);
}
.service-card:hover {
  border-left-color: var(--ice-blue);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.service-icon {
  width: 56px; height: 56px;
  background: var(--ice-blue-light);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: var(--anthracite);
  transition: background var(--transition);
}
.service-card:hover .service-icon { background: var(--anthracite); color: white }
.service-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--anthracite);
  margin-bottom: .5rem;
}
.service-short {
  font-size: .875rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  line-height: 1.6;
}
.service-features {
  display: flex; flex-direction: column; gap: .4rem;
  margin-bottom: 1.25rem;
}
.service-feature {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; color: var(--text-muted);
}
.service-feature::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ice-blue);
  flex-shrink: 0;
}
.service-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--bordeaux);
  transition: gap var(--transition), color var(--transition);
}
.service-link:hover { gap: .7rem; color: var(--anthracite) }

/* ─── 12. Why-Section ───────────────────────────────────────────── */
.why-section {
  background: var(--bg);
  padding: clamp(3rem,6vw,5rem) 0;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 1.5rem;
}
.why-card {
  background: var(--cream);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: all var(--transition);
}
.why-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--ice-blue);
  transform: translateY(-2px);
}
.why-icon {
  width: 52px; height: 52px;
  background: var(--anthracite);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: white;
}
.why-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--anthracite);
  margin-bottom: .5rem;
}
.why-text {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ─── 13. Zertifikate ───────────────────────────────────────────── */
.certs-section {
  background: var(--bg);
  padding: clamp(3rem,6vw,5rem) 0;
}
.certs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 1.5rem;
}
.cert-card {
  background: #fff;
  border: 2px solid var(--bordeaux);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  transition: all var(--transition);
}
.cert-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px) }
.cert-icon-wrap {
  width: 64px; height: 64px;
  background: var(--bordeaux);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
}
.cert-pdf-wrap {
  width: 100%; height: 180px;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border);
}
.cert-pdf-lazy,
.cert-pdf-wrap iframe { width: 100%; height: 100%; border: none }
.cert-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--anthracite);
  margin-bottom: .5rem;
}
.cert-desc {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.cert-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--cream);
  border: 1px solid var(--bordeaux);
  color: var(--bordeaux);
  padding: .3rem .8rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
}

/* ─── 14. Process ───────────────────────────────────────────────── */
.process-section {
  background: var(--anthracite);
  padding: clamp(3rem,6vw,5rem) 0;
}
.process-section .section-label { color: var(--ice-blue) }
.process-section .section-title { color: #fff }
.process-section .section-subtitle { color: rgba(248,245,240,.7) }
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap: 2rem;
}
.process-step { position: relative }
.step-number {
  font-size: 3rem;
  font-weight: 900;
  color: rgba(168,200,220,.2);
  line-height: 1;
  margin-bottom: .5rem;
}
.step-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .5rem;
}
.step-text {
  font-size: .875rem;
  color: rgba(248,245,240,.75);
  line-height: 1.65;
}

/* ─── 15. Cities ────────────────────────────────────────────────── */
.cities-section {
  background: var(--cream);
  padding: clamp(3rem,6vw,5rem) 0;
}
.cities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
  gap: 1.25rem;
}
.city-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  transition: all var(--transition);
}
.city-card:hover { box-shadow: var(--shadow); transform: translateY(-2px) }
.city-card.main {
  border-color: var(--anthracite);
  background: var(--anthracite);
  color: white;
}
.city-card.main .city-name { color: white }
.city-card.main .city-desc { color: rgba(248,245,240,.75) }
.city-card.main .city-icon { color: var(--ice-blue) }
.city-name {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--anthracite);
  margin-bottom: .4rem;
}
.city-icon { flex-shrink: 0 }
.main-tag {
  background: var(--ice-blue);
  color: var(--anthracite-dark);
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .15rem .5rem;
  border-radius: 20px;
  margin-left: auto;
}
.city-desc { font-size: .85rem; color: var(--text-muted) }

/* ─── 16. Reviews ───────────────────────────────────────────────── */
.reviews-section {
  background: var(--bg);
  padding: clamp(3rem,6vw,5rem) 0;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 1.5rem;
}
.review-card {
  background: var(--cream);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: all var(--transition);
}
.review-card:hover { box-shadow: var(--shadow); transform: translateY(-2px) }
.review-stars {
  display: flex; gap: .25rem;
  color: #F59E0B;
  margin-bottom: 1rem;
}
.review-text {
  font-size: .9rem;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 1.25rem;
  font-style: italic;
}
.review-text::before { content: '"'; font-style: normal; color: var(--bordeaux); font-size: 1.5rem; line-height: 0; vertical-align: -.35rem; margin-right: .15rem }
.review-author {
  display: flex; flex-direction: column; gap: .15rem;
}
.review-name { font-weight: 700; font-size: .875rem; color: var(--anthracite) }
.review-company { font-size: .78rem; color: var(--text-muted) }

/* ─── 17. Maintenance CTA ───────────────────────────────────────── */
.maintenance-cta {
  background: var(--bordeaux);
  padding: clamp(3rem,6vw,4rem) 0;
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-content h2 {
  font-size: clamp(1.3rem,2.5vw,1.9rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: .5rem;
}
.cta-content p {
  color: rgba(255,255,255,.8);
  font-size: .95rem;
  max-width: 520px;
  line-height: 1.65;
}
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem }
.cta-btn-white {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff;
  color: var(--bordeaux);
  font-weight: 700;
  padding: .85rem 1.75rem;
  border-radius: var(--radius);
  transition: all var(--transition);
}
.cta-btn-white:hover { background: var(--cream); transform: translateY(-2px) }
.cta-btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent;
  color: #fff;
  font-weight: 700;
  padding: .85rem 1.75rem;
  border-radius: var(--radius);
  border: 2px solid rgba(255,255,255,.5);
  transition: all var(--transition);
}
.cta-btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.1) }

/* ─── 18. FAQ ───────────────────────────────────────────────────── */
.faq-section {
  background: var(--cream);
  padding: clamp(3rem,6vw,5rem) 0;
}
.faq-list { display: flex; flex-direction: column; gap: .75rem }
.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition);
}
.faq-item:hover { border-color: var(--ice-blue) }
.faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.5rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--anthracite);
  gap: 1rem;
  text-align: left;
  transition: background var(--transition);
}
.faq-question:hover,
.faq-item.open .faq-question { background: var(--cream) }
.faq-chevron {
  flex-shrink: 0;
  color: var(--bordeaux);
  transition: transform var(--transition);
}
.faq-item.open .faq-chevron { transform: rotate(180deg) }
.faq-answer { display: none }
.faq-item.open .faq-answer { display: block }
.faq-answer-inner {
  padding: 0 1.5rem 1.25rem;
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ─── 19. Page Hero (Seiten-Banner) ─────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, #1A252F 0%, #2C3E50 100%);
  padding: clamp(2rem,5vw,4rem) 0 clamp(1.5rem,4vw,3rem);
  margin-top: 0;
}
.page-hero-title {
  font-size: clamp(1.6rem,4vw,2.5rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: .5rem;
}
.page-hero-sub {
  color: rgba(248,245,240,.8);
  font-size: 1rem;
  max-width: 600px;
}
.breadcrumb {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem;
  color: rgba(248,245,240,.6);
  margin-bottom: 1rem;
}
.breadcrumb a { color: var(--ice-blue-light) }
.breadcrumb a:hover { color: #fff }

/* ─── 20. Leistungs-Detail-Seiten ───────────────────────────────── */
.service-detail-hero {
  background: linear-gradient(135deg, #1A252F 0%, #2C3E50 100%);
  padding: clamp(2.5rem,5vw,4.5rem) 0;
}
.service-detail-hero h1 {
  font-size: clamp(1.7rem,4vw,2.8rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: .75rem;
  line-height: 1.15;
}
.service-detail-hero p {
  color: rgba(248,245,240,.8);
  font-size: 1.05rem;
  max-width: 640px;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.service-hero-badges {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.service-hero-badge {
  background: rgba(168,200,220,.15);
  color: var(--ice-blue-light);
  border: 1px solid rgba(168,200,220,.25);
  padding: .3rem .8rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
}

/* Features Grid */
.features-section {
  background: var(--cream);
  padding: clamp(3rem,6vw,5rem) 0;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 1.5rem;
}
.feature-card {
  background: white;
  border: 1px solid var(--border);
  border-top: 3px solid var(--ice-blue);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: all var(--transition);
}
.feature-card:hover { box-shadow: var(--shadow); transform: translateY(-2px) }
.feature-icon {
  width: 44px; height: 44px;
  background: var(--ice-blue-light);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .85rem;
  color: var(--anthracite);
}
.feature-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--anthracite);
  margin-bottom: .4rem;
}
.feature-text {
  font-size: .845rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Normen/Zertifikate Leiste */
.norms-section {
  background: var(--bg);
  padding: clamp(2rem,4vw,3rem) 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.norms-list {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
}
.norm-badge {
  display: flex; align-items: center; gap: .5rem;
  background: var(--cream);
  border: 2px solid var(--bordeaux);
  color: var(--bordeaux);
  padding: .5rem 1rem;
  border-radius: 8px;
  font-size: .83rem;
  font-weight: 700;
}

/* Service FAQ inline */
.service-faq {
  background: var(--cream);
  padding: clamp(2.5rem,5vw,4rem) 0;
}

/* ─── 21. Admin-Styles ──────────────────────────────────────────── */
.admin-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: box-shadow var(--transition);
}
.admin-card:hover { box-shadow: var(--shadow) }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.admin-table th {
  background: var(--cream);
  color: var(--anthracite);
  font-weight: 700;
  padding: .75rem 1rem;
  text-align: left;
  border-bottom: 2px solid var(--border);
}
.admin-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
}
.admin-table tr:hover td { background: var(--cream) }

/* ─── 22. Footer ────────────────────────────────────────────────── */
footer {
  background: var(--anthracite-dark);
  color: var(--text-on-dark);
  padding-top: clamp(3rem,6vw,5rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(248,245,240,.08);
}
.footer-brand {}
.footer-logo {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1rem;
  font-weight: 700;
}
.footer-logo-icon {
  width: 40px; height: 40px;
  background: var(--anthracite);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.footer-desc {
  font-size: .875rem;
  color: rgba(248,245,240,.65);
  line-height: 1.65;
  margin-bottom: 1.25rem;
  max-width: 300px;
}
.footer-contact { display: flex; flex-direction: column; gap: .6rem }
.footer-contact-item {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .8rem;
  color: rgba(248,245,240,.65);
}
.footer-contact-item svg { flex-shrink: 0; margin-top: .15rem; color: var(--ice-blue) }
.footer-contact-item a { color: rgba(248,245,240,.65); transition: color var(--transition) }
.footer-contact-item a:hover { color: #fff }
.footer-col h4 {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ice-blue);
  margin-bottom: 1rem;
}
.footer-links { display: flex; flex-direction: column; gap: .5rem }
.footer-links a {
  font-size: .845rem;
  color: rgba(248,245,240,.65);
  transition: color var(--transition);
  display: flex; align-items: center; gap: .35rem;
}
.footer-links a:hover { color: #fff }
.footer-sister-links a { color: var(--ice-blue-light) }
.footer-sister-links a:hover { color: #fff }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  padding-block: 1.5rem;
}
.footer-copyright { font-size: .8rem; color: rgba(248,245,240,.45) }
.footer-legal {
  display: flex; gap: 1.25rem;
}
.footer-legal a {
  font-size: .8rem;
  color: rgba(248,245,240,.45);
  transition: color var(--transition);
}
.footer-legal a:hover { color: #fff }

/* ─── 23. Sticky-Kontakt ────────────────────────────────────────── */
.sticky-contact {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  display: flex; flex-direction: column; gap: .6rem;
  z-index: 900;
}
.sticky-whatsapp-btn,
.sticky-phone-btn {
  display: flex; align-items: center; gap: .5rem;
  padding: .65rem 1.1rem;
  border-radius: 30px;
  font-size: .82rem;
  font-weight: 600;
  color: white;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  transition: all var(--transition);
}
.sticky-whatsapp-btn {
  background: #25D366;
}
.sticky-whatsapp-btn:hover { background: #128C7E; transform: translateX(-4px) }
.sticky-phone-btn {
  background: var(--anthracite);
}
.sticky-phone-btn:hover { background: var(--anthracite-dark); transform: translateX(-4px) }

/* ─── 24. Scroll-Animationen ────────────────────────────────────── */
.anim {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}
.anim.visible { opacity: 1; transform: none }
.anim-delay-1 { transition-delay: .1s }
.anim-delay-2 { transition-delay: .2s }
.anim-delay-3 { transition-delay: .3s }
.anim-delay-4 { transition-delay: .4s }
.anim-delay-5 { transition-delay: .5s }

/* ─── 25. Responsive Anpassungen ─────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr }
  .footer-brand { grid-column: 1 / -1 }
}
@media (max-width: 768px) {
  .services-grid,
  .why-grid,
  .certs-grid,
  .reviews-grid,
  .features-grid { grid-template-columns: 1fr }
  .process-steps { grid-template-columns: 1fr 1fr }
  .cities-grid { grid-template-columns: 1fr 1fr }
  .cta-inner { flex-direction: column; text-align: center }
  .cta-actions { justify-content: center }
}
@media (max-width: 480px) {
  .process-steps,
  .cities-grid { grid-template-columns: 1fr }
  .footer-grid { grid-template-columns: 1fr }
  .footer-brand { grid-column: auto }
  .sticky-contact { bottom: 1rem; right: 1rem }
  .sticky-whatsapp-btn span,
  .sticky-phone-btn span { display: none }
  .sticky-whatsapp-btn,
  .sticky-phone-btn {
    width: 46px; height: 46px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
}

/* ─── 26. Dienstleistungen-Seite ────────────────────────────────── */
.dl-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 1.5rem;
  transition: all var(--transition);
}
.dl-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px) }
.dl-card-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: start;
}
.dl-icon {
  width: 72px; height: 72px;
  background: var(--ice-blue-light);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--anthracite);
  flex-shrink: 0;
  transition: background var(--transition);
}
.dl-card:hover .dl-icon { background: var(--anthracite); color: white }
.dl-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.dl-feature {
  display: flex; align-items: center; gap: .5rem;
  font-size: .875rem;
  color: var(--text-muted);
}
.dl-feature svg { color: var(--ice-blue); flex-shrink: 0 }

@media (max-width: 600px) {
  .dl-card-inner { grid-template-columns: 1fr }
  .dl-icon { display: none }
}

/* ─── 27. Utility ───────────────────────────────────────────────── */
.text-center { text-align: center }
.mt-2 { margin-top: 2rem }
.mt-3 { margin-top: 3rem }
.mb-2 { margin-bottom: 2rem }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── 28. Focus-Styles Accessibility ────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--ice-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── 29. Sister Cards – 4:3 Ratio ─────────────────────────────── */
.sister-card-ratio {
  aspect-ratio: 4 / 3;
}
.sister-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sister-card-btn {
  margin-top: auto;
}

/* ─── 30. Leistungsseiten – Hintergrund-Vektor-Icons ────────────── */
.service-page-hero {
  position: relative;
  overflow: hidden;
}
.hero-bg-icon {
  position: absolute;
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  color: #ffffff;
  fill: none;
  stroke: #ffffff;
}
.hero-bg-icon--tl { top: -20px; left: -20px; }
.hero-bg-icon--br { bottom: -20px; right: -20px; }
.hero-bg-icon--tr { top: -10px; right: 0; }
.hero-bg-icon--bl { bottom: 0; left: -10px; }

/* ─── 31. Service Detail Hero (alias für hero-bg-icon Positionierung) ── */
.service-detail-hero {
  position: relative;
  overflow: hidden;
}

/* ================================================================
   PAGE HERO (Unterseiten)
   ================================================================ */
.page-hero {
  background: linear-gradient(135deg, var(--anthracite) 0%, var(--anthracite-dark) 100%);
  padding: clamp(3rem,6vw,5rem) 0 clamp(2.5rem,5vw,4rem);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg, transparent, transparent 79px,
    rgba(168,200,220,.03) 79px, rgba(168,200,220,.03) 80px
  );
  pointer-events: none;
}
.page-hero .breadcrumb {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: rgba(255,255,255,.5);
  margin-bottom: 1rem;
}
.page-hero .breadcrumb a { color: rgba(255,255,255,.55); transition: color .2s; }
.page-hero .breadcrumb a:hover { color: var(--ice-blue); }
.page-hero-title {
  font-size: clamp(1.75rem,4vw,2.75rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: .875rem;
}
.page-hero-sub {
  font-size: clamp(.9rem,1.5vw,1.0625rem);
  color: rgba(255,255,255,.7);
  max-width: 620px;
  line-height: 1.75;
}

/* ================================================================
   KONTAKT SEITE
   ================================================================ */
.contact-section {
  padding: clamp(3rem,6vw,5rem) 0;
  background: var(--bg);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-info-card {
  background: var(--card-bg, #1a2535);
  border: 1px solid var(--border-dark, rgba(168,200,220,.12));
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 0;
  border-bottom: 1px solid var(--border-dark, rgba(168,200,220,.08));
}
.contact-info-item:last-child { border-bottom: none; }
.contact-info-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  background: rgba(168,200,220,.1);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ice-blue);
}
.contact-info-icon svg { color: var(--ice-blue); }
.contact-info-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.4);
  margin-bottom: .2rem;
}
.contact-info-value {
  font-size: .9rem;
  color: var(--cream, #F8F5F0);
  font-weight: 500;
}
.contact-info-value a { color: var(--ice-blue-light); text-decoration: none; }
.contact-info-value a:hover { text-decoration: underline; }

.contact-form-card {
  background: var(--card-bg, #1a2535);
  border: 1px solid var(--border-dark, rgba(168,200,220,.12));
  border-radius: var(--radius-lg);
  padding: 2rem;
}

/* ── Formular ──────────────────────────────────────────────── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}
.form-group { margin-bottom: 1.125rem; }
.form-label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  margin-bottom: .4rem;
}
.form-control {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: .7rem .9rem;
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(168,200,220,.18);
  border-radius: 8px;
  color: #fff;
  font-size: .9rem;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
}
.form-control:focus {
  outline: none;
  border-color: var(--ice-blue);
  box-shadow: 0 0 0 3px rgba(168,200,220,.15);
}
.form-control::placeholder { color: rgba(255,255,255,.3); }
textarea.form-control { resize: vertical; min-height: 130px; line-height: 1.6; }
select.form-control { cursor: pointer; }
select.form-control option { background: var(--anthracite-dark); color: #fff; }

.form-success {
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.3);
  border-radius: 8px;
  padding: .875rem 1rem;
  color: #86efac;
  font-size: .875rem;
  margin-bottom: 1.25rem;
}
.form-error {
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 8px;
  padding: .875rem 1rem;
  color: #fca5a5;
  font-size: .875rem;
  margin-bottom: 1.25rem;
}

/* ================================================================
   ÜBER UNS SEITE
   ================================================================ */
.about-section {
  padding: clamp(3.5rem,7vw,6rem) 0;
  background: var(--bg);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.about-visual {
  background: linear-gradient(135deg, var(--anthracite), var(--anthracite-dark));
  border-radius: var(--radius-lg);
  border: 1px solid rgba(168,200,220,.12);
  padding: 2rem;
  margin-bottom: 1.5rem;
}
.about-visual-inner { text-align: center; }

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .875rem;
}
.stat-card {
  background: var(--anthracite);
  border: 1px solid rgba(168,200,220,.1);
  border-radius: 12px;
  padding: 1.125rem 1rem;
  text-align: center;
  transition: border-color .25s;
}
.stat-card:hover { border-color: rgba(168,200,220,.3); }
.stat-number {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--ice-blue);
  line-height: 1;
  margin-bottom: .3rem;
}
.stat-label {
  font-size: .75rem;
  color: rgba(255,255,255,.5);
  font-weight: 500;
}
.about-text-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.about-text-content p {
  color: var(--text-muted);
  line-height: 1.85;
  font-size: .9375rem;
}
.about-text-content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--warm-white, #F8F5F0);
  margin-top: .25rem;
}