/* ==========================================================================
   Unterseiten – modernes Design im Stil der Startseite
   (wird auf allen Seiten außer der Startseite geladen, baut auf style.css auf)
   ========================================================================== */
:root {
  --lila: #3c2a71;
  --nacht: #00001d;
  --lavendel: #a49dff;
  --tint: #f4f3fb;
  --linie: rgba(7, 7, 26, .1);
  --text-2: rgba(7, 7, 26, .68);
  --r-lg: 20px;
  --schatten: 0 1px 2px rgba(7, 7, 26, .04), 0 8px 28px rgba(7, 7, 26, .07);
  --schatten-hover: 0 2px 6px rgba(7, 7, 26, .06), 0 18px 44px rgba(9, 0, 67, .14);
}

body { color: var(--ink); }
.sec { padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap--schmal { width: min(860px, 100%); margin-left: auto; margin-right: auto; }
.wrap--mittel { width: min(1080px, 100%); margin-left: auto; margin-right: auto; }

/* ---------- Seitenkopf (dunkel, schräge Kante wie auf der Startseite) ---------- */
.pagehero {
  position: relative; isolation: isolate; color: #fff; overflow: hidden;
  padding-top: 178px; padding-bottom: 132px;
  background: radial-gradient(120% 140% at 30% 0%, #3c2a71 0%, #12093f 45%, var(--nacht) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 64px));
}
.pagehero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(80% 90% at 70% 10%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 90% at 70% 10%, #000 0%, transparent 75%);
}
.pagehero::after {
  content: ""; position: absolute; z-index: -1; width: 640px; height: 640px; right: -160px; top: -260px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(164, 157, 255, .35), rgba(164, 157, 255, 0));
}
.pagehero__in { position: relative; }
.pagehero h1 { margin-top: 22px; max-width: 900px; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.16; font-weight: 400; letter-spacing: -.015em; }
/* Wie auf der Startseite: Überschrift normal, Schlüsselwörter fett */
.pagehero h1 b { font-weight: 700; }
.pagehero__lead { margin-top: 22px; max-width: 720px; font-size: 20px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.pagehero__eyebrow { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pagehero .btns { margin-top: 34px; }
.pagehero--zentriert { text-align: center; }
.pagehero--zentriert .pagehero__in > * { margin-left: auto; margin-right: auto; }
.pagehero--zentriert .crumbs ol, .pagehero--zentriert .pagehero__eyebrow, .pagehero--zentriert .btns { justify-content: center; }
.pagehero--kurz { padding-bottom: 110px; }
.pagehero__fakten { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 36px; color: rgba(255, 255, 255, .8); font-size: 15px; }
.pagehero__fakten span { display: inline-flex; align-items: center; gap: 8px; }
.pagehero__fakten svg { width: 18px; height: 18px; color: var(--lavendel); }

/* Brotkrümel */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: rgba(255, 255, 255, .62); list-style: none; padding: 0; margin: 0; }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: "/"; opacity: .45; }
.crumbs a { color: rgba(255, 255, 255, .78); }
.crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: #fff; }
.crumbs--dunkel ol { color: var(--text-2); }
.crumbs--dunkel a { color: var(--ink); }
.crumbs--dunkel [aria-current] { color: var(--ink); font-weight: 600; }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 100px; font-size: 12.5px; line-height: 1.3; font-weight: 600; letter-spacing: .02em; background: var(--tint); color: var(--navy); white-space: nowrap; }
.chip--hell { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
a.chip--hell:hover { background: rgba(255, 255, 255, .18); }
.chip--recht { background: #ece9ff; color: #2c1f86; }
.chip--kosten { background: #e3f4f1; color: #0b5a52; }
.chip--digital { background: #e5ecff; color: #1d3aa8; }
.chip--energie { background: #e7f5e9; color: #1d6b34; }
.chip--verwaltung { background: #f3e8ff; color: #5b2394; }

/* Abschnitte */
.abschnitt { padding-top: 96px; padding-bottom: 96px; }
.abschnitt--grau { background: var(--grey); }
.abschnitt--tint { background: var(--tint); }
.abschnitt--eng { padding-top: 64px; padding-bottom: 64px; }
.sechead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-bottom: 40px; }
.sechead h2, .titel-2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.22; font-weight: 400; letter-spacing: -.012em; }
.sechead h2 b, .titel-2 b, .split h2 b, .hm-teaser h2 b, .ffoot__claim b, .danke h2 b { font-weight: 700; }
.sechead p { max-width: 620px; margin-top: 12px; font-size: 18px; line-height: 1.55; color: var(--text-2); }
.sechead--zentriert { flex-direction: column; align-items: center; text-align: center; }
.eyebrow { display: inline-block; margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lila); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--navy); }
.link-arrow svg { width: 18px; height: 18px; transition: transform .2s; }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Karten (Blog) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 28px; }
.card { position: relative; background: #fff; border-radius: var(--r-lg); box-shadow: var(--schatten); transition: transform .25s ease, box-shadow .25s ease; overflow: hidden; }
.card:hover { transform: translateY(-4px); box-shadow: var(--schatten-hover); }
.card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.card__cover { position: relative; aspect-ratio: 16 / 9.5; overflow: hidden; background: var(--navy); }
.card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__cover img { transform: scale(1.04); }
.card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 24px 26px; }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.card h3 { font-size: 21px; line-height: 1.28; font-weight: 650; letter-spacing: -.01em; }
.card__teaser { font-size: 15.5px; line-height: 1.55; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card__more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--navy); }
.card__more svg { width: 18px; height: 18px; transition: transform .2s; }
.card:hover .card__more svg { transform: translateX(4px); }
.card[hidden] { display: none; }

/* gestaltete Titelbilder je Kategorie */
[class*="cover--"] { display: flex; align-items: center; justify-content: center; isolation: isolate; }
[class*="cover--"]::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .6;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1.2px, transparent 1.3px); background-size: 18px 18px;
  mask-image: linear-gradient(135deg, #000, transparent 70%); -webkit-mask-image: linear-gradient(135deg, #000, transparent 70%); }
.cover__ico { width: 34%; max-width: 132px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 28%; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 20px 40px rgba(0, 0, 0, .25); backdrop-filter: blur(4px); }
.cover__ico svg { width: 52%; height: 52%; color: #fff; stroke-width: 1.4; }
.cover--recht { background: radial-gradient(120% 120% at 20% 0%, #4a37b8 0%, #1d1270 45%, #090043 100%); }
.cover--kosten { background: radial-gradient(120% 120% at 20% 0%, #1a8a7d 0%, #0d4d57 50%, #071f33 100%); }
.cover--digital { background: radial-gradient(120% 120% at 20% 0%, #3e6cf0 0%, #1c2f9e 50%, #0a0f4d 100%); }
.cover--energie { background: radial-gradient(120% 120% at 20% 0%, #33a46b 0%, #146145 50%, #06291f 100%); }
.cover--verwaltung { background: radial-gradient(120% 120% at 20% 0%, #8c4fd8 0%, #4a1f8a 50%, #1a0742 100%); }

.card--featured { grid-column: 1 / -1; }
.cards__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 36px 32px; border-radius: var(--r-lg); background: radial-gradient(120% 90% at 100% 0%, #2a1d8f 0%, #120a5c 45%, #090043 100%); color: rgba(255, 255, 255, .82); box-shadow: var(--schatten); }
.cards__cta[hidden] { display: none; }
.cards__cta .feature__ico { margin-bottom: 4px; background: rgba(255, 255, 255, .1); color: #fff; }
.cards__cta h3 { font-size: 21px; line-height: 1.28; font-weight: 650; color: #fff; }
.cards__cta p { font-size: 15.5px; line-height: 1.6; }
.cards__cta .btn { margin-top: auto; }
.card--featured .card__link { display: grid; grid-template-columns: 1.15fr 1fr; }
.card--featured .card__cover { aspect-ratio: auto; min-height: 380px; }
.card--featured .card__body { justify-content: center; padding: 48px 52px; gap: 16px; }
.card--featured h3 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.18; }
.card--featured .card__teaser { -webkit-line-clamp: 4; font-size: 17px; }

/* Filter + Suche (Blog) */
.blogtools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 36px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { padding: 9px 16px; border-radius: 100px; font-size: 14.5px; font-weight: 600; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--linie); transition: background .2s, color .2s, box-shadow .2s; }
.filter:hover { box-shadow: inset 0 0 0 1px var(--navy); }
.filter.is-active { background: var(--navy); color: #fff; box-shadow: none; }
.suche { position: relative; width: min(320px, 100%); }
.suche input { width: 100%; height: 46px; padding: 0 16px 0 44px; border-radius: 100px; border: 0; box-shadow: inset 0 0 0 1px var(--linie); font: inherit; font-size: 15px; background: #fff; color: var(--ink); }
.suche input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--navy); }
.suche svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.leer-hinweis { padding: 40px; text-align: center; color: var(--text-2); }

/* ---------- Artikel ---------- */
.pagehero--artikel { padding-bottom: 140px; }
.pagehero--artikel h1 { max-width: 980px; }
.pagehero--mitbild { padding-bottom: 230px; }
.art__byline { display: flex; align-items: center; gap: 12px; margin-top: 30px; font-size: 15px; color: rgba(255, 255, 255, .78); }
.art__byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.art__byline b { color: #fff; font-weight: 600; }
.art__bildrahmen { position: relative; z-index: 2; margin-top: -190px; }
.art__hero-img { margin: 0 auto; width: min(1080px, 100%); aspect-ratio: 16 / 7.5; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 29, .28); }
.art__hero-img img { width: 100%; height: 100%; object-fit: cover; }
.art__main { padding-top: 64px; padding-bottom: 96px; }
.art__grid { display: grid; grid-template-columns: 270px minmax(0, 760px); justify-content: center; gap: 72px; }
.art__aside { position: relative; }
.art__aside > * + * { margin-top: 20px; }
.art__aside { align-self: start; position: sticky; top: 132px; }
.toc { padding: 22px 22px 18px; border-radius: 18px; background: var(--grey); }
.toc__titel { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lila); }
.toc__titel svg { width: 18px; height: 18px; }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { position: relative; display: block; padding: 7px 0 7px 26px; font-size: 14.5px; line-height: 1.4; color: var(--text-2); border-radius: 8px; transition: color .2s; }
.toc a::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: 8px; font-size: 11.5px; font-weight: 700; color: rgba(7, 7, 26, .35); }
.toc a:hover, .toc a.is-aktiv { color: var(--navy); }
.toc a.is-aktiv { font-weight: 600; }
.toc a.is-aktiv::before { color: var(--navy); }
.aside-cta { padding: 24px; border-radius: 18px; color: #fff; background: radial-gradient(120% 120% at 0% 0%, #3c2a71, #090043 60%); }
.aside-cta__titel { font-size: 18px; font-weight: 650; line-height: 1.3; }
.aside-cta p { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .75); }
.aside-cta .btn { margin-top: 16px; width: 100%; background: #fff; color: var(--ink); }
.aside-cta .btn::after { display: none; }
.aside-cta__tel { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: 14.5px; font-weight: 600; color: #fff; }
.aside-cta__tel svg { width: 16px; height: 16px; }

/* Fließtext */
.prose { font-size: 18px; line-height: 1.75; color: #1b1b30; }
.prose > * + * { margin-top: 20px; }
.prose h2 { margin-top: 56px; font-size: clamp(25px, 2.4vw, 31px); line-height: 1.25; font-weight: 650; letter-spacing: -.015em; color: var(--ink); scroll-margin-top: 130px; }
.prose h3 { margin-top: 36px; font-size: 21px; line-height: 1.35; font-weight: 650; color: var(--ink); }
.prose h2 + *, .prose h3 + * { margin-top: 14px; }
.prose a:not(.btn) { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(9, 0, 67, .3); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.prose a:not(.btn):hover { text-decoration-color: var(--navy); }
.prose strong, .prose b { font-weight: 650; color: var(--ink); }
.prose ul, .prose ol { padding-left: 0; list-style: none; }
.prose ul li, .prose ol li { position: relative; padding-left: 30px; }
.prose li + li { margin-top: 10px; }
.prose ul li::before { content: ""; position: absolute; left: 6px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--navy); }
.prose ol { counter-reset: li; }
.prose ol li { counter-increment: li; }
.prose ol li::before { content: counter(li); position: absolute; left: 0; top: .25em; width: 22px; height: 22px; border-radius: 50%; background: var(--tint); color: var(--navy); font-size: 12.5px; font-weight: 700; line-height: 22px; text-align: center; }
.prose blockquote { padding: 6px 0 6px 24px; border-left: 3px solid var(--navy); font-size: 20px; font-style: italic; color: var(--ink); }
.prose figure img { border-radius: 16px; }
.prose figcaption { margin-top: 8px; font-size: 14px; color: var(--text-2); }
.prose .lead { font-size: 21px; line-height: 1.6; color: var(--ink); }

/* Kästen im Artikel */
.box { padding: 26px 28px; border-radius: 18px; background: var(--tint); }
.box > * + * { margin-top: 12px; }
.box__titel { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lila); }
.box__titel svg { width: 20px; height: 20px; }
.box ul li::before { background: var(--lila); }
.box--kurz { background: linear-gradient(135deg, #f1efff, #f7f6fd); box-shadow: inset 0 0 0 1px rgba(60, 42, 113, .12); }
.box--kurz ul li::before { content: ""; top: .42em; left: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
.box--tipp { background: #eef8f1; }
.box--tipp .box__titel { color: #1d6b34; }
.box--achtung { background: #fff5ea; }
.box--achtung .box__titel { color: #9a4b00; }
.box--zahl { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: center; }
.box--zahl .zahl { grid-row: span 2; font-size: 44px; font-weight: 700; letter-spacing: -.03em; color: var(--navy); line-height: 1; }

.tabelle { overflow-x: auto; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--linie); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.prose th, .prose td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.prose th { background: var(--grey); font-weight: 650; color: var(--ink); }
.prose tr:last-child td { border-bottom: 0; }

.prose .btns { margin-top: 28px; }
.inline-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 26px 28px; border-radius: 18px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #3c2a71, #090043 65%); }
.inline-cta p { margin: 0; font-size: 18px; line-height: 1.45; font-weight: 600; color: #fff; }
.inline-cta p span { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; color: rgba(255, 255, 255, .75); }
.inline-cta .btn { background: #fff; color: var(--ink); }
.prose .inline-cta a.btn { text-decoration: none; }

/* FAQ als <details> */
.faq-liste { margin-top: 16px; border-top: 1px solid var(--linie); }
details.faq { padding: 0; border-bottom: 1px solid var(--linie); }
details.faq summary { position: relative; display: block; padding: 20px 44px 20px 0; cursor: pointer; list-style: none; font-size: 18px; line-height: 1.45; font-weight: 650; color: var(--ink); }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: ""; position: absolute; right: 4px; top: 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23090043' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 13px no-repeat; transition: transform .25s; }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq > :not(summary) { margin: 0 0 20px; font-size: 17px; line-height: 1.7; color: #26263a; }
details.faq summary:hover { color: var(--navy); }

.autor { display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: start; margin-top: 56px !important; padding: 28px; border-radius: 20px; background: var(--grey); }
.autor img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.autor__name { font-size: 19px; font-weight: 650; line-height: 1.3; }
.autor__rolle { margin-top: 2px !important; font-size: 14.5px; color: var(--lila); font-weight: 600; }
.autor p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.art__hinweis { display: flex; gap: 10px; align-items: flex-start; font-size: 14px !important; line-height: 1.55; color: var(--text-2); }
.art__hinweis svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; }
.related { padding-top: 88px; padding-bottom: 100px; background: var(--grey); }

/* ---------- Inhaltsblöcke für Leistungs-/Landingpages ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.feature { padding: 30px 28px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--schatten); }
.abschnitt--grau .feature, .abschnitt--tint .feature { box-shadow: none; }
.feature__ico { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--tint); color: var(--navy); margin-bottom: 20px; }
.feature__ico svg { width: 26px; height: 26px; }
.feature h3 { font-size: 20px; line-height: 1.3; font-weight: 650; }
.feature p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.feature p a { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(9, 0, 67, .3); text-underline-offset: 3px; }
.feature ul { margin-top: 14px; }
.haken { list-style: none; padding: 0; }
.haken li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.55; }
.haken li + li { margin-top: 10px; }
.haken li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23090043' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.haken--hell li::before { background-color: rgba(255, 255, 255, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E"); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split__bild { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 4.2; box-shadow: var(--schatten); }
.split__bild img { width: 100%; height: 100%; object-fit: cover; }
.split h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.22; font-weight: 400; letter-spacing: -.012em; }
.split p { margin-top: 16px; font-size: 18px; line-height: 1.65; color: var(--text-2); }
.split .haken { margin-top: 24px; }
.split .btns { margin-top: 32px; }
.badge-float { position: absolute; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); box-shadow: var(--schatten); font-size: 14px; line-height: 1.35; }
.badge-float b { display: block; font-size: 20px; color: var(--navy); }

.zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.zahl-karte { padding: 26px 24px; border-radius: 18px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.zahl-karte b { display: block; font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: #fff; }
.zahl-karte span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .72); }
.abschnitt--dunkel { color: #fff; background: radial-gradient(120% 140% at 20% 0%, #3c2a71 0%, #12093f 50%, var(--nacht) 100%); }
.abschnitt--dunkel .sechead p, .abschnitt--dunkel .eyebrow { color: rgba(255, 255, 255, .72); }

.schritte { counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.schritt { position: relative; padding: 28px 24px 26px; border-radius: 18px; background: #fff; box-shadow: var(--schatten); }
.schritt::before { counter-increment: s; content: counter(s, decimal-leading-zero); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 18px; }
.schritt h3 { font-size: 18.5px; line-height: 1.3; font-weight: 650; }
.schritt p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }

/* Preise / Pakete */
.pakete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.paket { position: relative; display: flex; flex-direction: column; padding: 34px 30px 30px; border-radius: 24px; background: #fff; box-shadow: var(--schatten); }
.paket__name { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lila); }
.paket__titel { margin-top: 8px; font-size: 24px; line-height: 1.25; font-weight: 650; }
.paket__preis { margin-top: 18px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.paket__preis b { font-size: 46px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--navy); }
.paket__preis span { font-size: 15px; color: var(--text-2); }
.paket__info { margin-top: 6px; font-size: 14px; color: var(--text-2); }
.paket .haken { margin-top: 24px; margin-bottom: 28px; }
.paket .btn { margin-top: auto; width: 100%; }
.paket--top { color: #fff; background: radial-gradient(130% 120% at 0% 0%, #3c2a71, #090043 62%); box-shadow: 0 30px 60px rgba(9, 0, 67, .3); transform: translateY(-12px); }
.paket--top .paket__name { color: var(--lavendel); }
.paket--top .paket__preis b { color: #fff; }
.paket--top .paket__preis span, .paket--top .paket__info { color: rgba(255, 255, 255, .7); }
.paket--top .haken li::before { background-color: rgba(255, 255, 255, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E"); }
.paket--top .btn { background: #fff; color: var(--ink); }
.paket--top .btn::after { display: none; }
.paket__band { position: absolute; top: -13px; right: 26px; padding: 6px 12px; border-radius: 100px; background: var(--lavendel); color: var(--navy); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.paket-hinweis { margin-top: 28px; text-align: center; font-size: 14.5px; color: var(--text-2); }

/* Zitat / Stimme */
.stimme { padding: 40px; border-radius: 24px; background: #fff; box-shadow: var(--schatten); }
.stimme svg { width: 36px; height: 36px; color: var(--lavendel); }
.stimme blockquote { margin-top: 14px; font-size: 21px; line-height: 1.55; font-weight: 500; }
.stimme figcaption { margin-top: 18px; font-size: 15px; color: var(--text-2); }
.stimme figcaption b { color: var(--ink); }

/* ---------- Rechtstexte ---------- */
.recht { padding-top: 64px; padding-bottom: 100px; }
.recht__grid { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: 72px; justify-content: center; }
.recht .prose { font-size: 16.5px; line-height: 1.7; }
.recht .prose h2 { font-size: 24px; margin-top: 44px; }
.recht .prose h3 { font-size: 18.5px; margin-top: 28px; }
.karte-info { padding: 26px 28px; border-radius: 18px; background: var(--grey); }
.karte-info dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: 16px; }
.karte-info dt { font-weight: 650; }
.karte-info dd { margin: 0; }

/* ---------- Großer Fußbereich ---------- */
.ffoot { color: rgba(255, 255, 255, .78); background: radial-gradient(120% 120% at 10% 0%, #1c1259 0%, #090043 45%, var(--nacht) 100%); }
.ffoot a { color: rgba(255, 255, 255, .78); transition: color .2s; }
.ffoot a:hover { color: #fff; }
.ffoot { padding-left: var(--gutter); padding-right: var(--gutter); }
.ffoot__cta { padding-top: 64px; }
.ffoot__cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: 40px 48px; border-radius: 26px;
  background: linear-gradient(120deg, rgba(164, 157, 255, .18), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.ffoot__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lavendel); }
.ffoot__claim { margin-top: 8px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; font-weight: 400; letter-spacing: -.01em; color: #fff; }
.ffoot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; padding: 72px 0 56px; }
.ffoot__brand p { margin-top: 20px; max-width: 360px; font-size: 15px; line-height: 1.6; }
.ffoot__brand address { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; font-style: normal; font-size: 15px; }
.ffoot__brand address > * { display: inline-flex; align-items: flex-start; gap: 10px; }
.ffoot__brand address svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: var(--lavendel); }
.ffoot__col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.ffoot__col h2 { margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.ffoot__col a { display: inline-flex; align-items: center; gap: 6px; }
.ffoot__col a svg { width: 14px; height: 14px; opacity: .6; }
.ffoot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 22px 0 28px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; }
.ffoot__bottom nav { display: flex; gap: 22px; }

/* ---------- Responsiv ---------- */
@media (max-width: 1100px) {
  .art__grid { grid-template-columns: minmax(0, 760px); gap: 0; }
  .art__aside { position: static; order: 2; margin-top: 48px; }
  .art__aside .toc { display: none; }
  .recht__grid { grid-template-columns: minmax(0, 760px); gap: 32px; }
  .grid-4, .zahlen, .schritte { grid-template-columns: repeat(2, 1fr); }
  .ffoot__grid { grid-template-columns: 1fr 1fr; }
  .ffoot__brand { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
  .pagehero { padding-top: 56px; padding-bottom: 96px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 36px)); }
  .pagehero__lead { font-size: 18px; }
  .pagehero--mitbild { padding-bottom: 150px; }
  .art__bildrahmen { margin-top: -120px; }
  .abschnitt { padding-top: 64px; padding-bottom: 64px; }
  .grid-3, .pakete { grid-template-columns: minmax(0, 1fr); }
  .grid-2, .split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .paket--top { transform: none; }
  .card--featured .card__link { grid-template-columns: minmax(0, 1fr); }
  .card--featured .card__cover { min-height: 0; aspect-ratio: 16 / 9.5; }
  .card--featured .card__body { padding: 26px 24px 28px; }
  .ffoot__cta-in { padding: 30px 26px; }
}
@media (max-width: 639px) {
  .grid-4, .zahlen, .schritte, .ffoot__grid { grid-template-columns: minmax(0, 1fr); }
  .prose { font-size: 17px; }
  .autor { grid-template-columns: minmax(0, 1fr); }
  .art__byline { flex-wrap: wrap; }
  .blogtools { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  /* Lange Komposita wie „Sondereigentumsverwaltung“ in Überschriften trennen statt überlaufen */
  /* Überschriften nur an vorgegebenen Wortfugen trennen (build.py setzt &shy; bei sehr langen Wörtern) */
  h1, h2, h3 { overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; }
  .pagehero h1 { font-size: 30px; }
  .prose, .karte-info dd, .feature p, .haken li { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; }
  .suche { width: 100%; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); scrollbar-width: none; }
  .filter { flex: none; }
}

/* Buttons innerhalb dunkler Bereiche behalten ihre eigene Schriftfarbe */
.ffoot .btn--white, .ffoot .btn--white:hover { color: var(--ink); }
.ffoot .btn--ghost-white, .ffoot .btn--ghost-white:hover { color: #fff; }
a.feature { display: block; color: inherit; transition: transform .25s, box-shadow .25s; }
a.feature:hover { transform: translateY(-4px); box-shadow: var(--schatten-hover); }
a.feature .link-arrow { margin-top: 16px; }
/* Erste Spalte nicht zerquetschen, aber lange Texte umbrechen lassen (kein Abschneiden) */
.prose td:first-child { min-width: 9em; }
@media (max-width: 639px) { .prose td:first-child { min-width: 7em; } }

/* Seitenkopf mit Bild (Landingpages) */
.pagehero--split .pagehero__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.pagehero__bild { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 4.4; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.pagehero__bild img { width: 100%; height: 100%; object-fit: cover; }
.akzent { font-weight: 700; }
.pakete--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pakete--4 .paket { padding: 30px 24px 26px; }
.pakete--4 .paket__preis b { font-size: 42px; }
.zusatz { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 28px; padding: 26px 30px; border-radius: 20px; background: #fff; box-shadow: var(--schatten); }
.zusatz__ico { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--navy); color: #fff; flex: none; }
.zusatz__ico svg { width: 26px; height: 26px; }
.zusatz div { flex: 1 1 320px; }
.zusatz h3 { font-size: 19px; font-weight: 650; }
.zusatz p { margin-top: 4px; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.vergleich > div { padding: 24px 26px; border-radius: 18px; background: var(--grey); }
.vergleich h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 650; }
.vergleich h3 svg { width: 22px; height: 22px; color: var(--navy); }
.vergleich p { margin-top: 8px !important; font-size: 15.5px !important; }
@media (max-width: 1200px) { .pakete--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
  .pagehero--split .pagehero__in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pagehero__bild { aspect-ratio: 16 / 11; }
  .vergleich { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) { .pakete--4 { grid-template-columns: minmax(0, 1fr); } }
.abschnitt--dunkel .schritt, .abschnitt--dunkel .feature { color: var(--ink); }
.abschnitt--dunkel .sechead h2 { color: #fff; }

/* ==========================================================================
   Formular-Elemente & Rechner (wz = Werkzeug)
   ========================================================================== */
.wz { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.wz + .wz { margin-top: 28px; }
.wz__karte, .wz__tabelle { padding: 36px; border-radius: 24px; background: #fff; box-shadow: var(--schatten); }
.wz__titel { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; font-size: 21px; line-height: 1.3; font-weight: 650; }
.wz__nr { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--navy); color: #fff; font-size: 15px; font-weight: 700; }
.wz__feld { margin-bottom: 22px; }
.wz__feld > label, .wz__lbl, .feld > label, .feld__lbl { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 14.5px; font-weight: 650; color: var(--ink); }
.wz input[type="text"], .wz input[type="date"], .wz input[type="number"], .wz select,
.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"], .formular input[type="number"], .formular input[type="date"], .formular select, .formular textarea {
  width: 100%; height: 54px; padding: 0 16px; border: 1px solid rgba(7, 7, 26, .16); border-radius: 12px; background: #fff;
  font: inherit; font-size: 16px; color: var(--ink); transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.formular textarea { height: auto; min-height: 130px; padding: 14px 16px; line-height: 1.55; resize: vertical; }
.wz select, .formular select { padding-right: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23090043' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; }
.wz input:focus, .wz select:focus, .formular input:focus, .formular select:focus, .formular textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(9, 0, 67, .1); }
.wz input::placeholder, .formular input::placeholder, .formular textarea::placeholder { color: rgba(7, 7, 26, .38); }
.wz__einheit { position: relative; }
.wz__einheit input { padding-right: 46px; }
.wz__einheit::after { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-weight: 650; color: var(--text-2); pointer-events: none; }
.wz__einheit--eur::after { content: "€"; }
.wz__einheit--pct::after { content: "%"; }
.wz__hinweis { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.wz__hinweis a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.wz__zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wz__mini { padding: 3px 10px; border-radius: 100px; background: var(--tint); color: var(--navy); font-size: 12.5px; font-weight: 650; }
.wz__seg { display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: var(--grey); }
.wz__seg button { flex: 1; padding: 11px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--text-2); transition: background .2s, color .2s, box-shadow .2s; }
.wz__seg button[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(7, 7, 26, .14); }
.wz__aus { display: none; }
.wz__aus.zeigen { display: block; }
.wz__mehr { margin-top: 6px; border-top: 1px solid var(--linie); padding-top: 14px; }
.wz__mehr summary { cursor: pointer; font-size: 14.5px; font-weight: 650; color: var(--navy); list-style: none; }
.wz__mehr summary::-webkit-details-marker { display: none; }
.wz__mehr summary::before { content: "+ "; }
.wz__mehr[open] summary::before { content: "– "; }
.wz__schalter { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--linie); font-size: 15px; font-weight: 600; }
.wz__schalter span { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; color: var(--text-2); }
.wz__schalter input[type="checkbox"] { flex: none; width: 44px; height: 26px; border-radius: 100px; background: rgba(7, 7, 26, .18); position: relative; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .2s; }
.wz__schalter input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.wz__schalter input[type="checkbox"]:checked { background: var(--navy); }
.wz__schalter input[type="checkbox"]:checked::after { transform: translateX(18px); }
.wz__aus select { margin-top: 10px; }

.wz__ergebnis { position: sticky; top: 120px; padding: 32px; border-radius: 24px; color: #fff; background: radial-gradient(130% 120% at 0% 0%, #3c2a71, #090043 60%, #00001d); box-shadow: 0 30px 60px rgba(9, 0, 67, .25); }
.wz__erg-label { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lavendel); }
.wz__erg-gross { margin-top: 10px; font-size: clamp(34px, 3.4vw, 46px); line-height: 1.05; font-weight: 700; letter-spacing: -.025em; word-break: break-word; }
.wz__erg-sub { margin-top: 10px; font-size: 14.5px; color: rgba(255, 255, 255, .72); }
.wz__zeilen { margin-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); }
.wz__zeile { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 15px; color: rgba(255, 255, 255, .8); }
.wz__zeile b { color: #fff; font-weight: 650; }
.wz__zeile--plus b { color: #b9f3cf; }
.wz__aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.wz__aktionen .btn { flex: 1 1 140px; }
.wz__ergebnis .btn--white { color: var(--ink); }
.wz__ergebnis .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.wz__status { margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.wz__zurueck { margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--lavendel); text-decoration: underline; text-underline-offset: 3px; }
.wz__tabelle h2 { font-size: 22px; font-weight: 650; }
.wz__meta { margin-top: 6px; font-size: 14px; color: var(--text-2); }
.wz__scroll { margin-top: 20px; overflow-x: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--linie); }
.wz__tabelle table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.wz__tabelle th, .wz__tabelle td { padding: 11px 16px; text-align: right; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.wz__tabelle th:first-child, .wz__tabelle td:first-child { text-align: left; }
.wz__tabelle th { background: var(--grey); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.wz__tabelle tfoot td { font-weight: 700; background: var(--tint); border-bottom: 0; }
.vorl { display: inline-block; padding: 1px 6px; border-radius: 6px; background: #fff1de; color: #9a5b00; font-size: 11px; font-weight: 700; }
.wz__aufklapp { margin-top: 20px; }
.wz__aufklapp summary { cursor: pointer; font-weight: 650; color: var(--navy); }
.wz__saetze { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 14px; }
.wz__saetze div { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: var(--grey); font-size: 14px; }
.wz__toast { position: fixed; left: 50%; bottom: 28px; z-index: 600; transform: translate(-50%, 20px); padding: 12px 20px; border-radius: 100px; background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.wz__toast.zeigen { opacity: 1; transform: translate(-50%, 0); }

/* IBAN */
.iban__formatiert { margin-top: 10px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; font-weight: 650; letter-spacing: .02em; font-variant-numeric: tabular-nums; word-break: break-all; }
.iban__daten { display: grid; gap: 0; margin: 20px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.iban__daten div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 15px; }
.iban__daten dt { color: rgba(255, 255, 255, .7); }
.iban__daten dd { margin: 0; text-align: right; font-weight: 600; }
.iban__status { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--text-2); }
.iban__status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(7, 7, 26, .25); flex: none; }
.iban__status.ok { color: #1d6b34; }
.iban__status.ok::before { background: #34a853; }
.iban__status.fehler { color: #b3261e; }
.iban__status.fehler::before { background: #d93025; }
#iban-eingabe, #iban-konto, #iban-blz { font-size: 18px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }

@media (max-width: 1023px) {
  .wz { grid-template-columns: minmax(0, 1fr); }
  .wz__ergebnis { position: static; }
  .wz__karte, .wz__tabelle { padding: 26px 22px; }
}
@media (max-width: 639px) { .wz__zwei { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Mehrschritt-Formulare (Anfrage, Schaden, Bewerbung, Datenerfassung)
   ========================================================================== */
.fseite { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.fkarte { padding: 40px; border-radius: 26px; background: #fff; box-shadow: var(--schatten); }
.fseite__aside { position: sticky; top: 120px; display: grid; gap: 20px; }
.fseite__aside .feature { padding: 26px; }
.fseite__aside .feature h3 { font-size: 18px; }
.infokarte { padding: 26px; border-radius: 22px; color: #fff; background: radial-gradient(130% 120% at 0% 0%, #3c2a71, #090043 60%); }
.infokarte h3 { font-size: 18px; font-weight: 650; }
.infokarte p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .75); }
.infokarte a { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-weight: 650; color: #fff; }
.infokarte svg { width: 18px; height: 18px; color: var(--lavendel); flex: none; }
.infokarte--notfall { background: linear-gradient(135deg, #7a1d16, #3d0c0a); }
.infokarte--notfall svg { color: #ffb4a8; }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.mform__kopf { margin-bottom: 30px; }
.mform__schritte { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 14px; counter-reset: ms; }
.mform__schritte li { flex: 1; counter-increment: ms; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(7, 7, 26, .45); min-width: 0; }
.mform__schritte li::before { content: counter(ms); flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--grey); color: rgba(7, 7, 26, .5); font-size: 12.5px; font-weight: 700; transition: background .25s, color .25s; }
.mform__schritte li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mform__schritte li.is-aktiv { color: var(--ink); }
.mform__schritte li.is-aktiv::before { background: var(--navy); color: #fff; }
.mform__schritte li.is-fertig::before { content: "✓"; background: var(--tint); color: var(--navy); }
.mform__balken { height: 5px; border-radius: 10px; background: var(--grey); overflow: hidden; }
.mform__balken span { display: block; height: 100%; width: 0; border-radius: 10px; background: linear-gradient(90deg, #3c2a71, var(--navy)); transition: width .45s cubic-bezier(.25, .8, .25, 1); }
.mform fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.mform--bewegt .mform__schritt { animation: schrittEin .35s ease; }
@keyframes schrittEin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mform legend, .mform__titel { display: block; padding: 0; margin-bottom: 6px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; font-weight: 650; letter-spacing: -.015em; color: var(--ink); }
.mform__intro { margin-bottom: 26px; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.feld { margin-bottom: 18px; }
.feld__opt { font-weight: 400; color: var(--text-2); font-size: 13px; }
.feld__fehler { display: none; margin-top: 6px; font-size: 13.5px; font-weight: 600; color: #b3261e; }
.feld.is-fehler .feld__fehler { display: block; }
.feld.is-fehler input, .feld.is-fehler select, .feld.is-fehler textarea { border-color: #d93025; box-shadow: 0 0 0 4px rgba(217, 48, 37, .1); }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.feld-reihe--3 { grid-template-columns: 1.6fr .7fr 1fr; }
.feld-reihe--plz { grid-template-columns: .55fr 1fr; }

/* Auswahlkarten */
.wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 12px; margin-bottom: 8px; }
.wahl--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wahl__karte { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(7, 7, 26, .14); cursor: pointer; transition: box-shadow .2s, background .2s, transform .15s; }
.wahl__karte:hover { box-shadow: inset 0 0 0 1px var(--navy); }
.wahl__karte input { position: absolute; opacity: 0; pointer-events: none; }
.wahl__karte svg { width: 28px; height: 28px; color: var(--navy); }
.wahl__karte b { font-size: 15.5px; font-weight: 650; line-height: 1.3; }
.wahl__karte small { font-size: 13px; line-height: 1.4; color: var(--text-2); }
.wahl__karte::after { content: ""; position: absolute; right: 14px; top: 14px; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(7, 7, 26, .25); transition: background .2s, box-shadow .2s; }
.wahl__karte:has(input:checked) { background: var(--tint); box-shadow: inset 0 0 0 2px var(--navy); }
.wahl__karte:has(input:checked)::after { box-shadow: none; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.wahl__karte:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; }
.wahl--zeile .wahl__karte { flex-direction: row; align-items: center; padding: 15px 44px 15px 16px; }
.wahl--zeile .wahl__karte::after { top: 50%; margin-top: -10px; }
.wahl--zeile .wahl__karte:has(small) { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }

/* Block statt Flex: Text und Links im Label laufen als normaler Fließtext */
.haken-feld { position: relative; display: block; padding-left: 32px; margin: 6px 0 18px; font-size: 14.5px; line-height: 1.5; color: var(--ink); cursor: pointer; }
.haken-feld input { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; margin: 0; accent-color: var(--navy); }
.haken-feld a { color: var(--navy); font-weight: 600; text-decoration: underline; }

/* Datei-Upload */
.upload { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 20px; border-radius: 16px; border: 1.5px dashed rgba(7, 7, 26, .22); background: var(--grey); text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.upload:hover, .upload.is-drag { border-color: var(--navy); background: var(--tint); }
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload svg { width: 30px; height: 30px; color: var(--navy); }
.upload b { font-size: 15px; }
.upload small { font-size: 13px; color: var(--text-2); }
.upload__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 12px; }
.upload__datei { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--grey); display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; font-size: 11.5px; line-height: 1.3; color: var(--text-2); word-break: break-word; }
.upload__datei img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.upload__weg { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; background: rgba(7, 7, 26, .7); color: #fff; font-size: 15px; line-height: 24px; text-align: center; }

.mform__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--linie); }
.mform__nav .btn { min-width: 180px; }
.mform__zurueck { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.mform__zurueck svg { width: 18px; height: 18px; transform: rotate(180deg); }
.mform__zurueck:hover { color: var(--navy); }
.mform__fehler { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: #fdecea; color: #8c1d18; font-size: 14.5px; line-height: 1.5; }
.mform__fehler a { font-weight: 700; text-decoration: underline; }
.btn.is-laedt { pointer-events: none; opacity: .75; }
.btn.is-laedt span::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dreh .8s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
.mform__zusammen { padding: 18px 20px; border-radius: 14px; background: var(--grey); font-size: 14.5px; line-height: 1.6; }
.mform__zusammen dt { font-weight: 650; }
.mform__zusammen dd { margin: 0 0 8px; color: var(--text-2); }

.danke { text-align: center; padding: 20px 10px; }
.danke__ico { width: 76px; height: 76px; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tint); color: var(--navy); animation: danke .5s cubic-bezier(.3, 1.6, .5, 1); }
.danke__ico svg { width: 38px; height: 38px; stroke-width: 2.4; }
@keyframes danke { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.danke h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 400; letter-spacing: -.01em; }
.danke p { max-width: 520px; margin: 12px auto 0; font-size: 17px; line-height: 1.6; color: var(--text-2); }
.danke .btns { justify-content: center; margin-top: 28px; }
.danke__schritte { max-width: 460px; margin: 26px auto 0; text-align: left; }

@media (max-width: 1023px) {
  .fseite { grid-template-columns: minmax(0, 1fr); }
  .fseite__aside { position: static; }
  .fkarte { padding: 28px 22px; }
}
@media (max-width: 639px) {
  .feld-reihe, .feld-reihe--3, .feld-reihe--plz, .wahl--2 { grid-template-columns: minmax(0, 1fr); }
  .mform__schritte li span { display: none; }
  .mform__nav .btn { flex: 1 1 100%; }
  .mform__nav { flex-direction: column-reverse; align-items: stretch; }
}

/* Karriere */
.job { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 40px; align-items: start; padding: 28px; border-radius: 26px; background: #fff; box-shadow: var(--schatten); }
.job + .job { margin-top: 24px; }
.job__bild { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3.2; }
.job__bild img { width: 100%; height: 100%; object-fit: cover; }
.job__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.job h3 { margin-top: 14px; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; font-weight: 650; letter-spacing: -.01em; }
.job__inhalt > p:not(.job__meta) { margin-top: 12px; font-size: 16.5px; line-height: 1.65; color: var(--text-2); }
.job__mehr { margin: 18px 0 22px; padding: 16px 18px; border-radius: 14px; background: var(--grey); }
.job__mehr summary { cursor: pointer; font-weight: 650; color: var(--navy); }
.job__mehr h4 { margin-bottom: 12px; font-size: 16px; font-weight: 650; }
.job__mehr .grid-2 { gap: 20px; }
.vorteil { overflow: hidden; border-radius: 22px; background: #fff; }
.vorteil img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.vorteil h3 { margin: 22px 24px 0; font-size: 19px; font-weight: 650; }
.vorteil p { margin: 8px 24px 26px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 1023px) { .job { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 20px; } }

/* Redaktion statt Personen-Autor */
.art__byline-ico { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); --logo-haus: #e9e9f0; --logo-akzent: #a49dff; }
.art__byline-ico svg { width: 26px; height: 22px; }
.autor__logo { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; box-shadow: var(--schatten); --logo-haus: #474747; --logo-akzent: var(--navy); }
.autor__logo svg { width: 54px; height: 46px; }
.autor a { color: var(--navy); font-weight: 600; }

/* Überschriften ausgewogen umbrechen */
.pagehero h1, .sechead h2, .split h2, .card h3, .job h3 { text-wrap: balance; }
.pagehero__lead, .sechead p { text-wrap: pretty; }
@media (max-width: 639px) { .pagehero h1 br { display: none; } }
/* Formularkarte beim Weiterblättern unter dem fixierten Kopf ausrichten */
.fkarte { scroll-margin-top: 120px; }
@media (max-width: 1023px) { .fkarte { scroll-margin-top: 96px; } }
.ffoot__hm { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 340px; margin: 20px 0 6px; padding: 16px 18px 18px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .68); text-decoration: none; transition: background .2s, box-shadow .2s; }
.ffoot__hm:hover { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(228, 106, 128, .45); }
.ffoot__hm-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.ffoot__hm-text { font-size: 13.5px; line-height: 1.5; }

/* Hausmeisterservice */
.hm-karte { aspect-ratio: auto; padding: 36px; background: #fff; color: var(--ink); display: flex; flex-direction: column; gap: 22px; }
.hm-karte > .logo { margin-bottom: 4px; }
@media (max-width: 639px) { .hm-karte { padding: 26px 22px; } }
.hm-karte .haken li { font-size: 16.5px; }
.hm-vergleich h3 { font-size: 21px; margin-bottom: 18px; }
.hm-vergleich--mit { color: #fff; background: radial-gradient(130% 120% at 0% 0%, #3c2a71, #090043 60%); }
.abschnitt .hm-vergleich--mit { box-shadow: 0 24px 50px rgba(9, 0, 67, .22); }
.kreuze { list-style: none; padding: 0; }
.kreuze li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.kreuze li + li, .hm-vergleich .haken li + li { margin-top: 12px; }
.kreuze li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fdecea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 11px no-repeat; }
.hm-teaser { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 32px; align-items: center; padding: 30px 34px; border-radius: 24px; background: #fff; box-shadow: var(--schatten); }
.hm-teaser > .logo { padding-right: 8px; }
.hm-teaser h2 { font-size: clamp(22px, 2vw, 27px); line-height: 1.25; font-weight: 400; letter-spacing: -.01em; }
.hm-teaser p { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 1023px) { .hm-teaser { grid-template-columns: minmax(0, 1fr); } }

/* Symbole in Buttons */
.btn > span { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* SE-Preisbaukasten: Basis + wählbare Bausteine, ruhige Übersicht statt Verkaufskarten */
.sepreis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.sepreis--aktiv { grid-template-columns: minmax(0, 1fr) 360px; }
.sepreis__bau { display: flex; flex-direction: column; gap: 16px; }
.sebaustein { position: relative; display: block; padding: 26px 28px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); transition: box-shadow .2s, background .2s; }
.sebaustein--basis { background: var(--grey); box-shadow: none; }
.sebaustein--wahl { cursor: pointer; }
.sebaustein--wahl:hover { box-shadow: inset 0 0 0 1px rgba(9, 0, 67, .45); }
.sebaustein--wahl input { position: absolute; opacity: 0; pointer-events: none; }
.sebaustein--wahl:has(input:checked) { background: var(--tint); box-shadow: inset 0 0 0 2px var(--navy); }
.sebaustein--wahl:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 3px; }
.sebaustein__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sebaustein__art { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.sebaustein__an { display: none; }
.sebaustein--wahl:has(input:checked) .sebaustein__aus { display: none; }
.sebaustein--wahl:has(input:checked) .sebaustein__an { display: inline; color: var(--navy); font-weight: 600; }
.sebaustein h3 { margin-top: 4px; font-size: 22px; line-height: 1.25; font-weight: 650; }
.sebaustein__preis { flex: none; text-align: right; }
.sebaustein__preis b { display: block; font-size: 26px; line-height: 1.1; font-weight: 700; color: var(--navy); }
.sebaustein__preis span { font-size: 13px; color: var(--text-2); }
.sebaustein .haken { margin-top: 16px; }
.sebaustein .haken li { font-size: 15.5px; }
.sebaustein__hinweis { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.sebaustein__schalter { position: relative; flex: none; width: 38px; height: 22px; border-radius: 100px; background: rgba(7, 7, 26, .18); transition: background .2s; }
.sebaustein__schalter::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.sebaustein--wahl:has(input:checked) .sebaustein__schalter { background: var(--navy); }
.sebaustein--wahl:has(input:checked) .sebaustein__schalter::after { transform: translateX(16px); }
.sepreis__summe { position: sticky; top: 120px; padding: 30px 28px; border-radius: 24px; color: #fff; background: radial-gradient(130% 120% at 0% 0%, #2d1f74, #090043 62%); box-shadow: 0 24px 60px -24px rgba(9, 0, 67, .5); }
.sepreis__label { font-size: 14px; color: rgba(255, 255, 255, .65); }
.sepreis__paket { margin-top: 2px; font-size: 28px; line-height: 1.2; font-weight: 650; letter-spacing: -.01em; }
.sepreis__betrag { margin-top: 14px; display: flex; align-items: flex-end; gap: 12px; }
.sepreis__betrag b { font-size: 48px; line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.sepreis__betrag span { padding-bottom: 3px; font-size: 13.5px; line-height: 1.35; color: rgba(255, 255, 255, .7); }
.sepreis__brutto { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .7); }
.sepreis__bonus { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(164, 157, 255, .16); font-size: 14px; line-height: 1.45; color: #e3e0ff; }
.sepreis__anzahl { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); }
.sepreis__anzahl label { font-size: 14.5px; }
.stepper { display: inline-flex; align-items: center; border-radius: 100px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.stepper button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: #fff; font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.stepper button:hover { background: rgba(255, 255, 255, .1); }
.stepper input { width: 44px; height: 38px; border: 0; background: none; color: #fff; text-align: center; font: inherit; font-size: 16px; font-weight: 600; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sepreis__gesamt { margin-top: 12px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.sepreis__gesamt b { color: #fff; }
.sepreis__summe .btn { width: 100%; margin-top: 22px; }
.sepreis__klein { margin-top: 10px; font-size: 13px; line-height: 1.5; text-align: center; color: rgba(255, 255, 255, .65); }
.sepreis__immer { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; color: rgba(255, 255, 255, .82); }
.sepreis__immer li { display: inline-flex; align-items: center; gap: 7px; }
.sepreis__immer svg { width: 16px; height: 16px; color: var(--lavendel); }
.sepreis__tel { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.sepreis__tel svg { flex: none; width: 18px; height: 18px; color: var(--lavendel); }
.sepreis__tel b { color: #fff; font-weight: 600; }
.severgleich { margin-top: 28px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); }
.severgleich summary { position: relative; padding: 20px 60px 20px 26px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 650; color: var(--ink); }
.severgleich summary::-webkit-details-marker { display: none; }
.severgleich summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23090043' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 13px no-repeat; transition: transform .25s; }
.severgleich[open] summary::after { transform: rotate(45deg); }
.severgleich .tabelle { margin: 0 20px 20px; }
.severgleich table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.severgleich th, .severgleich td { padding: 12px 14px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--linie); }
.severgleich th:first-child, .severgleich td:first-child { text-align: left; }
.severgleich thead th { background: var(--grey); font-weight: 650; color: var(--ink); }
.severgleich tbody td:not(:first-child) { font-weight: 700; color: var(--navy); }
.severgleich tfoot td { font-weight: 650; color: var(--ink); }
.severgleich tfoot tr:last-child td { border-bottom: 0; }
.severgleich__links a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1023px) {
  .sepreis--aktiv { grid-template-columns: minmax(0, 1fr); }
  .sepreis__summe { position: static; }
}
@media (max-width: 639px) {
  .sebaustein { padding: 22px 20px; }
  .sebaustein__kopf { flex-direction: column; gap: 6px; }
  .sebaustein__preis { text-align: left; }
  .sebaustein__preis b { display: inline; font-size: 22px; }
  .sebaustein__preis span { margin-left: 6px; }
  .sepreis__summe { padding: 26px 22px; }
  .severgleich summary { padding: 18px 54px 18px 20px; }
  .severgleich .tabelle { margin: 0 12px 12px; }
  .severgleich table { font-size: 13.5px; }
  .severgleich th, .severgleich td { padding: 10px 8px; }
}

/* Anfrageformular: gewähltes SE-Paket sichtbar machen */
.mform__auswahl { margin: -4px 0 18px; padding: 12px 16px; border-radius: 14px; background: var(--tint); font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.mform__auswahl b { font-weight: 650; }
.mform__paket { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--linie); }
.mform__paket[hidden] { display: none; }
.mform__paket-info { margin: 6px 0 14px; font-size: 13.5px; color: var(--text-2); }
.mform__paket-info a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 400px) { .pagehero__eyebrow .chip, .pagehero h1 .h1-zeile { max-width: 100%; white-space: normal; line-height: 1.35; } }
.severgleich tfoot .severgleich__netto td { font-weight: 400; color: var(--text-2); }

/* Suchbegriff als kleine Zeile in der H1 (wie die Kennzeichnung darüber) */
.pagehero h1 .h1-zeile { display: block; width: fit-content; max-width: 100%; margin: 4px 0 22px; font-family: inherit; }
.pagehero--zentriert h1 .h1-zeile { margin-left: auto; margin-right: auto; }
.stimme__hinweis { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.ratgeber-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ratgeber-liste a { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); color: var(--ink); transition: box-shadow .2s, transform .2s; }
.ratgeber-liste a:hover { box-shadow: inset 0 0 0 1px var(--navy); transform: translateY(-2px); }
.ratgeber-liste small { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--lila); }
.ratgeber-liste b { font-size: 17px; line-height: 1.35; font-weight: 650; }
.ratgeber-liste span { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--navy); }
.ratgeber-liste span svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .ratgeber-liste { grid-template-columns: minmax(0, 1fr); } }

/* Ortsseiten und Einzugsgebiet */
.ort-referenz { padding: 34px 36px; }
.ort-referenz h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.25; font-weight: 400; }
.ort-referenz h2 b { font-weight: 700; }
.ort-referenz p { margin: 12px 0 16px; font-size: 17px; }
.ffoot__orte { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding-top: 0; padding-bottom: 22px; font-size: 14px; color: rgba(255, 255, 255, .6); }
.ffoot__orte a { color: rgba(255, 255, 255, .85); }
.ffoot__orte a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   ENTWURF B: Startseite im Stil der Unterseiten
   ===================================================================== */
.pagehero--start { padding-top: 170px; padding-bottom: 140px; }
.pagehero--start h1 { font-size: clamp(34px, 4.2vw, 56px); }
.pagehero--start h1 > span { display: block; }
.pagehero--start .pagehero__lead b { color: #fff; font-weight: 600; }
.startvideo { aspect-ratio: 4 / 4.2; background: #07071a; }
.startvideo .hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.startvideo .hero__video { position: absolute; z-index: 1; left: 50%; top: 50%; width: auto; height: 100%; aspect-ratio: 16 / 9; transform: translate(-50%, -50%); }
.startvideo .badge-float { z-index: 2; }
.split .logo--lg { margin-bottom: 4px; }
.start-sig { display: block; margin-top: 26px; width: 250px; height: 42px; }
.start-namen { margin-top: 6px !important; font-size: 14px !important; color: var(--text-2); }
.referenz .card__body { gap: 8px; }
.referenz .chip { display: inline-flex; align-items: center; gap: 4px; }
.referenz .chip svg { width: 13px; height: 13px; }
.referenz .card__teaser { -webkit-line-clamp: 5; }
.referenz .haken { margin-top: 8px; }
.referenz .haken li { font-size: 15px; }
.start-google { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 14px; }
.start-google img { width: 93px; height: 31px; object-fit: contain; }
.reviews.abschnitt { padding-left: var(--gutter); padding-right: var(--gutter); }
.zahlenband .card h3 { font-size: 19px; }
.start-orte { margin-top: 30px; text-align: center; font-size: 16px; color: rgba(255, 255, 255, .78); }
.start-orte a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.team.abschnitt .tcard { box-shadow: var(--schatten); min-height: 0; }
.team.abschnitt .slider__arrow { color: var(--ink); }
.team.abschnitt .slider__dots { color: var(--ink); }
.team.abschnitt h2 { padding-bottom: 0; }
.start-zeiten { margin-top: 20px; gap: 16px; font-size: 16px; line-height: 1.6; }
.start-klein { margin-top: 14px !important; font-size: 14.5px !important; color: var(--text-2); }
.start-karte { aspect-ratio: 4 / 3.6; }
.start-karte .map { position: absolute; inset: 0; height: 100%; }
.start-acc { padding: 8px 28px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--schatten); }
.start-acc .acc__item + .acc__item { border-top: 1px solid var(--linie); }
.start-acc .acc__q { font-size: 17px; font-weight: 650; }
.start-acc .acc__a p { font-size: 16px; line-height: 1.65; color: var(--text-2); }
.partners.abschnitt { overflow: hidden; }
.partners.abschnitt .sechead { margin-bottom: 10px; }
@media (max-width: 1023px) { .pagehero--start { padding-top: 130px; } }
.abschnitt--dunkel .card { color: var(--ink); }

/* ---------- Entwurf B (überarbeitet): Ablauf wie bisher, Optik der Unterseiten ---------- */
/* Kopf-Video (eigene Datei): Startbild ist das erste Videobild, das Video blendet ein, sobald es läuft */
.hero__bg { background: var(--navy); }
/* Problemkarten mit dezentem Rot */
.problem .feature__ico { background: #fdeeee; color: #b4232a; }
.problem h3 { font-size: 19px; }
.start-kicker { font-size: 17px; font-weight: 600; color: var(--text-2); }
.start-kicker + h2 { margin-top: 8px; }
.start-zitate { margin-top: 22px; }
.start-zitate li { font-size: 16.5px; font-style: italic; }
.start-wahrheit { margin-top: 24px !important; font-size: 21px !important; line-height: 1.4 !important; color: var(--ink) !important; }
.start-wahrheit b { font-weight: 700; }
.start-hell { color: #fff; margin-top: 0; }
.start-hell-text { color: rgba(255, 255, 255, .75) !important; }
.abschnitt--dunkel .split .haken { margin-top: 22px; }
.abschnitt--dunkel .start-sig { margin-top: 28px; }
/* Hausmeister-Karte hell */
.hm-karte--start { border-radius: 26px; box-shadow: var(--schatten); }
.haken--rot li::before { background: #93172e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M6.4 12.3l3.7 3.7 7.6-7.7'/%3E%3C/svg%3E") center / 12px no-repeat; }
/* Team-Mosaik statt Einzelfoto bei „Verstärkung“ */
.team-mosaik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.team-mosaik img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; border-radius: 16px; display: block; }
.team-mosaik__du { position: relative; }
.team-mosaik__du span { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 8px 10px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 14px; text-align: center; }
.team-mosaik__du span b { color: var(--lavendel); }
.zahlenband .card { box-shadow: var(--schatten); }
.zahlenband .start-orte { color: var(--text-2); }
.zahlenband .start-orte a { color: var(--navy); }
.team.abschnitt--dunkel h2 { color: #fff; }
.team.abschnitt--dunkel .slider__arrow, .team.abschnitt--dunkel .slider__dots { color: #fff; }
.team.abschnitt--dunkel .tcard { box-shadow: none; }
.team-mosaik picture { display: block; } .team-mosaik source { display: none; }
/* Karriere auf der Startseite: Platzhalter-Figur statt Einzelfotos, Hinweis auf Hausmeister-Jobs */
.hmjob { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); color: var(--ink); font-size: 15px; line-height: 1.5; transition: box-shadow .2s; }
.hmjob:hover { box-shadow: inset 0 0 0 1px #93172e; }
.hmjob b { font-weight: 650; }
.hmjob__ico { flex: none; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #f8e9ec; color: #93172e; }
.hmjob__ico svg { width: 22px; height: 22px; }
.hmjob__pfeil svg { width: 18px; height: 18px; color: #93172e; }
.zusatz--hm .zusatz__ico { background: #f8e9ec; color: #93172e; }
.hero__film { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.hero__film.is-laeuft { opacity: 1; }
.karriere-punkte .feature { text-align: left; }
.karriere-punkte .feature h3 { font-size: 18px; }
.karriere-punkte .feature p { font-size: 15px; }
.btns--mitte { justify-content: center; margin-top: 36px; }
.hmjob--mitte { max-width: 620px; margin: 28px auto 0; }

/* ---------- Startseite: Hausmeister-Bereich (Text, Karte, Buttons – mobil in genau dieser Reihenfolge) ---------- */
.start-hm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "text karte" "btns karte"; column-gap: 64px; align-items: center; }
.start-hm__text { grid-area: text; align-self: end; }
.start-hm .hm-karte--start { grid-area: karte; }
.start-hm__btns { grid-area: btns; align-self: start; margin-top: 32px; }
.start-hm h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.22; font-weight: 400; letter-spacing: -.012em; text-wrap: balance; }
.start-hm h2 b { font-weight: 700; }
.start-hm__text p { margin-top: 16px; font-size: 18px; line-height: 1.65; color: var(--text-2); }
.start-hm .haken { margin-top: 24px; }
/* Hausmeister-Job: rotes Haus-Symbol statt Werkzeug */
.hmjob__ico, .zusatz--hm .zusatz__ico { --logo-haus: #474747; --logo-akzent: #93172e; }
.hmjob__ico .logo__icon { width: 26px; height: 22px; }
.zusatz--hm .zusatz__ico .logo__icon { width: 30px; height: 25px; }
@media (max-width: 1023px) {
  .start-hm { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "karte" "btns"; row-gap: 28px; }
  .start-hm__btns { margin-top: 0; }
}
/* ---------- Startseite mobil aufgeräumt ---------- */
.wisch-punkte { display: none; }
@media (max-width: 767px) {
  .hero h1 { font-size: clamp(23px, 7.3vw, 28px); line-height: 1.25; }
  .hero h1 span + span { white-space: nowrap; }
  .hero__lead { font-size: 16px; line-height: 1.55; text-wrap: balance; }
  .hero__lead br { display: none; }
  .probleme, .karriere-punkte { gap: 10px; }
  .feature.problem, .karriere-punkte .feature { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 16px; text-align: left; }
  .feature.problem .feature__ico, .karriere-punkte .feature__ico { grid-row: span 2; width: 40px; height: 40px; margin: 0; border-radius: 12px; }
  .feature.problem .feature__ico svg, .karriere-punkte .feature__ico svg { width: 20px; height: 20px; }
  .feature.problem h3, .karriere-punkte .feature h3 { align-self: center; font-size: 16.5px; line-height: 1.3; }
  .feature.problem p, .karriere-punkte .feature p { margin-top: 4px; font-size: 14.5px; line-height: 1.5; }
  .start-ueber .split__bild { order: 2; aspect-ratio: 4 / 3; }
  .start-hm__btns .btn, #karriere .btns .btn { flex: 1 1 100%; }
  .start-hm h2 { font-size: 28px; }
  .start-hm__text p { font-size: 16.5px; }
  .wisch { position: relative; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .wisch::-webkit-scrollbar { display: none; }
  .wisch > * { flex: 0 0 84%; scroll-snap-align: start; }
  .wisch-punkte { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .wisch-punkte button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 8px; background: rgba(7, 7, 26, .2); cursor: pointer; transition: width .2s, background .2s; }
  .wisch-punkte button.is-aktiv { width: 22px; background: var(--navy); }
  .abschnitt--dunkel .wisch-punkte button { background: rgba(255, 255, 255, .3); }
  .abschnitt--dunkel .wisch-punkte button.is-aktiv { background: #fff; }
}