/* ═══════════════════════════════════════════════════════════════════════
   Schriften, selbst ausgeliefert.
   Vorher kamen sie von fonts.bunny.net, ohne font-display. Die Seite wurde
   erst mit Ersatzschrift gezeichnet und beim Nachladen neu umbrochen. Der
   Hero verschob sich dabei so stark, dass Lighthouse 0,646 Layoutversatz
   gemessen hat, davon 0,645 allein <div class="hero-mitte">.
   Jetzt liegen die Dateien unter /fonts, die drei Schnitte des Heros werden
   im Seitenkopf vorgeladen. Nebenbei geht keine Besucher-IP mehr zu einem
   Dritten, was zur Hosting-Entscheidung passt.
   ═══════════════════════════════════════════════════════════════════════ */

/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  font-stretch: 100%;
  src: url(/fonts/dm-sans-latin-300-normal.woff2) format('woff2'); 
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  font-stretch: 100%;
  src: url(/fonts/dm-sans-latin-ext-300-normal.woff2) format('woff2'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  font-stretch: 100%;
  src: url(/fonts/dm-sans-latin-400-normal.woff2) format('woff2'); 
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  font-stretch: 100%;
  src: url(/fonts/dm-sans-latin-ext-400-normal.woff2) format('woff2'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  font-stretch: 100%;
  src: url(/fonts/dm-sans-latin-500-normal.woff2) format('woff2'); 
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  font-stretch: 100%;
  src: url(/fonts/dm-sans-latin-ext-500-normal.woff2) format('woff2'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  font-stretch: 100%;
  src: url(/fonts/dm-sans-latin-600-normal.woff2) format('woff2'); 
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  font-stretch: 100%;
  src: url(/fonts/dm-sans-latin-ext-600-normal.woff2) format('woff2'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  font-stretch: 100%;
  src: url(/fonts/dm-sans-latin-700-normal.woff2) format('woff2'); 
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  font-stretch: 100%;
  src: url(/fonts/dm-sans-latin-ext-700-normal.woff2) format('woff2'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/instrument-serif-latin-400-italic.woff2) format('woff2'); 
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/instrument-serif-latin-ext-400-italic.woff2) format('woff2'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/instrument-serif-latin-400-normal.woff2) format('woff2'); 
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/instrument-serif-latin-ext-400-normal.woff2) format('woff2'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --ink: #111111;
  --paper: #f7f7f5;
  --light: #eeeee9;
  --white: #ffffff;
  --muted: #777777;
  --dark: #111111;
  --dark-surface: #1a1a1a;
  --border: rgba(0,0,0,0.08);
  --border-light: rgba(255,255,255,0.1);
  --akzent: #b8944e;
  --akzent-hell: #d8b878;
  --sans: 'DM Sans', sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
}
html { scroll-behavior: auto; font-size: 16px; }
/* Die Einblend-Animationen starten mit translateX. Elemente am rechten
   Containerrand ragen dadurch vor dem Einblenden ein paar Pixel hinaus
   und erzeugen einen waagerechten Scrollbalken. clip statt hidden, damit
   position:sticky weiter funktioniert. */
html { overflow-x: clip; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(17,17,17,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-light);
  transition: box-shadow 0.3s;
}
nav.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.3); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.logo { display: flex; align-items: center; gap: 13px; }
.logo-mark { height: 48px; width: auto; display: block; }
.logo-wort { height: 40px; width: auto; display: block; }
.logo img { height: 64px; width: auto; }
.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a {
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255,255,255,0.45); transition: color 0.2s;
}
.nav-links a:hover { color: #fff; }
.nav-cta {
  background: var(--white) !important; color: var(--ink) !important;
  padding: 10px 22px; border-radius: 8px; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: 0.85rem !important; transition: background 0.2s, transform 0.2s;
}
.nav-cta:hover { transform: translateY(-1px); }
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.hamburger span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: 0.3s; }
.hero {
  min-height: 640px; display: flex; align-items: center;
  padding-top: 80px; position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
}
.hero::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 50%;
  background: linear-gradient(135deg, #1a1a1a 0%, #222 100%); pointer-events: none;
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  min-height: 0; padding: 64px 0 76px; position: relative; z-index: 1;
}
.hero-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 28px;
}
.hero-label::before { content: ''; width: 40px; height: 1px; background: rgba(255,255,255,0.25); }
.hero h1 {
  font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 400;
  line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 24px;
}
.hero h1 em { font-style: italic; color: rgba(255,255,255,0.45); }
.hero p {
  font-size: 1.05rem; color: rgba(255,255,255,0.4); max-width: 460px;
  margin-bottom: 40px; line-height: 1.75;
}
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--white); color: var(--ink); padding: 15px 32px;
  border-radius: 8px; font-size: 0.9rem; font-weight: 600;
  border: none; cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover { background: #e5e5e5; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
.btn-primary svg { width: 17px; height: 17px; }
.btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--white); padding: 15px 32px;
  border-radius: 8px; font-size: 0.9rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.15); cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.btn-outline:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.04); }
.hero-visual {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 10px; align-self: center; height: 460px;
}
.hero-photo {
  border-radius: 10px; overflow: hidden; position: relative;
  background: #1a1a1a; border: 1px solid rgba(255,255,255,0.06);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo--large { grid-row: 1 / 3; }
.hero-photo .placeholder-img {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, #1a1a1a 0%, #222 100%);
  color: rgba(255,255,255,0.15); font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.hero-photo-label {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(6px);
  color: rgba(255,255,255,0.75); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 3px;
}
section { padding: 96px 0; }
.section-label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}
.section-title {
  font-family: var(--serif); margin-top: 0; font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 14px;
}
.section-subtitle { font-size: 1rem; color: var(--muted); max-width: 620px; line-height: 1.7; }
.stats-strip { background: var(--paper); padding: 52px 0; border-bottom: 1px solid var(--border); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-item .stat-number { font-family: var(--serif); font-size: 2.4rem; font-weight: 400; color: var(--ink); line-height: 1; }
.stat-item .stat-text { font-size: 0.78rem; color: var(--muted); margin-top: 6px; font-weight: 500; }
.ablauf { background: var(--paper); }
.ablauf-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
.step {
  padding: 32px 24px; background: var(--white); border-radius: 10px;
  border: 1px solid var(--border); transition: transform 0.3s, box-shadow 0.3s;
}
.step:hover { transform: translateY(-3px); box-shadow: 0 10px 36px rgba(0,0,0,0.05); }
.step-num { font-family: var(--serif); font-size: 3rem; font-weight: 400; color: rgba(0,0,0,0.06); line-height: 1; margin-bottom: 16px; }
.step h3 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
.step p { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }
.vorteile { background: var(--ink); color: #fff; }
.vorteile .section-label { color: rgba(255,255,255,0.3); }
.vorteile .section-title { color: #fff; }
.vorteile .section-subtitle { color: rgba(255,255,255,0.35); }
.vorteile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.vorteil {
  padding: 32px 28px; background: var(--dark-surface); border-radius: 10px;
  border: 1px solid var(--border-light); transition: border-color 0.3s, transform 0.3s;
}
.vorteil:hover { border-color: rgba(255,255,255,0.2); transform: translateY(-2px); }
.vorteil-icon {
  width: 40px; height: 40px; background: rgba(255,255,255,0.06);
  border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.vorteil-icon svg { width: 20px; height: 20px; color: #fff; }
.vorteil h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 8px; }
.vorteil p { font-size: 0.92rem; color: rgba(255,255,255,0.35); line-height: 1.65; }
.referenzen { background: var(--paper); }
.ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.ref-card {
  border-radius: 10px; overflow: hidden; background: var(--white);
  border: 1px solid var(--border); transition: transform 0.3s, box-shadow 0.3s;
}
.ref-card:hover { transform: translateY(-3px); box-shadow: 0 10px 36px rgba(0,0,0,0.07); }
.ref-img { aspect-ratio: 16/10; overflow: hidden; position: relative; background: #1a1a1a; }
.ref-img .placeholder-img {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  color: rgba(255,255,255,0.15); font-size: 0.75rem; font-weight: 500;
}
.ref-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.ref-card:hover .ref-img img { transform: scale(1.03); }
.ref-badge {
  position: absolute; top: 10px; left: 10px; background: var(--ink); color: #fff;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 3px;
}
.ref-body { padding: 18px 22px; }
.ref-body h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 5px; }
.ref-body p { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
.ref-meta { display: flex; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.ref-meta span { font-size: 0.72rem; color: var(--muted); font-weight: 500; }
.ref-meta span strong { color: var(--ink); font-weight: 600; }
.ankauf { background: var(--white); }
.ankauf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.ankauf-card { background: var(--paper); border-radius: 10px; padding: 36px 32px; border: 1px solid var(--border); }
.ankauf-card h3 { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; margin-bottom: 22px; }
.ankauf-list { list-style: none; }
.ankauf-list li {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--border); font-size: 0.875rem; color: var(--muted);
}
.ankauf-list li:last-child { border: none; }
.ankauf-list li svg { width: 16px; height: 16px; color: var(--ink); flex-shrink: 0; margin-top: 3px; }
.about { background: var(--paper); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; margin-top: 56px; }
.about-img {
  aspect-ratio: 4/5; background: #1a1a1a; border-radius: 12px; overflow: hidden;
}
.about-img .placeholder-img {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a1a1a, #222);
}
.about-content h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; margin-bottom: 20px; line-height: 1.3; }
.about-content p { color: var(--muted); margin-bottom: 14px; line-height: 1.75; font-size: 0.92rem; }
.about-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.about-fact { display: flex; align-items: flex-start; gap: 8px; }
.about-fact svg { width: 16px; height: 16px; color: var(--ink); flex-shrink: 0; margin-top: 3px; }
.about-fact span { font-size: 0.85rem; color: var(--ink); font-weight: 500; }
.cta-section { background: var(--ink); padding: 96px 0; position: relative; overflow: hidden; }
.cta-section::before {
  content: ''; position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
  width: 500px; height: 500px; border: 1px solid rgba(255,255,255,0.03); border-radius: 50%;
}
.cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: stretch; position: relative; z-index: 1; }
.cta-text .section-label { color: rgba(255,255,255,0.25); }
.cta-text .section-title { color: #fff; }
.cta-text .section-subtitle { color: rgba(255,255,255,0.35); margin-bottom: 32px; }
.cta-contact-list { display: flex; flex-direction: column; gap: 16px; }
.cta-contact-item { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.4); font-size: 0.9rem; }
.cta-contact-item svg { width: 18px; height: 18px; color: rgba(255,255,255,0.3); flex-shrink: 0; }
.cta-quiz { background: var(--dark-surface); border: 1px solid var(--border-light);
  border-radius: 12px; padding: 36px 32px; display: flex; flex-direction: column; justify-content: center; }
.cta-quiz h3 { color: #fff; font-size: 1.05rem; font-weight: 600; margin-bottom: 20px; }
.cta-quiz .typen-frage { color: rgba(255,255,255,.45); font-size: .88rem; }
.cta-quiz .typen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 520px) { .cta-quiz { padding: 28px 22px; } .cta-quiz .typen { grid-template-columns: 1fr; } }

.cta-form {
  background: var(--dark-surface); border: 1px solid var(--border-light);
  border-radius: 12px; padding: 36px 32px;
}
.cta-form h3 { color: #fff; font-size: 1.05rem; font-weight: 600; margin-bottom: 24px; }
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.4);
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 6px;
}
.form-group input, .form-group textarea, .form-group select {
  width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; padding: 12px 14px; color: #fff; font-family: var(--sans);
  font-size: 0.9rem; outline: none; transition: border-color 0.2s;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,0.2); }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: rgba(255,255,255,0.3); }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-group select option { background: #1a1a1a; color: #fff; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-submit {
  width: 100%; margin-top: 8px; background: #fff; color: var(--ink);
  padding: 14px; border-radius: 8px; font-size: 0.9rem; font-weight: 600;
  border: none; cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.btn-submit:hover { background: #e5e5e5; transform: translateY(-1px); }
footer { background: var(--ink); border-top: 1px solid var(--border-light); padding: 28px 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; }
.footer-logo img { height: 48px; width: auto; opacity: 0.3; margin-bottom: 6px; }
.footer-inner p { font-size: 0.75rem; color: rgba(255,255,255,0.2); }
.footer-links { display: flex; gap: 20px; }
.footer-links a { font-size: 0.75rem; color: rgba(255,255,255,0.2); transition: color 0.2s; cursor: pointer; }
.footer-links a:hover { color: rgba(255,255,255,0.5); }
.legal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 40px 24px; overflow-y: auto;
}
.legal-overlay.show { display: flex; }
.legal-content {
  background: #fff; border-radius: 12px; max-width: 720px; width: 100%;
  padding: 48px 48px 40px; position: relative; margin: 40px 0;
}
.legal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.1rem; color: var(--muted); transition: border-color 0.2s;
}
.legal-close:hover { border-color: var(--ink); color: var(--ink); }
.legal-content h2 { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; margin-bottom: 24px; }
.legal-content h3 { font-size: 0.95rem; font-weight: 600; margin: 24px 0 8px; }
.legal-content p { font-size: 0.88rem; color: var(--muted); line-height: 1.7; margin-bottom: 10px; }
.legal-content ul { list-style: disc; padding-left: 20px; margin-bottom: 10px; }
.legal-content li { font-size: 0.88rem; color: var(--muted); line-height: 1.7; }
.legal-placeholder {
  background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px;
  padding: 12px 16px; margin: 12px 0; font-size: 0.82rem; color: #856404;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
/* Sichtbar ist der Normalzustand. Die Einblendung kommt nur obendrauf und
   niemals auf dem groessten Element ueber der Falz (H1), sonst leidet der LCP. */
.fade-up { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .fade-up:not(h1):not(.hero-label):not(.hero-visual):not(.hero-bilder):not(:has(img))
    { animation: fadeUp 0.6s ease-out both; }
}
.fade-up.d1 { animation-delay: 0.1s; }
.fade-up.d2 { animation-delay: 0.2s; }
.fade-up.d3 { animation-delay: 0.3s; }
.preis { background: var(--white); }
.preis-inhalt { margin-top: 44px; }
.preis-lead { font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw, 2.1rem); line-height: 1.24; color: var(--ink); max-width: 780px; margin-bottom: 44px; }
.preis-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.preis-spalten p { font-size: 0.98rem; line-height: 1.85; color: var(--muted); margin: 0; }
.preis-spalten p:first-child { padding-top: 20px; border-top: 2px solid var(--ink); }
.preis-spalten p:last-child { padding-top: 20px; border-top: 2px solid var(--akzent); }
.preis-liste { list-style: none; }
.preis-liste li { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; line-height: 1.6; }
.preis-liste li:last-child { border-bottom: 0; }
.preis-liste .zeichen { flex: none; width: 18px; font-weight: 600; }
.preis-liste .ja .zeichen { color: #2f7d52; }
.preis-liste .nein .zeichen { color: var(--muted); }
.preis-liste strong { display: block; font-weight: 600; margin-bottom: 2px; }
.preis-liste span.text { color: var(--muted); font-size: 0.85rem; }
.preis-hinweis { margin-top: 40px; padding: 24px 28px; background: var(--paper); border-left: 3px solid var(--akzent); border-radius: 0 10px 10px 0; font-size: 0.92rem; line-height: 1.75; color: var(--ink); }
.preis-hinweis strong { font-weight: 600; }
.faq { background: var(--white); }
.gebiet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 40px; }
.gebiet-grid a.gebiet { display: block; padding: 24px 26px; background: var(--ink); color: #fff; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.gebiet-grid a.gebiet:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.18); }
.gebiet .stadt { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; color: #fff; }
.gebiet .zeile { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); font-size: .88rem; color: rgba(255,255,255,.6); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.gebiet .pfeil { color: var(--akzent-hell); font-weight: 600; }


/* ── Gründer-/Vertrauensblock für Landingpages ─────────────── */
.gruender { padding: 84px 0; background: var(--paper); }
.gruender-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: center; max-width: 980px; margin: 0 auto; }
.gruender-foto { position: relative; }
.gruender-foto img { width: 100%; height: auto; border-radius: 16px; display: block; box-shadow: 0 20px 44px rgba(0,0,0,.10); }
.gruender-sig { position: absolute; left: 18px; bottom: 18px; background: rgba(17,17,17,.82); backdrop-filter: blur(4px); color: #fff; padding: 10px 16px; border-radius: 10px; }
.gruender-sig strong { display: block; font-size: .98rem; }
.gruender-sig span { font-size: .78rem; color: rgba(255,255,255,.65); }
.gruender-text .section-title { margin: 8px 0 14px; }
.gruender-text p { max-width: 54ch; line-height: 1.85; color: var(--muted); }
.gruender-cta { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) { .gruender-grid { grid-template-columns: 1fr; gap: 26px; } .gruender-foto { max-width: 360px; } }


/* ── Zitatband: Gesetzestext als Hauptdarsteller ──────────────
   Das Datenband taugte hier nicht, weil die Grosszahl schmal und der
   Text auf 48ch begrenzt ist. Ergebnis war eine leere rechte Haelfte. */
.zitatband { background: var(--ink); color: #fff; padding: 96px 0; }
.zitatband .container { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: start; }
.zitatband .quelle-marke { font-family: var(--serif); font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1; color: var(--akzent-hell); margin-bottom: 20px; }
.zitatband blockquote { margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.55rem, 2.5vw, 2.15rem); line-height: 1.28; color: #fff; letter-spacing: -0.01em; }
.zitatband .herkunft { margin-top: 22px; font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.38); }
.zitatband .auslegung p { color: rgba(255,255,255,0.62); line-height: 1.85; font-size: 0.97rem; margin-bottom: 15px; }
.zitatband .auslegung p:last-child { margin-bottom: 0; }
.zitatband .auslegung strong { color: #fff; font-weight: 500; }
@media (max-width: 860px) {
  .zitatband { padding: 66px 0; }
  .zitatband .container { grid-template-columns: 1fr; gap: 34px; }
}

/* ── Gegenueberstellung ohne Waage, fuer zwei Wissensspalten ── */
.gegenueber { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 38px; }
.gegenueber > div { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 30px 28px; }
.gegenueber > div.belegt { background: var(--paper); position: relative; overflow: hidden; }
.gegenueber > div.belegt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--akzent); }
.gegenueber h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.2; margin: 0 0 16px; color: var(--ink); }
.gegenueber ul { list-style: none; margin: 0 0 18px; padding: 0; }
/* Ohne Aufzaehlungszeichen: die fetten Begriffe tragen die Gliederung,
   und die Punkte aus dem wissen-Block wuerden sich sonst doppeln. */
.gegenueber li { padding-left: 0; font-size: 0.9rem; line-height: 1.72;
  color: var(--muted); margin-bottom: 14px; }
.gegenueber li::before, .wissen .gegenueber li::before { content: none; }
.gegenueber li strong { color: var(--ink); font-weight: 600; }
.gegenueber p { font-size: 0.88rem; line-height: 1.78; color: var(--muted); margin: 0;
  padding-top: 16px; border-top: 1px solid var(--border); }
@media (max-width: 860px) { .gegenueber { grid-template-columns: 1fr; } }

/* Zwei Hinweise nebeneinander unter einem Kartenpaar, ruhiger als Karten */
.hinweis-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 48px; margin-top: 34px; }
.hinweis-paar h3 { font-family: var(--serif); font-weight: 400; font-size: 1.12rem; line-height: 1.25;
  margin: 0 0 10px; color: var(--ink); padding-top: 16px; border-top: 2px solid var(--akzent); display: inline-block; }
.hinweis-paar p { font-size: 0.9rem; line-height: 1.8; color: var(--muted); margin: 0; }
@media (max-width: 860px) { .hinweis-paar { grid-template-columns: 1fr; gap: 26px; } }

/* Hero-Zeile: Umbrueche stehen am Satzende, den Rest balanciert der Browser,
   damit kein einzelnes Wort am Zeilenende haengen bleibt. */
.ort-hero p.lead, .hero p.lead, .section-subtitle { text-wrap: balance; }

/* Drei Hinweise nebeneinander, Haarlinie statt Kasten. Karten mit Rahmen
   wirken hier verloren, weil die Textlaengen zu unterschiedlich sind. */
.hinweis-drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 48px; margin-top: 40px; }
.hinweis-drei > div { padding-top: 18px; border-top: 2px solid var(--akzent); }
.hinweis-drei h3 { font-family: var(--serif); font-weight: 400; font-size: 1.24rem; line-height: 1.2;
  margin: 0 0 10px; color: var(--ink); }
.hinweis-drei p { font-size: 0.9rem; line-height: 1.8; color: var(--muted); margin: 0; }
@media (max-width: 900px) { .hinweis-drei { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hinweis-drei { grid-template-columns: 1fr; gap: 26px; } }

/* ── Vorteile-Icon-Karten (Landingpages) ─────────────── */
.vorteile { padding: 88px 0; }
.vorteil-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
/* Karten sollen volle Reihen bilden statt eine angebrochene zu hinterlassen:
   drei Karten in drei Spalten, sechs Karten in zwei Reihen zu dritt. */
.vorteil-grid.drei,
.vorteil-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
.vorteil { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 30px 28px; transition: transform .25s ease, box-shadow .25s ease; }
.vorteil:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.07); }
.vorteil svg { width: 30px; height: 30px; color: var(--akzent); margin-bottom: 16px; }
.vorteil h3 { font-family: var(--serif); font-weight: 400; font-size: 1.28rem; line-height: 1.2; margin-bottom: 8px; color: var(--ink); }
.vorteil p { font-size: 0.9rem; line-height: 1.68; color: var(--muted); }
@media (max-width: 820px) { .vorteil-grid, .vorteil-grid.drei,
  .vorteil-grid:has(> :nth-child(6):last-child) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .vorteil-grid, .vorteil-grid.drei,
  .vorteil-grid:has(> :nth-child(6):last-child) { grid-template-columns: 1fr; } }

/* ── Datenband: großes Zahl-Highlight ─────────────── */
.datenband { background: var(--ink); color: #fff; padding: 76px 0; }
/* Die Ziffer bekommt eine feste Spalte und steht rechtsbuendig direkt am Text,
   sonst treibt es die beiden Haelften auseinander. */
.datenband .container { display: grid; grid-template-columns: minmax(160px, 0.22fr) minmax(0, 1fr);
  gap: 56px; align-items: center; }
.datenband .zahl { text-align: right; }
.datenband .zahl { font-family: var(--serif); font-weight: 400; font-size: clamp(3.6rem, 8vw, 5.6rem); line-height: 0.95; color: var(--akzent-hell); }
.datenband h2 { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.2; color: #fff; margin-bottom: 12px; }
.datenband p { color: rgba(255,255,255,0.62); line-height: 1.75; max-width: 62ch; }
.datenband .quelle { font-size: 0.78rem; color: rgba(255,255,255,0.4); margin-top: 14px; }
@media (max-width: 700px) { .datenband .container { grid-template-columns: 1fr; gap: 20px; } }

.faq-liste { margin-top: 48px; border-top: 1px solid var(--border); }
.faq-gruppe { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--ink); margin: 42px 0 6px; }
.faq-gruppe:first-child { margin-top: 22px; }
.faq-mehr { margin-top: 34px; }
.faq-mehr a { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--akzent-hell); padding-bottom: 3px; transition: gap .2s ease; }
.faq-mehr a:hover { gap: 13px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-frage {
  width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
  padding: 22px 44px 22px 0; font-family: var(--sans); font-size: 0.98rem; font-weight: 500;
  color: var(--ink); position: relative;
}
.faq-frage::after {
  content: ''; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.25s;
}
.faq-item.offen .faq-frage::after { transform: translateY(-20%) rotate(-135deg); }
.faq-antwort { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-antwort p { font-size: 0.9rem; line-height: 1.75; color: var(--muted); padding: 0 44px 24px 0; }
.vergleich { background: var(--light); }
.vergleich-tabelle { margin-top: 48px; background: var(--white); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.vgl-zeile { display: grid; grid-template-columns: 1.1fr 1fr 1fr; border-bottom: 1px solid var(--border); }
.vgl-zeile:last-child { border-bottom: 0; }
.vgl-kopf { background: var(--ink); color: #fff; }
.vgl-kopf .vgl-zelle { padding: 20px 22px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.vgl-kopf .vgl-uns { background: #000; }
.vgl-zelle { padding: 18px 22px; font-size: 0.88rem; line-height: 1.6; display: flex; align-items: flex-start; gap: 9px; }
.vgl-kriterium { font-weight: 600; color: var(--ink); background: var(--paper); }
.vgl-uns { border-left: 1px solid var(--border); }
.vgl-makler { border-left: 1px solid var(--border); color: var(--muted); }
.vgl-zelle .mark { flex: none; font-weight: 700; line-height: 1.5; }
.vgl-uns .mark { color: #2f7d52; }
.vgl-makler .mark { color: #9a9a9a; }
.vergleich-fuss { margin-top: 18px; font-size: 0.78rem; color: var(--muted); line-height: 1.6; }
.situationen { background: var(--white); }
.sit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.sit { padding: 26px 24px; border: 1px solid var(--border); border-radius: 10px; transition: border-color .3s, transform .3s; }
.sit:hover { border-color: rgba(0,0,0,0.2); transform: translateY(-2px); }
.sit h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 8px; }
.sit p { font-size: 0.85rem; color: var(--muted); line-height: 1.7; }
.schluss { background: var(--ink); color: #fff; }
.schluss .section-label { color: rgba(255,255,255,0.3); }
.schluss .section-title { color: #fff; }
.schluss-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; margin-top: 44px; align-items: start; }
.schluss-text p { font-size: 0.95rem; line-height: 1.8; color: rgba(255,255,255,0.55); margin-bottom: 16px; }
.schluss-text p.stark { font-family: var(--serif); font-size: 1.45rem; line-height: 1.4; color: #fff; margin-bottom: 22px; }
.schluss-text p em { font-style: normal; color: #fff; }
.schluss-liste { display: grid; gap: 12px; }
.schluss-punkt { display: flex; gap: 14px; padding: 18px 20px; background: var(--dark-surface); border: 1px solid var(--border-light); border-radius: 10px; }
.schluss-punkt .nr { flex: none; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; color: rgba(255,255,255,0.25); padding-top: 2px; }
.schluss-punkt strong { display: block; font-size: 0.92rem; font-weight: 600; margin-bottom: 4px; }
.schluss-punkt span.t { font-size: 0.84rem; color: rgba(255,255,255,0.4); line-height: 1.65; }
.gebiet { margin-top: 40px; padding: 26px 28px; background: var(--ink); color: #fff; border-radius: 12px; }
.gebiet h3 { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 14px; }
.gebiet-orte { display: flex; flex-wrap: wrap; gap: 8px; }
.gebiet-orte span { font-size: 0.84rem; padding: 7px 13px; background: rgba(255,255,255,0.07); border: 1px solid var(--border-light); border-radius: 100px; }
.gebiet p { font-size: 0.8rem; color: rgba(255,255,255,0.35); margin-top: 14px; line-height: 1.6; }
.eckdaten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; }
.eck { padding: 30px 28px; background: var(--paper); border: 1px solid var(--border); border-radius: 12px; }
.eck .eck-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.eck h3 { font-family: var(--serif); font-size: 1.75rem; font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 12px; }
.eck p { font-size: 0.86rem; line-height: 1.7; color: var(--muted); }
.eck .orte { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.eck .orte span { font-size: 0.75rem; padding: 5px 10px; background: var(--white); border: 1px solid var(--border); border-radius: 100px; color: var(--ink); }
.tipp { background: var(--light); }
/* Die Karte traegt mehr Inhalt als die Textspalte. Mittig ausgerichtet haengt sie
   nicht mehr unten heraus, sondern verteilt den Ueberhang auf beide Seiten. */
.tipp-grid { display: grid; grid-template-columns: 1fr 0.92fr; gap: 56px; margin-top: 34px; align-items: start; }
/* Haarlinien statt Abstaenden: drei Schritte lesen sich als Ablauf, nicht als drei Absaetze */
.tipp-schritte { display: grid; border-top: 1px solid var(--border); }
.tipp-schritt { display: flex; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--border); }
.tipp-schritt .nr { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 0.76rem; font-weight: 600; background: var(--white); }
.tipp-schritt strong { display: block; font-size: 0.92rem; font-weight: 600; margin-bottom: 3px; }
.tipp-schritt span.t { font-size: 0.85rem; color: var(--muted); line-height: 1.65; }
.tipp-karte { background: var(--ink); color: #fff; border-radius: 14px; padding: 32px 30px;
  box-shadow: 0 24px 50px -30px rgba(17,17,17,0.55); }
.tipp-karte .zahl { font-family: var(--serif); font-size: 3.2rem; line-height: 1; letter-spacing: -0.02em; }
/* Zwei Zeilen statt zwei Spalten: so beginnen beide Betraege an derselben Kante.
   Das leere .bis in der ersten Zeile haelt den Platz frei, den bis zu unten braucht. */
.tipp-staffel { display: grid; }
.tipp-staffel > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.tipp-staffel > div:first-child { padding-top: 0; }
.tipp-staffel > div:last-child { padding-bottom: 0; border-bottom: 0; }
.tipp-staffel .tipp-wert { display: flex; align-items: baseline; gap: 8px; flex: none; }
.tipp-staffel .bis { min-width: 3.5em; text-align: right; font-size: 0.78rem; color: rgba(255,255,255,0.45); }
.tipp-staffel .zahl { font-size: 2.3rem; }
.tipp-staffel .was { font-size: 0.81rem; line-height: 1.45; color: rgba(255,255,255,0.5); text-align: right; }
.tipp-karte hr { border: 0; border-top: 1px solid var(--border-light); margin: 22px 0; }
/* Haarlinien statt Abstand: die vier Konditionen lesen sich als eine Liste, nicht als vier Absaetze */
.tipp-karte dl { display: grid; }
.tipp-karte dl > div { padding: 13px 0; border-top: 1px solid rgba(255,255,255,0.07); }
.tipp-karte dl > div:first-child { padding-top: 0; border-top: 0; }
.tipp-karte dl > div:last-child { padding-bottom: 0; }
.tipp-karte dt { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 5px; }
.tipp-karte dd { font-size: 0.87rem; line-height: 1.55; color: rgba(255,255,255,0.88); }
.tipp-karte .btn-tipp { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  margin-top: 22px; padding: 15px 22px; border: 0; cursor: pointer; font-family: inherit;
  background: #fff; color: var(--ink); border-radius: 8px; font-size: 0.88rem; font-weight: 600; text-decoration: none; }
/* Die Karte ist das Formular: der Tipp wird hier erfasst, nicht per Mailprogramm getippt */
.tipp-fuss { font-size: 0.78rem; line-height: 1.62; color: rgba(255,255,255,0.4); margin-top: 14px; }
/* Ueber uns: randloser Split. Das Portraet laeuft bis an die Seitenkante,
   der Text steht auf der Containerkante, damit er mit den Abschnitten darunter fluchtet. */
/* ── Ueber uns: die sechs Saetze ─────────────────────────────────────
   Zwei Kaesten nebeneinander erzwingen ein Loch, sobald die Listen
   unterschiedlich lang sind. Stattdessen ein Foto und darunter zwei
   Listen mit Haarlinien. */
/* stretch, damit das Foto die Hoehe der Listen fuellt und darunter kein Loch bleibt */
.messen { display: grid; grid-template-columns: 0.42fr 1fr; gap: 44px; align-items: stretch; margin-top: 40px; }
/* Zwei Listen nebeneinander. Die rechte Spalte ist schmaler, damit die kuerzere
   Liste durch mehr Umbrueche naeher an die Hoehe der linken kommt. */
.messen-listen, .linienpaar { display: grid; grid-template-columns: 1.55fr 1fr; gap: 44px; align-items: start; }
.linienpaar { margin-top: 40px; }
/* Kein eigener Strich: die Liste schliesst bereits mit einer Linie ab */
.linienliste > p { margin-top: 20px; font-size: 0.86rem; line-height: 1.72; color: var(--muted); }
.messen-bild { position: relative; min-height: 420px; overflow: hidden;
  box-shadow: 0 3px 10px -3px rgba(17,17,17,.18), 0 40px 76px -34px rgba(17,17,17,.48); }
.messen-bild img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%; display: block; }
.linienliste h3 { font-family: var(--serif); font-size: 1.32rem; font-weight: 400; letter-spacing: -0.01em; }
.linienliste ul { list-style: none; margin-top: 8px; border-top: 1px solid var(--border); }
.linienliste li { padding: 11px 0; border-bottom: 1px solid var(--border);
  font-size: 0.9rem; line-height: 1.62; color: var(--muted); }
/* Die Haarlinien strukturieren die Liste bereits, der Aufzaehlungspunkt aus dem
   alten Kastendesign waere doppelt. Drei Klassen, weil .wissen li spaeter steht. */
.wissen .linienliste li { padding-left: 0; margin-bottom: 0; }
.wissen .linienliste li::before { content: none; }
.linienliste li strong { color: var(--ink); font-weight: 600; }

.linienliste.gegen h3 { color: var(--muted); }

@media (max-width: 1000px) {
  .messen { grid-template-columns: 1fr; gap: 34px; }
  .messen-listen, .linienpaar { grid-template-columns: 1fr; gap: 30px; }
  .messen-bild { aspect-ratio: 3 / 2; min-height: 0; }
}

/* ── Ueber uns: Bild und Textkasten ueberlappen ──────────────────────
   Zwei Ebenen statt zwei Spalten. Der Kasten schiebt sich ueber das Bild,
   dadurch wirkt der Block gebaut und nicht gerastert. */
/* 81px Navigation plus 25px Luft, sonst klafft oben eine leere Flaeche */
.person { background: var(--light); padding: 106px 0 88px; }
/* Die Karte muss kuerzer bleiben als das Bild, sonst schwebt sie nicht darueber,
   sondern ueberragt es. Deshalb center und ein hohes Bildformat. */
.person-raster { display: grid; grid-template-columns: 0.75fr 1.25fr; align-items: center; }
/* Umgekehrte Gewichtung: das Foto liegt auf der Karte und ist kleiner als sie.
   Es bleibt links, nur die Groessen drehen sich. */
.person-bild { position: relative; z-index: 3; width: calc(100% + 96px); aspect-ratio: 1 / 1;
  overflow: hidden;
  box-shadow: 0 3px 10px -3px rgba(17,17,17,.18), 0 44px 84px -34px rgba(17,17,17,.52); }
.person-bild img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 24%; display: block; }
.person-spalte { position: relative; z-index: 1; }
.person-karte { padding: 48px 52px 48px 124px; background: var(--white);
  box-shadow: 0 20px 46px -32px rgba(17,17,17,.3); }
.person-karte .section-title { margin: 3px 0 0; font-size: 2.5rem; line-height: 1.04; letter-spacing: -0.03em; }
/* Der Goldbalken am Zitat ist der Akzent des Blocks, die Linie waere der zweite.
   Drei Klassen, weil die erzeugende Regel weiter unten im Stylesheet steht. */
.person .person-karte .section-title::after { content: none; }
.person-rolle { margin-top: 8px; font-size: 0.88rem; color: var(--muted); }
.person-zitat { margin: 22px 0 20px; padding-left: 20px; border-left: 2px solid var(--akzent);
  font-family: var(--serif); font-size: 1.5rem; line-height: 1.32; letter-spacing: -0.02em; text-wrap: balance; }
.person-karte > p { font-size: 0.94rem; line-height: 1.72; color: var(--muted); margin-bottom: 13px; }
.person-karte > p:last-of-type { margin-bottom: 0; }
/* Die private Notiz sitzt als leise Bildunterschrift unter der Karte, nicht darin.
   In der Karte wuerde sie diese ueber das Bild hinauswachsen lassen. */
/* Die private Notiz steht in der Karte. Sie setzt sich ueber die Schriftgroesse
   ab, eine Trennlinie wuerde den Block nur hoeher machen. */
.person-notiz { margin-top: 20px; font-size: 0.86rem; line-height: 1.72; }
.person-karte .btn-row { margin-top: 24px; }
/* btn-outline ist fuer dunkle Flaechen gebaut, hier steht er auf Weiss */
.person-karte .btn-outline { color: var(--ink); border-color: rgba(0,0,0,0.18); }
.person-karte .btn-outline:hover { border-color: var(--ink); background: transparent; }

@media (max-width: 1100px) {
  .person { padding: 101px 0 72px; }
  .person-raster { grid-template-columns: 1fr; }
  .person-bild { width: 100%; aspect-ratio: 3 / 2;
    box-shadow: 0 3px 10px -3px rgba(17,17,17,.18), 0 26px 50px -28px rgba(17,17,17,.45); }
  .person-spalte { margin-top: -40px; }
  /* Innenabstand muss groesser sein als der Hochzug, sonst liegt das Label auf dem Bild */
  .person-karte { padding: 54px 26px 38px; box-shadow: 0 34px 70px -40px rgba(17,17,17,.4); }

  .person-karte .section-title { font-size: 2.2rem; }
  .person-zitat { font-size: 1.34rem; padding-left: 18px; }
}

.about-bento { display: grid; grid-template-columns: 1.15fr 0.95fr 0.9fr; gap: 16px; margin-top: 48px; }
.kachel { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 30px 28px; }
.kachel-zitat { grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; }
.kachel-zitat .satz { font-family: var(--serif); font-size: 1.85rem; line-height: 1.28; letter-spacing: -0.02em; }
.kachel-zitat .wer { margin-top: 26px; font-size: 0.85rem; }
.kachel-zitat .wer strong { display: block; font-weight: 600; }
.kachel-zitat .wer span { color: var(--muted); }
.kachel-portrait { grid-row: span 2; padding: 0; overflow: hidden; background: var(--light); }
.kachel-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kachel dl { display: grid; gap: 13px; }
.kachel dt { font-size: 0.74rem; color: var(--muted); margin-bottom: 1px; }
.kachel dd { font-size: 0.89rem; line-height: 1.5; }
.kachel-text p { font-size: 0.89rem; line-height: 1.75; color: var(--muted); margin-bottom: 12px; }
.kachel-text p:last-child { margin-bottom: 0; }
.nav-cta { background: var(--akzent) !important; color: #14110b !important; }
.nav-cta:hover { background: var(--akzent-hell) !important; }
.btn-primary { background: #c9a25c; color: #14110b; }
.btn-primary:hover { background: var(--akzent-hell); }
.btn-submit { background: #c9a25c; color: #14110b; }
.btn-submit:hover { background: var(--akzent-hell); }
.hero-label { color: var(--akzent-hell); }
.hero-label::before, .hero-label span.linie { background: var(--akzent); }
.marker { color: #c9a05e; }
.tipp-karte .zahl { color: var(--akzent-hell); }
.tipp-karte .btn-tipp { background: var(--akzent); color: #14110b; }
.vorteil-icon svg { color: var(--akzent-hell); }
.stat-number { color: var(--ink); }
.eck .eck-label, .schluss .section-label, .tipp .section-label { color: var(--akzent); }
.schluss-punkt .nr { color: var(--akzent-hell); }
.footer-orte { border-top: 1px solid var(--border-light); margin-top: 26px; padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 0.84rem; }
.footer-orte strong { font-weight: 600; color: rgba(255,255,255,0.65); }
.footer-orte a { color: rgba(255,255,255,0.4); text-decoration: none; }
.footer-orte a:hover { color: #fff; }
@media (max-width: 900px) {
  .about-bento { grid-template-columns: 1fr 1fr; }
  .kachel-portrait { grid-row: span 1; min-height: 320px; }

  .eckdaten { grid-template-columns: 1fr; }

  .sit-grid { grid-template-columns: repeat(2, 1fr); }

  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-visual { order: -1; height: 280px; }
  .ablauf-steps { grid-template-columns: 1fr 1fr; }
  .vorteile-grid { grid-template-columns: 1fr 1fr; }
  .ref-grid { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-img { aspect-ratio: 16/10; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .ankauf-grid { grid-template-columns: 1fr; }
  .cta-inner { grid-template-columns: 1fr; gap: 40px; }
  .nav-links { display: none; }
  .hamburger { display: block; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .person-zitat { font-size: 1.45rem; padding-left: 18px; }
  .about-bento { grid-template-columns: 1fr; }
  .kachel-zitat { grid-column: span 1; }
  .kachel-zitat .satz { font-size: 1.45rem; }

  .tipp-grid { grid-template-columns: 1fr; gap: 32px; }
  .tipp-karte { padding: 28px 22px; }
  .tipp-staffel { grid-template-columns: 1fr; gap: 16px; }
  .tipp-staffel .klein { min-height: 0; margin-bottom: 6px; }
  .tipp-staffel .zahl { font-size: 2.5rem; }

  .schluss-grid { grid-template-columns: 1fr; gap: 32px; }
  .schluss-text p.stark { font-size: 1.22rem; }

  .vgl-zeile { grid-template-columns: 1fr; }
  .vgl-kopf { display: none; }
  .vgl-kriterium { background: var(--ink); color: #fff; }
  .vgl-uns, .vgl-makler { border-left: 0; border-top: 1px solid var(--border); }
  .vgl-uns::before { content: 'An uns'; font-weight: 600; color: var(--ink); margin-right: 4px; }
  .vgl-makler::before { content: 'Über Makler'; font-weight: 600; color: var(--ink); margin-right: 4px; }
  .sit-grid { grid-template-columns: 1fr; }

  .preis-spalten { grid-template-columns: 1fr; gap: 26px; }
  .preis-lead { font-size: 1.28rem; }



  body { padding-bottom: 76px; }

  .hero-visual { height: 220px; }
  .ablauf-steps { grid-template-columns: 1fr; }
  .vorteile-grid { grid-template-columns: 1fr; }
  .ref-grid { grid-template-columns: 1fr; }
  section { padding: 60px 0; }
  .legal-content { padding: 32px 24px; }
}
.kachel h4 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.ort-hero { background: var(--ink); color:#fff; padding: 120px 0 84px; position: relative; overflow: hidden; }
.ort-hero::before { content:''; position:absolute; inset:0 0 0 55%; background: linear-gradient(135deg,#1a1a1a,#222); }
.ort-hero .container { position: relative; z-index: 1; }
.ort-hero h1 { font-family: var(--serif); font-size: clamp(2.1rem,4.2vw,3.4rem); font-weight:400; line-height:1.12; letter-spacing:-0.02em; margin-bottom:18px; }
.ort-hero p.lead { font-size:1rem; line-height:1.8; color:rgba(255,255,255,0.5); max-width:600px; }
@media (min-width: 601px) {
  .ort-hero p.lead { font-size:1.06rem; color:rgba(255,255,255,0.72); }
}
.ort-hero .btn-row { margin-top:30px; }
/* Flex ignoriert das text-align des Heros, sonst kleben die Knoepfe links */
.ort-hero-text .btn-row { justify-content:center; }
.ort-zahlen { background: var(--paper); border-bottom:1px solid var(--border); padding:30px 0; }
.ort-zahlen .grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.ort-zahlen .z { font-family:var(--serif); font-size:2.1rem; line-height:1; margin-bottom:7px; }
.ort-zahlen .t { font-size:0.78rem; color:var(--muted); }
.ort-kacheln { background: var(--white); }
.kgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.kk { padding:28px 26px; background:var(--paper); border:1px solid var(--border); border-radius:12px; }
.kk .wo { font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--akzent); margin-bottom:9px; }
.kk h3 { font-family:var(--serif); font-size:1.32rem; font-weight:400; line-height:1.25; margin-bottom:10px; }
.kk p { font-size: 0.92rem; line-height:1.7; color:var(--muted); }
.ort-split { background: var(--paper); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-top:40px; }
.split img { width:100%; border-radius:12px; display:block; }
.ohne-titel { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--akzent); margin-bottom:2px; }
.ohne ul { list-style:none; margin:0; padding:0; }
.ohne li { font-size:1rem; line-height:1.45; padding:16px 0; border-bottom:1px solid var(--border); }
.ohne li:first-child { border-top:1px solid var(--border); }
.split h2 { font-family:var(--serif); font-size:1.9rem; font-weight:400; line-height:1.22; margin-bottom:16px; }
.split p { font-size:0.94rem; line-height:1.82; color:var(--muted); margin-bottom:14px; }
.teile { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.teile span { font-size:0.82rem; padding:7px 13px; background:var(--white); border:1px solid var(--border); border-radius:100px; }
.ort-teile { background: var(--white); }
.ort-schritte { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px; }
.ort-schritt { padding:24px 22px; background:var(--white); border:1px solid var(--border); border-radius:10px; }
.ort-schritt .nr { font-family:var(--serif); font-size:1.5rem; color:var(--akzent); line-height:1; margin-bottom:9px; }
.ort-schritt strong { display:block; font-size:0.9rem; margin-bottom:5px; }
.ort-schritt span { font-size:0.83rem; color:var(--muted); line-height:1.65; }
.ort-ablauf { background: var(--light); }
.orte-nav { background: var(--ink); color:#fff; padding:28px 0; }
.orte-nav .zeile { display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; font-size:0.86rem; }
.orte-nav a { color:rgba(255,255,255,0.5); text-decoration:none; }
.orte-nav a:hover { color:#fff; }
@media (max-width:900px){ .kgrid{grid-template-columns:1fr;} .split{grid-template-columns:1fr;gap:28px;}
  .ort-schritte{grid-template-columns:repeat(2,1fr);} .ort-zahlen .grid{grid-template-columns:repeat(2,1fr);gap:26px;} }
@media (max-width:600px){ .ort-schritte{grid-template-columns:1fr;} .ort-hero{padding:118px 0 60px;} .ort-hero::before{display:none;} }
.objekt-liste { margin-top: 40px; display: grid; gap: 0; border-top: 1px solid var(--border); }
.objekt { padding: 30px 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 40px; align-items: center; }
.objekt:last-child { border-bottom: none; }
.objekt h2 { font-family: var(--serif); font-size: 1.42rem; font-weight: 400; line-height: 1.25; margin: 0; }
.objekt p { font-size: 0.92rem; line-height: 1.8; color: var(--muted); margin: 0; }
.objekt-text p + p { margin-top: 15px; }
.objekt-mehr { margin-top: 18px; font-size: .88rem; line-height: 1.5; }
.objekt-mehr a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--border);
  padding-bottom: 2px; transition: border-color .18s ease, color .18s ease; }
.objekt-mehr a:hover { color: var(--akzent); border-bottom-color: var(--akzent); }
.objekt-mehr span { color: var(--border); margin: 0 4px; }
@media (max-width: 700px) { .objekt { grid-template-columns: 1fr; gap: 12px; } }
.bezirke-gruppen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 34px; }
.bg-karte { padding: 26px 24px; background: var(--paper); border: 1px solid var(--border); border-radius: 12px; }
.bg-karte h3 { font-family: var(--serif); font-size: 1.24rem; font-weight: 400; margin-bottom: 8px; }
.bg-karte .orte { font-size: 0.8rem; color: var(--akzent); letter-spacing: 0.02em; margin-bottom: 10px; }
.bg-karte p { font-size: 0.87rem; line-height: 1.75; color: var(--muted); }
@media (max-width: 800px) { .bezirke-gruppen { grid-template-columns: 1fr; } }
.ort-fliess p { font-size: 1rem; line-height: 1.85; color: var(--muted); margin: 0 0 18px; }
.ort-fliess p:last-child { margin-bottom: 0; }
.ort-fliess h3 { font-family: var(--serif); font-size: 1.24rem; font-weight: 400; color: var(--ink);
  margin: 40px 0 14px; padding-top: 26px; border-top: 1px solid var(--border); }
.ort-fliess > h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.bildnachweis { font-size: 0.72rem; line-height: 1.5; color: var(--muted); opacity: .75; margin-top: 8px; }
.bildnachweis a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.wissen { background: var(--white); }
.wissen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 40px; }
.wissen h3 { font-family: var(--serif); font-size: 1.34rem; font-weight: 400; margin: 0 0 12px; }
.wissen p { font-size: 0.92rem; line-height: 1.82; color: var(--muted); margin-bottom: 13px; }
.wissen ul { list-style: none; margin: 4px 0 16px; }
.wissen li { position: relative; padding-left: 22px; font-size: 0.9rem; line-height: 1.7; color: var(--muted); margin-bottom: 8px; }
.wissen li::before { content: '·'; position: absolute; left: 8px; color: var(--akzent); font-weight: 700; }
.kostentabelle { width: 100%; border-collapse: collapse; margin-top: 6px; }
.kostentabelle td { padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; vertical-align: top; line-height: 1.6; }
.kostentabelle td:first-child { font-weight: 600; width: 46%; padding-right: 18px; }
.kostentabelle td:last-child { color: var(--muted); }
.hinweis { margin-top: 20px; padding: 18px 20px; background: var(--paper); border-radius: 10px; font-size: 0.83rem; line-height: 1.7; color: var(--muted); }
@media (max-width: 800px) { .wissen-grid { grid-template-columns: 1fr; gap: 34px; } }
.wert { background: var(--light); }
/* Sechs Karten: Dreier-Raster ergibt zwei volle Reihen statt 4+2 mit Loch */
.wert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.wert-karte { padding: 26px 24px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; }
.wert-karte .nr { font-family: var(--serif); font-size: 1.5rem; color: var(--akzent); line-height: 1; margin-bottom: 12px; }
.wert-karte h3 { font-size: 0.98rem; font-weight: 600; margin-bottom: 8px; }
.wert-karte p { font-size: 0.86rem; line-height: 1.72; color: var(--muted); }
.wert-schluss { margin-top: 30px; max-width: 720px; font-size: 0.95rem; line-height: 1.82; color: var(--muted); }
@media (max-width: 900px) { .wert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .wert-grid { grid-template-columns: 1fr; } }
.rechner { background: var(--ink); color: #fff; }
.rechner .section-label { color: var(--akzent); }
.rechner .section-title { color: #fff; }
.rechner-box { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; margin-top: 42px; align-items: center; }
.rechner-eingabe label { display: block; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-bottom: 12px; }
.rechner-eingabe .feld { display: flex; align-items: baseline; gap: 6px; border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 10px; }
.rechner-eingabe .feld input { flex: 1; min-width: 0; background: none; border: 0; color: #fff; font-family: var(--serif); text-align: right;
  font-size: 2.4rem; width: 100%; outline: none; -moz-appearance: textfield; }
.rechner-eingabe input::-webkit-outer-spin-button, .rechner-eingabe input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rechner-eingabe .eur { font-family: var(--serif); font-size: 1.6rem; color: rgba(255,255,255,0.5); }
.rechner-eingabe input[type=range] { width: 100%; margin-top: 20px; accent-color: var(--akzent); }
.rechner-eingabe .spanne { display: flex; justify-content: space-between; font-size: 0.74rem; color: rgba(255,255,255,0.3); margin-top: 6px; }
.rechner-ergebnis { background: var(--dark-surface); border: 1px solid var(--border-light); border-radius: 12px; padding: 30px 28px; }
.rechner-zeile { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--border-light); font-size: 0.9rem; }
.rechner-zeile:last-of-type { border-bottom: 0; }
.rechner-zeile span:first-child { color: rgba(255,255,255,0.5); }
.rechner-zeile strong { white-space: nowrap; padding-left: 12px; }
.rechner-gross { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.22); }
.rechner-gross .t { font-size: 0.86rem; color: rgba(255,255,255,0.6); max-width: 190px; line-height: 1.5; }
.rechner-gross .z { font-family: var(--serif); font-size: 2.5rem; color: var(--akzent-hell);
  line-height: 1; white-space: nowrap; }
@media (max-width: 560px) {
  .rechner-zeile { font-size: .84rem; }
  .rechner-gross { gap: 16px; }
  .rechner-gross .t { max-width: none; }
  .rechner-gross .z { font-size: 1.9rem; }
}
.rechner-fuss { margin-top: 20px; font-size: 0.78rem; line-height: 1.65; color: rgba(255,255,255,0.32); }
@media (max-width: 820px) { .rechner-box { grid-template-columns: 1fr; gap: 30px; } }
.bg-karte .orte { font-size: 0.8rem; color: var(--akzent); margin-bottom: 10px; }

.footer-ratgeber { border-top: 1px solid var(--border-light); margin-top: 18px; padding-top: 18px;
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 0.84rem; }
.footer-ratgeber strong { font-weight: 600; color: rgba(255,255,255,0.65); }
.footer-ratgeber a { color: rgba(255,255,255,0.4); text-decoration: none; }
.footer-ratgeber a:hover { color: #fff; }


/* ═══════════════════════════════════════════════════════════════
   BEWEGUNG
   Regel: sichtbar ist der Normalzustand. Animiert werden nur
   transform und opacity. Kein Effekt haelt den ersten Bildaufbau auf.
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* Abschnitte steigen beim Hereinscrollen auf */
    .step, .vorteil, .ref-card, .ankauf-card, .objekt, .wert-karte, .ort-schritt, .sit {
      animation: aufsteigen linear both;
      animation-timeline: view();
      animation-range: entry 3% entry 42%;
    }
    @keyframes aufsteigen { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

    /* Ueber uns: das Portraet zieht beim Hereinscrollen langsam nach,
       der Text steigt auf. Gleiche Sprache wie der Rest der Seite. */
    .person-karte > * {
      animation: aufsteigen linear both;
      animation-timeline: view(); animation-range: entry 2% entry 40%;
    }
    .person-bild img {
      animation: portraetnah linear both;
      animation-timeline: view(); animation-range: entry 0% cover 55%;
    }
    @keyframes portraetnah { from { transform: scale(1.09); } to { transform: none; } }
    .person-zitat {
      animation: zitatstrich linear both;
      animation-timeline: view(); animation-range: entry 6% entry 44%;
    }
    @keyframes zitatstrich { from { opacity: 0; clip-path: inset(0 0 0 0); border-left-color: transparent; }
                             to { opacity: 1; border-left-color: var(--akzent); } }

    /* Fazit-Panel: steigt auf, Waage kippt danach zur besseren Seite */
    .ort-gegen > .unterstrich {
      animation: aufsteigen linear both;
      animation-timeline: view(); animation-range: entry 4% entry 46%;
    }
    .us-waage .wfill {
      transform-origin: right center;
      animation: waagekippt linear both;
      animation-timeline: view(); animation-range: entry 25% entry 90%;
    }
    @keyframes waagekippt { from { transform: scaleX(.02); } to { transform: scaleX(1); } }

    .us-waage h3 {
      animation: aufsteigen linear both;
      animation-timeline: view(); animation-range: entry 12% entry 48%;
    }

    /* Linie unter den Abschnittstiteln zeichnet sich */
    .section-title { position: relative; }
    /* Nur bei Titeln ohne Marker, sonst stehen zwei Goldelemente übereinander */
    .section-title:not(:has(.marker))::after {
      content: ''; position: absolute; left: 0; bottom: -14px; width: 74px; height: 2px;
      background: var(--akzent); transform-origin: left center;
      animation: breit linear both; animation-timeline: view(); animation-range: entry 10% cover 30%;
    }
    @keyframes breit { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* In zentrierten Abschnitten muss die Linie mitwandern, sonst klebt sie links
       unter zentriertem Text. Versatz ueber margin, damit transform frei bleibt. */
    .cta-section .container[style*="text-align:center"] > .section-title::after {
      left: 50%; margin-left: -37px;
    }

    /* Bilder ziehen beim Durchscrollen ruhig weiter */
    .ort-block img, .bildzug img {
      animation: ziehen linear both; animation-timeline: view(); animation-range: cover;
    }
    @keyframes ziehen {
      from { transform: scale(1.08) translateY(-1.4%); }
      to   { transform: scale(1.08) translateY(1.4%); }
    }
  }

  @supports (animation-timeline: scroll()) {
    .hero-bilder, .hero-visual { animation: heroweg linear both; animation-timeline: scroll(); animation-range: 0 88vh; }
    @keyframes heroweg { to { transform: translateY(7%) scale(.985); opacity: .82; } }
  }
}

/* Grundgeruest fuer das hervorgehobene Wort. Ausserhalb des Startseiten-Heros
   traegt es die Betonung allein ueber die Farbe, dort waeren Farbe und Balken
   zusammen zu viel. Den Balken setzt weiter unten nur `.hero h1 .marker`. */
.marker { position: relative; display: inline-block; }

/* Knopf: Farbe wischt von links durch, Pfeil rutscht mit */
.btn-primary { position: relative; overflow: hidden; z-index: 0; }
.btn-primary::before {
  content: ''; position: absolute; inset: 0; background: #fff; z-index: -1;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .42s cubic-bezier(.22,1,.36,1);
}
.btn-primary:hover::before { transform: scaleX(1); transform-origin: left center; }
.btn-primary svg { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.btn-primary:hover svg { transform: translateX(5px); }

/* Verweise im Fliesstext: Unterstreichung laeuft ein */
.ort-fliess a, .wissen a, .faq-antwort a {
  position: relative; text-decoration: none; color: var(--ink); font-weight: 500;
}
.ort-fliess a::after, .wissen a::after, .faq-antwort a::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.4px; background: currentColor;
  transform: scaleX(0); transform-origin: right center; transition: transform .34s cubic-bezier(.22,1,.36,1);
}
.ort-fliess a:hover::after, .wissen a:hover::after, .faq-antwort a:hover::after,
.ort-fliess a:focus-visible::after { transform: scaleX(1); transform-origin: left center; }

/* Laufband der Ankaufsorte */
.laufband { background: var(--dark); color: #fff; padding: 17px 0; overflow: hidden; white-space: nowrap;
  border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.laufband .spur { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .laufband .spur { animation: laufen 38s linear infinite; will-change: transform; }
  .laufband:hover .spur, .laufband:focus-within .spur { animation-play-state: paused; }
}
@keyframes laufen { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.laufband a { font-family: var(--serif); font-size: 1.72rem; padding: 0 26px; color: #fff;
  text-decoration: none; opacity: .8; transition: opacity .25s; }
.laufband a:hover { opacity: 1; }
.laufband a::after { content: '·'; color: var(--akzent); margin-left: 26px; }

/* Kartenstapel: Karten bleiben stehen und treten zurueck */
.stapel { margin-top: 44px; }
.stapel .karte { position: sticky; background: var(--white); border: 1px solid var(--border);
  padding: 46px 42px; margin-bottom: 24px; }
.stapel .karte:nth-child(1) { top: 108px; }
.stapel .karte:nth-child(2) { top: 134px; }
.stapel .karte:nth-child(3) { top: 160px; }
.stapel .karte:nth-child(4) { top: 186px; }
.stapel .karte:nth-child(5) { top: 212px; }
.stapel .karte:nth-child(6) { top: 238px; }
.stapel .karte { color: var(--ink); display: grid; grid-template-columns: 64px 1fr; gap: 0 26px;
  align-items: baseline; padding: 38px 40px; }
.stapel .karte .nr { font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--akzent);
  letter-spacing: 0; grid-row: span 2; }
.stapel .karte h3 { font-family: var(--serif); font-size: 1.66rem; font-weight: 400; margin: 0 0 9px;
  color: var(--ink); line-height: 1.15; }
.stapel .karte p { color: var(--muted); line-height: 1.8; max-width: 58ch; margin: 0; font-size: 0.96rem; }
@media (max-width: 620px) {
  .stapel .karte { grid-template-columns: 1fr; padding: 30px 26px; }
  .stapel .karte .nr { grid-row: auto; font-size: 1.4rem; margin-bottom: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .stapel .karte { animation: zuruecktreten linear both; animation-timeline: view();
      animation-range: exit-crossing 0% exit 100%; }
    @keyframes zuruecktreten { to { transform: scale(.94); opacity: .5; } }
  }
}

/* Ablauf mit stehender linker Spalte */
.klebe-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 64px; align-items: start; }
.klebe-fest { position: sticky; top: 104px; }
.klebe-fest .grossziffer { font-family: var(--serif); font-size: 7.4rem; line-height: .84;
  color: var(--border); margin-top: 26px; }
.klebe-schritt { padding: clamp(26px, 4vh, 44px) 0; border-bottom: 1px solid var(--border); }
.klebe-schritt:last-child { border-bottom: 0; }
.klebe-schritt .n { font-family: var(--serif); font-size: 1.36rem; color: var(--akzent); }
.klebe-schritt h3 { font-size: 1.42rem; margin: 9px 0 11px; }
.klebe-schritt p { color: var(--muted); max-width: 52ch; line-height: 1.8; margin: 0; }

/* Vorher / Nachher */
.vn { position: relative; height: clamp(380px, 56vw, 580px); max-width: 480px; margin: 36px auto 0; overflow: hidden;
  border-radius: 12px; cursor: ew-resize; user-select: none; background: var(--light); touch-action: none; }
.vn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; -webkit-user-drag: none; user-select: none; }
.vn .oben { clip-path: inset(0 0 0 var(--x, 50%)); }
.vn .schild { pointer-events: none; }
.vn .griff { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.22); pointer-events: none; }
.vn .griff::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px;
  margin: -22px 0 0 -22px; border: 2px solid #fff; border-radius: 50%; background: rgba(0,0,0,.24); }
.vn .griff::before { content: '⟷'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  color: #fff; font-size: 16px; z-index: 2; }
.vn .schild { position: absolute; top: 15px; padding: 6px 12px; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; background: rgba(0,0,0,.6); color: #fff; }
.vn .schild.l { left: 15px; } .vn .schild.r { right: 15px; }

/* Zahlen laufen hoch, Ziffern springen dabei nicht */
.ort-zahlen .z, .kennzahl .z { font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .klebe-grid { grid-template-columns: 1fr; gap: 0; }
  .klebe-fest { position: static; }
  .klebe-fest .grossziffer { display: none; }
  .klebe-schritt { padding: 34px 0; }
  .stapel .karte { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* ═══ FOOTER, dreispaltig auf dem Rechner ═══ */
footer .footer-neu { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; gap: 40px;
  padding: 46px 0 34px; }
footer .footer-neu h4 { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); font-weight: 600; margin-bottom: 14px; }
footer .footer-neu a { display: block; color: rgba(255,255,255,0.42); text-decoration: none;
  font-size: 0.86rem; line-height: 2; transition: color .2s; }
footer .footer-neu a:hover { color: #fff; }
footer .footer-marke p { font-size: 0.82rem; color: rgba(255,255,255,0.34); line-height: 1.7; margin-top: 16px; }
footer .footer-marke .tel { display: inline-flex; align-items: center; gap: 12px; color: #fff;
  font-family: var(--serif); font-size: 1.55rem; font-weight: 400; letter-spacing: .01em;
  text-decoration: none; margin-top: 20px; transition: gap .22s ease; }
footer .footer-marke .tel:hover { gap: 16px; }
footer .footer-marke .tel-icon { flex: none; width: 21px; height: 21px; color: var(--akzent);
  display: grid; place-items: center; }
footer .footer-marke .tel-icon svg { width: 100%; height: 100%; display: block; }
footer .footer-schluss { border-top: 1px solid var(--border-light); padding: 18px 0 4px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
footer .footer-schluss p { font-size: 0.76rem; color: rgba(255,255,255,0.28); margin: 0; }
footer .footer-schluss a { font-size: 0.76rem; color: rgba(255,255,255,0.42); cursor: pointer;
  text-decoration: none; margin-left: 22px; }
footer .footer-schluss a:hover { color: #fff; }
@media (max-width: 820px) {
  footer .footer-neu { grid-template-columns: 1fr 1fr; gap: 34px; }
  footer .footer-marke { grid-column: 1 / -1; }
}
/* Logo im Footer: Groesse und Deckkraft aus dem Markup ins CSS geholt */
.footer-logo .fl-svg { height: 64px; width: auto; display: block; opacity: .5; }

@media (max-width: 520px) {
  footer .footer-neu { grid-template-columns: 1fr; }
  /* Markenblock zentriert als eigene Einheit, sonst zerfaellt er in lose Zeilen */
  footer .footer-marke {
    text-align: center; padding-bottom: 30px; margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .footer-logo .fl-svg { height: 86px; opacity: .8; margin: 0 auto; }
  /* balance verteilt die Zeilen gleichmaessig, statt einzelne Woerter haengen zu lassen */
  footer .footer-marke p { margin: 16px auto 0; max-width: 32ch; text-wrap: balance; }
  /* Telefonnummer als Knopf, damit sie nicht als Textzeile herumsteht */
  footer .footer-marke .tel {
    margin-top: 22px; padding: 12px 22px 12px 18px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18); gap: 10px;
  }
  footer .footer-marke .tel:hover { gap: 10px; border-color: var(--akzent); }
}


/* Hero rechts: der Schieber statt Bildmosaik */
.hero-visual { display: block; height: auto; align-self: center; }
.hero-visual .vn { max-width: 100%; margin: 0; aspect-ratio: 4/3; border-radius: 12px; }
.hero-visual-text { margin-top: 14px; font-size: 0.86rem; color: rgba(255,255,255,0.38); text-align: center; }
@media (max-width: 900px) {
  .hero-visual { order: -1; height: auto; }
  .hero-visual .vn { aspect-ratio: 3/2; }
}

/* drei Kacheln statt vier */
.typen-frage { margin-top: 34px; font-size: 0.94rem; color: rgba(255,255,255,0.72); }
.typen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 13px; }
.typ { position: relative; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px; padding: 20px 12px 18px; text-align: center; cursor: pointer;
  transition: border-color .25s, background .25s, transform .18s cubic-bezier(.22,1,.36,1);
  font-family: var(--sans); color: #fff; }
.typ:hover { border-color: var(--akzent); background: rgba(184,148,78,0.12); transform: translateY(-2px); }
.typ:active { transform: translateY(0) scale(.985); }
.typ:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 3px; }
.typ svg { width: 26px; height: 26px; margin-bottom: 9px; color: var(--akzent-hell); transition: color .25s; }
.typ span { display: block; font-size: 0.86rem; line-height: 1.35; }
.typ[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: #111; }
.typ[aria-pressed="true"] svg { color: #111; }
.typ[aria-pressed="true"]::after { content: '\2713'; position: absolute; top: 7px; right: 10px; font-size: 13px; font-weight: 700; color: #111; }
@media (max-width: 700px) { .typ { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; }
  .typ svg { margin-bottom: 0; width: 22px; height: 22px; flex: 0 0 auto; } .typ span { font-size: 0.96rem; } }
.typen { grid-template-columns: repeat(3, 1fr); max-width: 470px; }
@media (max-width: 700px) { .typen { grid-template-columns: repeat(3, 1fr); max-width: none; } }


/* Hero füllt genau eine Bildschirmhöhe, das Laufband bildet die Unterkante */
.hero, .ort-hero {
  min-height: calc(100vh - 81px);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 48px; padding-bottom: 0;
  overflow: clip;              /* clip statt hidden, sonst wirkt sticky nicht */
}
.hero > .container, .ort-hero > .container { flex: 1 1 auto; width: 100%; }
.hero > .container { display: flex; align-items: center; }   /* nur die Startseite hat zwei Spalten */
.hero > .container > *, .ort-hero > .container > * { width: 100%; }
/* Das Band klebt an der Unterkante des Bildschirms, solange der Hero zu sehen ist.
   Dadurch steht es immer über der Falz, ohne den Hero zusammenzustauchen. */
.hero .laufband, .ort-hero .laufband {
  flex: 0 0 auto; margin-top: 26px; border-bottom: 0;
  position: sticky; bottom: 0; z-index: 3;
}
@media (max-width: 900px) {
  .hero, .ort-hero { min-height: 0; padding-bottom: 0; }
  .hero > .container, .ort-hero > .container { display: block; }
  .hero .laufband, .ort-hero .laufband { margin-top: 34px; }
}




/* ═══════════════════════════════════════════════════════════════
   OBJEKTDATEN-DIALOG
   Oeffnet sich an Ort und Stelle. Kein Scrollen ueber die halbe Seite.
   ═══════════════════════════════════════════════════════════════ */
dialog.objekt-dialog {
  border: 0; padding: 0; max-width: 720px; width: calc(100% - 32px);
  margin: auto;                 /* sonst haengt er links, weil *{margin:0} greift */
  border-radius: 14px; background: var(--white); color: var(--ink);
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
dialog.objekt-dialog::backdrop { background: rgba(10,10,10,.62); backdrop-filter: blur(3px); }
@media (prefers-reduced-motion: no-preference) {
  dialog.objekt-dialog[open] { animation: dialogauf .32s cubic-bezier(.22,1,.36,1); }
  dialog.objekt-dialog[open]::backdrop { animation: blendauf .32s ease-out; }
  @keyframes dialogauf { from { opacity: 0; transform: translateY(16px) scale(.985); } }
  @keyframes blendauf { from { opacity: 0; } }
}
.dlg-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
  padding: 30px 34px 0; }
.dlg-kopf h2 { font-family: var(--serif); font-weight: 400; font-size: 1.68rem; line-height: 1.2; margin: 0; }
.dlg-kopf p { color: var(--muted); font-size: .9rem; margin-top: 7px; line-height: 1.6; }
.dlg-zu { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--muted);
  cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.dlg-zu:hover { background: var(--light); color: var(--ink); }
.dlg-koerper { padding: 22px 34px 30px; max-height: min(72vh, 660px); overflow-y: auto; }
.dlg-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dlg-reihe.drei { grid-template-columns: 1fr 1fr 1fr; }
.dlg-feld { margin-bottom: 14px; }
.dlg-feld label { display: block; font-size: .78rem; letter-spacing: .04em; color: var(--muted);
  margin-bottom: 6px; font-weight: 500; }
.dlg-feld input, .dlg-feld select, .dlg-feld textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 12px 13px;
  font: inherit; font-size: .97rem; background: #fff; color: var(--ink); }
.dlg-feld input:focus, .dlg-feld select:focus, .dlg-feld textarea:focus {
  outline: 2px solid var(--akzent); outline-offset: 1px; border-color: transparent; }
.dlg-trenner { border-top: 1px solid var(--border); margin: 22px 0 18px; padding-top: 18px; }
.dlg-trenner h3 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 14px; }
.dlg-hinweis { font-size: .82rem; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }
.dlg-senden { width: 100%; background: var(--ink); color: #fff; border: 0; border-radius: 9px;
  padding: 17px; font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: transform .18s cubic-bezier(.22,1,.36,1); margin-top: 6px; }
.dlg-senden:hover { transform: translateY(-2px); }
.dlg-fuss { font-size: .8rem; color: var(--muted); text-align: center; margin-top: 13px; line-height: 1.6; }
.dlg-gruppe { display: none; }
.dlg-gruppe.an { display: block; }
@media (max-width: 640px) {
  .dlg-reihe, .dlg-reihe.drei { grid-template-columns: 1fr; }
  .dlg-kopf { padding: 24px 22px 0; } .dlg-koerper { padding: 18px 22px 24px; }
}


/* ═══ Der Mensch im Hero ═══ */
.chef { position: relative; border-radius: 14px; overflow: hidden; margin: 0; }
.chef img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: center 20%; display: block; }
.chef figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 24px 20px;
  background: linear-gradient(to top, rgba(0,0,0,.82) 12%, rgba(0,0,0,0)); }
.chef .name { display: block; font-family: var(--serif); font-size: 1.68rem; color: #fff; line-height: 1.1; }
.chef .rolle { display: block; font-size: .76rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--akzent-hell); margin-top: 7px; }
.chef-zusage { margin-top: 24px; font-family: var(--serif); font-size: 1.28rem; line-height: 1.5;
  color: rgba(255,255,255,.9); }
.chef-zeile { display: flex; align-items: baseline; gap: 18px; margin-top: 20px; flex-wrap: wrap; }
.chef-tel { color: #fff; font-size: 1.5rem; font-weight: 600; text-decoration: none;
  border-bottom: 2px solid var(--akzent); padding-bottom: 3px; transition: border-color .25s; }
.chef-tel:hover { border-color: #fff; }
.chef-klein { font-size: .82rem; color: rgba(255,255,255,.42); }
@media (max-width: 900px) { .chef img { aspect-ratio: 3/2; } .chef-zusage { font-size: 1.14rem; } }

/* Hero kompakt genug, dass Kacheln und Band gemeinsam über die Falz passen */
.hero .typ { padding: 16px 12px 15px; }
.hero .typen-frage { margin-top: 26px; }
.hero .typen-hinweis { margin-top: 11px; }
.hero .btn-row { margin-top: 26px; }

.hero .chef-zusage { margin-top: 20px; font-size: 1.18rem; }
.hero .chef-zeile { margin-top: 16px; }

/* feste Hoehe schlaegt die geerbte Bildhoehe aus dem alten Hero-Mosaik */
.hero .chef img { height: 400px; aspect-ratio: auto; }
@media (max-width: 900px) { .hero .chef img { height: 300px; } }


/* ═══ QUIZ IM DIALOG ═══ */
.quiz-kopf { padding: 24px 34px 0; }
.quiz-balken { height: 3px; background: var(--border); border-radius: 3px; overflow: hidden; }
.quiz-balken i { display: block; height: 100%; background: var(--akzent); width: 0;
  transition: width .38s cubic-bezier(.22,1,.36,1); }
.quiz-zeile { display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; font-size: .78rem; color: var(--muted); letter-spacing: .04em; }
.quiz-buehne { padding: 26px 34px 8px; min-height: 296px; }
.quiz-frage { font-family: var(--serif); font-weight: 400; font-size: 1.72rem; line-height: 1.2;
  margin-bottom: 6px; }
.quiz-hinweis { color: var(--muted); font-size: .9rem; line-height: 1.6; margin-bottom: 20px; }
.quiz-wahl { display: grid; gap: 9px; }
.quiz-wahl.zwei { grid-template-columns: 1fr 1fr; }
.quiz-wahl button { text-align: left; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px; font: inherit; font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: border-color .18s, background .18s, transform .14s cubic-bezier(.22,1,.36,1); }
.quiz-wahl button:hover { border-color: var(--akzent); background: #fdfbf7; transform: translateX(3px); }
.quiz-wahl button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.quiz-wahl button[aria-pressed="true"] { border-color: var(--akzent); background: var(--akzent); color: #111;
  font-weight: 600; }
.quiz-wahl button .pf { color: var(--akzent); font-size: 1.1rem; opacity: 0; transition: opacity .18s; }
.quiz-wahl button:hover .pf { opacity: 1; }
.quiz-eingabe input { width: 100%; border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 17px; font: inherit; font-size: 1.06rem; }
.quiz-eingabe input:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: transparent; }
.quiz-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Dankeschritt im selben Fenster, kein Seitenwechsel */
.quiz-danke { padding: 14px 0 8px; }
.quiz-danke .haken { display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; background: var(--akzent); color: #14110b; margin-bottom: 18px; }
.quiz-danke .haken svg { width: 24px; height: 24px; }
.quiz-danke .quiz-hinweis a { color: var(--ink); text-underline-offset: 3px; }
.quiz-fuss { display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 14px 34px 26px; }
.quiz-zurueck { background: none; border: 0; color: var(--muted); font: inherit; font-size: .92rem;
  cursor: pointer; padding: 10px 2px; }
.quiz-zurueck:hover { color: var(--ink); }
.quiz-zurueck[hidden] { visibility: hidden; display: block; }
.quiz-weiter { background: var(--ink); color: #fff; border: 0; border-radius: 9px; padding: 15px 30px;
  font: inherit; font-size: .98rem; font-weight: 600; cursor: pointer;
  transition: transform .16s cubic-bezier(.22,1,.36,1); }
.quiz-weiter:hover { transform: translateY(-2px); }
.quiz-weiter[disabled] { opacity: .35; cursor: not-allowed; transform: none; }
.quiz-ueberspringen { background: none; border: 0; color: var(--muted); font: inherit;
  font-size: .84rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.quiz-fertig { text-align: center; padding: 14px 0 4px; }
.quiz-fertig .haken { width: 54px; height: 54px; border-radius: 50%; background: var(--akzent);
  color: #111; display: grid; place-items: center; font-size: 26px; margin: 0 auto 18px; }
@media (prefers-reduced-motion: no-preference) {
  .quiz-buehne > * { animation: quizrein .3s cubic-bezier(.22,1,.36,1) both; }
  @keyframes quizrein { from { opacity: 0; transform: translateX(14px); } }
}
@media (max-width: 640px) {
  .quiz-kopf { padding: 20px 20px 0; } .quiz-buehne { padding: 22px 20px 6px; min-height: 0; }
  .quiz-fuss { padding: 12px 20px 22px; }
  .quiz-wahl.zwei, .quiz-paar { grid-template-columns: 1fr; }
  .quiz-frage { font-size: 1.44rem; }
}

/* Auf den Ortsseiten laufen Ortsteile statt Städte, also Text statt Verweise */
.laufband span { font-family: var(--serif); font-size: 1.72rem; padding: 0 26px;
  color: #fff; opacity: .78; }
.laufband span::after { content: '·'; color: var(--akzent); margin-left: 26px; }

/* Ortsseiten: Kopf zweispaltig, rechts das Bild der Stadt */
.ort-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; width: 100%; }
.ort-hero-bild img { width: 100%; height: 400px; object-fit: cover; border-radius: 14px; display: block; }
.ort-hero-bild .bildnachweis { margin-top: 10px; color: rgba(255,255,255,.34); }
.ort-hero-bild .bildnachweis a { color: rgba(255,255,255,.5); }
@media (max-width: 900px) {
  .ort-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .ort-hero-bild { order: -1; }
  .ort-hero-bild img { height: 260px; }
}

/* Der Satzpunkt darf nicht hinter dem Marker umbrechen (inline-block ist eine Umbruchstelle) */
.nb { white-space: nowrap; }
/* Mittiges Ausrichten nur dort, wo der Hero genau ein Kind hat. Auf den
   Themenseiten stehen Ueberschrift, Zeile und Knoepfe direkt im Container,
   die liefen sonst als drei Spalten nebeneinander. */
.ort-hero > .container:has(> .ort-hero-text) { display: flex; align-items: center; }
.ort-hero > .container:not(:has(> .ort-hero-text)) { display: block; }


/* ═══════════════════════════════════════════════════════════════
   HERO ALS VOLLBILD
   Stadtpanorama im Hintergrund, Aussage in der Mitte,
   darunter eine schmale Leiste mit Gesicht und Telefonnummer.
   ═══════════════════════════════════════════════════════════════ */
.hero { position: relative; background: var(--dark); }
.hero > .container { display: block; position: relative; z-index: 2; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .30; z-index: 0; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 42%, rgba(17,17,17,.34) 0%, rgba(17,17,17,.86) 72%); }
.hero-mitte { max-width: 860px; margin: 0 auto; text-align: center; }
.hero-mitte .hero-label { justify-content: center; }
.hero-mitte h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; }
.hero-lead { margin: 26px auto 0; max-width: 60ch; font-size: 1.06rem; line-height: 1.72;
  color: rgba(255,255,255,.72); }
.hero-mitte .typen-frage { margin-top: 40px; }
.hero-mitte .typen { margin: 13px auto 0; max-width: 520px; }
.hero-mitte .typen-hinweis { text-align: center; }

/* Vertrauensleiste am Fuss des Heros */
.hero-person { position: relative; z-index: 2; margin-top: 46px;
  border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0; }
.hero-person .container { display: flex; align-items: center; gap: 18px; }
.hero-person img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
  object-position: center 18%; flex: 0 0 auto; }
.hero-person .hp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-person .hp-text strong { color: #fff; font-size: .96rem; }
.hero-person .hp-text span { color: rgba(255,255,255,.5); font-size: .88rem; line-height: 1.5; }
.hero-person .hp-tel { margin-left: auto; color: #fff; font-size: 1.24rem; font-weight: 600;
  text-decoration: none; border-bottom: 2px solid var(--akzent); padding-bottom: 2px;
  white-space: nowrap; transition: border-color .25s; }
.hero-person .hp-tel:hover { border-color: #fff; }
@media (max-width: 700px) {
  .hero-person .container { flex-wrap: wrap; gap: 12px; }
  .hero-person .hp-tel { margin-left: 0; width: 100%; }
  .hero-mitte .typen { max-width: none; }
}

/* Auf der Startseite bilden Personenleiste und Laufband gemeinsam den Fuss des Heros.
   Deshalb dort kein Kleben, sonst legt sich das Band ueber die Leiste. */
.hero .laufband { position: static; margin-top: 0; }
.hero-person { margin-top: 34px; padding: 16px 0; }
.hero-mitte h1 { font-size: clamp(2.4rem, 4.9vw, 4.1rem); }
.hero-mitte .typen-frage { margin-top: 32px; }
.hero-lead { margin-top: 22px; }


/* ═══ Hero: alles auf einer Achse, linksbündig ═══ */
.hero-mitte { max-width: 640px; margin: 0; text-align: left; }
.hero-mitte .hero-label { justify-content: flex-start; }
.hero-lead { margin: 20px 0 0; max-width: 46ch; }
.hero-mitte .typen { margin: 12px 0 0; max-width: none; }
.hero-mitte .typen-hinweis { text-align: left; }
/* Kacheln muessen auf dem Foto stehen, nicht darin verschwinden */
.hero .typ { background: rgba(12,12,12,.72); border-color: rgba(255,255,255,.22);
  backdrop-filter: blur(2px); }
.hero .typ:hover { background: rgba(184,148,78,.9); border-color: var(--akzent); color: #111; }
.hero .typ:hover svg { color: #111; }
/* Personenleiste sitzt in derselben Spalte, gleiche Kante */
.hero-person { margin-top: 30px; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.16); }
.hero-person .container { padding: 0; max-width: none; display: flex; align-items: center; gap: 14px; }
.hero-person .hp-tel { margin-left: auto; font-size: 1.16rem; }
.hero-person .hp-text span { font-size: .84rem; }
@media (max-width: 700px) { .hero-mitte { max-width: none; } }

/* Die Leiste steht jetzt direkt in der Textspalte, ohne .container */
.hero-person { display: flex; align-items: center; gap: 14px; }
.hero-person .hp-text { flex: 1 1 auto; }


/* ═══════════════════════════════════════════════════════════════
   HERO, Variante B: Aussage links, Person rechts, Panorama dahinter
   Die Abdunklung laeuft schraeg von links, damit der Text links
   steht und das Bild rechts hell bleibt.
   ═══════════════════════════════════════════════════════════════ */
.hero-bg { opacity: .5; }
.hero::after {
  background: linear-gradient(100deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.7) 46%, rgba(10,10,10,.32) 100%);
}
.hero-zwei { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero-mitte { max-width: none; }
.hero-karte { background: rgba(12,12,12,.62); border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px; padding: 22px; backdrop-filter: blur(6px); }
.hero-karte img { width: 100%; height: 290px; object-fit: cover; object-position: center 16%;
  border-radius: 11px; display: block; }
.hero-karte .nam { font-family: var(--serif); font-size: 1.5rem; margin-top: 16px; color: #fff; }
.hero-karte .rol { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--akzent-hell); margin-top: 5px; }
.hero-karte .satz { color: rgba(255,255,255,.72); font-size: .92rem; line-height: 1.65; margin-top: 12px; }
.hero-karte .tel { display: inline-block; margin-top: 14px; font-size: 1.3rem; font-weight: 600;
  color: #fff; text-decoration: none; border-bottom: 2px solid var(--akzent); padding-bottom: 2px;
  transition: border-color .25s; }
.hero-karte .tel:hover { border-color: #fff; }
@media (max-width: 900px) {
  .hero-zwei { grid-template-columns: 1fr; gap: 30px; }
  .hero-karte img { height: 220px; }
}

/* Die Navigation ist fest positioniert und 81 px hoch. Der Hero beginnt darunter
   bei 0, deshalb muss der obere Abstand die Leiste freihalten, sonst schiebt sich
   die Personenkarte dahinter. */
.hero, .ort-hero { min-height: 100vh; padding-top: 116px; }
@media (max-width: 900px) { .hero, .ort-hero { min-height: 0; padding-top: 104px; } }

/* (entfernt: wirkte nur, solange der Hero an die Bildschirmhoehe gebunden war) */

/* Ruhigeres Tempo im Laufband */
.laufband .spur { animation-duration: 70s; }

/* Der Hero soll nicht auf Biegen und Brechen den ganzen Bildschirm fuellen.
   Sonst klafft zwischen Inhalt und Laufband eine leere Bildflaeche. */
.hero { min-height: 0; }
.hero .hero-zwei { padding-bottom: 40px; }

/* etwas mehr Luft: oben unter der Navigation, unten vor dem Laufband */
.hero { padding-top: 136px; }
.hero .hero-zwei { padding-bottom: 84px; }
.hero-mitte .typen-frage { margin-top: 40px; }
.hero-lead { margin-top: 26px; }
@media (max-width: 900px) {
  .hero { padding-top: 108px; }
  .hero .hero-zwei { padding-bottom: 48px; }
}

/* Luft unter dem Hero-Text, damit das Laufband nicht anstoesst */
.hero .hero-zwei { padding-bottom: 56px; }

/* Telefonnummer als Knopf statt als offener Text */
.hero-karte .tel-knopf { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
  background: var(--akzent); color: #111; font-weight: 600; font-size: 1.02rem;
  padding: 13px 22px; border-radius: 9px; text-decoration: none; position: relative; overflow: hidden;
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s; }
.hero-karte .tel-knopf:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.hero-karte .tel-knopf:active { transform: translateY(0); }
.hero-karte .tel-knopf svg { flex: 0 0 auto; }

/* Die Karte ist mit dem laengeren Satz gewachsen, deshalb weniger Luft vor dem Band */
.hero .hero-zwei { padding-bottom: 30px; }

/* Titelzone ohne die drei AI-Merkmale: kein Kleinlabel, kein Kursiv, kein Marker.
   Die Hierarchie kommt allein aus Groesse und Helligkeit. */
.hero-mitte h1 .zweit { color: rgba(255,255,255,.52); }
.hero-mitte h1 { margin-bottom: 0; }

.ort-hero h1 .zweit { display: inline-block; color: rgba(255,255,255,.5); }

/* Nur im Hero der Startseite traegt der Marker wieder den Balken, dazu steht das
   Wort in Gold. Auf den Ortsseiten (.ort-hero) bleibt es bei der reinen Aufhellung,
   dort waere beides zusammen zu laut. Der Balken liegt hinter der Schrift, deshalb
   braucht der Marker einen eigenen Stapelkontext. */
.hero h1 .marker { z-index: 0; }
.hero h1 .marker::before {
  content: ""; position: absolute; left: -.06em; right: -.06em; bottom: .06em;
  height: .30em; background: rgba(184,148,78,.55); border-radius: 2px; z-index: -1;
}
.hero h1 .zweit .marker { color: #e0c185; }
.ort-hero h1 .zweit .marker { color: rgba(255,255,255,.78); }

/* Auf flachen Fenstern (Laptops) zieht sich der Hero zusammen, damit das Laufband
   nicht unter die Falz rutscht. */
@media (max-height: 880px) and (min-width: 901px) {
  .hero { padding-top: 112px; }
  .hero .hero-zwei { padding-bottom: 18px; gap: 44px; }
  .hero-karte { padding: 18px; }
  .hero-karte img { height: 240px; }
  .hero-mitte h1 { font-size: clamp(2.2rem, 4.1vw, 3.4rem); }
  .hero-lead { margin-top: 18px; }
  .hero-mitte .typen-frage { margin-top: 26px; }
  .laufband { padding: 12px 0; }
  .laufband a, .laufband span { font-size: 1.42rem; }
}


/* ═══════════════════════════════════════════════════════════════
   MOBIL
   Ziel: Aussage und die drei Auswahlflaechen im ersten Bildschirm.
   Die Kacheln werden zu Zeilen mit Icon links, das spart viel Hoehe.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .hero, .ort-hero { padding-top: 96px; }
  .hero .hero-zwei { padding-bottom: 22px; gap: 26px; }
  .hero-mitte h1 { font-size: 2rem; line-height: 1.1; }
  .hero-lead { font-size: .96rem; line-height: 1.62; margin-top: 16px; }
  .hero-mitte .typen-frage { margin-top: 24px; font-size: .92rem; }

  .typen { grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
  .typ { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; }
  .typ svg { margin-bottom: 0; width: 22px; height: 22px; flex: 0 0 auto; }
  .typ span { font-size: .96rem; }

  .hero-karte { padding: 16px; }
  .hero-karte img { height: 170px; }
  .hero-karte .nam { font-size: 1.34rem; margin-top: 12px; }
  .hero-karte .satz { font-size: .88rem; margin-top: 9px; }

  .laufband { padding: 11px 0; }
  .laufband a, .laufband span { font-size: 1.24rem; padding: 0 16px; }
  .laufband a::after, .laufband span::after { margin-left: 16px; }

  /* Ortsseiten: Bild flacher, Text zuerst */
  .ort-hero-grid { gap: 22px; }
  .ort-hero-bild img { height: 190px; }
}

/* Headline auf dem Handy groesser, Platz kommt aus dem Absatz.
   Selektoren bewusst spezifischer, sonst gewinnt die Desktop-Regel. */
@media (max-width: 600px) {
  .hero .hero-mitte h1 { font-size: 2.4rem; line-height: 1.05; letter-spacing: -.022em; }
  .hero .hero-lead { font-size: .94rem; line-height: 1.6; margin-top: 15px; }
  .hero .hero-mitte .typen-frage { margin-top: 22px; }
  .ort-hero h1 { font-size: 2.3rem; line-height: 1.06; }
  .ort-hero .lead { font-size: .94rem; line-height: 1.6; }
}


/* ═══ Ortsseiten: Stadtbild als Vollbild hinter dem Kopf ═══ */
.ort-hero { position: relative; overflow: clip; background: var(--dark); }
.ort-hero .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .5; z-index: 0; }
.ort-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.7) 46%, rgba(10,10,10,.32) 100%); }
.ort-hero > .container { position: relative; z-index: 2; }
.ort-hero-text { max-width: 620px; }
@media (max-width: 900px) { .ort-hero-text { max-width: none; } }

/* Der Ablauf-Abschnitt braucht nicht die volle Sektionspolsterung, er traegt
   seine Hoehe bereits durch die vier Schritte. */
.ablauf { padding-top: 78px; padding-bottom: 78px; }


/* ═══ Anlässe: Raster statt Kachelschlacht ═══
   Grid statt CSS-Spalten, damit die Trennlinien zeilenweise bündig laufen. */
.anlass-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; margin-top: 48px; }
.anlass { padding: 24px 0 26px; border-top: 1px solid var(--border); }
.anlass h3 { font-family: var(--serif); font-weight: 400; font-size: 1.42rem; line-height: 1.2;
  margin: 0 0 9px; }
.anlass p { color: var(--muted); line-height: 1.8; font-size: .95rem; margin: 0; }
@media (max-width: 820px) { .anlass-raster { grid-template-columns: 1fr; gap: 0; } }

/* Zwei volle Sektionspolster (96 + 96) stiessen aneinander, das riss die Seite auseinander. */
.situationen { padding-bottom: 54px; }
.zustand { padding-top: 62px; }


/* ═══ „Ja, kaufen wir." ═══
   Links die Sorge des Verkäufers, rechts immer dieselbe Antwort mit wechselnder Begründung. */
.ja-liste { margin-top: 46px; }
.ja-zeile { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: center;
  padding: 26px 0; border-bottom: 1px solid var(--border); }
.ja-zeile:first-child { border-top: 1px solid var(--border); }
.ja-frage { font-family: var(--serif); font-size: clamp(1.34rem, 2.3vw, 1.86rem); line-height: 1.28; }
.ja-antwort { font-size: 1.04rem; font-weight: 600; color: #8d6f38; }
.ja-antwort small { display: block; font-weight: 400; font-size: .9rem; color: var(--muted);
  margin-top: 5px; line-height: 1.62; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ja-antwort { animation: antwortrein linear both; animation-timeline: view();
      animation-range: entry 18% cover 34%; }
    @keyframes antwortrein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  }
}
@media (max-width: 820px) {
  .ja-zeile { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .ja-frage { font-size: 1.24rem; }
}

/* ── Stadtbezirks-Karte (Ortsseiten) ─────────────────────────────── */
.ort-karte { padding: 96px 0; background: var(--white); }
.kt-schalter-reihe { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 26px; }
.kt-schalter {
  font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.01em;
  padding: 9px 16px; border: 1px solid var(--border); border-radius: 100px;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color .25s, border-color .25s, background .25s;
}
.kt-schalter:hover { color: var(--ink); border-color: rgba(0,0,0,0.22); }
.kt-schalter.ist-an { background: var(--ink); border-color: var(--ink); color: var(--white); }

.kt-buehne { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 40px; align-items: center; }
.kt-svg { width: 100%; max-height: 540px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.bz {
  fill: var(--light); stroke: var(--white); stroke-width: 1.6; stroke-linejoin: round;
  cursor: pointer; transition: fill .45s cubic-bezier(.4,0,.2,1), opacity .3s;
}
.bz:hover, .bz:focus-visible { stroke: var(--ink); stroke-width: 2.2; outline: none; }
.kt-buehne.hat-auswahl .bz:not(.ist-aktiv) { opacity: .45; }

.kt-info { padding: 22px 0 0; border-top: 2px solid var(--ink); }
.kt-info-name { font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; color: var(--ink); }
.kt-info-wert { font-size: 2.1rem; font-weight: 300; letter-spacing: -0.02em; margin-top: 10px; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.kt-info-was { font-size: 0.82rem; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.kt-kauf { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.kt-kauf-titel { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--akzent); margin-bottom: 9px; }
.kt-kauf p { font-size: .9rem; line-height: 1.65; color: var(--muted); margin: 0 0 18px; }
.kt-cta { display: inline-block; font-size: .88rem; font-weight: 600; color: #14110b; background: #c9a25c;
  border-radius: 999px; padding: 11px 20px; text-decoration: none; transition: background .2s, transform .2s; }
.kt-cta:hover { background: var(--akzent-hell); transform: translateY(-1px); }

.kt-legende { display: flex; align-items: center; gap: 6px; margin-top: 26px; font-size: 0.75rem; color: var(--muted); }
.kt-legende i { width: 34px; height: 8px; border-radius: 2px; display: block; }
.kt-legende span:first-child { margin-right: 4px; }
.kt-legende span:last-child { margin-left: 4px; }
.kt-quelle { font-size: 0.74rem; line-height: 1.65; color: var(--muted); opacity: .8; margin-top: 22px; max-width: 720px; }
.kt-quelle a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 820px) {
  .ort-karte { padding: 68px 0; }
  .kt-buehne { grid-template-columns: 1fr; gap: 20px; }
  .kt-svg { max-height: 62vh; }
  .kt-info { border-top-width: 1px; padding-top: 16px; }
  .kt-info-wert { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .kt-svg { animation: kartePop linear both; animation-timeline: view(); animation-range: entry 5% cover 26%; }
    @keyframes kartePop { from { opacity: 0; transform: scale(.965); } to { opacity: 1; transform: none; } }
  }
}

/* ── Vorher/Nachher nebeneinander (echte Projektfotos) ───────────── */
.vn-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 820px; margin: 0 auto; }
.vn-paar figure { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: var(--light); }
.vn-paar img { display: block; width: 100%; height: clamp(300px, 40vw, 460px); object-fit: cover; }
.vn-paar figcaption { position: absolute; top: 12px; left: 12px; padding: 5px 12px; border-radius: 100px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; background: rgba(10,10,10,.72);
  color: #fff; backdrop-filter: blur(4px); }
.vn-paar figure:last-child figcaption { background: var(--akzent); }
@media (max-width: 560px) { .vn-paar { gap: 10px; } .vn-paar figcaption { font-size: 10px; padding: 4px 9px; } }

/* ── "So arbeiten wir" — echte Baustellen-/Bestandsfotos ─────────── */
.arbeit { background: var(--ink); color: #fff; padding: 96px 0; }
.arbeit .section-label { color: var(--akzent-hell); }
.arbeit .section-title { color: #fff; }
.arbeit .section-subtitle { color: rgba(255,255,255,0.62); }
/* ── Umbau: Anfang (Roh) + Ergebnis (Fertig), editorial ─────────── */
.umbau-block { margin-top: 84px; }
.umbau-kicker { text-align: center; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--akzent); }
.umbau-h { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.2vw, 2.5rem); line-height: 1.1; text-align: center; margin: 8px 0 10px; }
.umbau-p { text-align: center; color: var(--muted); max-width: 60ch; margin: 0 auto 32px; line-height: 1.7; }

/* Anfang: asymmetrischer Roh-Cluster (1 groß + 3 klein) */
.anfang-cluster { display: grid; grid-template-columns: 1fr 1.2fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 14px; height: clamp(420px, 48vw, 540px); }
.anfang-cluster figure { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: var(--light); }
.anfang-cluster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anfang-cluster figcaption { position: absolute; top: 12px; left: 12px; padding: 5px 11px; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border-radius: 100px; line-height: 1; }
.anfang-cluster figure:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }  /* Abbruch-Bad, hoch, links */
.anfang-cluster figure:nth-child(2) { grid-column: 3; grid-row: 1 / 3; }  /* Elektrik, hoch, rechts */
.anfang-cluster figure:nth-child(3) { grid-column: 2; grid-row: 1; }      /* Küche, quer, Mitte oben */
.anfang-cluster figure:nth-child(4) { grid-column: 2; grid-row: 2; }      /* Nachlass, quer, Mitte unten */

/* Ergebnis: Vorher/Nachher-Regler (links) + fertige Räume (rechts) */
.ergebnis { display: grid; grid-template-columns: 0.82fr 1.18fr; grid-template-rows: minmax(0, 1fr); gap: 16px; height: clamp(440px, 52vw, 580px); }
.ergebnis > * { min-height: 0; min-width: 0; }
.ergebnis .vn { height: 100%; max-width: none; margin: 0; }
.ergebnis-fertig { display: grid; grid-template-columns: 1fr 1.15fr; grid-template-rows: 1fr 1fr; gap: 14px; height: 100%; }
.ergebnis-fertig figure { position: relative; margin: 0; min-height: 0; border-radius: 12px; overflow: hidden; background: var(--light); }
.ergebnis-fertig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ergebnis-fertig .gross { grid-column: 2; grid-row: 1 / 3; }             /* Wohnzimmer, hoch, rechts außen */
.ergebnis-fertig figure:nth-child(2) { grid-column: 1; grid-row: 1; }   /* Dachbad, quer, Mitte oben */
.ergebnis-fertig figure:nth-child(3) { grid-column: 1; grid-row: 2; }   /* Bad, Mitte unten */

@media (max-width: 860px) {
  .anfang-cluster { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .anfang-cluster figure { height: clamp(170px, 40vw, 240px); }
  .anfang-cluster figure:nth-child(1) { grid-column: 1 / -1; grid-row: auto; height: clamp(230px, 56vw, 320px); }
  .anfang-cluster figure:nth-child(2) { grid-column: 1 / -1; grid-row: auto; }
  .anfang-cluster figure:nth-child(3), .anfang-cluster figure:nth-child(4) { grid-column: auto; grid-row: auto; }
  .ergebnis { grid-template-columns: 1fr; height: auto; }
  .ergebnis .vn { height: clamp(360px, 82vw, 520px); }
  .ergebnis-fertig { height: auto; grid-template-rows: none; }
  .ergebnis-fertig figure { height: clamp(170px, 42vw, 230px); }
  .ergebnis-fertig figure:nth-child(2), .ergebnis-fertig figure:nth-child(3) { grid-column: auto; grid-row: auto; }
  .ergebnis-fertig .gross { grid-column: 1 / -1; grid-row: auto; height: clamp(300px, 78vw, 420px); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .anfang-cluster figure, .ergebnis-fertig figure { animation: fadeUp .6s ease-out both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
  }
}

/* ── Vergleich als "Waage" (ersetzt die alte Tabelle) ───────────── */
.waage { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; }
.wkarte { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 26px 28px; }
.wthema { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--akzent); margin-bottom: 8px; }
.wkarte.pro-makler .wthema { color: #2f7d52; }
.wkarte h3 { font-family: var(--serif); font-size: 1.34rem; font-weight: 400; line-height: 1.2; }
.wtext { font-size: 0.9rem; color: var(--muted); line-height: 1.72; margin-top: 16px; }
.wbalken { position: relative; height: 9px; background: var(--light); border-radius: 100px; margin-top: 20px; }
.wmitte { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: rgba(0,0,0,.14);
  transform: translateX(-50%); z-index: 2; border-radius: 2px; }
.wfill { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-radius: 100px;
  transition: width .9s cubic-bezier(.34,1.15,.64,1), left .9s cubic-bezier(.34,1.15,.64,1); }
.wfazit { grid-column: 1 / -1; background: var(--ink); color: #fff; border: 0; border-radius: 14px; padding: 32px 34px;
  display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }
.wfazit .gross { font-family: var(--serif); font-size: 3.2rem; line-height: 1; color: var(--akzent-hell); white-space: nowrap; }
.wfazit .gross small { display: block; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.04em;
  color: rgba(255,255,255,.5); margin-top: 8px; }
.wfazit h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 400; color: #fff; margin-bottom: 8px; }
.wfazit p { font-size: 0.92rem; color: rgba(255,255,255,.66); line-height: 1.75; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .waage .wkarte { animation: wRein .6s ease-out both; animation-timeline: view(); animation-range: entry 2% cover 22%; }
  }
}
@keyframes wRein { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
  .waage { grid-template-columns: 1fr; }
  .wfazit { grid-template-columns: 1fr; gap: 14px; text-align: center; }
  .wfazit .gross { font-size: 2.6rem; }
}

/* ── Preis-Variante A: Statement (dunkel, wortweise) ────────────── */
.preis-statement { background: var(--ink); color: #fff; }
.preis-statement .section-label { color: var(--akzent-hell); }
.ps-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; margin-top: 26px; }
.ps-gross { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.12; }
.ps-rechts { align-self: center; }
.ps-gross .zeile { display: block; overflow: hidden; }
.ps-gross .zeile > span { display: block; }
.ps-unter { font-size: 1.02rem; color: rgba(255,255,255,.62); line-height: 1.65; margin: 0; }
.ps-unter + .ps-unter { margin-top: 18px; }
.ps-ehrlich p + p { margin-top: 14px; }
.ps-unter em, .ps-ehrlich em { font-style: normal; color: #fff; }
.ps-ehrlich { margin-top: 34px; max-width: 42ch; }
.ps-ehrlich-label { display: inline-block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--akzent-hell); font-weight: 600; padding-bottom: 9px; position: relative; margin-bottom: 13px; }
.ps-ehrlich-label::after { content: ''; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; background: var(--akzent); }
.ps-ehrlich p { font-size: 1.02rem; color: rgba(255,255,255,.6); line-height: 1.65; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ps-gross .zeile > span { transform: translateY(105%); animation: psAuf .7s cubic-bezier(.2,.7,.3,1) both;
      animation-timeline: view(); animation-range: entry 4% cover 26%; }
    .ps-gross .zeile:nth-child(2) > span { animation-range: entry 9% cover 30%; }
    .ps-gross .zeile:nth-child(3) > span { animation-range: entry 14% cover 34%; }
    .ps-unter, .ps-ehrlich { animation: psFade .8s ease-out both; animation-timeline: view(); animation-range: entry 16% cover 42%; }
  }
}
@keyframes psAuf { to { transform: none; } }
@keyframes psFade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ── Preis-Variante C: Anker ────────────────────────────────────── */
.pc-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; margin-top: 44px; }
.pc-anker { background: var(--ink); color: #fff; border-radius: 20px; padding: 48px 44px; position: relative; overflow: hidden; }
.pc-anker .klein { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--akzent-hell); }
.pc-anker .haupt { font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.1rem); line-height: 1.05; margin: 14px 0 18px; }
.pc-anker p { font-size: .95rem; color: rgba(255,255,255,.62); line-height: 1.7; max-width: 34ch; position: relative; z-index: 1; }
.pc-anker .sig { position: absolute; right: -26px; bottom: -46px; font-size: 15rem; line-height: 1;
  color: rgba(255,255,255,.045); font-family: var(--serif); pointer-events: none; }
.pc-text .lead { font-family: var(--serif); font-size: 1.55rem; line-height: 1.3; margin-bottom: 18px; color: var(--ink); }
.pc-text p { font-size: .95rem; color: var(--muted); line-height: 1.8; margin-bottom: 14px; }
.pc-makler { margin-top: 20px; padding: 18px 22px; background: var(--paper); border-left: 3px solid var(--akzent);
  border-radius: 0 10px 10px 0; font-size: .9rem; line-height: 1.7; color: var(--ink); }
.pc-makler b { font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .pc-anker, .pc-text { animation: psFade .7s ease-out both; animation-timeline: view(); animation-range: entry 3% cover 24%; }
  }
}
@media (max-width: 820px) { .pc-grid { grid-template-columns: 1fr; gap: 26px; }
  .ps-layout { grid-template-columns: 1fr; gap: 30px; } }

/* ── Angekaufte Objekte (horizontal scrollbar) ──────────────────── */
.obj-scroller { position: relative; margin-top: 42px; }
.obj-track { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
  padding: 4px 2px 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.obj-track::-webkit-scrollbar { display: none; }
.obj { flex: 0 0 300px; scroll-snap-align: start; background: var(--white); border-radius: 16px; overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease; }
.obj:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.09); }
.obj-bild { aspect-ratio: 1 / 1; overflow: hidden; background: var(--light); }
.obj-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.obj-bild-leer { position: relative; background: radial-gradient(120% 100% at 100% 0%, #262626 0%, #131313 55%); }
.obj-bild-leer::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 55% at 85% 12%, rgba(216,184,120,.20), transparent 72%); }
.obj-bild-leer { display: grid; place-items: center; padding: 24px; }
.obj-leer-ort { font-family: var(--serif); font-size: 1.7rem; line-height: 1.15; color: #fff; text-align: center; position: relative; z-index: 1; }
.obj-leer-tag { position: absolute; top: 18px; left: 20px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent-hell); z-index: 1; }
.obj-body { padding: 20px 22px 22px; }
.obj-stadt { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); margin-bottom: 4px; }
.obj-ort { font-family: var(--serif); font-size: 1.4rem; line-height: 1.1; color: var(--ink); }
.obj-daten { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border);
  font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.obj-pfeil { position: absolute; top: 42%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px;
  border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-size: 19px; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0,0,0,.16); transition: background .2s, opacity .25s, transform .2s; }
.obj-pfeil:hover { background: var(--akzent); }
.obj-pfeil.links { left: -6px; } .obj-pfeil.rechts { right: -6px; }
.obj-pfeil[hidden] { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { .obj-pfeil { display: none; } .obj { flex-basis: 78vw; } }

/* ── Landingpage-Hero: zentriert + kompakter (nicht bildschirmhoch) ── */
.ort-hero { min-height: 0 !important; justify-content: flex-start !important; padding: 132px 0 0 !important; }
.ort-hero::before { display: none; }
.ort-hero > .container { flex: 0 0 auto; }
.ort-hero .ort-hero-text { max-width: 760px; margin: 0 auto; text-align: center; padding-bottom: 8px; }
.ort-hero .ort-hero-text .lead { margin: 18px auto 0; }
.ort-hero .ort-hero-text .typen-frage { text-align: center; }
.ort-hero .ort-hero-text .typen { margin-left: auto; margin-right: auto; }
@media (max-width: 900px) { .ort-hero { padding-top: 104px; } }
/* Laufband im kompakten Hero nicht mehr sticky — Bild endet am Band */
.ort-hero .laufband { position: static; margin-top: 30px; }

/* ── Rückmeldungen / Testimonials (global, war nur inline auf der Startseite) ── */
.stimmen { background: var(--white); }
.stimmen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.stimme { padding: 20px 22px 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--white); display: flex; flex-direction: column; }
.stimme .sterne { display: flex; gap: 3px; margin-bottom: 13px; }
.stimme .sterne svg { width: 19px; height: 19px; color: var(--akzent); }
.stimme-titel { font-size: .95rem; font-weight: 600; color: var(--ink); line-height: 1.4; margin-bottom: 8px; }
@media (min-width: 621px) { .stimme-titel { min-height: 2.8em; } }
.stimme p { font-size: .85rem; line-height: 1.7; color: var(--muted); margin-bottom: 14px; }
.stimme-fuss { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 3px;
  align-items: baseline; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.stimme-fuss .wer { font-size: .85rem; font-weight: 600; line-height: 1.3; }
.stimme-fuss .wo { grid-column: 1 / -1; font-size: .76rem; color: var(--muted); line-height: 1.4; }


.stimme-jahr { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--akzent); font-weight: 700; white-space: nowrap; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stimmen-grid .stimme { opacity: 0; animation: stimmeSteigen linear both; animation-timeline: view(); animation-range: entry 5% cover 30%; }
    .stimmen-grid .stimme:nth-child(2) { animation-range: entry 5% cover 38%; }
    .stimmen-grid .stimme:nth-child(3) { animation-range: entry 5% cover 46%; }
    .stimme .sterne svg { opacity: .18; animation: sternFuellen linear both; animation-timeline: view(); animation-range: entry 14% cover 34%; }
    .stimme .sterne svg:nth-child(2) { animation-range: entry 14% cover 39%; }
    .stimme .sterne svg:nth-child(3) { animation-range: entry 14% cover 44%; }
    .stimme .sterne svg:nth-child(4) { animation-range: entry 14% cover 49%; }
    .stimme .sterne svg:nth-child(5) { animation-range: entry 14% cover 54%; }
  }
}
@keyframes stimmeSteigen { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sternFuellen { from { opacity: .18; transform: scale(.7); } to { opacity: 1; transform: none; } }

@media (max-width: 1100px) { .stimmen-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .stimmen-grid { grid-template-columns: 1fr; } }
.ort-quelle { font-size: 0.85rem; color: var(--muted); }

/* ── Zeilenumbrüche: keine Waisen, ausgeglichene Zeilen ──────────
   balance = Zeilen gleich lang (kurze, zentrierte Texte)
   pretty  = verhindert einzelnes Wort in der letzten Zeile (Fließtext) */
h1, h2, h3, .section-title, .section-subtitle, .umbau-h,
.ort-hero .lead, .hero-lead, .zweit, .quiz-frage, .vorteil h3, .obj-ort {
  text-wrap: balance;
}
p, li, .umbau-p, .ort-fliess p, .vorteil p, .stimme p, .ort-schritt span, .kk p {
  text-wrap: pretty;
}

/* ── Sicherheit / Legitimation ──────────────────────────────── */
.sicherheit { background: var(--ink); color: #fff; padding: 78px 0; }
.sicherheit .section-label { color: var(--akzent-hell); }
.sicherheit .section-title { color: #fff; }
.sicherheit .section-subtitle { color: rgba(255,255,255,.55); }
.si-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 38px; }
.si { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.10); border-radius: 13px; padding: 24px 22px; }
.si svg { width: 24px; height: 24px; color: var(--akzent-hell); margin-bottom: 13px; }
.si h3 { font-size: .93rem; font-weight: 600; color: #fff; margin-bottom: 7px; letter-spacing: .01em; line-height: 1.35; }
@media (min-width: 541px) { .si h3 { min-height: 2.7em; } }
.si p { font-size: 0.92rem; line-height: 1.65; color: rgba(255,255,255,.58); -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 4 3; text-wrap: pretty; }
.si b { color: rgba(255,255,255,.85); font-weight: 600; }
@media (max-width: 1200px) { .si-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .si-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .si-grid { grid-template-columns: 1fr; } }

/* ── SEO-Strecke visuell auflockern ─────────────────────────── */
/* Zweispaltig: Gegenüberstellung (Makler vs. Direktverkauf) */
.ort-gegen { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
.ort-gegen > div { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 28px 26px; }
.ort-gegen > div.unsere { background: var(--paper); border-color: var(--border); position: relative; overflow: hidden; }
.ort-gegen > div.unsere::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--akzent); }
.ort-gegen h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.2; margin: 0 0 12px; padding-top: 0; border-top: none; color: var(--ink); }

.ort-gegen p { font-size: .9rem; line-height: 1.75; color: var(--muted); }

.ort-gegen > .unterstrich {
  grid-column: 1 / -1; margin-top: 8px; padding: 32px 36px 34px;
  background: var(--ink); border-radius: 14px; display: grid; gap: 22px;
}
.us-kopf { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.13); }
.us-label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--akzent); }
.us-btn { flex: none; font-size: .84rem; font-weight: 600; color: #14110b; background: #c9a25c;
  border-radius: 999px; padding: 9px 18px; text-decoration: none; transition: background .2s, transform .2s; }
.us-btn:hover { background: var(--akzent-hell); transform: translateY(-1px); }
.us-waage h3 { font-family: var(--serif); font-weight: 400; font-size: 1.54rem; line-height: 1.25;
  color: #fff; margin: 0 0 22px; max-width: 30ch; }
.us-waage .wbalken { background: rgba(255,255,255,.12); margin-top: 0; }
.us-waage .wmitte { background: rgba(255,255,255,.32); }
.us-waage .wfill { background: linear-gradient(90deg, var(--akzent), var(--akzent-hell)); }
.wskala { display: flex; justify-content: space-between; margin-top: 11px;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.ort-gegen > .unterstrich > .us-zusatz {
  font-size: .93rem; line-height: 1.72; color: rgba(255,255,255,.6); margin: 0; max-width: 46ch;
}
@media (min-width: 1000px) {
  .ort-gegen > .unterstrich { grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr);
    column-gap: 60px; align-items: center; }
  .ort-gegen > .unterstrich > .us-kopf { grid-column: 1 / -1; }
  .ort-gegen > .unterstrich > .us-waage { grid-column: 1; }
  .ort-gegen > .unterstrich > .us-zusatz { grid-column: 2; }
}
@media (max-width: 999px) {
  .ort-gegen > .unterstrich { padding: 26px 22px 28px; }
  .us-waage h3 { font-size: 1.26rem; max-width: none; }
  .us-kopf { flex-wrap: wrap; }
  .ort-gegen > .unterstrich > .us-zusatz { max-width: none; }
}
.ort-gegen + p { margin-top: 24px; }
@media (max-width: 780px) { .ort-gegen { grid-template-columns: 1fr; } }

/* Lead-Absatz: erster Satz größer, mit Akzentlinie */
/* Lead-Absatz: groesser und dunkler als der Fliesstext. Der goldene Balken links ist
   entfallen, er war ein drittes Goldelement neben Marker und Titel-Linie. */
.ort-lead { font-size: 1.16rem; line-height: 1.62; color: var(--ink);
  margin: 0 0 22px; max-width: 62ch; }

/* Weiterlesen als Karten statt Textabsatz */
.nachlesen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 28px; }
.nachlesen a { display: block; background: var(--white); border: 1px solid var(--border); border-radius: 13px;
  padding: 22px 24px; text-decoration: none; transition: transform .22s ease, box-shadow .22s ease; }
.nachlesen a:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.07); }
.nachlesen .nl-t { font-family: var(--serif); font-size: 1.16rem; line-height: 1.25; color: var(--ink); }
.nachlesen .nl-p { margin-top: 8px; font-size: .85rem; line-height: 1.6; color: var(--muted); }
.nachlesen .nl-pf { margin-top: 12px; font-size: .82rem; color: var(--akzent); font-weight: 600; }

.stadtlinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px 24px; margin-top: 24px; }
.stadtlinks a { display: block; padding: 11px 2px; font-size: .95rem; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--border); transition: color .18s ease, padding-left .18s ease; }
.stadtlinks a:hover { color: var(--akzent); padding-left: 6px; }
.stadtlinks a::after { content: " \2192"; color: var(--akzent); opacity: 0; transition: opacity .18s ease; }
.stadtlinks a:hover::after { opacity: 1; }

/* ── SEO-Blöcke: zweispaltiges Editorial-Layout statt schmaler Linkskolonne ── */
@media (min-width: 981px) {
  .ort-block > .container {
    display: grid; grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
    column-gap: 64px; align-items: start;
  }
  .ort-block > .container > .section-label { grid-column: 1; grid-row: 1; }
  .ort-block > .container > .section-title { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .ort-block > .container > .ort-fliess { grid-column: 2; grid-row: 1 / span 3; margin-top: 4px; }
  .ort-block > .container > .section-subtitle { grid-column: 1; grid-row: 3; }
  /* Kopf oben buendig, laeuft bei langen Texten mit statt in der Mitte zu haengen */
  .ort-block > .container:has(.ort-kopf) { grid-template-rows: 1fr; }
  .ort-block > .container > .ort-kopf {
    grid-column: 1; grid-row: 1; align-self: start;
    position: sticky; top: 132px;
  }
  .ort-block > .container:has(.ort-kopf) > .ort-fliess { grid-column: 2; grid-row: 1; margin-top: 0; }
  .ort-block.gespiegelt > .container > .ort-kopf { grid-column: 2; }
  .ort-block.gespiegelt > .container:has(.ort-kopf) > .ort-fliess { grid-column: 1; }
  /* Gespiegelt muessen die Spaltenbreiten mittauschen, sonst steht der Text
     in der schmalen Spalte und wird doppelt so hoch wie noetig */
  .ort-block.gespiegelt > .container:has(.ort-kopf) {
    grid-template-columns: minmax(0, 1.28fr) minmax(240px, 0.72fr);
  }
  /* Blöcke mit eigenem Raster laufen über die volle Breite */
  .ort-block > .container:has(.ort-gegen), .ort-block > .container:has(.nachlesen),
  .ort-block > .container:has(.objekt-liste), .ort-block > .container:has(.vorteil-grid),
  .ort-block > .container:has(.bezirke-gruppen), .ort-block > .container:has(.gegenueber),
  .ort-block > .container:has(.hinweis-paar), .ort-block > .container:has(.anlass-raster),
  .ort-block > .container:has(.wert-grid), .ort-block > .container:has(.hinweis-drei) { display: block; }
  .ort-block > .container:has(.ort-gegen) > .section-title,
  .ort-block > .container:has(.nachlesen) > .section-title,
  .ort-block > .container:has(.objekt-liste) > .section-title { margin-bottom: 30px; }
  /* Jeder zweite Abschnitt kippt die Seiten, damit die Strecke nicht gleichförmig läuft */
  .ort-block.gespiegelt > .container > .section-label,
  .ort-block.gespiegelt > .container > .section-title,
  .ort-block.gespiegelt > .container > .section-subtitle { grid-column: 2; }
  .ort-block.gespiegelt > .container > .ort-fliess { grid-column: 1; grid-row: 1 / span 3; }
}
.ort-fliess { max-width: 68ch; }
.ort-block > .container:has(.ort-gegen) .ort-fliess,
.ort-block > .container:has(.nachlesen) .ort-fliess { max-width: none; }

/* ── Sanfte Scroll-Animationen für die Landingpage-Strecke ──────────
   SEO-sicher: Inhalte sind ohne Animation voll sichtbar. Die versteckten
   Startzustände stehen ausschließlich im @supports-Block, damit ältere
   Browser und Crawler alles normal gerendert bekommen. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .vorteil, .si, .ort-gegen > div, .nachlesen a, .kk, .bg-karte, .vorteil:nth-child(2), .si:nth-child(2), .nachlesen a:nth-child(2), .kk:nth-child(2), .stimme:nth-child(2) { animation-range: entry 5% cover 23%; }
    .vorteil:nth-child(3), .si:nth-child(3), .kk:nth-child(3), .stimme:nth-child(3) { animation-range: entry 8% cover 26%; }
    .vorteil:nth-child(n+4), .si:nth-child(n+4), .stimme:nth-child(n+4) { animation-range: entry 11% cover 29%; }

    .ort-block > .container > .section-title,
    .ort-teile .section-title, .vorteile .section-title, .sicherheit .section-title {
      animation: fadeUp .65s cubic-bezier(.22,1,.36,1) both;
      animation-timeline: view(); animation-range: entry 0% cover 18%;
    }
    .ort-lead { animation: fadeUp .7s cubic-bezier(.22,1,.36,1) both; animation-timeline: view(); animation-range: entry 4% cover 22%; }
    .datenband .zahl { animation: fadeUp .8s cubic-bezier(.22,1,.36,1) both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
    .ort-schritt { animation: fadeUp .6s cubic-bezier(.22,1,.36,1) both; animation-timeline: view(); animation-range: entry 2% cover 20%; }
    .ort-schritt:nth-child(2) { animation-range: entry 5% cover 23%; }
    .ort-schritt:nth-child(3) { animation-range: entry 8% cover 26%; }
    .ort-schritt:nth-child(4) { animation-range: entry 11% cover 29%; }
  }
}
/* Telefonzeile unter der Objektauswahl im Hero */
.hero-tel { margin-top: 20px; font-size: .93rem; color: rgba(255,255,255,.62); }
.hero-tel a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--akzent); padding-bottom: 2px; white-space: nowrap; }
.hero-tel a:hover { color: var(--akzent-hell); }
@media (max-width: 700px) { .hero-tel { font-size: 1rem; margin-top: 22px; } }

.nachweis-liste { list-style: none; padding: 0; margin: 26px 0 0; display: flex;
  flex-direction: column; gap: 18px; }
.nachweis-liste li { font-size: .88rem; line-height: 1.7; color: var(--muted);
  padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.nachweis-liste li:last-child { border-bottom: 0; }
.nachweis-liste strong { color: var(--ink); font-size: .95rem; }
.nachweis-liste a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.mittig-cta { margin-top: 34px; }

.gebiet-text { font-size: .84rem; line-height: 1.65; color: rgba(255,255,255,.5);
  margin: 12px 0 0; }
.gebiet:hover .gebiet-text { color: rgba(255,255,255,.62); }

/* Kacheln gleich hoch, Abschluss unten bündig */
.gebiet-grid { align-items: stretch; }
.gebiet-grid a.gebiet { display: flex; flex-direction: column; }
.gebiet-grid a.gebiet .zeile { margin-top: auto; padding-top: 16px; }

/* ── Mobile Konversionsleiste ─────────────────────────────────────────
   Auf dem Handy ist die Seite rund 30 Bildschirme lang und der erste
   Handlungsaufruf steht bei 42 Prozent. Die Leiste schliesst diese Luecke.
   Sie erscheint erst hinter dem Hero und verschwindet ueber dem Formular. */
.mobil-cta { display: none; }
@media (max-width: 860px) {
  .mobil-cta {
    display: flex; gap: 10px; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    transform: translateY(110%); transition: transform .28s cubic-bezier(.22,1,.36,1);
  }
  .mobil-cta[hidden] { display: flex; }
  .mobil-cta.ist-da { transform: none; }
  .mc-haupt {
    flex: 1; display: flex; align-items: center; justify-content: center;
    min-height: 50px; padding: 0 16px; border-radius: 999px;
    background: #c9a25c; color: #14110b; font-size: .95rem; font-weight: 600;
    text-decoration: none;
  }
  .mc-tel {
    flex: none; width: 50px; display: flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--ink);
  }
  .mc-tel svg { width: 21px; height: 21px; }
  /* Platz, damit die Leiste nichts verdeckt */
  body.hat-mobilleiste { padding-bottom: 78px; }
}
@media (prefers-reduced-motion: reduce) { .mobil-cta { transition: none; } }