@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) {
  [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) { .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) {
.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) {
  .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 ---------- */
.process-track { position: relative; height: 4px; background: var(--border); border-radius: 999px; margin: 0 0 40px; overflow: hidden; }
.process-track-fill {
  position: absolute; inset: 0; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  border-radius: 999px;
  transition: width 1.4s var(--ease);
}
.process-track.is-visible .process-track-fill { width: 100%; }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.process-steps--6 { grid-template-columns: repeat(3, 1fr); }
.process-step { position: relative; padding: 32px 24px 24px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 4px 16px rgba(16,24,40,0.06); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.process-step:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(16,24,40,0.08); }
.process-step-num {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
  transition: transform 0.4s var(--ease);
}
.process-step:hover .process-step-num { transform: scale(1.12) rotate(-6deg); }
.process-step h3 { font-size: 16px; font-weight: 800; margin: 0 0 8px; color: var(--ink); }
.process-step p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0; }

/* ---------- 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; }
  .process-steps { grid-template-columns: 1fr 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) {
  .process-steps { grid-template-columns: 1fr; }
  .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) {
  .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, .dunkel .process-step {
  background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); box-shadow: none;
}
.dunkel .usp-card:hover, .dunkel .process-step:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.28); box-shadow: none; }
.dunkel .usp-card h3, .dunkel .process-step h3 { color: #fff; }
.dunkel .usp-card p, .dunkel .process-step 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 ---------- */
.process-step { overflow: hidden; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--schatten-s); }
.process-step::after {
  content: attr(data-nr); position: absolute; right: 8px; bottom: -22px;
  font-size: 96px; font-weight: 800; line-height: 1; color: rgba(20,84,140,0.07); pointer-events: none;
}
.process-step-num { background: linear-gradient(135deg, var(--accent), var(--navy-2)); box-shadow: 0 8px 18px rgba(20,84,140,0.26); }
.process-track-fill { background: linear-gradient(90deg, var(--accent), var(--signal)); }

/* ---------- 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; }
  .process-step::after { font-size: 72px; }
}

/* 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) {
  .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.
   ====================================================================== */
.raeum { padding: 0; background: linear-gradient(180deg, var(--bg) 0%, #ffffff 100%); }
.raeum-bahn { height: 260vh; position: relative; }
.raeum-buehne {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; place-items: center;
}

.raeum-feld { position: absolute; inset: 96px 0 0 0; pointer-events: none; }   /* oben Platz fuer die Kopfzeile */

.raeum-obj {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--b); height: auto;
  /* eigener Fortschritt 0..1 innerhalb des Zeitfensters */
  --l: clamp(0, calc((var(--p, 0) - var(--von)) / (var(--bis) - var(--von))), 1);
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--dx) * var(--l) * 1px), calc(var(--dy) * var(--l) * 1px), 0)
    rotate(calc(var(--dr) * var(--l) * 1deg))
    scale(calc(1 - 0.25 * var(--l)));
  opacity: calc(1 - var(--l));
  filter: drop-shadow(0 14px 22px rgba(var(--navy-rgb), 0.22));
  will-change: transform, opacity;
}

/* Mitte: bleibt immer frei und lesbar */
.raeum-mitte {
  position: relative; z-index: 3; text-align: center;
  max-width: 620px; padding: 0 24px;
}
.raeum-mitte .section-eyebrow { justify-content: center; }
.raeum-mitte .section-title { margin-left: auto; margin-right: auto; }
.raeum-mitte .section-lead { margin-left: auto; margin-right: auto; }

/* Der Schlusshinweis taucht auf, wenn fast alles weg ist */
.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.72) / 0.16), 1);
  transform: translateY(calc(14px * (1 - clamp(0, calc((var(--p, 0) - 0.72) / 0.16), 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");
}

/* Schmale Desktops: Objekte proportional kleiner, damit die Reihen nicht kollidieren */
@media (min-width: 901px) and (max-width: 1180px) {
  .raeum-obj { width: calc(var(--b) * 0.8); }
}

@media (max-width: 900px) {
  .raeum-bahn { height: 230vh; }
  .raeum-obj.nur-breit { display: none; }
  .raeum-mitte { padding: 0 20px; }
}

/* Wer Bewegung reduziert, sieht sofort den geräumten Zustand */
@media (prefers-reduced-motion: reduce) {
  .raeum-bahn { height: auto; }
  .raeum-buehne { position: static; height: auto; padding: 90px 0; }
  .raeum-feld { display: none; }
  .raeum-fertig span { opacity: 1 !important; transform: none !important; }
}

/* Textmitte bekommt einen weichen Lichthof, damit sie auch dann lesbar
   bleibt, wenn ein Objekt knapp daran vorbeifliegt */
.raeum-mitte::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 130%; height: 150%;
  background: radial-gradient(ellipse at center,
    rgba(248,250,253,0.96) 0%, rgba(248,250,253,0.88) 42%, rgba(248,250,253,0) 72%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .raeum-mitte::before { width: 150%; height: 165%; }
}

/* Handy: eigener Ring mit eigenen Koordinaten, Massen und Flugbahnen */
@media (max-width: 900px) {
  .raeum-feld { inset: 80px 0 0 0; }
  .raeum-obj {
    left: var(--mx); top: var(--my); width: var(--mb);
    --l: clamp(0, calc((var(--p, 0) - var(--mvon)) / (var(--mbis) - var(--mvon))), 1);
    transform:
      translate(-50%, -50%)
      translate3d(calc(var(--mdx) * var(--l) * 1px), calc(var(--mdy) * var(--l) * 1px), 0)
      rotate(calc(var(--dr) * var(--l) * 1deg))
      scale(calc(1 - 0.25 * var(--l)));
  }
  .raeum-mitte { max-width: 300px; padding: 0 12px; }
  .raeum-mitte .section-title { font-size: clamp(26px, 7.6vw, 32px); }
  .raeum-mitte .section-lead { font-size: 15px; }
}

/* Objekte, die nur auf dem Handy erscheinen */
.raeum-obj.nur-schmal { display: none; }
@media (max-width: 900px) { .raeum-obj.nur-schmal { display: block; } }

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