@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("plus-jakarta-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("plus-jakarta-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("plus-jakarta-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("plus-jakarta-sans-700.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("plus-jakarta-sans-800.woff2") format("woff2");
}

:root {
  /* Farben aus dem Logo abgeleitet (Bildmarke: #0d3f6e dunkel, #0f66ab hell) */
  --bg: #f4f7fb;
  --surface: #ffffff;
  --ink: #101828;
  --text-secondary: #5b6472;
  --border: #e0e7f0;
  --accent: #14548c;
  --accent-dark: #0d3f6e;
  --accent-soft: #e6eef6;
  --accent-ink: #0a2e50;
  --radius-sm: 12px;
  --radius-lg: 26px;
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0s);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce), (scripting: none) {
  [data-reveal], .hero-in { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.hero-in { opacity: 0; animation: heroIn 0.8s var(--ease) forwards; animation-delay: var(--d, 0s); }

/* ---------- Buttons: rounded rectangles, not pills ---------- */
.btn {
  display: inline-block;
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 12px 24px rgba(35,64,143,0.28); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(35,64,143,0.36); background: var(--accent-dark); }
.btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--border); display: inline-flex; align-items: center; gap: 8px; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-arrow { width: 16px; height: 16px; transition: transform 0.3s var(--ease); flex-shrink: 0; }
.btn-ghost:hover .btn-arrow { transform: translateX(4px); }
.btn-on-dark { background: #fff; color: var(--accent-ink); }
.btn-on-dark:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,0.2); }
.btn-submit {
  background: var(--accent); color: #fff; border: none; cursor: pointer; align-self: flex-start;
  box-shadow: 0 12px 24px rgba(35,64,143,0.28);
}
.btn-submit:hover { transform: translateY(-2px); background: var(--accent-dark); }
.btn-submit:disabled { opacity: 0.6; cursor: default; transform: none; }

/* ---------- Nav: light sticky bar ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 61;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.12s linear;
}
@media (prefers-reduced-motion: reduce), (scripting: none) { .scroll-progress { display: none; } }

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: rgba(243,246,252,0.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  padding: 22px 0;
  transition: background 0.3s var(--ease), padding 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.nav.is-stuck {
  background: rgba(255,255,255,0.92);
  border-bottom-color: var(--border);
  padding: 14px 0;
  box-shadow: 0 4px 24px rgba(16,24,40,0.05);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; }
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-mark {
  width: 30px; height: 30px;
  display: block; object-fit: contain;
  flex: 0 0 auto;
}
.nav-logo { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  position: relative; font-size: 14px; font-weight: 600;
  color: var(--text-secondary); padding: 10px 16px; border-radius: 999px;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-links a:not(.nav-cta):hover { color: var(--ink); background: rgba(16,24,40,0.05); }
.nav-cta { background: var(--accent); color: #fff !important; box-shadow: 0 8px 18px rgba(35,64,143,0.25); }
.nav-cta:hover { background: var(--accent-dark); }

.nav-toggle {
  display: none; width: 32px; height: 22px; position: relative;
  background: none; border: none; cursor: pointer; padding: 0; z-index: 70;
}
.nav-toggle span {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), top 0.3s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 10px; }
.nav-toggle span:nth-child(3) { top: 20px; }
.nav-toggle.is-open span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 55;
  background: var(--surface);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 110px 32px 48px;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu-links { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu-links a {
  display: block; color: var(--ink); font-size: 28px; font-weight: 700;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.mobile-menu-links a:last-child { color: var(--accent); }
.mobile-menu-footer { display: flex; flex-direction: column; gap: 20px; }
.mobile-menu-footer a:first-child { color: var(--accent); font-size: 15px; font-weight: 700; }
.mobile-menu-footer .btn { text-align: center; }

/* ---------- Hero: split layout, light ---------- */
.hero { position: relative; padding: 168px 0 96px; overflow: hidden; }
.hero .container {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); padding: 8px 16px; border-radius: 999px;
  margin-bottom: 24px;
}
.hero-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.hero h1 {
  font-size: clamp(34px, 4.6vw, 58px); font-weight: 800; line-height: 1.08;
  letter-spacing: -0.02em; margin: 0 0 22px; color: var(--ink);
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p {
  font-size: 17px; line-height: 1.7; color: var(--text-secondary);
  max-width: 480px; margin: 0 0 32px;
}
.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-cycle-item {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 14px;
  opacity: 0; transform: scale(0.8) translateY(10px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  pointer-events: none;
}
.hero-cycle-item.is-active { opacity: 1; transform: scale(1) translateY(0); }
.hero-cycle-item svg { width: 84px; height: 84px; }
.hero-badge {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px;
  background: rgba(255,255,255,0.94);
  color: var(--accent);
  box-shadow: 0 14px 28px rgba(12,22,56,0.22);
  z-index: 3;
  animation: floatY 5s var(--ease) infinite;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.hero-badge.is-active {
  background: var(--accent-ink); color: #fff;
  box-shadow: 0 16px 34px rgba(12,22,56,0.36);
  transform: scale(1.12);
}
.hero-badge svg { width: 24px; height: 24px; }
@keyframes checkPop { 0%, 40%, 100% { transform: scale(1); } 20% { transform: scale(1.35); } }
.scroll-cue {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-secondary); opacity: 0.6;
  animation: scrollCue 2.2s var(--ease) infinite;
}
.scroll-cue svg { width: 16px; height: 16px; }
@keyframes scrollCue { 0%, 100% { transform: translate(-50%, 0); opacity: 0.6; } 50% { transform: translate(-50%, 6px); opacity: 1; } }
@keyframes floatY { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce), (scripting: none) {
.hero-cycle-item { transition: none; }
}
@media (max-width: 900px) {
  .scroll-cue { display: none; }
}
.hero-blob {
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft) 0%, rgba(232,239,254,0) 70%);
  top: -120px; right: -160px;
  z-index: -1;
  pointer-events: none;
  animation: blobPulse 12s ease-in-out infinite;
}
@keyframes blobPulse { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.12; opacity: 0.75; } }
.hero-blob { transition: translate 0.3s var(--ease); }
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .hero-blob { animation: none; }
}

/* ---------- Sections ---------- */
section { padding: 100px 0; }
.section-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); padding: 6px 14px; border-radius: 999px; margin: 0 0 16px;
}
.section-title {
  font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; line-height: 1.12;
  letter-spacing: -0.02em; margin: 0 0 16px; max-width: 640px; color: var(--ink);
}
.section-lead {
  font-size: 16px; line-height: 1.7; color: var(--text-secondary);
  max-width: 620px; margin: 0 0 48px;
}
/* ---------- Services: alternating rows ---------- */
.service-rows { display: flex; flex-direction: column; gap: 20px; }
.service-row {
  display: grid; grid-template-columns: 72px 1fr; gap: 24px; align-items: flex-start;
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 32px; box-shadow: 0 4px 16px rgba(16,24,40,0.06);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.service-row:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(16,24,40,0.08); }
.service-icon-badge {
  width: 72px; height: 72px; border-radius: 20px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.service-row:hover .service-icon-badge { background: var(--accent); color: #fff; }
.service-icon-badge svg { width: 32px; height: 32px; }
.service-row h3 { font-size: 19px; font-weight: 800; margin: 0 0 8px; color: var(--ink); }
.service-row p { font-size: 15px; line-height: 1.65; color: var(--text-secondary); margin: 0; max-width: 640px; }

/* ---------- About / stat cards ---------- */
/* ---------- Vorher/Nachher compare slider ---------- */
.compare-points { display: flex; flex-direction: column; gap: 14px; }
.compare-points li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
.compare-points svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.compare-points--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; }
@media (max-width: 700px) { .compare-points--grid { grid-template-columns: 1fr; } }
.compare-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.compare-handle {
  position: absolute; top: 0; bottom: 0;
  width: 0;
  transform: translateX(-50%);
  pointer-events: none;
}
.compare-handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: 3px; margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(16,24,40,0.08);
}
.compare-range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
}
.about-section { background: var(--surface); }
.about-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.about-card {
  background: var(--bg); border-radius: var(--radius-lg); padding: 32px;
}
.about-card h3 { font-size: 17px; font-weight: 800; margin: 0 0 10px; color: var(--accent); }
.about-card p { font-size: 14px; line-height: 1.65; color: var(--text-secondary); margin: 0; }

/* ---------- USP / "Warum wir" grid ---------- */
.usp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.usp-card {
  background: var(--surface); border-radius: var(--radius-lg); padding: 30px;
  box-shadow: 0 4px 16px rgba(16,24,40,0.06);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.usp-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(16,24,40,0.08); }
.usp-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.usp-icon svg { width: 24px; height: 24px; }
.usp-card h3 { font-size: 17px; font-weight: 800; margin: 0 0 8px; color: var(--ink); }
.usp-card p { font-size: 14px; line-height: 1.65; color: var(--text-secondary); margin: 0; }

/* ---------- Tag list: compact sub-service chips ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag-list li {
  font-size: 12.5px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); padding: 6px 13px; border-radius: 999px;
}

/* ---------- Section intro (eyebrow + title + lead, standalone) ---------- */
/* ---------- Process steps ---------- */












/* ---------- FAQ accordion ---------- */
.faq-list { display: flex; flex-direction: column; gap: 14px; max-width: 780px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 26px; background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: 16px; font-weight: 700; color: var(--ink); text-align: left;
}
.faq-icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; background: var(--accent); border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.faq-icon::before { width: 14px; height: 2px; top: 8px; left: 2px; }
.faq-icon::after { width: 2px; height: 14px; top: 2px; left: 8px; }
.faq-item.is-open .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
.faq-answer-inner { padding: 0 26px 24px; font-size: 15px; line-height: 1.75; color: var(--text-secondary); }

/* ---------- Contact section: light card, not dark ---------- */
.contact-section { background: var(--bg); }
.contact-panel {
  background: var(--surface); border-radius: 32px; padding: 56px;
  box-shadow: 0 20px 60px rgba(16,24,40,0.06);
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px;
}
.contact-info { display: flex; flex-direction: column; gap: 28px; }
.contact-info-item h4 {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent); margin: 0 0 8px;
}
.contact-info-item p { font-size: 15px; line-height: 1.7; color: var(--ink); margin: 0; }
.contact-info-item a { color: var(--ink); transition: color 0.2s var(--ease); }
.contact-info-item a:hover { color: var(--accent); }

.contact-form { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 13px; font-weight: 700; color: var(--ink); }
.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"], .form-group textarea {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 16px; font-size: 15px; font-family: var(--font); color: var(--ink);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #9aa3b2; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--accent); background: #fff; }
.form-group textarea { resize: vertical; min-height: 110px; }
.form-check { flex-direction: row; align-items: flex-start; gap: 10px; }
.form-check input { margin-top: 4px; accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.form-check label { font-size: 13px; line-height: 1.6; color: var(--text-secondary); font-weight: 400; }
.form-check label a { color: var(--accent); font-weight: 600; }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form-status { font-size: 14px; margin: 4px 0 0; min-height: 20px; }
.form-status.is-success { color: var(--accent); }
.form-status.is-error { color: #c23434; }

/* ---------- Final CTA: one dark contrast block ---------- */
.cta-banner {
  background: linear-gradient(155deg, var(--accent-dark) 0%, #0f1f57 100%);
  border-radius: 32px;
  padding: 64px 48px;
  text-align: center;
  color: #fff;
}
.cta-banner h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; margin: 0 0 14px; }
.cta-banner p { font-size: 16px; color: rgba(255,255,255,0.75); margin: 0 0 30px; }
.cta-banner--split {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  text-align: left;
}
.cta-banner--split h2 { margin: 0 0 10px; }
.cta-banner--split p { margin: 0; max-width: 440px; }
.cta-banner-actions { display: flex; gap: 14px; flex-wrap: wrap; flex-shrink: 0; }
.btn-ghost-on-dark {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3);
}
.btn-ghost-on-dark:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
@media (max-width: 780px) {
  .cta-banner--split { flex-direction: column; text-align: center; }
  .cta-banner--split p { max-width: 100%; }
}

/* ---------- Confirmation page ---------- */
.page-hero { position: relative; overflow: hidden; background: var(--surface); padding: 168px 0 72px; }
.page-hero .hero-blob { top: -140px; right: -180px; }
.page-hero h1 { position: relative; font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; line-height: 1.12; margin: 0 0 18px; max-width: 720px; color: var(--ink); letter-spacing: -0.015em; }
.page-hero p { position: relative; font-size: 17px; line-height: 1.7; color: var(--text-secondary); max-width: 600px; margin: 0; }
.page-hero .section-eyebrow { position: relative; }

.confirm-hero { min-height: 66vh; min-height: 66svh; display: flex; align-items: center; padding: 160px 0; }
.confirm-hero .container { max-width: 560px; text-align: center; }
.confirm-hero h1 { max-width: none; }
.confirm-hero p { max-width: none; margin: 0 auto; }
.confirm-icon {
  width: 60px; height: 60px; margin: 0 auto 24px; border-radius: 18px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.confirm-icon svg { width: 28px; height: 28px; }

/* ---------- Legal content ---------- */
.legal-content { max-width: 760px; }
.legal-content h1 { margin: 0; }
.legal-content h2 { font-size: 19px; font-weight: 800; margin: 40px 0 12px; color: var(--ink); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 15px; font-weight: 700; margin: 24px 0 8px; color: var(--ink); }
.legal-content p { font-size: 14px; line-height: 1.8; color: var(--text-secondary); margin: 0 0 14px; }

/* ---------- Footer ---------- */
footer { background: var(--surface); border-top: 1px solid var(--border); padding: 56px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer-logo { margin: 0 0 14px; }
.footer-logo img { width: 200px; max-width: 100%; height: auto; }
.footer-grid p { font-size: 14px; line-height: 1.7; color: var(--text-secondary); margin: 0; }
.footer-col h4 { font-size: 12px; font-weight: 700; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); }
.footer-col a, .footer-col span { display: block; font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; transition: color 0.2s var(--ease); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; font-size: 13px; color: var(--text-secondary); }
.footer-bottom a { margin-left: 20px; transition: color 0.2s var(--ease); }
.footer-bottom a:hover { color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .hero { padding: 128px 0 64px; }
  .hero .container { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.hero-badge, .hero-check-card { display: none; }
.hero p { max-width: 100%; }
  .service-row { grid-template-columns: 1fr; }
  .about-cards { grid-template-columns: 1fr; }
  .usp-grid { grid-template-columns: 1fr; }

  .contact-panel { grid-template-columns: 1fr; padding: 32px 24px; gap: 32px; border-radius: 24px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .footer-bottom a { margin-left: 0; margin-right: 20px; }
  section { padding: 72px 0; }
  .page-hero { padding: 128px 0 48px; }
  .cta-banner { padding: 48px 24px; border-radius: 24px; }
}
@media (max-width: 560px) {

  .faq-question { padding: 18px 20px; font-size: 15px; }
  .faq-answer-inner { padding: 0 20px 20px; }
}

/* ======================================================================
   DESIGN-AUSBAU 2026-09-08
   Aufgesetzt auf den Entwurf: Farbtiefe, Bildeinsatz, Bewegung.
   Bewusst ans Dateiende gehaengt - was hier steht, gewinnt gegen die
   Regeln darueber. Alle Bewegung wird am Ende per prefers-reduced-motion
   wieder abgeschaltet.
   ====================================================================== */

:root {
  /* Tiefe Blautoene fuer dunkle Flaechen */
  --navy:        #0a2540;
  --navy-2:      #0d3f6e;
  --navy-3:      #14548c;
  --navy-rgb:    10, 37, 64;

  /* Heller Signalton aus der Logo-Familie - fuer Akzente, nie flaechig */
  --signal:      #38bdf8;
  --signal-warm: #7dd3fc;

  --schatten-s:  0 2px 8px rgba(10,37,64,0.06);
  --schatten-m:  0 12px 28px rgba(10,37,64,0.10);
  --schatten-l:  0 28px 60px rgba(10,37,64,0.18);

  --tempo:       0.55s;
}

/* ---------- Hero mit Foto ---------- */
.hero--foto {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex; align-items: center;
  padding: 150px 0 110px;
  overflow: hidden;
  background: var(--navy);
}
.hero--foto .container { display: block; position: relative; z-index: 2; }
.hero--foto .hero-blob { display: none; }

.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  animation: kenBurns 26s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  from { transform: scale(1.04) translate3d(0,0,0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}

/* Zwei Verlaufsschichten: unten dunkel fuer den Text, links dichter */
.hero-veil { position: absolute; inset: 0; z-index: 1; }
.hero-veil::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(var(--navy-rgb),0.94) 0%, rgba(var(--navy-rgb),0.80) 42%, rgba(var(--navy-rgb),0.42) 100%),
    linear-gradient(180deg, rgba(var(--navy-rgb),0.55) 0%, rgba(var(--navy-rgb),0.20) 45%, rgba(var(--navy-rgb),0.75) 100%);
}
/* feines Raster, gibt der Flaeche Struktur statt Leere */
.hero-veil::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(115deg, #000 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 62%);
  opacity: 0.5;
}

.hero--foto .hero-text { max-width: 680px; }
.hero--foto h1 { color: #fff; font-size: clamp(38px, 5.4vw, 66px); line-height: 1.03; letter-spacing: -0.03em; }
.hero--foto h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--signal-warm), var(--signal));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero--foto .hero-lead, .hero--foto > .container p:not(.hero-eyebrow) {
  color: rgba(255,255,255,0.82); font-size: 18px; max-width: 560px;
}
.hero--foto .hero-eyebrow {
  background: rgba(255,255,255,0.12); color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
}
.hero--foto .hero-eyebrow-dot { background: var(--signal); box-shadow: 0 0 0 4px rgba(56,189,248,0.25); }

/* ---------- Vertrauens-Chips statt erfundener Kennzahlen ---------- */
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 38px; }
.hero-trust li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px 11px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff; font-size: 14px; font-weight: 500;
  backdrop-filter: blur(8px);
  transition: background var(--tempo) var(--ease), transform var(--tempo) var(--ease);
}
.hero-trust li:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px); }
.hero-trust svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--signal); }

/* ---------- Buttons: Glanz beim Ueberfahren ---------- */
.btn { position: relative; overflow: hidden; }
.btn-primary { background: var(--accent); box-shadow: 0 10px 26px rgba(20,84,140,0.30); }
.btn-primary:hover { background: var(--accent-dark); box-shadow: 0 16px 34px rgba(20,84,140,0.38); }
.btn::after {
  content: ""; position: absolute; top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease);
}
.btn:hover::after { left: 130%; }
.hero--foto .btn-ghost {
  background: rgba(255,255,255,0.10); color: #fff;
  border: 1px solid rgba(255,255,255,0.30); backdrop-filter: blur(6px);
}
.hero--foto .btn-ghost:hover { background: rgba(255,255,255,0.20); }
.btn-arrow { transition: transform 0.35s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(5px); }

.hero--foto .scroll-cue { color: rgba(255,255,255,0.75); }

@media (max-width: 900px) {
  .hero--foto { min-height: auto; padding: 120px 0 72px; }
  .hero--foto .hero-text { max-width: 100%; }
  .hero-trust { gap: 8px; }
  .hero-trust li { font-size: 13px; padding: 9px 14px 9px 11px; }
}

/* ---------- Header ueber dem Foto-Hero ---------- */
body.fotokopf .nav:not(.is-stuck) {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
body.fotokopf .nav:not(.is-stuck) .nav-logo { color: #fff; }
body.fotokopf .nav:not(.is-stuck) .nav-mark { filter: brightness(0) invert(1); }
body.fotokopf .nav:not(.is-stuck) .nav-links a { color: rgba(255,255,255,0.88); }
body.fotokopf .nav:not(.is-stuck) .nav-links a:not(.nav-cta):hover {
  color: #fff; background: rgba(255,255,255,0.16);
}
body.fotokopf .nav:not(.is-stuck) .nav-cta {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.34);
  backdrop-filter: blur(6px); box-shadow: none;
}
body.fotokopf .nav:not(.is-stuck) .nav-cta:hover { background: rgba(255,255,255,0.28); }
body.fotokopf .nav:not(.is-stuck) .nav-toggle span { background: #fff; }

/* Beim Scrollen verdichtet sich die Leiste */
.nav.is-stuck {
  padding: 13px 0;
  background: rgba(255,255,255,0.88);
  border-bottom-color: var(--border);
  box-shadow: var(--schatten-s);
}

/* ---------- Hero-Overlay etwas oeffnen, das Foto soll wirken ---------- */
.hero-veil::before {
  background:
    linear-gradient(105deg, rgba(var(--navy-rgb),0.90) 0%, rgba(var(--navy-rgb),0.68) 46%, rgba(var(--navy-rgb),0.28) 100%),
    linear-gradient(180deg, rgba(var(--navy-rgb),0.45) 0%, rgba(var(--navy-rgb),0.12) 45%, rgba(var(--navy-rgb),0.68) 100%);
}

/* ---------- Leistungskarten mit Bild ---------- */
.leistungs-karten {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 46px;
}
.lk {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden;
  box-shadow: var(--schatten-s);
  transition: transform var(--tempo) var(--ease), box-shadow var(--tempo) var(--ease), border-color var(--tempo) var(--ease);
}
.lk:hover { transform: translateY(-7px); box-shadow: var(--schatten-l); border-color: rgba(20,84,140,0.28); }

.lk-bild { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--accent-soft); }
.lk-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.lk:hover .lk-bild img { transform: scale(1.07); }
.lk-bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,37,64,0) 45%, rgba(10,37,64,0.55) 100%);
}
.lk-nummer {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.92); color: var(--accent-dark);
  font-size: 13px; font-weight: 800;
  box-shadow: var(--schatten-s);
}
.lk-inhalt { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.lk-inhalt h3 { margin: 0 0 10px; font-size: 19px; letter-spacing: -0.01em; }
.lk-inhalt p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-secondary); }
/* Akzentlinie faehrt beim Ueberfahren ein */
.lk-inhalt::before {
  content: ""; display: block; width: 34px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--signal));
  margin-bottom: 16px;
  transition: width var(--tempo) var(--ease);
}
.lk:hover .lk-inhalt::before { width: 68px; }

/* ---------- Ablauf in vier Schritten ---------- */
.ablauf { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 50px; }
.ablauf::before {
  content: ""; position: absolute; top: 27px; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--signal));
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.5s var(--ease) 0.2s;
}
.ablauf.is-visible::before { transform: scaleX(1); }
.schritt { position: relative; text-align: center; }
.schritt-punkt {
  width: 54px; height: 54px; margin: 0 auto 20px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--accent);
  color: var(--accent); font-weight: 800; font-size: 17px;
  box-shadow: 0 0 0 7px rgba(20,84,140,0.08);
  transition: transform var(--tempo) var(--ease), background var(--tempo) var(--ease), color var(--tempo) var(--ease);
}
.schritt:hover .schritt-punkt { transform: scale(1.1); background: var(--accent); color: #fff; }
.schritt h3 { margin: 0 0 8px; font-size: 17px; }
.schritt p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }

/* ---------- Bildstrecke ---------- */
.strecke { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 42px; }
.strecke figure {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 16px; aspect-ratio: 4/3; background: var(--accent-soft);
}
.strecke img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.strecke figure:hover img { transform: scale(1.08); }
.strecke figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 30px 16px 14px; color: #fff; font-size: 13.5px; font-weight: 500;
  background: linear-gradient(180deg, rgba(10,37,64,0) 0%, rgba(10,37,64,0.82) 100%);
  transform: translateY(6px); opacity: 0.92;
  transition: transform var(--tempo) var(--ease), opacity var(--tempo) var(--ease);
}
.strecke figure:hover figcaption { transform: translateY(0); opacity: 1; }
.strecke figure:nth-child(1) { grid-column: span 2; aspect-ratio: 8/3; }

/* ---------- Dunkle Sektion ---------- */
.dunkel {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-2) 58%, var(--navy-3) 100%);
  color: #fff;
}
.dunkel::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(circle at 78% 22%, #000, transparent 68%);
  -webkit-mask-image: radial-gradient(circle at 78% 22%, #000, transparent 68%);
}
.dunkel .container { position: relative; z-index: 2; }
.dunkel .section-title, .dunkel h2, .dunkel h3 { color: #fff; }
.dunkel .section-lead, .dunkel p { color: rgba(255,255,255,0.80); }
.dunkel .section-eyebrow { color: var(--signal-warm); }

@media (max-width: 900px) {
  .leistungs-karten { grid-template-columns: 1fr; gap: 20px; }
  .ablauf { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .ablauf::before { display: none; }
  .strecke { grid-template-columns: 1fr 1fr; gap: 12px; }
  .strecke figure:nth-child(1) { grid-column: span 2; aspect-ratio: 16/9; }
}
@media (max-width: 560px) {
  .ablauf { grid-template-columns: 1fr; }
  .strecke { grid-template-columns: 1fr; }
  .strecke figure, .strecke figure:nth-child(1) { grid-column: auto; aspect-ratio: 4/3; }
}

/* ======================================================================
   AUSBAU 2 - Hero-Komposition, Verlaufsschrift, reichere Kacheln
   ====================================================================== */

/* ---------- Hero: zwei Spalten, rechts eine schwebende Komposition ---------- */
.hero--foto .container {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
.hero--foto .hero-text { max-width: 620px; }

.hero-panel { position: relative; justify-self: end; width: 100%; max-width: 420px; }

.hp-karte {
  position: relative; z-index: 2;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.24);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: 24px; padding: 30px 30px 26px;
  box-shadow: 0 28px 60px rgba(4,16,30,0.45);
  color: #fff;
  animation: schweben 7s ease-in-out infinite;
}
@keyframes schweben {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-9px); }
}
.hp-kopf { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600;
           text-transform: uppercase; letter-spacing: 0.07em; color: var(--signal-warm); margin-bottom: 16px; }
.hp-kopf svg { width: 16px; height: 16px; }
.hp-nummer { display: block; font-size: clamp(26px, 3vw, 33px); font-weight: 800; letter-spacing: -0.02em;
             color: #fff; margin-bottom: 6px; }
.hp-nummer:hover { color: var(--signal-warm); }
.hp-zeit { font-size: 14px; color: rgba(255,255,255,0.72); margin: 0 0 22px; }
.hp-karte .btn { width: 100%; text-align: center; }

.hp-liste { list-style: none; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,0.18); }
.hp-liste li { display: flex; align-items: center; gap: 10px; font-size: 14px;
               color: rgba(255,255,255,0.86); margin-bottom: 11px; }
.hp-liste li:last-child { margin-bottom: 0; }
.hp-liste svg { width: 16px; height: 16px; color: var(--signal); flex: 0 0 auto; }

/* kleine schwebende Marken um die Karte herum */
.hp-chip {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 15px; border-radius: 14px;
  background: rgba(255,255,255,0.94); color: var(--navy);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 16px 34px rgba(4,16,30,0.32);
}
.hp-chip svg { width: 15px; height: 15px; color: var(--accent); }
.hp-chip--1 { top: -20px; left: -26px;  animation: schweben 6s ease-in-out infinite 0.4s; }
.hp-chip--2 { bottom: 34px; right: -30px; animation: schweben 6.5s ease-in-out infinite 1.1s; }

/* weicher Lichtschein hinter der Karte */
.hero-panel::before {
  content: ""; position: absolute; inset: -14% -10% -14% -10%; z-index: 1;
  background: radial-gradient(circle at 50% 45%, rgba(56,189,248,0.30), transparent 68%);
  filter: blur(14px);
}

/* ---------- Verlaufsschrift fuer Akzentwoerter ---------- */
.verlauf {
  background: linear-gradient(96deg, var(--accent) 0%, var(--navy-3) 45%, var(--signal) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.dunkel .verlauf, .hero--foto .verlauf {
  background: linear-gradient(96deg, var(--signal-warm) 0%, var(--signal) 55%, #bae6fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-title em { font-style: normal; }

/* ---------- Kacheln mit mehr Substanz ---------- */
.lk::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 100% 0%, rgba(56,189,248,0.10), transparent 55%);
  opacity: 0; transition: opacity var(--tempo) var(--ease);
}
.lk:hover::before { opacity: 1; }
.lk-inhalt { position: relative; z-index: 1; }
.lk-nummer {
  background: linear-gradient(135deg, var(--accent), var(--navy-2));
  color: #fff; font-size: 12px; letter-spacing: 0.04em;
  width: auto; padding: 0 11px; height: 30px; border-radius: 9px;
}

/* Schrittplan: grosse Geisterzahl im Hintergrund */
.schritt { padding: 26px 18px 24px; border-radius: 20px; overflow: hidden;
           background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
           transition: background var(--tempo) var(--ease), transform var(--tempo) var(--ease); }
.schritt:hover { background: rgba(255,255,255,0.10); transform: translateY(-5px); }
.schritt::after {
  content: attr(data-nr); position: absolute; right: 10px; bottom: -20px;
  font-size: 104px; font-weight: 800; line-height: 1;
  color: rgba(255,255,255,0.07); pointer-events: none;
}
.ablauf::before { top: 53px; left: 12%; right: 12%; }

/* ---------- Sektionen: sanfter Farbverlauf statt flaechigem Weiss ---------- */
#leistungen { background: linear-gradient(180deg, var(--bg) 0%, #ffffff 100%); }
#einblicke  { background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%); }

@media (max-width: 1000px) {
  .hero--foto .container { grid-template-columns: 1fr; gap: 44px; }
  .hero-panel { justify-self: stretch; max-width: 100%; }
  .hp-chip--1 { left: 0; top: -18px; }
  .hp-chip--2 { right: 0; bottom: 20px; }
}
@media (max-width: 560px) {
  .hp-chip { display: none; }
  .hp-karte { padding: 24px 22px; }
}

/* Feinschliff Hero-Typografie: passt jetzt neben die Karte */
.hero--foto h1 { font-size: clamp(34px, 4.1vw, 55px); line-height: 1.06; }
.hero--foto .hero-lead { font-size: 17px; max-width: 520px; }
.hero-trust { gap: 8px; margin-top: 30px; }
.hero-trust li { font-size: 13px; padding: 9px 15px 9px 12px; }
.hero-trust svg { width: 15px; height: 15px; }

/* ---------- USP-Karten mit mehr Charakter ---------- */
.usp-card {
  position: relative; overflow: hidden;
  border-radius: 20px; padding: 30px 26px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--schatten-s);
  transition: transform var(--tempo) var(--ease), box-shadow var(--tempo) var(--ease), border-color var(--tempo) var(--ease);
}
.usp-card::after {
  content: ""; position: absolute; right: -46px; top: -46px;
  width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,0.16), transparent 68%);
  opacity: 0; transition: opacity var(--tempo) var(--ease), transform var(--tempo) var(--ease);
}
.usp-card:hover { transform: translateY(-6px); box-shadow: var(--schatten-m); border-color: rgba(20,84,140,0.26); }
.usp-card:hover::after { opacity: 1; transform: scale(1.15); }
.usp-icon {
  width: 50px; height: 50px; border-radius: 15px;
  display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--accent), var(--navy-2));
  color: #fff; box-shadow: 0 10px 22px rgba(20,84,140,0.28);
  transition: transform var(--tempo) var(--ease);
}
.usp-card:hover .usp-icon { transform: translateY(-3px) rotate(-5deg); }
.usp-icon svg { width: 23px; height: 23px; }

/* ---------- Ueber-uns-Block mit Bild ---------- */
.ueber-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ueber-bild { position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--schatten-l); }
.ueber-bild img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10;
                  transition: transform 1.1s var(--ease); }
.ueber-bild:hover img { transform: scale(1.05); }
.ueber-marke {
  position: absolute; left: 22px; bottom: 22px; z-index: 2;
  background: rgba(255,255,255,0.94); border-radius: 16px; padding: 14px 20px;
  box-shadow: var(--schatten-m);
}
.ueber-marke strong { display: block; font-size: 20px; letter-spacing: -0.02em; color: var(--accent-dark); }
.ueber-marke span { font-size: 13px; color: var(--text-secondary); }

/* ---------- CTA-Banner mit Verlauf statt Flaeche ---------- */
.cta-banner {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
  border-radius: 28px;
}
.cta-banner::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at 88% 12%, #000, transparent 62%);
  -webkit-mask-image: radial-gradient(circle at 88% 12%, #000, transparent 62%);
}
.cta-banner > * { position: relative; z-index: 2; }

@media (max-width: 900px) {
  .ueber-split { grid-template-columns: 1fr; gap: 30px; }
  .ueber-bild { order: -1; }
}

/* ======================================================================
   AUSBAU 3 - Koepfe der Unterseiten
   Bisher weisse Flaeche mit schwarzer Schrift. Jetzt derselbe tiefe
   Blauverlauf wie auf der Startseite, damit die Seiten zusammengehoeren.
   ====================================================================== */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 62%, var(--navy-3) 100%);
  padding: 178px 0 92px;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(circle at 82% 18%, #000, transparent 66%);
  -webkit-mask-image: radial-gradient(circle at 82% 18%, #000, transparent 66%);
}
/* weicher Lichtkegel oben rechts */
.page-hero::after {
  content: ""; position: absolute; z-index: 0;
  top: -30%; right: -12%; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,0.22), transparent 66%);
  filter: blur(10px);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .hero-blob { display: none; }
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,0.80); font-size: 17.5px; }
.page-hero .section-eyebrow {
  background: rgba(255,255,255,0.12); color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
}
.page-hero .verlauf {
  background: linear-gradient(96deg, var(--signal-warm), var(--signal) 60%, #bae6fd);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* weiche Kante zum folgenden Abschnitt */
.page-hero + section { position: relative; }

/* Danke-Seite: heller Kopf bleibt, der Haken soll leuchten */
.confirm-hero { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); }
.confirm-hero h1, .confirm-hero p { color: #fff; }
.confirm-hero p { color: rgba(255,255,255,0.80); }
.confirm-icon {
  background: rgba(255,255,255,0.12); color: var(--signal);
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow: 0 0 0 10px rgba(56,189,248,0.10);
}

@media (max-width: 900px) {
  .page-hero { padding: 132px 0 60px; }
  .page-hero::after { width: 380px; height: 380px; }
}

/* Referenzen: drei Spalten, auch bei sechs Karten */
.leistungs-karten--sechs { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .leistungs-karten--sechs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .leistungs-karten--sechs { grid-template-columns: 1fr; } }

/* ---------- Leistungszeilen als Karten mit Verlaufs-Icon ---------- */
.service-row {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 22px; padding: 32px 34px;
  box-shadow: var(--schatten-s);
  transition: transform var(--tempo) var(--ease), box-shadow var(--tempo) var(--ease), border-color var(--tempo) var(--ease);
}
.service-row:hover { transform: translateY(-5px); box-shadow: var(--schatten-m); border-color: rgba(20,84,140,0.24); }
.service-row::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--signal));
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--tempo) var(--ease);
}
.service-row:hover::after { transform: scaleY(1); }
.service-icon-badge {
  background: linear-gradient(135deg, var(--accent), var(--navy-2)) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(20,84,140,0.26);
  transition: transform var(--tempo) var(--ease);
}
.service-row:hover .service-icon-badge { transform: rotate(-6deg) scale(1.06); }
.tag-list li {
  background: var(--accent-soft); color: var(--accent-dark);
  border: 1px solid rgba(20,84,140,0.16);
  transition: background var(--tempo) var(--ease), transform var(--tempo) var(--ease);
}
.tag-list li:hover { background: #d7e6f3; transform: translateY(-2px); }

/* ---------- Bewegung respektiert die Systemeinstellung ---------- */
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .hero-media img,
  .hp-karte, .hp-chip--1, .hp-chip--2 { animation: none !important; }
  .ablauf::before { transition: none !important; transform: scaleX(1) !important; }
  .lk, .usp-card, .service-row, .strecke figure img, .lk-bild img, .ueber-bild img,
  .btn::after, .schritt, .schritt-punkt {
    transition: none !important; transform: none !important;
  }
}

/* ---------- Logo in der Navigation: feste Groesse ----------
   Als img in einem Flex-Container braucht die Bildmarke verbindliche
   Masse, sonst zieht sie sich auf ihre natuerliche Groesse auf. */
.nav .nav-brand img.nav-mark {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px; max-width: 34px;
  min-height: 34px; max-height: 34px;
  flex: 0 0 34px;
  object-fit: contain;
  display: block;
}
.nav.is-stuck .nav-brand img.nav-mark { width: 30px !important; height: 30px !important;
  min-width: 30px; max-width: 30px; min-height: 30px; max-height: 30px; flex: 0 0 30px; }
.footer-logo img { width: 200px !important; height: auto !important; }

/* ======================================================================
   FEEDBACK-RUNDE 1 (2026-09-08) - Startseite Desktop + Mobil
   ====================================================================== */

/* ---------- Eyebrow: kein Kaestchen mehr, sondern Strich + Text ----------
   Der helle Pillen-Hintergrund war auf jedem dunklen Verlauf unlesbar
   und schob den Text 14px vom linken Rand weg. */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; padding: 0; border-radius: 0;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 14px;
}
.section-eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--signal));
}
.dunkel .section-eyebrow, .cta-banner .section-eyebrow, .page-hero .section-eyebrow, .confirm-hero .section-eyebrow {
  color: var(--signal-warm); background: none; border: 0; padding: 0;
}
.dunkel .section-eyebrow::before, .cta-banner .section-eyebrow::before,
.page-hero .section-eyebrow::before, .confirm-hero .section-eyebrow::before {
  background: linear-gradient(90deg, var(--signal-warm), #fff);
}

/* ---------- Hero: Chip in die Kartenecke, nur zwei Vertrauenspunkte ---------- */
.hp-chip--2 { bottom: -18px; right: -22px; }

/* ---------- Bildstrecke: sauberes 2x3, nichts haengt mehr ---------- */
.strecke figure:nth-child(1) { grid-column: auto; aspect-ratio: 4/3; }

/* ---------- Ueber-uns-Marke: oben rechts, glasig ---------- */
.ueber-marke {
  left: auto; right: 18px; top: 18px; bottom: auto;
  background: rgba(10,37,64,0.55); color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 11px 16px; border-radius: 14px; box-shadow: none;
}
.ueber-marke strong { color: #fff; font-size: 15px; }
.ueber-marke span { color: rgba(255,255,255,0.78); font-size: 12px; }

/* ---------- CTA-Banner: klar zweigeteilt, Buttons in einer Glasbox ---------- */
.cta-banner { padding: 52px 56px; text-align: left; }
.cta-banner--split { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 44px; align-items: center; }
.cta-banner--split h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.12; margin: 0 0 12px; }
.cta-banner--split p { margin: 0; max-width: 520px; font-size: 16px; }
.cta-banner-actions {
  display: flex; flex-direction: column; gap: 12px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px; padding: 22px;
}
.cta-banner-actions .btn { width: 100%; text-align: center; }
.btn-on-dark { background: #fff; color: var(--navy); box-shadow: 0 10px 24px rgba(0,0,0,0.25); }
.btn-on-dark:hover { background: var(--signal-warm); color: var(--navy); }
.btn-ghost-on-dark { background: rgba(255,255,255,0.08); }
.btn-ghost-on-dark:hover { background: rgba(255,255,255,0.18); }

/* ---------- Kontakt-Sektion: Platz nutzen mit Kontaktkacheln ---------- */
.kontakt-block {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center;
}
.kontakt-kacheln { display: grid; gap: 12px; }
.kk {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px; padding: 16px 18px; color: #fff;
  transition: background var(--tempo) var(--ease), transform var(--tempo) var(--ease);
}
.kk:hover { background: rgba(255,255,255,0.15); transform: translateX(4px); }
.kk-icon {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.14); color: var(--signal-warm);
}
.kk-icon svg { width: 20px; height: 20px; }
.kk small { display: block; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-bottom: 2px; }
.kk strong { font-size: 16px; font-weight: 700; }
.kontakt-block .cta-banner-actions { background: none; border: 0; padding: 0; flex-direction: row; margin-top: 26px; }
.kontakt-block .cta-banner-actions .btn { width: auto; }

/* ---------- FAQ: volle Breite, zwei Spalten ---------- */
.faq-list { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.faq-item { border-radius: 16px; transition: box-shadow var(--tempo) var(--ease), border-color var(--tempo) var(--ease); }
.faq-item:hover, .faq-item.is-open { box-shadow: var(--schatten-m); border-color: rgba(20,84,140,0.24); }
.faq-question { padding: 20px 24px; font-size: 15.5px; }

/* ---------- Footer-Logo kleiner ---------- */
.footer-logo img { width: 150px !important; }

/* ======================================================================
   MOBIL
   ====================================================================== */
@media (max-width: 900px) {
  /* Hero: kompakter Kopf */
  .hero--foto { padding: 96px 0 56px; }
  .hero--foto .container { gap: 26px; }
  .hero--foto .hero-eyebrow { font-size: 12px; padding: 7px 13px; white-space: nowrap; margin-bottom: 16px; }
  .hero--foto h1 { font-size: clamp(30px, 8.6vw, 38px); line-height: 1.08; margin-bottom: 14px; }
  .hero--foto .hero-lead { font-size: 15.5px; margin-bottom: 20px; }
  .hero--foto .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero--foto .hero-actions .btn { width: 100%; text-align: center; padding: 13px 12px; font-size: 14px; white-space: nowrap; }
  .hero-trust { margin-top: 18px; }

  /* Karte: nur Nummer, Zeit, Button */
  .hp-kopf, .hp-liste { display: none; }
  .hp-karte { padding: 20px 22px; animation: none; }
  .hp-nummer { font-size: 26px; margin-bottom: 4px; }
  .hp-zeit { margin-bottom: 14px; font-size: 13.5px; }
  .hero-panel::before { display: none; }

  /* Ueber-uns-Marke kleiner */
  .ueber-marke { right: 12px; top: 12px; padding: 8px 12px; }
  .ueber-marke strong { font-size: 13px; }
  .ueber-marke span { font-size: 11px; }

  /* Banner und Kontakt untereinander */
  .cta-banner { padding: 36px 24px; }
  .cta-banner--split { grid-template-columns: 1fr; gap: 24px; text-align: left; }
  .cta-banner-actions { padding: 16px; }
  .kontakt-block { grid-template-columns: 1fr; gap: 24px; }
  .kontakt-block .cta-banner-actions { flex-direction: column; margin-top: 20px; }
  .kontakt-block .cta-banner-actions .btn { width: 100%; }

  .faq-list { grid-template-columns: 1fr; }
  .footer-logo img { width: 130px !important; }
}

/* Ablauf mobil: eine Spalte, Punkt links, Text rechts, Linie laeuft mit */
@media (max-width: 560px) {
  .ablauf { gap: 14px; margin-top: 34px; }
  .ablauf::before {
    display: block; top: 30px; bottom: 30px; left: 45px; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--accent), var(--signal));
    transform: scaleY(0); transform-origin: top;
  }
  .ablauf.is-visible::before { transform: scaleY(1); }
  .schritt { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; text-align: left; align-items: start; padding: 18px 18px 18px 22px; }
  .schritt-punkt { width: 44px; height: 44px; margin: 0; font-size: 15px; grid-row: span 2; position: relative; z-index: 2; }
  .schritt h3 { margin: 6px 0 4px; }
  .schritt::after { font-size: 82px; bottom: -14px; right: 6px; }
}

/* 404 und andere page-hero-Seiten mit Hero-Bausteinen */
.page-hero .hero-eyebrow { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.22); }
.page-hero .hero-eyebrow-dot { background: var(--signal); }
.page-hero .hero-lead { color: rgba(255,255,255,0.82); font-size: 17px; max-width: 560px; margin-bottom: 26px; }
.page-hero .btn-ghost { background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.30); }
.page-hero .btn-ghost:hover { background: rgba(255,255,255,0.20); }

/* ======================================================================
   FEEDBACK-RUNDE 1 - Unterseiten im Stil der Startseite
   ====================================================================== */

/* ---------- Leistungszeilen mit Bildkopf ---------- */
.service-row { display: grid; grid-template-columns: 260px 1fr; gap: 0; padding: 0; align-items: stretch; }
.service-row .sr-bild { position: relative; overflow: hidden; min-height: 100%; background: var(--accent-soft); }
.service-row .sr-bild img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform 1s var(--ease); }
.service-row:hover .sr-bild img { transform: scale(1.06); }
.service-row .sr-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,37,64,0) 60%, rgba(10,37,64,0.18)); }
.service-row .sr-text { padding: 30px 34px 30px 30px; display: grid; grid-template-columns: 60px 1fr; column-gap: 20px; align-items: start; }
.service-row .service-icon-badge { width: 60px; height: 60px; border-radius: 16px; }
.service-row .service-icon-badge svg { width: 26px; height: 26px; }
.service-row h3 { margin: 4px 0 8px; }

/* ---------- Glas-Karten auf dunklen Sektionen ---------- */
.dunkel .usp-card {
  background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); box-shadow: none;
}
.dunkel .usp-card:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.28); box-shadow: none; }
.dunkel .usp-card h3 { color: #fff; }
.dunkel .usp-card p { color: rgba(255,255,255,0.78); }
.dunkel .usp-icon { background: rgba(255,255,255,0.14); box-shadow: none; color: var(--signal-warm); }

/* ---------- Prozess-Schritte: Geisterzahl, Verlaufs-Nummer ---------- */





/* ---------- Kontaktseite: Info-Spalte als dunkle Karte ---------- */
.contact-panel { padding: 0; overflow: hidden; border-radius: 28px; grid-template-columns: 0.85fr 1.15fr; gap: 0; }
.contact-info {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 70%, var(--navy-3) 100%);
  color: #fff; padding: 44px 40px; gap: 22px; position: relative; overflow: hidden;
}
.contact-info::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px); background-size: 26px 26px;
  mask-image: radial-gradient(circle at 20% 0%, #000, transparent 60%);
  -webkit-mask-image: radial-gradient(circle at 20% 0%, #000, transparent 60%);
}
.contact-info-item { position: relative; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); }
.contact-info-item h4 { color: var(--signal-warm) !important; font-size: 11.5px !important; letter-spacing: 0.09em; text-transform: uppercase; margin: 0 0 6px !important; }
.contact-info-item p, .contact-info-item a { color: rgba(255,255,255,0.88) !important; font-size: 15px; }
.contact-info-item a:hover { color: #fff !important; }
.contact-form { padding: 44px 40px; }

@media (max-width: 900px) {
  .service-row { grid-template-columns: 1fr; }
  .service-row .sr-bild { aspect-ratio: 16/9; min-height: 0; }
  .service-row .sr-bild img { position: static; }
  .service-row .sr-text { padding: 22px 20px 24px; grid-template-columns: 44px 1fr; column-gap: 14px; }
  .service-row .service-icon-badge { width: 44px; height: 44px; }
  .service-row p { font-size: 14.5px; }
  .tag-list { gap: 6px; margin-top: 12px; }
  .tag-list li { font-size: 11.5px; padding: 4px 10px; }
  .contact-panel { grid-template-columns: 1fr; padding: 0; }
  .contact-info { padding: 26px 22px; gap: 12px; }
  .contact-info-item { padding: 12px 14px; }
  .contact-form { padding: 26px 20px 30px; }

}

/* Verlaufswort auf den blauen Bannern: hell, wie auf allen dunklen Flaechen */
.cta-banner .verlauf {
  background: linear-gradient(96deg, var(--signal-warm) 0%, var(--signal) 55%, #bae6fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Footer-Wortmarke: ganzes Bild zeigen, Hoehe folgt dem Seitenverhaeltnis 2:1 */
.footer-logo img {
  width: 160px !important; height: auto !important;
  aspect-ratio: 2 / 1; object-fit: contain !important; display: block;
}
@media (max-width: 900px) { .footer-logo img { width: 140px !important; } }

/* ---------- Mobil-Hero: entspannt statt gequetscht ---------- */
.nur-mobil { display: none; }
@media (max-width: 900px) {
  .nur-mobil { display: inline-block; }
  .nur-desktop { display: none !important; }

  .hero--foto { padding: 112px 0 72px; min-height: min(92svh, 760px); }
  .hero--foto .container { gap: 0; }
  .hero-panel { display: none; }                 /* Karte doppelt den CTA, weg damit */

  .hero--foto .hero-eyebrow { margin-bottom: 22px; }
  .hero--foto h1 { font-size: clamp(32px, 9vw, 40px); line-height: 1.1; margin-bottom: 18px; }
  .hero--foto .hero-lead { font-size: 16px; line-height: 1.65; margin-bottom: 30px; }
  .hero--foto .hero-actions { gap: 12px; }
  .hero--foto .hero-actions .btn { padding: 15px 12px; font-size: 15px; }
  .hero-trust { margin-top: 30px; gap: 10px; }
  .hero-trust li { padding: 11px 16px 11px 13px; font-size: 13.5px; }
}
@media (max-width: 340px) {
  .hero--foto .hero-actions { grid-template-columns: 1fr; }
}

/* Mobil-Hero-Buttons: laengerer Text bekommt mehr Spalte, nichts wird angeschnitten */
@media (max-width: 900px) {
  .hero--foto .hero-actions { grid-template-columns: 1.18fr 0.82fr; gap: 10px; }
  .hero--foto .hero-actions .btn { font-size: 14px; padding: 15px 8px; letter-spacing: -0.01em; }
}

/* ======================================================================
   MOBIL-FEINSCHLIFF (2026-09-08)
   Ergebnis der Diagnose ueber alle zehn Seiten bei 375 px.
   ====================================================================== */
@media (max-width: 900px) {
  /* 1) Sektionsabstaende: 144 px -> 112 px je Sektion */
  section { padding: 56px 0; }
  .page-hero { padding: 118px 0 52px; }
  .hero--foto { padding: 104px 0 64px; }
  .section-title { margin-bottom: 12px; }
  .section-lead { margin-bottom: 4px; }

  /* 2) Tippziele auf mindestens 44 px */
  .nav-toggle { width: 44px; height: 44px; padding: 11px 6px; margin-right: -6px; box-sizing: border-box; }
  .nav-toggle span { left: 6px; right: 6px; }
  .footer-col a { padding: 7px 0; margin-bottom: 0; }
  .footer-bottom a { padding: 8px 0; display: inline-block; }
  .contact-info-item a { display: inline-block; padding: 4px 0; }
  .form-check label a { padding: 2px 0; }
  .hp-nummer, .kk { min-height: 44px; }

  /* 3) Schrift nicht unter 12,5 px */
  .tag-list li { font-size: 12.5px; padding: 5px 11px; }
  .ueber-marke span { font-size: 12.5px; }
  .kk small { font-size: 12.5px; }
  .hero--foto .hero-eyebrow { font-size: 12.5px; }

  /* 4) Karten kompakter, ohne Text zu verlieren */
  .usp-card { padding: 24px 22px; }
  .usp-icon { width: 44px; height: 44px; border-radius: 13px; margin-bottom: 14px; }
  .usp-icon svg { width: 20px; height: 20px; }
  .lk-inhalt { padding: 20px 20px 22px; }
  .lk-inhalt::before { margin-bottom: 12px; }
  .faq-question { padding: 18px 20px; font-size: 15px; }
  .faq-answer-inner { padding: 0 20px 20px; }
  .schritt { padding: 16px 16px 16px 20px; }
  .cta-banner { padding: 32px 22px; }
  .ueber-split { gap: 22px; }
}
@media (max-width: 640px) {
  /* Bildkarten mobil flacher: 4:3 -> 16:10, spart je Karte rund 60 px */
  .lk-bild { aspect-ratio: 16 / 10; }
  .strecke figure { aspect-ratio: 16 / 10; }
  .ueber-bild img { aspect-ratio: 16 / 10; }
}

/* Footer mobil: Navigation zweispaltig, Links 40 px hoch */
@media (max-width: 900px) {
  .footer-col a { padding: 10px 0; }
  .footer-col:has(a[href="leistungen.html"]) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .footer-col:has(a[href="leistungen.html"]) h4 { grid-column: 1 / -1; }
}

/* ---------- Kontaktformular auf der Startseite ---------- */
/* ======================================================================
   ORTSSEITEN (2026-09-08)
   ====================================================================== */
.orte-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.orte-chips a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border);
  transition: transform var(--tempo) var(--ease), border-color var(--tempo) var(--ease), background var(--tempo) var(--ease);
}
.orte-chips a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.orte-chips a:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--accent-soft); }

.check-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; max-width: 900px; }
.check-liste li { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 14px;
                  background: var(--surface); border: 1px solid var(--border); font-size: 15px; line-height: 1.5; }
.check-liste svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent); margin-top: 3px; }

.preis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.preis-karte { position: relative; overflow: hidden; padding: 28px 26px 26px; border-radius: 20px;
               background: var(--surface); border: 1px solid var(--border); box-shadow: var(--schatten-s); }
.preis-nr { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 12px; }
.preis-karte h3 { margin: 0 0 8px; font-size: 17px; }
.preis-karte p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }
.preis-karte::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%;
                      background: radial-gradient(circle, rgba(56,189,248,0.14), transparent 68%); }

.ablauf--3 { grid-template-columns: repeat(3, 1fr); }
.ablauf--3::before { left: 17%; right: 17%; }
.strecke--2 { grid-template-columns: 1fr 1fr; }
.strecke--2 figure { aspect-ratio: 16 / 10; }
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; }

@media (max-width: 900px) {
  .check-liste { grid-template-columns: 1fr; }
  .preis-grid { grid-template-columns: 1fr; }
  .ablauf--3 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-col:has(a[href^="entruempelung-"]) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .footer-col:has(a[href^="entruempelung-"]) h4 { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .ablauf--3 { grid-template-columns: 1fr; } .strecke--2 { grid-template-columns: 1fr; } }

/* ======================================================================
   FEEDBACK-RUNDE 2 (2026-09-08)
   ====================================================================== */

/* ---------- Kein halb leeres Kachelraster mehr ---------- */
.usp-grid--vier { grid-template-columns: repeat(2, 1fr); }

/* ---------- Ortsliste: gleichmaessiges Raster statt haengender Zeile ---------- */
.orte-chips {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 10px;
}
.orte-chips a {
  justify-content: center; text-align: center; padding: 14px 12px;
  font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.orte-chip--heim {
  background: var(--accent-soft) !important; border-color: rgba(20,84,140,0.28) !important;
  color: var(--accent-dark) !important; font-weight: 700;
}
.orte-chip--heim::before { background: var(--accent-dark) !important; }
.orte-chip--heim:hover { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.orte-chip--heim:hover::before { background: #fff !important; }

/* ---------- Brotkrumen: Rueckweg auf jeder Ortsseite ---------- */
.brotkrumen {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 26px; font-size: 13.5px; color: rgba(255,255,255,0.62);
}
.brotkrumen a {
  color: rgba(255,255,255,0.88); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.28);
  transition: color var(--tempo) var(--ease), border-color var(--tempo) var(--ease);
}
.brotkrumen a:hover { color: #fff; border-color: #fff; }
.brotkrumen span[aria-current] { color: rgba(255,255,255,0.62); }

/* ---------- Anfrage: eigener Abschnitt statt schwebendem Kasten ---------- */
.anfrage-sektion { background: var(--bg); border-top: 1px solid var(--border); }
.anfrage-kopf { max-width: 640px; margin: 0 0 38px; }
.anfrage-sektion .contact-form { padding: 0; max-width: 900px; }
.anfrage-sektion .form-group label {
  font-size: 13px; font-weight: 700; letter-spacing: 0.03em; color: var(--text-secondary);
}
.anfrage-sektion .contact-form input[type="text"],
.anfrage-sektion .contact-form input[type="email"],
.anfrage-sektion .contact-form input[type="tel"],
.anfrage-sektion .contact-form textarea {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  transition: border-color var(--tempo) var(--ease), box-shadow var(--tempo) var(--ease);
}
.anfrage-sektion .contact-form input:focus,
.anfrage-sektion .contact-form textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px rgba(20,84,140,0.12); outline: none;
}
.anfrage-sektion .btn-submit { padding: 15px 38px; }

/* Kontaktblock darueber: nur noch ein Weg pro Kanal */
.kontakt-block .cta-banner-actions { margin-top: 24px; }
.kontakt-block .cta-banner-actions .btn { width: auto; }

@media (max-width: 900px) {
  .orte-chips { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .orte-chips a { padding: 13px 10px; font-size: 14px; }
  .usp-grid--vier { grid-template-columns: 1fr; }
  .brotkrumen { margin-bottom: 18px; font-size: 13px; }
  .anfrage-kopf { margin-bottom: 24px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .orte-chips { grid-template-columns: repeat(4, 1fr); }
}

/* Sprunglink: nur sichtbar, wenn er den Fokus hat */
.sprunglink {
  position: fixed; left: 12px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; padding: 12px 20px;
  border-radius: 0 0 12px 12px; font-size: 14px; font-weight: 600;
  transform: translateY(-130%);
  transition: transform 0.2s var(--ease);
}
.sprunglink:focus, .sprunglink:focus-visible {
  transform: translateY(0); outline: 2px solid #fff; outline-offset: -4px;
}
.footer-heading {
  font-size: 12px; font-weight: 700; margin: 0 0 12px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink);
}
/* Sichtbarer Fokus fuer Tastaturbedienung */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}

/* Kontaktkarten auf der Kontaktseite (frueher h4) */
.ci-titel { color: var(--signal-warm) !important; font-size: 11.5px !important;
  letter-spacing: 0.09em; text-transform: uppercase; margin: 0 0 6px !important; font-weight: 700; }

/* ======================================================================
   ANKERSPRÜNGE
   overflow-x gehoert auf html, nicht auf body: auf dem body macht es den
   Koerper zum Scrollcontainer, wodurch der Browser Sprungmarken beim
   Seitenaufruf nicht mehr anspringt. "clip" schneidet ab, ohne einen
   Scrollcontainer zu erzeugen.
   ====================================================================== */
html { overflow-x: clip; }

/* Die feste Kopfleiste darf das Sprungziel nicht verdecken */
:target { scroll-margin-top: 104px; }
section[id], main[id], .faq-item { scroll-margin-top: 104px; }
@media (max-width: 900px) {
  :target, section[id], main[id], .faq-item { scroll-margin-top: 84px; }
}

/* ======================================================================
   DATENSCHUTZHINWEIS
   Kein Zustimmungsdialog, sondern ein Hinweis: die Seite setzt keine
   Tracking-Cookies, es gibt also nichts abzufragen.
   ====================================================================== */
.hinweis-banner {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 90;
  max-width: 660px; margin: 0 auto;
  background: linear-gradient(135deg, rgba(10,37,64,0.97), rgba(13,63,110,0.97));
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: rgba(255,255,255,0.88);
  border-radius: 18px; padding: 20px 24px;
  box-shadow: 0 24px 60px rgba(4,16,30,0.45);
  transform: translateY(150%); opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.hinweis-banner.is-visible { transform: translateY(0); opacity: 1; }
.hinweis-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hinweis-icon {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.12); color: var(--signal-warm);
}
.hinweis-icon svg { width: 21px; height: 21px; }
.hinweis-banner p { margin: 0; font-size: 13.5px; line-height: 1.6; flex: 1; min-width: 200px; }
.hinweis-banner a { color: var(--signal-warm); text-decoration: underline; text-underline-offset: 2px; }
.hinweis-banner a:hover { color: #fff; }
.hinweis-btn { flex-shrink: 0; padding: 11px 26px; font-size: 13.5px; white-space: nowrap; }

@media (max-width: 640px) {
  .hinweis-banner { left: 12px; right: 12px; bottom: 12px; padding: 18px 18px 20px; border-radius: 16px; }
  .hinweis-inner { gap: 14px; }
  .hinweis-icon { width: 36px; height: 36px; border-radius: 10px; }
  .hinweis-icon svg { width: 18px; height: 18px; }
  .hinweis-banner p { min-width: 0; flex: 1 1 100%; order: 2; font-size: 13px; }
  .hinweis-btn { width: 100%; order: 3; text-align: center; }
}
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .hinweis-banner { transition: opacity 0.3s ease; transform: none; }
}

/* Footer-Marke vorübergehend als Bildmarke plus Schriftzug:
   die alte Wortmarke trägt noch den früheren Namen. */
.footer-logo--text { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.footer-logo--text .footer-mark { width: 34px !important; height: 34px !important; flex: 0 0 34px; object-fit: contain; }
.footer-logo--text span {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
  line-height: 1.22;          /* erbte sonst 1,7 vom Fliesstext - bei zwei Zeilen viel zu locker */
}
@media (max-width: 900px) {
  .footer-logo--text .footer-mark { width: 30px !important; height: 30px !important; flex: 0 0 30px; }
  .footer-logo--text span { font-size: 14px; }
}

/* ======================================================================
   ANFRAGE-ABSCHNITT: zwei Spalten statt linksbündigem Formular
   Vorher stand das Formular 900 px breit am linken Rand, rechts blieben
   236 px leer. Jetzt trägt die linke Spalte den Text, die rechte das
   Formular - ohne Kasten, direkt auf der Fläche.
   ====================================================================== */
.anfrage-sektion .container {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start;
}
.anfrage-kopf { max-width: none; margin: 0; position: sticky; top: 118px; }
.anfrage-sektion .contact-form { max-width: none; }

.anfrage-punkte { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.anfrage-punkte li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 15px; line-height: 1.5; color: var(--ink);
}
.anfrage-punkte svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--accent); margin-top: 3px; }

.anfrage-alternativ {
  margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--border);
  font-size: 15px; color: var(--text-secondary);
}
.anfrage-alternativ a {
  font-weight: 700; color: var(--accent);
  border-bottom: 1px solid rgba(20,84,140,0.35);
  transition: color var(--tempo) var(--ease), border-color var(--tempo) var(--ease);
}
.anfrage-alternativ a:hover { color: var(--accent-dark); border-color: var(--accent-dark); }

/* Nachrichtenfeld darf nicht als flacher Streifen enden */
.anfrage-sektion textarea { min-height: 170px; resize: vertical; }
.anfrage-sektion .btn-submit { width: 100%; }

@media (max-width: 1000px) {
  .anfrage-sektion .container { grid-template-columns: 1fr; gap: 32px; }
  .anfrage-kopf { position: static; }
  .anfrage-sektion .btn-submit { width: auto; padding: 15px 38px; }
}
@media (max-width: 900px) {
  .anfrage-punkte { margin-top: 20px; gap: 10px; }
  .anfrage-punkte li { font-size: 14.5px; }
  .anfrage-alternativ { margin-top: 20px; padding-top: 18px; }
  .anfrage-sektion textarea { min-height: 140px; }
  .anfrage-sektion .btn-submit { width: 100%; }
}

/* Absendeknopf mobil über die volle Formularbreite.
   Auf der Kontaktseite stand er sonst linksbündig mit rund 220 px
   Leerraum daneben, während die Felder mittig saßen. */
@media (max-width: 900px) {
  .contact-form .btn-submit { width: 100%; text-align: center; }
  .contact-form .form-status { text-align: center; }
}

/* ======================================================================
   ORTSKACHELN: erkennbar anklickbar und optisch ausgerichtet
   Vorher zentrierten wir Punkt + Text als Gruppe. Dadurch stand der Text
   15 px aus der Mitte (Punktbreite plus Abstand) und links wirkte der
   Rand groesser. Jetzt: Ortsname links, Pfeil rechts - wie eine Liste
   von Links, die man auch als solche erkennt.
   ====================================================================== */
.orte-chips a {
  justify-content: space-between;
  text-align: left;
  padding: 14px 14px 14px 16px;
  gap: 10px;
}
.orte-chips a::before { content: none; }
.orte-chips a::after {
  content: "→";
  font-size: 16px; line-height: 1; font-weight: 400;
  color: var(--accent); flex: 0 0 auto;
  transition: transform 0.35s var(--ease);
}
.orte-chips a:hover::after,
.orte-chips a:focus-visible::after { transform: translateX(4px); }
.orte-chips a:hover { border-color: var(--accent); background: var(--accent-soft); }

.orte-chip--heim::after { color: var(--accent-dark) !important; }
.orte-chip--heim:hover::after { color: #fff !important; }

/* ======================================================================
   AUFRÄUM-ABSCHNITT
   Eine hohe Bahn gibt den Scrollweg, die Bühne bleibt darin stehen.
   Jedes Objekt hat ein eigenes Zeitfenster (--von/--bis) und rechnet
   daraus seinen eigenen Fortschritt. Gesteuert nur über eine Variable
   --p, die das Skript beim Scrollen setzt.
   ====================================================================== */
/* >>> AUFRAEUM-SZENE >>> */
/* ======================================================================
   Startseite: Aufraeum-Szene "Ein halber Arbeitstag".
   Eine Variable --p (0..1) kommt vom Scroll-Antrieb. Daraus rechnet jedes
   Teil seinen Zustand: Etiketten (Sortieren), Flugbogen in das passende
   Ziel (Abtransport), Fuellstaende, Besen und Glanz (Besenrein),
   Schluessel und Sonnenfleck (Uebergabe). Uhr und Sonne laufen mit.
   ====================================================================== */
.raeum { padding: 0; background: linear-gradient(180deg, var(--bg) 0%, #ffffff 100%); }
.raeum-bahn { height: 400vh; position: relative; }
.raeum-buehne {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "kopf stufen" "bild bild";
  align-content: center; align-items: end;
  column-gap: 40px; row-gap: 22px;
  padding: 92px 5vw 26px;
}
.raeum-kopf { grid-area: kopf; max-width: 640px; }
.raeum-kopf .section-title { margin: 0 0 10px; }
.raeum-kopf .section-lead { margin: 0; max-width: 560px; }

/* Phasenleiste */
.raeum-stufen { grid-area: stufen; list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.raeum .zone {
  --a: clamp(0, min((var(--p, 0) - var(--s)) / 0.025, (var(--e) - var(--p, 0)) / 0.025), 1);
  --d: clamp(0, (var(--p, 0) - var(--e) + 0.03) / 0.03, 1);
}
.raeum-stufen li {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 11px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; color: var(--text-secondary);
  background: #fff; border: 1px solid var(--border);
  box-shadow: 0 6px 16px rgba(16,24,40,calc(0.04 + 0.08 * var(--a)));
  transform: translateY(calc(var(--a) * -2px));
}
.raeum-stufen li::after {                    /* aktive Phase: blauer Rahmen */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--accent); opacity: calc(var(--a) * (1 - var(--d)));
}
.rs-punkt { position: relative; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); background: #fff; }
.rs-punkt::before, .rs-punkt::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
.rs-punkt::before { background: linear-gradient(135deg, var(--accent), var(--signal)); opacity: calc(var(--a) * (1 - var(--d))); }
.rs-punkt::after {
  background: #16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
  opacity: var(--d);
}

/* Szene */
.raeum-bild { grid-area: bild; position: relative; min-width: 0; }
.raeum-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.raeum-szene { display: block; width: 100%; height: auto; margin: 0 auto; }
.raeum-szene--d { max-height: calc(100vh - 300px); --weg: 1240px; }
.raeum-szene--m { display: none; --weg: 860px; }
.raeum-szene text { font-family: inherit; font-weight: 800; letter-spacing: 0.01em; }

/* Gegenstaende: fliegen im Bogen ins Ziel, werden kleiner, verschwinden darin */
.raeum-szene .ding {
  transform-box: fill-box; transform-origin: center;
  --l: clamp(0, (var(--p, 0) - var(--von)) / (var(--bis) - var(--von)), 1);
  transform:
    translate(calc(var(--dx) * var(--l) * 1px),
              calc((var(--dy) * var(--l) - var(--h) * 4 * var(--l) * (1 - var(--l))) * 1px))
    rotate(calc(var(--dr) * var(--l) * 1deg))
    scale(calc(1 - (1 - var(--es)) * var(--l)));
  opacity: clamp(0, (1 - var(--l)) / 0.14, 1);
  will-change: transform, opacity;
}
/* Etiketten: springen beim Sortieren auf, verschwinden beim Abflug */
.raeum-szene .etikett {
  transform-box: fill-box; transform-origin: center;
  --ein: clamp(0, (var(--p, 0) - var(--t)) / 0.02, 1);
  --weg-e: clamp(0, (var(--p, 0) - var(--von)) / 0.02, 1);
  opacity: calc(var(--ein) * (1 - var(--weg-e)));
  transform: scale(calc(0.4 + 0.6 * var(--ein)));
}
/* Fuellstand der Behaelter */
.raeum-szene .haufen {
  transform-box: fill-box; transform-origin: 50% 100%;
  --f: clamp(0, (var(--p, 0) - var(--f0)) / (var(--f1) - var(--f0)), 1);
  transform: scaleY(var(--f));
  opacity: clamp(0, var(--f) * 5, 1);
}
/* Uhr: 8 bis 14 Uhr */
.raeum-szene .zeiger-std { transform: rotate(calc(240deg + var(--p, 0) * 180deg)); }
.raeum-szene .zeiger-min { transform: rotate(calc(var(--p, 0) * 2160deg)); }
/* Sonne wandert, Sonnenfleck im Raum wird zur Uebergabe kraeftig */
.raeum-szene--d .sonne { transform: translate(calc(var(--p, 0) * 340px), calc(var(--p, 0) * -210px)); }
.raeum-szene--m .sonne { transform: translate(calc(var(--p, 0) * 560px), calc(var(--p, 0) * -40px)); }
.raeum-szene .sonnenfleck { opacity: calc(0.10 + 0.42 * clamp(0, (var(--p, 0) - 0.86) / 0.1, 1)); }
/* Besenrein */
.raeum-szene .besen {
  transform-box: fill-box; transform-origin: 50% 100%;
  --s: clamp(0, (var(--p, 0) - 0.78) / 0.12, 1);
  transform: translateX(calc(-120px + var(--s) * var(--weg))) rotate(calc(sin(var(--s) * 36) * 7deg));
  opacity: calc(clamp(0, var(--s) * 10, 1) * clamp(0, (1 - var(--s)) * 10, 1));
}
.raeum-szene .staub {
  --s: clamp(0, (var(--p, 0) - 0.78) / 0.12, 1);
  transform: translate(calc(-120px + var(--s) * var(--weg)), calc(var(--s) * -24px));
  opacity: calc(var(--s) * (1 - var(--s)) * 2.2);
}
.raeum-szene .glanz {
  --s: clamp(0, (var(--p, 0) - 0.80) / 0.12, 1);
  transform: translateX(calc(var(--s) * (var(--weg) + 240px)));
}
/* Schluessel haengt sich zur Uebergabe an den Haken */
.raeum-szene .schluessel {
  opacity: clamp(0, (var(--p, 0) - 0.90) / 0.03, 1);
}

/* Handy: eigenes Hochformat, Text und Phasen oben */
@media (max-width: 900px) {
  .raeum-bahn { height: 360vh; }
  .raeum-buehne {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "stufen" "bild";
    align-content: start; align-items: start; row-gap: 12px;
    padding: 84px 16px 12px;
  }
  .raeum-kopf .section-title { font-size: clamp(26px, 7.4vw, 32px); margin-bottom: 0; }
  .raeum-kopf .section-lead { display: none; }
  /* Phasen als vier schmale Spalten: Punkt ueber dem Wort */
  .raeum-stufen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .raeum-stufen li {
    flex-direction: column; gap: 4px; padding: 6px 2px 5px; border-radius: 12px;
    font-size: 11px; text-align: center; box-shadow: none;
  }
  .raeum-stufen li::after { border-radius: 12px; }
  .rs-punkt { width: 14px; height: 14px; }
  .rs-punkt::after { background-size: 8px; }
  .raeum-szene--d { display: none; }
  .raeum-szene--m { display: block; max-height: calc(100vh - 240px); max-height: calc(100svh - 240px); }
}

/* Der Schlusshinweis (wird auf der Leistungsseite weiterverwendet) */
.raeum-fertig { margin: 26px 0 0; }
.raeum-fertig span {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px; border-radius: 999px;
  background: #16a34a; color: #fff; font-size: 14.5px; font-weight: 700;
  box-shadow: 0 12px 28px rgba(22,163,74,0.32);
  opacity: clamp(0, calc((var(--p, 0) - 0.78) / 0.14), 1);
  transform: translateY(calc(14px * (1 - clamp(0, calc((var(--p, 0) - 0.78) / 0.14), 1))));
}
.raeum-fertig span::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* Wer Bewegung reduziert, sieht direkt das Ergebnis: leerer Raum, volle Behaelter */
@media (prefers-reduced-motion: reduce), (scripting: none), (orientation: landscape) and (max-height: 500px) {
  .raeum-bahn { height: auto; }
  .raeum-buehne { position: static; height: auto; padding-top: 90px; padding-bottom: 60px; --p: 1; }
  .raeum-fertig span { opacity: 1 !important; transform: none !important; }
}
/* <<< AUFRAEUM-SZENE <<< */

/* Ortsseiten: H1 auf dem Handy etwas kleiner, damit sie auf zwei Zeilen passt */
@media (max-width: 600px) {
  .page-hero h1 { font-size: 28px; }
}

/* ======================================================================
   Ortsseiten: Ortsbild als Hintergrund im Seitenkopf
   Das Foto liegt unter einer dunkelblauen Ebene. Links, wo der Text
   steht, deckt sie stark ab, nach rechts wird sie durchsichtiger,
   damit das Motiv sichtbar bleibt. Auf dem Handy laeuft der Text ueber
   die ganze Breite, deshalb deckt die Ebene dort ueberall stark ab.
   ====================================================================== */
.page-hero--ort {
  background-image:
    linear-gradient(100deg,
      rgba(10,37,64,0.95) 0%,
      rgba(10,37,64,0.90) 34%,
      rgba(10,37,64,0.68) 66%,
      rgba(13,58,99,0.50) 100%),
    var(--ortsbild);
  background-size: cover, cover;
  background-position: center, center 42%;
  background-repeat: no-repeat, no-repeat;
}
/* Punktraster und Lichtkegel ueber dem Foto zuruecknehmen */
.page-hero--ort::before { opacity: 0.5; }
.page-hero--ort::after  { opacity: 0.6; }

@media (max-width: 900px) {
  .page-hero--ort {
    background-image:
      linear-gradient(168deg,
        rgba(10,37,64,0.94) 0%,
        rgba(10,37,64,0.90) 55%,
        rgba(10,37,64,0.82) 100%),
      var(--ortsbild-m);
    /* Auf dem Handy ist nur rund die halbe Bildbreite sichtbar. Ohne
       Steuerung landet man in der Bildmitte und sieht bei diesen Motiven
       nur Wiese. --fokus schiebt den Ausschnitt auf das Ortsmotiv. */
    background-position: center, var(--fokus, 100%) 45%;
  }
}

/* ======================================================================
   Leistungen als Kartenstapel: Ueberschrift bleibt stehen, rechts liegt
   immer eine Karte im Fokus. --p (0..1) kommt vom Scroll-Antrieb, jede
   Karte rechnet daraus ihren Zustand: kommt (von unten), liegt (vorn),
   geht (tritt zurueck). Drei Karten -> Fenster von je 1/3.
   ====================================================================== */
.leist { padding: 0; }
.leist-bahn { height: 280vh; position: relative; }
.leist-buehne {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; grid-template-columns: minmax(280px, 0.46fr) 1fr;
  align-items: center; gap: 48px;
  padding: 110px 6vw 48px;
}
.leist-kopf { max-width: 520px; }
.leist-kopf .section-title, .leist-kopf .section-lead { margin-left: 0; }
.leist-knopf { margin: 26px 0 0; }

/* Fortschrittsliste */
.leist-punkte { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.leist-punkte li {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 600; color: var(--text-secondary);
  --a: clamp(0, calc(1 - abs(var(--p, 0) * 3 - var(--i) - 0.5) * 2.2), 1);  /* 1 = diese Karte liegt vorn */
  color: color-mix(in srgb, var(--navy) calc(var(--a) * 100%), var(--text-secondary));
}
.leist-punkte li span {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: var(--border);
  box-shadow: 0 0 0 0 rgba(56,189,248,0.35);
  transform: scale(calc(0.8 + var(--a) * 0.5));
  background: color-mix(in srgb, var(--accent) calc(var(--a) * 100%), var(--border));
}

/* Stapel */
.leist-stapel {
  position: relative; height: min(560px, calc(100vh - 220px));
  max-width: 560px; margin: 0 auto; width: 100%;
  overflow: hidden; border-radius: 22px;                 /* Stapelrahmen: neue Karte schiebt sich von unten herein */
}
.leist-stapel .lk {
  position: absolute; inset: 0;
  /* Fortschritt dieser Karte: <0 noch nicht dran, 0..1 im Fokus, >1 vorbei */
  --k: calc(var(--p, 0) * 3 - var(--i));
  --ein: clamp(0, calc(var(--k) / 0.30), 1);            /* Hereinschieben in den ersten 30 % des Fensters */
  --aus: clamp(0, calc((var(--k) - 1) / 0.30), 1);      /* Zuruecktreten, sobald die naechste kommt */
  transform:
    translateY(calc((1 - var(--ein)) * 104% - var(--aus) * 18px))
    scale(calc(1 - var(--aus) * 0.05));
  opacity: 1;                                            /* deckend: nichts scheint durch */
  filter: brightness(calc(1 - var(--aus) * 0.12));      /* hintere Karte tritt sichtbar zurueck */
  z-index: calc(10 + var(--i));
  pointer-events: none;
  will-change: transform;
}
.leist-stapel .lk:hover { transform: none; }                 /* kein Hover-Sprung im Stapel */
.leist-stapel .lk:first-child { --ein: 1; }                  /* erste Karte liegt sofort */
.leist-stapel .lk-bild { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
.leist-stapel .lk-inhalt { flex: 0 0 auto; }

@media (max-width: 900px) {
  .leist-bahn { height: 260vh; }
  .leist-buehne {
    grid-template-columns: 1fr; grid-template-rows: auto 1fr;
    align-items: start; align-content: start; gap: 18px;
    padding: 92px 20px 20px;
  }
  .leist-kopf { max-width: none; }
  .leist-kopf .section-lead { display: none; }      /* Handy: Kopf kurz halten, die Karten tragen den Inhalt */
  .leist-punkte { display: none; }
  .leist-knopf { margin-top: 14px; }
  .leist-stapel { height: calc(100vh - 330px); height: calc(100svh - 330px); min-height: 300px; }
  .leist-stapel .lk-inhalt h3 { font-size: 17px; }
  .leist-stapel .lk-inhalt p { font-size: 14px; }
}

/* Wer Bewegung reduziert, bekommt die drei Karten wieder nebeneinander */
@media (prefers-reduced-motion: reduce), (scripting: none), (orientation: landscape) and (max-height: 500px) {
  .leist-bahn { height: auto; }
  .leist-buehne { position: static; height: auto; display: block; padding: 90px 6vw 60px; max-width: 1360px; margin: 0 auto; }
  .leist-stapel { height: auto; max-width: none; overflow: visible; border-radius: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin: 40px 0 0; }
  .leist-stapel .lk-bild { aspect-ratio: 4 / 3; flex: 0 0 auto; }   /* alle drei Bilder gleich hoch */
  .leist-stapel .lk { position: relative; inset: auto; transform: none !important; opacity: 1 !important; max-width: none; pointer-events: auto; }
  .leist-punkte { display: none; }
  @media (max-width: 900px) { .leist-stapel { grid-template-columns: 1fr; } }
}

/* Partner-Karte "Ebenfalls von uns": Logo und Name des Zaunbauteams ueber dem Button */
.partner-marke { gap: 18px; }
.partner-marke-kopf { display: flex; align-items: center; gap: 16px; }
.partner-marke-kopf img {
  display: block; width: 64px; height: 64px; flex: 0 0 auto; border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}
.partner-marke-kopf strong { display: block; color: #fff; font-size: 17px; font-weight: 800; line-height: 1.2; }
.partner-marke-kopf span { display: block; margin-top: 4px; color: rgba(255,255,255,0.72); font-size: 14px; }


/* Partner-Karte im Zaunbau-Gruen, damit sie als eigene Marke erkennbar ist */
.partner-marke {
  background: linear-gradient(150deg, rgba(127,178,84,0.24) 0%, rgba(59,109,17,0.16) 100%);
  border-color: rgba(127,178,84,0.50);
}
.partner-marke-kopf span { color: #c6e3a4; }
.partner-marke .btn-on-dark { color: #274c0b; }
.partner-marke .btn-on-dark:hover { background: #eef6e6; }

/* >>> LEISTUNGS-ANIMATIONEN >>> */
/* ======================================================================
   Leistungsseite, Animation 1: Haus im Querschnitt.
   --p (0..1) kommt vom Scroll-Antrieb. Jede Zone hat ein Zeitfenster
   [--s, --e]: Lichtkegel an, Gegenstaende verschwinden nacheinander,
   am Ende "frei". Der Wohnbereich bleibt unberuehrt.
   ====================================================================== */
.haus { padding: 0; background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%); }
.haus-bahn { height: 380vh; position: relative; }
.haus-buehne {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid;
  grid-template-columns: minmax(300px, 0.42fr) 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "kopf bild" "liste bild";
  align-content: center; column-gap: 52px; row-gap: 26px;
  padding: 100px 6vw 36px;
}
.haus-kopf { grid-area: kopf; }
.haus-kopf .section-title, .haus-kopf .section-lead { margin-left: 0; }
.haus-kopf .section-lead { margin-bottom: 0; }
.haus-bild { grid-area: bild; align-self: center; min-width: 0; }
.haus-liste-wrap { grid-area: liste; }
.haus-szene { display: block; width: 100%; height: auto; max-height: calc(100vh - 150px); }
.haus-szene text { font-family: inherit; font-size: 17px; font-weight: 700; fill: #fff; letter-spacing: 0.02em; }

/* Zustand je Zone: --a = gerade dran (0..1), --d = erledigt (0..1) */
.haus .zone {
  --a: clamp(0, min((var(--p, 0) - var(--s)) / 0.025, (var(--e) - var(--p, 0)) / 0.025), 1);
  --d: clamp(0, (var(--p, 0) - var(--e) + 0.03) / 0.03, 1);
}
.haus-szene .zlicht { fill: rgba(56,189,248,0.13); stroke: var(--signal); stroke-width: 3; opacity: var(--a); }
.haus-szene .zchip { opacity: calc(var(--a) * (1 - var(--d))); }
.haus-szene .zfrei {
  opacity: var(--d);
  transform-box: fill-box; transform-origin: center;
  transform: scale(calc(0.7 + 0.3 * var(--d)));
}
/* Gegenstaende: heben ab, werden kleiner, verschwinden */
.haus-szene .hding {
  transform-box: fill-box; transform-origin: center;
  --l: clamp(0, (var(--p, 0) - var(--von)) / (var(--bis) - var(--von)), 1);
  transform:
    translate(calc(var(--dx) * var(--l) * 1px), calc(var(--dy) * var(--l) * 1px))
    rotate(calc(var(--dr) * var(--l) * 1deg))
    scale(calc(1 - 0.35 * var(--l)));
  opacity: clamp(0, 1 - (var(--l) - 0.3) / 0.7, 1);
  will-change: transform, opacity;
}

/* Liste links: laeuft mit */
.haus-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.haus-liste li {
  display: grid; grid-template-columns: 22px 1fr; column-gap: 14px; align-items: start;
  opacity: calc(0.42 + 0.58 * max(var(--a), var(--d) * 0.72));
}
.haus-liste h3 { font-size: 17px; margin: 0 0 4px; line-height: 1.3; }
.haus-liste p { font-size: 14.5px; line-height: 1.55; margin: 0; color: var(--text-secondary); }
.haus-punkt {
  position: relative; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%; border: 2px solid var(--border); background: #fff;
}
.haus-punkt::before, .haus-punkt::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
.haus-punkt::before {
  background: linear-gradient(135deg, var(--accent), var(--signal));
  opacity: calc(var(--a) * (1 - var(--d)));
  box-shadow: 0 0 0 6px rgba(56,189,248,0.18);
}
.haus-punkt::after {
  background: #16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  opacity: var(--d);
}
.haus-fertig { margin: 22px 0 0 36px; }
.haus-fertig.raeum-fertig span {
  opacity: clamp(0, calc((var(--p, 0) - 0.93) / 0.04), 1);
  transform: translateY(calc(12px * (1 - clamp(0, calc((var(--p, 0) - 0.93) / 0.04), 1))));
}

@media (max-width: 900px) {
  .haus-bahn { height: 340vh; }
  .haus-buehne {
    grid-template-columns: 1fr; grid-template-rows: auto auto auto;
    grid-template-areas: "kopf" "bild" "liste";
    align-content: start; row-gap: 14px;
    padding: 84px 20px 16px;
  }
  .haus-kopf .section-lead { display: none; }
  .haus-kopf .section-title { font-size: clamp(24px, 7vw, 30px); margin-bottom: 0; }
  .haus-szene { max-height: 32vh; margin: 0 auto; }
  .haus-liste { gap: 10px; }
  .haus-liste h3 { font-size: 15.5px; margin-bottom: 2px; }
  .haus-liste p { font-size: 13.5px; line-height: 1.45; }
  .haus-fertig { margin: 12px 0 0 36px; }
  /* Schilder im Haus auf dem Handy groesser, sonst unlesbar klein */
  .haus-szene .zchip { transform-box: fill-box; transform-origin: center; transform: scale(1.6); }
  .haus-szene .zfrei { transform: scale(calc((0.7 + 0.3 * var(--d)) * 1.6)); }
}
/* Kleine Handys: nur die Titel, damit alles auf den Schirm passt */
@media (max-width: 900px) and (max-height: 740px) {
  .haus-liste p { display: none; }
}

/* ======================================================================
   Leistungsseite, Animation 2: Ablauf als waagerechte Fahrt.
   --pos (0..5) setzt der Scroll-Antrieb mit kurzem Halt je Schritt.
   Die Kartenreihe ist so eingerueckt, dass die aktive Karte mittig steht.
   ====================================================================== */
.weg { padding: 0; }
.weg-bahn { height: 360vh; position: relative; }
.weg-buehne {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 92px 0 44px;
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-2) 58%, var(--navy-3) 100%);
  color: #fff;
}
.weg-buehne::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(circle at 78% 22%, #000, transparent 68%);
  -webkit-mask-image: radial-gradient(circle at 78% 22%, #000, transparent 68%);
}
.weg-kopf { position: relative; z-index: 2; text-align: center; }
.weg-kopf .section-eyebrow { justify-content: center; color: var(--signal-warm); background: none; border: 0; padding: 0; }
.weg-kopf .section-eyebrow::before { background: linear-gradient(90deg, var(--signal-warm), #fff); }
.weg-kopf .section-title { color: #fff; margin-left: auto; margin-right: auto; }
.weg-kopf .section-lead { color: rgba(255,255,255,0.78); margin: 0 auto; }
.weg .verlauf {
  background: linear-gradient(96deg, var(--signal-warm) 0%, var(--signal) 55%, #bae6fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.weg-spur { position: relative; z-index: 2; margin-top: 34px; }
.weg-karten {
  --kw: min(360px, 76vw); --gap: 26px;
  list-style: none; margin: 0;
  padding: 16px calc(50% - var(--kw) / 2);
  display: flex; gap: var(--gap);
  transform: translateX(calc(var(--pos, 0) * -1 * (var(--kw) + var(--gap))));
  will-change: transform;
}
.weg-karte {
  --x: calc(var(--pos, 0) - var(--i));
  --a: clamp(0, 1 - max(var(--x), var(--x) * -1), 1);
  position: relative; overflow: hidden; flex: 0 0 var(--kw);
  padding: 30px 28px 30px; border-radius: 24px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  opacity: calc(0.35 + 0.65 * var(--a));
  transform: scale(calc(0.9 + 0.1 * var(--a)));
}
/* aktive Karte: leuchtender Rand und Hauch von Blau */
.weg-karte::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 1.5px solid var(--signal);
  background: linear-gradient(160deg, rgba(56,189,248,0.16), rgba(20,84,140,0.10));
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  opacity: var(--a);
}
/* grosse Geisterzahl */
.weg-karte::after {
  content: attr(data-nr); position: absolute; right: 16px; bottom: -30px;
  font-size: 130px; font-weight: 800; line-height: 1; color: rgba(255,255,255,0.06); pointer-events: none;
}
.weg-icon {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 58px; height: 58px; margin-bottom: 20px; border-radius: 16px;
  background: rgba(255,255,255,0.10); color: #fff;
}
.weg-icon::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, var(--accent), var(--signal));
  opacity: var(--a);
}
.weg-icon svg { position: relative; width: 28px; height: 28px; }
.weg-icon .welle { opacity: var(--a); }
.weg-icon .lupe { transform: translate(calc((1 - var(--a)) * -3px), calc((1 - var(--a)) * -3px)); }
.weg-icon .haken { stroke-dasharray: 12; stroke-dashoffset: calc(12 * (1 - var(--a))); }
.weg-nr {
  position: relative; z-index: 1; display: block; margin-bottom: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-warm);
}
.weg-karte h3 { position: relative; z-index: 1; margin: 0 0 10px; font-size: 21px; color: #fff; }
.weg-karte p { position: relative; z-index: 1; margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,0.78); }

/* Fortschrittsleiste mit sechs Punkten */
.weg-leiste {
  position: relative; z-index: 2; width: min(720px, 84vw); height: 4px;
  margin: 40px auto 0; border-radius: 4px; background: rgba(255,255,255,0.14);
}
.weg-leiste::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit;
  width: calc(var(--pos, 0) / 5 * 100%);
  background: linear-gradient(90deg, var(--accent), var(--signal));
}
.weg-leiste span {
  --r: clamp(0, (var(--pos, 0) - var(--i) + 0.5) * 3, 1);
  position: absolute; top: 50%; left: calc(var(--i) / 5 * 100%);
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff;
  background: var(--navy-2); border: 2px solid rgba(255,255,255,0.28);
  transform: translate(-50%, -50%) scale(calc(0.85 + 0.15 * var(--r)));
}
.weg-leiste span::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--signal));
  opacity: var(--r);
}

@media (max-width: 900px) {
  .weg-bahn { height: 320vh; }
  .weg-buehne { padding: 84px 0 26px; }
  .weg-kopf .section-lead { display: none; }
  .weg-kopf .section-title { font-size: clamp(26px, 7.4vw, 32px); }
  .weg-spur { margin-top: 18px; }
  .weg-karten { --kw: 80vw; --gap: 14px; }
  .weg-karte { padding: 24px 22px 26px; }
  .weg-karte h3 { font-size: 19px; }
  .weg-karte p { font-size: 15px; }
  .weg-leiste { margin-top: 28px; }
}

/* Wer Bewegung reduziert, bekommt beides als ruhige Uebersicht */
@media (prefers-reduced-motion: reduce), (scripting: none), (orientation: landscape) and (max-height: 500px) {
  .haus-bahn, .weg-bahn { height: auto; }
  .haus-buehne, .weg-buehne { position: static; height: auto; }
  .haus-buehne { padding-top: 90px; padding-bottom: 70px; }
  .haus-szene .hding { transform: none !important; opacity: 1 !important; }
  .haus-szene .zlicht, .haus-szene .zchip, .haus-szene .zfrei { display: none; }
  .haus-liste li { opacity: 1; }
  .haus-fertig.raeum-fertig span { opacity: 1; transform: none; }
  .weg-buehne { padding: 90px 0 70px; }
  .weg-karten { transform: none; flex-wrap: wrap; justify-content: center; padding: 16px 24px; }
  .weg-karte { --a: 1; opacity: 1; transform: none; }
  .weg-leiste { display: none; }
}
/* <<< LEISTUNGS-ANIMATIONEN <<< */















/* >>> UNTERSEITEN >>> */
/* ======================================================================
   Unterseiten (Leistungen, Ueber uns, Referenzen)
   1. Seitenkopf mit Fotocollage: echte Aufnahmen als Abzuege, fliegen beim
      Laden ein und driften beim Scrollen unterschiedlich schnell (--p kommt
      ueber data-sicht="kopf").
   2. Ueber uns: Checkliste, die sich beim Scrollen abhakt, am Ende Stempel.
   3. Ueber uns: Rueckbau eines Gartenhauses als angeheftete Fotostrecke.
   4. Referenzen: Fotostapel, je Scrollschritt fliegt ein Abzug weg.
   5. Referenzen: Laufband mit Projektarten, zeichnende Icons bei den Zusagen.
   Strecke und Stapel heften sich nur an, wenn das Skript die Klasse
   "laeuft" setzt. Sonst (ohne Skript, reduzierte Bewegung) Uebersicht.
   ====================================================================== */

/* ---------- 1. Seitenkopf mit Fotocollage ---------- */
.page-hero--fotos { padding: 150px 0 88px; }
.kopf-raster {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px; align-items: center;
}
.kopf-fotos { position: relative; aspect-ratio: 10 / 9; margin-right: 12px; }
.kf {
  position: absolute; margin: 0; left: var(--x); top: var(--y); width: var(--w);
  transform:
    translateY(calc(var(--p, 0) * var(--fahrt) * -1px))
    rotate(calc((var(--r) + var(--p, 0) * var(--dr)) * 1deg));
}
.kf--a { --x: 0%;  --y: 9%;  --w: 64%; --r: -4; --fahrt: 50;  --dr: -3; z-index: 1; }
.kf--b { --x: 59%; --y: 0%;  --w: 40%; --r: 5;  --fahrt: 130; --dr: 5;  z-index: 3; }
.kf--c { --x: 24%; --y: 55%; --w: 50%; --r: -2; --fahrt: 20;  --dr: -2; z-index: 2; }
.kf-in {
  position: relative; padding: 8px; border-radius: 16px; background: #fff;
  box-shadow: 0 30px 60px rgba(3,15,30,0.45), 0 2px 6px rgba(3,15,30,0.20);
  animation: kfIn 1s var(--ease) both; animation-delay: var(--d, 0.2s);
}
.kf-in img { width: 100%; height: auto; border-radius: 10px; }
@keyframes kfIn { from { opacity: 0; transform: translateY(50px) rotate(-6deg) scale(0.9); } }
.kf figcaption {
  position: absolute; left: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 9px; border-radius: 999px;
  background: rgba(255,255,255,0.95); color: var(--navy);
  font-size: 12.5px; font-weight: 800; box-shadow: 0 6px 16px rgba(3,15,30,0.25);
}
.kf figcaption::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 0 3px rgba(56,189,248,0.28);
}
.kf--a figcaption { top: 18px; bottom: auto; }

/* Ueber uns: Karte statt drittem Foto */
.kf--karte { --x: 30%; --y: 58%; --w: 44%; z-index: 4; }
.kf--karte .kf-in { padding: 18px 20px 20px; border-radius: 18px; }
.kf-karte-titel {
  display: block; margin-bottom: 12px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
}
.kf-karte-liste { display: grid; gap: 9px; }
.kf-karte-liste li { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: var(--navy); }
.kf-karte-liste li::before {
  content: ""; flex: 0 0 20px; height: 20px; border-radius: 50%;
  background: #16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* drehendes Siegel mit Bildmarke */
.kopf-siegel {
  position: absolute; z-index: 4; left: -6%; top: 64%; width: 116px; height: 116px;
  border-radius: 50%; box-shadow: 0 18px 40px rgba(3,15,30,0.35);
  animation: kfIn 1s var(--ease) both; animation-delay: 0.65s;
}
.kopf-siegel svg { display: block; width: 100%; height: 100%; animation: siegelDreh 24s linear infinite; }
.kopf-siegel img { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; transform: translate(-50%, -50%); }
@keyframes siegelDreh { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .page-hero--fotos { padding: 118px 0 46px; }
  .kopf-raster { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .kopf-fotos { aspect-ratio: 16 / 11; margin: 0 6px 0 2px; }
  .kf--a { --x: 0%;  --y: 13%; --w: 58%; }
  .kf--b { --x: 63%; --y: 0%;  --w: 36%; }
  .kf--c { --x: 32%; --y: 52%; --w: 46%; }
  .kf--karte { --x: 30%; --y: 52%; --w: 50%; }
  .kf-in { padding: 5px; border-radius: 12px; }
  .kf-in img { border-radius: 8px; }
  .kf figcaption { left: 10px; bottom: 10px; gap: 5px; padding: 4px 9px 4px 7px; font-size: 12px; }
  /* A und B: Unterschrift oben, unten liegt auf dem Handy Karte C darueber */
  .kf--a figcaption, .kf--b figcaption { top: 10px; bottom: auto; }
  .kf figcaption::before { width: 6px; height: 6px; }
  .kf--karte .kf-in { padding: 10px 12px 12px; }
  .kf-karte-titel { margin-bottom: 7px; font-size: 11.5px; letter-spacing: 0.05em; }
  .kf-karte-liste { gap: 5px; }
  .kf-karte-liste li { gap: 6px; font-size: 12px; }
  .kf-karte-liste li::before { flex-basis: 14px; height: 14px; background-size: 8px; }
  .kopf-siegel { width: 78px; height: 78px; left: -1%; top: auto; bottom: -8%; }
  .kopf-siegel img { width: 28px; height: 28px; }
}

/* ---------- 2. Ueber uns: Checkliste ---------- */
.liste-raster {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 64px; align-items: start;
}
.liste-text { position: sticky; top: 130px; }
.liste-text .section-lead { margin-bottom: 0; }
.klemmbrett {
  position: relative; margin-top: 20px; padding: 16px; border-radius: 28px;
  background: linear-gradient(150deg, var(--navy-3) 0%, var(--navy-2) 45%, var(--navy) 100%);
  box-shadow: 0 34px 70px rgba(10,37,64,0.22);
}
.kb-klammer {
  position: absolute; left: 50%; top: -18px; z-index: 2; width: 132px; height: 44px;
  transform: translateX(-50%); border-radius: 12px 12px 16px 16px;
  background: linear-gradient(180deg, #eef2f7 0%, #bcc7d4 55%, #97a5b6 100%);
  box-shadow: 0 6px 14px rgba(3,15,30,0.30), inset 0 1px 0 #fff;
}
.kb-klammer::before {
  content: ""; position: absolute; left: 50%; top: 9px; width: 30px; height: 12px;
  transform: translateX(-50%); border-radius: 8px;
  background: var(--navy); box-shadow: inset 0 2px 3px rgba(0,0,0,0.45);
}
/* overflow: der Stempel startet vergroessert und darf nicht ueber den Rand ragen */
.kb-blatt { position: relative; overflow: hidden; padding: 44px 32px 22px; border-radius: 16px; background: #fff; }
.kb-kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 0 0 4px; padding-bottom: 14px; border-bottom: 2px solid var(--navy);
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.kb-kopf span:last-child { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; color: var(--text-secondary); }
.kb-liste li {
  --c: clamp(0, (var(--p, 0) - 0.05 - var(--i) * 0.074) / 0.07, 1);
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 2px; border-bottom: 1px dashed #d8e1eb;
  font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--ink);
}
.kb-liste li:last-child { border-bottom: 0; }
.kb-box {
  position: relative; flex: 0 0 24px; height: 24px; border-radius: 7px;
  border: 2px solid #c3cfdc; background: #fff;
}
.kb-box::before {
  content: ""; position: absolute; inset: -2px; border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--signal));
  opacity: clamp(0, var(--c) * 2.5, 1);
  transform: scale(calc(0.5 + 0.5 * clamp(0, var(--c) * 2.5, 1)));
}
.kb-box svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--c) - 0.3) / 0.6, 1));
}
.kb-zeile { flex: 1; min-width: 0; padding-top: 1px; }
/* Textmarker zieht beim Abhaken ueber die Zeile */
.kb-text {
  opacity: calc(0.6 + 0.4 * var(--c));
  background: linear-gradient(transparent 56%, rgba(56,189,248,0.32) 56%, rgba(56,189,248,0.32) 92%, transparent 92%) no-repeat 0 0 / calc(var(--c) * 100%) 100%;
}
.kb-fuss { display: flex; justify-content: flex-end; min-height: 84px; padding: 18px 8px 4px; }
.kb-stempel {
  --st: clamp(0, (var(--p, 0) - 0.88) / 0.07, 1);
  display: grid; justify-items: center; align-content: center; gap: 2px;
  padding: 10px 20px 9px; border: 3px solid #16a34a; border-radius: 12px;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px rgba(22,163,74,0.55);
  color: #16a34a; font-size: 15px; font-weight: 800; line-height: 1.1;
  letter-spacing: 0.14em; text-transform: uppercase;
  opacity: calc(var(--st) * 0.92);
  transform: rotate(-8deg) scale(calc(1.5 - 0.5 * var(--st)));
}
.kb-stempel small { font-size: 10.5px; font-weight: 700; letter-spacing: 0.3em; }

@media (max-width: 900px) {
  .liste-raster { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .liste-text { position: static; }
  .klemmbrett { margin-top: 30px; padding: 10px; border-radius: 22px; }
  .kb-blatt { padding: 38px 16px 14px; border-radius: 13px; }
  .kb-klammer { top: -16px; width: 112px; height: 38px; }
  .kb-liste li { gap: 12px; padding: 10px 0; font-size: 14.5px; }
  .kb-fuss { min-height: 74px; padding-top: 14px; }
}

/* ---------- 3. Ueber uns: Rueckbau-Strecke ---------- */
.story { padding: 0; }
.story-buehne {
  position: relative; overflow: hidden; padding: 96px 0;
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-2) 58%, var(--navy-3) 100%);
  color: #fff;
}
.story-buehne::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(circle at 22% 30%, #000, transparent 62%);
  -webkit-mask-image: radial-gradient(circle at 22% 30%, #000, transparent 62%);
}
.story-raster {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 56px; align-items: center;
}
.story-text .section-eyebrow { color: var(--signal-warm); }
.story-text .section-eyebrow::before { background: linear-gradient(90deg, var(--signal-warm), #fff); }
.story-text .section-title { color: #fff; }
.story-text .section-lead { margin-bottom: 26px; color: rgba(255,255,255,0.78); }
.story .verlauf {
  background: linear-gradient(96deg, var(--signal-warm) 0%, var(--signal) 55%, #bae6fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.story-schritte { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.story-schritte li {
  --x: calc(var(--pos, 0) - var(--k));
  --a: clamp(0, 1 - max(var(--x), var(--x) * -1) * 1.6, 1);
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 12px 16px; border-radius: 16px;
  opacity: calc(0.45 + 0.55 * var(--a));
}
.story-schritte li::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(56,189,248,0.16), rgba(20,84,140,0.10));
  border: 1.5px solid rgba(56,189,248,0.7);
  opacity: var(--a);
}
.ss-nr {
  position: relative; isolation: isolate; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,0.10); color: #fff; font-size: 14px; font-weight: 800;
}
.ss-nr::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(135deg, var(--accent), var(--signal)); opacity: var(--a);
}
.story-schritte h3 { position: relative; margin: 5px 0 3px; font-size: 17px; color: #fff; }
.story-schritte p { position: relative; margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.74); }

.sb-rahmen {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 22px;
  background: #0b2239; border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 40px 80px rgba(0,0,0,0.35);
}
.sb-foto { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.sb-foto picture { display: block; width: 100%; height: 100%; }
.sb-foto img { width: 100%; height: 100%; object-fit: cover; }
.sb-foto figcaption {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.95); color: var(--navy);
  font-size: 12.5px; font-weight: 800; box-shadow: 0 6px 16px rgba(3,15,30,0.25);
}
.sb-fuss {
  display: flex; align-items: center; gap: 16px; margin-top: 16px;
  font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,0.8);
}
.sb-balken { flex: 1; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,0.16); }
.sb-balken i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--signal));
  transform-origin: left center; transform: scaleX(calc((var(--pos, 0) + 1) / 4));
}

/* ohne Anheften: alle Schritte, Fotos als Raster */
.story-bahn:not(.laeuft) .story-schritte li { opacity: 1; }
.story-bahn:not(.laeuft) .story-schritte li::before { opacity: 0; }
.story-bahn:not(.laeuft) .ss-nr::before { opacity: 1; }
.story-bahn:not(.laeuft) .sb-rahmen {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; aspect-ratio: auto;
  overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.story-bahn:not(.laeuft) .sb-foto { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; }
.story-bahn:not(.laeuft) .sb-balken { display: none; }

/* angeheftet: jedes Foto wischt von rechts ueber das vorige */
.story-bahn.laeuft { height: 340vh; }
.story-bahn.laeuft .story-buehne {
  position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding: 86px 0 28px;
}
.story-bahn.laeuft .story-raster { width: 100%; }
.story-bahn.laeuft .sb-foto {
  --w: clamp(0, var(--pos, 0) - var(--k) + 1, 1);
  clip-path: inset(0 0 0 calc((1 - var(--w)) * 100%));
}
.story-bahn.laeuft .sb-foto img { transform: scale(calc(1.16 - 0.16 * var(--w))); will-change: transform; }
.story-bahn.laeuft .sb-foto::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 3;
  left: calc((1 - var(--w)) * 100%); width: 3px; margin-left: -1px;
  background: #fff; box-shadow: 0 0 20px 6px rgba(56,189,248,0.8);
  opacity: calc(var(--w) * (1 - var(--w)) * 4);
}
@media (min-width: 901px) and (max-height: 800px) {
  .story-bahn.laeuft .story-text .section-lead { display: none; }
}

@media (max-width: 900px) {
  .story-raster { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sb-rahmen { border-radius: 16px; }
  .sb-fuss { margin-top: 10px; font-size: 12.5px; }
  .story-bahn.laeuft { height: 320vh; }
  /* auto-Rand zentriert, schneidet auf kleinen Displays aber nichts ab */
  .story-bahn.laeuft .story-buehne { align-items: flex-start; padding: 80px 0 16px; }
  .story-bahn.laeuft .story-raster { gap: 14px; margin-top: auto; margin-bottom: auto; }
  .story-bahn.laeuft .story-text { display: contents; }
  .story-bahn.laeuft .story-text .section-eyebrow { order: 1; margin: 0; }
  .story-bahn.laeuft .story-text .section-title { order: 2; margin: 0; font-size: clamp(26px, 7.4vw, 32px); }
  .story-bahn.laeuft .story-text .section-lead { display: none; }
  .story-bahn.laeuft .story-bild { order: 3; }
  .story-bahn.laeuft .story-schritte { order: 4; }
  .story-bahn.laeuft .story-schritte li { grid-area: 1 / 1; opacity: var(--a); }
  .story-bahn.laeuft .story-schritte li::before { opacity: 1; }
}

/* ---------- 4. Referenzen: Fotostapel ---------- */
.stapel-sektion { padding: 96px 0 0; }
.stapel-sektion .section-lead { margin-bottom: 40px; }
.stapel-bahn { padding-bottom: 100px; }
.st-nr { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; color: var(--accent); }
.st-stempel {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.93); color: var(--navy);
  font-size: 12px; font-weight: 800; box-shadow: var(--schatten-s);
}
.st-leiste { display: none; }

.stapel-bahn.laeuft { height: 440vh; padding-bottom: 0; }
.stapel-bahn.laeuft .stapel-buehne {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; padding: 84px 0 24px;
}
.stapel-bahn.laeuft .stapel-raster {
  width: 100%; display: grid; gap: 0 72px;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  grid-template-areas: "text stapel" "leiste stapel";
  grid-template-rows: auto auto; align-content: center; align-items: center;
}
.stapel-bahn.laeuft .lk { display: contents; }
/* Abzug: --t Tiefe im Stapel (0 = oben), --g Abflug nach rechts */
.stapel-bahn.laeuft .lk-bild {
  --x: calc(var(--pos, 0) - var(--k));
  --g: clamp(0, var(--x), 1);
  --t: clamp(0, var(--x) * -1, 3.5);
  grid-area: stapel; justify-self: center; align-self: center;
  width: 100%; max-width: 620px; aspect-ratio: 4 / 3; overflow: visible;
  padding: 10px; border-radius: 20px; background: #fff;
  box-shadow: 0 30px 60px rgba(10,37,64,0.20), 0 2px 8px rgba(10,37,64,0.10);
  transform:
    translate(calc(var(--g) * 125%), calc(var(--t) * 15px - var(--g) * 50px))
    rotate(calc((var(--r) * (1 - var(--g)) + var(--g) * 16) * 1deg))
    scale(calc(1 - var(--t) * 0.045));
  opacity: calc((1 - clamp(0, (var(--g) - 0.55) / 0.45, 1)) * clamp(0, 3.5 - var(--t), 1));
  will-change: transform;
}
.stapel-bahn.laeuft .lk-bild::after { display: none; }
.stapel-bahn.laeuft .lk-bild img { border-radius: 12px; }
.stapel-bahn.laeuft .st-stempel { left: 24px; top: 24px; }
.stapel-bahn.laeuft .lk-inhalt {
  --x: calc(var(--pos, 0) - var(--k));
  --a: clamp(0, 1 - max(var(--x), var(--x) * -1) * 2.2, 1);
  grid-area: text; align-self: end; padding: 0;
  opacity: var(--a); transform: translateY(calc(var(--x) * -22px));
}
.stapel-bahn.laeuft .lk-inhalt h3 { margin: 0 0 14px; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -0.02em; }
.stapel-bahn.laeuft .lk-inhalt p { max-width: 440px; margin: 0; font-size: 17px; line-height: 1.65; color: var(--text-secondary); }
.stapel-bahn.laeuft .st-nr { margin-bottom: 18px; font-size: 15px; color: var(--text-secondary); }
.stapel-bahn.laeuft .st-nr b {
  margin-right: 4px; font-size: 64px; line-height: 1; letter-spacing: -0.04em;
  background: linear-gradient(96deg, var(--accent) 0%, var(--navy-3) 45%, var(--signal) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stapel-bahn.laeuft .st-leiste {
  grid-area: leiste; align-self: start; display: flex; align-items: center; gap: 14px; margin-top: 36px;
  font-size: 13px; font-weight: 700; color: var(--text-secondary);
}
.st-balken { width: 160px; height: 4px; overflow: hidden; border-radius: 4px; background: #dce4ee; }
.st-balken i {
  display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--signal));
  transform-origin: left center; transform: scaleX(calc((var(--pos, 0) + 1) / 6));
}

@media (max-width: 900px) {
  .stapel-sektion { padding-top: 72px; }
  .stapel-bahn.laeuft { height: 400vh; }
  .stapel-bahn.laeuft .stapel-buehne { align-items: flex-start; padding: 80px 0 16px; }
  .stapel-bahn.laeuft .stapel-raster {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "stapel" "text" "leiste";
    grid-template-rows: auto; gap: 0; margin-top: auto; margin-bottom: auto;
  }
  .stapel-bahn.laeuft .lk-bild { width: 90%; margin-bottom: 44px; padding: 7px; border-radius: 16px; }
  .stapel-bahn.laeuft .lk-bild img { border-radius: 10px; }
  .stapel-bahn.laeuft .st-stempel { left: 16px; top: 16px; font-size: 12px; }
  .stapel-bahn.laeuft .lk-inhalt { align-self: start; }
  .stapel-bahn.laeuft .lk-inhalt h3 { margin-bottom: 8px; font-size: 22px; }
  .stapel-bahn.laeuft .lk-inhalt p { font-size: 15px; }
  .stapel-bahn.laeuft .st-nr { margin-bottom: 8px; font-size: 13px; }
  .stapel-bahn.laeuft .st-nr b { font-size: 36px; }
  .stapel-bahn.laeuft .st-leiste { margin-top: 18px; }
}

/* ---------- 5. Referenzen: Laufband und zeichnende Icons ---------- */
.laufband { overflow: hidden; padding: 64px 0 80px; background: var(--bg); }
.lb-zeile {
  display: flex; width: max-content; white-space: nowrap;
  font-size: clamp(40px, 6.4vw, 92px); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em;
  will-change: transform;
}
.lb-zeile span { display: inline-flex; align-items: center; }
.lb-zeile span::after {
  content: ""; width: 0.26em; height: 0.26em; margin: 0 0.5em; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--signal));
}
.lb-zeile--1 { color: var(--navy); transform: translateX(calc(-6% - var(--p, 0.5) * 20%)); }
.lb-zeile--2 {
  margin-top: 4px; color: transparent; -webkit-text-stroke: 1.5px var(--navy-3);
  transform: translateX(calc(-26% + var(--p, 0.5) * 20%));
}
.lb-zeile--2 span::after { background: none; border: 2px solid var(--signal); }

.zusagen .usp-icon path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--ease); transition-delay: calc(var(--d, 0s) + 0.35s);
}
.zusagen .usp-card.is-visible .usp-icon path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce), (scripting: none) {
  .kf-in, .kopf-siegel, .kopf-siegel svg { animation: none; }
  .zusagen .usp-icon path { stroke-dashoffset: 0; transition: none; }
}
/* <<< UNTERSEITEN <<< */

/* >>> ORTSSEITEN-ANIMATIONEN >>> */
/* ======================================================================
   Ortsseiten: Kopf mit Collage (Ortsbild als Abzug, ein weiteres Foto,
   Karte mit den Ortsteilen, Siegel mit Ortsnamen) und Scroll-Animationen
   fuer die vorhandenen Bausteine. --p kommt jeweils ueber data-sicht.
   Grundlagen der Collage (.kopf-fotos, .kf, .kopf-siegel): Block UNTERSEITEN.
   ====================================================================== */

/* Kopf: Ortsbild im Hintergrund nur noch als Stimmung, das Motiv zeigt der Abzug */
.page-hero--ort.page-hero--fotos {
  background-image:
    linear-gradient(100deg, rgba(10,37,64,0.95) 0%, rgba(10,37,64,0.90) 40%, rgba(10,37,64,0.84) 70%, rgba(13,58,99,0.78) 100%),
    var(--ortsbild);
}
.kf-zu { aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--fokus, 50%) 50%; }
.kf-zu--hoch { aspect-ratio: 4 / 5; }
.kf--orte { --x: 27%; --y: 60%; --w: 50%; }
.kf-orte-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.kf-orte-liste li {
  padding: 5px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dark);
  font-size: 13px; font-weight: 700; line-height: 1.25;
}
@media (max-width: 900px) {
  .page-hero--ort.page-hero--fotos {
    background-image:
      linear-gradient(168deg, rgba(10,37,64,0.94) 0%, rgba(10,37,64,0.90) 55%, rgba(10,37,64,0.86) 100%),
      var(--ortsbild-m);
  }
  .kf--orte { --x: 30%; --y: 50%; --w: 56%; }
  .kf-orte-liste { gap: 4px; }
  .kf-orte-liste li { padding: 3px 8px; font-size: 12px; }
}

/* Ablauf: Linie zieht sich beim Scrollen, Schritte leuchten nacheinander auf */
.ablauf--an { --L: clamp(0, (var(--p, 0) - 0.1) / 0.6, 1); }
.ablauf.ablauf--an::before, .ablauf.ablauf--an.is-visible::before { transition: none; transform: scaleX(var(--L)); }
.ablauf--an .schritt {
  --a: clamp(0, (var(--L) * (var(--n) - 1) - var(--i)) * 3 + 1, 1);
  opacity: calc(0.4 + 0.6 * var(--a));
  transform: translateY(calc((1 - var(--a)) * 18px));
}
.ablauf--an .schritt-punkt {
  background: color-mix(in srgb, var(--accent) calc(var(--a) * 100%), var(--surface));
  color: color-mix(in srgb, #fff calc(var(--a) * 100%), var(--accent));
  transform: scale(calc(0.84 + 0.16 * var(--a)));
  box-shadow: 0 0 0 calc(var(--a) * 8px) rgba(56,189,248,0.22), 0 0 calc(var(--a) * 26px) rgba(56,189,248,0.45);
}
@media (max-width: 560px) {
  .ablauf.ablauf--an::before, .ablauf.ablauf--an.is-visible::before { transform: scaleY(var(--L)); }
}

/* Bildstrecke: Abzuege landen nacheinander leicht gedreht auf dem Tisch */
.strecke.strecke--an figure[data-reveal] {
  --f: clamp(0, (var(--p, 0) - 0.04 - var(--k) * 0.16) / 0.34, 1);
  transform: translateY(calc((1 - var(--f)) * 70px)) rotate(calc((1 - var(--f)) * var(--dreh, -6deg))) scale(calc(0.86 + 0.14 * var(--f)));
  transition: opacity 0.7s var(--ease);
  box-shadow: 0 calc(8px + (1 - var(--f)) * 22px) calc(22px + (1 - var(--f)) * 30px) rgba(10,37,64, calc(0.10 + (1 - var(--f)) * 0.12));
}
.strecke--an img { transform: scale(calc(1.14 - 0.14 * var(--f, 1))); }

/* Schwerpunkt-Foto: Vorhang in Markenblau gleitet zur Seite, Foto zoomt heraus */
.ueber-bild--an { --v: clamp(0, (var(--p, 0) - 0.05) / 0.45, 1); }
.ueber-bild--an::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(135deg, var(--navy-2) 0%, var(--accent) 60%, var(--signal) 100%);
  transform: translateX(calc(var(--v) * 101%));
}
.ueber-bild--an img { transform: scale(calc(1.18 - 0.18 * var(--v))); }

/* Checklisten: Haken zeichnen sich, Punkt fuellt sich, Randlinie leuchtet */
.check-liste--an li {
  --c: clamp(0, (var(--p, 0) - 0.06 - var(--i) * (0.55 / var(--n))) / 0.14, 1);
  box-shadow: inset 3px 0 0 rgb(56 189 248 / calc(var(--c) * 100%));
}
.check-liste--an svg {
  width: 24px; height: 24px; margin-top: 0; padding: 4px; border-radius: 50%;
  background: rgb(20 84 140 / calc(8% + var(--c) * 92%));
  color: rgb(calc(20 + 235 * var(--c)) calc(84 + 171 * var(--c)) calc(140 + 115 * var(--c)));
}
.check-liste--an svg path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--c)); }
/* <<< ORTSSEITEN-ANIMATIONEN <<< */

/* >>> FORMAT-FEINSCHLIFF >>> */
/* ======================================================================
   Formatierung aller Seiten (Check vom 10.09.2026: 19 Seiten in 360, 390,
   768, 1024 und 1440 px Breite). Steht bewusst am Ende der Datei.
   ====================================================================== */

/* Ueberschriften ausgeglichen umbrechen: kein Wort allein in der letzten
   Zeile. Fliesstext: keine einzelnen Woerter am Absatzende. */
h1, h2, h3, .section-title, .footer-heading { text-wrap: balance; }
p, li, figcaption, .section-lead { text-wrap: pretty; }
/* Ortsnamen und Adressen mit Bindestrich nicht am Strich trennen */
.nw { white-space: nowrap; }
/* ... auch in den Footer-Links ("Bad Vilbel", "Bad Nauheim"); dort sind
   Spans sonst eigene Zeilen (.footer-col span ist display: block) */
.footer-col a .nw { display: inline; margin: 0; font-size: inherit; color: inherit; }

/* Ueberschriftenzeile im Ortsseiten-Kopf: ausgeglichen umbrechen statt
   "AM STADTRAND VON / FRANKFURT" (ein Wort allein in Zeile 2) */
.page-hero .section-eyebrow { text-wrap: balance; }

/* Leistungsseite, Haus-Querschnitt: bei 1100-1350 px lief "Entruempelungen"
   27 px aus der schmalen Kopfspalte (wie zuvor beim Leistungsstapel) */
@media (min-width: 901px) { .haus-kopf .section-title { font-size: clamp(30px, 2.9vw, 44px); } }

/* 320-360 px (Check 10.09.2026): "Haushaltsaufloesung" lief bei 30 px
   7 px ueber den Rand, die Pfeile der Ortsknoepfe stiessen an den Rahmen,
   Aktionsknoepfe brachen um */
@media (max-width: 360px) {
  .section-title { font-size: 27px; }
  .orte-chips a { padding: 13px 10px 13px 12px; font-size: 13.5px; gap: 6px; }
  .btn { font-size: 14px; padding-left: 16px; padding-right: 16px; }
}

/* Abstand zwischen Ueberschrift und dem folgenden Baustein (war 12-16 px) */
.section-title + :is(.usp-grid, .service-rows, .orte-chips, .check-liste, .faq-list, .about-cards, .preis-grid, .compare-points) { margin-top: 32px; }

/* Startseite, Leistungsstapel: bei 901-1200 px ist die linke Spalte nur
   280 px breit, "Umweltbewusst," lief 22 px ueber den Rand */
.leist-kopf .section-title { font-size: clamp(28px, 2.9vw, 44px); }

/* FAQ mit ungerader Anzahl (Ortsseiten: 3): eine Spalte statt 2 + 1 */
.faq-list:has(> .faq-item:last-child:nth-child(odd)) { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
/* Ortsliste bei 901-1100 px: fuenf statt vier Spalten, 10 Orte = 2 volle Reihen */
@media (min-width: 901px) and (max-width: 1100px) {
  .orte-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .orte-chips a { padding: 13px 8px; font-size: 13.5px; }
}

/* Navigation: aktive Seite erkennbar (aria-current), auf hellem und
   dunklem Kopf gleichermassen */
.nav-links a[aria-current="page"]:not(.nav-cta) {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px;
}
.mobile-menu-links a[aria-current="page"] { color: var(--accent); font-weight: 800; }
/* Geschlossenes Handymenue ist nicht nur verschoben, sondern auch fuer
   Tastatur und Screenreader weg (vorher waren die Links per Tab erreichbar) */
.mobile-menu { visibility: hidden; transition: transform 0.4s var(--ease), visibility 0s linear 0.4s; }
.mobile-menu.is-open { visibility: visible; transition: transform 0.4s var(--ease), visibility 0s; }

/* Ohne JavaScript: Inhalte sichtbar, Scroll-Szenen als ruhige Uebersicht
   (die Regeln fuer reduzierte Bewegung gelten dann ebenfalls), FAQ offen,
   kein Menue-Knopf ohne Funktion - die Navigation steht im Footer. */
@media (scripting: none) {
  [data-sicht] { --p: 1; }
  [data-sicht="kopf"] { --p: 0; }
  [data-sicht="durch"] { --p: 0.5; }
  .faq-answer { max-height: none !important; }
  .faq-icon, .nav-toggle { display: none !important; }
}

/* Tastaturfokus auf dunklen Flaechen: weisser Rahmen (Akzentblau hatte
   dort nur 1,98:1, noetig sind 3:1) */
:is(.hero, .page-hero, .cta-banner, .contact-info) :is(a, button, input, textarea):focus-visible { outline-color: #fff; }
/* Formularfelder und Einwilligungs-Kaestchen: deutlicher Fokusrahmen
   (vorher nur 1 px Randfarbe, das Kaestchen hatte gar keinen) */
.contact-form :is(input, textarea):focus-visible,
.anfrage-sektion .contact-form :is(input, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Fester Kopf: Sprungziele und per Tab angesteuerte Elemente bleiben
   darunter sichtbar (beim Rueckwaerts-Tab rutschten Felder unter den Kopf).
   scroll-padding am Dokument ersetzt die scroll-margin-Werte. */
html { scroll-padding-top: 104px; }
:target, section[id], main[id], .faq-item { scroll-margin-top: 0; }
@media (max-width: 900px) { html { scroll-padding-top: 84px; } }

/* Gruene Abschluss-Pillen: weiss auf #16a34a hatte nur 3,3:1, jetzt 5:1 */
.raeum-fertig span { background: #15803d; }
/* Einwilligungs-Kaestchen: 24 x 24 px, Mindestgroesse fuer Tippziele nach
   WCAG 2.2 (2.5.8); vorher 20 px */
.form-check input[type="checkbox"] { width: 24px; height: 24px; flex: 0 0 24px; margin-top: 1px; accent-color: var(--accent); }

/* 404: beide Knoepfe gleich breit */
.page-hero .hero-actions { max-width: 480px; }
.page-hero .hero-actions .btn { flex: 1 1 200px; justify-content: center; text-align: center; }

@media (max-width: 900px) {
  /* Einleitung -> Baustein: 4-16 px waren zu eng */
  :is(.section-title, .section-lead) + :is(.usp-grid, .service-rows, .orte-chips, .check-liste, .faq-list, .about-cards, .preis-grid, .compare-points) { margin-top: 22px; }

  /* Footer: Spaltenueberschrift "Navigation" ueber beide Spalten statt
     neben dem ersten Link */
  .footer-col:has(a[href="leistungen.html"]) .footer-heading { grid-column: 1 / -1; }

  /* Leistungskarten: Symbol sitzt auf der Bildkante, der Text nutzt die
     ganze Breite (vorher 58 px eingerueckt, Schlagworte einzeln je Zeile) */
  .service-row .sr-text { display: block; position: relative; padding: 38px 20px 24px; }
  .service-row .service-icon-badge {
    position: absolute; top: -24px; left: 20px;
    border: 3px solid #fff; box-shadow: 0 8px 18px rgba(10,37,64,0.18);
  }

  /* Aufraeum-Szene: Inhalt senkrecht mittig statt Leerraum darunter */
  .raeum-buehne { align-content: safe center; }

  /* Mindestschrift 12 px */
  .raeum-stufen li { font-size: 12px; letter-spacing: -0.01em; }

  /* Tablet und Handy: Collage und Fotostapel nicht ueber die volle Breite
     (bei 768 px waren die Abzuege riesig, der Stapeltext fiel aus dem Bild) */
  .kopf-fotos { max-width: 520px; }
  .stapel-bahn.laeuft .lk-bild { max-width: 470px; }
  /* Haus-Querschnitt: senkrecht mittig statt oben mit Leerraum darunter */
  .haus-buehne { align-content: safe center; }
}

/* Handy quer (hoechstens 500 px hoch): Das Skript heftet dort keine Szene
   an, sie stehen als ruhige Uebersicht da (Check 10.09.2026: bei 844 x 390
   waren Bild und Text der angehefteten Szenen abgeschnitten). Aufraeum-Szene
   im breiten Motiv, die drei Leistungskarten nebeneinander. */
@media (orientation: landscape) and (max-height: 500px) {
  .raeum-szene--m { display: none; }
  .raeum-szene--d { display: block; max-height: none; }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) {
  .leist-stapel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  /* 667 px quer: "Haushaltsaufloesung" lief ueber den Kartenrand */
  .leist-stapel .lk-inhalt { padding: 18px 16px 20px; }
  .leist-stapel .lk-inhalt h3 { font-size: 16px; -webkit-hyphens: auto; hyphens: auto; }
  .leist-stapel .lk-inhalt p { font-size: 13.5px; }
}

/* Tablet (600-900 px): Karten nebeneinander statt einzeln mit Leerraum */
@media (min-width: 600px) and (max-width: 900px) {
  .usp-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .haus-szene { max-height: 40vh; }
  /* Bildstrecke mit ungerader Zahl: letztes Foto nicht allein links */
  .strecke figure:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
  /* Drei Ablauf-Schritte passen nebeneinander, mit Verbindungslinie */
  .ablauf--3 { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .ablauf--3::before { display: block; top: 43px; }   /* Mitte der Schrittpunkte bei kompakter Karte */
}
/* <<< FORMAT-FEINSCHLIFF <<< */


/* ---------- Hinweis „powered by MWW Consulting" direkt über dem Footer ---------- */
.mww-credit {
  display: flex; justify-content: center;
  padding: 22px 24px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.mww-credit .mww-pille {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 12px; letter-spacing: 0.03em;
  color: var(--text-secondary);
}
.mww-credit .mww-pille strong { color: var(--ink); font-weight: 700; }