/* ═══════════════════════════════════════════
   DESIGN TOKENS — from Brand Guidelines PDF
   ═══════════════════════════════════════════ */
:root {
  --bg: #0c1222;
  --bg-deep: #080e1a;
  --blue: #78c0dd;
  --blue-hover: #8acde6;
  --green: #34d399;
  --green-hover: #4ade9f;
  --green-dim: rgba(52, 211, 153, 0.12);
  --accent-warm: #e8935a;
  --accent-warm-hover: #f0a050;
  --accent-warm-dim: rgba(232, 147, 90, 0.12);
  --gray: #dfdfdf;
  --gray-hover: #e8e8e8;
  --dark: #141c2e;
  --white: #ffffff;
  --text-on-dark: #e8edf3;
  --text-muted: rgba(232, 237, 243, 0.70);
  --text-on-blue: #0c1222;
  --text-on-gray: #1e1e1e;
  --text-on-warm: #1a0e05;
  --font-display: 'Outfit', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --radius: 20px;
  --radius-sm: 12px;
  --radius-pill: 100px;
  --max-w: 1140px;
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════
   RESET & BASE
   ═══════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-on-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
img { max-width: 100%; height: auto; display: block; }
/* Die <picture>-Huellen aus der Bild-Pipeline (scripts/rewrite-picture-tags.mjs)
   haben keine eigene Darstellung. Ohne diese Regel traeten sie in .probe-shots
   (flex) und .gallery-thumb (aspect-ratio, Bild auf 100% Hoehe) als Box an die
   Stelle des <img>, dessen Groessenangaben dann ins Leere liefen.
   display:contents nimmt die Huelle aus dem Boxbaum, das <img> bleibt direktes
   Kind seines Containers. Bewusst an der Klasse festgemacht statt am Element:
   ein spaeteres <picture> ausserhalb dieser Pipeline soll weiter eine eigene
   Box haben duerfen. */
.bild-satz { display: contents; }
a { color: var(--blue); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }
/* Grundmass fuer Sektionen: 9rem laut STYLEGUIDE.md (Sektions-Padding Desktop).
   Am 26.08. kurz auf 6rem gesetzt -- das widersprach dem Styleguide und ist
   zurueckgenommen. Die Vereinheitlichung bleibt: Inline-Paddings sind raus,
   dieser eine Wert gilt, Ausnahmen stehen als Klassen darunter. */
section { padding: 9rem 0; position: relative; z-index: 2; }

/* Sektion, die bewusst eng an die vorhergehende anschliesst (Garantie-Block). */
.sektion-anschluss { padding: 0 0 1rem; }

/* Skip link */
.skip-link {
  position: absolute; top: -100%; left: 1rem;
  background: var(--accent-warm); color: var(--text-on-warm);
  padding: 0.5rem 1.2rem; border-radius: var(--radius-sm);
  font-weight: 600; z-index: 200;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* Global focus-visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent-warm);
  outline-offset: 3px;
}

/* ═══════════════════
   NAVIGATION
   ═══════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0.75rem 0;
  transition: background var(--transition);
}
nav.scrolled {
  background: rgba(12, 18, 34, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(120,192,221,0.08);
}
.nav-inner {
  display: flex; align-items: center; gap: 1rem;
}
.logo { margin-right: auto; }
.logo {
  display: inline-flex;
  text-decoration: none;
  line-height: 1;
}
.logo-img {
  height: 2.2rem;
  width: auto;
}
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a {
  color: var(--text-muted); font-size: 0.85rem; font-weight: 500;
  transition: color var(--transition);
}
.nav-links a:hover { color: var(--white); }
.nav-cta {
  background: var(--accent-warm) !important; color: var(--text-on-warm) !important;
  padding: 0.55rem 1.4rem; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 0.82rem !important;
  transition: background var(--transition) !important;
}
.nav-cta:hover { background: var(--accent-warm-hover) !important; }

/* Nav dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.nav-dropdown-trigger::after {
  content: ''; display: inline-block;
  width: 0; height: 0;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 3.5px solid currentColor;
  transition: transform 0.2s;
}
.nav-dropdown:hover .nav-dropdown-trigger::after { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 0.75rem); left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 210px;
  background: rgba(12, 18, 34, 0.96);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(120,192,221,0.12);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu::before {
  content: ''; position: absolute;
  top: -0.75rem; left: 0; right: 0; height: 0.75rem;
}
.nav-dropdown-menu a {
  display: block; padding: 0.55rem 1.2rem;
  font-size: 0.8rem; white-space: nowrap;
}
.nav-dropdown-menu a:hover {
  background: rgba(120,192,221,0.08); color: var(--white);
}

/* Mobile burger */
.burger { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.burger span {
  display: block; width: 22px; height: 2px;
  background: var(--white); margin: 5px 0;
  transition: all var(--transition);
}

/* ═══════════════════
   CARD SYSTEM
   — from Brand Guidelines
   ═══════════════════ */
.card-blue {
  background: var(--blue);
  color: var(--text-on-blue);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
}
.card-gray {
  background: var(--gray);
  color: var(--text-on-gray);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius);
}
.card-dark {
  background: var(--dark);
  color: var(--white);
  border: 1px solid rgba(120,192,221,0.12);
  border-radius: var(--radius);
}
.card-glass {
  background: rgba(120,192,221,0.04);
  border: 1px solid rgba(120,192,221,0.10);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
}
.card-outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
}

/* ═══════════════════
   SECTION TAG / LABEL
   ═══════════════════ */
.tag {
  font-family: var(--font-body);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--blue); margin-bottom: 1rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.tag::before { content: '✦'; font-size: 0.7rem; }

/* Card divider line (from PDF service cards) */
.card-divider {
  height: 1px; width: 40px; margin: 1rem 0;
}
.card-blue .card-divider { background: rgba(12,18,34,0.2); }
/* Override accent colors on blue background for contrast */
.card-blue em,
.card-blue strong,
.card-blue a:not(.btn-primary):not(.nav-cta):not(.price-cta) {
  color: var(--dark);
}
.card-gray .card-divider { background: rgba(30,30,30,0.15); }
.card-dark .card-divider { background: rgba(120,192,221,0.2); }
.card-glass .card-divider { background: rgba(120,192,221,0.15); }
.card-outline .card-divider { background: rgba(255,255,255,0.08); }

/* ═══════════════════════════
   HERO
   ═══════════════════════════ */
/* Höhe nach Inhalt statt 100vh (Website-Check Punkt 10, 16.10.2026): unter dem Inhalt
   blieben bis zu 120 px leer, die nächste Sektion darf auf großen Schirmen anschneiden. */
.hero {
  min-height: auto;
  display: flex; align-items: center;
  padding-top: 6rem; padding-bottom: 2rem;
  position: relative; overflow: hidden;
}
.hero-matrix-canvas, .matrix-canvas {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  opacity: 0.25;
}
.process, .pricing, .about { position: relative; overflow: hidden; }
.process .container, .pricing .container, .about .container { position: relative; z-index: 1; }
.hero .container { position: relative; z-index: 2; }
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.hero-tag { margin-bottom: 1.5rem; }
.hero h1 {
  font-size: clamp(2.8rem, 5.5vw, 4.5rem);
  margin-bottom: 1.5rem;
}
.hero h1 .fw-800 { font-weight: 800; display: block; }
.hero h1 .fw-300 { font-weight: 300; display: block; color: var(--blue); }
/* Alien-style line reveal */
.hero h1 .alien-line {
  display: block;
  overflow: hidden;
}
.hero h1 .alien-line > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  animation: alien-slide 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes alien-slide {
  0% {
    transform: translateY(110%);
    opacity: 0;
    text-shadow: 0 0 0 transparent;
  }
  30% {
    opacity: 1;
    text-shadow: 0 0 25px rgba(120,192,221,0.3);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    text-shadow: 0 0 0 transparent;
  }
}
.hero .hero-sub,
.hero .hero-btns {
  opacity: 0;
  animation: fade-up 0.8s ease forwards;
}
/* Handlungsaufruf sofort sichtbar, vorher erst nach 1,2 s (Website-Check Punkt 10) */
.hero .hero-sub { animation-delay: 0.3s; }
.hero .hero-btns { animation: none; opacity: 1; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-sub {
  font-size: 0.95rem; color: var(--text-muted);
  line-height: 1.7; max-width: 440px; margin-bottom: 2rem;
}
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--accent-warm); color: var(--text-on-warm);
  padding: 0.8rem 2rem; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 700; font-size: 0.88rem;
  border: none; cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.btn-primary:hover { background: var(--accent-warm-hover); transform: translateY(-1px); }
.btn-outline {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: transparent; color: var(--white);
  padding: 0.8rem 2rem; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 600; font-size: 0.88rem;
  border: 1px solid rgba(255,255,255,0.15); cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }

/* Hero right — glass visual with floating stat chips */
.hero-visual {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-height: 420px;
}
.hero-glass-obj {
  width: 260px; height: 260px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    rgba(120,192,221,0.14) 0%,
    rgba(120,192,221,0.04) 40%,
    rgba(255,255,255,0.06) 60%,
    rgba(120,192,221,0.10) 100%
  );
  border: 1px solid rgba(120,192,221,0.12);
  position: relative;
  animation: float 12s ease-in-out infinite, portrait-pulse 5s ease-in-out infinite;
  display: flex; align-items: center; justify-content: center;
}
.hero-glass-obj::before {
  content: '';
  width: 320px; height: 320px;
  border-radius: 50%;
  border: 1px dashed rgba(120,192,221,0.10);
  position: absolute;
  animation: spin-slow 40s linear infinite;
}
.hero-glass-obj::after {
  content: '';
  width: 380px; height: 380px;
  border-radius: 50%;
  border: 1px solid rgba(120,192,221,0.05);
  position: absolute;
  animation: spin-slow 60s linear infinite reverse;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes portrait-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(120,192,221,0); border-color: rgba(120,192,221,0.12); }
  50% { box-shadow: 0 0 30px 6px rgba(120,192,221,0.12); border-color: rgba(120,192,221,0.25); }
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}
.hero-portrait {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  border-radius: 50%;
  filter: brightness(0.95) contrast(1.05);
  transition: filter var(--transition);
}
.hero-visual:hover .hero-portrait {
  filter: brightness(0.95) contrast(1.1);
}
.hero-visual:hover .hero-glass-obj::before {
  border-color: rgba(120,192,221,0.25);
  box-shadow: 0 0 30px rgba(120,192,221,0.08);
}
.hero-visual:hover .hero-glass-obj::after {
  border-color: rgba(120,192,221,0.15);
  box-shadow: 0 0 40px rgba(120,192,221,0.06);
}
.hero-visual:hover .hero-glass-obj {
  border-color: rgba(120,192,221,0.25);
  box-shadow: 0 0 60px rgba(120,192,221,0.12);
}

/* Floating stat chips */
.hero-stat-chip {
  position: absolute;
  background: rgba(12,18,34,0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(120,192,221,0.15);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1.1rem;
  display: flex; align-items: center; gap: 0.65rem;
  animation: float-chip 8s ease-in-out infinite, chip-pulse 4s ease-in-out infinite;
  z-index: 3;
  cursor: default;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.hero-stat-chip:hover {
  transform: translateY(-4px) scale(1.05);
  background: rgba(120,192,221,0.12);
  border-color: rgba(120,192,221,0.40);
  box-shadow: 0 0 24px 4px rgba(120,192,221,0.20);
  animation-play-state: paused, paused;
}
.hero-stat-chip:hover .stat-chip-icon {
  background: rgba(120,192,221,0.25);
}
.hero-stat-chip:nth-child(2) { animation-delay: -1.5s, -0.8s; }
.hero-stat-chip:nth-child(3) { animation-delay: -3s, -1.6s; }
.hero-stat-chip:nth-child(4) { animation-delay: -5s, -2.4s; }
.hero-stat-chip:nth-child(5) { animation-delay: -6.5s, -3.2s; }
@keyframes float-chip {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes chip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(120,192,221,0); border-color: rgba(120,192,221,0.10); }
  50% { box-shadow: 0 0 18px 3px rgba(120,192,221,0.15); border-color: rgba(120,192,221,0.30); }
}
/* Chip color variants — blue & gray from design tokens */
.chip-blue { border-color: rgba(120,192,221,0.20); }
.chip-gray { border-color: rgba(223,223,223,0.12); }
.chip-1 { top: 0; right: -20px; }
.chip-2 { top: 45%; right: -55px; }
.chip-3 { bottom: -15px; right: 30px; }
/* Chips 4 und 5 stehen links im Visual-Bereich. Negative left-Werte zogen sie
   frueher 30 px bzw. 15 px ueber die Spaltenkante in den 64-px-Gap hinein --
   effektiv blieben nur 34 px Trennung zum Fliesstext (gemessen 26.08.2026).
   Jetzt bleiben sie innerhalb ihrer Spalte, der Gap wirkt in voller Breite. */
.chip-4 { bottom: 50px; left: 0; }
.chip-5 { top: 15px; left: 16px; }
.stat-chip-icon {
  width: 2.2rem; height: 2.2rem;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; flex-shrink: 0;
}
.chip-blue .stat-chip-icon { background: rgba(120,192,221,0.15); }
.chip-gray .stat-chip-icon { background: rgba(223,223,223,0.08); }
.stat-chip-val {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 800;
  color: var(--white); line-height: 1;
}
.stat-chip-label {
  font-size: 0.75rem; color: var(--text-muted);
  letter-spacing: 0.5px; margin-top: 2px;
}

/* Stats pill bar at bottom of hero */
.hero-trust {
  margin-top: 4rem;
  grid-column: 1 / -1;
}
.trust-bar {
  display: flex; align-items: center; gap: 2rem;
  padding: 1rem 2rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(120,192,221,0.10);
  background: rgba(120,192,221,0.03);
  width: fit-content;
  opacity: 0;
  animation: flicker-on 1.2s steps(1, end) 1.5s forwards;
}
@keyframes border-rotate {
  to { --border-angle: 360deg; }
}
@keyframes flicker-on {
  0%   { opacity: 0; }
  8%   { opacity: 0.7; box-shadow: 0 0 12px rgba(120,192,221,0.15); }
  12%  { opacity: 0; }
  20%  { opacity: 0.5; box-shadow: 0 0 8px rgba(120,192,221,0.10); }
  24%  { opacity: 0; }
  36%  { opacity: 0.8; box-shadow: 0 0 15px rgba(120,192,221,0.20); }
  42%  { opacity: 0.2; }
  48%  { opacity: 0.9; box-shadow: 0 0 18px rgba(120,192,221,0.25); }
  52%  { opacity: 0.3; }
  60%  { opacity: 1; box-shadow: 0 0 20px rgba(120,192,221,0.20); }
  80%  { opacity: 1; box-shadow: 0 0 10px rgba(120,192,221,0.10); }
  100% { opacity: 1; box-shadow: 0 0 0 transparent; }
}
.trust-badge {
  background: var(--blue); color: var(--dark);
  padding: 0.5rem 1.25rem; border-radius: var(--radius-pill);
  font-size: 0.75rem; font-weight: 700;
  white-space: nowrap;
  display: flex; align-items: center; gap: 0.4rem;
}
.trust-badge-logo-img {
  height: 18px; width: auto; display: block;
  filter: brightness(0);
}
.trust-item {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; color: var(--text-muted); white-space: nowrap;
  cursor: default;
  transition: color 0.3s ease;
}
.trust-item:hover { color: var(--white); }
.trust-item-icon {
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%; display: flex;
  align-items: center; justify-content: center;
  font-size: 0.7rem;
  background: rgba(120,192,221,0.08);
  border: 1px solid rgba(120,192,221,0.12);
  transition: all 0.3s ease;
}
.trust-item:hover .trust-item-icon {
  background: rgba(120,192,221,0.20);
  border-color: rgba(120,192,221,0.35);
  box-shadow: 0 0 12px rgba(120,192,221,0.25);
  transform: scale(1.15);
}

/* ═══════════════════════════
   PROBLEM / SOLUTION
   ═══════════════════════════ */
.problem { background: var(--bg-deep); }
.problem-layout {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 4rem;
  align-items: start;
}
.problem h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  margin-bottom: 1rem;
}
.problem h2 .fw-300 { font-weight: 300; color: var(--blue); }
.problem-sub {
  font-size: 0.95rem; color: var(--text-muted); line-height: 1.7;
}
.problem-cards { display: flex; flex-direction: column; gap: 0.5rem; }
.problem-card {
  padding: 1rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  border-left: 2px solid rgba(120,192,221,0.25);
  transition: border-color 0.3s ease;
}
.problem-card:hover {
  border-left-color: var(--blue);
}
.problem-card .p-icon {
  width: 2rem; height: 2rem; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
  color: var(--blue);
  transition: all 0.3s ease;
}
.problem-card:hover .p-icon {
  transform: scale(1.15);
}
/* Unified SVG icon styling */
.p-icon svg, .svc-icon svg, .cd-icon svg, .about-hl-icon svg, .trust-item-icon svg {
  flex-shrink: 0;
}
.problem-card p { font-size: 0.9rem; line-height: 1.7; color: var(--text-muted); }

/* Solution card */
.solution-card {
  margin-top: 3rem;
  padding: 2.5rem;
}
.solution-card h3 {
  font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 800;
  margin-bottom: 0.5rem;
}
.card-blue.solution-card h3 { color: var(--dark); }
.solution-card p { font-size: 0.9rem; line-height: 1.7; }
.card-blue.solution-card p { color: rgba(12,18,34,0.7); }

/* ═══════════════════════════
   PROCESS
   ═══════════════════════════ */
.process-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 5rem;
  align-items: end;
}
.process h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
}
.process h2 .fw-300 { font-weight: 300; color: var(--blue); }
.process-sub {
  font-size: 0.95rem; color: var(--text-muted); line-height: 1.7;
}
.process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2.5rem;
}
.step-card {
  padding: 2rem 1.5rem;
  border-top: 2px solid rgba(120,192,221,0.15);
  transition: border-color 0.3s ease;
  cursor: default;
}
.step-card:hover {
  border-top-color: var(--blue);
}
.step-num {
  font-family: var(--font-display);
  font-size: 3.5rem; font-weight: 800;
  margin-bottom: 1.25rem; line-height: 1;
  color: var(--blue);
  transition: opacity 0.3s ease;
}
.step-card:hover .step-num {
  opacity: 0.7;
}
.step-card h3,
.fehlerseite-wege .step-card h2 {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--white);
}
.step-card p {
  font-size: 0.9rem; line-height: 1.7;
  color: var(--text-muted);
}
/* Icon variant (Preise Kostenfaktoren) */
.step-num-icon {
  font-size: 1.8rem; margin-bottom: 1rem;
}
/* Stat counter variant (Über mich Stats) */
.stat-card { padding: 2rem 1rem; text-align: center; }
.stat-card .step-num { font-size: 2.5rem; color: var(--blue); margin-bottom: 0.3rem; }
.stat-card h3 { font-size: 1rem; margin-bottom: 0; }

/* Factors grid — 4 cols on pricing page */
.factors-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .factors-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .factors-grid { grid-template-columns: 1fr; } }

/* Branch links grid — 3 cols, clickable cards */
.branch-links-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.branch-links-grid .step-card { transition: border-color 0.2s, box-shadow 0.2s; }
.branch-links-grid .step-card:hover { border-color: rgba(120,192,221,0.35); box-shadow: 0 0 24px rgba(120,192,221,0.1); }
@media (max-width: 900px) { .branch-links-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .branch-links-grid { grid-template-columns: 1fr; } }

/* 404-Seite: vier Wege zurück (Website-Check Punkt 8, 16.10.2026) */
.fehlerseite-wege { grid-template-columns: repeat(4, 1fr); margin-top: 2.5rem; }
.fehlerseite-cta { margin-top: 2rem; }
.fehlerseite .page-hero-content p + p { margin-top: 0.9rem; }
@media (max-width: 900px) { .process-grid.fehlerseite-wege { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .process-grid.fehlerseite-wege { grid-template-columns: 1fr; } }

/* ═══════════════════════════
   SERVICES
   ═══════════════════════════ */
.services { background: var(--bg-deep); }
.services-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4.5rem;
  align-items: end;
}
.services h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
}
.services h2 .fw-300 { font-weight: 300; }
.services-sub {
  font-size: 0.95rem; color: var(--text-muted); line-height: 1.7;
}
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.5rem;
}
/* .probe (Arbeitsproben-Karten) teilt sich absichtlich den Leuchtfeuer-Effekt
   mit .svc-card-wrap (Rahmen, Hover-Transform, rotierender Rand) -- eine
   Quelle statt Kopie, siehe .probe-Regeln weiter unten im Abschnitt
   ARBEITSPROBEN fuer die kartenspezifischen Werte (Border, Hintergrund,
   Padding). display:flex bleibt bewusst svc-card-wrap-exklusiv, .probe
   braucht die vertikale Blockanordnung seiner Kinder (Bilder + Caption). */
.svc-card-wrap,
.probe {
  position: relative;
  border-radius: var(--radius);
  transition: transform var(--transition);
}
.svc-card-wrap {
  display: flex;
}
.svc-card-wrap:hover,
.probe:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 0 18px rgba(120,192,221,0.15));
}
.svc-card-wrap::before,
.probe::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 2.5px;
  background: conic-gradient(from var(--border-angle), transparent 20%, rgba(120,192,221,0.35) 30%, rgba(120,192,221,0.9) 35%, rgba(120,192,221,0.35) 40%, transparent 50%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: border-rotate 4s linear infinite;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 2;
}
.svc-card-wrap:hover::before,
.probe:hover::before { opacity: 1; }
.svc-card {
  padding: 2rem;
  flex: 1;
  position: relative;
  z-index: 1;
}
.svc-icon {
  width: 3rem; height: 3rem; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: 1.25rem;
  transition: all 0.3s ease;
}
.card-blue .svc-icon { background: rgba(12,18,34,0.10); color: #0c1222; }
.card-blue .svc-card:hover .svc-icon,
.card-blue.svc-card:hover .svc-icon {
  background: rgba(12,18,34,0.18);
  transform: scale(1.15);
}
.card-glass .svc-icon { background: rgba(120,192,221,0.10); color: #78c0dd; border: 1px solid rgba(120,192,221,0.12); }
.card-glass.svc-card:hover .svc-icon {
  background: rgba(120,192,221,0.20);
  border-color: rgba(120,192,221,0.35);
  box-shadow: 0 0 12px rgba(120,192,221,0.25);
  transform: scale(1.15);
}
.card-dark .svc-icon { background: rgba(120,192,221,0.12); color: #78c0dd; border: 1px solid rgba(120,192,221,0.10); }
.card-dark.svc-card:hover .svc-icon {
  background: rgba(120,192,221,0.20);
  border-color: rgba(120,192,221,0.35);
  box-shadow: 0 0 12px rgba(120,192,221,0.25);
  transform: scale(1.15);
}
.svc-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 700;
  margin-bottom: 0.25rem;
}
.svc-card p { font-size: 0.9rem; line-height: 1.7; }
.card-blue .svc-card p, .card-blue h3 { color: var(--text-on-blue); }
.card-blue .svc-card p { color: rgba(12,18,34,0.65); }
.card-glass .svc-card p { color: rgba(255,255,255,0.55); }
.card-glass .svc-card h3 { color: var(--white); }
.card-dark .svc-card p { color: rgba(255,255,255,0.55); }
/* Karten, die selbst ein <a> sind (/leistungen/): Farbe aus der Karte, nicht aus a {}.
   Vorher stand color:inherit inline am Link -- auf der blauen Karte lief der Text
   damit in Weiss auf Hellblau (1,7:1, Website-Check 08.10.2026). */
a.svc-card { color: inherit; }
a.svc-card.card-blue { color: var(--text-on-blue); }
a.svc-card.card-blue p { color: rgba(12,18,34,0.8); }
a.svc-card.card-glass p, a.svc-card.card-dark p { color: rgba(255,255,255,0.55); }
.card-dark .svc-card h3 { color: var(--white); }
/* Bento layout — classic (tall left card) */
.svc-featured { grid-column: 1; grid-row: 1 / 3; }
.svc-featured .svc-card { display: flex; flex-direction: column; justify-content: center; }
.svc-pos-2 { grid-column: 2; grid-row: 1; }
.svc-pos-3 { grid-column: 3; grid-row: 1; }
.svc-pos-4 { grid-column: 2; grid-row: 2; }
.svc-pos-5 { grid-column: 3; grid-row: 2; }
/* Bento layout — wide card variant */
.svc-wide { grid-column: span 2; }

/* ═══════════════════════════
   PRICING
   ═══════════════════════════ */
.pricing-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4.5rem;
  align-items: end;
}
.pricing h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
}
.pricing h2 .fw-300 { font-weight: 300; color: var(--blue); }
.pricing-sub { font-size: 0.95rem; color: var(--text-muted); line-height: 1.7; }
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}
/* Wrapper for rotating border spotlight */
.price-card-wrap {
  position: relative;
  border-radius: var(--radius);
  display: flex;
  transition: transform var(--transition);
}
.price-card-wrap:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 0 18px rgba(120,192,221,0.15));
}
.price-card-wrap::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 2.5px;
  background: conic-gradient(from var(--border-angle), transparent 20%, rgba(120,192,221,0.35) 30%, rgba(120,192,221,1) 35%, rgba(120,192,221,0.35) 40%, transparent 50%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: border-rotate 4s linear infinite;
  opacity: 0.15;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 2;
}
.price-card-wrap:hover::before { opacity: 1; }
/* Badge on wrapper — out of card flow */
.price-card-wrap.featured .price-badge {
  position: absolute;
  top: -0.55rem;
  left: 1.75rem;
  z-index: 3;
  margin: 0;
}
.price-card {
  padding: 2.25rem 1.75rem;
  display: flex; flex-direction: column;
  flex: 1;
  position: relative;
  z-index: 1;
}
.price-badge {
  display: inline-block;
  background: var(--accent-warm); color: var(--text-on-warm);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 0.35rem 1rem; border-radius: var(--radius-pill);
}
.price-name {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 700;
}
.price-desc {
  font-size: 0.75rem; margin-top: 0.25rem;
  line-height: 1.5;
  min-height: 2.4rem;
}
.card-blue .price-desc { color: rgba(12,18,34,0.55); }
.card-outline .price-desc { color: var(--text-muted); }
.card-dark .price-desc { color: rgba(255,255,255,0.45); }
.price-amount {
  font-family: var(--font-display);
  font-size: 2.8rem; font-weight: 800;
  margin: 1.25rem 0 0.25rem;
  line-height: 1;
}
.price-ab {
  font-size: 1rem;
  font-weight: 400;
  opacity: 0.55;
}
.price-amount span {
  font-size: 0.85rem; font-weight: 400;
}
.card-blue .price-amount { color: var(--dark); }
.card-outline .price-amount { color: var(--white); }
.card-dark .price-amount { color: var(--white); }
.price-note {
  font-size: 0.75rem; margin-bottom: 1.5rem;
}
.card-blue .price-note { color: rgba(12,18,34,0.45); }
.card-outline .price-note { color: rgba(255,255,255,0.35); }
.card-dark .price-note { color: rgba(255,255,255,0.35); }
.price-features {
  list-style: none; display: flex; flex-direction: column; gap: 0.6rem;
  flex: 1; margin-bottom: 1.75rem;
}
.price-features li {
  font-size: 0.8rem; display: flex; align-items: center; gap: 0.5rem;
}
.card-blue .price-features li { color: rgba(12,18,34,0.7); }
.card-outline .price-features li { color: rgba(255,255,255,0.55); }
.card-dark .price-features li { color: rgba(255,255,255,0.55); }
/* Tooltip on feature hover */
.price-features li[data-tip] {
  position: relative; cursor: help;
  transition: color 0.2s ease;
}
.price-features li[data-tip]:hover {
  color: var(--white) !important;
}
.card-blue .price-features li[data-tip]:hover {
  color: var(--dark) !important;
}
.price-features li[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--dark);
  color: var(--text-on-dark);
  font-size: 0.72rem; line-height: 1.45;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(120,192,221,0.15);
  white-space: normal; width: max-content; max-width: 240px;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 20;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.price-features li[data-tip]:hover::after {
  opacity: 1; visibility: visible;
}
/* Arrow */
.price-features li[data-tip]::before {
  content: "";
  position: absolute;
  left: 50%; bottom: calc(100% + 2px);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--dark);
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 21;
}
.price-features li[data-tip]:hover::before {
  opacity: 1; visibility: visible;
}
/* Blue card: lighter tooltip bg for contrast */
.card-blue .price-features li[data-tip]::after {
  background: #1a2436;
}
.card-blue .price-features li[data-tip]::before {
  border-top-color: #1a2436;
}
.check {
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.6rem; flex-shrink: 0;
}
.card-blue .check { background: rgba(12,18,34,0.10); color: var(--dark); }
.card-outline .check { background: rgba(120,192,221,0.12); color: var(--blue); }
.card-dark .check { background: rgba(120,192,221,0.15); color: var(--blue); }
.price-cta {
  display: block; text-align: center;
  padding: 0.75rem; border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 700; font-size: 0.88rem;
  transition: all var(--transition);
  cursor: pointer;
}
.price-cta.on-blue {
  background: var(--dark); color: var(--white);
  border: none;
}
.price-cta.on-blue:hover { background: rgba(20,28,46,0.85); }
.price-cta.on-gray {
  background: transparent; color: var(--dark);
  border: 1px solid rgba(30,30,30,0.2);
}
.price-cta.on-gray:hover { background: rgba(30,30,30,0.05); border-color: rgba(30,30,30,0.4); }
.price-cta.on-dark {
  background: transparent; color: var(--blue);
  border: 1px solid rgba(120,192,221,0.25);
}
.price-cta.on-dark:hover { background: rgba(120,192,221,0.08); border-color: var(--blue); }
/* Context notes below CTA — consistent height so buttons align across cards */
.price-card > .price-cta ~ p { min-height: 3.5rem; }
.pricing-note {
  text-align: left;
  color: rgba(255,255,255,0.6);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: 3rem;
  padding-top: 2rem;
  max-width: 600px;
  position: relative;
}
.pricing-note::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, rgba(120,192,221,0.5), transparent);
}
.pricing-note a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(120,192,221,0.3);
  transition: all var(--transition);
}
.pricing-note a:hover {
  border-color: var(--blue);
  text-shadow: 0 0 12px rgba(120,192,221,0.4);
}

/* ═══════════════════════════════
   PRICE WIZARD (Konfigurator)
   ═══════════════════════════════ */
.wizard-wrap {
  margin: 3rem auto 0;
  background: var(--dark);
  border: 1px solid rgba(120,192,221,0.10);
  border-radius: var(--radius);
  padding: 2.5rem 2.5rem;
}
.wizard-progress {
  display: flex; gap: 0; margin-bottom: 2.5rem; position: relative;
}
.wizard-progress::before {
  content: ''; position: absolute; top: 15px; left: 40px; right: 40px;
  height: 2px; background: rgba(255,255,255,0.06); z-index: 0;
}
.wiz-step-ind {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 0.5rem; position: relative; z-index: 1; cursor: pointer;
}
.wiz-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg); border: 2px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; font-family: var(--font-display);
  transition: all 0.3s;
}
.wiz-step-ind.active .wiz-step-num {
  border-color: var(--blue); background: var(--blue); color: var(--bg);
}
.wiz-step-ind.done .wiz-step-num {
  border-color: var(--green); background: var(--green); color: var(--bg);
}
.wiz-step-label {
  font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.08em; transition: color 0.3s;
}
.wiz-step-ind.active .wiz-step-label { color: var(--blue); }
.wiz-step-ind.done .wiz-step-label { color: var(--green); }

/* Steps */
.wiz-step { display: none; animation: wiz-fadeIn 0.3s ease; }
.wiz-step.active { display: block; }
@keyframes wiz-fadeIn {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}
.wiz-step h3 {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin-bottom: 0.4rem;
}
.wiz-step > p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem; }

/*
   Wizard Typografie-Skala (STYLEGUIDE-konform):
   - Card-Titel:  0.95rem / fw 700  (≈ service-card h3)
   - Body:        0.85rem / fw 400  (≈ problem-card p)
   - Hint/Small:  0.75rem / fw 400  (≈ muted helper)
   - Badge/Micro: 0.6rem  / fw 600  (≈ price-badge)
   - Display/Preis: 1.15rem / fw 800 (≈ price-name)
*/

/* Branche cards */
.branche-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.branche-card {
  padding: 1.15rem; border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-sm);
  cursor: pointer; transition: all 0.2s; text-align: center;
}
.branche-card:hover { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.02); }
.branche-card.active { border-color: var(--blue); background: rgba(120,192,221,0.06); }
.branche-icon { margin-bottom: 0.4rem; color: var(--blue); }
.branche-name { font-size: 0.95rem; font-weight: 700; }
.branche-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }

/* Scope cards */
.scope-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.scope-card {
  padding: 1.15rem; border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-sm);
  cursor: pointer; transition: all 0.2s;
}
.scope-card:hover { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.02); }
.scope-card.active { border-color: var(--blue); background: rgba(120,192,221,0.06); }
.scope-name { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.15rem; }
.scope-detail { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.scope-price { font-size: 1.15rem; font-weight: 800; color: var(--accent-warm); font-family: var(--font-display); }

/* Tech choice */
.tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.5rem; }
.tech-card {
  padding: 1.15rem; border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-sm);
  cursor: pointer; transition: all 0.2s;
}
.tech-card:hover { border-color: rgba(255,255,255,0.15); }
.tech-card.active { border-color: var(--blue); background: rgba(120,192,221,0.06); }
.tech-name { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.15rem; }
.tech-detail { font-size: 0.85rem; color: var(--text-muted); }
.tech-price { font-size: 0.85rem; font-weight: 700; color: var(--blue); margin-top: 0.35rem; }

/* Feature toggles */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.wiz-toggle {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0.85rem; border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px; cursor: pointer; transition: all 0.2s;
  font-size: 0.85rem; position: relative;
}
.wiz-toggle:hover { border-color: rgba(255,255,255,0.12); }
.wiz-toggle.checked { border-color: rgba(120,192,221,0.25); background: rgba(120,192,221,0.04); }
.wiz-toggle input { display: none; }
.wiz-check {
  width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.08);
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.2s; font-size: 0.65rem; color: transparent;
}
.wiz-toggle.checked .wiz-check {
  border-color: var(--green); background: var(--green); color: var(--bg);
}
.wiz-toggle-info { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.wiz-toggle-name {
  display: inline-flex; align-items: center; gap: 0.3rem;
  max-width: 100%; min-width: 0;
  font-weight: 600; font-size: 0.85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wiz-toggle-name > .rec-badge,
.wiz-toggle-name > .incl-badge,
.wiz-toggle-name > .feat-info { flex: 0 0 auto; }
.wiz-toggle-hint { font-size: 0.75rem; color: var(--text-muted); }
.wiz-toggle-price { color: var(--blue); font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.rec-badge {
  font-size: 0.7rem; background: var(--green-dim); color: var(--green);
  padding: 0.12rem 0.45rem; border-radius: 4px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.incl-badge {
  font-size: 0.7rem; background: rgba(120,192,221,0.12); color: var(--blue);
  padding: 0.12rem 0.45rem; border-radius: 4px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.incl-price { color: var(--green); }
.wiz-toggle.included-feature { opacity: 0.85; cursor: default; border-color: rgba(120,192,221,0.2); }
.wiz-toggle.included-feature .feat-info { pointer-events: auto; cursor: pointer; }
.wiz-toggle.included-feature .wiz-check { background: var(--blue); color: var(--bg); border-color: var(--blue); }
.sum-incl { color: var(--text-muted); font-size: 0.78rem; }
.sum-incl span:last-child { color: var(--green); }

/* Tooltip (Fachbegriffe) */
.wiz-tip {
  position: relative; cursor: help;
  border-bottom: 1px dashed rgba(255,255,255,0.3);
}
.wiz-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #1a2436; color: var(--text-on-dark); border: 1px solid rgba(120,192,221,0.2);
  border-radius: 8px; padding: 0.7rem 0.9rem; font-size: 0.85rem; line-height: 1.55;
  width: max-content; max-width: 300px; white-space: normal;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
  z-index: 10; font-weight: 400;
}
.wiz-tip:hover::after, .wiz-tip:focus::after, .wiz-tip.tip-open::after {
  opacity: 1;
}

/* Tech comparison inline */
.tech-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
  margin-top: 0.75rem; margin-bottom: 1.5rem;
}
.tech-compare-col {
  font-size: 0.85rem; color: var(--text-muted); line-height: 1.65;
  padding: 0.85rem 1rem; border-radius: 8px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);
}
.tech-compare-col strong { color: var(--white); font-weight: 700; display: block; margin-bottom: 0.35rem; font-size: 0.95rem; }
.tech-compare-col ul { list-style: none; padding: 0; margin: 0; }
.tech-compare-col ul li { padding-left: 1.1rem; position: relative; margin-top: 0.15rem; }
.tech-compare-col ul li::before { content: '→'; position: absolute; left: 0; color: var(--blue); }
@media (max-width: 600px) { .tech-compare { grid-template-columns: 1fr; } }

/* Feature info icon */
.feat-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; font-size: 0.7rem; line-height: 1;
  color: var(--blue); cursor: pointer;
  border: 1px solid rgba(120,192,221,0.25); border-radius: 50%;
  opacity: 0.7; transition: opacity 0.2s, background 0.2s;
  flex-shrink: 0;
}
.feat-info:hover { opacity: 1; background: rgba(120,192,221,0.1); }

/* Feature lightbox */
.feat-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.feat-lightbox.open { opacity: 1; pointer-events: auto; }
.feat-lightbox-inner {
  background: #1a2436; border: 1px solid rgba(120,192,221,0.15);
  border-radius: var(--radius); padding: 1.75rem; max-width: 520px; width: 90%;
  position: relative;
}
.feat-lightbox-close {
  position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none;
  color: var(--text-muted); cursor: pointer; font-size: 1.25rem; line-height: 1;
}
.feat-lightbox-close:hover { color: var(--white); }
.feat-lightbox-inner h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.5rem; }
.feat-lightbox-inner p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.7; }
.feat-lightbox-inner .feat-preview {
  width: 100%; border-radius: 8px; margin-top: 0.75rem;
  border: 1px solid rgba(255,255,255,0.06);
}

/* Summary step */
/* Wizard result — compact layout */
.sum-result { max-width: 540px; }
.sum-breakdown {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0.75rem 0; margin-bottom: 0;
}
.sum-price-hero {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 1rem;
}
.sum-price-row {
  display: flex; justify-content: space-between; align-items: baseline;
}
.sum-price-label { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }
.sum-price-amount {
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 800;
  color: var(--accent-warm); line-height: 1.1;
}
.sum-price-monthly { font-size: 0.85rem; color: var(--blue); font-weight: 600; }
.sum-mwst {
  background: rgba(232,147,90,0.08);
  border: 1px solid rgba(232,147,90,0.2);
  border-radius: var(--radius-sm);
  padding: 0.65rem 1rem;
  font-size: 0.78rem;
  color: var(--accent-warm);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.sum-line {
  display: flex; justify-content: space-between; font-size: 0.85rem;
  padding: 0.3rem 0;
}
.sum-line span:last-child { color: var(--text-muted); }
.sum-features { margin-bottom: 1.5rem; }
.sum-feat-incl, .sum-feat-addon, .sum-feat-monthly {
  font-size: 0.8rem; color: var(--text-muted); margin: 0.25rem 0; line-height: 1.5;
}
.sum-feat-incl::before { content: '✓ '; color: var(--green); }
.sum-feat-addon::before { content: '+ '; color: var(--blue); }
.sum-feat-monthly::before { content: '↻ '; color: var(--blue); }
.sum-cta-area { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.sum-cta-area .btn-primary {
  display: block; width: 100%; text-align: center;
  font-size: 0.88rem; padding: 0.85rem 1.5rem;
}
.summary-cta-hint { font-size: 0.72rem; color: var(--text-muted); text-align: center; margin-top: -0.25rem; }
.summary-cta-divider {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.72rem; color: var(--text-muted);
  margin: 0.25rem 0;
}
.summary-cta-divider::before, .summary-cta-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.08);
}
.summary-cta-alt {
  display: block; width: 100%; text-align: center;
  font-size: 0.82rem; color: var(--blue);
  padding: 0.65rem 1rem;
  border: 1px solid rgba(120,192,221,0.15);
  border-radius: var(--radius-pill);
  transition: border-color 0.2s, color 0.2s;
  text-decoration: none;
}
.summary-cta-alt:hover { border-color: var(--blue); color: var(--white); }

/* Wizard navigation */
.wiz-nav { display: flex; justify-content: space-between; margin-top: 2rem; }
.wiz-btn {
  padding: 0.7rem 1.75rem; border-radius: var(--radius-pill); font-family: var(--font-body);
  font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; border: none;
}
.wiz-btn-next {
  background: var(--accent-warm); color: var(--text-on-warm);
}
.wiz-btn-next:hover { background: var(--accent-warm-hover); }
.wiz-btn-next:disabled { opacity: 0.35; cursor: not-allowed; }
.wiz-btn-back {
  background: transparent; color: var(--text-muted); border: 1px solid rgba(255,255,255,0.08);
}
.wiz-btn-back:hover { border-color: rgba(255,255,255,0.2); color: var(--white); }

/* Wizard responsive */
@media (max-width: 768px) {
  .wizard-wrap { padding: 1.5rem 1.25rem; }
  .branche-grid { grid-template-columns: repeat(2, 1fr); }
  .scope-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: 1fr; }
  .wiz-nav { gap: 0.75rem; }
  .wiz-btn { flex: 1; text-align: center; padding: 0.75rem 1rem; }
}
@media (max-width: 480px) {
  .branche-grid { grid-template-columns: 1fr; }
  .scope-grid { grid-template-columns: 1fr; }
  .tech-grid { grid-template-columns: 1fr; }
  .wiz-toggle { gap: 0.5rem; }
  .rec-badge, .incl-badge { font-size: 0.55rem; padding-inline: 0.35rem; }
}

/* ═══════════════════════════
   FAQ
   ═══════════════════════════ */
.faq { background: var(--bg-deep); }
.faq-layout {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
  gap: 4rem;
  align-items: start;
}
.faq h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  margin-bottom: 0.75rem;
}
.faq h2 .fw-300 { font-weight: 300; }
.faq-left-sub { font-size: 0.95rem; color: var(--text-muted); line-height: 1.7; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid rgba(120,192,221,0.08); }
.faq-item:first-child { border-top: 1px solid rgba(120,192,221,0.08); }
.faq-q {
  display: flex; justify-content: space-between;
  align-items: center; gap: 1rem;
  padding: 1.35rem 0; cursor: pointer;
  font-size: 0.92rem; font-weight: 600;
  color: var(--text-on-dark);
  transition: color var(--transition);
  user-select: none;
}
.faq-q:hover { color: var(--blue); }
.faq-icon {
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 1px solid rgba(120,192,221,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; color: var(--text-muted); flex-shrink: 0;
  transition: all var(--transition);
}
.faq-a {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease, padding 0.4s ease;
}
.faq-a-inner {
  font-size: 0.9rem; color: var(--text-muted);
  line-height: 1.75; padding-bottom: 1.5rem;
}
.faq-item.open .faq-a { max-height: 600px; opacity: 1; }
.faq-item.open .faq-q { color: var(--blue); }
.faq-item.open .faq-icon {
  border-color: var(--blue);
  color: var(--blue);
  transform: rotate(45deg);
}

/* ═══════════════════════════
   ABOUT / ÜBER MICH
   ═══════════════════════════ */
.about-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: center;
}
.about-photo-wrap {
  position: relative;
  display: flex; justify-content: center;
}
.about-photo-frame {
  width: 320px; height: 380px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid rgba(120,192,221,0.15);
  position: relative;
  background: linear-gradient(180deg, #0f1830 0%, #0c1222 100%);
}
.about-photo-frame img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
}
.about-photo-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; color: rgba(120,192,221,0.2);
}
.about-photo-glow {
  position: relative;
  border-radius: var(--radius);
  display: inline-flex;
}
.about-photo-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 2.5px;
  background: conic-gradient(from var(--border-angle), transparent 20%, rgba(120,192,221,0.35) 30%, rgba(120,192,221,0.9) 35%, rgba(120,192,221,0.35) 40%, transparent 50%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: border-rotate 4s linear infinite;
  opacity: 0.2;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 1;
}
.about-photo-wrap:hover .about-photo-glow::before { opacity: 1; }
.about-photo-corner {
  position: absolute;
  width: 40px; height: 40px;
  border: 1.5px solid rgba(120,192,221,0.2);
  z-index: 0;
  transition: border-color 0.5s ease;
}
.about-photo-corner--tl {
  top: -14px; left: -14px;
  border-right: none; border-bottom: none;
  border-radius: 6px 0 0 0;
}
.about-photo-corner--br {
  bottom: -14px; right: -14px;
  border-left: none; border-top: none;
  border-radius: 0 0 6px 0;
}
.about-photo-wrap:hover .about-photo-corner {
  border-color: rgba(120,192,221,0.5);
}
.about h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  margin-bottom: 1.25rem;
}
.about h2 .fw-300 { font-weight: 300; color: var(--blue); }
.about-text {
  font-size: 0.95rem; color: var(--text-muted); line-height: 1.8;
  margin-bottom: 1.5rem;
}
.about-highlights {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.75rem; margin-bottom: 2rem;
}
.about-hl {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.82rem; color: var(--text-on-dark);
  cursor: default;
  transition: color 0.3s ease;
}
.about-hl:hover { color: var(--white); }
.about-hl-icon {
  width: 2rem; height: 2rem; border-radius: 8px;
  background: rgba(120,192,221,0.10);
  border: 1px solid rgba(120,192,221,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; flex-shrink: 0;
  color: #78c0dd;
  transition: all 0.3s ease;
}
.about-hl:hover .about-hl-icon {
  background: rgba(120,192,221,0.20);
  border-color: rgba(120,192,221,0.35);
  box-shadow: 0 0 12px rgba(120,192,221,0.25);
  transform: scale(1.15);
}

/* ═══════════════════════════
   CONTACT
   ═══════════════════════════ */
.contact-layout {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: 3rem;
  align-items: start;
}
.contact h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  margin-bottom: 1rem;
}
.contact h2 .fw-300 { font-weight: 300; }
.contact-sub {
  font-size: 0.95rem; color: var(--text-muted); line-height: 1.7;
  margin-bottom: 2rem;
}
.contact-detail {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.9rem; color: var(--text-muted);
  margin-bottom: 0.75rem;
  cursor: default;
  transition: color 0.3s ease;
}
.contact-detail:hover { color: var(--white); }
.cd-icon {
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; flex-shrink: 0;
  color: #78c0dd;
  background: rgba(120,192,221,0.08);
  border: 1px solid rgba(120,192,221,0.10);
  transition: all 0.3s ease;
}
.contact-detail:hover .cd-icon {
  background: rgba(120,192,221,0.20);
  border-color: rgba(120,192,221,0.35);
  box-shadow: 0 0 12px rgba(120,192,221,0.25);
  transform: scale(1.15);
}
.card-blue .cd-icon { background: rgba(12,18,34,0.08); }

/* Contact form — dark card */
.contact-form-wrap {
  padding: 2.5rem;
  background: var(--dark);
  border: 1px solid rgba(120,192,221,0.08);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-size: 0.7rem; font-weight: 700;
  color: rgba(120,192,221,0.7); text-transform: uppercase;
  letter-spacing: 1.5px; margin-bottom: 0.4rem;
}
.form-group .optional { font-weight: 400; color: rgba(255,255,255,0.6); }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.9rem; color: var(--white);
  outline: none;
  transition: border-color var(--transition), background var(--transition);
  -webkit-appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,0.55); }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--blue);
  background: rgba(120,192,221,0.08);
}
.form-group textarea { resize: none; min-height: 90px; overflow: hidden; field-sizing: content; }
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color-scheme: dark;
  background-color: rgba(255,255,255,0.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378c0dd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.form-group select:invalid,
.form-group select option[disabled] { color: rgba(255,255,255,0.3); }
.form-group select option { background: #1a2436; color: var(--white); padding: 0.5rem; }
.form-submit {
  width: 100%;
  padding: 0.85rem;
  border: none; border-radius: var(--radius-sm);
  background: var(--accent-warm); color: var(--text-on-warm);
  font-family: var(--font-body);
  font-size: 0.88rem; font-weight: 700;
  cursor: pointer; margin-top: 1.25rem;
  transition: background var(--transition);
}
.form-submit:hover { background: var(--accent-warm-hover); }
.form-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.form-status {
  text-align: center; margin-top: 0.75rem;
  font-size: 0.82rem; min-height: 1.5em;
}
.form-status.success { color: var(--green); }
.form-status.error { color: #ef4444; }
.form-calculator-link {
  font-size: 0.82rem; color: var(--text-muted); margin-top: 0.5rem;
  padding: 0.65rem 1rem; border-radius: var(--radius-sm);
  background: rgba(120,192,221,0.04); border: 1px solid rgba(120,192,221,0.1);
}
.form-calculator-link a {
  color: var(--blue); font-weight: 600; text-decoration: underline;
}
.form-calculator-link a:hover { color: var(--white); }
.form-note {
  font-size: 0.75rem; color: rgba(255,255,255,0.55);
  text-align: left; margin-top: 0.75rem;
}
.privacy-consent {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-size: 0.75rem; color: var(--text-muted);
  margin-top: 0.75rem; cursor: pointer;
  line-height: 1.4;
}
.privacy-consent input[type="checkbox"] {
  width: 16px; height: 16px; margin-top: 1px;
  accent-color: var(--accent-warm); flex-shrink: 0;
}
.privacy-consent a { color: var(--blue); text-decoration: underline; }
.honeypot { position: absolute; left: -9999px; }

/* ═══════════════════════════
   FOOTER
   ═══════════════════════════ */
footer {
  position: relative; z-index: 2;
  background: var(--bg-deep);
}
.footer-main { padding: 4rem 0 3.5rem; }
.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
}
.footer-brand {
  display: flex; flex-direction: column; gap: 1rem;
}
.footer-logo {
  height: 28px; width: auto; opacity: 0.7;
  transition: opacity var(--transition);
}
.footer-logo:hover { opacity: 1; }
.footer-tagline {
  font-family: var(--font-body);
  font-size: 0.85rem; color: var(--text-muted);
  line-height: 1.7; max-width: 280px;
}
.footer-social-title { margin-top: 0.5rem; margin-bottom: 0.75rem; }
.footer-social {
  display: flex; gap: 0.75rem;
}
.footer-social-link {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(120,192,221,0.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.footer-social-link:hover {
  color: var(--white);
  border-color: rgba(120,192,221,0.4);
  background: rgba(120,192,221,0.08);
}
.footer-col-title {
  font-family: var(--font-display);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--blue); margin-bottom: 1.25rem;
}
.footer-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.footer-links a {
  font-family: var(--font-body);
  font-size: 0.85rem; color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition), padding-left var(--transition);
  display: inline-block;
}
.footer-links a:hover {
  color: var(--white);
  padding-left: 4px;
}
.footer-contact span {
  font-family: var(--font-body);
  font-size: 0.85rem; color: var(--text-muted);
}
.footer-contact a:hover { padding-left: 0; }
/* Atmosphere glow above the meta-bar */
.footer-atmosphere {
  position: relative;
  height: 0;
  pointer-events: none;
}
.footer-atmosphere::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 50px;
  background: radial-gradient(ellipse 50% 100% at 50% 100%,
    rgba(120,192,221,0.14) 0%,
    rgba(120,192,221,0.04) 60%,
    transparent 100%
  );
}
.footer-meta-bar {
  background: rgba(0,0,0,0.25);
  border-top: 1px solid rgba(120,192,221,0.12);
  position: relative;
}
.footer-meta-bar::before {
  content: '';
  position: absolute; top: -1px; left: 0; right: 0;
  height: 1px;
  box-shadow:
    0 0 8px 1px rgba(120,192,221,0.3),
    0 0 20px 3px rgba(120,192,221,0.1);
}
.footer-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 0;
}
.footer-copy {
  font-family: var(--font-body);
  font-size: 0.75rem; color: var(--text-muted);
}
.footer-updated {
  font-size: 0.7rem; color: var(--text-muted); opacity: 0.6;
}
.footer-legal {
  display: flex; gap: 1.5rem;
}
.footer-legal a {
  font-family: var(--font-body);
  font-size: 0.75rem; color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.footer-legal a:hover { color: var(--blue); }
@media (max-width: 900px) {
  .footer-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
@media (max-width: 600px) {
  .footer-main { padding: 2.5rem 0 2rem; }
  .footer-cols {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .footer-meta {
    flex-direction: column; gap: 0.75rem;
    text-align: center; padding: 1.25rem 2rem;
  }
}

/* ═══════════════════════════
   SCROLL REVEAL
   ═══════════════════════════ */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible {
  opacity: 1; transform: translateY(0);
}

/* ═══════════════════════════
   RESPONSIVE
   ═══════════════════════════ */
@media (max-width: 900px) {
  .hero-layout { grid-template-columns: 1fr; gap: 2rem; }
  .hero-visual { display: none; }
  .problem-layout { grid-template-columns: 1fr; gap: 2rem; }
  .process-header { grid-template-columns: 1fr; gap: 1rem; }
  .process-grid { grid-template-columns: 1fr; }
  .services-header { grid-template-columns: 1fr; gap: 1rem; }
  .services-grid { grid-template-columns: 1fr; }
  .svc-featured, .svc-pos-2, .svc-pos-3, .svc-pos-4, .svc-pos-5, .svc-wide { grid-column: 1; grid-row: auto; }
  .pricing-header { grid-template-columns: 1fr; gap: 1rem; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .faq-layout { grid-template-columns: 1fr; gap: 2rem; }
  .about-layout { grid-template-columns: 1fr; gap: 2rem; }
  .about-photo-frame { width: 260px; height: 310px; margin: 0 auto; }
  .about-highlights { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; gap: 2rem; }
  .trust-bar { flex-wrap: wrap; gap: 1rem; }
}
@media (max-width: 600px) {
  .trust-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1.5rem;
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
    width: auto;
    opacity: 1;
    animation: none;
  }
  .trust-bar .trust-badge { display: none; }
  .trust-item {
    font-size: 0.75rem;
    opacity: 0;
    animation: flicker-on 1.2s steps(1, end) forwards;
  }
  .trust-item:nth-child(2) { animation-delay: 1.5s; }
  .trust-item:nth-child(3) { animation-delay: 1.8s; }
  .trust-item:nth-child(4) { animation-delay: 2.1s; }
  .trust-item:nth-child(5) { animation-delay: 2.4s; }
  .hero-trust { margin-top: 2rem; }
  .form-group input,
  .form-group textarea,
  .form-group select { padding: 0.85rem 1rem; font-size: 0.92rem; }
  section { padding: 5.5rem 0; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
  .form-row { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--dark);
    border-bottom: 1px solid rgba(120,192,221,0.12);
    padding: 1.5rem 2rem; gap: 1rem;
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.open .nav-cta {
    background: none !important;
    color: var(--text-muted) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
  }
  .nav-links.open .nav-cta:hover { color: var(--white) !important; background: none !important; }
  .burger { display: block; }
  .nav-dropdown-menu {
    position: static; transform: none; min-width: 0;
    background: transparent; backdrop-filter: none;
    border: none; border-radius: 0; box-shadow: none;
    padding: 0 0 0 1rem; opacity: 1; visibility: visible;
    display: none;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: block; }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    transform: none;
  }
  .nav-dropdown.open .nav-dropdown-trigger::after { transform: rotate(180deg); }
  .nav-dropdown-menu a { padding: 0.35rem 0; font-size: 0.82rem; }
  .nav-dropdown-trigger::after { margin-top: 1px; }
  .page-hero-content { max-width: 680px; }
  .gallery-grid { grid-template-columns: 1fr; }
  .cta-banner-content h2 { font-size: 1.6rem; }
  .cta-banner-content .btn-primary { white-space: nowrap; padding: 0.9rem 1.8rem; font-size: 0.88rem; }
  .btn-primary { white-space: nowrap; }
}

/* ═══════════════════════════
   +C SEITEN-HERO (vereinfacht)
   Für alle Unterseiten
   ═══════════════════════════ */
/* Heroes ohne Bild (Impressum, Datenschutz, lokale Seiten). Bis 26.08.2026 setzte
   jede dieser Seiten ihre Polsterung inline -- 8rem/3rem hier, 10rem/7rem dort.
   Jetzt ein Wert fuer alle vier. */
.page-hero { min-height: auto; padding-top: 8rem; padding-bottom: 3rem; }
/* Die Sektion direkt unter einem bildlosen Hero wuerde sonst ihre vollen 6rem
   oben aufschlagen -- zusammen mit den 3rem des Heros waeren das 144 px.
   Auf Impressum und Datenschutz waren es vorher 96 px. */
.page-hero + section:not(.cta-banner):not(.sektion-anschluss) { padding-top: 3rem; }

/* Impressum und Datenschutz: erster Fix (26.08.) setzte beide Container auf
   720 px -- der Block schwebte dann linksbuendig in der Mitte, weder auf der
   Site-Fluchtlinie noch zentriert. Bjoern: "Ich hasse Abweichungen in der
   Symmetrie." Jetzt dasselbe Zweispalten-Muster wie die Textbloecke der Site:
   Titel links, Rechtstext rechts, Geometrie identisch (20rem/34rem, zentriert). */
@media (min-width: 62em) {
  .rechtstext-seite .page-hero .container {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 34rem);
    justify-content: center;
    gap: 4rem;
    align-items: start;
  }
}
.rechtstext-seite .page-hero-content h1 {
  font-size: clamp(2.4rem, 3.5vw, 3.2rem);
  hyphens: auto; /* "Datenschutzerklaerung" braucht in der 20rem-Spalte den Trennstrich */
}
.rechtstext-seite .legal-content h2:first-child { margin-top: 0; }
.page-hero .hero-layout { display: block; }
.page-hero-content { max-width: 680px; }
.page-hero-content h1 { margin-bottom: 1.5rem; }
.page-hero-content .hero-sub { margin-bottom: 2rem; }

/* ═══════════════════════════
   +A PROJEKT-GALERIE
   ═══════════════════════════ */
/* Zwölf Spalten: normale Kacheln belegen 4 (drei je Reihe wie bisher). Auf /referenzen/
   stehen die echten Projekte groß zu zweit, die Entwürfe kompakt zu viert (Website-Check
   Punkt 7, 16.10.2026). Unter 900 px gilt wieder das einfache Raster, siehe unten. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}
.gallery-grid > .gallery-item { grid-column: span 4; }
.gallery-grid > .gallery-item[data-sektion="kunden"] { grid-column: span 6; }
.gallery-grid > .gallery-item[data-sektion="entwuerfe"] { grid-column: span 3; }
.gallery-item[data-sektion="kunden"] .gallery-info { padding: 1.5rem 1.75rem; }
.gallery-item[data-sektion="kunden"] .gallery-info h3 { font-size: 1.25rem; }
.gallery-item[data-sektion="kunden"] .gallery-info p { font-size: 0.88rem; }
.gallery-item[data-sektion="entwuerfe"] .gallery-info { padding: 1rem 1.1rem; }
.gallery-item[data-sektion="entwuerfe"] .gallery-info h3 { font-size: 0.92rem; }
.gallery-item[data-sektion="entwuerfe"] .gallery-info p { font-size: 0.76rem; }
@media (max-width: 1100px) {
  /* Zu viert würden die Entwürfe hier unter 250 px schmal, deshalb zu dritt */
  .gallery-grid > .gallery-item[data-sektion="entwuerfe"] { grid-column: span 4; }
}
.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(120,192,221,0.10);
  background: var(--dark);
  transition: transform var(--transition), border-color var(--transition);
  cursor: pointer;
}
.gallery-item:hover {
  transform: translateY(-4px);
  border-color: rgba(120,192,221,0.30);
}
.gallery-thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.gallery-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.5s ease;
}
.gallery-item:hover .gallery-thumb img {
  transform: scale(1.05);
}
.gallery-info {
  padding: 1.25rem 1.5rem;
}
.gallery-info h3 {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
  margin-bottom: 0.25rem;
}
.gallery-branche {
  display: inline-block;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.5rem;
}
.gallery-info p {
  font-size: 0.8rem; color: var(--text-muted);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid > .gallery-item,
  .gallery-grid > .gallery-item[data-sektion] { grid-column: auto; }
  /* Im einfachen Raster wieder Normalmaß, sonst bliebe der Entwurfstext mobil bei 12 px */
  .gallery-item[data-sektion] .gallery-info { padding: 1.25rem 1.5rem; }
  .gallery-item[data-sektion] .gallery-info h3 { font-size: 1rem; }
  .gallery-item[data-sektion] .gallery-info p { font-size: 0.8rem; }
}
@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

/* Lightbox overlay */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(8,14,26,0.95);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 2rem;
}
.lightbox.active { display: flex; }
.lightbox-inner {
  position: relative;
  width: min(720px, 90vw);
  max-height: 85vh;
  display: flex; flex-direction: column;
  align-items: center;
}
.lightbox-scroll {
  width: 100%;
  max-height: calc(85vh - 4rem);
  overflow-y: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 60px rgba(120,192,221,0.15);
  scrollbar-width: thin;
  scrollbar-color: rgba(120,192,221,0.3) transparent;
}
.lightbox-scroll::-webkit-scrollbar { width: 6px; }
.lightbox-scroll::-webkit-scrollbar-track { background: transparent; }
.lightbox-scroll::-webkit-scrollbar-thumb { background: rgba(120,192,221,0.3); border-radius: 3px; }
.lightbox-scroll img {
  width: 100%; display: block;
  border-radius: var(--radius-sm);
}
.lightbox-close {
  position: absolute; top: -0.75rem; right: -0.75rem;
  background: var(--bg-deep); border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease;
  z-index: 215;
}
.lightbox-close:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.lightbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(8,14,26,0.7); border: 1px solid rgba(255,255,255,0.12);
  color: var(--white); width: 2.75rem; height: 2.75rem; border-radius: 50%;
  font-size: 1.3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease; z-index: 210;
}
.lightbox-arrow:hover { background: rgba(120,192,221,0.15); border-color: var(--blue); color: var(--blue); }
.lightbox-arrow.prev { left: -1.25rem; }
.lightbox-arrow.next { right: -1.25rem; }
.lightbox-footer {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 0.75rem 0 0; gap: 1rem;
}
.lightbox-caption {
  font-size: 0.85rem; color: var(--white); font-family: var(--font-display);
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lightbox-counter {
  font-size: 0.7rem; color: var(--text-muted); letter-spacing: 1px;
  font-family: var(--font-body); white-space: nowrap;
}

/* Filter Buttons */
/* Reference disclaimer */
.ref-disclaimer {
  display: flex; align-items: flex-start; gap: 0.75rem;
  background: rgba(120,192,221,0.06);
  border: 1px solid rgba(120,192,221,0.12);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem; margin-bottom: 2rem;
}
.ref-disclaimer svg { flex-shrink: 0; color: var(--blue); margin-top: 0.15rem; }
.ref-disclaimer p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; margin: 0; }

.filter-bar {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  justify-content: flex-start; margin-bottom: 2.5rem;
}
.filter-btn {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted); padding: 0.4rem 1rem; border-radius: 100px;
  font-size: 0.75rem; font-family: var(--font-body); font-weight: 500;
  cursor: pointer; transition: all 0.3s ease; letter-spacing: 0.5px;
}
.filter-btn:hover { border-color: rgba(120,192,221,0.3); color: var(--white); }
.filter-btn.active {
  background: rgba(120,192,221,0.12); border-color: rgba(120,192,221,0.4);
  color: var(--blue); font-weight: 600;
}
.gallery-item[data-hidden="true"] { display: none; }

/* Sektionskopf (Kundenprojekte / Entwürfe) */
.gallery-sektion {
  grid-column: 1 / -1;
  padding-top: 1.5rem;
}
.gallery-sektion:first-child { padding-top: 0; }
.gallery-sektion-titel {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 0.5rem;
}
.gallery-sektion-text {
  font-size: 0.85rem; color: var(--text-muted);
  line-height: 1.7; max-width: 70ch;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(120,192,221,0.12);
}

/* Project Detail */
.gallery-detail {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: center;
  margin-top: 0.35rem; font-size: 0.7rem; color: var(--text-muted);
}
.gallery-detail span { display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.gallery-detail .detail-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); }
.gallery-live-link {
  display: inline-block; margin-top: 0.6rem; font-size: 0.8rem; font-weight: 600;
  color: var(--accent); text-decoration: none; transition: color 0.2s;
}
.gallery-live-link:hover { color: #fff; }

@media (max-width: 600px) {
  .lightbox-inner { width: 95vw; }
  .lightbox-arrow { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
  .lightbox-arrow.prev { left: -0.5rem; }
  .lightbox-arrow.next { right: -0.5rem; }
  .filter-bar { gap: 0.35rem; }
  .filter-btn { font-size: 0.7rem; padding: 0.35rem 0.75rem; }
}

/* ═══════════════════════════
   +B CTA-BANNER
   ═══════════════════════════ */
.cta-banner {
  position: relative; z-index: 2;
}
.cta-banner-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.cta-banner-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 0.75rem;
}
.cta-banner-content p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 2rem;
}
.cta-banner-content .btn-primary {
  font-size: 0.95rem;
  padding: 1rem 2.5rem;
}

/* ═══════════════════════════
   LEGAL / TEXT PAGES
   Impressum, Datenschutz
   ═══════════════════════════ */
.legal-content h2 {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 700;
  margin-top: 2.5rem; margin-bottom: 0.75rem;
  color: var(--white);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 600;
  margin-top: 1.5rem; margin-bottom: 0.5rem;
  color: var(--white);
}
.legal-content p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.legal-content ul {
  list-style: none;
  padding: 0; margin: 0 0 1rem;
}
.legal-content ul li {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.8;
  padding-left: 1.25rem;
  position: relative;
}
.legal-content ul li::before {
  content: '—';
  position: absolute; left: 0;
  color: var(--blue);
}
.legal-content a {
  color: var(--blue);
  border-bottom: 1px solid rgba(120,192,221,0.3);
  transition: border-color var(--transition);
}
.legal-content a:hover { border-color: var(--blue); }

/* +D VERGLEICHSTABELLE */
.compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 2.5rem 0;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(120,192,221,0.15);
  background: rgba(255,255,255,0.02);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 600px;
}
.compare-table thead th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--white);
  padding: 1.1rem 1.5rem;
  text-align: left;
  border-bottom: 2px solid rgba(120,192,221,0.2);
}
.compare-table thead th:first-child {
  color: var(--text-muted);
  font-weight: 500;
}
.compare-table thead th.highlight {
  color: var(--blue);
  background: rgba(120,192,221,0.06);
}
.compare-table tbody td {
  padding: 1rem 1.5rem;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: middle;
}
.compare-table tbody tr:hover td {
  background: rgba(120,192,221,0.04);
}
.compare-table tbody tr:last-child td {
  border-bottom: none;
}
.compare-table tbody td:first-child {
  font-weight: 500;
  color: rgba(255,255,255,0.7);
}
.compare-table tbody td.highlight {
  color: var(--white);
  font-weight: 500;
  background: rgba(120,192,221,0.04);
}
.compare-table .check-yes {
  color: var(--blue);
  font-weight: 600;
}
.compare-table .check-no {
  color: rgba(255,255,255,0.6);
}
.compare-scroll-hint { display: none; }
.compare-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.75rem; }
.compare-table .check-partial {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(120,192,221,0.9);
  background: rgba(120,192,221,0.06);
  border: 1px solid rgba(120,192,221,0.12);
  padding: 0.15rem 0.55rem;
  border-radius: 100px;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
/* Mobile: hide table, show cards */
.compare-cards { display: none; }
@media (max-width: 600px) {
  .compare-table-wrap { display: none; }
  .compare-cards { display: flex; flex-direction: column; gap: 1rem; margin: 2rem 0; }
  .compare-card {
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    background: rgba(255,255,255,0.02);
  }
  .compare-card.card-highlight {
    border-color: rgba(120,192,221,0.35);
    background: linear-gradient(160deg, rgba(120,192,221,0.08) 0%, rgba(120,192,221,0.02) 100%);
    box-shadow: 0 0 24px rgba(120,192,221,0.08);
    order: -1;
  }
  .compare-card-title {
    font-family: var(--font-display);
    font-size: 1rem; font-weight: 700;
    color: var(--white);
    margin-bottom: 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .compare-card.card-highlight .compare-card-title {
    color: var(--blue);
    font-size: 1.1rem;
    display: flex; align-items: center; gap: 0.5rem;
  }
  .compare-card.card-highlight .compare-card-title::after {
    content: 'Empfohlen';
    font-size: 0.7rem; font-weight: 600; font-family: var(--font-body);
    background: rgba(120,192,221,0.15); color: var(--blue);
    padding: 0.15rem 0.5rem; border-radius: 100px;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .compare-card.card-highlight .compare-card-row {
    padding: 0.5rem 0;
  }
  .compare-card.card-highlight .compare-card-value {
    color: var(--white);
  }
  .compare-card-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 0.4rem 0;
    font-size: 0.82rem;
  }
  .compare-card-row + .compare-card-row {
    border-top: 1px solid rgba(255,255,255,0.04);
  }
  .compare-card-label { color: var(--text-muted); }
  .compare-card-value { text-align: right; font-weight: 500; }
  .compare-card-value .check-yes { color: var(--blue); font-weight: 600; }
  .compare-card-value .check-no { color: rgba(255,255,255,0.6); }
  .compare-card-value .check-partial {
    font-size: 0.72rem; font-weight: 600;
    color: rgba(120,192,221,0.9);
    background: rgba(120,192,221,0.06);
    border: 1px solid rgba(120,192,221,0.12);
    padding: 0.1rem 0.45rem; border-radius: 100px;
  }
}

/* ═══════ SEO Content Modules ═══════ */

/* Fließtext-Block zwischen Design-Sektionen */
.content-block {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}
.content-block > .container {
  position: relative;
  z-index: 1;
}
.content-block h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--white);
  margin-bottom: 1.5rem;
}
.content-block > .container > p {
  font-family: var(--font-body);
  font-size: 1.0rem;
  line-height: 1.85;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  max-width: 75ch;
}
.content-block > .container > p:last-child {
  margin-bottom: 0;
}
/* ── Prose-Formatting (global für ALLE Fließtexte in main) ── */
main p strong,
main .faq-a-inner strong {
  color: var(--white);
  font-weight: 700;
}
main p em {
  font-style: italic;
  color: var(--blue);
}
main p a:not(.btn-primary):not(.btn-outline):not(.price-cta):not(.nav-cta) {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}
main p a:not(.btn-primary):not(.btn-outline):not(.price-cta):not(.nav-cta):hover {
  opacity: 0.7;
}
/* Links in blauen Kaesten: die Regel darueber (0,4,3) schlug .card-blue a (0,4,1),
   Blau auf Blau = 1,0:1 (Website-Check 08.10.2026, Albstadt und Preise). */
.card-blue p a:not(.btn-primary):not(.btn-outline):not(.price-cta):not(.nav-cta) {
  color: var(--dark);
}
.content-block ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.content-block ul li {
  font-family: var(--font-body);
  font-size: 1.0rem;
  line-height: 1.75;
  color: var(--text-muted);
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  position: relative;
}
.content-block ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

/* Definition-Block — Intro-Sektion nach Hero */
.definition-block {
  background: var(--bg-deep);
  padding: 6rem 0;
  border-top: 1px solid rgba(120,192,221,0.1);
}
.definition-block h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  color: var(--blue);
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}
/* Normale Sektionsüberschrift in definition-block (weiß, groß) */
.definition-block h2.section-heading {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--white);
  font-weight: 800;
  letter-spacing: 0;
}
.definition-block p {
  color: var(--text-on-dark);
  font-size: 1.0rem;
  line-height: 1.8;
  max-width: 75ch;
}

/* Inline-Statistik */
.content-block .stat-inline {
  color: var(--blue);
  font-weight: 600;
}

/* Content-Block Link-Styling — fett + unterstrichen (Buttons ausgenommen, :where haelt Spezifitaet bei 0,1,1) */
.content-block a:where(:not(.btn-primary):not(.btn-outline)) {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(120,192,221,0.4);
  transition: text-decoration-color 0.2s;
}
.content-block a:where(:not(.btn-primary):not(.btn-outline)):hover {
  text-decoration-color: var(--blue);
}

@media (max-width: 600px) {
  .definition-block {
    padding: 3.5rem 0;
  }
  .content-block {
    padding: 4rem 0;
  }
}

/* ═══════════════════
   ARBEITSPROBEN
   ═══════════════════ */
.probe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
/* Leuchtfeuer-Effekt (Rahmen, Hover-Transform, rotierender Rand) ist mit
   .svc-card-wrap zusammengelegt -- siehe SERVICES-Abschnitt weiter oben. */
.probe {
  border: 1px solid rgba(120,192,221,0.10);
  background: var(--dark);
  padding: 1rem;
}
.probe-shots {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
}
.probe-desk, .probe-mob {
  display: block;
  border-radius: calc(var(--radius) - 6px);
  overflow: hidden;
}
.probe-desk {
  flex: 1 1 68%;
  width: 68%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}
.probe-mob {
  flex: 1 1 28%;
  width: 28%;
  height: auto;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  object-position: top;
  border: 1px solid rgba(120,192,221,0.15);
}
.probe figcaption {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 1rem;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .probe-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .probe-grid { grid-template-columns: 1fr; }
  .probe-shots { gap: 0.4rem; }
}

/* Variante ohne Desktop/Mobil-Paar: ein einzelnes Bild pro Karte
   (Zahnaerzte/Anwaelte-Referenzen ohne Mobil-Aufnahme, Technik-Streifen) */
.probe-full {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border-radius: calc(var(--radius) - 6px);
}

/* Abweichende Kartenzahl auf den Branchenseiten (Task 10/11):
   vier Karten (Gastronomie) bzw. eine einzelne, zentrierte Karte (Hotels) */
.probe-grid--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .probe-grid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .probe-grid--four { grid-template-columns: 1fr; }
}
.probe-grid--single {
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}
/* Der Technik-Streifen (Branchenseiten ohne Material, Task 11) hat bewusst
   keine eigene Modifier-Klasse: drei Karten passen exakt auf das
   Standard-3-Spalten-Raster von .probe-grid, eine Klasse ohne abweichenden
   Wert waere nur totes Markup. Frueher stand hier .probe-grid--technik ohne
   jede Regel dahinter -- entfernt statt nachtraeglich mit einer Regel
   aufgefuellt, die ohnehin nichts vom Default abweichen wuerde. */
/* Abschluss-Button eigenstaendig unter dem Kartenraster statt direkt an
   die erste Karte gequetscht -- gleicher Abstand wie der Grid-Header-Gap
   oberhalb (.probe-grid margin-top: 2.5rem), linksbuendig wie die
   uebrigen Abschluss-Buttons der Seite (z.B. .hero-btns beim
   KI-Sichtbarkeit-Teaser). */
.arbeitsproben .probe-grid + .btn-outline {
  margin-top: 2.5rem;
}

/* ═══════════════════
   REDUCED MOTION
   ═══════════════════ */
/* Gezielt statt pauschal: Am 10.05.2026 toetete ein globales animation:none
   auch Hover und Glow. Hier nur Einblendungen, Flug und Laufband -- der Rest
   (Border-Rotate, Portrait-Glow, Hover) bleibt, weil er nichts versteckt. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero h1 .alien-line > span { animation: none; transform: none; opacity: 1; }
  .hero .hero-sub, .hero .hero-btns { animation: none; opacity: 1; }
  .hero-stat-chip { animation: none; }
  .hero-glass-obj, .hero-glass-obj::before, .hero-glass-obj::after { animation: none; }
  .trust-bar, .trust-item { animation: none; opacity: 1; }
  .matrix-canvas, #matrix-canvas { display: none; }
}

/* Änderungspreise-Sektion (webdesign-preise) */
.changes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}
@media (max-width: 1024px) {
  .changes-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .changes-grid {
    grid-template-columns: 1fr;
  }
}

:root { color-scheme: dark; }

/* ── Schmale Geraete: Grid-Items duerfen unter ihre Wortbreite schrumpfen ──
   Gemessen am 25.08.2026 bei 320px (iPhone SE 1. Gen): /ki-sichtbarkeit/ war
   385px breit, /webdesign-fuer-zahnaerzte/ 346px -- die Seite liess sich
   seitlich wegschieben.

   Ursache ist der Grid-Standard `min-width: auto`: ein Grid-Item schrumpft
   nie unter sein laengstes Wort. "KI-Sichtbarkeit" (334px) und
   "Zahnarztpraxen" sprengten damit ihre Spalte, obwohl das Grid selbst
   korrekt 256px breit war. `min-width: 0` hebt die Sperre auf, der
   Wortumbruch faengt die Woerter, die dann immer noch zu lang sind.

   Wirkt nur bei Platzmangel: wo der Text passt, aendert sich nichts. */
.faq-layout > *,
.hero-layout > *,
.contact-layout > *,
.about-layout > *,
.problem-layout > *,
.pricing-grid > * { min-width: 0; }

/* `.hero` ist ein Flex-Container. Sein `.container` ist damit ein Flex-Item
   mit `min-width: auto` und waechst auf die Breite des laengsten Wortes --
   auf /datenschutz/ waren das 533px bei 320px Viewport, "Datenschutz-
   erklaerung" stand abgeschnitten am Rand. Erst `min-width: 0` laesst den
   Container schrumpfen, damit der Wortumbruch der H1 ueberhaupt greift. */
/* Dasselbe Flex-Item wuchs andersherum auch nie auf seine volle Breite: ohne
   `width: 100%` bestimmt der Inhalt die Breite (flex-basis: auto), gedeckelt
   durch max-width. Dadurch war der Hero-Container je nach Textlaenge 1140 px
   (Startseite), 1111 px (Branchenseiten) oder 1073 px (CMS) breit -- und die
   Textspalte entsprechend 506, 491 oder 472 px (gemessen 26.08.2026). */
.hero > .container { min-width: 0; width: 100%; }

.hero h1,
.faq h2,
.contact-layout h2,
.page-hero-content h1 { overflow-wrap: break-word; }

/* Die FAQ-Ueberschrift steht in einer 289 px schmalen Spalte -- auch auf
   1440 px. "Fragen zur KI-Sichtbarkeit" brach dort als "KI-Sichtbarkei / t"
   um (gemessen 26.08.2026). Silbentrennung greift vor dem harten Wortbruch,
   deshalb hier ohne Breitengrenze. */
.faq h2 { hyphens: auto; }

/* Auf schmalen Geraeten zusaetzlich trennen statt hart umbrechen. Nur hier,
   damit auf breiten Ansichten keine Trennstriche in Ueberschriften auftauchen,
   die heute ungetrennt passen. */
@media (max-width: 30em) {
  .hero h1,
  .page-hero-content h1,
  .faq h2 { hyphens: auto; }
}

/* Die Trust-Leiste ist ein Grid, ihre Eintraege stehen auf `nowrap`.
   Auf 320px passt "Monatlicher Bericht" nicht in seine Spalte und ragte
   ueber den Rand. Unterhalb von 22em darf der Text umbrechen. */
.trust-bar > * { min-width: 0; }
@media (max-width: 22em) {
  .trust-item { white-space: normal; }
}

/* Die Hero-Chips stehen bewusst auf negativen Offsets und ragen ueber das
   Kreisbild hinaus. Zwischen 920px und 1100px reicht der Aussenrand des
   Containers dafuer nicht: der "Galerie"-Chip stand rechts angeschnitten
   (gemessen 25.08.2026, Bereich in 20px-Schritten eingegrenzt). In diesem
   Fenster ruecken die rechten Chips an den Bildrand. Breitere und
   schmalere Ansichten bleiben unveraendert.

   Gemini hat im Review zu Recht angemerkt, dass ein so enges Fenster bricht,
   sobald sich der Chip-Text aendert. Das bleibt bewusst so: die Chip-Texte
   stehen fest im HTML jeder Seite, sie kommen aus keinem CMS-Feld. Wer sie
   anfasst, muss den Bereich neu messen -- das Skript dafuer steht im
   Session-Log (880-1440px in 20px-Schritten). */
/* Obergrenze am 26.08.2026 von 69em auf 74.5em angehoben: seit der Hero-Container
   seine volle Breite nutzt (.hero > .container { width: 100% }), stehen die
   rechten Chips weiter aussen. chip-2 ragte zwischen 1110 und 1180 px bis zu
   23 px ueber den Viewport -- gemessen in 10-px-Schritten. */
@media (min-width: 57.5em) and (max-width: 74.5em) {
  .chip-1 { right: 0; }
  .chip-2 { right: -12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   HERVORHEBUNGEN IN FLIESSTEXT-SEKTIONEN (25.08.2026)

   Anlass: Zwischen den gestalteten Karten-Sektionen standen lange graue
   Textblöcke ohne jeden visuellen Anker — auf der Handwerker-Seite
   247 Wörter am Stück. Gemessen waren es 103 Zeichen je Zeile; lesbar
   sind 50 bis 75.

   Farben über color-mix aus --blue, damit die Blöcke im hellen Theme
   nicht unsichtbar werden (dort ist --blue dunkel statt hell).
   ═══════════════════════════════════════════════════════════════════ */

/* Zeilenlänge. Gilt für Fliesstext direkt im Container, nicht für Text
   in Karten oder Tabellen — die haben ihre eigene Breite. */
.content-block > .container > p,
.content-block > .container > ul,
.content-block > .container > ol,
.pricing > .container > p { max-width: 50ch;  /* gemessen: ergibt ~68 Zeichen je Zeile. 65ch waeren 89 -- ch misst die Breite der Null, die in DM Sans breiter ist als das Durchschnittszeichen */ }

/* Zwei Spalten: Text links, Zahl rechts */
.text-mit-zahl {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 2.5rem;
}
.text-mit-zahl > div > p { max-width: 50ch;  /* gemessen: ergibt ~68 Zeichen je Zeile. 65ch waeren 89 -- ch misst die Breite der Null, die in DM Sans breiter ist als das Durchschnittszeichen */ }

/* Zahlenkarte */
/* Der Farbauftrag kommt aus .card-blue (im HTML mitgegeben), hier nur die Masse. */
.stat-karte {
  padding: 2rem 1.8rem;
  border-radius: var(--radius-sm);
}
.stat-karte-wert {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1;
  /* NICHT var(--blue): das ist die Hintergrundfarbe dieser Karte. Am
     25.08.2026 stand die Zahl unsichtbar auf gleichfarbigem Grund. */
  color: inherit;
}
.stat-karte-einheit { font-size: 0.45em; margin-left: 0.15em; font-weight: 300; }
.stat-karte-text { margin: 0.9rem 0 0.7rem; font-size: 1.02rem; line-height: 1.5; }
.stat-karte-quelle { font-size: 0.78rem; opacity: 0.62; letter-spacing: 0.02em; }

/* Drei Vorteile als Karten statt Aufzählung */
.vorteil-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2.5rem;
}
/* Ab vier Karten zweispaltig: auto-fit presste vier textlastige Karten in
   ~256 px schmale Spalten (gemessen 27.08.2026 auf der Gastronomie-Seite). */
.vorteil-grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 48em) {
  .vorteil-grid:has(> :nth-child(4)) { grid-template-columns: 1fr; }
}
.vorteil-karte { padding: 1.6rem 1.5rem; border-radius: var(--radius-sm); }
.vorteil-karte h3 { font-size: 1.12rem; margin: 0.8rem 0 0; }
.vorteil-karte p { font-size: 0.95rem; line-height: 1.62; margin: 0; }

/* Garantie: das fehlende Überzeugungsmittel, deshalb ein eigener Block */
.garantie-block {
  display: flex;
  gap: 1.3rem;
  align-items: flex-start;
  margin: 0 0 2.5rem;
  padding: 1.7rem 1.8rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--blue) 13%, transparent),
    color-mix(in srgb, var(--blue) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
}
.garantie-icon {
  flex: 0 0 auto;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--blue) 16%, transparent);
  color: var(--blue);
}
.garantie-titel { display: block; font-size: 1.16rem; line-height: 1.35; margin-bottom: 0.45rem; }
.garantie-block p { margin: 0; font-size: 0.96rem; opacity: 0.85; max-width: 40rem; }

@media (max-width: 56em) {
  .text-mit-zahl { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   KARTEN-RASTER IN VOLLER CONTAINERBREITE (26.08.2026)

   .problem-cards ist als einspaltige Flex-Spalte gebaut, weil sie im
   zweispaltigen .problem-layout der Branchenseiten nur 562 px bekommt.
   Auf /ki-sichtbarkeit/ und /cms/ steht dieselbe Komponente direkt im
   Container und wurde dadurch 1076 px breit -- eine Karte in dieser
   Breite liest sich wie eine Textwand mit Rahmen. .steps-grid hatte gar
   keine Layout-Regel und stapelte aus demselben Grund.
   ═══════════════════════════════════════════════════════════════════ */
.container > .problem-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.container > .steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
/* Drei Spalten brauchen mehr Grundbreite als zwei: unterhalb von 60em blieben
   je Karte nur 176 bis 220 px Textbreite (gemessen 26.08.2026 auf /cms/).
   Absteigend sortiert -- bei max-width muss der kleinere Breakpoint zuletzt
   stehen, damit er gewinnt. */
@media (max-width: 60em) {
  .container > .steps-grid { grid-template-columns: 1fr; }
}
@media (max-width: 48em) {
  .container > .problem-cards { grid-template-columns: 1fr; }
}

/* Die Solution-Karte steht bewusst in voller Containerbreite. Ihr Text soll das
   nicht mitmachen -- ohne diese Grenze lief er auf 994 px (26.08.2026). */
.solution-card > p { max-width: 50ch; }

/* ═══════════════════════════════════════════════════════════════════
   FLIESSTEXT-BLOECKE ZWEISPALTIG (26.08.2026)

   Bjoerns Befund am Beispiel /webdesign-fuer-gastronomie/: „eine sehr,
   sehr lange Textwurst". Messung bestaetigte es -- bis zu sieben Absaetze
   am Stueck, jeder 549 px breit (Zeilenlaengen-Grenze), daneben 527 px
   ungenutzter Raum in einem 1076-px-Container.

   Loesung ist das Muster, das die FAQ-Sektion schon faehrt: Ueberschrift
   links in einer schmalen Spalte, Text rechts.

   NICHT angewendet auf Bloecke, die ein Raster oder eine Tabelle ueber die
   volle Breite enthalten. Dort sprang die Ausrichtung sonst hin und her --
   Karten ab der linken Kante, Text ab der Textspalte (gesehen auf
   /ki-sichtbarkeit/). Kleine Einschuebe im Textfluss (Garantie-Block,
   Solution-Karte, Zahl-mit-Text) laufen dagegen in der Textspalte mit.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 62em) {
  .content-block > .container:has(> h2 + p):not(:has(> .problem-cards)):not(:has(> .steps-grid)):not(:has(> .process-grid)):not(:has(> .probe-grid)):not(:has(> .compare-cards)):not(:has(> .vorteil-grid)):not(:has(> .problem-layout)):not(:has(> figure)):not(:has(> .services-header)):not(:has(> .process-header)):not(:has(> .absatz-spalten)):not(:has(> .services-grid)) {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 34rem);
    justify-content: center;
    /* Kein Zeilenabstand -- die Absaetze bringen ihren eigenen margin mit,
       sonst steht der Abstand doppelt. */
    gap: 0 4rem;
    align-items: start;
  }

  /* Die Ueberschrift spannt ueber alle Zeilen und steht oben -- sonst
     bestimmt ihre Hoehe die erste Zeile und zwischen dem ersten und
     zweiten Absatz klafft eine Luecke. */
  .content-block > .container:has(> h2 + p):not(:has(> .problem-cards)):not(:has(> .steps-grid)):not(:has(> .process-grid)):not(:has(> .probe-grid)):not(:has(> .compare-cards)):not(:has(> .vorteil-grid)):not(:has(> .problem-layout)):not(:has(> figure)):not(:has(> .services-header)):not(:has(> .process-header)):not(:has(> .absatz-spalten)):not(:has(> .services-grid)) > h2 {
    grid-column: 1;
    grid-row: 1 / span 99;
    align-self: start;
  }

  /* Alles uebrige steht in der Textspalte, auch die Einschuebe. */
  .content-block > .container:has(> h2 + p):not(:has(> .problem-cards)):not(:has(> .steps-grid)):not(:has(> .process-grid)):not(:has(> .probe-grid)):not(:has(> .compare-cards)):not(:has(> .vorteil-grid)):not(:has(> .problem-layout)):not(:has(> figure)):not(:has(> .services-header)):not(:has(> .process-header)):not(:has(> .absatz-spalten)):not(:has(> .services-grid)) > *:not(h2) {
    grid-column: 2;
  }

  /* Lange Bloecke (4+ Absaetze am Stueck) laufen NICHT im Heading-links-Grid --
     dort wurde die rechte Spalte zur naechsten Wurst (Bjoern, 26.08. abends).
     Stattdessen: Ueberschrift in voller Breite, der Text darunter in zwei
     Spalten mit halber Hoehe. */
  .content-block > .container > .absatz-spalten {
    columns: 2;
    column-gap: 4rem;
    margin-bottom: 2.5rem; /* Folge-Boxen (Garantie u.ae.) stossen sonst direkt an den Text */
  }
  .content-block > .container > .absatz-spalten > p {
    break-inside: avoid;
    max-width: none;
  }
  /* Die reveal-Animation schiebt per translateY -- ein transformiertes Element
     wird im Spaltenlayout zum eigenen Containing Block und hebelt in WebKit
     break-inside aus. In Spalten faedt der Text nur (opacity), er faehrt nicht. */
  .absatz-spalten > .reveal { transform: none; }

  /* Die Zeilenlaengen-Grenze von 50ch ist in der 34-rem-Spalte schon
     erreicht -- ohne diese Zeile bliebe rechts erneut Rest. Die volle
     Ausschlusskette ist Pflicht: ohne sie verlieren auch die einspaltig
     gebliebenen Bloecke ihre Grenze und laufen wieder auf 1076 px
     (13 Absaetze betroffen, gemessen 26.08.2026). */
  .content-block > .container:has(> h2 + p):not(:has(> .problem-cards)):not(:has(> .steps-grid)):not(:has(> .process-grid)):not(:has(> .probe-grid)):not(:has(> .compare-cards)):not(:has(> .vorteil-grid)):not(:has(> .problem-layout)):not(:has(> figure)):not(:has(> .services-header)):not(:has(> .process-header)):not(:has(> .absatz-spalten)):not(:has(> .services-grid)) > p { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   VIERER-GLASKARTEN (26.08.2026)

   Auf /ki-sichtbarkeit/ standen zwei identische Kartenrubriken hintereinander.
   Erster Versuch (Ziffern statt Icons) war Kosmetik am selben Baustein --
   Bjoerns Urteil war deutlich. Die zweite Rubrik nutzt jetzt einen ECHTEN
   anderen Baustein: das Glaskarten-Raster von /ueber-mich/, hier 2x2.
   ═══════════════════════════════════════════════════════════════════ */
.services-grid.rubrik-vier { grid-template-columns: 1fr 1fr; }
@media (max-width: 56.25em) {
  .services-grid.rubrik-vier { grid-template-columns: 1fr; }
}