/*
Theme Name: PARS Security
Theme URI: https://pars-security.com
Author: PARS Security GmbH
Description: Premium Security Company Theme – Luxury Tactical Design
Version: 4.2.0
License: Private
Text Domain: pars-security
Tags: security, premium, dark, gold
*/

/* =============================================
   CSS CUSTOM PROPERTIES
============================================= */
:root {
  /* Primary palette – warm slate (from wizard bg) */
  --bg:         #13151e;
  --bg-2:       #191c27;
  --bg-3:       #1f2333;
  --bg-4:       #252b3b;

  /* Accent */
  --gold:       #c9a84c;
  --gold-light: #e8c97a;
  --gold-dim:   rgba(201,168,76,0.12);

  /* Text */
  --white:      #f0ede8;
  --white-dim:  rgba(240,237,232,0.62);
  --white-faint:rgba(240,237,232,0.35);

  /* Border */
  --border:     rgba(201,168,76,0.18);
  --border-sub: rgba(240,237,232,0.08);

  /* Radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', sans-serif;

  /* Motion */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --t:          0.32s;
}

/* =============================================
   RESET & BASE
============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t) var(--ease); }
ul { list-style: none; }

/* Tap highlight iOS */
a, button { -webkit-tap-highlight-color: transparent; }

/* =============================================
   LAYOUT HELPERS
============================================= */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 768px) { .container { padding: 0 2rem; } }

.section-label {
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.9rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--white);
}

.section-title span { color: var(--gold); font-style: italic; }

.gold-line {
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 1.2rem 0;
}

/* =============================================
   BUTTONS
============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 2rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--gold);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t) var(--ease);
  position: relative;
  overflow: hidden;
  -webkit-appearance: none;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease);
  z-index: 0;
  border-radius: inherit;
}

.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn:hover, .btn:focus-visible { color: #0a0a0a; outline: none; }
.btn > * { position: relative; z-index: 1; }
.btn span { position: relative; z-index: 1; }

.btn-primary {
  background: var(--gold);
  color: #0a0a0a;
  font-weight: 600;
  box-shadow: 0 4px 24px rgba(201,168,76,0.22);
}
.btn-primary::after { background: var(--gold-light); }
.btn-primary:hover { box-shadow: 0 6px 32px rgba(201,168,76,0.35); }

.btn-ghost {
  background: transparent;
  color: var(--white);
}

/* Active press */
.btn:active { transform: scale(0.97); }

/* =============================================
   HEADER
============================================= */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 1.2rem 0;
  transition: background var(--t) var(--ease), padding var(--t) var(--ease), border-color var(--t) var(--ease);
  border-bottom: 1px solid transparent;
}

#site-header.scrolled {
  background: rgba(19,21,30,0.96);
  border-bottom-color: var(--border);
  padding: 0.75rem 0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Logo – transparent bg, no box */
.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-logo img {
  height: 46px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 6px rgba(201,168,76,0.25));
  transition: filter var(--t) var(--ease);
}

.site-logo:hover img { filter: drop-shadow(0 0 12px rgba(201,168,76,0.5)); }

.main-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.main-nav a {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  position: relative;
  padding-bottom: 2px;
  transition: color var(--t) var(--ease);
}

.main-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width var(--t) var(--ease);
}

.main-nav a:hover, .main-nav a.active { color: var(--gold); }
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }

.header-cta { display: flex; align-items: center; gap: 1rem; }

.header-phone {
  font-size: 0.8rem;
  color: var(--white-dim);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  transition: color var(--t) var(--ease);
}

.header-phone:hover { color: var(--gold); }
.header-phone svg { color: var(--gold); flex-shrink: 0; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--r-sm);
  transition: background var(--t) var(--ease);
  z-index: 1001;
}

.nav-toggle:hover { background: var(--bg-3); }

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--white);
  transition: all var(--t) var(--ease);
  transform-origin: center;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile sticky CTA */
.mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 998;
  background: var(--gold);
  color: #0a0a0a;
  text-align: center;
  padding: 1rem 1.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Safe area for iOS home indicator */
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  border-radius: var(--r-md) var(--r-md) 0 0;
}

/* =============================================
   CINEMATIC HERO
============================================= */
#hero-cinematic {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-cin-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: brightness(0.64) saturate(0.85);
  transform: scale(1.04);
  animation: heroZoom 12s ease-out forwards;
}

@keyframes heroZoom {
  from { transform: scale(1.04); }
  to   { transform: scale(1); }
}

.hero-cin-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(19,21,30,0.66) 0%, rgba(19,21,30,0.12) 100%),
    linear-gradient(0deg, rgba(19,21,30,0.55) 0%, transparent 55%);
}

.hero-cin-inner {
  position: relative;
  z-index: 2;
  padding: 8rem 0 5rem;
  width: 100%;
}

.hero-cin-content { max-width: 700px; }

/* Homepage hero: the subject stands in the left half of the photo, so the
   copy is pushed into the empty right half and the overlay gradient flipped. */
/* Vertical crop is tuned to the logo on the back of the shirt: it spans
   roughly 43–65% of the photo's height and must not be clipped. */
.hero-cin--text-right .hero-bg-img { object-position: 22% 55%; }
.hero-cin--text-right .hero-cin-overlay {
  background:
    linear-gradient(255deg, rgba(19,21,30,0.66) 0%, rgba(19,21,30,0.12) 100%),
    linear-gradient(0deg, rgba(19,21,30,0.55) 0%, transparent 55%);
}
@media (min-width: 1025px) {
  .hero-cin--text-right .hero-cin-content { max-width: 560px; margin-left: auto; }
}
@media (max-width: 1024px) {
  /* Narrow viewports crop to the subject only – shift the frame so the copy
     sits over the darker background instead of over the person. */
  .hero-cin--text-right .hero-bg-img { object-position: 62% 45%; }
  .hero-cin--text-right .hero-cin-overlay {
    background:
      linear-gradient(0deg, rgba(19,21,30,0.78) 0%, rgba(19,21,30,0.42) 60%, rgba(19,21,30,0.35) 100%);
  }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.7s 0.1s var(--ease) forwards;
}

.hero-eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.hero-cin-headline {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.2vw, 5.4rem);
  font-weight: 700;
  line-height: 1.0;
  color: var(--white);
  margin-bottom: 1.2rem;
  opacity: 0;
  animation: fadeUp 0.8s 0.2s var(--ease) forwards;
}

.hero-cin-headline em {
  color: var(--gold);
  font-style: italic;
  display: block;
}

.hero-cin-slogan {
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  color: rgba(240,237,232,0.75);
  max-width: 560px;
  line-height: 1.75;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeUp 0.8s 0.35s var(--ease) forwards;
}

/* Trust badges */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeUp 0.8s 0.5s var(--ease) forwards;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(201,168,76,0.3);
  background: rgba(201,168,76,0.06);
  border-radius: var(--r-xl);
  font-size: 0.75rem;
  color: var(--white-dim);
  backdrop-filter: blur(8px);
}

.trust-badge svg { color: var(--gold); flex-shrink: 0; }

/* Trust-Badges: nacheinander smooth einblenden (nach Typewriter) */
.trust-badge {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.trust-badge.tw-in {
  opacity: 1;
  transform: translateY(0);
}

.hero-cin-cta {
  opacity: 0;
  animation: fadeUp 0.8s 0.65s var(--ease) forwards;
  font-size: 0.82rem;
}

/* Scroll hint */
.scroll-hint {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
  opacity: 0.5;
  animation: fadeUp 1s 1.2s ease forwards, bounce 2.5s 2.2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}

/* =============================================
   WIZARD SECTION
============================================= */
#wizard-section {
  padding: 5rem 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border-sub);
}

.wizard-outer {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: start;
}

.wizard-left-copy { padding-top: 1rem; }

.wizard-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.wizard-checklist-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.82rem;
  color: var(--white-dim);
}

.wizard-checklist-item svg { color: var(--gold); flex-shrink: 0; }

/* Wizard card */
.wizard-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}

.wizard-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}

/* Wizard Logo bar */
.wizard-logo-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid var(--border-sub);
}

.wizard-logo-bar img {
  height: 36px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 4px rgba(201,168,76,0.3));
}

.wizard-logo-bar span {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.06em;
}

/* Steps */
.wizard-steps {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 1rem 1.6rem 0;
}

.wizard-steps::before { display: none; }

.step-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg-4);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 600;
  position: relative;
  z-index: 1;
  transition: all var(--t) var(--ease-spring);
  flex-shrink: 0;
}

.step-dot.active, .step-dot.done {
  background: var(--gold);
  border-color: var(--gold);
  color: #0a0a0a;
  transform: scale(1.08);
}

.step-connector {
  flex: 1;
  height: 1px;
  background: var(--border);
  transition: background 0.5s var(--ease);
}

.step-connector.done { background: var(--gold); }

.wizard-body { padding: 1.2rem 1.6rem 1.6rem; }
.wizard-step { display: none; }
.wizard-step.active { display: block; }

.wizard-question {
  font-size: 0.82rem;
  color: var(--white-dim);
  margin-bottom: 0.9rem;
}

.wizard-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.wizard-option {
  padding: 0.75rem 0.65rem;
  border: 1px solid var(--border-sub);
  background: var(--bg-4);
  color: var(--white-dim);
  font-family: var(--font-body);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all var(--t) var(--ease);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--r-sm);
  -webkit-appearance: none;
}

.wizard-option:hover, .wizard-option.selected {
  border-color: var(--gold);
  background: var(--gold-dim);
  color: var(--gold);
  transform: translateY(-1px);
}

.wizard-option:active { transform: scale(0.97); }
.opt-icon { flex-shrink: 0; }

/* Fields */
.wizard-field { margin-bottom: 0.7rem; }

.wizard-field label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 0.3rem;
}

.wizard-field input,
.wizard-field select,
.wizard-field textarea {
  width: 100%;
  background: var(--bg-4);
  border: 1px solid var(--border-sub);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.65rem 0.85rem;
  outline: none;
  border-radius: var(--r-sm);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.wizard-field input:focus,
.wizard-field select:focus,
.wizard-field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}

.wizard-field input[type="date"] { color-scheme: dark; }

.wizard-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c9a84c'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.2rem;
}

.wizard-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

.wizard-btn-back {
  background: none;
  border: none;
  color: var(--white-dim);
  font-size: 0.76rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  padding: 0.5rem;
  border-radius: var(--r-sm);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}

.wizard-btn-back:hover { color: var(--gold); background: var(--gold-dim); }

.wizard-btn-next {
  background: var(--gold);
  border: none;
  color: #0a0a0a;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.65rem 1.3rem;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: all var(--t) var(--ease-spring);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.wizard-btn-next:hover { background: var(--gold-light); transform: translateY(-1px); }
.wizard-btn-next:active { transform: scale(0.96); }

/* Success */
.wizard-success {
  display: none;
  text-align: center;
  padding: 2rem 1rem;
}

.wizard-success.active { display: block; animation: fadeUp 0.5s var(--ease) both; }

.success-icon {
  width: 52px; height: 52px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--gold);
  background: var(--gold-dim);
  animation: scaleIn 0.5s var(--ease-spring) both;
}

@keyframes scaleIn {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

.wizard-success h4 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.wizard-success p { font-size: 0.82rem; color: var(--white-dim); }

/* =============================================
   USP STRIP
============================================= */
#usp-strip {
  background: var(--bg-3);
  border-top: 1px solid var(--border-sub);
  border-bottom: 1px solid var(--border-sub);
  padding: 3.5rem 0;
}

.usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.usp-item {
  padding: 1.5rem 2rem;
  text-align: center;
  border-right: 1px solid var(--border-sub);
  transition: background var(--t) var(--ease);
}

.usp-item:last-child { border-right: none; }
.usp-item:hover { background: var(--bg-4); }

.usp-number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.usp-label { font-size: 0.78rem; color: var(--white-dim); }

/* =============================================
   SERVICES
============================================= */
#services {
  padding: 7rem 0;
  background: var(--bg);
}

.services-header {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 2.5rem;
}

.services-intro { color: var(--white-dim); font-size: 0.95rem; line-height: 1.8; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.service-card {
  background: var(--bg-2);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-lg);
  padding: 2.2rem;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.5s var(--ease);
}

.service-card:hover {
  border-color: var(--border);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
}

.service-card:hover::before { width: 100%; }

.service-number {
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--gold);
  opacity: 0.4;
  display: block;
  margin-bottom: 1.2rem;
}

.service-icon-svg { color: var(--gold); margin-bottom: 1rem; }

.service-card h4 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  margin-bottom: 0.7rem;
  color: var(--white);
  transition: color var(--t) var(--ease);
}

.service-card:hover h4 { color: var(--gold); }

.service-card p {
  font-size: 0.86rem;
  color: var(--white-dim);
  line-height: 1.7;
  margin-bottom: 1.4rem;
}

.service-link {
  font-size: 0.73rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap var(--t) var(--ease);
}

.service-link::after { content: '→'; transition: transform var(--t) var(--ease); }
.service-card:hover .service-link::after { transform: translateX(4px); }

/* =============================================
   IMAGE STRIP
============================================= */
#image-strip { overflow: hidden; }

.image-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 320px;
  gap: 2px;
}

.strip-img-wrap {
  position: relative;
  overflow: hidden;
}

.strip-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
  filter: brightness(0.62) saturate(0.85);
}

.strip-img-wrap:hover img { transform: scale(1.06); filter: brightness(0.72) saturate(0.92); }

.strip-img-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1.4rem;
  background: linear-gradient(0deg, rgba(19,21,30,0.75) 0%, transparent 60%);
}

.strip-img-overlay span {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold);
  font-style: italic;
}

/* =============================================
   PROCESS
============================================= */
#process {
  padding: 7rem 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border-sub);
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3.5rem;
  position: relative;
}

.process-steps::before {
  content: '';
  position: absolute;
  top: 27px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: var(--border);
}

.process-step { text-align: center; position: relative; }

.step-num {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold);
  margin: 0 auto 1.4rem;
  background: var(--bg-2);
  position: relative;
  z-index: 1;
  transition: all var(--t) var(--ease-spring);
}

.process-step:hover .step-num {
  background: var(--gold);
  color: #0a0a0a;
  transform: scale(1.1);
  box-shadow: 0 0 24px rgba(201,168,76,0.3);
}

.process-step h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.process-step p { font-size: 0.82rem; color: var(--white-dim); line-height: 1.7; }

/* =============================================
   REVIEWS
============================================= */
#reviews {
  padding: 7rem 0;
  background: var(--bg);
  border-top: 1px solid var(--border-sub);
  overflow: hidden;
}

.reviews-track-wrapper {
  overflow: hidden;
  margin-top: 3rem;
  position: relative;
}

.reviews-track-wrapper::before,
.reviews-track-wrapper::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.reviews-track-wrapper::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.reviews-track-wrapper::after  { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }

.reviews-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
  padding: 2rem 0;
  align-items: center;
  will-change: transform;
}

.review-card {
  min-width: 300px;
  max-width: 300px;
  background: var(--bg-2);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-lg);
  padding: 1.8rem;
  flex-shrink: 0;
  position: relative;
  opacity: 0.55;
  transform: scale(0.95);
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1), box-shadow 0.5s ease, opacity 0.5s ease, border-color 0.3s ease;
}

.review-card.active {
  opacity: 1;
  transform: scale(1.05);
  border-color: var(--border);
  box-shadow: 0 12px 48px rgba(0,0,0,0.4), 0 0 0 1px var(--gold);
  z-index: 2;
}

.review-card.active:hover {
  border-color: var(--gold);
}

.review-card::before {
  content: '"';
  font-family: var(--font-display);
  font-size: 4.5rem;
  color: var(--gold);
  opacity: 0.1;
  position: absolute;
  top: -0.5rem;
  left: 1.2rem;
  line-height: 1;
}

.review-stars { display: flex; gap: 2px; margin-bottom: 0.9rem; color: var(--gold); font-size: 0.85rem; }
.review-text  { font-size: 0.86rem; color: var(--white-dim); line-height: 1.75; margin-bottom: 1.4rem; }

.reviewer { display: flex; align-items: center; gap: 0.75rem; }

.reviewer-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: #0a0a0a;
  font-weight: 700;
  flex-shrink: 0;
}

.reviewer-name { font-size: 0.84rem; font-weight: 500; color: var(--white); }
.reviewer-type { font-size: 0.7rem; color: var(--white-dim); }

.reviews-controls { display: flex; justify-content: center; gap: 0.8rem; margin-top: 2.5rem; }

.rev-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-sub);
  background: var(--bg-2);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t) var(--ease-spring);
}

.rev-btn:hover { border-color: var(--gold); color: var(--gold); transform: scale(1.08); }
.rev-btn:active { transform: scale(0.94); }

/* =============================================
   CTA SECTION
============================================= */
#cta-section {
  padding: 7rem 0;
  text-align: center;
  background: var(--bg-2);
  border-top: 1px solid var(--border-sub);
  position: relative;
  overflow: hidden;
}

#cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(201,168,76,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.cta-inner { position: relative; z-index: 1; }

.cta-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 600;
  margin-bottom: 1rem;
}

.cta-title span { color: var(--gold); font-style: italic; }
.cta-sub { color: var(--white-dim); font-size: 0.95rem; margin-bottom: 2.2rem; }

.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.cta-contact-info {
  margin-top: 2.5rem;
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-contact-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.86rem;
  color: var(--white-dim);
}

.cta-contact-item .icon { color: var(--gold); }
.cta-contact-item a { color: var(--white-dim); transition: color var(--t) var(--ease); }
.cta-contact-item a:hover { color: var(--gold); }

/* =============================================
   MAPS SECTION
============================================= */
#maps-section {
  border-top: 1px solid var(--border-sub);
}

.maps-split {
  display: grid;
  grid-template-columns: 400px 1fr;
  min-height: 460px;
}

.maps-info {
  background: var(--bg-3);
  padding: 3.5rem 2.5rem;
  border-right: 1px solid var(--border-sub);
}

.maps-contact-item {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--border-sub);
}

.maps-contact-item:last-of-type { border-bottom: none; }

.maps-icon {
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}

.maps-contact-label { font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--white-dim); margin-bottom: 0.15rem; }
.maps-contact-value { font-size: 0.88rem; color: var(--white); }
.maps-contact-value a { color: var(--gold); transition: opacity var(--t) var(--ease); }
.maps-contact-value a:hover { opacity: 0.8; }

.maps-embed { position: relative; min-height: 460px; }
.maps-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* =============================================
   FOOTER
============================================= */
#site-footer {
  background: var(--bg-3);
  border-top: 1px solid var(--border-sub);
  padding: 4rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
}

.footer-brand img {
  height: 50px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 6px rgba(201,168,76,0.25));
  margin-bottom: 1.2rem;
}

.footer-brand p { font-size: 0.83rem; color: var(--white-dim); line-height: 1.8; margin-bottom: 1.4rem; max-width: 260px; }

.social-links { display: flex; gap: 0.6rem; }

.social-link {
  width: 36px; height: 36px;
  border: 1px solid var(--border-sub);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-dim);
  transition: all var(--t) var(--ease-spring);
  /* IMPORTANT: make clickable on mobile */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.social-link:hover { border-color: var(--gold); color: var(--gold); transform: scale(1.1); }
.social-link:active { transform: scale(0.93); }

.footer-col h4 {
  font-size: 0.67rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

.footer-col ul { display: flex; flex-direction: column; gap: 0.55rem; }

.footer-col ul a {
  font-size: 0.83rem;
  color: var(--white-dim);
  transition: color var(--t) var(--ease);
  /* min touch target */
  display: inline-block;
  padding: 2px 0;
}

.footer-col ul a:hover { color: var(--gold); }

.footer-address { font-size: 0.83rem; color: var(--white-dim); line-height: 1.9; font-style: normal; }
.footer-address a { color: var(--gold); }

.footer-bottom {
  border-top: 1px solid var(--border-sub);
  padding-top: 1.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom p { font-size: 0.75rem; color: var(--white-faint); }

.footer-legal { display: flex; gap: 1.8rem; }
.footer-legal a { font-size: 0.75rem; color: var(--white-faint); transition: color var(--t) var(--ease); }
.footer-legal a:hover { color: var(--gold); }

/* =============================================
   PAGE TEMPLATES
============================================= */
.page-hero {
  padding: 160px 0 70px;
  position: relative;
  border-bottom: 1px solid var(--border-sub);
  background: var(--bg-2);
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 100% at 80% 50%, rgba(201,168,76,0.04) 0%, transparent 70%);
}

.page-hero-content { position: relative; z-index: 1; max-width: 680px; }

/* Page hero with background photo (Leistungen, Über uns, Karriere, Kontakt).
   These are group/portrait photos, so the hero must be tall enough that
   `cover` crops gently — a short band would cut off heads. */
.page-hero.has-media {
  overflow: hidden;
  min-height: 640px;
  display: flex;
  align-items: center;
  padding: 150px 0 80px;
}
.page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero-bg-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: brightness(0.62) saturate(0.85);
}

/* Per-photo crop tuning. Values are measured against each photo's actual
   head positions so no subject's crown is clipped — do not "round" these
   toward center, that is what cut off heads before. */
/* Services and Kontakt share swapped photos: Services now carries the 4:3
   shot whose subject sits very high in frame, Kontakt the 3:2 one. */
.page-hero--services .page-hero-bg-img { object-position: center top; }
.page-hero--contact  .page-hero-bg-img { object-position: center 6%; }
.page-hero--about    .page-hero-bg-img { object-position: center 9%; }
.page-hero--career   .page-hero-bg-img { object-position: center 12%; }

@media (max-width: 1024px) {
  .page-hero.has-media { min-height: 560px; }
}
@media (max-width: 768px) {
  .page-hero.has-media { min-height: 480px; padding: 130px 0 60px; }
}
@media (max-width: 480px) {
  .page-hero.has-media { min-height: 420px; padding: 120px 0 50px; }
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(25,28,39,0.72) 0%, rgba(25,28,39,0.28) 100%),
    linear-gradient(0deg, rgba(19,21,30,0.55) 0%, transparent 60%);
}
.page-hero.has-media > .container { width: 100%; position: relative; z-index: 1; }
.page-hero.has-media .page-hero-content { position: relative; z-index: 1; }

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 600;
  line-height: 1.05;
  margin-bottom: 1rem;
}

.page-hero h1 span { color: var(--gold); font-style: normal; }
.page-hero p { font-size: 0.98rem; color: var(--white-dim); line-height: 1.8; }

/* Services full */
.services-full { padding: 5rem 0; background: var(--bg); }
.services-full .container { max-width: 1000px; }

.service-full-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--border-sub);
}

/* Grid items default to min-width:auto, which lets an unbreakable long
   compound word (common in German) push its track wider than the
   container and cause horizontal page overflow on narrow viewports. */
.service-full-card > * { min-width: 0; }

.service-full-card:nth-child(even) .service-full-text { order: 2; }
.service-full-card:nth-child(even) .service-full-visual { order: 1; }

.service-full-text h2 { font-family: var(--font-display); font-size: 2rem; margin-bottom: 0.9rem; color: var(--gold); overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.service-full-text h2 span { color: var(--gold); font-style: normal; }
.service-full-text p { color: var(--white-dim); line-height: 1.8; margin-bottom: 1.2rem; font-size: 0.9rem; }

.service-full-text ul { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.8rem; }
.service-full-text ul li { display: flex; align-items: center; gap: 0.65rem; font-size: 0.86rem; color: var(--white-dim); }
.service-full-text ul li::before { content: ''; width: 16px; height: 1px; background: var(--gold); flex-shrink: 0; }

.service-full-visual {
  background: var(--bg-2);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-lg);
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.service-visual-icon { font-size: 5rem; opacity: 0.1; }
.service-visual-label {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold);
  font-style: italic;
  margin-top: 1rem;
}

/* About */
.about-intro { padding: 5rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.about-text h2 { font-family: var(--font-display); font-size: 2.2rem; margin-bottom: 1.2rem; }
.about-text h2 span { color: var(--gold); font-style: italic; }
.about-text p { color: var(--white-dim); line-height: 1.9; margin-bottom: 0.9rem; font-size: 0.9rem; }

.languages-grid { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.2rem; }

.lang-tag {
  padding: 0.38rem 0.85rem;
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  font-size: 0.73rem;
  color: var(--white-dim);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: all var(--t) var(--ease);
}

.lang-tag:hover { border-color: var(--gold); color: var(--gold); }

.about-visual { background: var(--bg-2); border: 1px solid var(--border-sub); border-radius: var(--r-lg); padding: 2rem; }

.values-grid { padding: 5rem 0; border-top: 1px solid var(--border-sub); }

.values-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.5rem; }

.value-card {
  padding: 1.8rem;
  border: 1px solid var(--border-sub);
  border-radius: var(--r-lg);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.value-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.value-icon { font-size: 1.8rem; margin-bottom: 0.9rem; }
.value-card h3 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 0.5rem; }
.value-card p { font-size: 0.83rem; color: var(--white-dim); line-height: 1.7; }

/* Career */
.career-intro { padding: 5rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.career-text h2 { font-family: var(--font-display); font-size: 2.2rem; margin-bottom: 1.2rem; }
.career-text h2 span { color: var(--gold); font-style: italic; }
.career-text p { color: var(--white-dim); line-height: 1.8; margin-bottom: 0.9rem; font-size: 0.9rem; }
.career-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.2rem; }
.benefit-item { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.83rem; color: var(--white-dim); }
.benefit-item .icon { color: var(--gold); margin-top: 0.1rem; flex-shrink: 0; }

.career-form-section { padding: 5rem 0; border-top: 1px solid var(--border-sub); background: var(--bg-2); }
.career-form { max-width: 700px; margin: 2.5rem auto 0; }

/* Contact */
.contact-section { padding: 5rem 0; display: grid; grid-template-columns: 1fr 1.3fr; gap: 4rem; align-items: start; }
.contact-info h2 { font-family: var(--font-display); font-size: 2.2rem; margin-bottom: 1.2rem; }
.contact-info h2 span { color: var(--gold); font-style: italic; }

.contact-item { display: flex; gap: 0.9rem; align-items: flex-start; margin-bottom: 1.6rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--border-sub); }
.contact-item:last-of-type { border-bottom: none; }

.contact-item-icon {
  width: 42px; height: 42px;
  border: 1px solid var(--border-sub);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}

.contact-item-label { font-size: 0.67rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white-dim); margin-bottom: 0.2rem; }
.contact-item-value { font-size: 0.95rem; color: var(--white); }
.contact-item-value a { color: var(--gold); }

.contact-form-card {
  background: var(--bg-2);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-lg);
  padding: 2.2rem;
  position: relative;
}

.contact-form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Forms */
.form-group { margin-bottom: 1.1rem; }

.form-group label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 0.35rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--border-sub);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.88rem;
  padding: 0.78rem 1rem;
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.1);
}

.form-group input[type="date"] { color-scheme: dark; }
.form-group textarea { resize: vertical; min-height: 120px; }

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c9a84c'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.2rem;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.radio-group { display: flex; gap: 1.5rem; }
.radio-group label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.84rem; color: var(--white-dim); cursor: pointer; text-transform: none; letter-spacing: 0; }
.radio-group input[type="radio"] { width: auto; accent-color: var(--gold); }

.form-submit { margin-top: 1.8rem; }

.form-success {
  display: none;
  background: rgba(201,168,76,0.07);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: var(--r-md);
  padding: 1.8rem;
  text-align: center;
  margin-top: 1.5rem;
}

.form-success.show { display: block; animation: fadeUp 0.5s var(--ease) both; }
.form-success h4 { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold); margin-bottom: 0.4rem; }
.form-success p { font-size: 0.83rem; color: var(--white-dim); }

/* Legal */
.legal-section { padding: 5rem 0; max-width: 760px; }
.legal-section h2 { font-family: var(--font-display); font-size: 1.65rem; color: var(--gold); margin: 2.2rem 0 0.9rem; font-style: italic; }
.legal-section h2:first-of-type { margin-top: 0; }
.legal-section p, .legal-section address { font-size: 0.88rem; color: var(--white-dim); line-height: 1.9; font-style: normal; margin-bottom: 0.75rem; }
.legal-section ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.legal-section ul li { font-size: 0.88rem; color: var(--white-dim); margin-bottom: 0.35rem; }
.legal-section a { color: var(--gold); }
.legal-divider { width: 100%; height: 1px; background: var(--border-sub); margin: 2.2rem 0; }

/* =============================================
   SCROLL REVEAL ANIMATION
============================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}

.reveal.visible { opacity: 1; transform: translateY(0); }

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

/* Show ALL children when parent is visible, staggered by position */
.reveal-stagger.visible > * { opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(1)  { transition-delay: 0.00s; }
.reveal-stagger.visible > *:nth-child(2)  { transition-delay: 0.07s; }
.reveal-stagger.visible > *:nth-child(3)  { transition-delay: 0.14s; }
.reveal-stagger.visible > *:nth-child(4)  { transition-delay: 0.21s; }
.reveal-stagger.visible > *:nth-child(5)  { transition-delay: 0.28s; }
.reveal-stagger.visible > *:nth-child(6)  { transition-delay: 0.35s; }
.reveal-stagger.visible > *:nth-child(7)  { transition-delay: 0.42s; }
.reveal-stagger.visible > *:nth-child(8)  { transition-delay: 0.49s; }
.reveal-stagger.visible > *:nth-child(9)  { transition-delay: 0.56s; }

/* =============================================
   KEYFRAMES
============================================= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   RESPONSIVE – TABLET
============================================= */
@media (max-width: 1024px) {
  .wizard-outer         { grid-template-columns: 1fr; gap: 2rem; }
  .wizard-left-copy     { display: none; }
  .services-header      { grid-template-columns: 1fr; gap: 1.2rem; }
  .services-grid        { grid-template-columns: 1fr 1fr; }
  .usp-grid             { grid-template-columns: repeat(2, 1fr); }
  .footer-grid          { grid-template-columns: 1fr 1fr; }
  .process-steps        { grid-template-columns: repeat(2, 1fr); }
  .process-steps::before{ display: none; }
  .about-intro          { grid-template-columns: 1fr; }
  .career-intro         { grid-template-columns: 1fr; }
  .service-full-card    { grid-template-columns: 1fr; gap: 2rem; }
  .service-full-card:nth-child(even) .service-full-text  { order: unset; }
  .service-full-card:nth-child(even) .service-full-visual{ order: unset; }
  .contact-section      { grid-template-columns: 1fr; }
  .values-cards         { grid-template-columns: 1fr 1fr; }
  .maps-split           { grid-template-columns: 1fr; }
  .maps-embed           { min-height: 320px; }
  .maps-embed iframe    { position: static; height: 320px; }
}

/* =============================================
   RESPONSIVE – MOBILE
============================================= */
@media (max-width: 768px) {
  /* Nav */
  .main-nav {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(19,21,30,0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.2rem;
    z-index: 998;
  }

  .main-nav.open { display: flex; animation: fadeUp 0.3s var(--ease) both; }
  .main-nav a { font-size: 1.15rem; }
  .nav-toggle { display: flex; }
  .header-phone { display: none; }
  .header-cta .btn { display: none; }
  .mobile-sticky-cta { display: none !important; }
  body { padding-bottom: 0; }

  /* Hero */
  .hero-cin-inner { padding: 7rem 0 4rem; }

  /* Layout */
  .services-grid        { grid-template-columns: 1fr; }
  .usp-grid             { grid-template-columns: 1fr 1fr; }
  .footer-grid          { grid-template-columns: 1fr; gap: 2rem; }
  .form-row             { grid-template-columns: 1fr; }
  .process-steps        { grid-template-columns: 1fr 1fr; }
  .values-cards         { grid-template-columns: 1fr; }
  .wizard-options       { grid-template-columns: 1fr; }
  .career-benefits      { grid-template-columns: 1fr; }
  .trust-badges         { gap: 0.5rem; }
  .image-strip-grid     { grid-template-columns: 1fr; height: auto; }
  .strip-img-wrap       { height: 200px; }
  .maps-info            { padding: 2rem 1.5rem; }
  .cta-contact-info     { flex-direction: column; align-items: center; gap: 1rem; }
  .contact-form-card    { padding: 1.5rem; }
}

@media (max-width: 480px) {
  .usp-grid { grid-template-columns: 1fr; }
  .usp-item { border-right: none; border-bottom: 1px solid var(--border-sub); }
  .usp-item:last-child { border-bottom: none; }
  .process-steps { grid-template-columns: 1fr; }
  .wizard-field-row { grid-template-columns: 1fr; }
  .hero-cin-headline { font-size: 2.8rem; }
}

/* iOS safe area */
@supports (padding-top: env(safe-area-inset-top)) {
  #site-header { padding-top: max(1.2rem, env(safe-area-inset-top)); }
}

/* =============================================
   ADDITIONS v7 – CLEAN SINGLE SOURCE OF TRUTH
============================================= */

/* ── LOGO: transparent PNG, no background ── */
.site-logo img,
.wizard-logo-bar img,
.footer-brand img,
.wizard-success-logo,
.wizard-intro-logo {
  mix-blend-mode: normal;
  background: transparent;
}
.site-logo img { height: 46px; width: auto; object-fit: contain; filter: drop-shadow(0 0 6px rgba(201,168,76,0.2)); transition: filter var(--t) var(--ease); }
.site-logo:hover img { filter: drop-shadow(0 0 14px rgba(201,168,76,0.6)); }
.footer-brand img { height: 50px; width: auto; object-fit: contain; margin-bottom: 1.2rem; }

/* ── WIZARD: logo same size intro & success ── */
.wizard-intro-logo,
.wizard-success-logo {
  height: 72px !important;
  width: auto;
  display: block;
  margin: 0 auto 1rem !important;
  object-fit: contain;
}

.wizard-logo-bar img { height: 36px; width: auto; object-fit: contain; }

/* Success: no checkmark, bigger logo, clean */
.wizard-success .success-icon { display: none !important; }
.wizard-success { padding: 2rem 1rem !important; text-align: center; }
.wizard-success h4 { font-size: 1.2rem; margin-bottom: 0.5rem; }

/* Wizard: compact body */
.wizard-body { padding: 1rem 1.5rem 1.4rem !important; overflow-y: auto; }
.wizard-step { min-height: 0 !important; animation: fadeUp 0.3s ease both; }
.wizard-field { margin-bottom: 0.55rem !important; }
.wizard-field label { font-size: 0.63rem !important; margin-bottom: 0.25rem !important; }
.wizard-field input, .wizard-field select, .wizard-field textarea { padding: 0.5rem 0.75rem !important; font-size: 0.82rem !important; }
.wizard-question { font-size: 0.78rem; color: var(--white-dim); margin-bottom: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
.wizard-options { gap: 0.38rem !important; margin-bottom: 0.7rem !important; }
.wizard-option { padding: 0.52rem 0.55rem !important; font-size: 0.72rem !important; gap: 0.38rem !important; border-radius: 6px !important; }
.wizard-field-row { gap: 0.4rem !important; }
.wizard-nav { margin-top: 0.75rem !important; }
.wizard-steps { padding: 0.8rem 1.5rem 0 !important; }
.wizard-kommentar { width:100%; background:var(--bg-4); border:1px solid var(--border-sub); color:var(--white); font-family:var(--font-body); font-size:0.82rem; padding:0.5rem 0.75rem; border-radius:6px; outline:none; resize:none; }
.wizard-kommentar:focus { border-color: var(--gold); }
.wiz-opt-label { display:block; font-size:0.63rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--white-dim); margin-bottom:0.25rem; }
.wiz-opt-label em { opacity:0.5; font-style:italic; text-transform:none; letter-spacing:0; }

/* ── TRUST BADGES: 3×2 grid ── */
.trust-badges-grid {
  display: grid !important;
  grid-template-columns: repeat(3, auto);
  gap: 0.5rem;
  flex-wrap: unset;
}
.trust-badges-grid .trust-badge { justify-content: flex-start; }
@media (max-width: 480px) { .trust-badges-grid { grid-template-columns: 1fr 1fr; } }

/* ── SERVICES GRID HOMEPAGE: 2 columns, all 7 cards visible ── */
.services-grid-home {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (max-width: 640px) { .services-grid-home { grid-template-columns: 1fr; gap: 1rem; } }

/* Service card */
.service-card { background: var(--bg-2); border: 1px solid var(--border-sub); border-radius: var(--r-lg); padding: 1.8rem; position: relative; overflow: hidden; transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.service-card::before { content:''; position:absolute; top:0; left:0; width:0; height:2px; background:var(--gold); transition:width 0.5s var(--ease); }
.service-card:hover { border-color: var(--border); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.35); }
.service-card:hover::before { width: 100%; }
.service-number { display: none !important; }
.service-icon-svg { color: var(--gold); margin-bottom: 0.8rem; display: block; }

/* Bildband der Leistungskacheln – zieht über die Kartenpolsterung hinaus.
   Das Icon sitzt als Badge auf dem Bild, damit beides erhalten bleibt. */
.service-card-media {
  position: relative;
  margin: -1.8rem -1.8rem 1.2rem;
  height: 380px;   /* Rückfallwert für Browser ohne aspect-ratio */
  overflow: hidden;
}
/* Seitenverhältnis statt fester Höhe – und zwar exakt 3:2, das Format der
   Originalfotos. Vier der sieben Aufnahmen werden dadurch überhaupt nicht
   mehr beschnitten, bei den übrigen bleibt nur ein schmaler Rand. Jede
   flachere Kachel schneidet zwangsläufig oben oder unten weg, und weil die
   Köpfe in fast allen Fotos im oberen Viertel sitzen, traf es immer die
   Köpfe. Nicht wieder flacher machen. */
@supports (aspect-ratio: 3 / 2) {
  .service-card-media { height: auto; aspect-ratio: 3 / 2; }
}
.service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) brightness(0.82);
  transform: scale(1.01);
  transition: transform 0.8s var(--ease), filter var(--t) var(--ease);
}
.service-card:hover .service-card-media img {
  transform: scale(1.06);
  filter: saturate(1) brightness(0.9);
}

/* Ausschnitt je Foto. Die drei 3:2-Aufnahmen passen im 3:2-Rahmen exakt und
   werden gar nicht beschnitten – top ist dort nur Absicherung, falls ein
   Foto später ausgetauscht wird. Bei den übrigen sind die Werte an der
   tatsächlichen Kopfhöhe im Bild gemessen und dürfen nicht Richtung center
   gerundet werden, genau das hat die Köpfe gekappt. 0% = ganz oben. */
.service-card-media--objektschutz   img { object-position: center top; }  /* 3:2 – kein Beschnitt */
.service-card-media--schliessdienst img { object-position: center top; }  /* 3:2 – kein Beschnitt */
.service-card-media--alarmfahrten   img { object-position: center top; }  /* 3:2 – kein Beschnitt */
.service-card-media--ordner         img { object-position: center top; }  /* 4:3, Kopf ab 4 % */
.service-card-media--detektei       img { object-position: center 10%; }  /* Hochformat 2:3, Kopf ab 11 % */
/* Einzelhandel ist die einzige Aufnahme, bei der die Person mittig steht –
   hier würde ein oberer Ausschnitt nur die Ladenfassade zeigen. */
.service-card-media--einzelhandel   img { object-position: center 50%; }
/* Verlauf blendet das Foto in die Kartenfläche */
.service-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,0.15) 0%, rgba(10,10,12,0.1) 45%, var(--bg-2) 100%);
  pointer-events: none;
}
.service-card-media .service-icon-svg {
  position: absolute;
  left: 1.4rem;
  bottom: 1rem;
  z-index: 1;
  margin: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(10,10,12,0.7);
  border: 1px solid rgba(201,168,76,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-card-media .service-icon-svg svg { width: 20px; height: 20px; }
/* Goldene Hover-Linie muss über dem Bild liegen */
.service-card::before { z-index: 2; }
@media (max-width: 640px) {
  /* Nur der Rückfallwert. Wo aspect-ratio greift, bleibt es beim 2:1 von
     oben – sonst würde eine feste Höhe auf breiten Handys wieder in ein
     zu flaches Band und damit in angeschnittene Köpfe zurückfallen. */
  .service-card-media { height: 220px; }
  @supports (aspect-ratio: 3 / 2) {
    .service-card-media { height: auto; }
  }
}
.service-card h4 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--white); transition: color var(--t) var(--ease); }
.service-card:hover h4 { color: var(--gold); }
.service-card p { font-size: 0.84rem; color: var(--white-dim); line-height: 1.7; margin-bottom: 1rem; }
.service-link { font-size: 0.73rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 0.4rem; }
.service-link::after { content: '→'; transition: transform var(--t) var(--ease); }
.service-card:hover .service-link::after { transform: translateX(4px); }

/* ── VALUES / STÄRKEN: 3×3 grid ── */
.values-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
}
.value-card { padding: 1.8rem; border: 1px solid var(--border-sub); border-radius: var(--r-lg); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); }
.value-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.value-icon { margin-bottom: 0.9rem; }
.value-card h3 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 0.5rem; }
.value-card p { font-size: 0.83rem; color: var(--white-dim); line-height: 1.7; }
@media (max-width: 900px) { .values-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .values-cards { grid-template-columns: 1fr; } }

/* reviews – see canonical block in #reviews section */

/* ── SERVICE FULL PAGE: image sizing ── */
.service-full-card:nth-child(even) .service-full-text { order: 2; }
.service-full-card:nth-child(even) .service-img-wrap  { order: 1; }
.service-img-wrap { aspect-ratio: 3/2; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--border-sub); }
.service-full-img { width:100%; height:100%; object-fit:cover; object-position:center; filter:brightness(0.85) saturate(0.88); transition:filter 0.5s ease, transform 0.6s ease; }
.service-img-wrap:hover .service-full-img { filter:brightness(0.95) saturate(0.95); transform:scale(1.04); }
@media (max-width: 768px) {
  .service-full-card { grid-template-columns: 1fr !important; gap: 1.5rem; }
  .service-full-card:nth-child(even) .service-full-text,
  .service-full-card:nth-child(even) .service-img-wrap { order: unset; }
}

/* Mobile-CTA im Menü – auf dem Desktop nicht sichtbar */
.nav-mobile-cta { display: none; }

/* ── MOBILE GLOBAL ── */
@media (max-width: 768px) {
  /* Vollbild-Menü. inset + dvh statt vh, damit die ein- und ausfahrende
     Adressleiste in Safari und Chrome auf Android nichts abschneidet. */
  .main-nav {
    display: none;
    position: fixed;
    inset: 0;
    height: 100dvh;
    background: rgba(19,21,30,0.985);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    z-index: 998;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: max(5.5rem, calc(env(safe-area-inset-top) + 4.5rem)) 1.5rem
             max(2rem, env(safe-area-inset-bottom));
  }
  .main-nav.open { display: flex; animation: fadeUp 0.3s var(--ease) both; }

  /* Tap-Ziele mindestens 48px hoch (Android- und iOS-Richtwert) */
  .main-nav > a {
    font-size: 1.2rem;
    width: 100%;
    max-width: 320px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    -webkit-tap-highlight-color: transparent;
  }
  /* Die animierte Unterstreichung stört im Vollbildmenü */
  .main-nav a::after { display: none; }
  .main-nav > a.active { color: var(--gold); }

  .nav-mobile-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    max-width: 320px;
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--border-sub);
  }
  .main-nav .nav-mobile-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    font-size: 0.95rem;
    color: var(--gold);
    -webkit-tap-highlight-color: transparent;
  }
  .main-nav .nav-mobile-cta .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 0.8rem;
  }

  .nav-toggle {
    display: flex;
    z-index: 999;
    width: 46px;
    height: 46px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  /* Menü offen: Kopfzeile darf nicht wegscrollen */
  body.nav-open #site-header { transform: none !important; }

  .header-phone { display:none; }
  .header-cta .btn { display:none; }
  .mobile-sticky-cta { display:none !important; }
  body { padding-bottom:0; }
  .hero-cin-inner { padding:7rem 0 4rem; }
  .wizard-outer { grid-template-columns:1fr; gap:1.5rem; }
  .wizard-left-copy { display:none; }
  .wizard-card { border-radius:var(--r-md); }
  .wizard-field-row { grid-template-columns:1fr !important; gap:0.4rem; }
  .usp-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .form-row { grid-template-columns:1fr; }
  .process-steps { grid-template-columns:1fr 1fr; }
  .process-steps::before { display:none; }
  .image-strip-grid { grid-template-columns:1fr; height:auto; }
  .strip-img-wrap { height:180px; }
  .maps-split { grid-template-columns:1fr; }
  .maps-embed { min-height:260px; }
  .maps-embed iframe { position:static; height:260px; width:100%; }
  .maps-info { padding:2rem 1.2rem; }
  .page-hero { padding:130px 0 50px; }
  .about-intro { grid-template-columns:1fr; }
  .career-intro { grid-template-columns:1fr; }
  .contact-section { grid-template-columns:1fr; }
  .cta-contact-info { flex-direction:column; align-items:center; gap:1rem; }
}
@media (max-width: 480px) {
  .usp-grid { grid-template-columns:1fr; }
  .usp-item { border-right:none; border-bottom:1px solid var(--border-sub); }
  .usp-item:last-child { border-bottom:none; }
  .process-steps { grid-template-columns:1fr; }
  .wizard-field-row { grid-template-columns:1fr !important; }
  .hero-cin-headline { font-size:2.4rem; }
  .trust-badges-grid { grid-template-columns:1fr 1fr !important; }
}

/* ── TEAM GRID ── */
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
@media (max-width:1024px) { .team-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px)  { .team-grid { grid-template-columns:repeat(2,1fr); } }
.team-card { background:var(--bg-3); border:1px solid var(--border-sub); border-radius:var(--r-lg); overflow:hidden; transition:border-color var(--t) var(--ease),transform var(--t) var(--ease); }
.team-card:hover { border-color:var(--border); transform:translateY(-4px); }
/* Portrait sources are 3:4. Matching the container ratio means no crop at
   all, so heads are never cut off. object-position keeps the face safe if a
   future photo has a different ratio. */
.team-portrait { aspect-ratio:3/4; background:var(--bg-4); border-bottom:1px solid var(--border-sub); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.team-portrait img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.team-portrait-placeholder { color:var(--gold); opacity:0.22; }
.team-info { padding:1rem; }
.team-name { font-family:var(--font-display); font-size:0.95rem; color:var(--white); font-weight:600; margin-bottom:0.15rem; }
.team-position { font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-bottom:0.5rem; }
.team-bio { font-size:0.76rem; color:var(--white-dim); line-height:1.6; margin:0; }

/* ── INSTAGRAM ── */
.insta-link { display:inline-flex; flex-direction:column; align-items:center; gap:0.8rem; color:var(--gold); transition:all 0.3s ease; text-decoration:none; }
.insta-link svg { transition:transform 0.35s var(--ease-spring),filter 0.35s ease; }
.insta-link:hover svg { transform:scale(1.12); filter:drop-shadow(0 0 16px rgba(201,168,76,0.6)); }
.insta-link span { font-size:1rem; letter-spacing:0.08em; font-family:var(--font-body); font-weight:500; }

/* ── CTA ── */
#cta-section { padding:5rem 0; text-align:center; background:var(--bg-2); border-top:1px solid var(--border-sub); }
#cta-section::before { display:none; }
.cta-title { font-family:var(--font-display); font-size:clamp(2rem,4vw,3.2rem); font-weight:600; margin-bottom:0.8rem; line-height:1.15; }
.cta-title span { color:var(--gold); font-style:italic; }
.cta-sub { color:var(--white-dim); font-size:0.9rem; margin-bottom:2rem; }
.cta-contact-info { display:none !important; }

/* =============================================
   MOBILE v8 – COMPREHENSIVE FIX
============================================= */

/* ── Reviews: full card on mobile, no overflow ── */
@media (max-width: 768px) {
  .reviews-track-wrapper {
    overflow: hidden;
  }

  .reviews-track {
    padding: 2rem 0;
    width: max-content;
  }

  .review-card {
    min-width: calc(100vw - 4rem) !important;
    max-width: calc(100vw - 4rem) !important;
  }

  .review-card.active {
    transform: scale(1) !important;
  }

  .review-card:not(.active) {
    opacity: 0.5;
    transform: scale(0.96) !important;
  }

  /* Fade overlays narrower on mobile */
  .reviews-track-wrapper::before,
  .reviews-track-wrapper::after { width: 24px; }
}

/* ── Team: 1-column on mobile ── */
@media (max-width: 580px) {
  .team-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Text centering fixes mobile ── */
@media (max-width: 768px) {

  /* Hero text left-aligned is fine, but slogan can wrap */
  .hero-cin-slogan { font-size: 0.92rem; }

  /* Services header: stack cleanly */
  .services-header {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  /* Section titles: no overflow */
  .section-title { font-size: clamp(1.8rem, 6vw, 2.5rem); }

  /* USP numbers */
  .usp-grid {
    grid-template-columns: 1fr 1fr;
  }

  .usp-item {
    padding: 1.2rem;
    border-right: none;
    border-bottom: 1px solid var(--border-sub);
  }

  .usp-item:nth-child(odd) { border-right: 1px solid var(--border-sub); }
  .usp-item:last-child, .usp-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }

  /* Process steps: 2 columns */
  .process-steps { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .process-steps::before { display: none; }

  /* Page hero padding */
  .page-hero { padding: 120px 0 40px; }
  .page-hero h1 { font-size: clamp(2rem, 7vw, 3rem); }

  /* About intro */
  .about-intro { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0; }

  /* Career */
  .career-intro { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0; }
  .career-benefits { grid-template-columns: 1fr; }

  /* Wizard outer */
  .wizard-outer { grid-template-columns: 1fr; gap: 0; }
  .wizard-left-copy { display: none; }
  .wizard-card { border-radius: var(--r-md); }

  /* Contact */
  .contact-section { grid-template-columns: 1fr; gap: 2.5rem; padding: 3rem 0; }

  /* Maps */
  .maps-split { grid-template-columns: 1fr; }
  .maps-embed { min-height: 240px; }
  .maps-embed iframe { position: static !important; height: 240px; width: 100%; }
  .maps-info { padding: 2rem 1.2rem; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 0.8rem; }
  .footer-legal { gap: 1.2rem; }

  /* Image strip */
  .image-strip-grid { grid-template-columns: 1fr; height: auto; }
  .strip-img-wrap { height: 200px; }

  /* Service full cards */
  .service-full-card { grid-template-columns: 1fr !important; gap: 1.5rem; }
  .service-full-card:nth-child(even) .service-full-text { order: 1 !important; }
  .service-full-card:nth-child(even) .service-img-wrap  { order: 2 !important; }
  .service-img-wrap { max-height: 220px; }

  /* CTA */
  .cta-title { font-size: clamp(1.8rem, 6vw, 2.5rem); }
  .cta-actions { flex-direction: column; align-items: center; gap: 0.8rem; }
  .cta-actions .btn { width: 100%; max-width: 300px; justify-content: center; }

  /* Values 3x3 → 1 column on mobile */
  .values-cards { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  /* Single column for everything on very small screens */
  .usp-grid { grid-template-columns: 1fr; }
  .usp-item { border-right: none !important; }
  .process-steps { grid-template-columns: 1fr; }
  .trust-badges-grid { grid-template-columns: 1fr 1fr !important; }
  .hero-cin-headline { font-size: 2.2rem; }
  .team-grid { grid-template-columns: 1fr !important; }
  .services-grid-home { gap: 0.8rem; }
}

/* ── Instagram link: always clickable ── */
#instagram-section {
  position: relative;
  z-index: 1;
}

.insta-link {
  position: relative;
  z-index: 5;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(201,168,76,0.2);
  touch-action: manipulation;
}

/* ── Scrollbar hint for reviews on mobile ── */
@media (max-width: 768px) {
  .reviews-controls { margin-top: 1.5rem; }
}

/* =============================================
   v8 FINAL ADDITIONS
============================================= */

/* ── Wizard intro screen: large logo, clean layout ── */
.wizard-intro-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1rem;
  gap: 1.2rem;
}

.wizard-intro-logo-big {
  height: 110px;
  width: auto;
  object-fit: contain;
  display: block;
  background: transparent;
  filter: drop-shadow(0 0 12px rgba(201,168,76,0.35));
}

.wizard-intro-headline {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.4;
  margin: 0;
}

.wizard-start-btn {
  width: 100%;
  justify-content: center;
  padding: 0.85rem 1.5rem !important;
  margin-top: 0.5rem;
}

/* Wizard success: big logo, no checkmark */
.wizard-success { text-align: center; padding: 2rem 1rem !important; }
.wizard-success .success-icon { display: none !important; }
.wizard-success-logo { height: 110px !important; width: auto; margin: 0 auto 1.2rem !important; object-fit: contain; background: transparent; filter: drop-shadow(0 0 12px rgba(201,168,76,0.35)); }
.wizard-success h4 { font-family: var(--font-display); font-size: 1.35rem; color: var(--white); margin-bottom: 0.5rem; }
.wizard-success p { font-size: 0.84rem; color: var(--white-dim); }

/* ── Instagram section: clean, fully clickable ── */
#instagram-section {
  padding: 5rem 0;
  background: var(--bg-3);
  border-top: 1px solid var(--border-sub);
  border-bottom: 1px solid var(--border-sub);
  text-align: center;
}

.insta-heading {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 2rem;
  line-height: 1.2;
}

.insta-heading em { color: var(--gold); font-style: italic; }

.insta-cta-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  color: var(--gold);
  text-decoration: none;
  cursor: pointer;
  /* Critical for mobile tap */
  -webkit-tap-highlight-color: rgba(201,168,76,0.15);
  touch-action: manipulation;
  user-select: none;
}

.insta-cta-link svg {
  display: block;
  transition: transform 0.35s var(--ease-spring), filter 0.35s ease;
}

.insta-cta-link:hover svg,
.insta-cta-link:active svg {
  transform: scale(1.12);
  filter: drop-shadow(0 0 18px rgba(201,168,76,0.65));
}

.insta-cta-link span {
  font-size: 1.05rem;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* reviews – see canonical block in #reviews section */
/* Team banner: tall enough that the group photo isn't cropped through
   the subjects' heads. */

/* ── Services: show only 6 on homepage, hide 7th ── */
.services-grid-home .service-card:nth-child(n+8) { display: none; }

/* ── Instagram section ── */
#instagram-section { padding: 5rem 0; background: var(--bg-3); border-top: 1px solid var(--border-sub); border-bottom: 1px solid var(--border-sub); }
.insta-heading { font-family: var(--font-display); font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 600; color: var(--white); margin-bottom: 2rem; line-height: 1.2; }
.insta-heading em { color: var(--gold); font-style: italic; }
.insta-cta-link { display: inline-flex; flex-direction: column; align-items: center; gap: 0.75rem; color: var(--gold); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: rgba(201,168,76,0.15); touch-action: manipulation; user-select: none; position: relative; z-index: 2; padding: 1.25rem 2rem; border-radius: var(--r-md); }
.insta-cta-link svg { display: block; transition: transform 0.35s ease, filter 0.35s ease; }
.insta-cta-link:hover svg, .insta-cta-link:active svg { transform: scale(1.12); filter: drop-shadow(0 0 18px rgba(201,168,76,0.65)); }
.insta-cta-link span { font-size: 1.05rem; font-family: var(--font-body); font-weight: 500; letter-spacing: 0.06em; }

/* =============================================
   CLICK-TARGET HARDENING (external links)
   Icons here are stroke-only SVGs (fill="none"). With the default
   pointer-events:visiblePainted ONLY the thin stroke lines are hit-testable,
   so a tap in the middle of an icon lands on nothing and the link appears
   dead. Routing icon clicks to the parent <a> makes the whole icon clickable.
   Applies to every icon that sits inside a link or button.
============================================= */
a svg,
button svg,
.btn svg,
.insta-cta-link svg,
.social-link svg,
.maps-open-btn svg { pointer-events: none; }

/* Keep the interactive elements above any decorative sibling layer, so a
   stray overlay can never swallow the click. */
.insta-cta-link,
.maps-open-btn,
.social-link { position: relative; z-index: 3; }

.maps-open-btn {
  margin-top: 2rem;
  display: inline-flex;
  font-size: 0.75rem;
}

/* Visible keyboard focus for the external links */
.insta-cta-link:focus-visible,
.maps-open-btn:focus-visible,
.social-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* The cookie banner is fixed to the bottom at z-index 9999, so whatever it
   covers becomes unclickable until it is dismissed. Measured at 160px tall on
   a 390px-wide phone, which swallowed taps on the footer's Google-Maps button.
   Keep it compact so it covers as little of the viewport as possible. */
#cookie-banner { max-height: 40vh; overflow-y: auto; }
#cookie-banner p { margin: 0; }

@media (max-width: 768px) {
  #cookie-banner { padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom)) !important; }
  #cookie-banner > div { gap: 0.6rem !important; flex-wrap: nowrap !important; align-items: center !important; }
  #cookie-banner p { font-size: 0.7rem !important; line-height: 1.45 !important; }
  #cookie-accept { padding: 0.5rem 0.9rem !important; font-size: 0.68rem !important; white-space: nowrap; }
}



/* ── Services subpage: tighter, more breathing room ── */
.services-full { padding: 3rem 0; }

.service-full-card {
  gap: 2.5rem !important;
  padding: 3rem 0 !important;
}

.service-full-card .service-img-wrap {
  aspect-ratio: 4/3 !important;
  max-width: 420px;
  margin-left: auto;
}

.service-full-card:nth-child(even) .service-img-wrap {
  margin-left: 0;
  margin-right: auto;
}

.service-full-text h2 {
  font-size: 1.7rem !important;
  margin-bottom: 0.7rem !important;
}

.service-full-text p { font-size: 0.86rem; margin-bottom: 0.9rem; }
.service-full-text ul { margin-bottom: 1.4rem; }
.service-full-text ul li { font-size: 0.84rem; }

@media (max-width: 900px) {
  .service-full-card { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .service-full-card .service-img-wrap,
  .service-full-card:nth-child(even) .service-img-wrap { max-width: 100%; margin: 0; }
}

/* =============================================
   FINAL PASS – Featured service, typography, motion
============================================= */

/* ── Homepage services: 1 featured card + balanced 6-card grid ──
   Solves the "seven cards don't make a clean grid" problem by
   editorially separating the core service instead of leaving an
   orphaned 7th card under a 2x3 / 3x2 grid. */
.service-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg-2);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 3rem;
  transition: border-color var(--t) var(--ease);
}
.service-featured:hover { border-color: var(--border); }
.service-featured > * { min-width: 0; }

.service-featured-media { position: relative; min-height: 320px; overflow: hidden; }
.service-featured-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Der Kopf beginnt in diesem Foto bei 1,5 % Bildhöhe. Mit den früheren
     30 % wurde er einspaltig auf dem Handy oben angeschnitten. */
  object-position: center top;
  filter: brightness(0.82) saturate(0.88);
  transition: filter 0.5s ease, transform 0.6s ease;
}
.service-featured:hover .service-featured-media img {
  filter: brightness(0.92) saturate(0.95);
  transform: scale(1.03);
}

.service-featured-body {
  padding: 2.6rem 2.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-featured-tag {
  display: inline-flex;
  width: fit-content;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid var(--border);
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-xl);
  margin-bottom: 1.1rem;
}

.service-featured-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.3vw, 2.1rem);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.8rem;
  line-height: 1.15;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.service-featured-body p {
  font-size: 0.92rem;
  color: var(--white-dim);
  line-height: 1.8;
  margin-bottom: 1.3rem;
  max-width: 46ch;
}

.service-featured-points { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.7rem; }
.service-featured-points li { display: flex; align-items: center; gap: 0.65rem; font-size: 0.85rem; color: var(--white-dim); }
.service-featured-points li::before { content: ''; width: 16px; height: 1px; background: var(--gold); flex-shrink: 0; }
.service-link-stretch { margin-top: 0.2rem; }

.services-subhead {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-faint);
  font-weight: 500;
  margin: 0 0 1.4rem;
}

@media (max-width: 768px) {
  .service-featured { grid-template-columns: 1fr; margin-bottom: 2.2rem; }
  .service-featured-media { min-height: 220px; }
  .service-featured-body { padding: 1.8rem 1.6rem 2rem; }
}

/* ── Small helpers used by the reordered homepage wizard section ── */
.section-title-sm { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.wizard-lede { color: var(--white-dim); font-size: 0.9rem; line-height: 1.85; max-width: 340px; }

/* ── Typography: mobile legibility floor for uppercase micro-labels ── */
@media (max-width: 640px) {
  .wizard-field label,
  .wiz-opt-label,
  .form-group label { font-size: 0.68rem !important; }
}

/* =============================================
   ACCESSIBILITY – REDUCED MOTION
   Respect the user's OS-level motion preference: near-instant
   transitions/animations, content still reaches its final state.
============================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
  .hero-bg-img { transform: none !important; }
  .scroll-hint { animation: none !important; opacity: 0.5 !important; }
}

/* =============================================
   EINWILLIGUNGS-DIALOG & GESPERRTE EINBETTUNGEN
============================================= */
.consent-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(6, 7, 10, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.25s var(--ease) both;
}
.consent-overlay[hidden] { display: none; }
body.consent-open { overflow: hidden; }

.consent-modal {
  width: 100%;
  max-width: 540px;
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2.2rem 2rem;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  animation: fadeUp 0.35s var(--ease) both;
}
.consent-logo { height: 54px; width: auto; object-fit: contain; margin: 0 auto 1rem; display: block; }
.consent-modal h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--white);
}
.consent-line { margin: 0.9rem auto 1.3rem; }
.consent-text p {
  font-size: 0.83rem;
  line-height: 1.75;
  color: var(--white-dim);
  margin-bottom: 0.8rem;
  text-align: left;
}
.consent-text strong { color: var(--white); font-weight: 500; }
.consent-note { font-size: 0.76rem !important; color: var(--white-dim); opacity: 0.85; }
.consent-text a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }

.consent-actions {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.5rem;
}
.consent-actions .btn { flex: 1; justify-content: center; min-height: 48px; }

@media (max-width: 560px) {
  .consent-modal { padding: 1.7rem 1.25rem; }
  .consent-modal h2 { font-size: 1.35rem; }
  .consent-actions { flex-direction: column; }
}

/* Platzhalter anstelle einer noch nicht freigegebenen Einbettung */
.consent-placeholder {
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--gold);
  background:
    repeating-linear-gradient(45deg, rgba(201,168,76,0.028) 0 12px, transparent 12px 24px),
    var(--bg-3);
  border: 1px solid var(--border-sub);
}
.consent-placeholder-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--white);
  margin-top: 0.4rem;
}
.consent-placeholder-text {
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--white-dim);
  max-width: 340px;
  margin-bottom: 0.9rem;
}
.consent-placeholder-btn { min-height: 44px; }

/* Der Link im Footer soll wie die übrigen Rechtstexte wirken */
.footer-legal .consent-reopen { cursor: pointer; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Der Platzhalter übernimmt exakt die Geometrie des späteren iframes,
   damit beim Zuschalten der Karte nichts springt. */
.maps-embed .consent-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 900px) {
  .maps-embed .consent-placeholder { position: static; height: 320px; min-height: 320px; }
}
@media (max-width: 768px) {
  .maps-embed .consent-placeholder { position: static; height: 260px; min-height: 260px; }
}
@media (max-width: 480px) {
  .maps-embed .consent-placeholder { position: static !important; height: 240px; min-height: 240px; }
}
/* Honeypot – für Menschen unsichtbar, für Bots aber im DOM auffindbar.
   Bewusst nicht display:none, da manche Bots solche Felder überspringen. */
.pars-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}