/* Celik Dienstleistungen – ruhig und klar.
   Heller Grund, normale Schreibweise statt Versalien, dünne Linien, Gold nur als Akzent.
   Schwarz nur im Kopfbereich der Startseite (wie der Flyer) und im Fuß. Große, gut lesbare Schrift. */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(fonts/barlow-400.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(fonts/barlow-600.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 300 700; font-display: swap; src: url(fonts/jost.woff2) format("woff2"); }

:root {
  --bg: #f7f5ef;
  --bg-2: #eeebe2;
  --card: #ffffff;
  --text: #1d1c1a;
  --text-2: #4a4741;
  --muted: #77736b;
  --line: #dfdbcf;
  --black: #1e211a;
  --olive: #2b2f24;
  --olive-2: #3a3f31;
  --gold: #c9a24f;
  --gold-text: #8a6522;
  --ok: #2f6b2a;
  --err: #a33a1f;
  --sans: "Barlow", "Segoe UI", Arial, sans-serif;
  --mark: "Jost", "Century Gothic", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 1.2rem; line-height: 1.65; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--card); }
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* Kopfzeile */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--card); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 24px; padding-block: 12px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.logo img { height: 42px; width: auto; }
.logo b { font-family: var(--mark); font-weight: 600; color: var(--gold-text); letter-spacing: .24em; font-size: 1.25rem; }
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.main-nav a { display: block; white-space: nowrap; text-decoration: none; font-size: 1.08rem; color: var(--text-2); padding: 6px 0; border-bottom: 2px solid transparent; }
.main-nav a:hover { color: var(--text); }
.main-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--gold); }
.head-call { display: grid; white-space: nowrap; text-decoration: none; line-height: 1.15; text-align: right; }
.head-call small { font-size: .85rem; color: var(--muted); }
.head-call b { font-weight: 600; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.head-call:hover b { color: var(--gold-text); }
.menu-btn { display: none; background: transparent; border: 1px solid var(--line); color: var(--text); font: 600 1rem var(--sans); padding: 9px 16px; cursor: pointer; border-radius: 4px; }
.mobile-nav { background: var(--card); border-top: 1px solid var(--line); }
.mobile-nav ul { list-style: none; margin: 0; padding: 4px 0 12px; }
.mobile-nav a { display: block; text-decoration: none; font-size: 1.25rem; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mobile-nav a[aria-current="page"] { color: var(--gold-text); }
@media (max-width: 1120px) { .main-nav { display: none; } .menu-btn { display: inline-block; } .head-call { margin-left: auto; } }
@media (max-width: 560px) { .head-call { display: none; } .menu-btn { margin-left: auto; } .logo img { height: 34px; } }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 54px; font-family: var(--sans); font-weight: 600; font-size: 1.12rem; text-decoration: none; padding: 10px 24px; border: 1px solid var(--text); border-radius: 4px; background: transparent; color: var(--text); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--black); }
.btn.gold:hover { background: #d6b264; border-color: #d6b264; }
.btn.black { background: var(--black); border-color: var(--black); color: #fff; }
.btn.black:hover { background: #33302c; }
.btn.line { border-color: rgba(255,255,255,.55); color: #fff; }
.btn.line:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn:not(.gold):not(.black):not(.line):hover { background: var(--bg-2); }
.btn[disabled] { opacity: .6; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Abschnitte */
.sec { padding-block: clamp(56px, 8vw, 96px); }
.sec.stone { background: var(--bg-2); }
h2.title { margin: 0 0 12px; font-family: var(--mark); font-weight: 500; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; }
.sec .lead { font-size: 1.2rem; max-width: 56ch; color: var(--text-2); margin-bottom: clamp(28px, 4vw, 44px); }
h3 { margin: 0; font-family: var(--mark); font-weight: 500; font-size: 1.4rem; line-height: 1.25; }

/* Aufzählung */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 30px; color: var(--text-2); }
.checks li::before { content: ""; position: absolute; left: 4px; top: .42em; width: 7px; height: 13px; border: solid var(--gold-text); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checks b { font-weight: 600; color: var(--text); }

/* Ablauf */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 20px; counter-reset: s; }
.steps li { counter-increment: s; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; display: grid; gap: 8px; align-content: start; }
.steps li::before { content: counter(s); font-weight: 600; font-size: 1.05rem; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-text); }
.steps p { color: var(--text-2); font-size: 1.1rem; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

/* Text + Foto */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.split .text { display: grid; gap: 16px; }
.split .text p { color: var(--text-2); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* Ansprechpartner */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.person { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 20px 22px; display: grid; gap: 2px; }
.person .role { font-size: .95rem; color: var(--muted); }
.person .name { font-weight: 600; font-size: 1.25rem; }
.person .tel { font-size: 1.45rem; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; width: fit-content; color: var(--text); margin-top: 2px; }
.person .tel:hover { color: var(--gold-text); }
.person .links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 1.02rem; color: var(--text-2); }
.person .links a { overflow-wrap: anywhere; text-underline-offset: 3px; }
@media (max-width: 700px) { .people { grid-template-columns: 1fr; } }

/* Einsatzgebiet */
.places { list-style: none; margin: 4px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; color: var(--text); font-weight: 600; }
.places li:not(:last-child)::after { content: "·"; color: var(--gold); margin: 0 .55em; font-weight: 400; }

/* Fragen */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font-weight: 600; font-size: 1.2rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 1.6rem; font-weight: 400; color: var(--gold-text); line-height: 1.2; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 22px; max-width: 80ch; color: var(--text-2); }

/* Kontakt + Formular */
.contact { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
.contact .people { grid-template-columns: 1fr; }
@media (max-width: 920px) { .contact { grid-template-columns: 1fr; } }
form.req { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: clamp(22px, 3vw, 32px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
form.req h3 { grid-column: 1 / -1; }
form.req .full { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > span, fieldset legend { font-weight: 600; font-size: 1.05rem; }
input, select, textarea { font: inherit; font-size: 1.12rem; color: var(--text); background: #fff; border: 1px solid #bfb9ad; border-radius: 4px; padding: 12px; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold-text); box-shadow: 0 0 0 3px rgba(201,162,79,.25); }
textarea { min-height: 120px; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset legend { padding: 0; margin-bottom: 10px; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opt { display: flex; align-items: center; gap: 10px; border: 1px solid #cfc9bd; border-radius: 4px; padding: 11px 14px; cursor: pointer; font-size: 1.08rem; background: #fff; }
.opt:has(input:checked) { border-color: var(--gold-text); background: #faf3e3; }
.opt input { width: 20px; height: 20px; accent-color: var(--gold-text); margin: 0; flex: none; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 1rem; color: var(--text-2); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--gold-text); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { grid-column: 1 / -1; padding: 12px 16px; border: 1px solid var(--line); border-radius: 4px; font-weight: 600; }
.form-status.ok { border-color: var(--ok); color: var(--ok); }
.form-status.err { border-color: var(--err); color: var(--err); }
.req-note { font-size: .98rem; color: var(--muted); }
@media (max-width: 560px) { form.req, .opts { grid-template-columns: 1fr; } }

/* Rechtstexte */
.legal { max-width: 780px; display: grid; gap: 14px; }
.legal h1 { margin: 0; font-family: var(--mark); font-weight: 500; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1.1; }
.legal h2 { margin: 24px 0 0; font-weight: 600; font-size: 1.4rem; }
.legal p, .legal li { color: var(--text-2); }
.legal ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.legal .crumbs span { margin: 0 .4em; }
.todo { background: #f4e3b8; color: var(--black); padding: 0 .3em; font-weight: 600; }

/* Fuß */
.site-foot { background: var(--black); color: #cfcac0; }
.site-foot .wrap.cols { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: clamp(44px, 6vw, 60px); }
.foot-brand img { width: 200px; height: auto; }
.foot-brand .wm { margin-top: 14px; font-family: var(--mark); line-height: 1; }
.foot-brand .wm b { display: block; font-weight: 600; color: var(--gold); letter-spacing: .24em; font-size: 1.8rem; }
.foot-brand .wm span { display: block; margin-top: 8px; letter-spacing: .34em; font-size: .75rem; text-transform: uppercase; color: #fff; }
.site-foot h4 { margin: 0 0 12px; font-weight: 600; font-size: 1.1rem; color: #fff; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 1.05rem; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.site-foot .tel { font-weight: 600; font-size: 1.15rem; color: var(--gold); }
.foot-legal { border-top: 1px solid #2e2c29; }
.foot-legal .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 18px; font-size: .98rem; }
@media (max-width: 900px) { .site-foot .wrap.cols { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .site-foot .wrap.cols { grid-template-columns: 1fr; } }

/* Handy: Anrufleiste */
.mobile-call { display: none; }
@media (max-width: 640px) {
  .mobile-call { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--card); border-top: 1px solid var(--line); padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); }
  .mobile-call .btn { min-height: 50px; padding: 8px; }
  .mobile-call .btn.line { border-color: var(--text); color: var(--text); }
  .site-foot { padding-bottom: 70px; }
}

/* ================= Version 4: Hof-Editorial ================= */
.grain { position: relative; isolation: isolate; }

/* Start: Foto randlos, Logo groß, Infokarte */
.hero { position: relative; isolation: isolate; color: #fff; background: var(--black); overflow: hidden; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(30,33,26,.94) 0%, rgba(30,33,26,.84) 42%, rgba(30,33,26,.35) 75%, rgba(30,33,26,.2) 100%); }
.hero-in { padding-block: clamp(48px, 7vw, 88px) clamp(28px, 4vw, 40px); display: grid; justify-items: start; }
.hero-brand { display: grid; justify-items: center; }
.hero-brand img { width: min(420px, 82vw); height: auto; }
.hero-brand .wm { margin-top: 16px; font-family: var(--mark); font-weight: 600; color: var(--gold); font-size: clamp(3rem, 8vw, 5.2rem); letter-spacing: .22em; margin-right: -.22em; line-height: 1; }
.hero-brand .wm-sub { margin-top: .7em; font-family: var(--mark); font-weight: 300; text-transform: uppercase; letter-spacing: .42em; margin-right: -.42em; font-size: clamp(.8rem, 1.9vw, 1.15rem); }
.hero h1 { margin: clamp(30px, 4vw, 44px) 0 0; font-family: var(--mark); font-weight: 400; font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -.01em; }
.hero h1 span { color: var(--gold); }
.hero .intro { margin-top: 14px; max-width: 38ch; font-size: 1.25rem; color: #e4e1d8; }
.hero .actions { margin-top: 28px; }
.hero-note-wrap { padding-bottom: clamp(28px, 4vw, 44px); }
.hero-note { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.28); }
.hero-note div { padding: 16px 18px 0 0; display: grid; gap: 2px; align-content: start; }
.hero-note dt { font-family: var(--mark); text-transform: uppercase; letter-spacing: .22em; font-size: .78rem; color: var(--gold); }
.hero-note dd { margin: 0; font-size: 1.08rem; color: #f1efe8; }
.hero-note a { text-decoration: none; font-weight: 600; }
@media (max-width: 860px) {
  .hero::after { background: linear-gradient(180deg, rgba(30,33,26,.82) 0%, rgba(30,33,26,.92) 60%, rgba(30,33,26,.96) 100%); }
  .hero-note { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .hero-brand { justify-self: center; }
}

/* Aussage */
.statement { background: var(--olive); color: #f3f1ea; }
.statement .wrap { padding-block: clamp(56px, 8vw, 96px); display: grid; gap: 22px; }
.statement .big { max-width: 30ch; font-family: var(--mark); font-weight: 400; font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.28; text-wrap: balance; }
.statement .sig { font-family: var(--mark); text-transform: uppercase; letter-spacing: .26em; font-size: .9rem; color: var(--gold); }
.statement .sig::before { content: ""; display: inline-block; width: 36px; height: 1px; background: var(--gold); vertical-align: middle; margin-right: 14px; }

/* Leistungen als Foto-Kacheln */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tile { position: relative; display: block; overflow: hidden; border-radius: 6px; text-decoration: none; color: #fff; aspect-ratio: 4 / 3; background: var(--black); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,33,26,0) 35%, rgba(30,33,26,.88) 100%); }
.tile-txt { position: absolute; left: 24px; right: 72px; bottom: 22px; z-index: 1; display: grid; gap: 4px; }
.tile-txt h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); color: #fff; }
.tile-txt span { font-size: 1.1rem; color: #e8e5dc; }
.tile-arrow { position: absolute; right: 22px; bottom: 24px; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--black); font-size: 1.3rem; transition: transform .2s; }
.tile:hover img { transform: scale(1.04); }
.tile:hover .tile-arrow { transform: translateX(3px); }
@media (max-width: 760px) { .tiles { grid-template-columns: 1fr; } .tile { aspect-ratio: 4 / 3.2; } }

/* Über uns */
.about { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.about .text { display: grid; gap: 16px; }
.about .text p { color: var(--text-2); }
.about .say { font-family: var(--mark); font-size: clamp(1.35rem, 2.4vw, 1.7rem); line-height: 1.3; color: var(--text) !important; }
.about .people { margin-top: 8px; }
.years { background: var(--olive); color: #f3f1ea; border-radius: 6px; padding: 32px 30px; display: grid; gap: 6px; position: sticky; top: 110px; }
.years b { font-family: var(--mark); font-weight: 300; font-size: clamp(6rem, 12vw, 8.5rem); line-height: .85; color: var(--gold); letter-spacing: -.03em; }
.years span { font-family: var(--mark); font-weight: 500; font-size: 1.5rem; }
.years p { color: #d6d3c8; font-size: 1.05rem; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } .years { position: static; } }

/* Karte */
.region { align-items: center; }
.map-wrap { margin: 0; display: grid; gap: 10px; }
.map { width: 100%; height: auto; border-radius: 6px; display: block; }
.map .bg { fill: var(--olive); }
.map .ring { fill: none; stroke: rgba(201,162,79,.55); stroke-width: .35; stroke-dasharray: 1.2 1.2; }
.map .km { fill: rgba(201,162,79,.85); font: 3.6px var(--sans); }
.map .pt { fill: #d8d4c8; }
.map .pt.core { fill: #f3f1ea; }
.map .pt.home { fill: var(--gold); }
.map .lbl { fill: #cfcabe; font: 4.3px var(--sans); }
.map .lbl.core { fill: #fff; font-weight: 600; font-size: 4.8px; }
.map .lbl.home { fill: var(--gold); font: 600 5.6px var(--mark); }
.map-wrap figcaption { font-size: .98rem; color: var(--muted); }

/* Unterseiten-Kopf: Foto randlos */
.page-top { position: relative; isolation: isolate; color: #fff; background: var(--black); overflow: hidden; }
.page-top > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-top::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(30,33,26,.93) 0%, rgba(30,33,26,.8) 50%, rgba(30,33,26,.3) 100%); }
.page-top .wrap { padding-block: clamp(56px, 9vw, 112px); display: grid; justify-items: start; }
.crumbs { font-size: 1rem; color: #cfcabe; margin-bottom: 12px; }
.crumbs a { color: #f1efe8; }
.page-top h1 { margin: 0; font-family: var(--mark); font-weight: 500; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.05; max-width: 16ch; overflow-wrap: break-word; }
.page-top .intro { margin-top: 16px; font-size: 1.25rem; color: #e4e1d8; max-width: 44ch; }
.page-top .actions { margin-top: 28px; }
@media (max-width: 860px) { .page-top::after { background: rgba(30,33,26,.85); } }

/* Fuß in Oliv-Schwarz */
.site-foot { background: var(--black); }

/* Bild und Text auf einer Linie: gleiche Ober- und Unterkante */
.split { align-items: stretch; }
.split > img { height: 100%; min-height: 320px; aspect-ratio: auto; }
.split .text > :first-child { margin-top: 0; }
.split .text .lead { margin-bottom: 22px; }
@media (max-width: 860px) { .split > img { height: auto; aspect-ratio: 4 / 3; min-height: 0; } }
.region .map-wrap { align-self: stretch; display: flex; flex-direction: column; }
.region .map { flex: 1; object-fit: cover; }

/* Ratgeber-Text (SEO) */
.guide { border-top: 1px solid var(--line); }
.g-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px clamp(24px, 5vw, 64px); padding-block: 28px; border-bottom: 1px solid var(--line); }
.g-row h3 { font-size: clamp(1.3rem, 2.2vw, 1.55rem); line-height: 1.3; }
.g-text { display: grid; gap: 12px; color: var(--text-2); max-width: 68ch; }
.related { margin-top: 26px; color: var(--text-2); }
.related a { color: var(--gold-text); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 820px) { .g-row { grid-template-columns: 1fr; } }
.split .text { align-content: start; }
.split .text .lead { margin-bottom: 8px; }
@media (min-width: 861px) { .split > img { height: 0; min-height: 100%; } }

/* 15 Jahre als Abzeichen */
.badge-wrap { display: grid; justify-items: center; align-self: start; padding-top: 8px; }
.badge { width: min(260px, 70vw); height: auto; transform: rotate(-6deg); }
.badge .b-out { fill: var(--olive); }
.badge .b-line { fill: none; stroke: var(--gold); stroke-width: 1.2; }
.badge .b-dot { fill: var(--gold); }
.badge .b-arc { fill: #f3f1ea; font: 500 13px var(--mark); letter-spacing: .28em; text-transform: uppercase; }
.badge .b-num { fill: var(--gold); font: 300 64px var(--mark); letter-spacing: -.02em; }
.badge .b-sub { fill: #f3f1ea; font: 500 11px var(--mark); letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 860px) { .badge-wrap { justify-items: start; } .badge { width: 200px; } }

/* Kontakt: Ansprechpartner bleiben beim Scrollen sichtbar */
@media (min-width: 921px) { .contact .people { position: sticky; top: 100px; align-self: start; } }
.hero-in { padding-bottom: clamp(48px, 7vw, 88px); }

/* ================= Unterseiten Version 5 ================= */
.sec.dark { background: var(--olive); color: #f3f1ea; }
.sec.dark .lead { color: #d6d3c8; }

/* Großer Seitenkopf */
.ph { position: relative; isolation: isolate; color: #fff; background: var(--black); overflow: hidden; min-height: min(78vh, 760px); display: grid; align-items: end; }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ph::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(30,33,26,.25) 0%, rgba(30,33,26,.55) 45%, rgba(30,33,26,.94) 100%); }
.ph-in { width: 100%; padding-block: clamp(120px, 18vh, 200px) clamp(56px, 8vw, 96px); display: grid; justify-items: start; }
.ph h1 { margin: 0; font-family: var(--mark); font-weight: 500; font-size: clamp(3rem, 9vw, 6.6rem); line-height: .98; letter-spacing: -.025em; overflow-wrap: break-word; }
.ph .intro { margin-top: 20px; font-size: clamp(1.2rem, 2vw, 1.45rem); color: #e8e5dc; max-width: 44ch; }
.ph .actions { margin-top: 30px; }
.ph .crumbs { margin-bottom: 18px; }
.ph-down { position: absolute; right: max(20px, env(safe-area-inset-right, 0px)); bottom: clamp(56px, 8vw, 96px); width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); display: grid; place-items: center; color: #fff; text-decoration: none; font-size: 1.4rem; }
.ph-down:hover { background: rgba(255,255,255,.1); }
@media (max-width: 760px) { .ph-down { display: none; } .ph { min-height: 0; } .ph-in { padding-top: 140px; } }

/* Überblick: große Aussage + Text, darunter Breitbild */
.ov-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.ov-lead { font-family: var(--mark); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.22; letter-spacing: -.01em; text-wrap: balance; }
.ov-body { display: grid; gap: 14px; color: var(--text-2); padding-top: 8px; }
.ov-wide { margin: clamp(40px, 6vw, 72px) 0 0; }
.ov-wide img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 6px; }
@media (max-width: 860px) { .ov-top { grid-template-columns: 1fr; } .ov-wide img { aspect-ratio: 4 / 3; } }

/* Leistungsumfang */
.scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 48px); }
.sc { padding: 26px 0 30px; border-top: 2px solid var(--text); display: grid; gap: 8px; align-content: start; }
.sc h3 { font-size: 1.45rem; }
.sc p { color: var(--text-2); }
@media (max-width: 960px) { .scope { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .scope { grid-template-columns: 1fr; } }

/* Ablauf als Zeitleiste */
.tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 1px; background: var(--gold); }
.tl li { position: relative; padding-right: 24px; display: grid; gap: 10px; align-content: start; }
.tl-n { position: relative; z-index: 1; width: 68px; height: 68px; border-radius: 50%; background: var(--bg); border: 1px solid var(--gold); display: grid; place-items: center; font-family: var(--mark); font-size: 1.5rem; color: var(--gold-text); margin-bottom: 8px; }
.tl h3 { font-size: 1.45rem; }
.tl p { color: var(--text-2); }
@media (max-width: 900px) {
  .tl { grid-template-columns: 1fr; gap: 26px; }
  .tl::before { left: 34px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .tl li { grid-template-columns: 68px 1fr; column-gap: 20px; padding-right: 0; }
  .tl-n { grid-row: span 2; margin: 0; }
}

/* Checkliste */
.cl { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.cl-count { font-family: var(--mark); color: var(--gold); font-size: 1.15rem; }
.cl-count b { font-weight: 500; font-size: 2.4rem; vertical-align: -.1em; }
.cl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.18); }
.cl-list li { border-bottom: 1px solid rgba(255,255,255,.18); }
.cl-list label { display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start; padding: 18px 0; cursor: pointer; font-size: 1.18rem; }
.cl-list input { appearance: none; -webkit-appearance: none; width: 28px; height: 28px; margin: 0; border: 1.5px solid var(--gold); border-radius: 4px; background: transparent; display: grid; place-items: center; cursor: pointer; }
.cl-list input::after { content: ""; width: 8px; height: 14px; border: solid var(--black); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
.cl-list input:checked { background: var(--gold); }
.cl-list input:checked::after { opacity: 1; }
.cl-list input:checked + span { color: #a9a596; text-decoration: line-through; text-decoration-color: rgba(201,162,79,.7); }
@media (max-width: 860px) { .cl { grid-template-columns: 1fr; } }

/* Ratgeber mit Inhaltsverzeichnis */
.guide2 { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.toc { position: sticky; top: 100px; }
.toc ol { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: t; border-top: 1px solid var(--line); }
.toc li { counter-increment: t; border-bottom: 1px solid var(--line); }
.toc a { display: grid; grid-template-columns: 32px 1fr; gap: 8px; padding: 12px 0; text-decoration: none; color: var(--text-2); font-size: 1.05rem; }
.toc a::before { content: counter(t, decimal-leading-zero); color: var(--gold-text); font-family: var(--mark); }
.toc a:hover { color: var(--text); }
.g2-list { display: grid; gap: clamp(36px, 5vw, 56px); }
.g2 { display: grid; gap: 12px; scroll-margin-top: 100px; }
.g2 h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.2; }
.g2 p { color: var(--text-2); max-width: 66ch; }
@media (max-width: 900px) { .guide2 { grid-template-columns: 1fr; } .toc { position: static; } }

/* Bildpause */
.photo-break { position: relative; isolation: isolate; overflow: hidden; color: #fff; min-height: clamp(320px, 52vw, 560px); display: grid; align-items: end; background: var(--black); }
.photo-break > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.photo-break::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(30,33,26,0) 30%, rgba(30,33,26,.85) 100%); }
.photo-break .wrap { width: 100%; padding-block: 40px; }
.photo-break p { font-family: var(--mark); font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height: 1.15; max-width: 22ch; }

/* Weitere Leistungen */
.tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .tiles.three { grid-template-columns: 1fr; } }