/* ============================================================
   EVION INGENIEURE — Design System
   ============================================================ */

:root {
  /* Markenfarben — Navy entspricht exakt der Logo-Farbe */
  --navy:        #08162a;
  --navy-700:    #162850;
  --navy-500:    #1e3a6e;
  --teal-600:    #0d9488;  /* Primäraktion (Buttons) */
  --teal-700:    #0f766e;  /* Hover / Akzente */
  --teal-pale:   #f0fdfa;
  --teal-border: #99f6e4;
  --white:       #ffffff;
  --gray-50:     #f9fafb;
  --gray-100:    #f3f4f6;
  --gray-200:    #e5e7eb;
  --gray-300:    #d1d5db;
  --gray-400:    #9ca3af;
  --gray-500:    #6b7280;
  --gray-600:    #4b5563;
  --gray-700:    #374151;
  --gray-800:    #1f2937;
  --gray-900:    #111827;
  --text:        #1e293b;
  --text-md:     #475569;
  --text-lt:     #94a3b8;
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   16px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow:      0 4px 16px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.04);
  --shadow-md:   0 8px 32px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.06);
  --shadow-lg:   0 16px 48px rgba(0,0,0,.13);
  --transition:  .22s cubic-bezier(.4,0,.2,1);
}

/* ---- UTILITIES ---- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Honeypot-Feld: aus dem Sichtbereich, aber für Bots im DOM */
.form-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Skip Navigation Link for A11y */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--navy);
  color: var(--white);
  padding: 12px 24px;
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 9999;
  font-weight: 600;
  font-size: .9rem;
  transition: top .2s ease;
  border: 1px solid var(--teal-border);
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--teal-600);
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-font-smoothing: antialiased; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }
address { font-style: normal; }

/* Sichtbarer Tastatur-Fokus für alle interaktiven Elemente */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--teal-600);
  outline-offset: 2px;
}

/* ---- LAYOUT ---- */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 96px 0; }
.section--light { background: var(--gray-50); }
.section--dark { background: var(--navy); }

/* ---- TYPOGRAPHY ---- */
.eyebrow {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--teal-700);
  margin-bottom: 12px;
  display: block;
}
.eyebrow--green { color: var(--teal-700); }
.eyebrow--white { color: rgba(255,255,255,.6); }

.section__head { text-align: center; max-width: 640px; margin: 0 auto 64px; }
.section__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.2;
  color: var(--gray-900);
  margin-bottom: 16px;
}
.section__title--white { color: var(--white); }
.section__sub { color: var(--text-md); font-size: 1.05rem; line-height: 1.7; }
.section__sub--white { color: rgba(255,255,255,.7); }

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
  line-height: 1;
}
.btn--lg { padding: 15px 30px; font-size: .95rem; }
.btn--primary {
  background: var(--teal-600);
  color: var(--white);
  border-color: var(--teal-600);
}
.btn--primary:hover { background: var(--teal-700); border-color: var(--teal-700); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(15,118,110,.3); }
.btn--outline {
  background: transparent;
  color: var(--gray-700);
  border-color: var(--gray-300);
}
.btn--outline:hover { border-color: var(--gray-500); color: var(--gray-900); background: var(--gray-50); }
.btn--outline-light {
  background: rgba(255,255,255,.1);
  color: var(--white);
  border-color: rgba(255,255,255,.3);
  backdrop-filter: blur(4px);
}
.btn--outline-light:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }
.btn--foerder-hero {
  background: rgba(15,118,110,.18);
  color: #5eead4;
  border-color: rgba(15,118,110,.35);
  backdrop-filter: blur(4px);
}
.btn--foerder-hero:hover {
  background: rgba(15,118,110,.28);
  border-color: rgba(15,118,110,.55);
  color: #99f6e4;
  transform: translateY(-1px);
}

/* ---- NAVIGATION ---- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--gray-100);
  transition: box-shadow var(--transition);
}
.nav.is-scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.08); }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  position: relative;
  max-width: none;
  padding: 0 32px;
  margin: 0;
}
.nav__right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav__right a {
  text-decoration: none;
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-mark {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: block;
}
.logo-mark--sm { width: 36px; height: 36px; }
.logo-text {
  font-size: 1rem;
  font-weight: 900;
  color: var(--gray-900);
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1;
}
.logo-text span {
  display: block;
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .18em;
  color: var(--text-md);
  text-transform: uppercase;
  margin-top: 3px;
}
.logo-text--white { color: var(--white); }
.logo-text--white span { color: rgba(255,255,255,.45); }
.nav__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav__links a {
  text-decoration: none;
  color: var(--gray-600);
  font-size: .875rem;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.nav__links a:hover { color: var(--gray-900); background: var(--gray-100); }
/* Nav-Right: Farbsteigerung Blog → Selbststudium → Kundenportal */
.nav__blog {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  border: 1px solid #e2e8f0;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: #f8fafc;
  font-weight: 500;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.nav__blog:hover { background: #f1f5f9; border-color: #cbd5e1; color: #334155; }
.nav__blog-mobile {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748b !important;
  font-weight: 600 !important;
}
.nav__study {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #0d9488;
  border: 1px solid #5eead4;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: #f0fdfa;
  font-weight: 600;
  transition: background var(--transition), border-color var(--transition);
}
.nav__study:hover { background: #ccfbf1; border-color: #2dd4bf; }
.nav__study-mobile {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #0d9488 !important;
  font-weight: 600 !important;
}
.nav__portal {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  border: 1px solid #0d9488;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: #0d9488;
  font-weight: 600;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.nav__portal:hover { background: #0f766e; border-color: #0f766e; transform: translateY(-1px); }
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 8px;
}
.nav__burger span {
  display: block;
  height: 2px;
  background: var(--gray-700);
  border-radius: 2px;
  transition: all var(--transition);
}
.nav__burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.nav__mobile {
  display: none;
  flex-direction: column;
  padding: 12px 24px 20px;
  background: var(--white);
  border-top: 1px solid var(--gray-100);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.nav__mobile.open { display: flex; }
.nav__mobile a {
  padding: 12px 0;
  text-decoration: none;
  color: var(--gray-700);
  font-size: .95rem;
  font-weight: 500;
  border-bottom: 1px solid var(--gray-100);
}
.nav__mobile a:last-child { border-bottom: none; }
.nav__mobile .btn {
  padding: 12px 24px !important;
  color: var(--white) !important;
  border-bottom: none !important;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}
.nav__portal-mobile {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #0d9488 !important;
  font-weight: 700 !important;
}

/* ---- HERO ---- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  padding-top: 68px;
  box-sizing: border-box;
  position: relative;
}
.hero__divider-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.hero__divider-logo::before {
  content: '';
  position: absolute;
  inset: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15,118,110,0.30) 0%, rgba(15,118,110,0.12) 35%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.hero__divider-logo .logo-mark {
  width: 160px;
  height: 160px;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.35));
}
.hero__left {
  position: relative;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 80px 56px;
}
.hero__right {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 28px;
  padding: 80px 40px 80px 64px;
  position: relative;
  overflow: hidden;
}
.hero__right-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__rblob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero__rblob--1 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(15,118,110,.22) 0%, transparent 65%);
  top: -140px; right: -60px;
  filter: blur(60px);
}
.hero__rblob--2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(15,30,110,.18) 0%, transparent 70%);
  bottom: -80px; left: -40px;
  filter: blur(50px);
}
.hero__rblob--3 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(15,118,110,.16) 0%, transparent 70%);
  top: 40%; left: 20%;
  filter: blur(40px);
}
.hero__bg {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__grid {
  display: block;
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 36px 36px;
}
.hero__blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero__blob--1 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(15,118,110,.1) 0%, transparent 65%);
  top: -140px; right: 5%;
  filter: blur(60px);
}
.hero__blob--2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(30,58,110,.7) 0%, transparent 70%);
  bottom: -80px; left: 8%;
  filter: blur(50px);
}
.hero__blob--3 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(15,118,110,.06) 0%, transparent 70%);
  top: 40%; right: 25%;
  filter: blur(40px);
}
.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  max-width: 520px;
}

/* ---- HERO VISUAL CARD ---- */
.hero__service-grid-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 780px;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0;
}
.hero__service-grid-title {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-bottom: 12px;
  text-align: left;
}
.hero__service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}
.hero__service-grid .service-card {
  padding: 13px 18px;
}

/* ---- Kompakte Service-Cards (nur Icon + Titel + Link) ---- */
.hero__service-grid.hero__service-grid--compact { gap: 10px; }
.hero__service-grid.hero__service-grid--compact .service-card {
  padding: 14px 14px 12px;
  gap: 8px;
  align-items: flex-start;
  text-align: left;
  min-height: 0;
}
.hero__service-grid.hero__service-grid--compact .service-card__icon {
  width: 36px; height: 36px;
  margin-bottom: 2px;
  align-self: flex-start;
}
.hero__service-grid.hero__service-grid--compact .service-card__icon svg {
  width: 18px; height: 18px;
}
.hero__service-grid.hero__service-grid--compact .service-card__title {
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  margin-bottom: 0;
}
.hero__service-grid.hero__service-grid--compact .service-card__link {
  font-size: .78rem;
  margin-left: 0;
  margin-top: auto;
  padding-top: 2px;
}
.hero__service-grid.hero__service-grid--compact .service-card__new {
  top: 6px; right: 6px;
  font-size: .58rem;
}

.hero__service-grid .service-card__icon {
  width: 44px; height: 44px;
  margin-bottom: 8px;
  align-self: center;
}
.hero__service-grid .service-card__icon svg {
  width: 22px; height: 22px;
}
.hero__service-grid .service-card__title {
  font-size: 1rem;
  margin-bottom: 4px;
  text-align: center;
}
.hero__service-grid .service-card__text {
  font-size: .86rem;
  line-height: 1.45;
}
.hero__service-grid .service-card__tags {
  gap: 3px;
}
.hero__service-grid .service-card__tags span {
  font-size: .72rem;
  padding: 1px 5px;
}
.hero__service-grid .service-card__link {
  font-size: .82rem;
  margin-left: -6px;
}
.hero__service-grid .service-card__new {
  top: 8px; right: 8px;
  font-size: .58rem;
  padding: 1px 5px;
}

/* ============ Bento-Grid (Leistungen, Startseite) ============ */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 116px;
  gap: 12px;
  width: 100%;
}
.bento-item {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  padding: 20px;
  border-radius: 18px;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 14px rgba(15, 31, 46, 0.08);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  
  /* Silbentrennung für Deutsch */
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
/* Cybernetic cursor-glow */
.bento-item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(320px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.08), transparent 70%);
}
.bento-item:hover::before { opacity: 1; }
.bento-item:hover { 
  transform: translateY(-3px); 
  box-shadow: 0 12px 28px rgba(8, 22, 42, 0.22); 
  border-color: rgba(255, 255, 255, 0.15);
}
.bento-item > * { position: relative; z-index: 1; }

/* Spans & Layouts */
.bento-item--anchor { 
  grid-column: span 6; 
  grid-row: span 2; 
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  --g1: #107c64; /* Grüner Verlauf */
  --g2: #0b4e3f;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  border-color: rgba(16, 124, 100, 0.2);
}
.bento-item--anchor:hover {
  border-color: rgba(16, 124, 100, 0.5);
}

.bento-item--tall { 
  grid-column: span 3; 
  grid-row: span 2; 
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  padding-left: 14px; /* Mehr Breite für Text */
  padding-right: 14px;
}
.bento-item--tall .bento-item__title {
  font-size: 1.15rem; /* Größerer Titel, um den Kasten besser auszufüllen */
  line-height: 1.35;
}
.bento-item--tall .bento-item__desc {
  font-size: 0.88rem; /* Größere Beschreibung für mehr visuelle Präsenz */
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.bento-item--long { 
  grid-column: span 12; 
  grid-row: span 1; 
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, var(--g1), var(--g2));
}

.bento-item--half { 
  grid-column: span 6; 
  grid-row: span 1; 
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, var(--g1), var(--g2));
}

/* Farbwelten laut Screenshot */
.bento-item--ausweis { 
  --g1: #1a2f42; /* Dunkles Navy/Blau */
  --g2: #0f1c28; 
}
.bento-item--heizlast { 
  --g1: #114c4f; /* Tiefes Petrol */
  --g2: #0b2f32; 
}
.bento-item--foerderung { 
  --g1: #107c64; /* Grüner Verlauf */
  --g2: #0b4e3f; 
  border-color: rgba(16, 124, 100, 0.2);
}
.bento-item--foerderung:hover {
  border-color: rgba(16, 124, 100, 0.5);
}
.bento-item--baubegleitung,
.bento-item--nichtwohn { 
  --g1: #1f232b; /* Edles Dunkelgrau/Navy */
  --g2: #14171d; 
}

/* Header-Bereich für Kachel 1 (Nummer & Badge) */
.bento-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
}
.bento-item__header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bento-item__header .bento-item__num {
  position: static;
}

/* Struktur-Elemente */
.bento-item__num {
  font-family: inherit; /* Verwende den Marken-Font */
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.45);
}

/* Icon-Abstand bei hohen Kacheln */
.bento-item--tall .bento-item__icon {
  margin-bottom: auto; /* Schiebt den Textblock ganz nach unten */
}

.bento-item__badge {
  background: #ffffff;
  color: #107c64;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 100px;
}

/* Transparente Icons laut Screenshot */
.bento-item__icon {
  width: auto;
  height: auto;
  background: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bento-item__icon svg { 
  width: 24px; 
  height: 24px; 
  stroke: #fff; 
}

/* Text-Blöcke */
.bento-item__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bento-item--tall .bento-item__body {
  margin-top: auto; /* Schiebt Text ans untere Ende */
}
.bento-item--long .bento-item__body,
.bento-item--half .bento-item__body {
  margin-top: 0;
}

.bento-item__title {
  font-size: 1.05rem;
  font-weight: 700; /* Stärkeres Fettgewicht */
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Größere Schrift für das Highlight */
.bento-item--featured .bento-item__title {
  font-size: 1.35rem;
}

.bento-item__desc {
  font-size: 0.83rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
}

/* Das Timeline-Motiv (Punkte & Linien) */
.bento-item__motif {
  width: 100%;
  max-width: 140px;
  height: 12px;
  margin: 16px 0;
  color: rgba(255, 255, 255, 0.6);
  display: block;
}

/* Absolute Nummer für tall, long und half Kacheln */
.bento-item--tall .bento-item__num,
.bento-item--long .bento-item__num,
.bento-item--half .bento-item__num {
  position: absolute;
  top: 18px;
  right: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .bento-item, .bento-item::before { transition: none; }
  .bento-item:hover { transform: none; }
}
@media (max-width: 560px) {
  .bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 10px; }
  .bento-item { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: auto; padding: 18px; }
  .bento-item--long,
  .bento-item--half { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bento-item--long .bento-item__body,
  .bento-item--half .bento-item__body { margin-top: 0; }
  .bento-item--tall .bento-item__num { margin-bottom: 12px; }
  .bento-item__motif { margin: 12px 0; }
}

/* Die alten Hero-Cards und Services-Cards wurden entfernt */

.hero__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.55);
  margin-bottom: 16px;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px;
  background: rgba(255,255,255,.05);
}
.hero__partner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(.8rem, 1.2vw, 1rem);
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,.55);
  letter-spacing: -.01em;
  margin-bottom: 8px;
  line-height: 1.3;
}
.hero__partner strong {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  font-style: normal;
  color: rgba(255,255,255,.95);
}
.hero__title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.12;
  letter-spacing: -.04em;
  margin-bottom: 24px;
}
.hero__title-accent {
  background: linear-gradient(130deg, #0f766e 0%, #2dd4bf 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero__slogan {
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  font-weight: 700;
  font-style: italic;
  color: rgba(255,255,255,.9);
  letter-spacing: -.02em;
  margin-bottom: 10px;
  line-height: 1.3;
}
.hero__descriptor {
  font-size: .8rem;
  font-weight: 500;
  color: rgba(255,255,255,.4);
  letter-spacing: .04em;
  margin-bottom: 100px;
}
.hero__sub {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: rgba(255,255,255,.68);
  max-width: 580px;
  margin-bottom: 40px;
  line-height: 1.72;
}
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 380px;
  margin: 0 0 56px;
}
.hero__actions .btn {
  justify-content: center;
}
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  backdrop-filter: blur(4px);
}
.trust-badge svg { color: #2dd4bf; flex-shrink: 0; }

/* ---- FÖRDERKONFIGURATOR TEASER ---- */
.foerder-teaser {
  background: linear-gradient(135deg, #f1f5f9 0%, #e8edf5 100%);
  padding: 28px 0;
  position: relative;
  overflow: hidden;
}
.foerder-teaser::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(12,26,53,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.foerder-teaser::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15,118,110,.1) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.foerder-teaser__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.foerder-teaser__left {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex: 1;
  min-width: 260px;
}
.foerder-teaser__icon {
  width: 60px; height: 60px;
  border-radius: var(--radius);
  background: rgba(15,118,110,.15);
  border: 1px solid rgba(15,118,110,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5eead4;
  flex-shrink: 0;
  margin-top: 4px;
}
.foerder-teaser__eyebrow {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  background: linear-gradient(130deg, #0f766e 0%, #2dd4bf 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.foerder-teaser__eyebrow::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #2dd4bf;
}
.foerder-teaser__title {
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.03em;
  line-height: 1.25;
  margin-bottom: 10px;
}
.foerder-teaser__title span {
  background: linear-gradient(130deg, #0f766e 0%, #2dd4bf 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.foerder-teaser__sub {
  font-size: .9rem;
  color: rgba(12,26,53,.6);
  line-height: 1.65;
  margin-bottom: 16px;
  max-width: 480px;
}
.foerder-teaser__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.foerder-teaser__badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  font-weight: 500;
  color: rgba(12,26,53,.5);
}
.foerder-teaser__badges span svg { color: #0f766e; }
.foerder-teaser__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.btn--foerder {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 8px 28px rgba(15,118,110,.35);
  font-size: 1rem;
  padding: 17px 32px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.btn--foerder:hover {
  background: linear-gradient(135deg, #0a6460 0%, #0b7d70 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(15,118,110,.3);
}
.foerder-teaser__note {
  font-size: .75rem;
  color: rgba(12,26,53,.4);
}
@media (max-width: 700px) {
  .foerder-teaser { padding: 32px 0; }
  .foerder-teaser__inner {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }
  .foerder-teaser__left {
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
  }
  .foerder-teaser__icon { display: none; }
  .foerder-teaser__eyebrow { justify-content: center; }
  .foerder-teaser__title { font-size: 1.75rem; }
  .foerder-teaser__sub { margin-bottom: 0; max-width: 100%; }
  .foerder-teaser__right {
    align-items: center;
    width: 100%;
  }
  .btn--foerder { width: 100%; justify-content: center; }
  .foerder-teaser__badges { justify-content: center; }
}

/* ---- BLOG TEASER ---- */
.blog-teaser {
  background: linear-gradient(135deg, #f1f5f9 0%, #e8edf5 100%);
  padding: 28px 0;
  position: relative;
  overflow: hidden;
}
.blog-teaser::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(12,26,53,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.blog-teaser::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15,118,110,.1) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.blog-teaser__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.blog-teaser__left {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex: 1;
  min-width: 260px;
}
.blog-teaser__eyebrow {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  background: linear-gradient(130deg, #0f766e 0%, #2dd4bf 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.blog-teaser__eyebrow::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #2dd4bf;
}
.blog-teaser__title {
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.03em;
  line-height: 1.25;
  margin-bottom: 10px;
}
.blog-teaser__title span {
  background: linear-gradient(130deg, #0f766e 0%, #2dd4bf 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.blog-teaser__sub {
  font-size: .9rem;
  color: rgba(12,26,53,.6);
  line-height: 1.65;
  margin-bottom: 16px;
  max-width: 480px;
}
.blog-teaser__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.blog-teaser__badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  font-weight: 500;
  color: rgba(12,26,53,.5);
}
.blog-teaser__badges span svg { color: #0f766e; }
.blog-teaser__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.blog-teaser__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  font-size: .85rem;
  font-weight: 700;
  color: #0f766e;
  text-decoration: none;
  transition: gap var(--transition);
}
.blog-teaser__link:hover { gap: 8px; }
.blog-teaser__note {
  font-size: .75rem;
  color: rgba(12,26,53,.4);
}
.btn--social {
  justify-content: center;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
}
.blog-teaser__right .btn {
  width: 100%;
  justify-content: center;
  padding: 15px 24px !important;
  font-size: .9rem !important;
  box-sizing: border-box;
}
.btn--social--instagram {
  background: linear-gradient(90deg, #f3a95c 0%, #eb8663 25%, #e35269 50%, #d64f85 75%, #c946a0 100%);
  color: #fff;
  border: none !important;
  box-shadow: 0 6px 24px rgba(220,39,67,.3);
}
.btn--social--instagram:hover {
  background: linear-gradient(90deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(220,39,67,.35);
}
.btn--social--facebook {
  background: #4692f5;
  color: #fff;
  border: none !important;
  box-shadow: 0 6px 24px rgba(24,119,242,.3);
}
.btn--social--facebook:hover {
  background: #1877f2;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(24,119,242,.35);
}
@media (max-width: 700px) {
  .blog-teaser { padding: 32px 0; }
  .blog-teaser__inner { flex-direction: column; align-items: center; gap: 24px; text-align: center; }
  .blog-teaser__left { flex-direction: column; align-items: center; gap: 0; width: 100%; }
  .blog-teaser__eyebrow { justify-content: center; }
  .blog-teaser__title { font-size: 1.75rem; }
  .blog-teaser__sub { margin-bottom: 0; max-width: 100%; }
  .blog-teaser__right { align-items: center; width: 100%; }
  .blog-teaser__badges { justify-content: center; }
}

/* ---- PROBLEM SECTION ---- */
.question-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.question-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.question-card:hover { box-shadow: var(--shadow-md); border-color: var(--gray-300); transform: translateY(-2px); }
.question-card__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-500);
}
.question-card__icon svg { width: 20px; height: 20px; }
.question-card p {
  font-size: .95rem;
  font-weight: 500;
  color: var(--gray-700);
  line-height: 1.5;
  padding-top: 10px;
}

/* ---- NACHBARSCHAFTS-BONUS ---- */
@keyframes nachbarschaft-rotate {
  to { transform: translate(-50%, -50%) rotate(1turn); }
}
.nachbarschaft {
  background: var(--white);
  padding: 56px 0;
}
.nachbarschaft__card {
  position: relative;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: center;
  border-radius: 24px;
  padding: 38px 46px;
  box-shadow: 0 4px 24px rgba(15,118,110,.06);
  overflow: hidden;
}
/* Rotierender Farbverlauf: einmal gemalt, dann nur noch per transform
   gedreht (Compositor) — der 2px-Rand entsteht durch das ::after-Panel,
   das alles bis auf den Rand abdeckt. */
.nachbarschaft__card::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 250%;
  aspect-ratio: 1;
  z-index: 0;
  background: conic-gradient(
    #0f766e,
    #2dd4bf,
    #a7f3d0,
    #2dd4bf,
    #0f766e,
    #2dd4bf,
    #a7f3d0,
    #2dd4bf,
    #0f766e
  );
  transform: translate(-50%, -50%);
  animation: nachbarschaft-rotate 10s linear infinite;
  pointer-events: none;
}
.nachbarschaft__card::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 22px;
  z-index: 0;
  background:
    radial-gradient(circle 226px at calc(100% - 55px) 28px, rgba(45,212,191,.16) 0%, transparent 70%),
    linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%);
  pointer-events: none;
}
.nachbarschaft__media {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nachbarschaft__media img,
.nachbarschaft__houses {
  width: 100%;
  max-width: 288px;
  height: auto;
  display: block;
}
.nachbarschaft__text {
  position: relative;
  z-index: 1;
}
.nachbarschaft__title {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
  margin: 8px 0 14px;
}
.nachbarschaft__lead {
  font-size: .95rem;
  line-height: 1.65;
  color: rgba(12,26,53,.7);
  margin: 0 0 22px;
  max-width: 560px;
}
.nachbarschaft__lead strong {
  color: var(--navy);
  font-weight: 700;
}
.nachbarschaft__badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 14px;
  background: var(--white);
  border: 1px solid var(--teal-border);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(15,118,110,.08);
}
.nachbarschaft__badge-num {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(130deg, #0f766e 0%, #2dd4bf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nachbarschaft__badge-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .2px;
}

/* ---- SERVICES ---- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-500) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  opacity: 0;
  transition: opacity var(--transition);
}
.service-card:hover { box-shadow: var(--shadow-md); border-color: var(--gray-300); transform: translateY(-3px); }
.service-card:hover::before { opacity: 1; }
.service-card__icon {
  width: 52px; height: 52px;
  background: var(--navy);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.service-card__icon svg { width: 24px; height: 24px; color: rgba(255,255,255,.85); }
.service-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.35;
}
.service-card__text {
  font-size: .9rem;
  color: var(--text-md);
  line-height: 1.65;
  flex: 1;
}
.service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.service-card__tags span {
  font-size: .73rem;
  font-weight: 600;
  color: var(--navy-500);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  padding: 3px 10px;
  letter-spacing: .01em;
}
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--teal-600);
  text-decoration: none;
  margin-top: auto;
  padding-top: 4px;
  transition: gap var(--transition);
}
.service-card__link:hover { gap: 10px; }
.service-card--highlight {
  border-color: #99f6e4;
  background: linear-gradient(135deg, #f0fdff 0%, #ffffff 60%);
  position: relative;
  overflow: hidden;
}
.service-card--highlight::before {
  background: linear-gradient(90deg, #0f766e 0%, #0f766e 100%);
  opacity: 1 !important;
}
.service-card--highlight:hover { border-color: #5eead4; }
.service-card--highlight .service-card__icon { background: #0f766e; }
.service-card__new {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #0f766e;
  color: #fff;
  padding: 3px 9px;
  border-radius: 99px;
}

/* ---- PROCESS ---- */
.process {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
}
.process::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--gray-200);
  z-index: 0;
}
.process__step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 32px 28px 0;
  border-bottom: 1px solid var(--gray-100);
  position: relative;
  z-index: 1;
}
.process__step:nth-child(even) {
  padding-left: 32px;
  padding-right: 0;
  border-left: 1px solid var(--gray-100);
}
.process__step:nth-last-child(-n+2) { border-bottom: none; }
.process__num {
  flex-shrink: 0;
  width: 52px; height: 52px;
  background: var(--navy);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .03em;
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--navy);
}
.process__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 6px;
}
.process__text { font-size: .88rem; color: var(--text-md); line-height: 1.6; }

/* ---- ABLAUF (sticky heading, cards fly past) ---- */
.ablauf {
  background: #f9fafb;
  padding: 96px 0;
}
.ablauf__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.ablauf__left {
  position: sticky;
  top: calc(50vh - 180px);
  padding-bottom: 40px;
}
.ablauf__heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
  margin: 12px 0 16px;
}
.ablauf__desc {
  font-size: .95rem;
  line-height: 1.65;
  color: rgba(12,26,53,.5);
  max-width: 300px;
}
.ablauf__hint {
  margin-top: 24px;
  font-size: .8rem;
  line-height: 1.6;
  color: rgba(12,26,53,.4);
  max-width: 280px;
  padding: 10px 14px;
  border-left: 2px solid rgba(15,118,110,.3);
}
.ablauf__stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 0;
}
.ablauf__card {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(12,26,53,.08);
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 4px 24px rgba(12,26,53,.07), 0 1px 4px rgba(12,26,53,.04);
  opacity: 0;
  transform: translateY(32px);
  transition: box-shadow .25s, border-color .25s, opacity .45s ease, transform .45s ease;
}
.ablauf__card.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Card that has reached the top edge — fades out upward */
.ablauf__card.is-past {
  opacity: 0;
  transform: translateY(-24px);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.ablauf__card:hover {
  box-shadow: 0 8px 40px rgba(12,26,53,.12);
  border-color: rgba(15,118,110,.2);
}
.ablauf__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.ablauf__card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  line-height: 1.3;
}
.ablauf__card-num {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  background: linear-gradient(130deg, #0f766e 0%, #2dd4bf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ablauf__card-text {
  font-size: .875rem;
  line-height: 1.65;
  color: rgba(12,26,53,.55);
  margin: 0;
}

/* ---- PORTAL ---- */
.portal__inner {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: var(--shadow);
  align-items: center;
}
.portal__content { display: flex; gap: 32px; align-items: flex-start; }
.portal__icon {
  flex-shrink: 0;
  width: 64px; height: 64px;
  background: var(--navy);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}
.portal__icon svg { width: 28px; height: 28px; color: rgba(255,255,255,.85); }
.portal__content h2 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--gray-900);
  margin-bottom: 12px;
  line-height: 1.3;
}
.portal__content p {
  font-size: .92rem;
  color: var(--text-md);
  line-height: 1.65;
  margin-bottom: 20px;
}
.portal__security-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.portal__security-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
  font-weight: 500;
  color: var(--gray-700);
}
.portal__security-item svg { color: var(--teal-700); flex-shrink: 0; }
.portal__actions { display: flex; flex-direction: column; gap: 10px; }
.portal__note { font-size: .8rem; color: var(--gray-400); }
.portal__placeholder {
  background: var(--gray-50);
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  gap: 12px;
}
.portal__lock {
  width: 64px; height: 64px;
  background: var(--gray-200);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portal__lock svg { width: 28px; height: 28px; color: var(--gray-400); }
.portal__placeholder-label {
  font-size: .95rem;
  font-weight: 700;
  color: var(--gray-500);
}
.portal__placeholder-sub {
  font-size: .8rem;
  color: var(--gray-400);
  line-height: 1.5;
}

/* ---- TEAM ---- */
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}
.team-card {
  display: flex;
  gap: 24px;
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.team-card:hover { box-shadow: var(--shadow-md); }
.team-card__photo {
  flex-shrink: 0;
  width: 88px; height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gray-100);
  border: 2px solid var(--gray-200);
}
.team-card__photo-inner {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-card__photo-inner svg { width: 40px; height: 40px; color: var(--gray-300); }
.team-card__photo-inner img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.team-card__name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 3px;
}
.team-card__role { font-size: .85rem; color: var(--text-md); margin-bottom: 10px; }
.team-card__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.team-badge {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 10px;
  background: var(--navy);
  color: var(--white);
  border-radius: 100px;
}
.team-card__bio { font-size: .88rem; color: var(--gray-400); line-height: 1.55; }

.about__certs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  padding: 32px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}
.cert-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--gray-700);
}
.cert-item svg { color: var(--navy-500); flex-shrink: 0; }

/* ---- CASE STUDY ---- */
.case-study {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.case-study__col {
  padding: 32px 28px;
  border-right: 1px solid var(--gray-100);
}
.case-study__col:last-child { border-right: none; }
.case-study__col-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gray-400);
  margin-bottom: 20px;
}
.case-study__result { background: var(--gray-50); }
.case-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: .88rem;
  gap: 12px;
}
.case-row:last-child { border-bottom: none; }
.case-row__label { color: var(--gray-400); font-size: .82rem; white-space: nowrap; }
.case-row__val { color: var(--gray-800); font-weight: 600; text-align: right; }
.case-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  color: var(--gray-700);
  padding: 7px 0;
  border-bottom: 1px solid var(--gray-100);
}
.case-check:last-child { border-bottom: none; }
.case-check svg { color: var(--teal-700); flex-shrink: 0; }
.case-study__result p { font-size: .9rem; color: var(--text-md); line-height: 1.6; margin-bottom: 16px; }
.case-study__result strong { color: var(--gray-900); }
.case-verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--teal-700);
  margin-bottom: 6px;
}
.case-verdict svg { color: var(--teal-700); flex-shrink: 0; }
.case-study__disclaimer {
  font-size: .8rem;
  color: var(--gray-400);
  text-align: center;
  font-style: italic;
}

/* ---- FAQ ---- */
.faq-layout {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 64px;
  align-items: start;
}
.faq-layout__left {
  position: sticky;
  top: 90px;
}
.faq-layout__sub {
  color: var(--gray-500);
  font-size: .95rem;
  line-height: 1.65;
  margin: 12px 0 28px;
}
.faq-layout__cta {
  display: inline-block;
  font-size: .9rem;
  color: var(--gray-500);
  text-decoration: none;
  line-height: 1.6;
}
.faq-layout__cta span {
  color: #0f766e;
  font-weight: 700;
}
.faq-layout__cta:hover span { text-decoration: underline; }
.faq-layout__right { min-width: 0; }
.faq-list {
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  .faq-layout { grid-template-columns: 1fr; gap: 28px; }
  .faq-layout__left { position: static; }
}
.faq-item {
  border-bottom: 1px solid var(--gray-200);
}
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-800);
}
.faq-icon {
  flex-shrink: 0;
  width: 16px; height: 16px;
  color: currentColor;
  transition: transform .2s ease-out;
}
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }
.faq-answer {
  overflow: hidden;
  height: 0;
  transition: height .2s ease-out;
}
.faq-answer p {
  margin: 0;
  padding: 0 0 16px;
  font-size: .9375rem;
  color: var(--text-md);
  line-height: 1.7;
}

/* ---- CONTACT / MULTI-STEP FORM ---- */
.form-wrapper {
  max-width: 680px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.form-progress {
  padding: 28px 32px 24px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.form-progress__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.form-progress__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.form-progress__dot {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  transition: all var(--transition);
}
.form-progress__step.active .form-progress__dot {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 0 0 4px rgba(12,26,53,.15);
}
.form-progress__step.done .form-progress__dot {
  background: var(--teal-700);
  color: var(--white);
}
.form-progress__step span {
  font-size: .72rem;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.form-progress__step.active span { color: var(--navy); }
.form-progress__line {
  flex: 1;
  height: 2px;
  background: var(--gray-200);
  margin: -18px 8px 18px;
  min-width: 40px;
  transition: background var(--transition);
}
.form-progress__line.done { background: var(--teal-700); }

.contact-form { position: relative; }
.form-step {
  display: none;
  padding: 32px;
  flex-direction: column;
  gap: 20px;
  animation: fadeIn .25s ease;
}
.form-step.active { display: flex; }
@keyframes fadeIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.form-step__title { font-size: 1.15rem; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; }
.form-step__hint { font-size: .83rem; color: var(--gray-400); margin-top: -12px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--gray-600);
  letter-spacing: .01em;
}
.req { color: var(--teal-600); }
.form-group input,
.form-group select,
.form-group textarea {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: .92rem;
  font-family: inherit;
  color: var(--gray-900);
  background: var(--white);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  resize: vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--gray-300); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--navy-500);
  box-shadow: 0 0 0 3px rgba(30,58,110,.1);
}
.form-group input.error,
.form-group select.error { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.1); }
.form-error { font-size: .78rem; color: #ef4444; min-height: 16px; }

.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.checkbox-card { cursor: pointer; }
.checkbox-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox-card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 20px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  transition: all var(--transition);
}
.checkbox-card__inner svg { width: 24px; height: 24px; color: var(--gray-400); }
.checkbox-card__inner span { font-size: .85rem; font-weight: 600; color: var(--gray-600); line-height: 1.4; }
.checkbox-card input:checked ~ .checkbox-card__inner {
  border-color: var(--navy);
  background: var(--gray-50);
  box-shadow: 0 0 0 3px rgba(12,26,53,.08);
}
.checkbox-card input:checked ~ .checkbox-card__inner svg { color: var(--navy); }
.checkbox-card input:checked ~ .checkbox-card__inner span { color: var(--navy); }
.checkbox-card:hover .checkbox-card__inner { border-color: var(--gray-300); }

.checkbox-label {
  display: flex;
  gap: 12px;
  cursor: pointer;
  font-size: .88rem;
  color: var(--gray-600);
  line-height: 1.55;
  align-items: flex-start;
}
.checkbox-label input[type="checkbox"] {
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
  accent-color: var(--navy);
}
.form-link { color: var(--teal-600); text-decoration: underline; }

.form-upload-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: .83rem;
  color: var(--gray-600);
  line-height: 1.5;
}
.form-upload-note svg { flex-shrink: 0; color: var(--gray-400); margin-top: 1px; }
.form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
}
.form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 32px;
  gap: 16px;
}
.form-success.active { display: flex; }
.form-success__icon {
  width: 64px; height: 64px;
  background: var(--teal-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-success__icon svg { width: 28px; height: 28px; color: var(--teal-700); }
.form-success h3 { font-size: 1.25rem; font-weight: 700; color: var(--gray-900); }
.form-success p { font-size: .92rem; color: var(--text-md); max-width: 380px; line-height: 1.6; }

/* ============================================================
   KONTAKT — Glass-Card-Look (nur Ersteinschätzungs-Sektion)
   ============================================================ */
.page-end { position: relative; overflow: hidden; background: var(--navy); }
.page-end::before,
.page-end::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.page-end::before {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(13,148,136,.22), transparent 70%);
  top: -80px; left: -120px;
}
.page-end::after {
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(30,58,110,.55), transparent 70%);
  bottom: 40px; right: -160px;
}
.page-end > * { position: relative; z-index: 1; }
/* z-index 2: Dropdown-Listen des Formulars dürfen nicht unter dem
   nachfolgenden Footer (z-index 1) verschwinden */
.page-end #kontakt { background: transparent; z-index: 2; }
.page-end .footer { background: transparent; }
#kontakt .form-wrapper {
  background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 60%, rgba(255,255,255,.01) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
}
#kontakt .form-progress {
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
#kontakt .form-progress__dot {
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.5);
}
#kontakt .form-progress__step.active .form-progress__dot {
  background: var(--teal-600);
  color: var(--white);
  box-shadow: 0 0 0 4px rgba(13,148,136,.25);
}
#kontakt .form-progress__step.done .form-progress__dot {
  background: rgba(13,148,136,.45);
  color: #99f6e4;
}
#kontakt .form-progress__step span { color: rgba(255,255,255,.4); }
#kontakt .form-progress__step.active span { color: var(--white); }
#kontakt .form-progress__line { background: rgba(255,255,255,.12); }
#kontakt .form-progress__line.done { background: var(--teal-600); }
#kontakt .form-step__title { color: var(--white); }
#kontakt .form-step__hint { color: rgba(255,255,255,.45); }
#kontakt .form-group label { color: rgba(255,255,255,.75); }
#kontakt .req { color: #5eead4; }
#kontakt .form-group input,
#kontakt .form-group select,
#kontakt .form-group textarea {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  border-radius: 12px;
  color: var(--white);
}
#kontakt .form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235eead4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
  padding-right: 42px;
  cursor: pointer;
}
#kontakt .form-group select option { color: var(--white); background: #0f2236; }
#kontakt .form-group input::placeholder,
#kontakt .form-group textarea::placeholder { color: rgba(255,255,255,.35); }
#kontakt .form-group input:focus,
#kontakt .form-group select:focus,
#kontakt .form-group textarea:focus {
  border-color: #5eead4;
  box-shadow: 0 0 0 3px rgba(94,234,212,.15);
  background-color: rgba(255,255,255,.12);
}
#kontakt .form-group input.error,
#kontakt .form-group select.error { border-color: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,.15); }
#kontakt .form-error { color: #fca5a5; }
#kontakt .checkbox-card__inner {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.13);
  border-radius: 14px;
}
#kontakt .checkbox-card__inner svg { color: rgba(255,255,255,.45); }
#kontakt .checkbox-card__inner span { color: rgba(255,255,255,.75); }
#kontakt .checkbox-card:hover .checkbox-card__inner { border-color: rgba(255,255,255,.3); }
#kontakt .checkbox-card input:checked ~ .checkbox-card__inner {
  border-color: #5eead4;
  background: rgba(13,148,136,.16);
  box-shadow: 0 0 0 3px rgba(94,234,212,.12);
}
#kontakt .checkbox-card input:checked ~ .checkbox-card__inner svg { color: #5eead4; }
#kontakt .checkbox-card input:checked ~ .checkbox-card__inner span { color: #99f6e4; }
#kontakt .checkbox-label { color: rgba(255,255,255,.65); }
#kontakt .checkbox-label input[type="checkbox"] { accent-color: var(--teal-600); }
#kontakt .form-link { color: #5eead4; }
#kontakt .form-upload-note {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.11);
  color: rgba(255,255,255,.6);
  border-radius: 12px;
}
#kontakt .form-upload-note svg { color: rgba(255,255,255,.4); }
#kontakt .form-nav .btn { border-radius: 999px; }
#kontakt .btn--outline {
  color: rgba(255,255,255,.75);
  border-color: rgba(255,255,255,.25);
}
#kontakt .btn--outline:hover {
  color: var(--white);
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.08);
}
#kontakt .form-success__icon { background: rgba(34,197,94,.15); }
#kontakt .form-success__icon svg { color: #86efac; }
#kontakt .form-success h3 { color: var(--white); }
#kontakt .form-success p { color: rgba(255,255,255,.65); }

/* ---- Custom Dropdown (Kontaktformular) ---- */
#kontakt .form-wrapper { overflow: visible; }
/* Hebt das Paint-Containment von content-visibility:auto (Performance-
   Block am Dateiende) auf, solange ein Dropdown offen ist — sonst wird
   die Liste an der Sektionsunterkante abgeschnitten. Klasse setzt JS. */
#kontakt.drop-open { content-visibility: visible; }
#kontakt .form-progress { border-radius: 24px 24px 0 0; }
.nice-select { position: relative; }
.nice-select select { display: none; }
.nice-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 1.5px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: .92rem;
  font-family: inherit;
  color: var(--white);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.nice-select__trigger svg { color: #5eead4; flex-shrink: 0; transition: transform .12s ease; }
.nice-select.open .nice-select__trigger svg { transform: rotate(180deg); }
.nice-select__trigger.is-placeholder .nice-select__value { color: rgba(255,255,255,.35); }
.nice-select__trigger:focus-visible,
.nice-select.open .nice-select__trigger {
  border-color: #5eead4;
  box-shadow: 0 0 0 3px rgba(94,234,212,.15);
  background: rgba(255,255,255,.12);
  outline: none;
}
.nice-select__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: rgba(13,34,56,.97);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  max-height: 290px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .1s ease-out, transform .1s ease-out;
}
/* Öffnet nach oben, wenn unten kein Platz (Klasse wird per JS gesetzt) */
.nice-select.drop-up .nice-select__list {
  top: auto;
  bottom: calc(100% + 6px);
  transform: translateY(4px);
}
.nice-select.open .nice-select__list {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.nice-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: .9rem;
  color: rgba(255,255,255,.8);
  cursor: pointer;
}
.nice-select__option:hover { background: rgba(94,234,212,.12); color: var(--white); }
.nice-select__option .nice-select__check { opacity: 0; color: #5eead4; flex-shrink: 0; }
.nice-select__option.selected { color: #99f6e4; }
.nice-select__option.selected .nice-select__check { opacity: 1; }
/* Platzhalter-Eintrag gedimmt, ohne Häkchen */
.nice-select__option:first-child { color: rgba(255,255,255,.45); }
.nice-select__option:first-child .nice-select__check { display: none; }
/* Scrollbalken passend zum Panel (Safari/ältere Browser) */
.nice-select__list::-webkit-scrollbar { width: 6px; }
.nice-select__list::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.nice-select__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 99px; }
.nice-select__list::-webkit-scrollbar-thumb:hover { background: rgba(94,234,212,.45); }

/* ---- FOOTER ---- */
.footer { background: var(--navy); color: rgba(255,255,255,.6); }
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 48px 96px;
  padding: 52px 24px 36px;
}
.footer__brand {
  flex: 0 1 340px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer__desc {
  font-size: .9rem;
  line-height: 1.65;
  margin-top: 18px;
  color: rgba(255,255,255,.55);
}
.footer__social {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);
}
.footer__social a:hover {
  color: var(--white);
  background: var(--teal-600);
  border-color: var(--teal-600);
  transform: translateY(-2px);
}
.footer__mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: .88rem;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color var(--transition);
}
.footer__mail:hover { color: var(--white); }
.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 48px 80px;
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__col h5 {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.4);
  margin-bottom: 6px;
}
.footer__col a {
  font-size: .88rem;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color var(--transition);
  line-height: 1.5;
}
.footer__col a:hover { color: var(--white); }
.footer__col p { font-size: .88rem; line-height: 1.6; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 20px 24px;
}
.footer__bottom-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px 28px;
  flex-wrap: wrap;
}
.footer__bottom p { font-size: .8rem; color: rgba(255,255,255,.3); }
.footer__legal { display: flex; gap: 20px; }
.footer__legal a {
  font-size: .8rem;
  color: rgba(255,255,255,.35);
  text-decoration: none;
  transition: color var(--transition);
}
.footer__legal a:hover { color: rgba(255,255,255,.7); }

/* ---- DENA TRUST BAR ---- */
.dena-trust-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--navy);
  border-radius: var(--radius);
  padding: 24px 32px;
  margin: 40px 0 0;
  flex-wrap: wrap;
  gap: 0;
}
.dena-trust-bar__badge {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 220px;
  padding: 12px 16px;
}
.dena-trust-bar__badge svg { color: #5eead4; flex-shrink: 0; }
.dena-trust-bar__badge strong { display: block; font-size: .875rem; font-weight: 700; color: var(--white); }
.dena-trust-bar__badge span { font-size: .78rem; color: rgba(255,255,255,.5); }
.dena-trust-bar__sep { width: 1px; background: rgba(255,255,255,.12); align-self: stretch; margin: 8px 0; }
@media(max-width:700px){
  .dena-trust-bar { padding: 16px; }
  .dena-trust-bar__sep { display: none; }
  .dena-trust-bar__badge { min-width: 100%; border-bottom: 1px solid rgba(255,255,255,.08); }
  .dena-trust-bar__badge:last-child { border-bottom: none; }
}

/* ---- CONTACT TRUST ROW ---- */
.contact-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: center;
  margin-top: 16px;
}
.contact-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  color: rgba(255,255,255,.65);
}
.contact-trust-item svg { color: #5eead4; flex-shrink: 0; }

/* ---- MOBILE NAV GROUP ---- */
.nav__mobile-group {
  display: flex;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
}
.nav__mobile-group a {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: var(--radius-sm);
  padding: 10px 6px !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  border-bottom: none !important;
  white-space: nowrap;
}
/* Blog: blass */
.nav__mobile-group a:nth-child(1) {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}
/* Selbststudium: teal getönt */
.nav__mobile-group a:nth-child(2) {
  background: #f0fdfa !important;
  border: 1px solid #5eead4 !important;
  color: #0d9488 !important;
}
/* Kundenportal: voll teal */
.nav__mobile-group a:nth-child(3) {
  background: #0d9488 !important;
  border: 1px solid #0d9488 !important;
  color: #fff !important;
}

/* ---- SELBSTSTUDIUM TEASER ---- */
/* ---- WISSEN SECTION ---- */
.wissen-section__sub {
  max-width: 540px;
  margin: 12px auto 0;
  color: var(--gray-500);
  font-size: .95rem;
  line-height: 1.65;
  text-align: center;
}
.wissen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 48px;
}
.wissen-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 20px;
  padding: 28px;
  min-height: 230px;
  text-decoration: none;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1);
}
.wissen-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.1);
}
.wissen-card--orange,
.wissen-card--slate,
.wissen-card--green,
.wissen-card--teal {
  background: linear-gradient(135deg, #f8fafc 0%, rgba(226,232,240,.35) 100%);
  border: 1px solid #e2e8f0;
}
/* Decorative emoji background */
.wissen-card__emoji {
  position: absolute;
  bottom: -6px;
  right: 10px;
  font-size: 11rem;
  line-height: 1;
  opacity: .31;
  pointer-events: none;
  user-select: none;
  transform: rotate(10deg);
  transition: transform .22s ease, opacity .22s ease;
}
.wissen-card:hover .wissen-card__emoji {
  transform: scale(1.12) rotate(20deg);
  opacity: .41;
}
.wissen-card__badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 99px;
  padding: 3px 12px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.wissen-card__body { position: relative; z-index: 1; }
.wissen-card__title {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 8px;
  letter-spacing: -.02em;
}
.wissen-card__desc {
  font-size: .875rem;
  color: var(--gray-500);
  line-height: 1.6;
  max-width: 88%;
}
.wissen-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--gray-900);
  position: relative;
  z-index: 1;
}
.wissen-card__cta svg { transition: transform .2s; }
.wissen-card:hover .wissen-card__cta svg { transform: translateX(4px); }
.wissen-footer {
  margin-top: 36px;
  text-align: center;
}
@media (max-width: 768px) {
  .wissen-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .wissen-card { min-height: 200px; padding: 22px; }
  .wissen-card__emoji { font-size: 8.5rem; }
}

/* ---- KENNZAHLEN STRIP ---- */
.kenn-strip {
  background: linear-gradient(180deg, var(--white) 0%, var(--gray-50) 100%);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.kenn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.kenn-item {
  padding: 44px 20px;
  border-right: 1px solid var(--gray-100);
  position: relative;
  transition: background var(--transition);
}
.kenn-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--teal-700);
  transition: width var(--transition);
}
.kenn-item:hover { background: rgba(15,118,110,.02); }
.kenn-item:hover::after { width: 40px; }
.kenn-item:last-child { border-right: none; }
.kenn-num {
  font-size: clamp(1.75rem, 3.2vw, 2.8rem);
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 10px;
}
.kenn-label {
  font-size: .82rem;
  color: var(--gray-500);
  font-weight: 500;
  line-height: 1.5;
}

/* ---- KUNDENSTIMMEN ---- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: -12px;
  right: 18px;
  font-size: 8rem;
  font-weight: 900;
  color: var(--gray-100);
  line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
  pointer-events: none;
  z-index: 0;
  transition: color var(--transition);
}
.testimonial-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.testimonial-card:hover::before { color: var(--gray-200); }
.testimonial-stars { color: #f59e0b; font-size: 1rem; letter-spacing: 2px; position: relative; z-index: 1; }
.testimonial-quote {
  font-size: .92rem;
  color: var(--gray-700);
  line-height: 1.72;
  flex: 1;
  font-style: italic;
  position: relative;
  z-index: 1;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
  flex-shrink: 0;
}
.testimonial-name { font-size: .88rem; font-weight: 700; color: var(--gray-900); }
.testimonial-location { font-size: .76rem; color: var(--gray-400); margin-top: 1px; }

/* ---- FLOATING CTA ---- */
.float-cta {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 990;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.float-cta.visible { opacity: 1; transform: none; pointer-events: auto; }
.float-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  background: var(--teal-600);
  color: var(--white);
  font-size: .85rem;
  font-weight: 600;
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(15,118,110,.35);
  transition: all .22s;
  white-space: nowrap;
}
.float-cta a:hover { background: var(--teal-700); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(15,118,110,.4); }

/* ---- BACK TO TOP ---- */
.back-top {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 990;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.back-top.visible { opacity: 1; transform: none; pointer-events: auto; }
.back-top button {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  transition: all .22s;
}
.back-top button:hover { background: var(--gray-50); color: var(--navy); transform: translateY(-2px); }

/* ---- COOKIE BANNER ---- */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -4px 24px rgba(0,0,0,.07);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner__text { font-size: .83rem; color: var(--gray-600); line-height: 1.55; flex: 1; min-width: 200px; }
.cookie-banner__text a { color: var(--teal-600); }

/* ---- SCROLL ANIMATIONS ---- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
}
.reveal.visible { opacity: 1; transform: none; }

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; }
  .hero__left { padding: 80px 32px 48px; }
  .hero__right { display: flex; padding: 48px 32px 64px; }
  .hero__divider-logo {
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, var(--navy) 50%, #fff 50%);
    padding: 12px 0;
    filter: none;
    overflow: hidden;
  }
  .hero__divider-logo::before {
    display: none;
  }
  .hero__divider-logo .logo-mark {
    width: 100px;
    height: 100px;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,.35));
  }
  .footer__inner { gap: 48px 32px; }
  .footer__cols { grid-template-columns: repeat(2, auto); gap: 32px 48px; }
  .process { grid-template-columns: 1fr; }
  .process::before { display: none; }
  .process__step { border-left: none !important; padding: 24px 0 !important; }
  .process__step:nth-last-child(-n+2) { border-bottom: 1px solid var(--gray-100); }
  .process__step:last-child { border-bottom: none; }
.portal__inner { grid-template-columns: 1fr; gap: 32px; }
  .portal__placeholder { display: none; }
}

@media (max-width: 768px) {
  .ablauf { padding: 64px 0; }
  .ablauf__inner { grid-template-columns: 1fr; gap: 28px; }
  .ablauf__left { position: static; padding-bottom: 0; }
  .ablauf__heading { font-size: 1.75rem; margin-bottom: 12px; }
  .ablauf__desc { max-width: 100%; }
  .ablauf__stack { gap: 12px; padding: 0; }
  .ablauf__card { padding: 20px 22px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hero__partner { font-size: 1rem; }
  .hero__partner strong { font-size: 2.2rem; }
  .hero__title { font-size: 2.1rem; }
  .hero__badges {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
  }
  .trust-badge {
    font-size: .59rem;
    padding: 4px 7px;
    gap: 3px;
  }
  .trust-badge svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
  }
  .kenn-grid { grid-template-columns: 1fr 1fr; }
  .kenn-item { border-right: none; border-bottom: 1px solid var(--gray-100); }
  .kenn-item:nth-child(odd) { border-right: 1px solid var(--gray-100); }
  .kenn-item:nth-last-child(-n+2) { border-bottom: none; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  .nav__right { display: none; }
  .nav__burger { display: flex; }
  .nav__inner { padding: 0 16px; }
  .section { padding: 64px 0; }
  .nachbarschaft { padding: 28px 0; }
  .nachbarschaft__card { grid-template-columns: 1fr; gap: 6px; padding: 20px 22px; text-align: center; }
  .nachbarschaft__media { margin: -8px 0 -4px; }
  .nachbarschaft__media img { max-width: 156px; }
  .nachbarschaft__lead { margin: 0 auto 16px; }
  .nachbarschaft__cta-line { display: block; margin-top: 6px; }
  .nachbarschaft__badge { margin: 0 auto; }
  .team-grid { grid-template-columns: 1fr; }
  .team-card { flex-direction: column; align-items: flex-start; }
  .case-study { grid-template-columns: 1fr; }
  .case-study__col { border-right: none; border-bottom: 1px solid var(--gray-100); }
  .case-study__col:last-child { border-bottom: none; }
  .form-progress__steps { gap: 0; }
  .form-progress__line { min-width: 20px; }
  .form-progress__step span { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .checkbox-grid { grid-template-columns: 1fr; }
  .footer__inner { flex-direction: column; gap: 36px; padding: 44px 24px 32px; }
  .footer__brand { max-width: 100%; flex: 0 0 auto; }
  .footer__cols { width: 100%; grid-template-columns: 1fr 1fr; gap: 32px; }
  .portal__content { flex-direction: column; }
  .portal__inner { padding: 32px 24px; }
  .about__certs { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .float-cta { bottom: 16px; right: 16px; }
  .back-top  { bottom: 16px; left: 16px; }
  .float-cta a { padding: 11px 16px; font-size: .8rem; }

  .form-step { padding: 24px 20px; }
  .form-progress { padding: 20px; }
  .form-nav { flex-direction: column-reverse; gap: 10px; }
  .form-nav .btn { width: 100%; justify-content: center; }
  .footer__bottom-inner { flex-direction: column; align-items: center; gap: 8px; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ============================================================
   PORTAL SHOWCASE
   ============================================================ */

#portal { padding-top: 47px; }
#portal .section__head { margin-bottom: 14px; }

.portal-showcase {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

/* ---- Animated Benefit Tabs ---- */
.portal-animated-tabs {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(8, 22, 42, 0.05);
  border: 1px solid rgba(8, 22, 42, 0.10);
  border-radius: 14px;
  overflow: hidden;
}

.portal-tab-bar {
  position: relative;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  background: rgba(8, 22, 42, 0.04);
  padding: 6px;
  border-bottom: 1px solid rgba(8, 22, 42, 0.08);
}

.portal-tab-pill {
  position: absolute;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
  transition:
    left   0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    top    0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    width  0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 0;
}

.portal-tab-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-500);
  white-space: nowrap;
  transition: color 0.3s;
}
.portal-tab-btn:hover { color: var(--gray-700); }
.portal-tab-btn.active { color: var(--navy); }

/* ---- Tab Content Area ---- */
.portal-tab-content {
  display: grid;
  background: transparent;
  min-height: 88px;
}

.portal-tab-panel {
  grid-area: 1 / 1;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  opacity: 0;
  transform: scale(0.96) translateX(-8px);
  filter: blur(6px);
  transition:
    opacity   0.45s ease,
    transform 0.5s  cubic-bezier(0.34, 1.2, 0.64, 1),
    filter    0.45s ease;
  pointer-events: none;
}
.portal-tab-panel.active {
  opacity: 1;
  transform: scale(1) translateX(0);
  filter: blur(0);
  pointer-events: auto;
}

.portal-tab-panel__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--teal-pale);
  border: 1px solid var(--teal-border);
  color: var(--teal-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.portal-tab-panel__body strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 5px;
}
.portal-tab-panel__body p {
  font-size: 0.82rem;
  color: var(--gray-500);
  margin: 0;
  line-height: 1.5;
}
.portal-animated-tabs.is-video-active .portal-tab-content {
  display: none;
}
.portal-showcase.is-video-active .mock-sidebar {
  display: none;
}
.portal-showcase.is-video-active .portal-slide--video {
  width: 100%;
}

/* ---- Display Container ---- */
.portal-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

/* ---- Browser Chrome ---- */
.portal-browser {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}
.portal-chat-scroll {
  display: none;
  align-items: center;
  gap: 5px;
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 22, 42, 0.75);
  backdrop-filter: blur(6px);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  z-index: 20;
  white-space: nowrap;
  transition: opacity .2s;
  pointer-events: auto;
}
.portal-chat-scroll.is-visible {
  display: flex;
}
.portal-browser__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
}
.portal-browser__dots { display: flex; gap: 5px; flex-shrink: 0; }
.portal-browser__dots span { display: block; width: 10px; height: 10px; border-radius: 50%; }
.portal-browser__url {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: .7rem;
  color: var(--gray-500);
  font-family: inherit;
  user-select: none;
}
.portal-browser__url svg { color: #22c55e; flex-shrink: 0; }

/* ---- Mock App Shell ---- */
.mock-app { display: flex; flex: 1; min-height: 0; }

/* ---- Mock Sidebar ---- */
.mock-sidebar {
  width: 154px;
  flex-shrink: 0;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  padding: 14px 0;
  border-right: 1px solid rgba(255,255,255,.07);
}
.mock-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 8px;
}
.mock-sidebar__brand span {
  font-size: .78rem;
  font-weight: 800;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.mock-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 6px;
}
.mock-nav__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 5px;
  font-size: .74rem;
  font-weight: 500;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  position: relative;
}
.mock-nav__item:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); }
.mock-nav__item.active { background: rgba(15,118,110,.15); color: #5eead4; }
.mock-nav__item--passive { cursor: default; }
.mock-nav__item--passive:hover { background: none; color: rgba(255,255,255,.5); }
.mock-nav__section {
  font-size: .54rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.22);
  padding: 8px 8px 3px;
  margin-top: 2px;
}
.mock-nav__section:first-child { margin-top: 0; padding-top: 4px; }
.mock-badge-dot {
  margin-left: auto;
  background: #0f766e;
  color: var(--white);
  font-size: .6rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 99px;
  line-height: 1.4;
}
.mock-sidebar__user {
  padding: 10px 12px 0;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mock-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy-500);
  color: rgba(255,255,255,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.12);
}
.mock-avatar--sm { width: 26px; height: 26px; font-size: .58rem; }
.mock-username { font-size: .68rem; font-weight: 600; color: rgba(255,255,255,.7); line-height: 1.3; }
.mock-usersub { font-size: .62rem; color: rgba(255,255,255,.35); line-height: 1.3; }

/* ---- Slides ---- */
.portal-slides-outer { flex: 1; overflow: hidden; }
.portal-slides-inner {
  display: flex;
  width: 600%; /* 6 slides × outer width */
  height: 100%;
  transition: transform .42s cubic-bezier(.4,0,.2,1);
}
.portal-slide { flex: 1; min-width: 0; height: 100%; overflow-y: auto; }

/* ---- Mock Content ---- */
.mock-content {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  box-sizing: border-box;
}
.mock-content--chat { padding: 0; gap: 0; }

/* Topbar */
.mock-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
  flex-shrink: 0;
}
.mock-topbar--chat { padding: 12px 14px; border-bottom: 1px solid var(--gray-200); }
.mock-topbar__title { font-size: .86rem; font-weight: 700; color: var(--gray-900); line-height: 1.3; }
.mock-topbar__sub { font-size: .7rem; color: var(--gray-400); margin-top: 2px; line-height: 1.3; }
.mock-chat-header { display: flex; align-items: center; gap: 10px; }

/* Status Badges */
.mock-status {
  flex-shrink: 0;
  font-size: .64rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mock-status--yellow { background: rgba(245,158,11,.12); color: #b45309; border: 1px solid rgba(245,158,11,.25); }

/* Progress Track (step tracker) */
.mock-progress-track {
  display: flex;
  align-items: center;
  padding: 6px 0;
  flex-shrink: 0;
}
.mock-pstep { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.mock-pstep__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gray-200);
  border: 1.5px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .63rem;
  font-weight: 700;
  color: var(--gray-400);
}
.mock-pstep--done .mock-pstep__dot { background: #0f766e; border-color: #0f766e; color: var(--white); }
.mock-pstep--active .mock-pstep__dot { background: var(--navy); border-color: var(--navy); color: var(--white); box-shadow: 0 0 0 3px rgba(12,26,53,.15); }
.mock-pstep__label { font-size: .57rem; font-weight: 600; color: var(--gray-400); white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
.mock-pstep--done .mock-pstep__label,
.mock-pstep--active .mock-pstep__label { color: var(--navy); }
.mock-pstep__line { flex: 1; height: 2px; background: var(--gray-200); margin-bottom: 17px; min-width: 6px; }
.mock-pstep__line--done { background: #0f766e; }
.mock-pstep__line--active { background: linear-gradient(to right, #0f766e 50%, var(--gray-200) 100%); }

/* Info Cards */
.mock-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex-shrink: 0; }
.mock-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 7px;
}
.mock-card--action { border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.04); }
.mock-card__icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mock-card__title { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400); margin-bottom: 3px; }
.mock-card__text { font-size: .71rem; color: var(--gray-700); line-height: 1.4; font-weight: 500; }

/* Activity Timeline */
.mock-timeline { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
.mock-timeline__item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--gray-100); }
.mock-timeline__item:last-child { border-bottom: none; }
.mock-timeline__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mock-timeline__dot--green { background: #22c55e; }
.mock-timeline__dot--yellow { background: #f59e0b; }
.mock-timeline__body { display: flex; justify-content: space-between; align-items: center; flex: 1; gap: 8px; }
.mock-timeline__label { font-size: .73rem; color: var(--gray-700); font-weight: 500; }
.mock-timeline__date { font-size: .65rem; color: var(--gray-400); white-space: nowrap; }

/* Doc Progress Bar (upload slide) */
.mock-doc-progress {
  flex-shrink: 0;
  width: 72px;
  height: 6px;
  background: var(--gray-200);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  margin-top: 8px;
}
.mock-doc-progress__bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #0f766e;
  border-radius: 99px;
}
.mock-doc-progress span { display: none; }

/* Upload Zone */
.mock-upload-zone {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px dashed var(--gray-300);
  border-radius: 8px;
  background: var(--gray-50);
  color: var(--gray-400);
  flex-shrink: 0;
  cursor: default;
}
.mock-upload-zone__title { font-size: .77rem; font-weight: 600; color: var(--gray-700); margin-bottom: 2px; }
.mock-upload-zone__sub { font-size: .67rem; color: var(--gray-400); }

/* File List */
.mock-filelist { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
.mock-file { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
.mock-file:last-child { border-bottom: none; }
.mock-file--pending { opacity: .6; }
.mock-file__icon {
  width: 28px;
  height: 34px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .54rem;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.mock-file__icon--pdf { background: rgba(239,68,68,.1); color: #dc2626; border: 1px solid rgba(239,68,68,.2); }
.mock-file__icon--empty { background: var(--gray-100); color: var(--gray-300); border: 1.5px dashed var(--gray-200); }
.mock-file__info { flex: 1; min-width: 0; }
.mock-file__name { font-size: .74rem; font-weight: 600; color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.mock-file__meta { font-size: .64rem; color: var(--gray-400); margin-top: 1px; }

/* Chips */
.mock-chip {
  flex-shrink: 0;
  font-size: .6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.mock-chip--green { background: rgba(34,197,94,.12); color: #16a34a; border: 1px solid rgba(34,197,94,.25); }
.mock-chip--cyan { background: rgba(15,118,110,.12); color: #0d9488; border: 1px solid rgba(15,118,110,.25); }
.mock-chip--gray { background: var(--gray-100); color: var(--gray-400); border: 1px solid var(--gray-200); }
.mock-chip--yellow { background: rgba(245,158,11,.1); color: #b45309; border: 1px solid rgba(245,158,11,.25); }

/* Chat */
.mock-chat { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.mock-msg { display: flex; flex-direction: column; gap: 3px; max-width: 84%; }
.mock-msg--you { align-self: flex-end; align-items: flex-end; }
.mock-msg--advisor { align-self: flex-start; align-items: flex-start; }
.mock-msg__bubble {
  padding: 8px 11px;
  border-radius: 11px;
  font-size: .74rem;
  line-height: 1.52;
  font-weight: 450;
}
.mock-msg--advisor .mock-msg__bubble { background: var(--gray-100); color: var(--gray-800); border-radius: 4px 11px 11px 11px; }
.mock-msg--you .mock-msg__bubble { background: var(--navy); color: rgba(255,255,255,.9); border-radius: 11px 4px 11px 11px; }
.mock-msg__time { font-size: .6rem; color: var(--gray-400); }
.mock-chat-input {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.mock-chat-input__field {
  flex: 1;
  padding: 6px 9px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: .73rem;
  color: var(--gray-400);
  pointer-events: none;
}
.mock-chat-input__send {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--navy);
  color: var(--white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  flex-shrink: 0;
}

/* Result Stats */
.mock-result-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; flex-shrink: 0; }
.mock-stat { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 7px; padding: 9px 6px; text-align: center; }
.mock-stat__val { font-size: .95rem; font-weight: 800; color: var(--navy); letter-spacing: -.03em; line-height: 1; margin-bottom: 4px; }
.mock-stat__val--green { color: #16a34a; }
.mock-stat__label { font-size: .58rem; color: var(--gray-400); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* Reports */
.mock-reports { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
.mock-report { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--gray-100); }
.mock-report:last-child { border-bottom: none; }
.mock-report__icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mock-report--available .mock-report__icon { background: rgba(15,118,110,.1); color: #0d9488; }
.mock-report--pending .mock-report__icon { background: var(--gray-100); color: var(--gray-400); }
.mock-report__info { flex: 1; min-width: 0; }
.mock-report__name { font-size: .76rem; font-weight: 600; color: var(--gray-800); line-height: 1.35; }
.mock-report--pending .mock-report__name { color: var(--gray-500); }
.mock-report__meta { font-size: .65rem; color: var(--gray-400); margin-top: 2px; }
.mock-dl-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: 5px;
  font-size: .67rem;
  font-weight: 600;
  font-family: inherit;
  cursor: default;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- iSFP-Erweiterungen (Energie-Badge, Roadmap, Bonus-Pill) ---- */
.mock-eclass {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  flex-shrink: 0;
}
.mock-eclass__badge {
  width: 18px; height: 18px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 800;
  color: var(--white);
  letter-spacing: -.02em;
}
.mock-eclass__badge--f { background: #dc2626; }
.mock-eclass__badge--a { background: #16a34a; }
.mock-eclass__arrow { color: var(--gray-300); flex-shrink: 0; }

.mock-timeline__dot--cyan { background: #0d9488; box-shadow: 0 0 0 3px rgba(15,118,110,.18); }

.mock-upload-zone--complete {
  background: rgba(34,197,94,.06);
  border-color: rgba(34,197,94,.3);
  color: #16a34a;
}
.mock-upload-zone--complete svg { color: #16a34a; }

.mock-bonus {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(15,118,110,.12);
  color: #0d9488;
  border: 1px solid rgba(15,118,110,.25);
  border-radius: 100px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
}

.mock-roadmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  flex-shrink: 0;
  margin: 2px 0 4px;
}
.mock-roadmap__col {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 7px;
  padding: 7px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mock-roadmap__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 2px;
}
.mock-roadmap__year {
  font-size: .6rem;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mock-roadmap__tag {
  font-size: .54rem;
  font-weight: 600;
  color: var(--gray-400);
  padding: 1px 5px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  white-space: nowrap;
}
.mock-roadmap__tag--now {
  color: #0d9488;
  background: rgba(15,118,110,.08);
  border-color: rgba(15,118,110,.25);
}
.mock-roadmap__item {
  font-size: .63rem;
  color: var(--gray-700);
  font-weight: 500;
  padding: 3px 6px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  line-height: 1.25;
}
.mock-roadmap__item--prio {
  background: rgba(15,118,110,.08);
  border-color: rgba(15,118,110,.25);
  color: #0d9488;
  font-weight: 600;
}
.mock-roadmap__foot {
  font-size: .58rem;
  font-weight: 700;
  color: #16a34a;
  margin-top: 2px;
  letter-spacing: .02em;
}

/* ---- Förderungen-Slide ---- */
.mock-foerd-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(15,118,110,.06);
  border: 1px solid rgba(15,118,110,.2);
  border-radius: 7px;
  flex-shrink: 0;
}
.mock-foerd-summary__icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: rgba(15,118,110,.14);
  color: #0d9488;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mock-foerd-summary__body { flex: 1; min-width: 0; }
.mock-foerd-summary__sum {
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.mock-foerd-summary__sub {
  font-size: .62rem;
  color: var(--gray-400);
  margin-top: 1px;
}
.mock-foerd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  flex: 1;
  align-content: start;
}
.mock-foerd-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 7px;
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mock-foerd-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 5px;
  margin-bottom: 1px;
}
.mock-foerd-card__name {
  font-size: .7rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.25;
}
.mock-foerd-card__prog {
  font-size: .58rem;
  color: var(--gray-400);
  line-height: 1.3;
}
.mock-foerd-card__amt {
  font-size: .92rem;
  font-weight: 800;
  color: #0d9488;
  letter-spacing: -.02em;
  margin-top: 2px;
}

/* ---- Termine-Slide ---- */
.mock-termine-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.mock-termine-group__title {
  font-size: .62rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 2px 2px 0;
}
.mock-termin {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 7px;
}
.mock-termin--upcoming {
  background: rgba(15,118,110,.05);
  border-color: rgba(15,118,110,.25);
}
.mock-termin--past { opacity: .82; }
.mock-termin__date {
  width: 36px;
  flex-shrink: 0;
  text-align: center;
  background: rgba(15,118,110,.12);
  border: 1px solid rgba(15,118,110,.25);
  border-radius: 5px;
  padding: 4px 0 3px;
  line-height: 1;
}
.mock-termin__date--past { background: var(--gray-100); border-color: var(--gray-200); }
.mock-termin__date-day {
  display: block;
  font-size: .82rem;
  font-weight: 800;
  color: #0d9488;
  letter-spacing: -.02em;
}
.mock-termin__date--past .mock-termin__date-day { color: var(--gray-500); }
.mock-termin__date-mon {
  display: block;
  font-size: .52rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 1px;
}
.mock-termin__body { flex: 1; min-width: 0; }
.mock-termin__title {
  font-size: .74rem;
  font-weight: 600;
  color: var(--gray-800);
  line-height: 1.3;
}
.mock-termin__meta {
  font-size: .62rem;
  color: var(--gray-400);
  margin-top: 1px;
}


/* ---- Video Slide ---- */
.portal-slide--video {
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.portal-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #08162a;
}
.mock-video {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #08162a 0%, #0c2040 60%, #061830 100%);
  position: relative;
  display: flex;
  align-items: stretch;
}
.mock-video__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 20px 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 28px 28px;
}
.mock-video__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #5eead4;
  background: rgba(15,118,110,.12);
  border: 1px solid rgba(15,118,110,.25);
  padding: 4px 10px;
  border-radius: 99px;
  align-self: flex-start;
}
.mock-video__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  flex: 1;
  justify-content: center;
  padding: 12px 0;
}
.mock-video__play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2.5px solid rgba(15,118,110,.6);
  background: rgba(15,118,110,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5eead4;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 10px rgba(15,118,110,.07), 0 0 0 22px rgba(15,118,110,.04);
  cursor: default;
  padding-left: 3px;
}
.mock-video__title {
  font-size: .92rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: -.01em;
  line-height: 1.35;
  max-width: 360px;
}
.mock-video__sub {
  font-size: .72rem;
  color: rgba(255,255,255,.45);
  line-height: 1.5;
}
.mock-video__chapters {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 10px 0 8px;
}
.mock-video__chapter {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 0 10px;
  border-right: 1px solid rgba(255,255,255,.06);
  font-size: .65rem;
}
.mock-video__chapter:first-child { padding-left: 0; }
.mock-video__chapter:last-child { border-right: none; }
.mock-video__chapter-time {
  color: #5eead4;
  font-weight: 700;
  font-size: .63rem;
  letter-spacing: .04em;
}
.mock-video__chapter span:last-child { color: rgba(255,255,255,.5); line-height: 1.4; }
.mock-video__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.mock-video__ctrl-play {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  flex-shrink: 0;
  padding-left: 1px;
}
.mock-video__timeline {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,.12);
  border-radius: 99px;
  position: relative;
  cursor: default;
}
.mock-video__progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: #0f766e;
  border-radius: 99px;
}
.mock-video__chapter-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.2);
}
.mock-video__time {
  font-size: .62rem;
  color: rgba(255,255,255,.4);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mock-video__ctrl-icons {
  display: flex;
  gap: 8px;
  color: rgba(255,255,255,.4);
  flex-shrink: 0;
}

/* ---- Dot Navigation ---- */
.portal-dots { display: flex; gap: 7px; justify-content: center; align-items: center; }
.portal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: var(--gray-300);
  cursor: pointer;
  transition: all .22s;
  padding: 0;
}
.portal-dot.active { background: var(--navy); width: 20px; border-radius: 4px; }
.portal-dot:hover:not(.active) { background: var(--gray-500); }

/* ---- Portal CTA Bar ---- */
.portal-cta-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 22px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-top: 40px;
  flex-wrap: wrap;
}
.cta-lock-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 36px;
  background: var(--navy);
  color: rgba(255,255,255,.9);
  border-radius: 6px;
  flex: 0 0 130px;
}
.portal-cta-bar > div { flex: 1; min-width: 200px; }
.portal-cta-bar strong { display: block; font-size: .92rem; font-weight: 700; color: var(--gray-900); margin-bottom: 2px; }
.portal-cta-bar p { font-size: .82rem; color: var(--gray-500); margin: 0; line-height: 1.5; }

/* ---- Portal Responsive ---- */
@media (max-width: 600px) {
  /* Top tab bar */
  .portal-tab-bar { gap: 3px; padding: 5px; border-radius: 12px; justify-content: center; }
  .portal-tab-btn { font-size: 0.72rem; padding: 7px 10px; flex: 0 1 auto; line-height: 1.25; }
  .portal-tab-pill { display: none; }
  .portal-tab-btn.active { background: var(--white); box-shadow: 0 1px 6px rgba(0,0,0,.1); }
  .portal-tab-panel { padding: 14px 16px; gap: 12px; }
  .portal-tab-panel__icon { width: 36px; height: 36px; }
  .portal-tab-panel__body strong { font-size: .88rem; }
  .portal-tab-panel__body p { font-size: .78rem; line-height: 1.45; }

  /* Browser preview: 25% kleiner als Desktop-Fallback */
  .portal-browser { aspect-ratio: auto; height: 555px; max-height: 555px; }
  .mock-sidebar { display: none; }

  .mock-content { padding: 12px; gap: 9px; }

  /* Slide-Topbar: erlaubt sauberen Umbruch */
  .mock-topbar { flex-wrap: wrap; gap: 8px; padding-bottom: 10px; }
  .mock-topbar__title { font-size: .82rem; }
  .mock-topbar__sub { font-size: .66rem; }

  /* Progress-Track: kompakter, Labels kleiner */
  .mock-pstep__dot { width: 18px; height: 18px; font-size: .55rem; }
  .mock-pstep__label { font-size: .48rem; letter-spacing: .03em; }
  .mock-pstep__line { margin-bottom: 14px; min-width: 4px; }

  /* Energie-Badge etwas kompakter */
  .mock-eclass { padding: 3px 6px; gap: 4px; }
  .mock-eclass__badge { width: 16px; height: 16px; font-size: .62rem; }

  /* Cards einspaltig */
  .mock-cards { grid-template-columns: 1fr; gap: 6px; }
  .mock-card { padding: 8px 10px; }
  .mock-card__title { font-size: .58rem; }
  .mock-card__text { font-size: .7rem; }

  /* Dokumente */
  .mock-upload-zone { padding: 10px 12px; gap: 10px; }
  .mock-upload-zone__title { font-size: .76rem; }
  .mock-upload-zone__sub { font-size: .62rem; }
  .mock-file { padding: 6px 0; gap: 7px; }
  .mock-file__name { font-size: .7rem; }
  .mock-file__meta { font-size: .58rem; }

  /* Chat-Bubbles */
  .mock-chat { padding: 10px 12px; gap: 8px; }
  .mock-msg__bubble { font-size: .74rem; padding: 7px 10px; max-width: 78%; }
  .mock-msg__time { font-size: .56rem; }
  .mock-chat-input { padding: 8px 10px; }
  .mock-chat-input__field { font-size: .72rem; padding: 7px 10px; }

  /* Stats / Result-Stats */
  .mock-result-stats { grid-template-columns: 1fr 1fr; gap: 5px; }
  .mock-stat { padding: 7px 5px; }
  .mock-stat__val { font-size: .85rem; }
  .mock-stat__label { font-size: .52rem; }

  /* Förderungen einspaltig */
  .mock-foerd-grid { grid-template-columns: 1fr; gap: 5px; }
  .mock-foerd-summary { padding: 8px 10px; gap: 8px; }
  .mock-foerd-summary__sum { font-size: .92rem; }
  .mock-foerd-summary__sub { font-size: .58rem; }
  .mock-foerd-card { padding: 7px 9px; }
  .mock-foerd-card__name { font-size: .66rem; }
  .mock-foerd-card__prog { font-size: .54rem; }
  .mock-foerd-card__amt { font-size: .85rem; }
  .mock-bonus { font-size: .58rem; padding: 2px 8px; }

  /* Termine */
  .mock-termin { padding: 6px 8px; gap: 8px; }
  .mock-termin__date { width: 30px; padding: 3px 0 2px; }
  .mock-termin__date-day { font-size: .72rem; }
  .mock-termin__date-mon { font-size: .48rem; }
  .mock-termin__title { font-size: .7rem; }
  .mock-termin__meta { font-size: .58rem; }
  .mock-termine-group__title { font-size: .56rem; }

  /* CTA-Bar unten */
  .portal-cta-bar { flex-direction: column; align-items: flex-start; padding: 16px; gap: 12px; }
  .portal-cta-bar > div { width: 100%; }
  .portal-cta-bar .btn { width: 100%; justify-content: center; }
  .cta-lock-pill { display: none; }   /* dekorativ – auf Mobile weg */
}

/* ============================================================
   ZERTIFIZIERUNGEN / PIXEL-LOGO-GRID
   ============================================================ */
.cert-grid {
  padding: 88px 0 96px;
  background: linear-gradient(180deg, var(--white) 0%, var(--gray-50) 100%);
  position: relative;
}
.cert-grid__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}
.cert-grid__eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--teal-700);
  margin-bottom: 12px;
}
.cert-grid__title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--gray-900);
  margin-bottom: 12px;
}
.cert-grid__sub {
  font-size: 1rem;
  color: var(--text-md);
  line-height: 1.6;
}
.cert-grid__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cert-card {
  --card-accent: var(--teal-700);
  --card-accent-rgb: 15, 118, 110;
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  overflow: hidden;
  cursor: default;
  min-height: 260px;
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
  isolation: isolate;
}
.cert-card--dena { --card-accent: #8B5CF6; --card-accent-rgb: 139, 92, 246; }
.cert-card--kfw  { --card-accent: #1E3A8A; --card-accent-rgb: 30, 58, 138;  }
.cert-card--eee  { --card-accent: #0EA5E9; --card-accent-rgb: 14, 165, 233; }
.cert-card--bafa { --card-accent: #FFCC00; --card-accent-rgb: 255, 204, 0;  }

.cert-card:hover,
.cert-card.cert-card--active {
  border-color: var(--card-accent);
  box-shadow:
    0 14px 36px rgba(var(--card-accent-rgb), 0.18),
    0 4px 12px rgba(var(--card-accent-rgb), 0.10);
  transform: translateY(-4px);
}
.cert-card__pixels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}
.cert-card__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 260px;
  padding: 40px 28px 30px;
  text-align: center;
  gap: 14px;
}
.cert-card__logo {
  height: 64px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.cert-card__logo img {
  max-height: 100%;
  max-width: 180px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.62;
  transition: filter .4s ease, opacity .4s ease, transform .4s ease;
}
.cert-card:hover .cert-card__logo img,
.cert-card.cert-card--active .cert-card__logo img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.04);
}
.cert-card__name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -.01em;
  margin: 0;
}
.cert-card__desc {
  font-size: .82rem;
  color: var(--text-md);
  line-height: 1.45;
  margin: 0;
  max-width: 240px;
}

@media (max-width: 900px) {
  .cert-grid { padding: 64px 0 72px; }
  .cert-grid__list { grid-template-columns: 1fr; gap: 16px; }
  .cert-card { min-height: 220px; }
  .cert-card__inner { min-height: 220px; padding: 32px 24px 26px; }
}
@media (max-width: 600px) {
  .cert-grid { padding: 48px 0 56px; }
  .cert-grid__head { margin-bottom: 32px; }
  .cert-card__logo { height: 52px; }
  .cert-card__logo img { max-width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .cert-card,
  .cert-card__logo img { transition: none; }
  .cert-card:hover,
  .cert-card.cert-card--active { transform: none; }
  .cert-card:hover .cert-card__logo img,
  .cert-card.cert-card--active .cert-card__logo img { transform: none; }
}

/* --- Compact-Variante für die Hero-Integration --- */
.hero__certs {
  margin-top: 14px;
  width: 100%;
}
.hero__certs-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
}
.hero__certs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.cert-card--compact {
  min-height: 132px;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.08);
}
.cert-card--compact .cert-card__inner {
  min-height: 110px;
  padding: 16px 18px;
  gap: 0;
  justify-content: center;
  align-items: center;
}
.cert-card--compact .cert-card__logo {
  height: 72px;
  width: 100%;
  margin-bottom: 0;
}
.cert-card--compact .cert-card__logo img {
  max-width: 200px;
}
.cert-card--bafa .cert-card__logo {
  height: 96px;
}
.cert-card--bafa .cert-card__logo img {
  max-width: 260px;
}
.cert-card--compact .cert-card__name {
  font-size: .8rem;
  font-weight: 700;
}
.cert-card--compact .cert-card__desc { display: none; }

@media (max-width: 900px) {
  .hero__certs { max-width: 100%; margin-top: 12px; }
  .hero__certs-grid { gap: 10px; }
  .cert-card--compact { min-height: 100px; }
  .cert-card--compact .cert-card__inner { min-height: 100px; padding: 12px 10px; }
  .cert-card--compact .cert-card__logo { height: 44px; }
  .cert-card--compact .cert-card__logo img { max-width: 130px; }
  .cert-card--bafa .cert-card__logo { height: 50px; }
  .cert-card--bafa .cert-card__logo img { max-width: 150px; }
}
@media (max-width: 480px) {
  .cert-card--compact .cert-card__name { font-size: .72rem; }
}

/* ============================================================
   BERATUNGSGEBIET / MÜNCHEN-KARTE
   ============================================================ */
.map-section {
  padding: 96px 0;
  background: linear-gradient(180deg, var(--white) 0%, var(--gray-50) 100%);
  position: relative;
}
.map-section__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.map-section__accent {
  color: var(--teal-700);
  position: relative;
  white-space: nowrap;
}
.map-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 32px;
  align-items: stretch;
}
.map-section__map-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--gray-100);
  min-height: 460px;
}
.muenchen-map {
  width: 100%;
  height: 100%;
  min-height: 460px;
  z-index: 1;
}
.map-section__legend {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 400;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}
.map-section__legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(15, 118, 110, 0.25);
  border: 2px solid var(--teal-700);
  flex-shrink: 0;
}
.map-section__info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.map-info-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
  transition: var(--transition);
}
.map-info-card:hover {
  border-color: var(--teal-border);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.map-info-card__icon {
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--teal-pale);
  color: var(--teal-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-info-card__icon svg {
  width: 20px;
  height: 20px;
}
.map-info-card h3 {
  font-size: .98rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -.01em;
}
.map-info-card p {
  font-size: .85rem;
  color: var(--text-md);
  line-height: 1.55;
  grid-column: 2;
}
.map-section__cta {
  margin-top: 6px;
  align-self: stretch;
  justify-content: center;
}

/* Leaflet marker — branded */
.evion-map-marker span {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal-700);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--teal-700), 0 4px 12px rgba(8, 22, 42, 0.35);
  animation: evionMarkerPulse 2.4s ease-out infinite;
}
@keyframes evionMarkerPulse {
  0%   { box-shadow: 0 0 0 2px var(--teal-700), 0 0 0 0 rgba(15, 118, 110, 0.55), 0 4px 12px rgba(8, 22, 42, 0.35); }
  70%  { box-shadow: 0 0 0 2px var(--teal-700), 0 0 0 14px rgba(15, 118, 110, 0), 0 4px 12px rgba(8, 22, 42, 0.35); }
  100% { box-shadow: 0 0 0 2px var(--teal-700), 0 0 0 0 rgba(15, 118, 110, 0), 0 4px 12px rgba(8, 22, 42, 0.35); }
}
.leaflet-container .leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.85);
}
.leaflet-popup-content-wrapper {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.leaflet-popup-content {
  font-family: inherit;
  font-size: .85rem;
  margin: 12px 16px;
}

@media (max-width: 900px) {
  .map-section { padding: 72px 0; }
  .map-section__layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .map-section__map-wrap,
  .muenchen-map { min-height: 380px; }
}
@media (max-width: 600px) {
  .map-section { padding: 56px 0; }
  .map-section__head { margin-bottom: 36px; }
  .map-section__map-wrap,
  .muenchen-map { min-height: 320px; }
  .map-info-card { padding: 16px 18px; }
}

/* ============================================================
   HERO-MAP-BLOCK (Karte direkt im Hero rechts — diagonal links versetzt)
   ============================================================ */
.hero__map-block {
  margin-top: 0;
  width: 88%;
  max-width: 720px;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero__map-headline {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--navy);
  margin: 0;
  text-align: left;
}
.hero__map-headline-accent {
  background: linear-gradient(130deg, #0f766e 0%, #2dd4bf 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}
/* Zwei-Klick-Platzhalter: Karte lädt erst nach Zustimmung (OSM-Kacheln = externer Request) */
.map-consent {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(15,118,110,.08) 0%, transparent 50%),
    radial-gradient(circle at 75% 80%, rgba(12,26,53,.06) 0%, transparent 55%),
    var(--gray-50);
  padding: 20px;
}
.map-consent__inner { max-width: 420px; color: var(--teal-700); }
.map-consent__addresses {
  margin: 10px 0 16px;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--text-md);
}
.map-consent__note {
  margin-top: 12px;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--text-lt);
}
.map-consent__note a { color: var(--teal-700); }

.hero__map {
  position: relative;
  min-height: 280px;
  height: 280px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--gray-100);
}

@media (max-width: 1024px) {
  .hero__service-grid-wrap,
  .hero__map-block {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
  }
  .hero__service-grid-title { text-align: left; }
  .hero__map { min-height: 260px; height: 260px; }
}
@media (max-width: 600px) {
  .hero__map { min-height: 220px; height: 220px; }
  .hero__map-headline { font-size: .98rem; }
  .hero__map-headline-accent { white-space: normal; }
}

/* ---- Hero typewriter cursor ---- */
.hero-tw-cursor {
  display: inline-block;
  font-weight: 300;
  animation: twCursorBlink .85s step-end infinite;
}
@keyframes twCursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ============================================================
   TEAM SECTION
   ============================================================ */
.team {
  position: relative;
  background: var(--navy);
  padding: 72px 56px;
  overflow: hidden;
}
.team__blob {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0;
}
.team__blob--1 {
  width: 840px; height: 840px;
  background: radial-gradient(circle, rgba(15,118,110,.24) 0%, rgba(15,118,110,.09) 40%, transparent 68%);
  top: -290px; right: -290px;
  animation: teamBlob1 18s ease-in-out infinite;
}
.team__blob--2 {
  width: 840px; height: 840px;
  background: radial-gradient(circle, rgba(45,212,191,.12) 0%, rgba(45,212,191,.045) 40%, transparent 68%);
  bottom: -290px; left: -290px;
  animation: teamBlob2 16s ease-in-out infinite;
}
@keyframes teamBlob1 {
  0%,100% { opacity:.15; transform: scale(1) rotate(0deg); }
  50%      { opacity:.32; transform: scale(1.2) rotate(90deg); }
}
@keyframes teamBlob2 {
  0%,100% { opacity:.12; transform: scale(1.1) rotate(0deg); }
  50%      { opacity:.28; transform: scale(1) rotate(-90deg); }
}
.team__container {
  position: relative; z-index: 1;
  max-width: 1700px; margin: 0 auto;
}
.team__row {
  display: grid;
  grid-template-columns: 1fr 1.39fr 1.39fr;
  gap: 128px;
  align-items: stretch;
}
.team__header {
  text-align: left;
  opacity: 0; transform: translateY(-28px);
  transition: opacity .8s ease, transform .8s ease;
}
.team__header.team--visible { opacity: 1; transform: translateY(0); }
.team__badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(15,118,110,.15);
  border: 1px solid rgba(15,118,110,.35);
  color: #2dd4bf;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 999px; margin-bottom: 22px;
}
.team__headline {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 700; line-height: 1.22;
  color: #fff; margin: 0 0 18px; letter-spacing: -.025em;
}
.team__headline-accent {
  background: linear-gradient(130deg, #0f766e 0%, #2dd4bf 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}
.team__subline {
  font-size: .95rem; color: rgba(255,255,255,.72);
  line-height: 1.75;
}
.team__grid {
  display: contents;
}
.team-card {
  opacity: 0; transform: translateY(32px) scale(.97);
  transition: opacity .6s ease, transform .6s ease;
  background: transparent; border: none; box-shadow: none; padding: 0;
  height: 100%;
}
.team-card:nth-child(2):not(.team--visible) { transition-delay: .18s; }
.team-card.team--visible { opacity: 1; transform: translateY(0) scale(1); }
.team-card__inner {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px; overflow: hidden; position: relative;
  transition: border-color .4s ease, box-shadow .4s ease;
  transform-style: preserve-3d;
  height: 100%;
}
.team-card:hover .team-card__inner {
  border-color: rgba(15,118,110,.65);
  box-shadow: 0 22px 60px rgba(15,118,110,.25), 0 6px 18px rgba(0,0,0,.3);
}
.team-card__gradient {
  position: absolute; inset: 0;
  background: linear-gradient(140deg, rgba(15,118,110,.18), rgba(15,118,110,.06), transparent);
  opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.team-card:hover .team-card__gradient { opacity: 1; }
.team-card__sparkle {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  color: #2dd4bf; opacity: 0;
  transform: scale(0) rotate(-20deg);
  transition: opacity .3s ease, transform .35s ease;
}
.team-card:hover .team-card__sparkle { opacity: 1; transform: scale(1) rotate(0deg); }
.team-card__body {
  position: relative; z-index: 1;
  padding: 36px 28px 30px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* Stretched-Link: ganze Servicekarte klickbar, tastatur- und screenreader-tauglich */
.service-card { position: relative; }
.service-card .service-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.team-card__avatar-wrap { position: relative; margin-bottom: 22px; }
.team-card__avatar-glow {
  position: absolute; inset: -8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(15,118,110,.4) 0%, transparent 70%);
  opacity: 0; transition: opacity .5s ease;
}
.team-card:hover .team-card__avatar-glow { opacity: 1; }
.team-card__avatar {
  width: 108px; height: 108px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  overflow: hidden; background: rgba(255,255,255,.1);
  padding: 4px; transition: transform .3s ease;
}
.team-card:hover .team-card__avatar { transform: scale(1.05); }
.team-card__avatar img {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; transition: transform .3s ease; display: block;
}
.team-card:hover .team-card__avatar img { transform: scale(1.08); }
/* Initialen-Avatar als Platzhalter, bis echte Teamfotos vorliegen */
.team-card__avatar-initials {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--teal-700) 0%, var(--navy-500) 100%);
  color: #fff; font-size: 2rem; font-weight: 800; letter-spacing: .02em;
}
.team-card__name {
  font-size: 1.22rem; font-weight: 700; color: #fff;
  margin: 0 0 8px; letter-spacing: -.015em;
  transition: transform .2s ease;
}
.team-card:hover .team-card__name { transform: scale(1.04); }
.team-card__role {
  display: inline-block;
  background: rgba(15,118,110,.25); border: 1px solid rgba(15,118,110,.45);
  color: #5eead4;
  font-size: .67rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
}
.team-card__location {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: .78rem; color: rgba(255,255,255,.65); margin-bottom: 14px;
}
.team-card__bio {
  font-size: .88rem; color: rgba(255,255,255,.75);
  line-height: 1.7; margin-bottom: 20px;
}
.team-card__skills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin-bottom: 24px;
}
.team-card__skill {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.82);
  font-size: .7rem; padding: 4px 11px; border-radius: 999px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.team-card:hover .team-card__skill {
  background: rgba(15,118,110,.3);
  border-color: rgba(15,118,110,.55);
  color: #fff;
}
.team-card__socials { display: flex; gap: 9px; justify-content: center; }
.team-card__social-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.75);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}
.team-card__social-btn:hover {
  background: rgba(15,118,110,.45);
  border-color: rgba(15,118,110,.7);
  color: #fff; transform: translateY(-2px);
}
.team-card__social-btn--email {
  width: auto; height: auto; border-radius: 20px;
  padding: 8px 14px; gap: 7px;
  font-size: .75rem; font-weight: 500;
  letter-spacing: .01em;
}
.team-card__social-btn--linkedin:hover {
  background: rgba(10,102,194,.55);
  border-color: rgba(10,102,194,.8);
}
.team__cta {
  display: flex; justify-content: flex-start;
  margin-top: 32px;
  opacity: 0; transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: .4s;
}
.team__cta.team--visible { opacity: 1; transform: translateY(0); }
.team__cta-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px; padding: 22px 24px; text-align: left;
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 70px -30px rgba(0,0,0,.65);
}
.team__cta-title {
  font-size: 1.35rem; font-weight: 700; color: #fff;
  margin: 0; letter-spacing: -.015em;
}
.team__cta-text {
  font-size: .88rem; color: rgba(255,255,255,.7);
  margin: 0; max-width: 380px; line-height: 1.65;
}
.team__cta-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--teal-700); color: #fff;
  font-size: .92rem; font-weight: 600;
  padding: 14px 30px; border-radius: 999px;
  text-decoration: none; border: none; cursor: pointer;
  box-shadow: 0 8px 24px rgba(15,118,110,.38);
  transition: transform .3s ease, box-shadow .3s ease;
}
.team__cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(15,118,110,.48);
}
@media (max-width: 900px) {
  .team__row { grid-template-columns: 1fr; gap: 32px; }
  .team__header { text-align: center; }
  .team__cta { justify-content: center; }
  .team__cta-card { align-items: center; text-align: center; }
}
@media (max-width: 768px) {
  .team { padding: 72px 24px; }
}
@media (max-width: 480px) {
  .team__headline { font-size: 1.6rem; }
}

/* ============================================================
   MOBILE TAB BAR — Interactive Menu (21st.dev modern-mobile-menu)
   Aktiver Tab: Icon + Label nebeneinander, Unterstrich unter dem
   Label in Textbreite (--lineWidth), Icon-Bounce.
   ============================================================ */
.tab-bar { display: none; }

@media (max-width: 768px) {
  .tab-bar {
    display: flex;
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    margin: 0 auto;
    z-index: 850;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--white);
    border-radius: 24px;
    box-shadow: 0 0 0 1px var(--gray-200), 0 12px 32px rgba(8,22,42,.16);
    max-width: 440px;
  }
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .float-cta { bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; }
  .back-top  { bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; }
}

.tab-bar__item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px 2px;
  border: none;
  background: transparent;
  text-decoration: none;
  color: var(--gray-500);
  -webkit-tap-highlight-color: transparent;
  transition: color .3s ease;
  --lineWidth: 0px;
}
.tab-bar__item.active { color: var(--teal-600); }
/* Unterstrich unter dem Label — Breite folgt der Textbreite (--lineWidth) */
.tab-bar__item::after {
  content: '';
  position: absolute;
  bottom: -4px;
  right: 2px;
  height: 2px;
  width: var(--lineWidth);
  background: var(--teal-600);
  border-radius: 2px;
  transition: width .3s ease;
}
.tab-bar__icon {
  position: relative;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Dezenter Kreis hinter dem aktiven Icon */
.tab-bar__icon::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: var(--teal-pale);
  transform: scale(0);
  transition: transform .3s ease;
  z-index: -1;
}
.tab-bar__item.active .tab-bar__icon::before { transform: scale(1); }
.tab-bar__item.active .tab-bar__icon svg {
  animation: iconBounce .9s ease both;
}
/* Label klappt beim aktiven Tab horizontal neben dem Icon auf */
.tab-bar__label {
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin-left: 0;
  transition: max-width .3s ease, opacity .3s ease, margin-left .3s ease;
}
.tab-bar__item.active .tab-bar__label {
  max-width: 90px;
  opacity: 1;
  margin-left: 8px;
}
@keyframes iconBounce {
  0%, 100% { transform: translateY(0); }
  20%      { transform: translateY(-0.3em); }
  40%      { transform: translateY(0); }
  60%      { transform: translateY(-0.1em); }
  80%      { transform: translateY(0); }
}

/* ============================================================
   PERFORMANCE: Sektionen außerhalb des Viewports überspringt
   der Browser komplett (Layout, Paint, Animationen). Die
   intrinsic-size verhindert Scrollbar-Sprünge; "auto" merkt
   sich nach dem ersten Rendern die echte Höhe.
   ============================================================ */
.team, .foerder-teaser, .ablauf, .nachbarschaft,
#portal, #wissen, .blog-teaser, #faq, #kontakt, .footer {
  content-visibility: auto;
}
.team           { contain-intrinsic-size: auto 720px; }
.foerder-teaser { contain-intrinsic-size: auto 200px; }
.ablauf         { contain-intrinsic-size: auto 1650px; }
.nachbarschaft  { contain-intrinsic-size: auto 470px; }
#portal         { contain-intrinsic-size: auto 1160px; }
#wissen         { contain-intrinsic-size: auto 980px; }
.blog-teaser    { contain-intrinsic-size: auto 230px; }
#faq            { contain-intrinsic-size: auto 620px; }
#kontakt        { contain-intrinsic-size: auto 960px; }
.footer         { contain-intrinsic-size: auto 380px; }
@media (max-width: 768px) {
  .team           { contain-intrinsic-size: auto 1730px; }
  .foerder-teaser { contain-intrinsic-size: auto 420px; }
  .ablauf         { contain-intrinsic-size: auto 2060px; }
  .nachbarschaft  { contain-intrinsic-size: auto 620px; }
  #portal         { contain-intrinsic-size: auto 1250px; }
  #wissen         { contain-intrinsic-size: auto 1330px; }
  .blog-teaser    { contain-intrinsic-size: auto 430px; }
  #faq            { contain-intrinsic-size: auto 930px; }
  #kontakt        { contain-intrinsic-size: auto 1120px; }
  .footer         { contain-intrinsic-size: auto 670px; }
}