/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  --blue:       #3b82f6;
  --blue-dark:  #2563eb;
  --blue-light: rgba(59,130,246,.10);
  --blue-mid:   #60a5fa;
  --accent:     #7c3aed;
  --text:       #1e2330;
  --text-muted: #64748b;
  --white:      #ffffff;
  --bg:         #f7f9fc;
  --surface:    #eef2f8;
  --card-bg:    #ffffff;
  --shadow:     0 2px 12px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.04);
  --shadow-lg:  0 4px 24px rgba(0,0,0,.11), 0 8px 32px rgba(0,0,0,.07);
  --radius:     12px;
  --transition: .3s ease;
  --max-w:      1360px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Sticky-nav offset for anchor links */
section[id] { scroll-margin-top: 88px; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.04); }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 3px; }

/* ===== NAVIGATION ===== */
.nav {
  position: fixed;
  top: 1rem;
  left: 50%; transform: translateX(-50%);
  width: calc(100% - 2.5rem);
  max-width: var(--max-w);
  z-index: 100;
  background: rgba(10,20,50,.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 32px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.12);
  transition: box-shadow .35s ease, background .35s ease;
  animation: navSlideDown .6s cubic-bezier(.22,1,.36,1) both;
}

@keyframes navSlideDown {
  from { transform: translateX(-50%) translateY(-120%); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);     opacity: 1; }
}

.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 2.5rem;
  height: 62px;
  transition: height .3s ease;
}
.nav.scrolled .nav__inner { height: 62px; }

.nav__logo { display: flex; align-items: center; gap: .65rem; }

.nav__logo-img {
  height: 32px; width: auto; display: block; flex-shrink: 0;
  transition: height .3s ease, opacity .2s ease;
}

.nav__logo-text {
  font-size: .95rem; font-weight: 700; color: #fff;
  letter-spacing: -.01em; line-height: 1;
  transition: opacity .2s ease;
}

.nav__logo:hover .nav__logo-img,
.nav__logo:hover .nav__logo-text { opacity: .72; }

.nav__links {
  display: flex; gap: 2.25rem; list-style: none; align-items: center;
}

.nav__links a {
  font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.82);
  transition: color var(--transition);
  position: relative; padding: .25rem 0;
}
.nav__links a::after {
  content: ''; position: absolute; bottom: -3px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 2px;
  background: linear-gradient(90deg, #6366f1, #3b82f6);
  border-radius: 2px;
  transition: width .25s ease;
}
.nav__links a:hover,
.nav__links a.active { color: #fff; }
.nav.scrolled .nav__links a { color: rgba(255,255,255,.82); }
.nav.scrolled .nav__links a:hover,
.nav.scrolled .nav__links a.active { color: #fff; }
.nav__links a:hover::after,
.nav__links a.active::after { width: 100%; }

/* CTA button */
.nav__right {
  display: flex; align-items: center; gap: 2.25rem;
}

.nav__cta {
  display: inline-flex; align-items: center; gap: .45rem;
  background: transparent;
  color: rgba(255,255,255,.9) !important;
  padding: .38rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.35);
  font-size: .88rem; font-weight: 600;
  letter-spacing: .01em;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.nav__cta:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.6);
}
.nav.scrolled .nav__cta {
  color: rgba(255,255,255,.9) !important;
  border-color: rgba(255,255,255,.35);
  font-size: .84rem;
}
.nav.scrolled .nav__cta:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.6);
}

/* Hamburger */
.nav__burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 8px; margin: 0;
  min-width: 44px; min-height: 44px;
}
.nav__burger span {
  display: block; width: 22px; height: 2px;
  background: rgba(255,255,255,.85); border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition), background var(--transition);
}
.nav.scrolled .nav__burger span { background: rgba(255,255,255,.85); }
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav__mobile {
  display: flex; flex-direction: column;
  background: transparent;
  border-top: 1px solid rgba(255,255,255,.08);
  gap: .25rem;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  max-height: 0;
  padding: 0 1.25rem;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    max-height .42s cubic-bezier(.22,1,.36,1),
    opacity    .32s ease,
    transform  .38s cubic-bezier(.22,1,.36,1),
    padding    .42s cubic-bezier(.22,1,.36,1);
}
.nav__mobile.open {
  max-height: 280px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  padding: .75rem 1.25rem 1rem;
}

.nav__mobile a {
  color: rgba(255,255,255,.85); font-weight: 600; font-size: .9rem;
  padding: .65rem 1rem;
  border-radius: 10px;
  display: flex; align-items: center;
  transition: background var(--transition), color var(--transition),
              opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
  opacity: 0; transform: translateX(-10px);
}
.nav__mobile.open a:nth-child(1) { opacity: 1; transform: none; transition-delay: .08s; }
.nav__mobile.open a:nth-child(2) { opacity: 1; transform: none; transition-delay: .14s; }
.nav__mobile.open a:nth-child(3) { opacity: 1; transform: none; transition-delay: .20s; }
.nav__mobile.open a:nth-child(4) { opacity: 1; transform: none; transition-delay: .26s; }
.nav__mobile a:hover,
.nav__mobile a.active {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.nav__mobile-cta {
  margin-top: .4rem;
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
  color: #fff !important;
  justify-content: center;
  border-radius: 10px !important;
  box-shadow: 0 3px 12px rgba(59,130,246,.3);
}

/* ===== HERO ===== */
.hero {
  min-height: 100dvh; min-height: 100vh;
  display: flex; align-items: center;
  padding: 110px 2rem 80px;
  position: relative; overflow: hidden;
  background: #04080f;
}

/* ── Diagonales Liniengitter ── */
.hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(59,130,246,.06) 0px, rgba(59,130,246,.06) 1px,
      transparent 1px, transparent 52px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(59,130,246,.06) 0px, rgba(59,130,246,.06) 1px,
      transparent 1px, transparent 52px
    );
}

/* ── Bewegende Glow-Punkte (beleuchten das Gitter) ── */
.hero__glow {
  position: absolute; z-index: 1;
  border-radius: 50%; pointer-events: none;
  filter: blur(100px);
}

.hero__glow--1 {
  width: 650px; height: 650px;
  background: radial-gradient(circle, rgba(59,130,246,.28) 0%, transparent 68%);
  top: -180px; left: -120px;
  animation: glowDrift1 20s ease-in-out infinite alternate;
}

.hero__glow--2 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(99,102,241,.2) 0%, transparent 68%);
  bottom: -100px; right: 15%;
  animation: glowDrift2 26s ease-in-out infinite alternate;
}

.hero__glow--3 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(56,189,248,.14) 0%, transparent 68%);
  top: 40%; right: -80px;
  animation: glowDrift3 17s ease-in-out infinite alternate;
}

@keyframes glowDrift1 {
  0%   { transform: translate(0,   0); }
  50%  { transform: translate(260px, 180px); }
  100% { transform: translate(120px, 320px); }
}
@keyframes glowDrift2 {
  0%   { transform: translate(0,    0); }
  50%  { transform: translate(-180px, -120px); }
  100% { transform: translate(-80px,  -260px); }
}
@keyframes glowDrift3 {
  0%   { transform: translate(0,  0); }
  50%  { transform: translate(-140px, 90px); }
  100% { transform: translate(-60px, -130px); }
}

/* Partikel-Canvas */
#heroCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
}

.hero__inner {
  max-width: var(--max-w); margin: 0 auto; width: 100%;
  display: flex; justify-content: center;
  position: relative; z-index: 3;
}

/* Zentrierter Hero-Inhalt (kein Panel mehr) */
.hero__content {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  max-width: 940px; width: 100%;
}

.hero__badge {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: .3rem .9rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.9); margin-bottom: 1.25rem;
}
.hero__badge i { color: var(--blue-mid); }

.hero__title {
  font-size: clamp(2.7rem, 7.5vw, 5.6rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
  color: var(--white); margin-bottom: 1.4rem;
}
.hero__title-accent {
  background: linear-gradient(120deg, #93c5fd 0%, var(--blue-mid) 50%, var(--blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Wort-Rotator (Schreibmaschine) */
.hero__rotate {
  display: inline-block;
  background: linear-gradient(120deg, #93c5fd 0%, var(--blue-mid) 50%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  border-right: .06em solid var(--blue-mid);
  padding-right: .04em;
  animation: heroCaret 1s steps(1) infinite;
}
@keyframes heroCaret {
  0%, 100% { border-color: var(--blue-mid); }
  50%       { border-color: transparent; }
}
.hero__rotate.no-caret {
  border-right: none; animation: none; padding-right: 0;
}

.hero__subtitle {
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  color: rgba(255,255,255,.75); line-height: 1.75;
  margin-bottom: 2rem;
  max-width: 640px;
}

.hero__actions { display: flex; gap: .875rem; flex-wrap: wrap; justify-content: center; }

.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .8rem 1.5rem; border-radius: 9px;
  font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: all var(--transition); border: none;
  white-space: nowrap; min-height: 48px;
}
.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover {
  background: var(--blue-dark); transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(96,165,250,.3);
}
.btn--outline {
  background: transparent; color: var(--white);
  border: 2px solid rgba(255,255,255,.4);
}
.btn--outline:hover {
  border-color: var(--white); background: rgba(255,255,255,.1);
  transform: translateY(-2px);
}

/* ── Hero Trust Pills ── */
.hero__trust {
  display: flex; flex-wrap: wrap; gap: .45rem .8rem;
  margin-bottom: 2rem; justify-content: center;
}
.hero__trust-item {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .83rem; font-weight: 600;
  color: rgba(255,255,255,.65);
}
.hero__trust-item i { color: var(--blue-mid); font-size: .78rem; }


/* ── Eingangs-Animationen ── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__content  { animation: heroFadeUp .9s .05s cubic-bezier(.22,1,.36,1) both; }
.hero__badge    { animation: heroFadeUp .7s .15s cubic-bezier(.22,1,.36,1) both; }
.hero__title    { animation: heroFadeUp .8s .28s cubic-bezier(.22,1,.36,1) both; }
.hero__subtitle { animation: heroFadeUp .7s .44s cubic-bezier(.22,1,.36,1) both; }
.hero__trust    { animation: heroFadeUp .7s .57s cubic-bezier(.22,1,.36,1) both; }
.hero__actions  { animation: heroFadeUp .7s .70s cubic-bezier(.22,1,.36,1) both; }

/* ===== HERO SCROLL INDICATOR ===== */
.hero__scroll {
  position: absolute; bottom: 2rem; left: 50%;
  transform: translateX(-50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  color: rgba(255,255,255,.35); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  transition: color var(--transition);
  animation: scrollBounce 2.5s ease-in-out infinite;
}
.hero__scroll:hover { color: rgba(255,255,255,.75); }
.hero__scroll i { font-size: 1.1rem; }

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

/* ===== HERO PANELS ===== */
/* Geteiltes Glas-Panel (gleicher Stil für beide Boxen) */
.hero__panel {
  background: rgba(6,14,32,.62);
  backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset,
              0 24px 64px rgba(0,0,0,.5),
              0 0 80px rgba(59,130,246,.06);
  animation: heroFadeUp .9s .4s cubic-bezier(.22,1,.36,1) both;
}

/* ── Verfügbarkeits-Karte ── */
.hero__status {
  display: flex; flex-direction: column;
  padding: 1.6rem 1.5rem;
  gap: 1.1rem;
}

.hero__status-head {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.hero__status-livedot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: #22c55e;
  animation: onlinePulse 2.4s ease-in-out infinite;
}

/* Mittelteil – füllt die Höhe */
.hero__status-main {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: .35rem;
  padding: .6rem 0;
}
.hero__status-ring {
  width: 78px; height: 78px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34,197,94,.12);
  border: 1.5px solid rgba(34,197,94,.4);
  margin-bottom: .5rem;
}
.hero__status-ring-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 20px rgba(34,197,94,.65);
  animation: statusBeat 2.4s ease-in-out infinite;
}
@keyframes statusBeat {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(.8);  opacity: .7; }
}
.hero__status-now {
  font-size: 1.35rem; font-weight: 800; color: #fff; letter-spacing: -.02em;
}
.hero__status-sub {
  font-size: .85rem; color: rgba(255,255,255,.6); line-height: 1.5;
}

/* Offline-Zustand */
.hero__status.is-offline .hero__status-livedot { background: #fb923c; animation: none; }
.hero__status.is-offline .hero__status-ring {
  background: rgba(251,146,60,.12); border-color: rgba(251,146,60,.4);
}
.hero__status.is-offline .hero__status-ring-dot {
  background: #fb923c; box-shadow: 0 0 20px rgba(251,146,60,.5); animation: none;
}

/* Sprechzeiten */
.hero__status-hours {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: .85rem 1rem;
}
.hero__status-hours-title {
  display: flex; align-items: center; gap: .45rem;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: rgba(255,255,255,.45); margin-bottom: .55rem;
}
.hero__status-hours-title i { color: var(--blue-mid); }
.hero__status-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; color: rgba(255,255,255,.7);
  padding: .22rem 0;
}
.hero__status-row span:last-child { font-weight: 600; color: rgba(255,255,255,.92); }
.hero__status-row--today span:first-child { color: var(--blue-mid); font-weight: 700; }
.hero__status-row--today span:last-child  { color: var(--blue-mid); }

/* CTA */
.hero__status-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--blue); color: #fff;
  padding: .8rem 1rem; border-radius: 10px;
  font-size: .9rem; font-weight: 700;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.hero__status-cta:hover {
  background: var(--blue-dark); transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(59,130,246,.3);
}

/* Netzwerk-Panel: 3-Spalten-Grid */
.hero__panel--network {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0 1.25rem;
  padding: 2.5rem 1.75rem;
  overflow: hidden;
}

/* SVG für dynamische Linien */
.hnet-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 0;
}

.hnet-line {
  stroke: rgba(239,68,68,.22);
  stroke-width: 1.2; stroke-dasharray: 5 7; fill: none;
  transition: stroke .4s ease;
}
.hnet-line--connecting {
  stroke: rgba(250,204,21,.55);
  animation: hnetFlow .8s linear infinite;
}
.hnet-line--active {
  stroke: rgba(59,130,246,.4);
  animation: hnetFlow 2.4s linear infinite;
}
@keyframes hnetFlow { to { stroke-dashoffset: -24; } }

@keyframes onlinePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  50%       { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* Spalten */
.hnet-col {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 1.75rem;
}
.hnet-col--left  { align-items: flex-end; }
.hnet-col--center { align-items: center; }
.hnet-col--right { align-items: flex-start; }

/* Knoten */
.hnet-node {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  animation: hnetFloat 5s ease-in-out infinite;
  animation-delay: var(--fa, 0s);
}
@keyframes hnetFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-9px); }
}

/* Icon-Kreis */
.hnet-icon {
  width: 80px; height: 80px; border-radius: 50%;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.65rem;
  transition: color .4s ease, background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.hnet-label {
  font-size: .6rem; font-weight: 700; letter-spacing: .05em;
  color: rgba(255,255,255,.45); text-transform: uppercase; white-space: nowrap;
}

/* ── Defekt (rot) ── */
.hnet-node--broken .hnet-icon {
  color: #f87171; background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.38);
  box-shadow: 0 0 20px rgba(239,68,68,.2), 0 4px 16px rgba(0,0,0,.35);
  animation: brokenFlicker 2s ease-in-out infinite;
}
@keyframes brokenFlicker {
  0%, 100% { opacity: 1; }
  48%, 52% { opacity: .45; }
  50%      { opacity: .25; }
}

/* ── Verbindet (gelb) ── */
.hnet-node--connecting .hnet-icon {
  color: #fde047; background: rgba(250,204,21,.12);
  border: 1px solid rgba(250,204,21,.45);
  animation: connectPulse .55s ease-in-out infinite;
}
@keyframes connectPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(250,204,21,.25); }
  50%       { box-shadow: 0 0 42px rgba(250,204,21,.5), 0 0 60px rgba(250,204,21,.2); }
}

/* ── Repariert (grün) ── */
.hnet-node--fixed .hnet-icon {
  color: #4ade80; background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.38);
  animation: fixedGlow 2.5s ease-in-out infinite;
}
@keyframes fixedGlow {
  0%, 100% { box-shadow: 0 0 18px rgba(34,197,94,.18); }
  50%       { box-shadow: 0 0 34px rgba(34,197,94,.35), 0 0 50px rgba(34,197,94,.12); }
}

/* ── Mittel-Knoten ── */
.hnet-node--center { animation: none; }
.hnet-node--center .hnet-icon {
  width: 120px; height: 52px; border-radius: 26px;
  background: rgba(59,130,246,.16); border: 1.5px solid rgba(59,130,246,.45);
  animation: centerPulse 3s ease-in-out infinite;
  padding: 0 .8rem; font-size: 1rem;
}
@keyframes centerPulse {
  0%, 100% { box-shadow: 0 0 30px rgba(59,130,246,.2),  0 0 60px rgba(59,130,246,.08); }
  50%       { box-shadow: 0 0 52px rgba(59,130,246,.4),  0 0 90px rgba(59,130,246,.18); }
}
.hnet-brand {
  font-size: .68rem; font-weight: 700; color: #fff;
  letter-spacing: .02em; white-space: nowrap;
}

/* Glitch-Zeichen */
.hnet-g         { color: #f87171; font-family: monospace; font-weight: 800; display: inline-block; }
.hnet-g--healed { color: #fff; font-family: inherit; font-weight: 700; }

/* ===== TRUST BAR ===== */
.trust-bar {
  background: var(--surface);
  border-bottom: 1px solid rgba(0,0,0,.07);
  padding: .65rem 0;
  overflow: hidden;
}

.trust-bar__track {
  display: flex; align-items: center;
  width: max-content;
  animation: trustTicker 24s linear infinite;
}

.trust-bar__track:hover { animation-play-state: paused; }

@keyframes trustTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--ticker-move, -50%)); }
}

.trust-bar__item {
  display: flex; align-items: center; gap: .55rem;
  padding: .35rem 2.2rem;
  font-size: .86rem; font-weight: 600; color: var(--text-muted);
  white-space: nowrap; flex-shrink: 0;
}

.trust-bar__item i { color: var(--blue); font-size: .95rem; }

.trust-bar__sep {
  width: 1px; height: 20px;
  background: rgba(0,0,0,.1); flex-shrink: 0;
}

/* ===== SECTION BASE ===== */
.section { padding: 5rem 1.5rem; }
.section--alt { background: var(--surface); }

.section__inner { max-width: var(--max-w); margin: 0 auto; }

.section__header {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: auto auto;
  column-gap: 3rem;
  align-items: center;
  margin-bottom: 2.75rem;
  text-align: left;
}
.section__header::after { display: none; }

.section__label {
  grid-column: 1; grid-row: 1;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .65rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #2563eb;
  background: linear-gradient(135deg, rgba(59,130,246,.1) 0%, rgba(99,102,241,.1) 100%);
  border: 1px solid rgba(59,130,246,.25);
  border-radius: 999px;
  padding: .28rem .85rem;
  margin-bottom: .55rem;
  align-self: end;
}
.section__label::before {
  content: '';
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  flex-shrink: 0;
}

.section__title {
  grid-column: 1; grid-row: 2;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.15; letter-spacing: -.03em;
  margin-bottom: 0;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

.section__subtitle {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: center;
  font-size: .95rem; color: var(--text-muted);
  max-width: none; margin: 0;
  line-height: 1.75;
  padding-left: 3rem;
  border-left: 2px solid rgba(99,102,241,.18);
}

/* ===== LEISTUNGEN BG ICONS ===== */
#leistungen { position: relative; overflow: hidden; }
#leistungen .section__inner { position: relative; z-index: 1; }

.srv-bg-icons { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.srv-bg-icons i {
  position: absolute;
  color: var(--blue);
  opacity: .045;
}
.srv-bg-icons i:nth-child(1) { font-size: 8rem;  top: 4%;   left: 3%;   transform: rotate(-18deg); }
.srv-bg-icons i:nth-child(2) { font-size: 6.5rem; top: 10%;  right: 5%;  transform: rotate(14deg); }
.srv-bg-icons i:nth-child(3) { font-size: 7.5rem; top: 52%;  left: 1%;   transform: rotate(-8deg); }
.srv-bg-icons i:nth-child(4) { font-size: 5.5rem; bottom: 8%; right: 3%;  transform: rotate(22deg); }
.srv-bg-icons i:nth-child(5) { font-size: 9rem;   top: 30%;  left: 42%;  transform: rotate(-5deg);  opacity: .025; }
.srv-bg-icons i:nth-child(6) { font-size: 7rem;   bottom: 4%; left: 22%;  transform: rotate(12deg); }
.srv-bg-icons i:nth-child(7) { font-size: 6rem;   top: 68%;  right: 14%; transform: rotate(-20deg); }
.srv-bg-icons i:nth-child(8) { font-size: 5rem;   top: 6%;   left: 52%;  transform: rotate(28deg);  opacity: .03; }
.srv-bg-icons i:nth-child(9) { font-size: 6.5rem; bottom: 28%; left: 12%; transform: rotate(-10deg); opacity: .03; }

/* ===== BENTO GRID ===== */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.bento-card {
  position: relative;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .28s ease, box-shadow .28s ease;
}

.bento-card:hover {
  transform: scale(1.04);
  border-color: rgba(var(--bento-rgb), .42);
  box-shadow: 0 16px 48px rgba(var(--bento-rgb), .15), 0 4px 16px rgba(0,0,0,.35);
}

.bento-card::before {
  content: '';
  position: absolute; top: -80px; right: -80px;
  width: 210px; height: 210px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--bento-rgb), .1) 0%, transparent 68%);
  pointer-events: none;
  transition: transform .35s ease;
}
.bento-card:hover::before { transform: scale(1.25); }

.bento-card--wide { grid-column: span 2; }

.bento-card__icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: rgba(var(--bento-rgb), .12);
  border: 1px solid rgba(var(--bento-rgb), .22);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; color: rgb(var(--bento-rgb));
  margin-bottom: 1rem; flex-shrink: 0;
  transition: background .25s, transform .28s cubic-bezier(.34,1.56,.64,1);
}
.bento-card:hover .bento-card__icon {
  background: rgba(var(--bento-rgb), .22);
  transform: scale(1.12) rotate(-5deg);
}

.bento-card__title {
  font-size: .95rem; font-weight: 800;
  color: var(--text); letter-spacing: -.02em;
  margin-bottom: .5rem; line-height: 1.25;
}

.bento-card__text {
  font-size: .82rem; color: var(--text-muted);
  line-height: 1.6; flex: 1;
}

/* „Preis ab"-Badge auf der Kachel */
.bento-card__price {
  align-self: flex-start;
  margin-top: .7rem;
  font-size: .78rem; font-weight: 700;
  color: rgb(var(--bento-rgb));
  background: rgba(var(--bento-rgb), .12);
  border: 1px solid rgba(var(--bento-rgb), .25);
  padding: .22rem .6rem; border-radius: 999px;
}

.bento-card__cta {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 1.3rem;
  font-size: .84rem; font-weight: 700;
  color: rgb(var(--bento-rgb));
  width: fit-content;
  transition: gap .2s ease;
}
.bento-card__cta i { font-size: .78rem; transition: transform .2s; }
.bento-card__cta:hover { gap: .7rem; }
.bento-card__cta:hover i { transform: translateX(3px); }

/* Klickbare Karte */
.bento-card[data-service] {
  cursor: pointer;
  border: none; text-align: left;
  width: 100%;
}

/* Mehr-erfahren Hint */
.bento-card__hint {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: 1.1rem;
  font-size: .78rem; font-weight: 700;
  color: rgba(var(--bento-rgb), .7);
  letter-spacing: .02em;
  transition: gap .2s ease, color .2s ease;
}
.bento-card__hint i {
  font-size: .7rem;
  transition: transform .2s ease;
}
.bento-card[data-service]:hover .bento-card__hint {
  gap: .55rem; color: rgba(var(--bento-rgb), 1);
}
.bento-card[data-service]:hover .bento-card__hint i { transform: translateX(4px); }

/* ===== SERVICE DETAIL MODAL ===== */
.srv-modal__box {
  max-width: 580px;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* Header mit Gradient-Banner */
.srv-modal__header {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 2.5rem 2rem 1.75rem;
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, rgba(var(--srv-rgb,59,130,246),.18) 0%, transparent 70%),
    linear-gradient(180deg, rgba(var(--srv-rgb,59,130,246),.07) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

/* Schließen-Button oben rechts */
.srv-modal__header .modal__close {
  position: absolute; top: 1rem; right: 1rem;
}

/* Großes Icon mit Glow */
.srv-modal__icon {
  width: 72px; height: 72px;
  border-radius: 20px;
  background: rgba(var(--srv-rgb,59,130,246),.15);
  border: 1px solid rgba(var(--srv-rgb,59,130,246),.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; color: rgb(var(--srv-rgb,59,130,246));
  margin-bottom: 1rem;
  box-shadow: 0 0 32px rgba(var(--srv-rgb,59,130,246),.25), 0 8px 24px rgba(0,0,0,.2);
  animation: srvIconPop .4s .1s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes srvIconPop {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.srv-modal__title {
  font-size: 1.25rem; font-weight: 800;
  color: var(--text); letter-spacing: -.03em;
  line-height: 1.2; margin-bottom: .35rem;
}

.srv-modal__sub {
  font-size: .75rem; color: var(--text-muted);
  letter-spacing: .04em;
}

/* Leistungsliste */
.modal__body { padding: 1.5rem 1.75rem; }

.srv-modal__list {
  list-style: none;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .6rem .75rem;
}

.srv-modal__item {
  display: flex; align-items: flex-start; gap: .6rem;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 10px;
  padding: .65rem .8rem;
  font-size: .82rem; line-height: 1.45; color: var(--text);
  animation: itemFadeIn .3s ease both;
}
@keyframes itemFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.srv-modal__item:nth-child(1) { animation-delay: .05s; }
.srv-modal__item:nth-child(2) { animation-delay: .10s; }
.srv-modal__item:nth-child(3) { animation-delay: .15s; }
.srv-modal__item:nth-child(4) { animation-delay: .20s; }
.srv-modal__item:nth-child(5) { animation-delay: .25s; }
.srv-modal__item:nth-child(6) { animation-delay: .30s; }

.srv-modal__item i {
  color: rgb(var(--srv-rgb,59,130,246)); font-size: .7rem;
  flex-shrink: 0; margin-top: .2rem;
}

/* Kontakt-Footer */
.srv-modal__footer {
  padding: 1.1rem 1.75rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.15);
}

.srv-modal__footer-label {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: .75rem;
}

.srv-modal__actions {
  display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem;
}

.srv-modal__btn {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .35rem;
  padding: .9rem .75rem;
  border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.srv-modal__btn i { font-size: 1.25rem; }
.srv-modal__btn span { font-size: .78rem; font-weight: 700; line-height: 1.3; }

.srv-modal__btn--chat {
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.28);
  color: #93c5fd;
}
.srv-modal__btn--chat:hover {
  background: rgba(59,130,246,.22);
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(59,130,246,.25);
}

.srv-modal__btn--form {
  background: rgba(148,163,184,.1);
  border-color: rgba(148,163,184,.25);
  color: #94a3b8;
}
.srv-modal__btn--form:hover {
  background: rgba(148,163,184,.2);
  border-color: rgba(148,163,184,.45);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}

.srv-modal__btn--mail {
  background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.25);
  color: #4ade80;
}
.srv-modal__btn--mail:hover {
  background: rgba(34,197,94,.2);
  border-color: rgba(34,197,94,.5);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(34,197,94,.2);
}

/* Leistungs-Modal auf dem Handy: kompakter & aufgeräumter */
@media (max-width: 600px) {
  .srv-modal__box { max-height: 90dvh; border-radius: 20px; }
  .srv-modal__header { padding: 1.6rem 1.25rem 1.1rem; }
  .srv-modal__icon {
    width: 54px; height: 54px; font-size: 1.5rem;
    border-radius: 15px; margin-bottom: .7rem;
  }
  .srv-modal__title { font-size: 1.1rem; }
  .srv-modal__sub { font-size: .72rem; }
  .srv-modal .modal__body { padding: 1.1rem 1.15rem; }
  .srv-modal__list { grid-template-columns: 1fr; gap: .5rem; }
  .srv-modal__item { padding: .6rem .75rem; font-size: .85rem; }
  .srv-modal__footer { padding: 1rem 1.15rem 1.2rem; }
  .srv-modal__footer-label { margin-bottom: .6rem; }
  /* Aktions-Buttons bleiben als kompakte 3er-Reihe (statt großer Blöcke) */
  .srv-modal__actions { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .srv-modal__btn { padding: .75rem .3rem; border-radius: 13px; gap: .3rem; }
  .srv-modal__btn i { font-size: 1.15rem; }
  .srv-modal__btn span { font-size: .64rem; }
}

/* Per-card accent colours */
.bento-card--homepage { --bento-rgb: 14,165,233; }
.bento-card--vpn      { --bento-rgb: 34,197,94;  }
.bento-card--pc       { --bento-rgb: 167,139,250; }
.bento-card--nas      { --bento-rgb: 251,146,60;  }
.bento-card--remote   { --bento-rgb: 103,232,249; }
.bento-card--mobile   { --bento-rgb: 244,114,182; }
.bento-card--mail     { --bento-rgb: 56,189,248;  }

/* ===== PROCESS STEPS ===== */
.steps {
  display: grid;
  grid-template-columns: 1fr 44px 1fr 44px 1fr 44px 1fr 44px 1fr;
  gap: .5rem; align-items: stretch;
}

/* Initial hidden state — JS adds .steps--ready */
.steps--ready .step        { opacity: 0; transform: translateY(30px); }
.steps--ready .step__arrow { opacity: 0; }

.steps--ready .step {
  transition: opacity .55s ease, transform .65s cubic-bezier(.22,1,.36,1), box-shadow var(--transition);
}
.steps--ready .step__arrow { transition: opacity .35s ease; }

/* Trigger transitions when JS adds .steps--active */
.steps--active .step        { opacity: 1; transform: translateY(0); }
.steps--active .step__arrow { opacity: 1; }

.step {
  background: var(--card-bg);
  border: 1px solid rgba(59,130,246,.1);
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
  border-radius: var(--radius);
  padding: 2.25rem 1.5rem 1.75rem;
  text-align: center; position: relative;
  display: flex; flex-direction: column; align-items: center;
  transition: transform var(--transition), box-shadow var(--transition);
}

.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.step__num {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px;
  background: var(--blue); color: var(--white); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800;
  box-shadow: 0 2px 8px rgba(21,101,192,.4);
}

.step__icon {
  width: 68px; height: 68px;
  background: var(--blue-light); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--blue);
  margin: .5rem auto 1.25rem;
  transition: background var(--transition), color var(--transition);
}

.step:hover .step__icon { background: var(--blue); color: var(--white); }

.step__title { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.step__text  { font-size: .875rem; color: var(--text-muted); line-height: 1.65; }

.step__arrow {
  display: flex; align-items: center; justify-content: center;
  align-self: center;
  color: var(--blue-mid); font-size: 1.3rem;
  padding-top: 0;
}

/* ── Keyframes ── */
@keyframes numPop {
  0%   { transform: translateX(-50%) scale(0); opacity: 0; }
  65%  { transform: translateX(-50%) scale(1.3); opacity: 1; }
  100% { transform: translateX(-50%) scale(1);   opacity: 1; }
}

@keyframes iconBounceIn {
  0%   { transform: scale(.5);  opacity: 0; }
  65%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

@keyframes stepGlow {
  0%   { box-shadow: none;                          border-color: rgba(255,255,255,.07); }
  40%  { box-shadow: 0 0 28px rgba(14,165,233,.22); border-color: rgba(14,165,233,.4); }
  100% { box-shadow: none;                          border-color: rgba(255,255,255,.07); }
}

@keyframes arrowFlash {
  0%   { color: var(--blue);     text-shadow: 0 0 14px rgba(14,165,233,.9); transform: translateX(-6px); }
  60%  { color: var(--blue);     text-shadow: 0 0 6px  rgba(14,165,233,.4); transform: translateX(2px); }
  100% { color: var(--blue-mid); text-shadow: none;                          transform: translateX(0); }
}

/* ── Step 1 ── */
.steps--active .step--1 .step__num  { animation: numPop       .4s  cubic-bezier(.34,1.56,.64,1) .30s both; }
.steps--active .step--1 .step__icon { animation: iconBounceIn .45s cubic-bezier(.34,1.56,.64,1) .45s both; }
.steps--active .step--1             { animation: stepGlow      .9s ease .52s; }
.steps--active .conn--1 i           { animation: arrowFlash    .6s cubic-bezier(.22,1,.36,1)    .65s both; }

/* ── Step 2 ── */
.steps--active .step--2 .step__num  { animation: numPop       .4s  cubic-bezier(.34,1.56,.64,1) 1.10s both; }
.steps--active .step--2 .step__icon { animation: iconBounceIn .45s cubic-bezier(.34,1.56,.64,1) 1.25s both; }
.steps--active .step--2             { animation: stepGlow      .9s ease 1.32s; }
.steps--active .conn--2 i           { animation: arrowFlash    .6s cubic-bezier(.22,1,.36,1)    1.45s both; }

/* ── Step 3 ── */
.steps--active .step--3 .step__num  { animation: numPop       .4s  cubic-bezier(.34,1.56,.64,1) 1.90s both; }
.steps--active .step--3 .step__icon { animation: iconBounceIn .45s cubic-bezier(.34,1.56,.64,1) 2.05s both; }
.steps--active .step--3             { animation: stepGlow      .9s ease 2.12s; }
.steps--active .conn--3 i           { animation: arrowFlash    .6s cubic-bezier(.22,1,.36,1)    2.25s both; }

/* ── Step 4 ── */
.steps--active .step--4 .step__num  { animation: numPop       .4s  cubic-bezier(.34,1.56,.64,1) 2.70s both; }
.steps--active .step--4 .step__icon { animation: iconBounceIn .45s cubic-bezier(.34,1.56,.64,1) 2.85s both; }
.steps--active .step--4             { animation: stepGlow      .9s ease 2.92s; }
.steps--active .conn--4 i           { animation: arrowFlash    .6s cubic-bezier(.22,1,.36,1)    3.05s both; }

/* ── Step 5 ── */
.steps--active .step--5 .step__num  { animation: numPop       .4s  cubic-bezier(.34,1.56,.64,1) 3.50s both; }
.steps--active .step--5 .step__icon { animation: iconBounceIn .45s cubic-bezier(.34,1.56,.64,1) 3.65s both; }

/* ── Mobile: Schritte als Abfolge an derselben Stelle (JS: .steps--carousel) ── */
.steps-dots { display: none; }
@media (max-width: 768px) {
  .steps.steps--carousel {
    display: block;
    position: relative;
    min-height: 230px;
    gap: 0;
  }
  .steps.steps--carousel .step {
    position: absolute;
    top: 0; left: 0; right: 0;
    margin: 0;
    opacity: 0;
    transform: translateY(18px) scale(.98);
    transition: opacity .45s ease, transform .5s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
  }
  .steps.steps--carousel .step--current {
    position: relative;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .steps.steps--carousel .step__arrow { display: none; }

  .steps.steps--carousel ~ .steps-dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.5rem;
  }
}
.steps-dots button {
  width: 9px; height: 9px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  background: rgba(14,165,233,.28);
  -webkit-appearance: none; appearance: none;
  transition: background .3s ease, transform .3s ease;
}
.steps-dots button.is-active { background: var(--blue); transform: scale(1.35); }

/* ===== ABOUT BG ICONS ===== */
.about__text-side { position: relative; overflow: hidden; }
.about-bg-icons { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.about-bg-icons i {
  position: absolute;
  color: var(--blue);
  opacity: .04;
}
.about-bg-icons i:nth-child(1) { font-size: 7rem;  top: 5%;   right: 6%;  transform: rotate(15deg); }
.about-bg-icons i:nth-child(2) { font-size: 5.5rem; top: 18%;  right: 28%; transform: rotate(-10deg); opacity: .03; }
.about-bg-icons i:nth-child(3) { font-size: 8rem;  bottom: 8%; right: 4%;  transform: rotate(-20deg); }
.about-bg-icons i:nth-child(4) { font-size: 5rem;  top: 45%;  right: 18%; transform: rotate(8deg);  opacity: .03; }
.about-bg-icons i:nth-child(5) { font-size: 6.5rem; bottom: 28%; right: 32%; transform: rotate(22deg); opacity: .03; }
.about-bg-icons i:nth-child(6) { font-size: 7.5rem; top: 8%;   right: 52%; transform: rotate(-12deg); opacity: .025; }
.about-bg-icons i:nth-child(7) { font-size: 5.5rem; bottom: 12%; right: 52%; transform: rotate(18deg); opacity: .03; }
.about-bg-icons i:nth-child(8) { font-size: 4.5rem; top: 65%;  right: 8%;  transform: rotate(-8deg);  opacity: .035; }

/* Inhalt über den Hintergrund-Icons */
.about__text-side > *:not(.about-bg-icons) { position: relative; z-index: 1; }

/* ===== ABOUT (diagonal split) ===== */
.section--about {
  overflow: hidden;
  background: #ffffff;
}

.about__split {
  display: grid;
  grid-template-columns: 44% 56%;
  min-height: 480px;
}

/* ── Image side ── */
.about__img-side {
  position: relative;
  background: linear-gradient(150deg, #0a1628 0%, #0f2347 55%, #1a3a6b 100%);
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
  z-index: 1;
  overflow: hidden;
  min-height: 520px;
}

/* Portrait fills the entire panel */
.about__portrait-wrap {
  position: absolute;
  inset: 0;
}

.about__portrait-frame {
  position: absolute; inset: 0;
  border-radius: 0; overflow: hidden;
  border: none; box-shadow: none;
}

.about__portrait {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
  display: block;
  opacity: .72;
}

/* Bottom gradient – name/role readability */
.about__img-side::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,22,40,.12) 20%, rgba(6,12,36,.92) 100%);
}

/* Shimmer sweep */
.about__img-side::before {
  content: '';
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(108deg, transparent 20%, rgba(147,197,253,.05) 50%, transparent 80%);
  background-size: 350% 100%;
  animation: about-shimmer 14s ease-in-out infinite;
}
@keyframes about-shimmer {
  0%        { background-position: 250% 0; opacity: 0; }
  12%       { opacity: 1; }
  50%, 100% { background-position: -60% 0; opacity: 0; }
}


/* Ken Burns */
.about__img-side.visible .about__portrait {
  animation: about-kenburns 20s ease-in-out infinite alternate;
}
@keyframes about-kenburns {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.10) translate(-1.5%, 1.5%); }
}

/* Entrance: slide from left + scale */
.about__img-side.fade-in {
  opacity: 0;
  transform: translateX(-52px) scale(.96);
  transition: opacity 1s ease, transform 1s cubic-bezier(.16,1,.3,1);
}
.about__img-side.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* Caption – absolute at bottom of panel */
.about__img-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  padding: 2.5rem 2.5rem 2rem;
  display: flex; flex-direction: column; gap: .3rem;
  text-align: left;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .8s .7s ease, transform .8s .7s cubic-bezier(.16,1,.3,1);
}
.about__img-side.visible .about__img-caption {
  opacity: 1; transform: none;
}

.about__photo-name {
  color: #fff;
  font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em;
}

.about__photo-role {
  color: rgba(255,255,255,.5);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ── Text side ── */
.about__text-side {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 4rem 3rem 5rem;
}

.about__label {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #2563eb;
  background: linear-gradient(135deg, rgba(59,130,246,.1) 0%, rgba(99,102,241,.1) 100%);
  border: 1px solid rgba(59,130,246,.25);
  border-radius: 999px;
  padding: .32rem 1rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 1px 8px rgba(59,130,246,.1);
  align-self: flex-start;
}

.about__label-dot {
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  flex-shrink: 0;
  box-shadow: 0 0 0 2.5px rgba(99,102,241,.2);
}

.about__title {
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  font-weight: 900; line-height: 1.1; letter-spacing: -.035em;
  margin-bottom: 1.25rem;
  color: var(--text);
}

.about__title-accent {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about__lead {
  font-size: 1.05rem; color: var(--text-muted);
  line-height: 1.8; margin-bottom: 2rem;
  max-width: 520px;
}

/* Feature rows */
.about__features {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 2rem;
}

.about__feature {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(59,130,246,.04);
  border: 1px solid rgba(59,130,246,.10);
  border-left: 3px solid rgba(59,130,246,.35);
  border-radius: 10px;
  transition: background .2s, border-color .2s, transform .2s;
}
@media (hover: hover) {
  .about__feature:hover {
    background: rgba(59,130,246,.08);
    border-left-color: var(--blue);
    transform: translateX(3px);
  }
}

.about__feature-icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(59,130,246,.14) 0%, rgba(99,102,241,.14) 100%);
  border: 1px solid rgba(59,130,246,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: #3b82f6;
}

.about__feature-title {
  font-size: .9rem; font-weight: 700; color: var(--text);
  display: block; margin-bottom: .2rem; line-height: 1.3;
}

.about__feature-text {
  font-size: .82rem; color: var(--text-muted);
  line-height: 1.55; margin: 0;
}

/* Stats bar */
.about__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(59,130,246,.12);
}

.about__stat {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.about__stat i {
  color: var(--blue);
  font-size: 1rem;
  margin-top: .15rem;
  flex-shrink: 0;
}

.about__stat strong {
  display: block;
  font-size: .84rem;
  font-weight: 700;
  color: var(--text);
}

.about__stat small {
  font-size: .75rem;
  opacity: .75;
}

/* ===== KONTAKT (dark section) ===== */
.section--kontakt {
  background: linear-gradient(135deg, #060d1f 0%, #0a1628 55%, #0d1f40 100%);
  position: relative; overflow: hidden;
}
.kontakt__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.section--kontakt::before {
  content: '';
  position: absolute; top: -20%; right: -5%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(59,130,246,.1) 0%, transparent 65%);
  pointer-events: none;
}
.section--kontakt::after {
  content: '';
  position: absolute; bottom: -10%; left: -5%;
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(99,102,241,.08) 0%, transparent 65%);
  pointer-events: none;
}

.kontakt__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative; z-index: 1;
}

.kontakt__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .65rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: #60a5fa; margin-bottom: .85rem;
}
.kontakt__eyebrow i { font-size: .4rem; }

.kontakt__heading {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.1;
  color: #ffffff; margin-bottom: 1.1rem;
}

.kontakt__lead {
  font-size: .95rem; color: rgba(255,255,255,.6);
  line-height: 1.8; margin-bottom: 2rem; max-width: 420px;
}

.kontakt__chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.kontakt__chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .75rem; font-weight: 600;
  color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px; padding: .3rem .9rem;
}
.kontakt__chip i { font-size: .7rem; color: #60a5fa; }

.kontakt__cards {
  display: flex; flex-direction: column; gap: 1rem;
}
/* button-Reset wenn kontakt__card als <button> verwendet wird */
button.kontakt__card {
  width: 100%; font-family: inherit; cursor: pointer; text-align: left;
}

.kontakt__card {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.4rem 1.6rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  text-decoration: none; color: #fff;
  transition: background .25s, border-color .25s, transform .25s ease;
}
.kontakt__card:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(59,130,246,.45);
  transform: translateX(5px);
}
.kontakt__card-icon {
  width: 50px; height: 50px; border-radius: 13px; flex-shrink: 0;
  background: rgba(59,130,246,.18); border: 1px solid rgba(59,130,246,.28);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #60a5fa;
  transition: transform .25s;
}
.kontakt__card--mail .kontakt__card-icon {
  background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.25); color: #4ade80;
}
.kontakt__card:hover .kontakt__card-icon { transform: scale(1.08); }
.kontakt__card-body { flex: 1; min-width: 0; }
.kontakt__card-title { font-size: .98rem; font-weight: 700; margin-bottom: .2rem; }
.kontakt__card-desc  { font-size: .8rem; color: rgba(255,255,255,.5); word-break: break-all; }
.kontakt__card-arrow {
  color: rgba(255,255,255,.25); font-size: .8rem;
  transition: transform .25s, color .25s;
}
.kontakt__card:hover .kontakt__card-arrow {
  transform: translateX(4px); color: rgba(255,255,255,.65);
}

/* ===== MODALS ===== */
.modal {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(2,8,23,.85); backdrop-filter: blur(6px);
}
.modal__box {
  position: relative; z-index: 1;
  width: 100%; max-width: 540px; max-height: 90vh;
  background: #1b1e27; border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px; display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(20px) scale(.97);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.modal.is-open .modal__box { transform: none; }
.modal__header {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.1rem 1.75rem; border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
}
.modal__title { font-size: 1rem; font-weight: 700; flex: 1; }
.modal__close {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.1);
  color: var(--text-muted); font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s ease; font-family: inherit;
}
.modal__close:hover { background: rgba(255,255,255,.12); color: var(--text); }
.modal__body {
  flex: 1; overflow-y: auto; padding: 1.35rem 1.75rem 1.25rem;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
}

/* Modal Footer */
.modal__footer {
  padding: 1rem 1.75rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex; justify-content: flex-end;
  flex-shrink: 0;
}

/* Homepage-Modal Inhalt */
.hp-modal__lead {
  font-size: .93rem; color: var(--text-muted);
  line-height: 1.7; margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,.07);
}

.hp-modal__items { display: flex; flex-direction: column; gap: 1.1rem; }

.hp-modal__item {
  display: flex; gap: 1rem; align-items: flex-start;
}

.hp-modal__icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 10px;
  background: rgba(14,165,233,.12);
  border: 1px solid rgba(14,165,233,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; color: #0ea5e9;
}

.hp-modal__item strong {
  display: block; font-size: .92rem; font-weight: 700;
  color: var(--text); margin-bottom: .25rem;
}

.hp-modal__item p {
  font-size: .83rem; color: var(--text-muted);
  line-height: 1.6; margin: 0;
}

.hp-modal__optional {
  font-size: .75rem; font-weight: 500;
  color: #0ea5e9;
  letter-spacing: .01em;
}

/* Homepage-Modal – passt sich dem Kachel-Design an */
#homepageModal .modal__box {
  background: var(--card-bg);
  border: 1.5px solid rgba(0,0,0,.07);
  box-shadow: 0 8px 40px rgba(0,0,0,.14);
}
#homepageModal .modal__header { border-bottom-color: rgba(0,0,0,.07); }
#homepageModal .modal__title  { color: var(--text); }
#homepageModal .modal__close  {
  background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.09); color: var(--text-muted);
}
#homepageModal .modal__close:hover { background: rgba(0,0,0,.08); color: var(--text); }
#homepageModal .modal__footer { border-top-color: rgba(0,0,0,.07); }

/* Bento-Karte: Actions-Zeile */
.bento-card__actions {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 1.3rem; flex-wrap: wrap;
}

.bento-card__details {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .84rem; font-weight: 600;
  color: rgba(14,165,233,.8);
  background: none; border: none; cursor: pointer;
  font-family: inherit; padding: 0;
  transition: color .2s, gap .2s;
}
.bento-card__details i { font-size: .78rem; transition: transform .2s; }
.bento-card__details:hover { color: rgb(14,165,233); }
.bento-card__details:hover i { transform: scale(1.2); }

/* ── Form Wizard ── */
.wiz__dots {
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: 1.5rem;
}
.wiz__progress-track {
  flex: 1; height: 4px; background: rgba(255,255,255,.13);
  border-radius: 4px; overflow: hidden;
}
.wiz__progress-fill {
  height: 100%; background: var(--blue);
  border-radius: 4px; width: 12.5%;
  transition: width .4s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 10px rgba(14,165,233,.55);
}
.wiz__progress-label {
  font-size: .72rem; font-weight: 700;
  color: var(--text-muted); white-space: nowrap; letter-spacing: .04em;
}
.wiz__step-label { display: none; }

/* Kategorie-Kacheln */
.wiz__cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .6rem;
  margin-top: 1rem;
}

.wiz__cat-btn {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: .9rem .6rem;
  background: rgba(0,0,0,.03);
  border: 1.5px solid rgba(0,0,0,.09);
  border-radius: 12px;
  color: var(--text-muted);
  font-family: inherit; font-size: .8rem; font-weight: 600;
  cursor: pointer; text-align: center;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.wiz__cat-btn i { font-size: 1.35rem; color: var(--blue); opacity: .65; transition: opacity .18s; }
.wiz__cat-btn:hover { background: rgba(59,130,246,.07); border-color: rgba(59,130,246,.3); color: var(--text); }
.wiz__cat-btn:hover i { opacity: 1; }
.wiz__cat-btn--active {
  background: rgba(59,130,246,.1);
  border-color: rgba(59,130,246,.55);
  color: var(--blue);
}
.wiz__cat-btn--active i { opacity: 1; }
.wiz__input--valid {
  border-color: rgba(34,197,94,.5) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.1) !important;
}

.wiz__steps { position: relative; min-height: 200px; }
.wiz__step  { display: none; }
.wiz__step--active { display: block; }

@keyframes wizSlideIn     { from { opacity:0; transform:translateX(40px);  } to { opacity:1; transform:none; } }
@keyframes wizSlideOut    { from { opacity:1; transform:none; } to { opacity:0; transform:translateX(-40px); } }
@keyframes wizSlideInBack { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:none; } }
@keyframes wizSlideOutBack{ from { opacity:1; transform:none; } to { opacity:0; transform:translateX(40px);  } }

.wiz__step-icon {
  width: 50px; height: 50px; border-radius: 14px;
  background: rgba(14,165,233,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: var(--blue); margin-bottom: .9rem;
}
.wiz__step-title { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); margin-bottom: .25rem; }
.wiz__step-hint  { font-size: .83rem; color: var(--text-muted); line-height: 1.55; }
.wiz__fields { display: flex; flex-direction: column; gap: .85rem; margin-top: 1.1rem; }
.wiz__fields--2col { display: grid; grid-template-columns: 1fr 1fr; }
.wiz__fields--2col .wiz__field--full { grid-column: 1 / -1; }
.wiz__type-btn--compact { padding: .85rem 1rem; }
.wiz__type-btn--compact i { font-size: 1.4rem; }
.wiz__field  { display: flex; flex-direction: column; gap: .35rem; }
.wiz__label  { font-size: .77rem; font-weight: 600; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }
.wiz__optional { font-weight: 400; text-transform: none; font-size: .76rem; }

.wiz__input, .wiz__textarea {
  width: 100%; padding: .8rem .95rem;
  background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 11px; color: var(--text); font-size: .95rem; font-family: inherit;
  transition: border-color .2s, background .2s, box-shadow .2s; outline: none;
}
.wiz__textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.wiz__input::placeholder, .wiz__textarea::placeholder { color: rgba(255,255,255,.22); }
.wiz__input:focus, .wiz__textarea:focus {
  border-color: var(--blue); background: rgba(14,165,233,.06);
  box-shadow: 0 0 0 3px rgba(14,165,233,.15);
}
.wiz__input--error { border-color: #f87171 !important; box-shadow: none !important; }
.wiz__field-error  { font-size: .77rem; color: #f87171; margin-top: .12rem; }

/* ── Type selection (Privatperson / Unternehmen) ── */
.wiz__type-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .75rem; margin-top: .75rem;
}
.wiz__type-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: .65rem; padding: 1.6rem 1rem;
  background: rgba(0,0,0,.03);
  border: 2px solid rgba(0,0,0,.1);
  border-radius: 14px; cursor: pointer;
  font-family: inherit; font-size: .95rem; font-weight: 600;
  color: var(--text-muted);
  transition: all .2s ease;
}
.wiz__type-btn i { font-size: 2rem; color: var(--text-muted); transition: color .2s; }
.wiz__type-btn:hover {
  border-color: var(--blue); color: var(--blue); background: rgba(59,130,246,.05);
}
.wiz__type-btn:hover i { color: var(--blue); }
.wiz__type-btn--active {
  border-color: var(--blue); color: var(--blue);
  background: rgba(59,130,246,.08);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.wiz__type-btn--active i { color: var(--blue); }

.wiz__choice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: .55rem; }
.wiz__choice-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: .4rem; padding: .95rem .7rem;
  background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 12px; color: var(--text-muted); font-size: .875rem; font-weight: 600;
  cursor: pointer; transition: all .2s ease; font-family: inherit;
}
.wiz__choice-btn i { font-size: 1.15rem; }
.wiz__choice-btn:hover { border-color: rgba(14,165,233,.4); color: var(--text); background: rgba(14,165,233,.06); }
.wiz__choice-btn--active { border-color: var(--blue); color: var(--blue); background: rgba(14,165,233,.12); }

/* ── Bild-Upload ── */
.wiz__upload-zone {
  border: 2px dashed rgba(255,255,255,.15); border-radius: 13px;
  padding: 1.75rem 1.25rem; text-align: center; cursor: pointer;
  transition: all .2s ease; margin-top: 1.1rem;
}
.wiz__upload-zone:hover, .wiz__upload-zone--drag { border-color: var(--blue); background: rgba(14,165,233,.06); }
.wiz__upload-zone i { font-size: 1.9rem; color: var(--blue); margin-bottom: .45rem; display: block; }
.wiz__upload-label { font-size: .88rem; color: var(--text-muted); }
.wiz__upload-sub   { font-size: .74rem; color: rgba(255,255,255,.3); margin-top: .3rem; }
.wiz__upload-preview {
  display: flex; align-items: center; gap: .7rem;
  background: rgba(255,255,255,.05); border-radius: 10px; padding: .7rem .95rem; margin-top: .9rem;
}
.wiz__upload-preview img { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; }
.wiz__upload-filename { font-size: .84rem; flex: 1; color: var(--text); word-break: break-all; }
.wiz__upload-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .95rem; padding: .2rem; transition: color .2s; }
.wiz__upload-remove:hover { color: #f87171; }

/* ── Zusammenfassung ── */
.wiz__summary { display: flex; flex-direction: column; gap: .65rem; margin-top: 1.1rem; }
.wiz__summary-row { display: flex; align-items: center; gap: .8rem; }
.wiz__summary-row > i { color: var(--blue); width: 14px; flex-shrink: 0; font-size: .9rem; }
.wiz__summary-label { font-size: .71rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .04rem; }
.wiz__summary-value { font-size: .9rem; color: var(--text); font-weight: 500; word-break: break-word; }
.wiz__summary-edit {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; margin-left: auto;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.1);
  color: var(--text-muted); font-size: .75rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s ease;
}
.wiz__summary-edit:hover { background: rgba(14,165,233,.15); border-color: var(--blue); color: var(--blue); }
.wiz__privacy-check {
  display: flex; align-items: flex-start; gap: .65rem;
  margin-top: 1.1rem; padding: .85rem 1rem;
  border: 1.5px solid rgba(0,0,0,.09);
  border-radius: 10px; background: rgba(0,0,0,.03);
  cursor: pointer; user-select: none;
  transition: border-color .2s, background .2s;
}
.wiz__privacy-check:hover {
  border-color: var(--blue); background: rgba(59,130,246,.04);
}
.wiz__privacy-input { position: absolute; opacity: 0; width: 0; height: 0; }
.wiz__privacy-box {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
  border: 2px solid rgba(0,0,0,.22); border-radius: 5px;
  background: #fff; display: flex; align-items: center; justify-content: center;
  transition: background .18s, border-color .18s;
}
.wiz__privacy-input:checked + .wiz__privacy-box {
  background: var(--blue); border-color: var(--blue);
}
.wiz__privacy-input:checked + .wiz__privacy-box::after {
  content: '';
  display: block; width: 5px; height: 9px;
  border: 2px solid #fff; border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}
.wiz__privacy-text {
  font-size: .8rem; color: var(--text-muted);
  line-height: 1.55; padding-top: 1px;
}
.wiz__privacy-link {
  color: var(--blue); text-decoration: underline;
  text-underline-offset: 2px;
}
.wiz__privacy-link:hover { color: var(--blue-dark); }

/* ── Navigations-Leiste ── */
.wiz__nav {
  display: flex; align-items: center; gap: .65rem;
  padding: .9rem 1.75rem 1.1rem; border-top: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
}
.wiz__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .7rem 1.3rem; border-radius: 10px;
  font-size: .87rem; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: all .2s ease; border: none;
}
.wiz__btn--back { background: rgba(255,255,255,.06); color: var(--text-muted); border: 1.5px solid rgba(255,255,255,.1); }
.wiz__btn--back:hover { background: rgba(255,255,255,.1); color: var(--text); }
.wiz__btn--next, .wiz__btn--submit {
  margin-left: auto; background: var(--blue); color: #fff;
  box-shadow: 0 4px 14px rgba(14,165,233,.3);
}
.wiz__btn--next:hover, .wiz__btn--submit:hover {
  background: var(--blue-dark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(14,165,233,.4);
}
.wiz__btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ── Status / Erfolg ── */
.wiz__status {
  margin: 0 1.75rem .85rem; padding: .65rem .95rem; border-radius: 9px;
  font-size: .83rem; text-align: center; line-height: 1.5;
}
.wiz__status--ok    { background: rgba(34,197,94,.1);  color: #4ade80; border: 1px solid rgba(34,197,94,.2);   }
.wiz__status--error { background: rgba(248,113,113,.1); color: #f87171; border: 1px solid rgba(248,113,113,.2); }
.wiz--success .wiz__dots, .wiz--success .wiz__steps, .wiz--success .wiz__nav { display: none; }
.wiz__success { text-align: center; padding: 2rem 1.75rem 1.25rem; }
.wiz__success-icon {
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(34,197,94,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; color: #4ade80; margin: 0 auto 1.2rem;
  box-shadow: 0 0 0 12px rgba(34,197,94,.06);
}
.wiz__success-title { font-size: 1.25rem; font-weight: 800; margin-bottom: .45rem; color: var(--text); }
.wiz__success-sub   { font-size: .88rem; color: var(--text-muted); line-height: 1.6; }
.wiz__success-redirect { font-size: .78rem; color: var(--text-muted); margin-top: 1.25rem; opacity: .6; }

/* ===== WALDI SLIDE-IN PANEL ===== */
.waldi-panel {
  position: fixed;
  top: 0; right: -420px; bottom: 0;
  width: 400px; max-width: 100vw;
  z-index: 500;
  display: flex; flex-direction: column;
  background: #0d1a2e;
  color: rgba(255,255,255,.9);
  border-left: 1px solid rgba(59,130,246,.2);
  box-shadow: -8px 0 40px rgba(0,0,0,.4);
  transition: right .35s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}

/* Bubble-Farben im Panel überschreiben */
.waldi-panel .waldi__bubble--waldi {
  background: rgba(59,130,246,.15);
  border-color: rgba(59,130,246,.25);
  color: rgba(255,255,255,.92);
}
.waldi-panel .waldi__bubble--user {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.15);
  color: rgba(255,255,255,.92);
}
.waldi-panel .waldi__bubble--waldi a { color: #60a5fa; }
.waldi-panel .waldi__typing span { background: var(--blue-mid); }
.waldi-panel.is-open { right: 0; }

.waldi-panel__backdrop {
  position: fixed; inset: 0; z-index: 499;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.waldi-panel__backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Header */
.waldi-panel__header {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}

.waldi-panel__avatar {
  position: relative; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(14,165,233,.15);
  border: 1px solid rgba(14,165,233,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--blue);
}

.waldi-panel__online {
  position: absolute; bottom: 1px; right: 1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e;
  border: 2px solid #0d1a2e;
  animation: onlinePulse 2.5s ease-in-out infinite;
}

.waldi-panel__name {
  font-size: .95rem; font-weight: 700; color: #fff;
}
.waldi-panel__sub {
  font-size: .7rem; color: rgba(255,255,255,.45); margin-top: .1rem;
}

.waldi-panel__close {
  margin-left: auto; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 8px;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.5); font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.waldi-panel__close:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Messages */
.waldi-panel__messages {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: .8rem;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
}

/* Footer */
.waldi-panel__footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,.07);
}

.waldi-panel__quick {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: .75rem 1.25rem .4rem;
}

.waldi-panel__input-row {
  display: flex; gap: .5rem; align-items: center;
  padding: .6rem 1.25rem .9rem;
}

.waldi-panel__input {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  padding: .55rem 1rem;
  color: #fff; font-size: .88rem;
  outline: none;
  transition: border-color var(--transition);
}
.waldi-panel__input::placeholder { color: rgba(255,255,255,.25); }
.waldi-panel__input:focus { border-color: rgba(59,130,246,.5); }
.waldi-panel__input:disabled { opacity: .4; }

.waldi-panel__send {
  flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--blue); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  transition: background var(--transition), transform .15s ease;
}
.waldi-panel__send:hover:not(:disabled) { background: var(--blue-dark); transform: scale(1.08); }
.waldi-panel__send:disabled { opacity: .35; cursor: not-allowed; }

/* Mobile: volle Breite */
@media (max-width: 440px) {
  .waldi-panel { width: 100vw; }
}

/* ===== FLOATING CHAT BUTTON ===== */
.chat-float {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 190;
  display: flex; flex-direction: column; align-items: flex-end; gap: .8rem;
}

.chat-float__btn {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--blue); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 20px rgba(59,130,246,.5);
  transition: transform .2s ease, box-shadow .2s ease;
  animation: chatPulse 3.5s ease-in-out infinite;
}
.chat-float__btn:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(59,130,246,.65); }

@keyframes chatPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(59,130,246,.45); }
  50%       { box-shadow: 0 4px 28px rgba(59,130,246,.65), 0 0 0 9px rgba(59,130,246,.1); }
}

.chat-float__bubble {
  background: var(--card-bg);
  border: 1px solid rgba(59,130,246,.2);
  border-radius: 16px 16px 4px 16px;
  padding: 1rem 1.1rem .9rem;
  max-width: 230px;
  box-shadow: var(--shadow-lg);
  position: relative;
  opacity: 0; transform: translateY(10px) scale(.95);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.chat-float__bubble.is-visible { opacity: 1; transform: none; pointer-events: auto; }

.chat-float__bubble-close {
  position: absolute; top: .4rem; right: .5rem;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: .8rem; padding: .2rem .3rem;
  border-radius: 5px; transition: background var(--transition);
}
.chat-float__bubble-close:hover { background: var(--surface); }

.chat-float__bubble p {
  font-size: .83rem; line-height: 1.55; color: var(--text);
  margin-bottom: .75rem; padding-right: 1rem;
}

.chat-float__bubble-cta {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--blue); color: #fff; border: none; cursor: pointer;
  padding: .42rem 1rem; border-radius: 20px;
  font-size: .8rem; font-weight: 700;
  transition: background .2s, transform .2s;
}
.chat-float__bubble-cta:hover { background: var(--blue-dark); transform: translateY(-1px); }

/* Waldi Modal Header */
.waldi__header-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: rgba(14,165,233,.15); border: 1px solid rgba(14,165,233,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--blue);
}
.waldi__header-info { flex: 1; }
.waldi__header-sub  { font-size: .72rem; color: var(--text-muted); margin-top: .1rem; }

/* Kontaktkarte Chat-Variante */
.kontakt__card--chat {
  background: rgba(14,165,233,.04);
  border-color: rgba(14,165,233,.15) !important;
}
.kontakt__card--chat:hover { border-color: var(--blue) !important; }
.kontakt__card--chat .kontakt__card-icon { background: rgba(14,165,233,.1); color: var(--blue); }

/* ===== WALDI CHAT ===== */
.waldi__messages {
  display: flex; flex-direction: column; gap: .8rem;
  padding: 1.25rem; flex: 1; overflow-y: auto; min-height: 220px; max-height: 360px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
}
.waldi__bubble {
  max-width: 84%; border-radius: 16px; padding: .7rem .95rem;
  font-size: .9rem; line-height: 1.6;
  animation: waldiBubble .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes waldiBubble { from { opacity:0; transform:translateY(6px) scale(.97); } to { opacity:1; transform:none; } }
.waldi__bubble--waldi {
  background: rgba(14,165,233,.1); border: 1px solid rgba(14,165,233,.2);
  color: var(--text); border-bottom-left-radius: 4px; align-self: flex-start;
}
.waldi__bubble--waldi a { color: var(--blue); text-decoration: underline; }
.waldi__bubble--user {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  color: var(--text); border-bottom-right-radius: 4px; align-self: flex-end;
}
.waldi__typing {
  display: inline-flex; align-items: center; gap: 4px; padding: .55rem .8rem;
  background: rgba(14,165,233,.1); border: 1px solid rgba(14,165,233,.2);
  border-radius: 16px; border-bottom-left-radius: 4px; align-self: flex-start;
}
.waldi__typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
  animation: waldiDot 1.2s infinite ease-in-out;
}
.waldi__typing span:nth-child(2) { animation-delay: .2s; }
.waldi__typing span:nth-child(3) { animation-delay: .4s; }
@keyframes waldiDot { 0%,80%,100% { transform:scale(.7); opacity:.4; } 40% { transform:scale(1.1); opacity:1; } }
.waldi__quick-btns { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0 1.25rem .6rem; }
.waldi__quick-btn {
  padding: .4rem .9rem; border-radius: 18px;
  background: rgba(14,165,233,.1); border: 1px solid rgba(14,165,233,.25);
  color: var(--blue); font-size: .83rem; font-weight: 600;
  cursor: pointer; transition: all .2s ease; font-family: inherit;
  animation: waldiBubble .3s cubic-bezier(.22,1,.36,1) both;
}
.waldi__quick-btn:hover { background: rgba(14,165,233,.2); border-color: var(--blue); transform: translateY(-1px); }
.waldi__quick-btn--send {
  background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); color: #4ade80;
}
.waldi__quick-btn--send:hover { background: rgba(34,197,94,.22); border-color: #4ade80; }
.waldi__input-row {
  display: flex; gap: .55rem; align-items: flex-end;
  padding: .7rem .95rem .9rem; border-top: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
}
.waldi__textarea {
  flex: 1; padding: .65rem .9rem;
  background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 11px; color: var(--text); font-size: .9rem; font-family: inherit;
  resize: none; line-height: 1.55; min-height: 40px; max-height: 110px;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.waldi__textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(14,165,233,.15); }
.waldi__textarea::placeholder { color: rgba(255,255,255,.22); }
.waldi__send {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: var(--blue); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; cursor: pointer; transition: all .2s ease;
}
.waldi__send:hover { background: var(--blue-dark); transform: scale(1.06); }
.waldi__send:disabled { opacity: .35; cursor: not-allowed; transform: none !important; }
.waldi__confetti-wrap { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; border-radius: inherit; }
.waldi__confetti-piece {
  position: absolute; bottom: 35%; width: 9px; height: 9px;
  border-radius: 2px; animation: waldiConfetti 1.1s ease-out both;
}
@keyframes waldiConfetti {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translateY(-260px) rotate(720deg) scale(.15); opacity: 0; }
}
.waldi__sum { margin-top: .7rem; display: flex; flex-direction: column; gap: .3rem; }
.waldi__sum-row {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .3rem .5rem; border-radius: 7px; background: rgba(255,255,255,.05);
}
.waldi__sum-row span { font-size: .86rem; line-height: 1.5; min-width: 0; }
.waldi__sum-edit {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.55); font-size: .78rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, color .2s;
}
.waldi__sum-edit:hover { background: rgba(14,165,233,.25); color: var(--blue); }

/* ===== SUBPAGE STICKY FOOTER ===== */
.page--subpage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page--subpage .wiz__page-section {
  flex: 1;
}


/* ===== FOOTER ===== */
.footer {
  background: #060d1a;
  border-top: 1px solid rgba(255,255,255,.05);
  color: rgba(255,255,255,.45);
  padding: 1.75rem 1.5rem;
}

.footer__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem 1.5rem;
}

.footer__brand { display: flex; align-items: center; gap: .7rem; }

.footer__logo-img {
  height: 28px; width: auto; display: block; flex-shrink: 0;
}

.footer__brand-text {
  font-size: .9rem; font-weight: 700;
  color: rgba(255,255,255,.85);
  letter-spacing: -.01em; line-height: 1;
}
.footer__copy  { font-size: .82rem; }

.footer__links { display: flex; gap: 1.5rem; }

.footer__links a {
  font-size: .82rem; color: rgba(255,255,255,.5);
  transition: color var(--transition);
  min-height: 44px; display: flex; align-items: center;
}

.footer__links a:hover { color: var(--white); }

/* ===== SCROLL TO TOP ===== */
.scroll-top {
  position: fixed; bottom: 6.5rem; right: 1.5rem; z-index: 80;
  width: 48px; height: 48px;
  background: var(--blue); color: var(--white);
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer;
  box-shadow: 0 4px 16px rgba(21,101,192,.45);
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
  pointer-events: none;
}

.scroll-top.visible { opacity: 1; transform: none; pointer-events: auto; }
.scroll-top:hover   { background: var(--blue-dark); transform: translateY(-2px); }

/* ===== FADE-IN ANIMATION ===== */
.fade-in {
  opacity: 0; transform: translateY(16px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.16,1,.3,1);
}
.fade-in.visible { opacity: 1; transform: none; }

.fade-in--left  { transform: translateX(-32px); }
.fade-in--right { transform: translateX(32px); }
.fade-in--left.visible,
.fade-in--right.visible { opacity: 1; transform: none; }

/* ===== RESPONSIVE — TABLET LANDSCAPE (≤ 960px) ===== */
@media (max-width: 960px) {
  .about__split { grid-template-columns: 1fr; min-height: auto; }
  /* Tablet: portrait still fills the panel, fixed height */
  .about__img-side { clip-path: none; min-height: 380px; }
  .about__text-side { padding: 3rem 2rem; align-items: center; text-align: center; }
  .about__label { align-self: center; }
  .about__tags { justify-content: center; }
  .about__lead { max-width: none; }
  .about__feature { text-align: left; }
  .about__stats { grid-template-columns: 1fr; gap: .75rem; }
  .about__stat { justify-content: center; }

  /* Process: stack vertically on tablet — 5 steps too narrow for row */
  .steps { grid-template-columns: 1fr; gap: 1rem; }
  .step__arrow { padding-top: 0; transform: rotate(90deg); }

  /* Bento: 2 columns on tablet */
  .bento-grid { grid-template-columns: 1fr 1fr; }
  .bento-card--wide { grid-column: span 2; }
}

/* ===== RESPONSIVE — TABLET PORTRAIT (≤ 768px) ===== */
@media (max-width: 768px) {
  .hero { padding: 100px 1.5rem 72px; }
  .hero__scroll { display: none; }
}


/* ===== RESPONSIVE — MOBILE (≤ 600px) ===== */
@media (max-width: 600px) {
  .nav { width: calc(100% - 1.5rem); top: .6rem; border-radius: 10px; }
  .nav__mobile { border-radius: 0 0 10px 10px; }
  .nav__links  { display: none; }
  .nav__burger { display: flex; }
  .nav__cta    { display: none; }

  .section { padding: 3.25rem 1.25rem; }
  .section__header {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    margin-bottom: 2rem;
  }
  .section__label   { grid-column: 1; grid-row: auto; align-self: auto; margin-bottom: .5rem; }
  .section__title   { grid-column: 1; grid-row: auto; white-space: normal; }
  .section__subtitle { grid-column: 1; grid-row: auto; border-left: none; padding-left: 0; margin-top: .6rem; }

  .hero { padding: 88px 1.25rem 56px; min-height: 100svh; }
  .hero__title { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .hero__trust { gap: .35rem .6rem; }

  /* Bento: single column on mobile */
  .bento-grid { grid-template-columns: 1fr; gap: .75rem; }
  .wiz__fields--2col { grid-template-columns: 1fr; }

  /* Kontakt-Bereich (index.html) auf Mobile */
  .section--kontakt { padding: 3.5rem 1.25rem; }
  .kontakt__wrap { gap: 2rem; }
  .kontakt__left { text-align: center; }
  .kontakt__heading { font-size: 2rem; }
  .kontakt__lead { font-size: .9rem; max-width: 100%; margin-bottom: 1.5rem; }
  .kontakt__chips { justify-content: center; }
  .kontakt__card { padding: 1.1rem 1.25rem; gap: 1rem; }
  .kontakt__card-icon { width: 42px; height: 42px; font-size: 1rem; }
  .kontakt__card-title { font-size: .9rem; }
  .kontakt__card-desc { font-size: .75rem; }
  .kontakt__canvas { display: none; }

  /* Kontakt-Seite: Vollbild auf Mobile */
  .page--subpage .nav,
  .page--subpage .footer,
  .page--subpage .section__header { display: none; }

  .page--subpage { min-height: 100svh; }

  .page--subpage .wiz__page-section {
    flex: 1;
    padding: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  .page--subpage .section__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    max-width: 100%;
    margin: 0;
    width: 100%;
  }
  .page--subpage .wiz__page {
    flex: 1;
    border-radius: 0;
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    margin: 0;
  }
  .page--subpage .wiz__page-body { flex: 1; }
  .page--subpage .wiz__steps { min-height: 0; }
  .bento-card--wide { grid-column: span 1; }

  .about__split { display: flex; flex-direction: column; }

  /* Mobile: circular portrait in a compact panel */
  .about__img-side {
    clip-path: none;
    min-height: unset;
    overflow: visible;
    display: flex; flex-direction: column;
    align-items: center;
    padding: 3rem 1.5rem 2rem;
    gap: 1.25rem;
  }
  .about__img-side.fade-in { transform: translateY(-28px) scale(.97); }
  .about__img-side::after { display: none; } /* no bottom gradient on mobile */

  /* Portrait wrap: becomes the small circular container */
  .about__portrait-wrap {
    position: relative;
    inset: auto;
    width: 175px; height: 175px;
    flex-shrink: 0;
  }

  .about__portrait-frame {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.15);
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
  }

  .about__portrait { opacity: .9; }

  /* Caption: back in normal flow */
  .about__img-caption {
    position: static;
    text-align: center;
    padding: 0;
    opacity: 0; transform: translateY(8px);
  }
  .about__photo-name { font-size: 1.05rem; }

  .about__text-side { padding: 2rem 1.5rem 2.5rem; align-items: center; text-align: center; }
  .about__label { align-self: center; }
  .about__features { display: none; }
  .about__stats { display: none; }

  .kontakt__wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .modal { align-items: flex-end; padding: 0; }
  .modal__box { border-radius: 20px 20px 0 0; max-width: 100%; max-height: 92vh; }
  .waldi__messages { max-height: 260px; }

  .footer__inner  { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .footer__links  { flex-wrap: wrap; gap: 1rem; }

  .scroll-top { bottom: 1.25rem; right: 1.25rem; }

}

/* ===== RESPONSIVE — SMALL PHONES (≤ 380px) ===== */
@media (max-width: 380px) {
  .hero__title  { font-size: 2.2rem; }
  .hero__actions { flex-direction: column; }
  .btn { width: 100%; justify-content: center; }
  .nav__logo-img { height: 26px; }
  .nav__logo-text { font-size: .85rem; }
}

/* ===== LEGAL PAGES ===== */
.legal-page { padding: 100px 1.5rem 5rem; max-width: 760px; margin: 0 auto; }
.legal-page h1 { font-size: 2rem; font-weight: 800; color: var(--blue); margin-bottom: .4rem; }
.legal-page .subtitle { color: var(--text-muted); margin-bottom: 2.5rem; font-size: .95rem; }
.legal-page h2 { font-size: 1.05rem; font-weight: 700; margin: 2rem 0 .55rem; color: var(--text); }
.legal-page p, .legal-page address { font-style: normal; line-height: 1.75; color: var(--text-muted); margin-bottom: .5rem; }
.legal-page ul { padding-left: 1.5rem; margin-bottom: .75rem; color: var(--text-muted); line-height: 1.75; }
.legal-page a { color: var(--blue); }
.legal-page a:hover { text-decoration: underline; }
.legal-page hr { border: none; border-top: 1px solid rgba(255,255,255,.08); margin: 2rem 0; }
.legal-back {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 2rem;
  color: var(--blue); font-weight: 600; font-size: .9rem;
  padding: .5rem .9rem; border-radius: 8px;
  border: 1.5px solid rgba(14,165,233,.25); background: rgba(14,165,233,.07);
  transition: all .2s ease;
}
.legal-back:hover { background: rgba(14,165,233,.14); border-color: var(--blue); }
.legal-stamp { margin-top: 2.5rem; font-size: .8rem; color: var(--text-muted); }

/* ===== KONTAKT INLINE-FORM – GLASSMORPHISM DARK ===== */

/* Karte: transparentes Glas statt weißem Card */
.kontakt__inline-form .wiz__page {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Header-Trennlinie */
.kontakt__inline-form .wiz__page-header {
  border-bottom-color: rgba(255,255,255,.08);
}
.kontakt__inline-form .wiz__page-icon  { color: #93c5fd; }
.kontakt__inline-form .wiz__page-title { color: #fff; }

/* Nav-Trennlinie */
.kontakt__inline-form .wiz__page .wiz__nav {
  border-top-color: rgba(255,255,255,.08);
}

/* Schritt-Titel und Labels */
.kontakt__inline-form .wiz__step-title { color: #fff; }
.kontakt__inline-form .wiz__label      { color: rgba(255,255,255,.8); }
.kontakt__inline-form .wiz__optional   { color: rgba(255,255,255,.45); }

/* Inputs: immer im Dunkelmodus (überschreibt etwaige Light-Mode-Overrides) */
.kontakt__inline-form .wiz__input,
.kontakt__inline-form .wiz__textarea {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #fff !important;
}
.kontakt__inline-form .wiz__input::placeholder,
.kontakt__inline-form .wiz__textarea::placeholder { color: rgba(255,255,255,.28) !important; }
.kontakt__inline-form .wiz__input:focus,
.kontakt__inline-form .wiz__textarea:focus {
  background: rgba(59,130,246,.1) !important;
  border-color: rgba(59,130,246,.6) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important;
}

/* Kategorie-Kacheln im Dark-Kontext */
.kontakt__inline-form .wiz__cat-btn {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.65);
}
.kontakt__inline-form .wiz__cat-btn i { color: #93c5fd; opacity: .7; }
.kontakt__inline-form .wiz__cat-btn:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.kontakt__inline-form .wiz__cat-btn:hover i { opacity: 1; }
.kontakt__inline-form .wiz__cat-btn--active {
  background: rgba(59,130,246,.22);
  border-color: rgba(59,130,246,.6);
  color: #fff;
}
.kontakt__inline-form .wiz__cat-btn--active i { color: #93c5fd; opacity: 1; }

/* Type- und Choice-Buttons */
.kontakt__inline-form .wiz__type-btn,
.kontakt__inline-form .wiz__choice-btn {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
}
.kontakt__inline-form .wiz__type-btn--active,
.kontakt__inline-form .wiz__choice-btn--active {
  background: rgba(59,130,246,.22);
  border-color: rgba(59,130,246,.5);
  color: #fff;
}

/* Fortschritts-Leiste */
.kontakt__inline-form .wiz__progress-track { background: rgba(255,255,255,.1); }
.kontakt__inline-form .wiz__progress-label { color: rgba(255,255,255,.5); }

/* Zurück-Button im Wizard */
.kontakt__inline-form .wiz__btn--back {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
}
.kontakt__inline-form .wiz__btn--back:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* Zusammenfassung */
.kontakt__inline-form .wiz__summary-row {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
.kontakt__inline-form .wiz__summary-label { color: rgba(255,255,255,.5); }
.kontakt__inline-form .wiz__summary-value { color: #fff; }
.kontakt__inline-form .wiz__summary-edit  {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.6);
}
.kontakt__inline-form .wiz__summary-edit:hover { color: #fff; background: rgba(255,255,255,.12); }

/* Datenschutz-Checkbox */
.kontakt__inline-form .wiz__privacy-text  { color: rgba(255,255,255,.65); }
.kontakt__inline-form .wiz__privacy-link  { color: #93c5fd; }
.kontakt__inline-form .wiz__privacy-box   { border-color: rgba(255,255,255,.25); }

/* Erfolg-Meldung */
.kontakt__inline-form .wiz__success-title { color: #fff; }
.kontakt__inline-form .wiz__success-sub   { color: rgba(255,255,255,.65); }

/* ===== KONTAKT INLINE-FORM TRANSITION ===== */
@keyframes kontaktFadeIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes kontaktFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-18px); }
}

.kontakt--out { animation: kontaktFadeOut .32s ease both; pointer-events: none; }
.kontakt--in  { animation: kontaktFadeIn  .42s cubic-bezier(.22,1,.36,1) both; }

.kontakt__inline-form {
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}

.kontakt__back-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.75);
  padding: .45rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .88rem; font-weight: 600;
  font-family: inherit;
  margin-bottom: 1.5rem;
  transition: background .2s, border-color .2s, color .2s;
}
.kontakt__back-btn:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}

/* ===== CONFETTI ===== */
@keyframes confettiPop {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  80%  { opacity: .7; }
  100% { opacity: 0; transform: translate(var(--cx, 0px), var(--cy, -200px)) rotate(var(--cr, 360deg)) scale(.2); }
}

/* ===== STANDALONE WIZARD PAGE ===== */
.wiz__page-section { padding: 5rem 1.5rem 6rem; position: relative; overflow: hidden; }
.wiz__page-section .section__inner { position: relative; z-index: 1; }

.kontakt-bg-icons { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.kontakt-bg-icons i {
  position: absolute; color: var(--blue); opacity: .04;
}
.kontakt-bg-icons i:nth-child(1) { font-size: 7rem;   top: 6%;    left: 3%;   transform: rotate(-18deg); }
.kontakt-bg-icons i:nth-child(2) { font-size: 5.5rem; top: 5%;    right: 5%;  transform: rotate(14deg); }
.kontakt-bg-icons i:nth-child(3) { font-size: 8rem;   bottom: 10%; left: 2%;  transform: rotate(-8deg);  opacity: .03; }
.kontakt-bg-icons i:nth-child(4) { font-size: 6rem;   bottom: 6%;  right: 3%; transform: rotate(22deg);  opacity: .035; }
.kontakt-bg-icons i:nth-child(5) { font-size: 9rem;   top: 42%;   left: 1%;   transform: rotate(-5deg);  opacity: .025; }
.kontakt-bg-icons i:nth-child(6) { font-size: 6.5rem; bottom: 5%;  left: 22%; transform: rotate(12deg);  opacity: .03; }
.kontakt-bg-icons i:nth-child(7) { font-size: 5.5rem; top: 12%;   right: 20%; transform: rotate(-20deg); opacity: .03; }
.kontakt-bg-icons i:nth-child(8) { font-size: 7rem;   bottom: 22%; right: 5%; transform: rotate(28deg);  opacity: .03; }

.wiz__page {
  max-width: 820px;
  margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}

.wiz__page-header {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.1rem 1.75rem;
  border-bottom: 1px solid rgba(0,0,0,.07);
  flex-shrink: 0;
}
.wiz__page-icon { color: var(--blue); font-size: 1.1rem; }
.wiz__page-title { font-size: 1rem; font-weight: 700; flex: 1; color: var(--text); }
.wiz__page-back {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .83rem; font-weight: 600; color: var(--text-muted);
  text-decoration: none; padding: .3rem .6rem;
  border-radius: 8px; border: 1px solid rgba(0,0,0,.09);
  background: rgba(0,0,0,.04);
  transition: all .2s ease;
}
.wiz__page-back:hover { color: var(--blue); border-color: var(--blue); background: rgba(59,130,246,.06); }

.wiz__page-body {
  padding: 1.35rem 1.75rem 1.25rem;
}
.wiz__page .wiz__nav {
  padding: .9rem 1.75rem 1.1rem;
  border-top: 1px solid rgba(0,0,0,.07);
}

/* ===== COOKIE BANNER ===== */
/* ===== COOKIE MODAL ===== */
.cookie-overlay {
  position: fixed; inset: 0; z-index: 698;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.cookie-overlay.is-visible { opacity: 1; pointer-events: auto; }

.cookie-modal {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(calc(100% + 2rem));
  width: calc(100% - 2rem); max-width: 460px;
  z-index: 699;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,.18);
  padding: 1.5rem;
  opacity: 0;
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.cookie-modal.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.cookie-modal__head {
  display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem;
}
.cookie-modal__icon {
  width: 48px; height: 48px; flex-shrink: 0;
  background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.18);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--blue);
}
.cookie-modal__title { font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: .25rem; }
.cookie-modal__sub { font-size: .8rem; color: var(--text-muted); line-height: 1.5; }
.cookie-modal__sub a { color: var(--blue); text-decoration: underline; }

.cookie-modal__items { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.35rem; }
.cookie-modal__item {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1rem;
  background: #f8fafc;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 12px;
}
.cookie-modal__item-info { flex: 1; min-width: 0; }
.cookie-modal__item-name { display: block; font-size: .85rem; font-weight: 700; color: var(--text); margin-bottom: .15rem; }
.cookie-modal__item-desc { font-size: .76rem; color: var(--text-muted); line-height: 1.45; }

/* Toggle switch */
.cookie-toggle { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer; }
.cookie-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.cookie-toggle__track {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.15); border-radius: 999px;
  transition: background .25s ease;
}
.cookie-toggle__track::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.cookie-toggle input:checked + .cookie-toggle__track { background: var(--blue); }
.cookie-toggle input:checked + .cookie-toggle__track::after { transform: translateX(20px); }
.cookie-toggle--locked { cursor: not-allowed; }
.cookie-toggle--locked .cookie-toggle__track { background: rgba(59,130,246,.45); }

.cookie-modal__actions {
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.cookie-modal__btn {
  flex: 1; padding: .6rem .8rem; border-radius: 10px;
  font-size: .82rem; font-weight: 600; cursor: pointer;
  border: none; font-family: inherit; transition: all .2s ease;
  white-space: nowrap;
}
.cookie-modal__btn--decline {
  background: rgba(0,0,0,.05); color: var(--text-muted);
  border: 1px solid rgba(0,0,0,.09);
}
.cookie-modal__btn--decline:hover { background: rgba(0,0,0,.1); color: var(--text); }
.cookie-modal__btn--save {
  background: rgba(59,130,246,.1); color: var(--blue);
  border: 1px solid rgba(59,130,246,.2);
}
.cookie-modal__btn--save:hover { background: rgba(59,130,246,.18); }
.cookie-modal__btn--accept {
  background: var(--blue); color: #fff;
  box-shadow: 0 3px 12px rgba(59,130,246,.3);
}
.cookie-modal__btn--accept:hover { background: var(--blue-dark); transform: translateY(-1px); }

/* Reopen button */
.cookie-reopen {
  position: fixed; bottom: 1.25rem; left: 1.25rem; z-index: 697;
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  color: var(--blue); font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transform: scale(.7);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
}
.cookie-reopen.visible { opacity: 1; pointer-events: auto; transform: scale(1); }
.cookie-reopen:hover { box-shadow: 0 6px 20px rgba(59,130,246,.25); transform: scale(1.1); }

/* ===== LIGHT MODE (always-on) ===== */
  body { background: #f4f6fa; color: var(--text); }

  ::-webkit-scrollbar-track { background: rgba(0,0,0,.04); }

  /* ── Buttons ── */
  .btn--primary { background: var(--blue); color: #fff; }
  .btn--primary:hover { background: var(--blue-dark); }

  /* ── Nav ── */
  .nav { background: rgba(10,20,50,.55); border-color: rgba(255,255,255,.12); }
  .nav.scrolled { background: rgba(10,20,50,.72); }
  .nav__logo-img { filter: none; }
  .nav__links a { color: rgba(255,255,255,.82); }
  .nav.scrolled .nav__links a { color: rgba(255,255,255,.82); }
  .nav__links a:hover, .nav__links a.active { color: #ffffff; }
  .nav.scrolled .nav__links a:hover, .nav.scrolled .nav__links a.active { color: #fff; }
  .nav__burger span { background: rgba(255,255,255,.85); }
  .nav.scrolled .nav__burger span { background: rgba(255,255,255,.85); }

  /* ── Trust bar ── */
  .trust-bar { background: #edf2f7; border-bottom: 1px solid rgba(0,0,0,.07); }
  .trust-item { color: #4a5568; font-weight: 500; }
  .trust-bar__sep { color: var(--blue); opacity: .35; }

  /* ── Hero (stays dark – own gradient bg) ── */
  /* No overrides: hero has its own dark gradient, text is white, readable in both modes */

  /* ── Section base ── */
  .section--alt { background: #edf2f7; }
  .section__label { color: #2563eb; background: linear-gradient(135deg, rgba(59,130,246,.1) 0%, rgba(99,102,241,.1) 100%); border-color: rgba(59,130,246,.25); }
  .section__title { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #3b82f6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .section__subtitle { color: #4a5568; border-left-color: rgba(99,102,241,.2); }

  /* ── Process steps ── */
  .step {
    background: #ffffff;
    border: 1.5px solid rgba(0,0,0,.08);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    color: #1a202c;
  }
  .step:hover {
    border-color: var(--blue);
    box-shadow: 0 6px 24px rgba(14,165,233,.18);
    transform: translateY(-4px);
  }
  .step__num { background: var(--blue); color: #fff; }
  .step__icon { background: rgba(14,165,233,.1); color: var(--blue); }
  .step__icon i { color: var(--blue); }
  .step__title { color: #1a202c; }
  .step__text { color: #4a5568; }
  .step__arrow { color: rgba(14,165,233,.35); background: transparent; }

  /* ── About ── */
  .about__label { color: #2563eb; background: linear-gradient(135deg,rgba(59,130,246,.1) 0%,rgba(99,102,241,.1) 100%); border-color: rgba(59,130,246,.25); }
  .about__title { color: #1a202c; }
  .about__lead { color: #4a5568; }
  .about__feature { background: rgba(59,130,246,.04); border-color: rgba(59,130,246,.1); border-left-color: rgba(59,130,246,.35); }
  .about__feature-title { color: #1a202c; }
  .about__feature-text { color: #4a5568; }
  .about__stat strong { color: #1a202c; }
  .about__stat { color: #4a5568; }

  /* ── Contact (dark section – no light-mode overrides needed) ── */

  /* ── Scroll-top ── */
  .scroll-top {
    background: var(--blue);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 16px rgba(14,165,233,.35);
  }
  .scroll-top:hover { background: var(--blue-dark); transform: translateY(-2px); }

  /* ── Legal pages ── */
  .legal-page h1 { color: var(--blue); }
  .legal-page h2 { color: #1a202c; }
  .legal-page .subtitle { color: #4a5568; }
  .legal-page p, .legal-page address, .legal-page ul { color: #4a5568; }
  .legal-page hr { border-top: 1px solid rgba(0,0,0,.1); }
  .legal-back { background: rgba(14,165,233,.07); border-color: rgba(14,165,233,.22); color: var(--blue-dark); }
  .legal-back:hover { background: rgba(14,165,233,.14); border-color: var(--blue); }
  .legal-stamp { color: #718096; }

  /* ── Bento Grid ── */
  .bento-card {
    background: #ffffff;
    border: 1.5px solid rgba(0,0,0,.07);
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
  }
  .bento-card:hover {
    border-color: rgba(var(--bento-rgb), .45);
    box-shadow: 0 14px 40px rgba(var(--bento-rgb), .12), 0 4px 12px rgba(0,0,0,.08);
  }
  .bento-card__title { color: #1a202c; }
  .bento-card__text  { color: #4a5568; }

  /* ── Modal Box ── */
  .modal__box {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
  }
  .modal__header {
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .modal__title { color: #1a202c; }
  .modal__close {
    background: rgba(0,0,0,.05);
    border-color: rgba(0,0,0,.1);
    color: #4a5568;
  }
  .modal__close:hover { background: rgba(0,0,0,.1); color: #1a202c; }
  .modal__body {
    scrollbar-color: rgba(0,0,0,.15) transparent;
  }

  /* ── Wizard Progress ── */
  .wiz__progress-track { background: rgba(0,0,0,.1); }

  /* ── Wizard Inputs ── */
  .wiz__input, .wiz__textarea {
    background: #f7f9fc;
    border-color: rgba(0,0,0,.14);
    color: #1a202c;
  }
  .wiz__input::placeholder, .wiz__textarea::placeholder { color: #94a3b8; }
  .wiz__input:focus, .wiz__textarea:focus {
    background: #fff;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(14,165,233,.15);
  }
  .wiz__input--error { border-color: #ef4444 !important; }

  /* ── Wizard Labels & Hints ── */
  .wiz__step-title { color: #1a202c; }
  .wiz__step-hint  { color: #4a5568; }
  .wiz__label { color: #4a5568; }

  /* ── Choice Buttons ── */
  .wiz__choice-btn {
    background: #f7f9fc;
    border-color: rgba(0,0,0,.12);
    color: #4a5568;
  }
  .wiz__choice-btn:hover { border-color: var(--blue); color: #1a202c; background: rgba(14,165,233,.06); }
  .wiz__choice-btn--active { border-color: var(--blue); color: var(--blue); background: rgba(14,165,233,.1); }

  /* ── Upload Zone ── */
  .wiz__upload-zone { border-color: rgba(0,0,0,.15); }
  .wiz__upload-zone:hover { border-color: var(--blue); background: rgba(14,165,233,.04); }
  .wiz__upload-label { color: #4a5568; }
  .wiz__upload-sub { color: #94a3b8; }
  .wiz__upload-preview { background: rgba(0,0,0,.04); }
  .wiz__upload-filename { color: #1a202c; }
  .wiz__upload-remove { color: #94a3b8; }

  /* ── Summary ── */
  .wiz__summary-row { background: rgba(0,0,0,.04); border-radius: 8px; padding: .4rem .6rem; }
  .wiz__summary-label { color: #64748b; }
  .wiz__summary-value { color: #1a202c; }
  .wiz__summary-edit {
    background: rgba(0,0,0,.06);
    border-color: rgba(0,0,0,.12);
    color: #4a5568;
  }
  .wiz__summary-edit:hover { background: rgba(14,165,233,.12); border-color: var(--blue); color: var(--blue); }
  .wiz__privacy-text { color: #4a5568; }

  /* ── Wizard Nav & Buttons ── */
  .wiz__nav { border-top: 1px solid rgba(0,0,0,.08); }
  .wiz__btn--back {
    background: rgba(0,0,0,.05);
    border-color: rgba(0,0,0,.12);
    color: #4a5568;
  }
  .wiz__btn--back:hover { background: rgba(0,0,0,.1); color: #1a202c; }

  /* ── Status Messages ── */
  .wiz__status--ok    { background: rgba(34,197,94,.08);  color: #15803d; border-color: rgba(34,197,94,.25); }
  .wiz__status--error { background: rgba(239,68,68,.08); color: #b91c1c; border-color: rgba(239,68,68,.25); }
  .wiz__success-title { color: #1a202c; }
  .wiz__success-sub   { color: #4a5568; }

  /* ── Service Modal ── */
  .srv-modal__item {
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.08);
  }
  .srv-modal__footer { background: rgba(0,0,0,.03); }
  .srv-modal__btn--chat  { color: #2563eb; }
  .srv-modal__btn--form  { color: #475569; background: rgba(100,116,139,.1); border-color: rgba(100,116,139,.25); }
  .srv-modal__btn--mail  { color: #16a34a; }

  /* ── Waldi Chat Bubbles ── */
  .waldi__bubble--waldi {
    background: rgba(14,165,233,.1);
    border-color: rgba(14,165,233,.2);
    color: #1a202c;
  }
  .waldi__bubble--user {
    background: #edf2f7;
    border-color: rgba(0,0,0,.1);
    color: #1a202c;
  }
  .waldi__messages { scrollbar-color: rgba(0,0,0,.15) transparent; }

  /* ── Chat Input ── */
  .waldi__input-row { border-top: 1px solid rgba(0,0,0,.08); }
  .waldi__textarea {
    background: #f7f9fc;
    border-color: rgba(0,0,0,.14);
    color: #1a202c;
  }
  .waldi__textarea::placeholder { color: #94a3b8; }
  .waldi__textarea:focus { background: #fff; border-color: var(--blue); }

  /* ── Chat Summary Rows ── */
  .waldi__sum-row { background: rgba(0,0,0,.04); }
  .waldi__sum-edit {
    background: rgba(0,0,0,.07);
    border-color: rgba(0,0,0,.12);
    color: #4a5568;
  }
  .waldi__sum-edit:hover { background: rgba(14,165,233,.15); color: var(--blue); }

/* ===== FADE-IN ANIMATION ===== */

/* ===== WIZARD: SCREENSHOT-DROPZONE ===== */
.wiz__drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; padding: 1.6rem 1rem; text-align: center; cursor: pointer;
  border: 2px dashed #cbd5e1; border-radius: 14px; background: #f8fafc; color: #64748b;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.wiz__drop:hover { border-color: var(--blue-mid); background: #f1f5f9; }
.wiz__drop:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }
.wiz__drop.is-drag { border-color: var(--blue); background: var(--blue-light); color: var(--blue-dark); transform: scale(1.01); }
.wiz__drop-icon { font-size: 1.7rem; color: #94a3b8; transition: color .15s ease; }
.wiz__drop.is-drag .wiz__drop-icon { color: var(--blue); }
.wiz__drop-title { font-size: .95rem; font-weight: 600; color: #334155; }
.wiz__drop-link { color: var(--blue-dark); text-decoration: underline; }
.wiz__drop-hint { font-size: .78rem; color: #94a3b8; }

.wiz__file-grid { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .7rem; }
.wiz__thumb {
  position: relative; width: 76px; height: 76px; border-radius: 12px; overflow: hidden;
  border: 1px solid #e2e8f0; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.wiz__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wiz__thumb-x {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(15,23,42,.65); color: #fff;
  font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.wiz__thumb-x:hover { background: #ef4444; }

/* ===== REFERENZKUNDEN-SLIDER ===== */
.ref-slider {
  position: relative;
  overflow: hidden;
  padding: .5rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ref-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: refScroll 40s linear infinite;
}
.ref-slider:hover .ref-track { animation-play-state: paused; }
@keyframes refScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Wenige Einträge: zentriert, ohne Animation */
.ref-track--static {
  animation: none;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

.ref-card {
  flex: 0 0 auto;
  width: 260px;
  background: #ffffff;
  border: 1.5px solid rgba(0,0,0,.07);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  padding: 1.4rem 1.4rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.ref-card__logo { height: 56px; max-width: 170px; object-fit: contain; margin-bottom: 1rem; }
.ref-card__logo--text {
  display: flex; align-items: center; justify-content: center;
  height: 56px; width: 56px; border-radius: 14px;
  background: rgba(14,165,233,.1); color: var(--blue);
  font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem;
}
.ref-card__name { font-weight: 700; color: #1a202c; font-size: .95rem; }
.ref-card__quote { margin-top: .5rem; font-size: .85rem; color: #4a5568; line-height: 1.55; }

/* Klickbare Karte (mit Link zur Kundenseite) */
.ref-card--link { text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ref-card--link:hover { transform: translateY(-3px); border-color: rgba(14,165,233,.4); box-shadow: 0 10px 28px rgba(0,0,0,.1); }

@media (prefers-reduced-motion: reduce) {
  .ref-slider { overflow-x: auto; }
  .ref-track { animation: none; }
}
@media (max-width: 600px) {
  .ref-card { width: 220px; }
}