/* ==========================================================================
   Nachfolge Guide – Landing Page
   Portiert aus dem Design-Handoff: project/uploads/Landing page layout (1)/
   ========================================================================== */

:root {
  --ink: #10201E;
  --ink-soft: #4A5254;
  --muted: #8FA3A0;
  --teal: #0A9C94;
  --teal-hover: #0CB3AA;
  --teal-bright: #5CD6CD;
  --teal-soft: #7FD1CC;
  --dark: #123E39;
  --footer-bg: #0D302C;
  --orange: #F0824E;
  --orange-deep: #E8541D;
  --line: #E4EBEA;
  --font-body: 'Figtree', system-ui, sans-serif;
  --font-head: 'Space Grotesk', sans-serif;
  --pad-x: clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
}

a { color: var(--teal); }
a:hover { color: var(--teal-hover); }

img { display: block; }

h1, h2 { margin: 0; }

/* --- Keyframes ------------------------------------------------------------ */
@keyframes dotWave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes barPulse { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1.15); } }
@keyframes typingDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes ctaPulse { 0% { box-shadow: 0 0 0 0 rgba(10,156,148,.45); } 70% { box-shadow: 0 0 0 16px rgba(10,156,148,0); } 100% { box-shadow: 0 0 0 0 rgba(10,156,148,0); } }

.dot-wave { animation: dotWave 6s ease-in-out infinite; }

/* --- Shared elements ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .25s, transform .25s, box-shadow .25s;
}
.btn:hover { background: var(--teal-hover); color: #fff; }
.btn--nav { padding: 10px 20px; font-size: 14px; }
.btn--lg { padding: 15px 30px; font-size: 16px; }
.btn--xl { padding: 16px 34px; font-size: 16.5px; }
.btn--md { padding: 13px 26px; font-size: 15px; gap: 9px; }
.btn--sm { padding: 12px 24px; font-size: 14px; gap: 9px; }
.btn--lg:hover, .btn--xl:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(10,156,148,.55); }
.btn--md:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(10,156,148,.45); }
.btn--sm:hover { transform: translateY(-2px); }
.btn--pulse { animation: ctaPulse 2.2s ease-out infinite; }
.btn--pulse:hover { box-shadow: 0 14px 30px -12px rgba(10,156,148,.45); }

a[data-cta] svg { transition: transform .25s ease; }
a[data-cta]:hover svg { transform: translateX(4px); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1.5px solid rgba(10,156,148,.45);
  color: var(--teal);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s, border-color .25s;
}
.btn-outline:hover { background: rgba(10,156,148,.08); border-color: var(--teal); color: var(--teal); }

.kicker { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; }
.kicker--orange { color: var(--orange-deep); }
.kicker--bright { color: var(--teal-bright); margin-bottom: 16px; }
.kicker--teal { color: var(--teal); font-size: 13px; font-weight: 700; letter-spacing: .14em; margin-bottom: 12px; }

.accent-bright { color: var(--teal-bright); }
.accent-teal { color: var(--teal); }

.section-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: -.02em;
  text-align: center;
  margin: 0 0 38px;
}
.section-title--sm { font-size: clamp(26px, 4vw, 32px); margin-bottom: 26px; }
.section-sub { font-size: 15.5px; color: var(--ink-soft); margin: 0 0 38px; text-align: center; }

.cta-note { font-size: 13px; color: var(--muted); margin-top: 12px; }

.brand-2auf3 { font-family: 'Zalando Sans Expanded', sans-serif; font-weight: 600; color: var(--orange-deep); }
.brand-2auf3--footer { color: var(--orange); }

.chat-avatar {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--teal);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-weight: 700; font-size: 13px;
  flex: none;
}

/* --- Navigation ------------------------------------------------------------ */
.site-nav { background: var(--dark); color: #fff; padding: 18px var(--pad-x); }
.nav-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 18px; max-width: 1280px; margin: 0 auto;
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-mark { display: flex; align-items: center; gap: 9px; }
.logo-circle {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--teal); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; align-self: center;
}
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 17.5px; letter-spacing: -.01em; }
.brand-byline { font-family: 'Zalando Sans Expanded', sans-serif; font-size: 11.5px; color: var(--orange); font-weight: 600; }
.nav-links {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px clamp(14px, 2.5vw, 28px);
  font-size: 14.5px; color: rgba(255,255,255,.75);
}
.nav-links > a:not(.btn) { color: inherit; text-decoration: none; }

/* --- Hero ------------------------------------------------------------------- */
.hero {
  background: linear-gradient(180deg, #123E39 0%, #14524A 68%, #17604F 100%);
  color: #fff;
  text-align: center;
  padding: clamp(52px, 8vw, 76px) var(--pad-x) 160px;
  overflow: hidden;
  position: relative;
}
.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 10% 106%, rgba(92,214,205,.15), transparent 70%),
    radial-gradient(ellipse 65% 50% at 85% 104%, rgba(240,130,78,.26), transparent 65%);
}
.hero-dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-content { max-width: 1020px; margin: 0 auto; position: relative; z-index: 2; }
.hero-badge {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(127,209,204,.35);
  color: var(--teal-soft);
  font-size: 13px; font-weight: 600;
  margin-bottom: 28px;
}
.hero h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(34px, 7vw, 68px);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0 0 24px;
}
.hero-sub { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,.72); margin: 0 auto 34px; max-width: 600px; }
.hero-actions { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-secondary {
  font-size: 15px; font-weight: 600;
  color: rgba(255,255,255,.85);
  border-bottom: 1.5px solid rgba(92,214,205,.6);
  padding-bottom: 2px;
  cursor: pointer; text-decoration: none;
}
.hero-secondary:hover { color: #fff; }
.hero-note { font-size: 13.5px; color: rgba(255,255,255,.45); margin-top: 16px; }

/* --- Das Problem ------------------------------------------------------------ */
.problem { padding: 0 clamp(16px, 4vw, 56px) 76px; background: #fff; }
.problem-card {
  max-width: 960px;
  margin: -84px auto 0;
  position: relative; z-index: 2;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 34px 90px -34px rgba(8,33,31,.4);
  padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 48px) clamp(24px, 3.5vw, 40px);
}
.problem-head { text-align: center; max-width: 620px; margin: 0 auto 32px; }
.problem-head h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(29px, 4vw, 40px);
  line-height: 1.12;
  letter-spacing: -.025em;
  margin: 0 0 18px;
  color: var(--orange-deep);
}
.problem-head p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 auto; max-width: 520px; }

.berg-grid {
  display: grid;
  grid-template-columns: 1fr clamp(250px, 32%, 330px) 1fr;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
  align-items: stretch;
}
.berg-side { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 22px 0; }
.berg-visual { position: relative; border-radius: 20px; overflow: hidden; min-height: 430px; }
.berg-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.info-card {
  background: #EFF6F4;
  border: 1px solid #DCE8E6;
  border-radius: 16px;
  padding: 14px 18px;
  transition: transform .3s;
}
.info-card:hover { transform: translateY(-3px); }
.info-card--dark { background: var(--dark); border-color: var(--dark); }
.info-card-label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 4px; }
.info-card--dark .info-card-label { color: var(--teal-bright); }
.info-card-text { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.info-card--dark .info-card-text { color: #fff; }

.problem-cta { text-align: center; margin-top: 30px; }

/* --- Statement --------------------------------------------------------------- */
.statement { padding: 64px var(--pad-x) 72px; text-align: center; background: #fff; }
.statement-headline {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(30px, 5.4vw, 50px);
  line-height: 1.1;
  letter-spacing: -.025em;
  max-width: 880px;
  margin: 0 auto;
}
.statement-tw { margin: 26px auto 0; max-width: 640px; min-height: 130px; }
.tw-line {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(19px, 2.8vw, 26px);
  letter-spacing: -.01em;
  color: var(--teal);
  margin: 0;
  min-height: 1.4em;
}
.tw-caret {
  display: inline-block;
  width: 3px; height: 1em;
  background: var(--teal);
  margin-left: 3px;
  vertical-align: -2px;
  opacity: 0;
  border-radius: 2px;
}
.tw-after {
  display: flex; align-items: flex-end; justify-content: center; gap: 9px;
  margin-top: 20px;
  opacity: 0;
  transform: translateY(14px) scale(.95);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.8,.3,1);
}
.chat-bubble {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 18px;
  font-size: 14.5px; line-height: 1.5;
  color: var(--ink);
  box-shadow: 0 12px 28px -16px rgba(8,25,23,.35);
  text-align: left;
}
.chat-bubble-tail {
  position: absolute; left: -7px; bottom: 9px;
  width: 13px; height: 13px;
  background: #fff;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
  border-bottom-left-radius: 3px;
}

/* --- Kapitel-Timeline --------------------------------------------------------- */
.chapters { padding: 0 var(--pad-x) 84px; background: #fff; }
.chapters-inner { max-width: 700px; margin: 0 auto; }
.chapter {
  display: grid;
  grid-template-columns: clamp(56px, 10vw, 76px) 1fr;
  column-gap: clamp(16px, 3.5vw, 30px);
}
.chapter-rail { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.chapter-icon {
  width: clamp(48px, 8vw, 60px); height: clamp(48px, 8vw, 60px);
  border-radius: 50%;
  background: var(--teal); color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.chapter-line { width: 2px; flex: 1; min-height: 44px; background: linear-gradient(180deg, #0A9C94, #DCE8E6); }
.chapter-body { padding: 6px 0 56px; }
.chapter-body--last { padding-bottom: 4px; }
.chapter-kicker {
  font-family: var(--font-head);
  font-weight: 700; font-size: 13.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}
.chapter-title { font-family: var(--font-head); font-weight: 700; font-size: 29px; letter-spacing: -.015em; margin-bottom: 10px; }
.chapter-body p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; max-width: 500px; }
.chapter-body p.chapter-body-wide { max-width: 540px; }

/* --- Vorteile ------------------------------------------------------------------ */
.benefits { padding: 0 var(--pad-x) 84px; background: #fff; }
.benefits-inner { max-width: 1120px; margin: 0 auto; }
.benefits .section-title { margin-bottom: 8px; }
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 22px;
}
.benefit { border-top: 2px solid var(--ink); padding: 24px 0 0; }
.benefit-icon { color: var(--teal); display: flex; margin: 2px 0 14px; }
.benefit-tag { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.benefit-title { font-family: var(--font-head); font-weight: 700; font-size: 20px; letter-spacing: -.01em; margin-bottom: 8px; }
.benefit-title--nowrap { white-space: nowrap; }
.benefit p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; }

/* --- App-Panel ------------------------------------------------------------------ */
.app-section { padding: 0 clamp(16px, 4vw, 56px) 76px; background: #fff; }
.app-inner { max-width: 1160px; margin: 0 auto; }
.app-panel {
  background: var(--dark);
  color: #fff;
  border-radius: 30px;
  padding: clamp(24px, 4.5vw, 60px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
  overflow: hidden;
  position: relative;
}
.app-flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.app-copy { position: relative; }
.app-copy h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: -.02em; line-height: 1.1;
  margin: 0 0 16px;
}
.app-copy > p { font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.7); margin: 0 0 22px; }
.app-features { display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; }
.app-features span { display: flex; align-items: center; gap: 10px; }

.app-mock {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
  height: 375px;
  background: #F4F7F6;
  display: flex; flex-direction: column;
}
.mock-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--line); }
.mock-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.mock-meta { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mock-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 18px; overflow: hidden; }
.msg--in {
  align-self: flex-start;
  max-width: 78%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  padding: 12px 15px;
  font-size: 13.5px; line-height: 1.5;
  color: var(--ink);
}
.msg--voice {
  align-self: flex-end;
  max-width: 70%;
  background: var(--teal);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
  padding: 12px 15px;
  display: flex; align-items: center; gap: 10px;
}
.voice-bars { display: flex; align-items: center; gap: 2.5px; height: 20px; }
.voice-bars i {
  width: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.85);
  transform-origin: center;
  animation: barPulse 1.2s ease-in-out infinite;
}
.voice-time { font-size: 12px; color: rgba(255,255,255,.8); }
.mock-saved { align-self: flex-start; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.msg--typing {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  padding: 11px 14px;
  display: flex; gap: 5px; align-items: center;
}
.msg--typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
  animation: typingDot 1.3s ease-in-out infinite;
}
.mock-footer { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; border-top: 1px solid var(--line); }
.mock-input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; font-size: 13px; color: #AEBCBA; }
.mock-mic {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--teal); color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}

/* --- Für wen ---------------------------------------------------------------------- */
.audience { padding: 0 var(--pad-x) 84px; background: #fff; }
.audience-inner { max-width: 1120px; margin: 0 auto; }
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 22px;
}
.audience-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px;
  display: flex; gap: 20px;
  background: #fff;
  transition: transform .3s, box-shadow .3s;
}
.audience-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -24px rgba(16,32,30,.28); }
.audience-card--dark { border-color: var(--dark); background: var(--dark); color: #fff; }
.audience-card--dark:hover { box-shadow: 0 20px 44px -24px rgba(16,32,30,.45); }
.audience-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: #E0F2F0; color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.audience-card--dark .audience-icon { background: rgba(10,156,148,.3); color: var(--teal-bright); }
.audience-title { font-family: var(--font-head); font-weight: 700; font-size: 20px; letter-spacing: -.01em; margin-bottom: 8px; }
.audience-card p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; }
.audience-card--dark p { color: rgba(255,255,255,.78); }
.audience-extra { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 14px; color: var(--teal-bright); font-weight: 600; }

/* --- Testimonial: Editorial Pull-Quote ------------------------------------------------ */
.testimonial { padding: clamp(64px, 9vw, 120px) var(--pad-x); background: linear-gradient(180deg, #EDF4F2, #F6FAF9); }
.testimonial-inner { max-width: 1080px; margin: 0 auto; }
.testi-kicker-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: clamp(28px, 4vw, 40px); }
.testi-kicker-line { width: 32px; height: 1.5px; background: var(--teal); display: block; flex: none; }
.testi-kicker {
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--teal);
  min-height: 1.2em;
}
.tw-caret--sm { width: 2px; margin-left: 2px; }
.testi-card {
  position: relative;
  background: #fff;
  border: 1px solid #E1EAE8;
  border-radius: 28px;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
  overflow: hidden;
  box-shadow: 0 30px 80px -44px rgba(8,33,31,.35);
}
.testi-quotemark {
  position: absolute;
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: clamp(120px, 15vw, 190px);
  line-height: 1;
  opacity: .32;
  pointer-events: none;
  user-select: none;
}
.testi-quotemark--open { top: clamp(-6px, 1vw, 14px); left: clamp(10px, 3vw, 40px); color: var(--teal-bright); }
.testi-quotemark--close { bottom: -.7em; right: clamp(10px, 3vw, 40px); color: #F0823C; }
.testi-panel { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(20px, 4vw, 52px); }
.testi-photo {
  flex: none;
  width: clamp(180px, 26vw, 280px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: #EDF4F2;
}
.testi-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.testi-quote-wrap { flex: 1; min-width: 0; display: flex; justify-content: center; }
.testi-quote-card {
  max-width: 520px;
  background: #FBE6D6;
  border-radius: 14px;
  padding: clamp(28px, 4vw, 46px) clamp(26px, 4vw, 46px) clamp(24px, 3.5vw, 34px);
  box-shadow: 0 30px 70px -34px rgba(184,92,37,.4);
  transform: rotate(-2.2deg);
}
.testi-quote-card p {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 2.4vw, 27px);
  line-height: 1.42;
  color: #B85C25;
  margin: 0 0 clamp(24px, 3.5vw, 34px);
  text-wrap: pretty;
}
.testi-highlight {
  background: linear-gradient(90deg, #0A9C94, #E8541D);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.testi-name { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: #3A2416; }
.testi-role { font-size: 13px; color: #9A6A48; margin-top: 1px; }

/* --- Ansprechpartnerin --------------------------------------------------------------- */
.contact-section { margin: 0; }
.contact-band { background: #EDF4F2; padding: clamp(14px, 2vw, 24px) var(--pad-x); }
.contact-inner {
  max-width: 1020px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
}
.contact-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(16px, 2vw, 28px) 0; }
.contact-heading {
  font-family: var(--font-head);
  font-size: clamp(28px, 3.8vw, 40px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.contact-text { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 14px 0 26px; max-width: 420px; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.contact-copy .cta-note { margin-top: 14px; }

.contact-visual { position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(28px, 4vw, 48px); }
.contact-halo {
  position: absolute;
  width: clamp(240px, 28vw, 360px); height: clamp(240px, 28vw, 360px);
  border-radius: 50%;
  background: #fff; opacity: .55;
  transform: translate(9%, -7%);
}
.contact-dot { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: rgba(92,214,205,.35); left: 12%; bottom: 16%; }
.contact-photo-wrap { position: relative; width: clamp(220px, 24vw, 300px); }
.contact-photo {
  width: 100%;
  aspect-ratio: 4 / 4.6;
  border-radius: 26px;
  overflow: hidden;
  background: #E0F2F0;
  border: 5px solid #fff;
  box-shadow: 0 30px 60px -22px rgba(8,33,31,.42);
  transform: rotate(-2.5deg);
}
.contact-photo img { width: 100%; height: 100%; object-fit: cover; }
.contact-badge {
  position: absolute; left: -18px; bottom: -16px;
  background: #fff;
  border-radius: 14px;
  padding: 11px 18px;
  box-shadow: 0 14px 30px -12px rgba(8,33,31,.35);
  transform: rotate(2deg);
}
.contact-badge-name { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--ink); }
.contact-badge-role { font-size: 13px; color: var(--ink-soft); }

/* --- Warum wir das tun ------------------------------------------------------------------- */
.mission { padding: clamp(56px, 8vw, 88px) var(--pad-x); background: var(--dark); color: #fff; text-align: center; }
.mission-inner { max-width: 800px; margin: 0 auto; }
.mission .kicker--bright { margin-bottom: 18px; }
.mission-text {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(28px, 4.6vw, 42px);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.grad-text {
  background: linear-gradient(90deg, #14B8AE, #E8541D);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Team ------------------------------------------------------------------------------- */
.team { padding: 76px var(--pad-x) 66px; text-align: center; background: linear-gradient(180deg, #EDF4F2, #fff 160px); }
.team .section-title { margin-bottom: 12px; }
.team-sub { font-size: 15.5px; color: var(--ink-soft); margin: 0 auto 40px; max-width: 520px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, 237px); gap: 24px; justify-content: center; max-width: 820px; margin: 0 auto; }
.team-member { display: flex; flex-direction: column; gap: 12px; }
.team-photo { height: 230px; width: 100%; border-radius: 18px; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-name { font-size: 15.5px; font-weight: 700; }
.team-role { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* --- FAQ --------------------------------------------------------------------------------- */
.faq { padding: 10px var(--pad-x) 76px; background: #fff; }
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 6px 52px;
  max-width: 960px;
  margin: 0 auto;
}
.faq-item { border-top: 1px solid var(--line); padding: 20px 0; }
.faq-q { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.faq-item p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* --- Finaler CTA --------------------------------------------------------------------------- */
.final-cta {
  background: linear-gradient(180deg, #123E39 0%, #14524A 62%, #17604F 100%);
  color: #fff;
  padding: clamp(64px, 9vw, 96px) var(--pad-x);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 12% 108%, rgba(92,214,205,.16), transparent 70%),
    radial-gradient(ellipse 70% 60% at 82% 106%, rgba(240,130,78,.30), transparent 65%);
}
.final-dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.final-content { max-width: 760px; margin: 0 auto; position: relative; }
.final-person { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0 0 34px; }
.final-photo {
  width: clamp(150px, 20vw, 190px); height: clamp(150px, 20vw, 190px);
  border-radius: 50%;
  background: #E0F2F0;
  overflow: hidden;
  border: 5px solid #fff;
  box-shadow: 0 30px 70px -25px rgba(0,0,0,.6);
}
.final-photo img { width: 100%; height: 100%; object-fit: cover; }
.final-name { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -.015em; }
.final-role { font-size: 14px; font-weight: 600; color: var(--teal-bright); margin-top: 4px; }
.final-cta h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(32px, 6.2vw, 54px);
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 0 0 18px;
}
.final-cta > .final-content > p { font-size: 16.5px; color: rgba(255,255,255,.7); margin: 0 0 32px; }

/* --- Footer ----------------------------------------------------------------------------------- */
.site-footer { background: var(--footer-bg); color: rgba(255,255,255,.65); padding: 56px var(--pad-x) 26px; }
.footer-inner { max-width: 1160px; margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  padding-bottom: 38px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-brand .brand-mark { margin-bottom: 14px; }
.footer-brand .brand-name { color: #fff; }
.footer-brand p { font-size: 13.5px; line-height: 1.65; margin: 0; max-width: 340px; }
.footer-nav { display: flex; flex-direction: column; gap: 11px; font-size: 13.5px; }
.footer-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 3px; }
.footer-label--spaced { margin-bottom: 14px; }
.footer-nav a { color: rgba(255,255,255,.75); text-decoration: none; }
.footer-nav a:hover { color: #fff; }
.footer-cta-note { font-size: 12.5px; color: rgba(255,255,255,.45); margin-top: 11px; }
.footer-mail {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--teal-bright);
  text-decoration: none;
  font-weight: 600;
}
.footer-mail:hover { color: #fff; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 10px 24px;
  padding-top: 22px;
  font-size: 12.5px;
  color: rgba(255,255,255,.45);
}
.footer-copy { display: flex; align-items: center; gap: 14px; }
.footer-linkedin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.65);
  transition: background .2s, color .2s;
}
.footer-linkedin:hover { background: rgba(255,255,255,.16); color: #fff; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-legal a { color: inherit; text-decoration: none; cursor: pointer; }
.footer-legal a:hover { color: rgba(255,255,255,.75); }

/* --- Modals -------------------------------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(8,25,23,.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal-card {
  position: relative;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 40px 90px -30px rgba(8,25,23,.6);
}
.modal-card--contact { width: min(440px, 100%); padding: clamp(28px, 4vw, 40px); }
.modal-card--legal { display: flex; flex-direction: column; overflow: hidden; }
.modal-card--impressum { width: min(640px, 100%); max-height: min(760px, 88vh); }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: #EDF4F2;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s;
}
.modal-close:hover { background: #DCEAE7; }
.modal-close--static { position: static; flex: none; }
.modal-title { font-family: var(--font-head); font-weight: 700; font-size: 26px; letter-spacing: -.02em; color: var(--ink); }
.modal-card--contact .modal-title { margin-bottom: 6px; }
.modal-sub { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 24px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 32px 18px;
  border-bottom: 1px solid #E6EFED;
  flex-shrink: 0;
}
.modal-scroll { overflow-y: auto; padding: 10px 32px 32px; }

#contact-form { display: flex; flex-direction: column; gap: 14px; }
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
  padding: 13px 16px;
  border-radius: 12px;
  border: 1.5px solid #D9E4E2;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
}
#contact-form textarea { resize: vertical; }
#contact-form input:focus, #contact-form textarea:focus { border-color: var(--teal); }
#contact-form .consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); cursor: pointer; }
#contact-form .consent input { margin: 2px 0 0; flex: none; width: 16px; height: 16px; accent-color: var(--teal); }
#contact-form .consent a { color: var(--teal); font-weight: 600; text-decoration: underline; }
.btn--submit { justify-content: center; padding: 14px 28px; font-size: 15.5px; }
.modal-alt { font-size: 12.5px; color: var(--muted); margin-top: 16px; text-align: center; }
.modal-alt a { color: var(--teal); text-decoration: none; font-weight: 600; }

/* Legal-Inhalte */
.legal h2 { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--ink); margin: 24px 0 8px; }
.legal h3 { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--ink); margin: 20px 0 6px; }
.legal h4 { font-size: 14.5px; font-weight: 700; color: var(--ink); margin: 16px 0 4px; }
.legal p { font-size: 14px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 10px; }
.modal-card--impressum .legal p { margin: 0; }
.modal-card--impressum .legal h3 + p + p { margin-top: 10px; }
.legal ul { font-size: 14px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 10px; padding-left: 20px; }
.legal strong { color: var(--ink); }
.legal a { color: var(--teal); text-decoration: none; font-weight: 600; }
.legal .legal-note { font-style: italic; }
.legal .legal-source { font-size: 12.5px; line-height: 1.7; color: var(--muted); margin: 20px 0 0; }
.legal .legal-source a { color: var(--muted); text-decoration: underline; font-weight: 400; }

/* --- Responsive ------------------------------------------------------------------------------------ */
@media (max-width: 860px) {
  .berg-grid { grid-template-columns: 1fr; }
  .berg-side { flex-direction: row; flex-wrap: wrap; }
  .berg-side > div { flex: 1 1 220px; }
  .testi-panel { flex-direction: column; align-items: center; }
  .testi-photo { width: clamp(180px, 50vw, 240px); }
  .testi-quote-wrap { width: 100%; }
}

/* --- Reduzierte Bewegung ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dot-wave, .voice-bars i, .msg--typing i, .btn--pulse { animation: none; }
  .info-card, .audience-card, .btn { transition: none; }
}