/* ============================================================
   Physio Berg – Main Stylesheet
   Design: Weiss (white theme) · Accent: #34507A
   ============================================================ */

:root {
  --navy:      #1B2A41;
  --navy-deep: #14202F;
  --paper:     #FFFFFF;
  --paper-2:   #F6F6F3;
  --card:      #FFFFFF;
  --slate:     #5C6B82;
  --line:      rgba(27,42,65,0.12);
  --line-soft: rgba(27,42,65,0.07);
  --accent:    #34507A;
  --radius:    18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  font-family: 'Archivo', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--navy);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Reset WordPress block editor styles */
.wp-site-blocks { padding: 0 !important; }
.wp-site-blocks > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.wp-block-template-part { margin: 0 !important; padding: 0 !important; }
.wp-block-post-content { margin: 0 !important; padding: 0 !important; max-width: none !important; }
.wp-block-post-content > * { margin-block-start: 0 !important; margin-block-end: 0 !important; max-width: none !important; }

/* ---------- layout ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4.2vw, 32px); }
/* WP-Core gibt jeder Gruppe mit Hintergrund 1.25em/2.375em Innenabstand (= 38 px seitlich).
   Unsere Sektionen bringen ihren seitlichen Abstand über .wrap mit, sonst addiert sich beides
   und auf dem Handy bleiben von 390 px nur 314 px übrig. */
.wp-site-blocks .wp-block-group.has-background { padding-inline: 0; }
section { scroll-margin-top: 84px; }

/* ---------- typography ---------- */
.eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
}
h1 {
  font-weight: 900;
  /* Untergrenze 2.2rem statt 2.6rem: bei 2.6rem passt „Physiotherapie" auf dem Handy
     nicht in eine Zeile und wird vom overflow:hidden des Heros abgeschnitten. */
  font-size: clamp(2.2rem, 6.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
  color: var(--navy);
}
h2 {
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  color: var(--navy);
}
h3 {
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}
p { margin: 0; line-height: 1.62; text-wrap: pretty; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 15px 26px;
  border-radius: 100px;
  border: 2px solid transparent;
  white-space: nowrap;
  transition: transform .14s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: #FFFFFF; }
.btn-primary:hover { filter: brightness(1.12); }
.btn-ghost-d {
  background: transparent;
  color: var(--navy);
  border-color: rgba(27,42,65,0.22);
}
.btn-ghost-d:hover { border-color: var(--navy); }
.btn .arr { transition: transform .16s ease; display: inline-block; }
.btn:hover .arr { transform: translateX(3px); }

/* ---------- nav ---------- */
.pb-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.pb-nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.pb-nav-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.pb-wordmark {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: #1B2A41;
  text-transform: uppercase;
  line-height: 1;
}
.pb-wordmark--sm { font-size: 15px; }
.pb-nav-links { display: flex; align-items: center; gap: 34px; }
.pb-nav-links a {
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(27,42,65,0.72);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color .15s;
}
.pb-nav-links a:hover { color: var(--navy); }
.pb-nav-cta { display: flex; align-items: center; gap: 18px; }
.pb-nav .btn { padding: 11px 20px; font-size: 14px; }

/* ---------- hero ---------- */
.pb-hero {
  position: relative;
  background: var(--paper);
  color: var(--navy);
  min-height: clamp(520px, 78vh, 720px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.pb-hero-in {
  position: relative;
  z-index: 2;
  width: 100%;
  /* nur vertikal setzen – das Kurzformat würde die seitlichen Abstände von .wrap plätten */
  padding-block: 60px 72px;
}
.hero-eyebrow { color: var(--accent); }
.hero-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--slate);
  max-width: 58ch;
  margin-top: 22px;
  line-height: 1.65;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}
.stat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(27,42,65,0.02);
  font-size: 13.5px;
  color: var(--slate);
  font-weight: 500;
}
.stat .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ---------- section shared ---------- */
.sec-pad { padding: clamp(64px, 9vw, 120px) 0; }
.sec-head { max-width: 640px; margin-bottom: 52px; }
.sec-head h2 { margin-top: 16px; }
.sec-head p { margin-top: 16px; color: var(--slate); font-size: 16.5px; line-height: 1.62; }
.bg-offwhite { background: var(--paper-2); }
.bg-white { background: var(--paper); }

/* ---------- leistungen ---------- */
.serv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.serv {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px 32px;
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s;
  position: relative;
  overflow: hidden;
}
.serv:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(27,42,65,0.10);
  border-color: color-mix(in oklch, var(--accent) 45%, var(--line));
}
.serv-n {
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.serv h3 { margin: 20px 0 10px; }
.serv p { color: var(--slate); font-size: 14.5px; }
.serv .bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--accent);
  transition: width .25s ease;
}
.serv:hover .bar { width: 100%; }

/* ---------- über mich ---------- */
.about-in {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 60px;
  align-items: center;
}
.about-photo {
  position: relative;
}
.about-photo-placeholder {
  width: 100%;
  height: clamp(420px, 50vw, 560px);
  background: var(--paper-2);
  border-radius: var(--radius);
  border: 2px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate);
  font-size: 14px;
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.05em;
  text-align: center;
}
.about-photo picture { display: block; }
.about-photo img {
  width: 100%;
  height: clamp(420px, 50vw, 560px);
  object-fit: cover;
  border-radius: var(--radius);
}
.about-body .eyebrow { color: var(--accent); }
.about-body h2 { color: var(--navy); margin: 18px 0 6px; }
.about-role {
  font-family: 'Space Mono', monospace;
  font-size: 13.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.about-body p { color: var(--slate); font-size: 16.5px; margin-top: 22px; }
.about-goal {
  margin-top: 28px;
  padding: 16px 20px;
  background: rgba(27,42,65,0.03);
  border-left: 2px solid var(--accent);
  border-radius: 0 10px 10px 0;
  color: var(--navy);
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chip {
  font-size: 13px;
  font-weight: 600;
  padding: 9px 15px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--navy);
}
.chip::before { content: '↗'; color: var(--accent); margin-right: 7px; }

/* ---------- faq ---------- */
.faq-in {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 56px;
  align-items: start;
}
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 4px;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--navy);
}
.faq-q .ic {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 17px;
  transition: transform .2s, background .2s, color .2s;
  line-height: 1;
}
.faq-item.open .faq-q .ic {
  background: var(--accent);
  color: #FFFFFF;
  transform: rotate(45deg);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
}
.faq-a-in {
  padding: 0 4px 26px;
  color: var(--slate);
  font-size: 16px;
  max-width: 60ch;
}

/* ---------- kontakt / footer ---------- */
.k-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.k-cta h2 { color: var(--navy); }
.k-cta p { color: var(--slate); margin-top: 18px; font-size: 17px; max-width: 40ch; }
.k-meta { display: flex; flex-direction: column; gap: 18px; margin-top: 30px; }
.k-meta .row { display: flex; gap: 14px; align-items: baseline; }
.k-meta .lbl {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  min-width: 96px;
}
.k-meta .val { font-size: 16px; color: var(--navy); }
.k-meta .val a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color .15s, color .15s;
}
.k-meta .val a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.k-meta .val small { color: var(--slate); font-size: 13px; }

.pb-form {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
}
.pb-form label {
  display: block;
  font-size: 12.5px;
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 8px;
}
.pb-form .field { margin-bottom: 18px; }
.pb-form input,
.pb-form textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  color: var(--navy);
  outline: none;
  transition: border-color .15s;
}
.pb-form input:focus,
.pb-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(52,80,122,0.13); }
.pb-form input::placeholder,
.pb-form textarea::placeholder { color: rgba(27,42,65,0.4); }
.pb-form select {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  color: var(--navy);
  outline: none;
  transition: border-color .15s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6B82' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  cursor: pointer;
}
.pb-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(52,80,122,0.13); }
.pb-form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.k-hinweis {
  margin-top: 36px;
  font-size: 13px;
  color: var(--slate);
  line-height: 1.6;
  padding: 14px 20px;
  background: rgba(27,42,65,0.03);
  border-radius: 10px;
  border: 1px solid var(--line-soft);
}
.pb-form .pb-success {
  color: var(--accent);
  font-weight: 600;
  font-size: 17px;
  padding: 40px 0;
  text-align: center;
}

/* ---------- footer ---------- */
.pb-foot { border-top: 1px solid var(--line); }
.pb-foot-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
  gap: 20px;
  flex-wrap: wrap;
}
.pb-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: 13.5px;
  color: var(--slate);
}
/* Links dürfen umbrechen, aber nicht innerhalb eines Eintrags –
   sonst wird aus "Über mich" zweizeilig. */
.pb-foot-links a { white-space: nowrap; }
.pb-foot-links a:hover { color: var(--navy); }
.pb-cr {
  font-family: 'Space Mono', monospace;
  font-size: 11.5px;
  color: rgba(27,42,65,0.45);
  letter-spacing: 0.06em;
}

/* ---------- animations ---------- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children for service cards */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger-children.is-visible > *:nth-child(1) { opacity:1; transform:none; transition-delay: 0.05s; }
.stagger-children.is-visible > *:nth-child(2) { opacity:1; transform:none; transition-delay: 0.12s; }
.stagger-children.is-visible > *:nth-child(3) { opacity:1; transform:none; transition-delay: 0.19s; }
.stagger-children.is-visible > *:nth-child(4) { opacity:1; transform:none; transition-delay: 0.26s; }
.stagger-children.is-visible > *:nth-child(5) { opacity:1; transform:none; transition-delay: 0.33s; }
.stagger-children.is-visible > *:nth-child(6) { opacity:1; transform:none; transition-delay: 0.40s; }

/* Hover lift for cards */
.hover-lift {
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s !important;
}
.hover-lift:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 48px rgba(27,42,65,0.11) !important;
}

/* Required: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .animate-on-scroll, .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Footer top margin reset */
.wp-site-blocks > footer { margin-block-start: 0; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .pb-nav-links { display: none; }
  .about-in, .faq-in, .k-top { grid-template-columns: 1fr; gap: 40px; }
  .serv-grid { grid-template-columns: 1fr 1fr; }
  /* Einspaltig würde der Fotoslot breit und flach – Hochformat erzwingen, sonst wird der Kopf beschnitten */
  .about-photo { max-width: 420px; margin-inline: auto; }
  .about-photo img { height: auto; aspect-ratio: 4 / 5; }
  /* Der Hero zentriert seinen Inhalt in einer min-height; auf dem Handy fraß das die
     60 px Innenabstand oben auf und ließ nur ~31 px unter der Kopfzeile. */
  .pb-hero { min-height: 0; align-items: flex-start; }
  .pb-hero-in { padding-block: 64px 72px; }
}
@media (max-width: 560px) {
  .serv-grid { grid-template-columns: 1fr; }
  /* Beschriftung bleibt sichtbar – ein Button mit nur einem Pfeil sagt niemandem,
     dass dahinter die Terminanfrage steckt. Stattdessen kompakter setzen. */
  .pb-nav .btn { padding: 10px 15px; font-size: 13px; gap: 8px; }
  .pb-foot-in { flex-direction: column; align-items: flex-start; }
  /* Platz freihalten, damit der Nach-oben-Button die Copyright-Zeile nicht überdeckt */
  .pb-cr { padding-right: 68px; }
}

/* ---------- hero decoration ---------- */
.pb-hero::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: clamp(280px, 42vw, 520px);
  height: clamp(280px, 42vw, 520px);
  background-image: radial-gradient(circle, rgba(52,80,122,0.10) 2px, transparent 2px);
  background-size: 26px 26px;
  border-radius: 50%;
  transform: translate(32%, -32%);
  pointer-events: none;
  z-index: 1;
}

/* ---------- active nav link ---------- */
.pb-nav-links a { position: relative; }
.pb-nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: width .2s ease;
}
.pb-nav-links a.active { color: var(--navy); }
.pb-nav-links a.active::after { width: 100%; }

/* ---------- hamburger button ---------- */
.pb-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 9px 6px;
  color: var(--navy);
  border-radius: 8px;
  transition: background .15s;
  margin-left: 8px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pb-burger:hover { background: rgba(27,42,65,0.06); }
.pb-burger svg line {
  transition: transform .22s ease, opacity .18s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.pb-burger.is-open .pb-burger-top { transform: rotate(45deg) translate(5px, 5px); }
.pb-burger.is-open .pb-burger-mid { opacity: 0; }
.pb-burger.is-open .pb-burger-bot { transform: rotate(-45deg) translate(5px, -5px); }

/* ---------- mobile menu ---------- */
.pb-mobile-menu {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  z-index: 49;
  padding: 16px 22px 28px;
  flex-direction: column;
  gap: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  display: flex;
}
.pb-mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.pb-mm-link {
  font-size: 17px;
  font-weight: 600;
  color: rgba(27,42,65,0.72);
  padding: 14px 6px;
  border-bottom: 1px solid var(--line-soft);
  display: block;
  transition: color .15s;
}
.pb-mm-link:hover { color: var(--navy); }
.pb-mm-cta { margin-top: 16px; justify-content: center; }

/* ---------- scroll progress bar ---------- */
.pb-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2.5px;
  background: var(--accent);
  z-index: 100;
  transition: width 0.08s linear;
  pointer-events: none;
}

/* ---------- back-to-top button ---------- */
.pb-back-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, background .15s;
  z-index: 40;
  pointer-events: none;
  box-shadow: 0 4px 18px rgba(27,42,65,0.22);
}
.pb-back-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.pb-back-top:hover { background: var(--accent); }

/* ---------- chip hover ---------- */
.chip { transition: border-color .15s, background .15s; }
.chip:hover { border-color: var(--accent); background: rgba(52,80,122,0.05); }

/* ---------- stat dot pulse ---------- */
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,80,122,0.4); }
  60% { box-shadow: 0 0 0 5px rgba(52,80,122,0); }
}
.stat .dot { animation: dot-pulse 3s ease-in-out infinite; }
.stat:nth-child(2) .dot { animation-delay: 0.6s; }
.stat:nth-child(3) .dot { animation-delay: 1.2s; }
.stat:nth-child(4) .dot { animation-delay: 1.8s; }

/* ---------- show burger on mobile ---------- */
@media (max-width: 900px) {
  .pb-burger { display: flex; }
}
@media (min-width: 901px) {
  .pb-mobile-menu { display: none !important; }
  .pb-burger { display: none !important; }
}
@media (max-width: 560px) {
  .pb-back-top { bottom: 20px; right: 16px; }
}

/* ---------- eyebrow: + cross statt langer Linie ---------- */
.eyebrow::before {
  content: '';
  width: 10px;
  height: 10px;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 2px 10px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 10px 2px no-repeat;
  display: inline-block;
  flex-shrink: 0;
}

/* ---------- stats: rein typografisch, keine Pills ---------- */
.stats { margin-top: 32px; gap: 0; }
.stat {
  border: none;
  background: none;
  border-radius: 0;
  padding: 2px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate);
  gap: 0;
  letter-spacing: 0.005em;
}
.stat:not(:last-child) {
  margin-right: 22px;
  padding-right: 22px;
  position: relative;
}
.stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 11px;
  background: rgba(27,42,65,0.18);
}
.stat .dot { display: none; }
/* dot-pulse animation deaktivieren da dot nicht mehr sichtbar */
.stat .dot,
.stat:nth-child(2) .dot,
.stat:nth-child(3) .dot,
.stat:nth-child(4) .dot { animation: none; }

/* ---------- rechtsseiten (impressum, datenschutz) ---------- */
.legal-in { max-width: 760px; }
.legal-in h1 { color: var(--navy); margin: 18px 0 8px; }
.legal-in h2 {
  color: var(--navy);
  font-size: 20px;
  margin: 44px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.legal-in h2:first-of-type { border-top: 0; padding-top: 0; }
/* h3/h4 gliedern die Datenschutzerklaerung innerhalb eines h2-Abschnitts,
   deshalb ohne Trennlinie und mit kleiner werdendem Abstand */
.legal-in h3 {
  color: var(--navy);
  font-size: 17px;
  margin: 30px 0 10px;
}
.legal-in h4 {
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  margin: 22px 0 8px;
}
.legal-in p,
.legal-in li { color: var(--slate); font-size: 16px; line-height: 1.75; }
.legal-in p { margin-top: 14px; }
.legal-in ul { margin: 14px 0 0 20px; }
.legal-in li { margin-top: 6px; }
.legal-in a { color: var(--accent); }
.legal-in strong { color: var(--navy); font-weight: 600; }
.legal-in mark.todo {
  display: block;
  background: #FFF6D6;
  border-left: 2px solid #E0A800;
  color: #6B5200;
  font-size: 14px;
  line-height: 1.6;
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
}
.legal-back { margin-top: 56px; }
.legal-back a { font-family: 'Space Mono', monospace; font-size: 14px; }

/* ---------- kontaktformular (WPForms) ----------
   WPForms liefert nur sein Basis-CSS (Einstellung "disable-css" = 2).
   Das Aussehen kommt von hier, damit es dem übrigen Design entspricht. */
.pb-form-wrap .wpforms-container {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  margin: 0;
}
.pb-form-wrap .wpforms-field { padding: 0; margin-bottom: 18px; }
.pb-form-wrap .wpforms-field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 8px;
}
.pb-form-wrap .wpforms-required-label { color: var(--accent); border: 0; }
.pb-form-wrap input[type="text"],
.pb-form-wrap input[type="email"],
.pb-form-wrap input[type="tel"],
.pb-form-wrap input[type="url"],
.pb-form-wrap textarea,
.pb-form-wrap select {
  width: 100%;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  color: var(--navy);
  outline: none;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.pb-form-wrap textarea { min-height: 110px; resize: vertical; }
.pb-form-wrap input:focus,
.pb-form-wrap textarea:focus,
.pb-form-wrap select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(52,80,122,0.13);
}
.pb-form-wrap input::placeholder,
.pb-form-wrap textarea::placeholder { color: rgba(27,42,65,0.4); }
.pb-form-wrap select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6B82' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  cursor: pointer;
}

/* Datenschutz-Einwilligung */
.pb-form-wrap .wpforms-field-gdpr-checkbox {
  margin-top: 26px;
  padding: 16px 18px;
  background: rgba(27,42,65,0.03);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.pb-form-wrap .wpforms-field-gdpr-checkbox ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pb-form-wrap .wpforms-field-gdpr-checkbox li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.pb-form-wrap .wpforms-field-gdpr-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.pb-form-wrap .wpforms-field-label-inline {
  font-family: 'Archivo', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--slate);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.pb-form-wrap .wpforms-field-label-inline a {
  color: var(--accent);
  text-decoration: underline;
}
.pb-form-wrap .wpforms-field-description {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--slate);
}

/* Absenden */
.pb-form-wrap .wpforms-submit-container { padding: 0; margin-top: 22px; }
.pb-form-wrap button[type="submit"] {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  background: var(--accent);
  color: #FFFFFF;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 15px 26px;
  border: 2px solid transparent;
  border-radius: 100px;
  transition: transform .14s ease, filter .18s ease;
}
.pb-form-wrap button[type="submit"]:hover { transform: translateY(-2px); filter: brightness(1.12); }
.pb-form-wrap button[type="submit"][disabled] { opacity: .6; transform: none; cursor: default; }

/* Fehler und Bestätigung */
.pb-form-wrap .wpforms-error,
.pb-form-wrap label.wpforms-error {
  color: #B3261E;
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  margin-top: 7px;
  display: block;
}
.pb-form-wrap input.wpforms-error,
.pb-form-wrap textarea.wpforms-error,
.pb-form-wrap select.wpforms-error { border-color: #B3261E; }
.pb-form-wrap .wpforms-confirmation-container-full,
.pb-form-wrap .wpforms-confirmation-container {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 30px;
  text-align: center;
  color: var(--accent);
  font-weight: 600;
  font-size: 17px;
}
.pb-form-wrap .wpforms-confirmation-container p { margin: 0; }

/* ---------- logo ----------
   Gestapelte Wort-Bild-Marke. Höhe steuert die Größe, Breite folgt. */
.pb-logo {
  height: 46px;
  width: auto;
  display: block;
}
.pb-logo--foot { height: 54px; }
@media (max-width: 720px) {
  .pb-logo { height: 40px; }
  .pb-logo--foot { height: 46px; }
}

/* Pflicht-Sternchen nur bei der Einwilligung ausblenden – am Ende eines
   ganzen Satzes liest es sich wie ein Fehler. Die anderen Felder behalten es,
   dort steht es hinter einer kurzen Bezeichnung und hilft. Das Feld bleibt
   Pflicht, nur der visuelle Marker entfällt (er war ohnehin aria-hidden). */
.pb-form-wrap .wpforms-field-gdpr-checkbox .wpforms-required-label { display: none; }