@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: 640px) {
  .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: 640px) {
  .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: 640px) {
  .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 <<< */




/* ---------- 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; }
/* 15.09.2026: Hinweis verlinkt auf die MWW-Seite zu Websites (Wunsch Nevio) */
.mww-credit a.mww-pille { position: relative; transition: border-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.mww-credit a.mww-pille:hover { border-color: var(--accent); color: var(--ink); box-shadow: var(--schatten-s); }
.mww-credit a.mww-pille:hover strong { color: var(--accent); }
/* Touch: Trefferflaeche 44 px hoch, ohne die Pille zu vergroessern */
@media (pointer: coarse) {
  .mww-credit a.mww-pille::before { content: ""; position: absolute; left: -6px; right: -6px; top: -8px; bottom: -8px; }
}


/* >>> 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; }
}

/* Querformat bis 640 px Hoehe (Handy quer, niedrige Fenster; bis 14.09.2026:
   500 px): 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; Check 14.09.2026: ebenso bei 1280 x 600).
   Aufraeum-Szene im breiten Motiv, die drei Leistungskarten nebeneinander. */
@media (orientation: landscape) and (max-height: 640px) {
  .raeum-szene--m { display: none; }
  .raeum-szene--d { display: block; max-height: none; }
}
@media (orientation: landscape) and (max-height: 640px) 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 */
}

/* Erreichbarkeitszeiten im Footer (23.09.2026, aus dem Google-Unternehmensprofil) */
.footer-zeiten { margin: 2px 0 10px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.footer-zeiten span { display: inline; margin: 0; font-size: inherit; color: inherit; }

/* Einwilligungsbanner mit zwei gleichwertigen Knoepfen (23.09.2026) */
.hinweis-knoepfe { display: flex; gap: 10px; flex: 0 0 auto; }
.hinweis-btn--ablehnen {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.45);
}
.hinweis-btn--ablehnen:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.7); color: #fff; }
@media (max-width: 640px) {
  .hinweis-knoepfe { width: 100%; order: 3; }
  .hinweis-knoepfe .hinweis-btn { flex: 1 1 0; width: auto; }
}
/* <<< FORMAT-FEINSCHLIFF <<< */

/* >>> RESPONSIVE-SYSTEM >>> */
/* ======================================================================
   RESPONSIVE-SYSTEM (Check und Ueberarbeitung vom 14.09.2026)
   Ein fliessendes System statt Einzelloesungen, bewusst ganz am Ende:
   - Masse als Variablen: Seitenrand, Inhaltsbreite, Abstaende, Schrift
   - 320 bis 1440 px: bisheriges Erscheinungsbild, die Spruenge an den
     alten Umbruchpunkten (600/900 px) sind geglaettet
   - ab 1440 px waechst alles massvoll mit bis 2560 px (--f: 0 bis 1 px),
     damit Texte auf 24- und 27-Zoll-Monitoren nicht verloren wirken
   - gezielte Korrekturen aus dem Responsive-Check (siehe Bericht)
   Quelle: NICHT-HOCHLADEN/werkzeuge/responsiv.css, eingefuegt von typografie.py
   ====================================================================== */

/* ---------- 1. Grundlagen ---------- */
:root {
  --rand: clamp(18px, 7.5vw - 3px, 24px);     /* 320 px: 21 px, ab 360 px: 24 px */
  --inhalt: 1112px;                            /* Inhaltsbreite wie bisher (1160 - 2 x 24) */
  --f: 0px;                                    /* Wachstum grosser Bildschirme, 0 bis 1 px */
}
@media (min-width: 700px) {
  :root { --rand: clamp(24px, 4vw - 4px, 40px); }   /* Tablet 768: 27 px, ab 1100 px: 40 px */
}
@media (min-width: 1441px) {
  :root {
    --f: clamp(0px, (100vw - 1440px) / 1120, 1px);  /* 1440 px: 0, 2560 px: 1 px */
    --inhalt: calc(1112px + 208 * var(--f));        /* 2560 px: 1320 px */
  }
}

/* iOS vergroessert Schrift im Querformat sonst eigenmaechtig */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

.container {
  max-width: calc(var(--inhalt) + 2 * var(--rand));
  padding-left: var(--rand); padding-right: var(--rand);
}

/* Sektionsabstand fliessend: 56 px (Handy) - 100 px (1440 px) - 120 px (2560 px).
   Vorher sprang er bei 900 px von 56 auf 100 px. */
section {
  padding-top: calc(clamp(56px, 5vw + 28px, 100px) + 20 * var(--f));
  padding-bottom: calc(clamp(56px, 5vw + 28px, 100px) + 20 * var(--f));
}

/* ---------- 2. Typografie ---------- */
/* Zwischenueberschriften: 26 px (320) - 27 (390) - 33 (768) - 37 (1024) - 44 (1440) - 56 (2560).
   Vorher 27 / 30 / 30 / 37 / 44 px mit Spruengen bei 360 und 900 px. */
.section-title { font-size: calc(clamp(26px, 20.86px + 1.607vw, 44px) + 12 * var(--f)); max-width: calc(640px + 200 * var(--f)); }
.section-lead { font-size: calc(16px + 2.5 * var(--f)); max-width: calc(620px + 160 * var(--f)); }

/* Startseite, Kopf: 29 px (320) - 34 (390) - 40 (ab 470) ... zweispaltig 4,1vw bis 55 px, 2560: 68 px */
@media (max-width: 900px) {
  .hero--foto h1 { font-size: clamp(29px, 7.2vw + 6px, 40px); }
}
@media (min-width: 901px) {
  .hero--foto h1 { font-size: calc(clamp(34px, 4.1vw, 55px) + 13 * var(--f)); }
}
.hero--foto .hero-lead { font-size: calc(clamp(16px, 15.4px + 0.14vw, 17px) + 3 * var(--f)); max-width: calc(520px + 150 * var(--f)); }
.hero--foto .hero-text { max-width: calc(620px + 180 * var(--f)); }

/* Unterseiten-Kopf: 26 px (320) - 28 (390) - 40 (768) - 52 px (ab 1120 px), 2560: 64 px.
   Vorher 28 px bis 600 px und dann ein Sprung auf 32 px. */
.page-hero h1 { font-size: clamp(26px, 3.3vw + 15px, 44px); max-width: calc(720px + 200 * var(--f)); }
/* ab 901 px steht der Kopf neben der Collage: Groesse folgt der Textspalte
   (bei 910-950 px lief "Haushaltsaufloesung" 9 px ueber die Spalte) */
@media (min-width: 901px) {
  .page-hero h1 { font-size: calc(clamp(34px, 3.9vw, 52px) + 12 * var(--f)); }
}
.page-hero p { font-size: calc(clamp(16px, 15px + 0.2vw, 17.5px) + 2.5 * var(--f)); max-width: calc(600px + 160 * var(--f)); }
/* Dachzeile im Kopf: auf dem Handy 14 statt 17,5 px (war groesser als der Einleitungstext) */
.page-hero .section-eyebrow { font-size: calc(clamp(14px, 12.6px + 0.34vw, 17.5px) + 1.5 * var(--f)); margin-bottom: 18px; }
/* Sehr schmale Handys: lange Woerter in Ueberschriften trennen statt ueberstehen lassen */
@media (max-width: 360px) {
  h1, h2, .section-title { -webkit-hyphens: auto; hyphens: auto; }
}
.page-hero .hero-lead { font-size: calc(clamp(16px, 15.4px + 0.14vw, 17px) + 3 * var(--f)); }

/* Fliesstext in Karten: mindestens 15 px (vorher 14-14,5 px) */
.usp-card p, .about-card p, .preis-karte p, .schritt p, .lk-inhalt p, .service-row p,
.check-liste li, .anfrage-punkte li, .story-schritte p {
  font-size: calc(15px + 1.5 * var(--f));
}
/* Handy: Fliesstext mindestens 16 px (Website-Livegang-Check, Abschnitt 13) */
@media (max-width: 600px) {
  .usp-card p, .about-card p, .preis-karte p, .schritt p, .lk-inhalt p, .service-row p,
  .check-liste li, .anfrage-punkte li, .story-schritte p { font-size: 16px; }
}
/* FAQ-Antworten und Rechtstexte sind Lesetext: 16 bzw. 15,5 px (Handy 16 px) */
.faq-answer-inner { font-size: calc(16px + 1.5 * var(--f)); line-height: 1.7; }
.faq-question { font-size: calc(15.5px + 1.5 * var(--f)); }

/* Rechtstexte: Zeilenlaenge begrenzt (vorher bis 106 Zeichen je Zeile) */
.legal-content { max-width: calc(38em + 24 * var(--f)); }
.legal-content p, .legal-content li { font-size: calc(15.5px + 1.5 * var(--f)); line-height: 1.75; }
.legal-content h2 { font-size: calc(20px + 3 * var(--f)); }
.legal-content h3 { font-size: calc(16px + 2 * var(--f)); }
@media (max-width: 600px) { .legal-content p, .legal-content li { font-size: 16px; } }

/* Formulare: 16 px, sonst zoomt iOS beim Antippen des Feldes heran */
.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"], .form-group textarea,
.contact-form input, .contact-form textarea, .contact-form select { font-size: 16px; }
.form-group label { font-size: 14px; }
/* iOS: keine systemeigenen Rundungen und Innenschatten ueber dem eigenen Feldstil */
.contact-form input:not([type="checkbox"]):not([type="hidden"]), .contact-form textarea { -webkit-appearance: none; appearance: none; }
.form-check label { font-size: 14px; }

/* ---------- 3. Navigation ---------- */
/* Logo-Link: 44 px Tippflaeche, ohne die Leiste hoeher zu machen */
.nav-brand { padding-top: 5px; padding-bottom: 5px; margin-top: -5px; margin-bottom: -5px; }
.nav-toggle { flex-shrink: 0; }
/* Touch-Geraete mit Desktop-Leiste (iPad quer, grosse Handys quer): 44 px hohe Ziele */
@media (pointer: coarse) {
  .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; }
}
/* Handy quer (hoechstens 500 px hoch): kompakte Leiste, sonst frisst sie ein Viertel des Bildes */
@media (orientation: landscape) and (max-height: 500px) {
  .nav, .nav.is-stuck { padding-top: 8px; padding-bottom: 8px; }
}

/* Handymenue: war im Querformat und auf kleinen Handys zu hoch und nicht
   scrollbar - Menuepunkte und Beratungsknopf lagen unerreichbar ausserhalb.
   Jetzt fliessende Groessen nach Bildschirmhoehe und notfalls scrollbar. */
.mobile-menu {
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: clamp(76px, 13vh, 110px) var(--rand) clamp(20px, 5vh, 48px);
  gap: clamp(16px, 4vh, 32px);
}
.mobile-menu-links a { font-size: clamp(20px, 3.4vh + 4px, 28px); padding: clamp(9px, 1.9vh, 16px) 0; }
.mobile-menu-footer { gap: clamp(8px, 2vh, 20px); }
.mobile-menu-footer a:first-child { display: inline-flex; align-items: center; min-height: 44px; }
@media (orientation: landscape) and (max-height: 500px) {
  .mobile-menu { padding-top: 68px; justify-content: flex-start; }
  .mobile-menu-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .mobile-menu-links a { font-size: 19px; padding: 10px 0; }
  .mobile-menu-footer { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}

/* Grosse Bildschirme: Leiste waechst mit */
.nav-logo { font-size: calc(14px + 2 * var(--f)); }
.nav-links a { font-size: calc(14px + 2 * var(--f)); }
@media (min-width: 1441px) {
  .nav-links a { padding-left: calc(16px + 4 * var(--f)); padding-right: calc(16px + 4 * var(--f)); }
  .nav .nav-brand img.nav-mark, .nav.is-stuck .nav-brand img.nav-mark {
    width: calc(34px + 6 * var(--f)) !important; height: calc(34px + 6 * var(--f)) !important;
    min-width: 0; max-width: none; min-height: 0; max-height: none; flex: 0 0 auto;
  }
}

/* ---------- 4. Seitenkoepfe ---------- */
/* Der Kopf ist ein Flex-Container: ohne volle Breite schrumpfte der Inhalt
   auf dem Tablet auf seine Textbreite und stand 104 px statt 27 px vom Rand */
.hero--foto .container { width: 100%; }
@media (max-width: 900px) {
  /* Knoepfe im Kopf nicht ueber die ganze Tablet-Breite ziehen */
  .hero--foto .hero-actions { max-width: 520px; }
}
/* Unter 350 px untereinander (die alte 340-px-Regel wurde spaeter ueberschrieben:
   bei 300-310 px war "Kostenlose Beratung" angeschnitten) */
@media (max-width: 350px) {
  .hero--foto .hero-actions { grid-template-columns: minmax(0, 1fr); }
}
/* Handy quer: weniger Luft ueber dem Kopftext */
@media (orientation: landscape) and (max-height: 500px) {
  .hero--foto { padding-top: 84px; padding-bottom: 44px; }
  .page-hero { padding-top: 88px; padding-bottom: 40px; }
  .page-hero--fotos { padding-top: 88px; }
}
/* Grosse Bildschirme: Kopf hoeher, Karte und Kopfzeilen wachsen mit */
.hero--foto { min-height: min(88vh, 760px + 240 * var(--f)); min-height: min(88svh, 760px + 240 * var(--f)); }
@media (max-width: 900px) {
  .hero--foto { min-height: min(92svh, 760px); }
}
.hero-panel { max-width: calc(420px + 110 * var(--f)); }
.hp-nummer { font-size: calc(clamp(26px, 3vw, 33px) + 7 * var(--f)); }
.hp-zeit, .hp-liste li { font-size: calc(14px + 2 * var(--f)); }
.hero-trust li { font-size: calc(13px + 2 * var(--f)); }
.page-hero { padding-top: calc(178px + 30 * var(--f)); padding-bottom: calc(92px + 28 * var(--f)); }
.page-hero--fotos { padding-top: calc(150px + 30 * var(--f)); padding-bottom: calc(88px + 28 * var(--f)); }
@media (max-width: 900px) {
  .page-hero { padding-top: 118px; padding-bottom: 52px; }
  .page-hero--fotos { padding-top: 118px; padding-bottom: 46px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .page-hero, .page-hero--fotos { padding-top: 88px; padding-bottom: 40px; }
}
@media (pointer: coarse) {
  .hp-nummer { display: flex; align-items: center; min-height: 44px; }
}

/* Mobiles Titelbild: eigener Hochformat- bzw. Quadrat-Ausschnitt (index.html,
   <picture>). Im Querformat-Ausschnitt blieb auf dem Handy nur ein schmaler
   Streifen Karton, auf 3x-Displays 4-fach hochgerechnet. */
.hero-media picture { display: block; width: 100%; height: 100%; }

/* ---------- 5. Ortsseiten: Karte "Unterwegs in" nie abschneiden ----------
   Vorher lag die Karte absolut in einem Rahmen mit festem Seitenverhaeltnis;
   bei vielen Ortsteilen (Karben 7, Florstadt 6) wurde sie hoeher als der
   Rahmen und vom Seitenkopf abgeschnitten (300-390 px und 910-950 px).
   Jetzt steht sie im Fluss: Der Rahmen haelt sein Mindestseitenverhaeltnis
   ueber einen Platzhalter und waechst mit, wenn die Karte mehr Platz braucht.
   Fotos und Karte behalten ihre Position (Werte aus --y in cqw umgerechnet). */
.page-hero--ort .kopf-fotos { aspect-ratio: auto; display: flow-root; container-type: inline-size; }
.page-hero--ort .kopf-fotos::before { content: ""; float: left; width: 0; padding-top: 90%; }       /* 10 : 9 */
.page-hero--ort .kf--a { top: 8.1cqw; }                                                            /* 9 % von 90 % */
.page-hero--ort .kf--orte { position: relative; left: auto; top: auto; width: var(--w); margin: 54% 0 0 var(--x); }  /* 60 % von 90 % */
@media (max-width: 900px) {
  .page-hero--ort .kopf-fotos::before { padding-top: 68.75%; }                                     /* 16 : 11 */
  .page-hero--ort .kf--a { top: 8.94cqw; }                                                         /* 13 % von 68,75 % */
  .page-hero--ort .kf--orte { margin-top: 34.4%; }                                                 /* 50 % von 68,75 % */
}
@media (max-width: 420px) {
  /* schmale Handys: Karte etwas breiter, damit die Ortsteile zu zweit in eine Zeile passen */
  .page-hero--ort .kf--orte { --x: 24%; --w: 66%; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  /* schmale Collage-Spalte: Karte breiter, sonst steht jeder Ortsteil einzeln */
  .page-hero--ort .kf--orte { --x: 22%; --w: 62%; }
}

/* Bildunterschriften der Collage: nie breiter als das Foto (300-360 px liefen
   "Fahrradkeller", "Kompaktlader", "Schlafzimmer" ueber den Rand) */
.kf figcaption { max-width: calc(100% - 20px); }
@media (max-width: 420px) {
  .kf--b figcaption {
    left: 6px; max-width: calc(100% - 12px); padding: 4px 8px; gap: 0; border-radius: 9px;
    white-space: normal; line-height: 1.15; -webkit-hyphens: auto; hyphens: auto;
  }
  .kf--b figcaption::before { display: none; }
}

/* ---------- 6. Raster und Karten ---------- */
/* Tablet 561-900 px: Karten zu zweit; bei ungerader Zahl ueberspannt die
   letzte Karte beide Spalten (vorher 600-680 px: 2 + 1 mit Luecke) */
@media (min-width: 561px) and (max-width: 900px) {
  .usp-grid, .preis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .usp-grid > :last-child:nth-child(odd), .preis-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .check-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .check-liste > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* ab 760 px passen drei Karten nebeneinander: 3 und 6 Karten ohne Rest */
@media (min-width: 760px) and (max-width: 900px) {
  .usp-grid:has(> :nth-child(3):last-child), .usp-grid:has(> :nth-child(6):last-child),
  .preis-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .usp-grid:has(> :nth-child(3):last-child) > :last-child, .preis-grid:has(> :nth-child(3):last-child) > :last-child { grid-column: auto; }
}
/* Ablauf in drei Schritten: ab 650 px nebeneinander; 561-649 px zu zweit,
   der dritte Schritt ueber die volle Breite (vorher 2 + 1 mit Luecke) */
@media (min-width: 561px) and (max-width: 649px) {
  .ablauf--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ablauf--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ablauf--3::before { display: none; }
}
@media (min-width: 650px) and (max-width: 900px) {
  .ablauf--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .ablauf--3::before { display: block; top: 43px; }
}
/* Ablauf in vier Schritten bei 901-1000 px: "Kostenvoranschlag" passte nicht in die Karte */
@media (min-width: 901px) and (max-width: 1000px) {
  .ablauf { gap: 16px; }
  .ablauf .schritt { padding-left: 12px; padding-right: 12px; }
}
/* Bildstrecke: alle Fotos einer Reihe gleich hoch (das erste war 4:3, die
   uebrigen 16:10), ungerade letzte Aufnahme ab 561 px ueber die volle Breite */
@media (max-width: 640px) {
  .strecke figure:nth-child(1) { aspect-ratio: 16 / 10; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .strecke figure:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
}

/* Partnerlogo: war auf dem Handy auf 43 x 64 px gestaucht */
.partner-marke-kopf picture { display: block; flex: 0 0 auto; }

/* Ortsknoepfe unter 350 px: Namen nicht mehr abgeschnitten ("Bad Nauheim") */
@media (max-width: 350px) {
  .orte-chips { gap: 8px; }
  .orte-chips a { padding: 13px 8px 13px 10px; font-size: 13px; gap: 4px; }
}

/* Knoepfe: kein Umbruch mitten im Knopf; reicht der Platz nicht, rutscht der
   ganze Knopf in die naechste Zeile (910 px: "06034 92115 anrufen", 470 px: Danke/404) */
.cta-banner-actions .btn, .page-hero .hero-actions .btn { white-space: nowrap; }
.page-hero .hero-actions .btn { flex: 1 1 auto; }
@media (min-width: 901px) {
  .cta-banner--split { grid-template-columns: minmax(0, 1.3fr) minmax(max-content, 0.7fr); }
}

/* Kontaktseite 901-1100 px: Adresszeilen passten nicht in die schmale Infospalte
   (Firefox setzt die gesperrte Grossschrift noch etwas breiter) */
@media (min-width: 901px) and (max-width: 1100px) {
  .contact-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .contact-info { padding: 36px 24px; }
  .contact-form { padding: 36px 30px; }
}
/* Formularfelder duerfen ihre Spalte nie verbreitern: Firefox gab den Feldern
   eine Mindestbreite, bei 320 px ragte das Formular 46 px aus der Karte */
.contact-panel > *, .anfrage-sektion .container > * { min-width: 0; }
.contact-form input:not([type="checkbox"]):not([type="hidden"]), .contact-form textarea { width: 100%; min-width: 0; max-width: 100%; }
/* Danke-Seite: Textbreite waechst auf grossen Bildschirmen mit der Schrift */
.confirm-hero .container { max-width: calc(560px + 240 * var(--f)); }

/* ---------- 7. Scroll-Szenen ---------- */
/* Hoehe am kleinsten sichtbaren Bildschirm ausrichten (iOS: Adressleiste
   eingeblendet). 100vh ist dort der grosse Bildschirm - der untere Rand der
   angehefteten Szenen lag hinter der Leiste. */
.raeum-buehne, .leist-buehne, .haus-buehne, .weg-buehne,
.story-bahn.laeuft .story-buehne, .stapel-bahn.laeuft .stapel-buehne { height: 100vh; height: 100svh; }
.raeum-szene--d { max-height: calc(100vh - 300px); max-height: calc(100svh - 300px); }
.haus-szene { max-height: calc(100vh - 150px); max-height: calc(100svh - 150px); }
.leist-stapel { height: min(560px + 140 * var(--f), calc(100vh - 220px)); height: min(560px + 140 * var(--f), calc(100svh - 220px)); max-width: calc(560px + 140 * var(--f)); }
@media (max-width: 900px) {
  .leist-stapel { height: calc(100vh - 330px); height: calc(100svh - 330px); }
  .haus-szene { max-height: 32vh; max-height: 32svh; }
  .raeum-szene--m { max-height: calc(100vh - 240px); max-height: calc(100svh - 240px); }
}
@media (min-width: 600px) and (max-width: 900px) {
  .haus-szene { max-height: 40vh; max-height: 40svh; }
}
@media (prefers-reduced-motion: reduce), (scripting: none), (orientation: landscape) and (max-height: 640px) {
  .raeum-buehne, .leist-buehne, .haus-buehne, .weg-buehne { height: auto; }
  .leist-stapel { height: auto; max-width: none; }
  .raeum-szene--d { max-height: none; }
  .haus-szene { max-height: calc(100vh - 150px); max-height: calc(100svh - 150px); }
  .leist-buehne { max-width: none; }
}
@media (orientation: landscape) and (max-height: 640px) {
  .haus-szene { max-height: 70vh; max-height: 70svh; }
}

/* Tablet hoch: Buehnen mit demselben Seitenrand wie der uebrige Inhalt
   (vorher 16 bzw. 20 px, der Rest der Seite 27-32 px) */
@media (min-width: 600px) and (max-width: 900px) {
  .raeum-buehne, .leist-buehne, .haus-buehne { padding-left: var(--rand); padding-right: var(--rand); }
}
/* Buehnen der Scroll-Szenen: Text buendig mit dem Inhalt der uebrigen
   Abschnitte (vorher 5-6vw vom Rand, auf 2560 px ganz links), das Bild darf
   bis zu 80 px (2560 px: 300 px) breiter werden, bleibt aber mindestens
   5-6vw vom Rand weg. Unter 1200 px bleibt alles wie bisher. */
@media (min-width: 901px) {
  .raeum-buehne, .leist-buehne, .haus-buehne {
    --rp: max(var(--rmin), (100vw - var(--inhalt)) / 2);
    --aus: clamp(0px, var(--rp) - var(--rmin), 80px + 220 * var(--f));
  }
  .raeum-buehne { --rmin: 5vw; padding-left: var(--rp); padding-right: var(--rp); }
  .raeum-bild { margin-left: calc(-1 * var(--aus)); margin-right: calc(-1 * var(--aus)); }
  .leist-buehne, .haus-buehne { --rmin: 6vw; padding-left: var(--rp); padding-right: calc(var(--rp) - var(--aus)); }
}
/* Haus-Querschnitt: Kopfspalte breiter, seit sie buendig mit dem Inhalt steht
   (sonst lief "Entruempelungen" ab 1450 px 8 px ueber die Spalte) */
@media (min-width: 1101px) {
  .haus-buehne { grid-template-columns: minmax(340px, 0.5fr) 1fr; }
}
/* Rueckbau-Strecke (Ueber uns) auf Tablets: Foto nicht hoeher als der Bildschirm
   hergibt (860-900 px Breite: Schritttext unten abgeschnitten) */
@media (max-width: 900px) {
  .story-bahn.laeuft .sb-rahmen { max-height: max(200px, 100vh - 400px); max-height: max(200px, 100svh - 400px); }
}
/* Niedrige Bildschirme im Hochformat: iPhone SE zeigt mit eingeblendeter
   Safari-Leiste nur rund 375 x 550 px (1. Generation 320 x 460), dazu flache
   Fenster bis 900 px Breite. Die angehefteten Szenen werden dort verdichtet,
   damit Foto, Text und Fortschrittsleiste ganz ins Bild passen. */
@media (max-width: 900px) and (max-height: 700px) {
  .stapel-bahn.laeuft .lk-bild { width: min(90%, 52svh); margin-bottom: 28px; }
  .stapel-bahn.laeuft .st-nr b { font-size: 30px; }
  .stapel-bahn.laeuft .st-leiste { margin-top: 12px; }
}
@media (max-width: 900px) and (max-height: 600px) {
  .stapel-bahn.laeuft .stapel-buehne, .story-bahn.laeuft .story-buehne { padding-top: 72px; padding-bottom: 10px; }
  .stapel-bahn.laeuft .lk-bild { width: min(90%, 44svh); margin-bottom: 22px; }
  .stapel-bahn.laeuft .lk-inhalt h3 { font-size: 20px; margin-bottom: 6px; }
  .stapel-bahn.laeuft .lk-inhalt p { font-size: 14px; line-height: 1.5; }
  .stapel-bahn.laeuft .st-nr { margin-bottom: 4px; }
  .stapel-bahn.laeuft .st-nr b { font-size: 24px; }
  .story-bahn.laeuft .sb-rahmen { max-height: max(140px, 100svh - 430px); }
  .story-bahn.laeuft .story-raster { gap: 10px; }
  .story-bahn.laeuft .story-text .section-title { font-size: 24px; }
  .story-bahn.laeuft .story-schritte li { padding: 10px 12px; }
  .story-bahn.laeuft .story-schritte p { font-size: 14px; line-height: 1.45; }
  .haus-szene { max-height: 24svh; }
  .haus-liste { gap: 6px; }
  .haus-kopf .section-title { font-size: 23px; }
}

/* Aufraeum-Szene unter 340 px: Phasennamen passten nicht in die vier Felder */
@media (max-width: 340px) {
  .raeum-buehne { padding-left: 12px; padding-right: 12px; }
  .raeum-stufen li { padding-left: 0; padding-right: 0; letter-spacing: -0.02em; }
}
@media (min-width: 1441px) {
  .raeum-kopf { max-width: calc(640px + 160 * var(--f)); }
  .leist-kopf { max-width: calc(520px + 160 * var(--f)); }
  .leist-kopf .section-title, .haus-kopf .section-title { font-size: calc(44px + 12 * var(--f)); }
  .weg-karten { --kw: calc(360px + 110 * var(--f)); }
  .weg-leiste { width: calc(720px + 240 * var(--f)); }
  .weg-karte h3 { font-size: calc(21px + 3 * var(--f)); }
  .weg-karte p, .leist-punkte li, .haus-liste p { font-size: calc(15.5px + 1.5 * var(--f)); }
  .haus-liste h3, .story-schritte h3 { font-size: calc(17px + 2 * var(--f)); }
  .stapel-bahn.laeuft .lk-inhalt h3 { font-size: calc(34px + 8 * var(--f)); }
  .stapel-bahn.laeuft .lk-inhalt p { font-size: calc(17px + 2 * var(--f)); max-width: calc(440px + 120 * var(--f)); }
  .stapel-bahn.laeuft .lk-bild { max-width: calc(620px + 160 * var(--f)); }
  .raeum-stufen li { font-size: calc(13.5px + 1.5 * var(--f)); }
}

/* ---------- 8. Grosse Bildschirme: Karten, Knoepfe, Kleinteile ---------- */
@media (min-width: 1441px) {
  .btn { font-size: calc(15px + 2 * var(--f)); padding: calc(15px + 3 * var(--f)) calc(28px + 6 * var(--f)); }
  .section-eyebrow { font-size: calc(12.5px + 1.5 * var(--f)); }
  .usp-card h3, .preis-karte h3, .schritt h3, .service-row h3, .lk-inhalt h3 { font-size: calc(17px + 3 * var(--f)); }
  .lk-inhalt h3, .service-row h3 { font-size: calc(19px + 3 * var(--f)); }
  .usp-card, .preis-karte { padding: calc(30px + 8 * var(--f)) calc(26px + 8 * var(--f)); }
  .kk strong { font-size: calc(16px + 2 * var(--f)); }
  .contact-info-item p, .contact-info-item a, .anfrage-alternativ { font-size: calc(15px + 2 * var(--f)); }
  .cta-banner p, .cta-banner--split p { font-size: calc(16px + 2 * var(--f)); max-width: calc(520px + 60 * var(--f)); }
  .cta-banner h2, .cta-banner--split h2 { font-size: calc(36px + 8 * var(--f)); }
  .tag-list li, .kf figcaption { font-size: calc(12.5px + 1.5 * var(--f)); }
  .orte-chips a { font-size: calc(14.5px + 1.5 * var(--f)); }
  .footer-grid p, .footer-col a, .footer-col span { font-size: calc(14px + 1.5 * var(--f)); }
  .footer-heading, .footer-col h4 { font-size: calc(12px + 1.5 * var(--f)); }
  .footer-bottom { font-size: calc(13px + 1.5 * var(--f)); }
  .form-group label { font-size: calc(14px + 1 * var(--f)); }
  .brotkrumen { font-size: calc(13.5px + 1.5 * var(--f)); }
  .kopf-raster { gap: calc(56px + 40 * var(--f)); }
  .kf-karte-liste li { font-size: calc(15px + 2 * var(--f)); }
  .kf-orte-liste li { font-size: calc(13px + 1.5 * var(--f)); }
}

/* ---------- 9. Footer ---------- */
/* Tippflaechen: 44 px auf Touch-Geraeten und schmalen Fenstern, sonst 26 px
   (gleicher Zeilenabstand wie vorher: 18 px Link + 8 px Abstand) */
.footer-col a { padding-top: 4px; padding-bottom: 4px; margin-bottom: 0; }
.footer-bottom a { display: inline-block; padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 900px), (pointer: coarse) {
  .footer-col a { padding-top: 13px; padding-bottom: 13px; }
  .footer-bottom a { padding-top: 14px; padding-bottom: 14px; }
}
/* Handy: Kontakt und Rechtliches ab 360 px nebeneinander, Ortsliste ab 400 px
   zweispaltig (darunter passen die Ortsnamen nicht in eine halbe Zeile) */
@media (min-width: 360px) and (max-width: 560px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .footer-grid > :nth-child(-n+3) { grid-column: 1 / -1; }
}
@media (min-width: 400px) and (max-width: 560px) {
  .footer-col--regionen { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .footer-col--regionen .footer-heading { grid-column: 1 / -1; }
}
/* Tablet: zwei Spalten statt einer langen Liste */
@media (min-width: 561px) and (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px;
    grid-template-areas: "marke marke" "nav orte" "kontakt orte" "recht orte";
  }
  .footer-grid > :nth-child(1) { grid-area: marke; }
  .footer-grid > :nth-child(2) { grid-area: nav; }
  .footer-grid > :nth-child(3) { grid-area: orte; }
  .footer-grid > :nth-child(4) { grid-area: kontakt; }
  .footer-grid > :nth-child(5) { grid-area: recht; }
}
/* Kleine Notebooks und Tablets quer: Marke oben, vier Spalten darunter
   (vorher fuenf schmale Spalten, Ortsnamen zweizeilig, E-Mail zu breit) */
@media (min-width: 901px) and (max-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-grid > :first-child { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
  .footer-grid > :first-child .footer-logo { margin: 0; }
}
@media (min-width: 1101px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.3fr 1fr 0.85fr; }
}

/* ---------- 10. Datenschutzhinweis beim Erstbesuch ----------
   Handy: Text und Knopf nebeneinander, ohne Symbol. Vorher deckte der Hinweis
   27-40 % des Bildschirms samt Kopf-Knoepfen ab. */
@media (max-width: 640px) {
  .hinweis-banner { left: 10px; right: 10px; bottom: 10px; padding: 14px 14px 14px 16px; border-radius: 14px; }
  /* Seit 23.09.2026 sind es zwei gleichwertige Knoepfe (Ablehnen/Zustimmen).
     Sie stehen deshalb unter dem Text, nicht daneben. */
  .hinweis-inner { flex-wrap: wrap; gap: 12px; align-items: center; }
  .hinweis-icon { display: none; }
  .hinweis-banner p { order: 0; flex: 1 1 100%; min-width: 0; font-size: 12.5px; line-height: 1.5; }
  .hinweis-knoepfe { order: 1; width: 100%; gap: 10px; }
  .hinweis-btn { width: auto; flex: 1 1 0; min-height: 44px; padding: 10px 14px; font-size: 13.5px; white-space: nowrap; }
}
@media (max-width: 359px) {
  .hinweis-knoepfe { flex-wrap: wrap; }
  .hinweis-btn { flex: 1 1 100%; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .hinweis-banner { max-width: 760px; padding-top: 10px; padding-bottom: 10px; }
  .hinweis-icon { display: none; }
}

/* ---------- 11. Tippflaechen und Touch ---------- */
/* Brotkrumen-Link: 44 px Trefferflaeche ohne Layoutverschiebung */
.brotkrumen a { position: relative; }
.brotkrumen a::before { content: ""; position: absolute; left: -6px; right: -6px; top: -8px; bottom: -8px; }
/* Hover-Spruenge bleiben auf Touch-Geraeten nach dem Antippen haengen */
@media (hover: none) {
  .lk:not(.leist-stapel .lk):hover, .usp-card:hover, .service-row:hover, .kk:hover,
  .orte-chips a:hover, .tag-list li:hover, .hero-trust li:hover,
  .btn-primary:hover, .btn-on-dark:hover, .btn-submit:hover, .dunkel .usp-card:hover { transform: none; }
  .lk:not(.leist-stapel .lk):hover .lk-bild img, .service-row:hover .sr-bild img, .service-row:hover .service-icon-badge { transform: none; }
}

/* ---------- 16. Mindestschriftgroesse am Handy (23.09.2026) ----------
   „Unterwegs in“, „Standorte“ und die Zwischentitel der Kontaktkarten
   standen bei 11,5 px. Unter 12 px wird Text auf dem Handy schwer lesbar. */
@media (max-width: 900px) {
  .kf-karte-titel, .ci-titel { font-size: 12.5px; }
}
/* <<< RESPONSIVE-SYSTEM <<< */