/* KB-Entrümpelungen · cassiopeia_kb
   Hell, Branchen-Standard, präzise. Tokens → Rahmen → Inhalte → Startseite → Bewegung. */

/* ---------- Schriften (lokal, OFL) ---------- */
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --kb-paper: #f7f8f3;
  --kb-white: #ffffff;
  --kb-ink: #141612;
  --kb-ink-2: #4a4f42;
  --kb-ink-3: #6d7263;
  --kb-green: #aac737;
  --kb-green-hi: #bcd651;
  --kb-green-ink: #4f6118;
  --kb-green-wash: #eef4d6;
  --kb-line: #dcdfd3;
  --kb-night: #141612;
  --kb-night-2: #1f221c;
  --kb-on-night: #d9dccf;
  --kb-r: 6px;
  --kb-wrap: 1320px;
  --kb-gutter: clamp(1rem, 4vw, 2.5rem);
  --kb-font: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kb-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --kb-ease: cubic-bezier(.16, 1, .3, 1);
  --kb-shadow: 0 1px 2px rgb(20 22 18 / .06), 0 12px 32px -12px rgb(20 22 18 / .22);

  /* Cassiopeia/Bootstrap auf die Tokens umbiegen */
  --cassiopeia-color-primary: var(--kb-ink);
  --cassiopeia-color-link: var(--kb-green-ink);
  --cassiopeia-color-hover: var(--kb-ink);
  --cassiopeia-font-family-body: var(--kb-font);
  --cassiopeia-font-family-headings: var(--kb-display);
  --cassiopeia-font-weight-headings: 800;
  --body-font-family: var(--kb-font);
  --body-color: var(--kb-ink);
  --body-bg: var(--kb-paper);
  --link-color: var(--kb-green-ink);
  --link-hover-color: var(--kb-ink);
}

/* ---------- Grund & Browser-Flächen ---------- */
/* Sichtbare Breite OHNE Scrollleiste (user.js setzt den echten Wert; 100vw zählt unter Windows die Leiste mit → Querscrollen) */
:root { --kb-vw: 100vw; }
html, body.kb { overflow-x: clip; }
html { scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body.kb {
  margin: 0; background: var(--kb-paper); color: var(--kb-ink);
  font: 400 1.125rem/1.6 var(--kb-font); font-kerning: normal;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  caret-color: var(--kb-green-ink); accent-color: var(--kb-green-ink);
  scrollbar-color: var(--kb-ink-3) var(--kb-paper);
}
.kb ::selection { background: var(--kb-green); color: var(--kb-ink); }
.kb a { color: var(--kb-green-ink); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.kb a:hover { color: var(--kb-ink); text-decoration-color: var(--kb-green); text-decoration-thickness: 2px; }
.kb :focus-visible { outline: 3px solid var(--kb-green-ink); outline-offset: 3px; border-radius: 2px; }
.kb img { max-width: 100%; height: auto; }
.kb h1, .kb h2, .kb h3, .kb h4 {
  font-family: var(--kb-display); font-weight: 800; line-height: 1.02; letter-spacing: -.01em;
  color: var(--kb-ink); text-wrap: balance; margin: 0 0 .5em;
}
.kb h1 { font-size: clamp(2.5rem, 5.2vw, 4.75rem); }
.kb h2 { font-size: clamp(1.9rem, 3.3vw, 3rem); margin-top: 1.6em; }
.kb h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 700; margin-top: 1.4em; }
.kb p, .kb li { text-wrap: pretty; }
.kb-wrap { width: min(100% - 2 * var(--kb-gutter), var(--kb-wrap)); margin-inline: auto; }
.kb-skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--kb-ink); color: #fff !important; padding: .75rem 1rem; border-radius: var(--kb-r); }
.kb-skip:focus { top: 1rem; }

/* ---------- Buttons ---------- */
.kb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: .8em 1.4em; border-radius: var(--kb-r);
  font: 700 1.15rem/1 var(--kb-display); letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none !important; border: 2px solid transparent; cursor: pointer;
  transition: transform .25s var(--kb-ease), background-color .2s, box-shadow .25s var(--kb-ease);
}
.kb-btn:hover { transform: translateY(-2px); }
.kb-btn:active, .kb .linkbtn:active { transform: translateY(0) scale(.98); transition-duration: .1s; }
.kb-btn--green { background: var(--kb-green); color: var(--kb-ink) !important; }
.kb-btn--green:hover { background: var(--kb-green-hi); }
.kb-btn--ghost-light { background: #fff; color: var(--kb-ink) !important; border-color: #fff; }
.kb-btn--ghost-light:hover { background: var(--kb-paper); }
.kb-linkbtn { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

/* ---------- Header: dunkle Leiste aus Milchglas (wie der Footer) – Logo, Menü, Öffnungsstatus und Telefon ----------
   Auf Seiten mit Foto-Header liegt er über dem Foto (das Bild scheint gedämpft durch), sonst über dem Seitenkopf. */
:root { --kb-head: 84px; }
.kb-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(20 22 18 / .97); color: var(--kb-on-night); box-shadow: 0 1px 0 rgb(255 255 255 / .08);
  transition: background-color .35s var(--kb-ease), box-shadow .35s var(--kb-ease);
}
@supports (backdrop-filter: blur(1px)) {
  .kb-header { background: rgb(20 22 18 / .76); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
  .kb-header.is-scrolled { background: rgb(20 22 18 / .9); }
}
@media (prefers-reduced-transparency: reduce) { .kb-header, .kb-header.is-scrolled { background: var(--kb-night); backdrop-filter: none; } }
.kb-header.is-scrolled { box-shadow: 0 1px 0 rgb(255 255 255 / .1); }
.kb-header :focus-visible { outline-color: var(--kb-green); }
/* Foto-Header beginnt hinter dem Header */
.kb-hashero .kb-main { margin-top: calc(-1 * var(--kb-head)); }

.kb-header__in { display: flex; align-items: center; gap: 1.25rem; min-height: var(--kb-head); transition: min-height .35s var(--kb-ease); }
.kb-header.is-scrolled .kb-header__in { min-height: 68px; }
.kb-logo { display: block; flex: none; line-height: 0; }
/* feste Höhe, max-width aufheben: sonst Zirkelbezug mit dem Logo-Link → Breite 0 */
.kb-header .kb-logo__full { height: 60px; width: auto; max-width: none; transition: height .35s var(--kb-ease); }
.kb-header.is-scrolled .kb-logo__full { height: 50px; }
.kb-logo__mark { display: none; width: 60px; height: auto; }

/* Navigation (mod_menu): eine Markierung für die aktive Seite, Hover nur als Farbwechsel + wachsender Strich */
.kb-nav { margin-left: auto; }
.kb-nav ul.mod-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: nowrap; gap: .1rem; }
.kb-nav li { margin: 0; }
.kb .kb-nav a {
  position: relative; display: block; padding: .55rem .5rem; border-radius: 0; box-shadow: none; background: none;
  font: 500 1.02rem/1.2 var(--kb-font); color: var(--kb-on-night); text-decoration: none; white-space: nowrap;
  transition: color .2s;
}
.kb .kb-nav a::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: .1rem; height: 2px; border-radius: 2px;
  background: var(--kb-green); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--kb-ease);
}
.kb .kb-nav a:hover, .kb .kb-nav .current > a, .kb .kb-nav a[aria-current="page"] { color: #fff; text-decoration: none; }
.kb .kb-nav .current > a, .kb .kb-nav a[aria-current="page"] { font-weight: 600; }
.kb .kb-nav a:hover::after, .kb .kb-nav .current > a::after, .kb .kb-nav a[aria-current="page"]::after { transform: scaleX(1); }
.kb-nav .item-106, .kb-nav .item-140, .kb-nav .item-141, .kb-nav .item-142 { display: none; } /* Impressum/Datenschutz/Cookies/404: im Footer */
.kb-navtoggle { display: none; }
@media (min-width: 1360px) { .kb-nav .item-101 { display: none; } } /* „Home“: auf breiten Schirmen führt das Logo zur Startseite */

/* Rechts: Öffnungsstatus (zweizeilig) neben dem Telefon-Button, durch eine feine Linie vom Menü getrennt */
.kb-header__contact { display: flex; align-items: center; gap: .9rem; flex: none; padding-left: 1.1rem; border-left: 1px solid rgb(255 255 255 / .14); }
.kb-header__tel { white-space: nowrap; min-height: 46px; padding: .65em .95em; font-size: 1.05rem; }
.kb-open--header { display: grid; grid-template-columns: auto auto; column-gap: .5em; align-items: center; margin: 0; line-height: 1.2; font-size: .9rem; color: rgb(217 220 207 / .75); }
.kb-open--header[hidden] { display: none; }
.kb-open--header .kb-open__dot { grid-row: 1; }
.kb-open--header b { display: block; color: #fff !important; font-weight: 600; }
.kb-open--header .kb-open__sep { display: none; }
.kb-open--header .kb-open__detail { display: block; grid-column: 2; }

@media (max-width: 1439px) {
  .kb-header .kb-logo__full { height: 54px; }
  .kb .kb-nav a { font-size: .97rem; padding-inline: .42rem; }
  .kb .kb-nav a::after { left: .42rem; right: .42rem; }
}
@media (max-width: 1359px) {
  :root { --kb-head: 74px; }
  .kb-header__in, .kb-header.is-scrolled .kb-header__in { min-height: var(--kb-head); gap: .75rem; }
  .kb-header .kb-logo__full, .kb-header.is-scrolled .kb-logo__full { height: 52px; }
  .kb-header__contact { order: 2; margin-left: auto; border: 0; padding: 0; }
  .kb-navtoggle {
    order: 3; display: inline-flex; align-items: center; gap: .55rem; min-height: 46px; padding: 0 .9rem;
    background: transparent; border: 1.5px solid rgb(255 255 255 / .6); border-radius: var(--kb-r);
    font: 700 1rem/1 var(--kb-display); text-transform: uppercase; letter-spacing: .02em; color: #fff;
  }
  .kb-navtoggle__bars, .kb-navtoggle__bars::before, .kb-navtoggle__bars::after {
    display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform .25s var(--kb-ease), opacity .2s;
  }
  .kb-navtoggle__bars::before, .kb-navtoggle__bars::after { content: ""; position: absolute; left: 0; }
  .kb-navtoggle__bars::before { top: -6px; } .kb-navtoggle__bars::after { top: 6px; }
  .kb-navtoggle[aria-expanded="true"] .kb-navtoggle__bars { background: transparent; }
  .kb-navtoggle[aria-expanded="true"] .kb-navtoggle__bars::before { transform: translateY(6px) rotate(45deg); }
  .kb-navtoggle[aria-expanded="true"] .kb-navtoggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
  .kb-nav {
    position: absolute; left: 0; right: 0; top: 100%; margin: 0; background: var(--kb-night);
    border-bottom: 1px solid rgb(255 255 255 / .1); padding: .5rem var(--kb-gutter) 1.25rem; display: none;
  }
  .kb-nav.is-open { display: block; animation: kb-drop .3s var(--kb-ease); }
  .kb-nav ul.mod-menu { flex-direction: column; gap: 0; }
  .kb .kb-nav a { padding: .95rem .25rem; border-bottom: 1px solid rgb(255 255 255 / .1); font-size: 1.15rem; }
  .kb .kb-nav a::after { left: 0; right: auto; width: 2.5rem; bottom: -1px; }
}
@media (max-width: 720px) { .kb-open--header { display: none !important; } }
@media (max-width: 600px) {
  :root { --kb-head: 64px; }
  .kb-logo__full { display: none; }
  .kb-logo__mark { display: block; }
  .kb-header__tel { padding-inline: .9em; font-size: 1rem; }
}
@media (max-width: 420px) { .kb-header__tel { font-size: 0; gap: 0; padding: 0; width: 46px; } .kb-header .kb-header__tel .kb-i { font-size: 1.3rem; } }
@keyframes kb-drop { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Inhalt (alle Seiten) ---------- */
.kb-main { display: block; min-height: 40vh; }
.kb-crumbs { padding-top: 1.25rem; font-size: .92rem; color: var(--kb-ink-3); }
.kb-crumbs .breadcrumb { margin: 0; padding: 0; background: none; }
.kb-main > .item-page, .kb-main > .com-content-article, .kb-main > .contact, .kb-main > .com-contact, .kb-main > .kb-article {
  width: min(100% - 2 * var(--kb-gutter), var(--kb-wrap)); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(3rem, 7vw, 6rem);
}
.kb-main .com-content-article__body > p, .kb-main .com-content-article__body > ul, .kb-main .com-content-article__body > ol,
.kb-main .item-page > p, .kb-main .kb-article__body > p, .kb-main .kb-article__body > ul { max-width: 70ch; }
.kb-main .com-content-article__body ul li, .kb-main .kb-article__body ul li { margin-bottom: .35em; }
.kb-main .com-content-article__body ul, .kb-main .kb-article__body ul { padding-left: 1.2em; }
.kb-main .com-content-article__body ul li::marker, .kb-main .kb-article__body ul li::marker { color: var(--kb-green-ink); }
.kb-main .com-content-article__body > p.text-center { max-width: none; }
.kb-main .img-responsive { max-width: 100%; height: auto; border-radius: var(--kb-r); }
.kb .mtb { margin-block: clamp(2rem, 5vw, 4rem); }
.kb .mtb-3rem { margin-block: 3rem; }
.kb .text-center { text-align: center; }

/* ---------- Footer: Marke | Leistungen | Anschrift | Kontakt, darunter eine Fußleiste ----------
   Das Footer-Modul (DB-Inhalt) wird per display:contents in das Raster eingereiht; seine Texte bleiben unverändert. */
.kb-footer { background: var(--kb-night); color: var(--kb-on-night); padding-top: clamp(3.5rem, 7vw, 5.5rem); margin-top: 0; font-size: 1rem; }
.kb-footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "brand nav addr contact" "end end end end"; gap: 3rem clamp(2rem, 4vw, 3.5rem);
}
.kb-footer__grid > .mod-custom, .kb-footer__grid footer, .kb-footer__grid footer > .container, .kb-footer__grid footer .row { display: contents; }
.kb-footer__brand { grid-area: brand; }
.kb-footer__logo { display: block; width: 230px; height: auto; }
.kb-footer__welcome { margin: 1.4rem 0 1.6rem; max-width: 46ch; line-height: 1.65; color: var(--kb-on-night); }
.kb-footer__act { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 0; }
.kb-open--footer { margin: 0; font-size: .95rem; color: rgb(217 220 207 / .8); }
.kb-open--footer b { color: #fff; }

/* Spaltenköpfe: ruhig, Titelschrift, keine Versalien (die gehören den Aktionen) */
.kb-footer__h, .kb-footer footer p.kb-footer__h, .kb .kb-footer h4, .kb-footer footer .col-md-6:last-child p > strong:first-child {
  display: block; margin: 0 0 1rem; font: 700 1.3rem/1.2 var(--kb-display); letter-spacing: 0; color: #fff;
}
.kb-footer__nav { grid-area: nav; }
.kb-footer__nav ul { list-style: none; margin: 0; padding: 0; }
.kb-footer__nav li { margin: 0 0 .55rem; }
.kb-footer a { color: #fff; text-decoration: none; }
.kb-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--kb-green); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.kb-footer__nav a { color: var(--kb-on-night); }

.kb-footer footer .col-md-6 { width: auto; max-width: none; flex: none; margin: 0; padding: 0; }
.kb-footer footer .col-md-6:first-child { grid-area: addr; }
.kb-footer footer .col-md-6:last-child { grid-area: contact; }
.kb-footer footer p { margin: 0; line-height: 1.95; }
.kb-footer footer strong { color: #fff; font-weight: 600; }
.kb-footer footer .col-md-6:last-child p > strong:first-child + br { display: none; }
.kb-footer .bd-socialicon { display: inline-flex; align-items: center; gap: .4em; }

/* Fußleiste: Copyright links, Cookie-Links rechts in derselben Zeile */
.kb-footer .footer-end { grid-area: end; margin: 0; padding: 1.4rem 0 1.7rem; border-top: 1px solid rgb(255 255 255 / .1); font-size: .9rem; color: rgb(217 220 207 / .7); }
.kb .kb-footer .footer-end p { margin: 0; text-align: left !important; max-width: none; }
/* Links in Fließtext der Fußleiste/Cookie-Zeile sind nicht nur an der Farbe erkennbar (Lighthouse link-in-text-block) */
.kb-footer .footer-end a, .kb-footer__cookies a { text-decoration: underline; text-underline-offset: .2em; }
.kb-footer__cookies { grid-area: end; justify-self: end; margin: 0; padding: 1.4rem 0 1.7rem; font-size: .9rem; color: rgb(217 220 207 / .7); }

@media (max-width: 1100px) {
  .kb-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "brand brand brand" "nav addr contact" "end end end"; }
}
@media (max-width: 767px) {
  .kb-footer__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "nav" "addr" "contact" "end" "cookies"; gap: 2.25rem; }
  .kb-footer__nav ul { columns: 2; column-gap: 1.5rem; }
  .kb-footer .footer-end { padding-bottom: .5rem; }
  .kb-footer__cookies { grid-area: cookies; justify-self: start; padding-top: 0; }
}

/* ---------- Mobile Anruf-Leiste ---------- */
.kb-callbar { display: none; }
@media (max-width: 767px) {
  .kb-callbar {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.25fr 1fr;
    background: var(--kb-ink); padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom)); gap: .5rem;
    border-top: 1px solid rgb(255 255 255 / .12);
  }
  .kb-callbar a {
    display: flex; align-items: center; justify-content: center; gap: .5em; min-height: 52px; border-radius: var(--kb-r);
    font: 700 1.1rem/1 var(--kb-display); text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
  }
  .kb-callbar__call { background: var(--kb-green); color: var(--kb-ink) !important; }
  .kb-callbar__offer { color: #fff !important; border: 2px solid rgb(255 255 255 / .8); }
  :root { --kb-callbar: calc(68px + env(safe-area-inset-bottom)); }
  body.kb { padding-bottom: var(--kb-callbar); }
}

/* ---------- Header aus dem Beitrag (Tiefenwirkung) ---------- */
.kb-hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: min(80vh, 780px); background: var(--kb-night); color: #fff;
}
.kb-home .kb-hero { min-height: calc(100svh - var(--kb-callbar, 0px)); }
.kb-sub .kb-hero { min-height: calc(min(54vh, 540px) + var(--kb-head)); }
.kb-hero__media { position: absolute; inset: 0; z-index: -2; }
.kb-hero .kb-hero__media img {
  position: absolute; left: 0; top: -30%; display: block; width: 100%; height: 135%; max-width: none;
  object-fit: cover; object-position: center 55%; border-radius: 0; transform-origin: 50% 50%; will-change: transform;
}
.kb-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(20 22 18 / .28) 0%, rgb(20 22 18 / .12) 30%, rgb(20 22 18 / .55) 62%, rgb(20 22 18 / .9) 100%);
}
.kb-hero__in { padding-block: calc(var(--kb-head) + clamp(2rem, 9vh, 7rem)) clamp(2.25rem, 7vh, 4.5rem); }
.kb .kb-hero__title {
  color: #fff; font-size: clamp(2.5rem, min(6.4vw, 8.4svh), 5.75rem); line-height: .95; max-width: 24ch; margin: 0 0 .4em;
  text-shadow: 0 2px 30px rgb(0 0 0 / .35);
}
.kb-sub .kb-hero__title { font-size: clamp(2.4rem, 5vw, 4.4rem); max-width: 20ch; }
.kb .kb-hero__lead {
  color: #eef1e4; font: 500 clamp(1.15rem, 1.9vw, 1.55rem)/1.35 var(--kb-font); letter-spacing: 0;
  max-width: 44ch; margin: 0 0 clamp(.9em, 3svh, 1.7em); text-wrap: balance;
}
.kb-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.kb-hero__note { display: none !important; flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin: .3rem 0 0; color: #dfe3d4; font-size: .98rem; }
.kb-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.kb-line > span { display: inline-block; animation: kb-rise 1s var(--kb-ease) both; animation-delay: calc(var(--i) * 110ms + 120ms); }
.kb-hero__lead, .kb-hero__actions { animation: kb-fade .9s var(--kb-ease) both; animation-delay: .55s; }
.kb-hero__actions { animation-delay: .7s; }
@keyframes kb-rise { from { transform: translateY(108%); } }
@keyframes kb-fade { from { opacity: 0; transform: translateY(14px); } }
@supports (animation-timeline: scroll()) {
  .kb-hero__media img { animation: kb-parallax linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
  @keyframes kb-parallax { from { transform: translate3d(0, 0, 0) scale(1.02); } to { transform: translate3d(0, 35vh, 0) scale(1.06); } }
}
.kb-main > .kb-hero + .com-content-article { padding-top: clamp(2.5rem, 6vw, 4.5rem); }

/* ---------- Startseite: Leistungen – Liste links, großes Foto rechts ----------
   Ohne JS: einfache Karten untereinander. user.js macht #leistungen-home zu .kb-svc:
   je Leistung ein Knopf (.kb-svc__tab) direkt vor ihrem Inhalt (.kb-svc__panel).
   Desktop: Knöpfe links, das gewählte Foto rechts (Überblenden). Handy: aufklappbare Liste. */
.kb .com-content-article__body #leistungen-home { display: block; margin: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem); --bs-gutter-x: 0; }
#leistungen-home > div { width: auto; max-width: none; flex: none; padding: 0; }
#leistungen-home > div > br { display: none; }
#leistungen-home img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--kb-r); }
#leistungen-home:not(.kb-svc) > div { max-width: 760px; margin-bottom: 2.5rem; }
#leistungen-home h3 { margin: 1rem 0 .5rem; }
#leistungen-home h3 a, #leistungen-home p > a:not([title]) { color: var(--kb-ink); text-decoration: none; }
#leistungen-home p > a:not([title]) { color: var(--kb-ink-2); }
#leistungen-home p > a[title] {
  display: inline-flex; align-items: center; gap: .5em; font: 700 1.05rem/1 var(--kb-display); text-transform: uppercase;
  letter-spacing: .04em; color: var(--kb-ink); text-decoration: none; padding: .7em 0; border-bottom: 2px solid var(--kb-green);
}
#leistungen-home p > a[title]::after {
  content: ""; width: 1.1em; height: .7em; background: currentColor;
  -webkit-mask: var(--kb-arrow) center / contain no-repeat; mask: var(--kb-arrow) center / contain no-repeat;
  transition: transform .3s var(--kb-ease);
}
#leistungen-home p > a[title]:hover::after { transform: translateX(4px); }

.kb .com-content-article__body #leistungen-home.kb-svc {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: repeat(var(--kb-n), minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
}
.kb-svc__tab {
  grid-column: 1; grid-row: var(--kb-row); position: relative;
  display: flex; align-items: center; gap: 1.1rem; width: 100%; min-height: 76px; padding: .8rem 1.1rem .8rem 1.1rem; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--kb-line); border-radius: 0; color: var(--kb-ink); cursor: pointer;
  font: 700 clamp(1.3rem, 1.75vw, 1.6rem)/1.1 var(--kb-display); transition: background-color .3s var(--kb-ease);
}
.kb-svc__tab:first-child { border-top: 1px solid var(--kb-line); }
.kb-svc__tab:hover, .kb-svc__tab[aria-expanded="true"] { background: var(--kb-white); }
@media (min-width: 992px) {
  .kb-svc.is-auto .kb-svc__tab[aria-expanded="true"]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--kb-green);
    transform-origin: left; animation: kb-svc-progress 6s linear forwards;
  }
  .kb-svc.is-paused .kb-svc__tab::after, .kb-svc.is-offscreen .kb-svc__tab::after { animation-play-state: paused; }
}
@keyframes kb-svc-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kb-svc__ico { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--kb-green) var(--kb-card-i) center / 28px no-repeat; }
.kb-svc__name { flex: 1; min-width: 0; }
.kb-svc__go {
  flex: none; width: 1.1em; height: .8em; background: currentColor; opacity: 0; transform: translateX(-8px);
  -webkit-mask: var(--kb-arrow) center / contain no-repeat; mask: var(--kb-arrow) center / contain no-repeat;
  transition: opacity .3s, transform .4s var(--kb-ease);
}
.kb-svc__tab:hover .kb-svc__go, .kb-svc__tab[aria-expanded="true"] .kb-svc__go { opacity: 1; transform: none; }
.kb-svc__panel {
  grid-column: 2; grid-row: 1 / span var(--kb-n); display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
  visibility: hidden; opacity: 0; transition: opacity .45s var(--kb-ease), visibility 0s .45s;
}
.kb-svc__panel.is-open { visibility: visible; opacity: 1; transition: opacity .45s var(--kb-ease); }
.kb-svc__panel > :first-child { grid-row: 1; grid-column: 1; display: block; overflow: hidden; border-radius: var(--kb-r); }
.kb-svc__panel img { aspect-ratio: 16 / 10; transform: scale(1.06); transition: transform 1.4s var(--kb-ease); }
.kb-svc__panel.is-open img { transform: none; }
#leistungen-home .kb-svc__panel > h3 {
  grid-row: 1; grid-column: 1; align-self: end; z-index: 1; margin: 0; padding: 4rem 1.5rem 1.2rem; pointer-events: none;
  color: #fff; font-size: clamp(1.8rem, 2.6vw, 2.5rem); font-weight: 800;
  background: linear-gradient(180deg, transparent, rgb(20 22 18 / .8)); border-radius: 0 0 var(--kb-r) var(--kb-r);
}
#leistungen-home .kb-svc__panel > h3 a { color: #fff; pointer-events: auto; }
.kb-svc__panel > p { margin: 1.15rem 0 0; max-width: 62ch; }
.kb-svc__panel > p + p { margin-top: .3rem; }
@media (max-width: 991px) {
  .kb .com-content-article__body #leistungen-home.kb-svc { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .kb-svc__tab, .kb-svc__panel { grid-column: 1; grid-row: auto; }
  .kb-svc__tab { min-height: 68px; gap: .9rem; padding: .7rem .6rem .7rem .9rem; font-size: 1.3rem; }
  .kb-svc__ico { width: 44px; height: 44px; background-size: 24px; }
  .kb-svc__go { opacity: 1; transform: rotate(90deg); }
  .kb-svc__tab:hover .kb-svc__go { transform: rotate(90deg); }
  .kb-svc__tab[aria-expanded="true"] .kb-svc__go { transform: rotate(-90deg); }
  .kb-svc__panel { display: none; padding: .35rem 0 1.6rem; border-bottom: 1px solid var(--kb-line); }
  .kb-svc__panel.is-open { display: grid; animation: kb-fade .5s var(--kb-ease); }
  #leistungen-home .kb-svc__panel > h3 { padding: 3rem 1.1rem .9rem; font-size: 1.7rem; }
}

/* ---------- Startseite: Warum wir + Bewertungsband ---------- */
.kb-home .com-content-article__body > .mtb.text-center { max-width: 760px; margin-inline: auto; }
.kb-home .com-content-article__body > .mtb.text-center p { max-width: none; font-size: 1.2rem; color: var(--kb-ink-2); }
.kb-band {
  position: relative; overflow: hidden; margin: 0 calc(50% - var(--kb-vw) / 2) clamp(3rem, 7vw, 5rem); padding: 1rem 0 2rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
#kundenstimmen-owl { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.kb-band #kundenstimmen-owl > div { width: min(400px, 80vw); }
.kb-band #kundenstimmen-owl { display: flex; width: max-content; gap: 1.25rem; animation: kb-marquee 80s linear infinite; }
.kb-band:hover #kundenstimmen-owl, .kb-band:focus-within #kundenstimmen-owl, .kb-band.is-offscreen #kundenstimmen-owl { animation-play-state: paused; }
#kundenstimmen-owl > div {
  flex: none; display: flex; flex-direction: column; position: relative;
  background: var(--kb-white); border: 1px solid var(--kb-line); border-radius: var(--kb-r); padding: 1.7rem 1.75rem 1.4rem;
}
#kundenstimmen-owl > div::before {
  content: ""; display: block; width: 34px; height: 26px; margin-bottom: .7rem; background: var(--kb-green);
  -webkit-mask: var(--kb-quote) center / contain no-repeat; mask: var(--kb-quote) center / contain no-repeat;
}
#kundenstimmen-owl p { margin: 0; font-size: 1.06rem; line-height: 1.6; color: var(--kb-ink); max-width: none; }
.kb-review__by { display: flex; align-items: center; gap: .8rem; margin-top: auto; padding-top: 1.25rem; }
#kundenstimmen-owl p + .kb-review__by { border-top: 1px solid var(--kb-line); }
#kundenstimmen-owl > div > p { margin-bottom: 1.35rem; }
.kb-review__avatar {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--kb-night); color: var(--kb-green); font: 800 1.05rem/1 var(--kb-display); letter-spacing: .02em;
}
.kb-review__name { display: block; font-weight: 600; color: var(--kb-ink); line-height: 1.3; }
.kb-review__src { display: block; font-size: .88rem; color: var(--kb-ink-3); line-height: 1.3; }
@keyframes kb-marquee { to { transform: translateX(-50%); } }
.kb-main .com-content-article__body > .kb-band__more { display: flex; justify-content: center; max-width: none; margin: -1.5rem 0 clamp(3rem, 7vw, 5rem); }
.kb .kb-band__more .kb-i { color: var(--kb-green-ink); }

/* ---------- Startseite: Abschluss-Aufruf ---------- */
.kb .linkbtn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: 1em 1.8em;
  background: var(--kb-green); color: var(--kb-ink) !important; border-radius: var(--kb-r); text-decoration: none !important;
  font: 800 clamp(1.15rem, 2vw, 1.45rem)/1.1 var(--kb-display); text-transform: uppercase; letter-spacing: .03em;
  transition: transform .25s var(--kb-ease), background-color .2s;
}
.kb .linkbtn:hover { transform: translateY(-2px); background: var(--kb-green-hi); }

/* ---------- Kontaktseite (com_contact) ---------- */
.kb .com-contact {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(2rem, 5vw, 5rem); align-items: start;
}
.kb .com-contact__container {
  background: var(--kb-white); border: 1px solid var(--kb-line); border-radius: var(--kb-r); padding: clamp(1.5rem, 3vw, 2.25rem);
}
.kb .com-contact__container { display: block; } /* Joomla-Raster (4 Spalten) quetschte Überschrift und Anschrift */
.kb .com-contact__container > h2 { margin-top: 0; }
.kb .com-contact__thumbnail { display: none; } /* altes Raster-Logo des Kontakt-Eintrags; das neue Logo steht im Header */
.kb .com-contact__address { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.25rem; margin: 0; }
.kb .com-contact__address dt { font: 600 .82rem/1.9 var(--kb-font); letter-spacing: .08em; text-transform: uppercase; color: var(--kb-ink-3); }
.kb .com-contact__address dd { margin: 0; font-size: 1.15rem; line-height: 1.5; }
.kb .com-contact__address dd:empty { display: none; }
.kb .com-contact__address dt { grid-column: 1; }
.kb .com-contact__address dd { grid-column: 2; }
.kb .com-contact > h2 { grid-column: 2; margin-top: .2rem; }
.kb .com-contact > .com-contact__form { grid-column: 2; }
/* Alles nach dem Formular (z. B. „Weitere Informationen“) über die volle Breite */
.kb .com-contact > .com-contact__form ~ * { grid-column: 1 / -1; }
.kb .com-contact > .com-contact__form ~ h2 { margin-top: 3rem; }
.kb #contact-form .control-label { display: block; width: auto; float: none; text-align: left; padding: 0; margin-bottom: .35rem; font-weight: 600; }
.kb #contact-form .controls { margin: 0; }
.kb #contact-form .field-spacer .control-label { font-weight: 400; color: var(--kb-ink-3); font-size: .95rem; }
.kb #contact-form .red { color: #a61b1b; }
.kb #contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .kb #contact-form textarea {
  display: block; width: 100%; min-height: 54px; padding: .8em 1em; font: 400 1.08rem/1.4 var(--kb-font); color: var(--kb-ink);
  background: var(--kb-white); border: 1.5px solid #c3c7b8; border-radius: var(--kb-r); box-shadow: none;
  transition: border-color .2s, box-shadow .2s;
}
.kb #contact-form textarea { min-height: 200px; resize: vertical; }
.kb #contact-form input:hover, .kb #contact-form textarea:hover { border-color: var(--kb-ink-3); }
.kb #contact-form input:focus, .kb #contact-form textarea:focus {
  outline: none; border-color: var(--kb-green-ink); box-shadow: 0 0 0 4px rgb(170 199 55 / .38);
}
.kb #contact-form input.invalid, .kb #contact-form textarea.invalid, .kb #contact-form select.invalid, .kb #contact-form [aria-invalid="true"] { border-color: #a61b1b !important; box-shadow: 0 0 0 4px rgb(166 27 27 / .14) !important; }
.kb #contact-form label.invalid, .kb #contact-form .control-label .invalid { color: #a61b1b; }
.kb #contact-form .form-check-input { width: 1.3em; height: 1.3em; }
.kb #contact-form button[type="submit"] {
  min-height: 61px; padding: .8em 1.4em; border: 2px solid transparent; border-radius: var(--kb-r); background: var(--kb-green); color: var(--kb-ink);
  font: 700 1.15rem/1 var(--kb-display); text-transform: uppercase; letter-spacing: .02em; cursor: pointer;
  transition: transform .25s var(--kb-ease), background-color .2s;
}
.kb #contact-form button[type="submit"]:hover { background: var(--kb-green-hi); transform: translateY(-2px); }
/* Kontaktformular als Karte mit zwei Spalten: kurze Felder paarweise, Betreff und Nachricht über die volle Breite.
   Die beiden Fieldsets (Joomla-Kern + Zusatzfelder) werden per display:contents in ein Raster gelegt. */
.kb #contact-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 1.25rem; align-items: start;
  background: var(--kb-white); border: 1px solid var(--kb-line); border-radius: var(--kb-r); padding: clamp(1.25rem, 3.5vw, 2.25rem);
}
.kb #contact-form fieldset { display: contents; }
.kb #contact-form legend { grid-column: 1 / -1; order: 0; margin: 0; padding: 0; font: 400 1.05rem/1.5 var(--kb-font); color: var(--kb-ink-2); }
.kb #contact-form fieldset + fieldset legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.kb #contact-form .control-group { margin: 0; order: 20; }
.kb #contact-form .control-group:has(#jform_contact_name) { order: 1; }
.kb #contact-form .control-group:has(#jform_contact_email) { order: 2; }
.kb #contact-form .control-group:has(#jform_com_fields_kb_telefon) { order: 3; }
.kb #contact-form .control-group:has(#jform_com_fields_kb_ort) { order: 4; }
.kb #contact-form .control-group:has(#jform_com_fields_kb_leistung) { order: 5; }
.kb #contact-form .control-group:has(#jform_com_fields_kb_wunschtermin) { order: 6; }
.kb #contact-form .control-group:has(#jform_contact_emailmsg) { order: 7; grid-column: 1 / -1; }
.kb #contact-form .control-group:has(#jform_contact_message) { order: 8; grid-column: 1 / -1; }
.kb #contact-form .control-group:has(.form-check-input), .kb #contact-form .control-group:has([name*="captcha"]) { order: 9; grid-column: 1 / -1; }
.kb #contact-form .field-spacer { order: 10; grid-column: 1; align-self: center; }
.kb #contact-form .control-group:has(button[type="submit"]) { order: 11; grid-column: 2; justify-self: end; }
.kb #contact-form .field-spacer .controls { display: none; }
.kb #contact-form [id$="-desc"], .kb #contact-form .form-text { display: block; margin-top: .35rem; font-size: .9rem; line-height: 1.4; color: var(--kb-ink-3); }
.kb #contact-form .star { color: #a61b1b; }
.kb #contact-form select {
  display: block; width: 100%; min-height: 54px; padding: .8em 2.6em .8em 1em; font: 400 1.08rem/1.4 var(--kb-font); color: var(--kb-ink);
  background-color: var(--kb-white); border: 1.5px solid #c3c7b8; border-radius: var(--kb-r); box-shadow: none;
}
.kb #contact-form select:hover { border-color: var(--kb-ink-3); }
.kb #contact-form select:focus { outline: none; border-color: var(--kb-green-ink); box-shadow: 0 0 0 4px rgb(170 199 55 / .38); }
.kb #contact-form button[type="submit"] { display: inline-flex; align-items: center; gap: .6em; min-width: 220px; justify-content: center; }
@media (max-width: 640px) {
  .kb #contact-form { grid-template-columns: minmax(0, 1fr); }
  .kb #contact-form .control-group, .kb #contact-form .field-spacer { grid-column: 1 !important; }
  .kb #contact-form .control-group:has(button[type="submit"]) { justify-self: stretch; }
  .kb #contact-form button[type="submit"] { width: 100%; }
}

@media (max-width: 860px) {
  .kb .com-contact { grid-template-columns: 1fr; }
  .kb .com-contact > h2, .kb .com-contact > .com-contact__form { grid-column: 1; grid-row: auto; }
  .kb .com-contact > h2 { margin-top: 2.5rem; }
}

/* ---------- Galerie ---------- */
.kb-gallery { margin-block: clamp(1.5rem, 4vw, 3rem); }

/* ---------- Öffnungsstatus ---------- */
.kb-open { display: inline-flex; align-items: center; gap: .5em; margin-right: .9em; white-space: nowrap; }
.kb-open[hidden] { display: none; }
.kb-open b { font-weight: 600; color: inherit; }
.kb-open--light b { color: #fff; }
.kb-open__dot { position: relative; width: .62em; height: .62em; border-radius: 50%; background: #8d9283; flex: none; }
.kb-open[data-open="1"] .kb-open__dot { background: var(--kb-green); }
.kb-open[data-open="1"] .kb-open__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--kb-green);
  animation: kb-pulse 2.2s cubic-bezier(.16, 1, .3, 1) infinite;
}
@keyframes kb-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.8); opacity: 0; } }
.kb-hero__note .kb-open { color: #fff; display: flex; width: fit-content; margin: 0; padding: .35em .75em; border-radius: 99px; background: rgb(20 22 18 / .55); backdrop-filter: blur(6px); }
.kb-hero__note .kb-open[hidden] { display: none; }

/* ---------- Icons (Phosphor Regular, lokal, MIT) ----------
   Einheitlich als Maske: Farbe = currentColor bzw. gesetzte Hintergrundfarbe. */
.kb-i {
  display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -.2em; background: currentColor;
  -webkit-mask: var(--kb-i) center / contain no-repeat; mask: var(--kb-i) center / contain no-repeat;
}
.kb-i--phone { --kb-i: url("../images/icons/phone.svg"); }
.kb-i--device-mobile { --kb-i: url("../images/icons/device-mobile.svg"); }
.kb-i--envelope-simple { --kb-i: url("../images/icons/envelope-simple.svg"); }
.kb-i--map-pin { --kb-i: url("../images/icons/map-pin.svg"); }
.kb-i--clock { --kb-i: url("../images/icons/clock.svg"); }
.kb-i--handshake { --kb-i: url("../images/icons/handshake.svg"); }
.kb-i--check-circle { --kb-i: url("../images/icons/check-circle.svg"); }
.kb-i--broom { --kb-i: url("../images/icons/broom.svg"); }
.kb-i--facebook-logo { --kb-i: url("../images/icons/facebook-logo.svg"); }
.kb-i--file-text { --kb-i: url("../images/icons/file-text.svg"); }
.kb-i--star { --kb-i: url("../images/icons/star.svg"); }
:root {
  --kb-arrow: url("../images/icons/arrow-right.svg");
  --kb-quote: url("../images/icons/quotes.svg");
  --kb-check: url("../images/icons/check-circle.svg");
}
.kb-btn .kb-i, .kb-callbar .kb-i { font-size: 1.3em; }

/* Leistungen: Symbol je Leistung (Reihenfolge wie im Beitrag) */
.kb-svc__tab:nth-of-type(1) { --kb-card-i: url("../images/icons/house-line.svg"); }
.kb-svc__tab:nth-of-type(2) { --kb-card-i: url("../images/icons/buildings.svg"); }
.kb-svc__tab:nth-of-type(3) { --kb-card-i: url("../images/icons/truck.svg"); }
.kb-svc__tab:nth-of-type(4) { --kb-card-i: url("../images/icons/broom.svg"); }
.kb-svc__tab:nth-of-type(5) { --kb-card-i: url("../images/icons/trash.svg"); }
.kb-svc__tab:nth-of-type(6) { --kb-card-i: url("../images/icons/handshake.svg"); }

/* Aufzählungen im Text: grüne Häkchen */
.kb-main .com-content-article__body ul:is(:not([class]), .checklist) { list-style: none; padding-left: 0; }
.kb-main .com-content-article__body ul:is(:not([class]), .checklist) > li { position: relative; padding-left: 1.8em; }
.kb-main .com-content-article__body ul:is(:not([class]), .checklist) > li::before {
  content: ""; position: absolute; left: 0; top: .22em; width: 1.25em; height: 1.25em; background: var(--kb-green-ink);
  -webkit-mask: var(--kb-check) center / contain no-repeat; mask: var(--kb-check) center / contain no-repeat;
}

/* Footer-Kontakt (Modul-Inhalt): Symbole vor Telefon, Handy, E-Mail, Adresse */
.kb-footer footer a[href^="tel:"]::before, .kb-footer footer a[href^="mailto:"]::before, .kb-footer footer .col-md-6:first-child p:not(.kb-footer__h)::before {
  content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-right: .5em; vertical-align: -.2em; background: var(--kb-green);
  -webkit-mask: var(--kb-fi) center / contain no-repeat; mask: var(--kb-fi) center / contain no-repeat;
}
.kb-footer footer a[href^="tel:+49262"] { --kb-fi: url("../images/icons/phone.svg"); }
.kb-footer footer a[href^="tel:+49176"] { --kb-fi: url("../images/icons/device-mobile.svg"); }
.kb-footer footer a[href^="mailto:"] { --kb-fi: url("../images/icons/envelope-simple.svg"); }
.kb-footer footer .col-md-6:first-child p:not(.kb-footer__h) { --kb-fi: url("../images/icons/map-pin.svg"); }
.kb-footer footer .col-md-6:first-child p:not(.kb-footer__h)::before { float: left; margin-top: .25em; }
.kb-footer .bd-socialicon .kb-i { color: var(--kb-green); }
.kb-footer footer .col-md-6:first-child p:not(.kb-footer__h)::before { margin-top: .4em; }

/* Kontaktseite: gut lesbare Symbole statt der kleinen grauen Joomla-Icons */
.kb .com-contact__address dt { font-size: 0; line-height: 0; padding-top: .15rem; }
.kb .com-contact__address dt > * { display: none; }
.kb .com-contact__address dt::before {
  content: ""; display: block; width: 26px; height: 26px; background: var(--kb-green-ink);
  -webkit-mask: var(--kb-ci) center / contain no-repeat; mask: var(--kb-ci) center / contain no-repeat;
}
.kb .com-contact__address dt:nth-of-type(1) { --kb-ci: url("../images/icons/map-pin.svg"); }
.kb .com-contact__address dt:nth-of-type(2) { --kb-ci: url("../images/icons/phone.svg"); }
.kb .com-contact__address dt:nth-of-type(3) { --kb-ci: url("../images/icons/device-mobile.svg"); }
.kb .com-contact__address dt:nth-of-type(4) { --kb-ci: url("../images/icons/envelope-simple.svg"); }

/* ---------- Korrekturen aus der Design-Prüfung ---------- */
/* Startseite: Schild „Entrümpelung“ ganz im Bild statt angeschnitten */
/* Startseite: Schild „Entrümpelung“ aus dem Bild – sein Schriftzug würde hinter dem Titel konkurrieren; es bleibt der Gerümpel-Berg */
.kb-home .kb-hero .kb-hero__media img { object-position: 0% 55%; }
/* Einsatzorte: Panorama Koblenz – Stadt und Rheinbogen im Bild, Himmel oben angeschnitten */
.kb-hero__media img[src*="region-koblenz"] { object-position: center 68%; }
/* Lange Wörter/Links/Tabellen dürfen auf dem Handy nicht über den Rand laufen */
.kb-main .com-content-article__body { overflow-wrap: break-word; } /* nicht anywhere: das lässt Spalten schrumpfen und bricht mitten im Wort */
.kb-main .com-content-article__body table, .kb-main .com-content-article__body pre { display: block; max-width: 100%; overflow-x: auto; }
/* Systemmeldungen in der Palette, nicht unter dem Header */
.kb #system-message-container { width: min(100% - 2 * var(--kb-gutter), var(--kb-wrap)); margin: 1.25rem auto 0; position: relative; z-index: 1; }
.kb #system-message-container:empty { display: none; }
.kb joomla-alert { position: static; display: flex; gap: .75rem; align-items: flex-start; margin: 0; padding: 1rem 1.25rem;
  border: 1px solid #a61b1b; border-radius: var(--kb-r); background: #fff6f5; color: var(--kb-ink); box-shadow: none; }
.kb joomla-alert[type="success"], .kb joomla-alert[type="message"] { border-color: var(--kb-green-ink); background: var(--kb-green-wash); }
.kb #system-message-container joomla-alert .alert-heading { background: none; color: #a61b1b; padding: 0; min-width: 0; }
.kb #system-message-container joomla-alert[type="success"] .alert-heading, .kb #system-message-container joomla-alert[type="message"] .alert-heading { color: var(--kb-green-ink); }
.kb .com-contact__miscinfo [class^="icon-"] { display: none; } /* Joomla-Info-Icon passt nicht zum Phosphor-Set */
.kb joomla-alert .alert-wrapper, .kb joomla-alert .alert-message { padding: 0; background: none; }

/* ---------- Unterseiten ---------- */
/* Pfad im Foto-Header (statt als Streifen darüber) */
.kb-main { position: relative; }
.kb-crumbs--hero { position: absolute; top: var(--kb-head); left: 0; right: 0; z-index: 3; padding-top: 1.1rem; color: rgb(255 255 255 / .9); text-shadow: 0 1px 8px rgb(0 0 0 / .55); }
.kb-crumbs--hero a, .kb-pagehead .kb-crumbs a { color: #fff; text-decoration-color: var(--kb-green); }
.kb-crumbs--hero a:hover, .kb-pagehead .kb-crumbs a:hover { color: #fff; }
.kb-crumbs .breadcrumb-item + .breadcrumb-item::before { color: inherit; opacity: .6; }
.kb-crumbs--hero .breadcrumb-item, .kb-pagehead .breadcrumb-item { color: inherit; }
.kb-crumbs--hero + .kb-hero .kb-hero__in { padding-top: calc(var(--kb-head) + clamp(4rem, 11vh, 6.5rem)); }

/* Titelkopf für Seiten ohne Foto-Header: dunkel wie der Rahmen, KB-Zeichen als Wasserzeichen */
.kb-pagehead { position: relative; overflow: hidden; isolation: isolate; background: var(--kb-night); color: var(--kb-on-night); padding: 1.1rem 0 clamp(2.5rem, 6vw, 4rem); }
.kb-pagehead::before {
  content: ""; position: absolute; z-index: -1; right: 4%; top: 50%; width: min(34vw, 400px); aspect-ratio: 150 / 83; transform: translateY(-50%);
  background: url("../images/logo-zeichen.svg") center / contain no-repeat; opacity: .05;
}
.kb-pagehead .kb-crumbs { padding: 0 0 clamp(1.75rem, 5vw, 3.25rem); color: rgb(255 255 255 / .7); }
.kb .kb-pagehead__title { color: #fff; margin: 0; font-size: clamp(2.6rem, 5.6vw, 4.6rem); max-width: 22ch; }
.kb-pagehead__title::after { content: ""; display: block; width: 64px; height: 5px; margin-top: .3em; border-radius: 3px; background: var(--kb-green); }

/* Eine gemeinsame linke Kante für alle Unterseiten (wie Logo, Seitentitel und Startseite): Raster --kb-wrap.
   Fließtext bleibt lesbar schmal (780px, linksbündig), Raster, Bild-Text-Reihen, Karten und Abschluss-Kasten nutzen die volle Breite. */
.kb-sub .kb-main > .com-content-article { width: min(100% - 2 * var(--kb-gutter), var(--kb-wrap)); padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.kb-sub .com-content-article__body > :is(p, ul, ol, h2, h3, h4, hr, div:not(.row):not(.kb-gallery):not(.kb-areas):not(.kb-cta):not(.panel-group)) { max-width: 780px; margin-inline: 0; }
.kb-sub .com-content-article__body > .row { margin-inline: 0; }   /* Bootstrap-Negativrand weg: Reihen schließen bündig mit Text und Kasten ab */
.kb-sub .com-content-article__body > .row > [class*="col-"]:not(.bg-grau):first-child { padding-left: 0; }
.kb-sub .com-content-article__body > .row > [class*="col-"]:not(.bg-grau):last-child { padding-right: 0; }
.kb-sub .com-content-article__body > p:not(:is(div, h2, h3, h4, ul, ol) ~ p) { font-size: 1.22rem; line-height: 1.65; color: var(--kb-ink-2); }
.kb-sub .com-content-article__body h2 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
.kb-sub .com-content-article__body img { border-radius: var(--kb-r); }
.kb-sub .com-content-article__body [style*="font-size"] { font-size: inherit !important; }
.kb-sub .com-content-article__body .row.mtb { align-items: center; row-gap: 1.5rem; }
.kb-sub .com-content-article__body .row.mtb > [class*="col-md-"] > :first-child { margin-top: 0; }
.kb-sub .com-content-article__body .row.mtb img { width: 100%; }
/* Hinterlegte Abschnitte (bg-grau aus dem Beitrag) als ruhige weiße Fläche */
.kb .bg-grau { background: var(--kb-white); border: 1px solid var(--kb-line); border-radius: var(--kb-r); padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 5vw, 4rem); }
.kb .bg-grau > :first-child { margin-top: 0; }
.kb .bg-grau > * { max-width: 75ch; }

/* Häufige Fragen (altes Bootstrap-3-Akkordeon, per user.js wieder bedienbar) */
.kb .panel-group { display: grid; gap: .6rem; max-width: 820px; margin-inline: 0; }
.kb .panel { background: var(--kb-white); border: 1px solid var(--kb-line); border-radius: var(--kb-r); }
.kb .panel-heading .panel-title { margin: 0; font: 700 clamp(1.2rem, 1.8vw, 1.45rem)/1.2 var(--kb-display); }
.kb .panel-heading a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem 1.1rem 1.4rem;
  color: var(--kb-ink); text-decoration: none;
}
.kb .panel-heading a::after {
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(var(--kb-ink), var(--kb-ink)) center / 13px 2px no-repeat, linear-gradient(var(--kb-ink), var(--kb-ink)) center / 2px 13px no-repeat, var(--kb-green);
  transition: background-size .3s var(--kb-ease);
}
.kb .panel-heading a[aria-expanded="true"]::after { background-size: 13px 2px, 2px 0, auto; }
.kb .panel-collapse { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s var(--kb-ease), visibility 0s .35s; }
.kb .panel-collapse.show { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .4s var(--kb-ease); }
.kb .panel-collapse > .panel-body { min-height: 0; overflow: hidden; }
.kb .panel-body { padding: 0 1.4rem; }
.kb .panel-body > :last-child { margin-bottom: 1.3rem; }
.kb .panel-body > :first-child { margin-top: 0; }
.kb .panel-body ol { padding-left: 1.3em; }
.kb .panel-body ol li::marker { color: var(--kb-green-ink); font-weight: 600; }

/* Abschluss-Aufruf (letzter Abschnitt mit Angebots-Button, per user.js gebündelt):
   oben das ganze Team als Panorama-Streifen, darunter auf Grün links Überschrift + Text, rechts die Aktionen */
.kb .kb-cta {
  display: grid; grid-template-columns: minmax(0, 1fr); max-width: none; overflow: hidden;
  margin: clamp(3rem, 7vw, 5rem) 0 0; padding: 0; background: var(--kb-green); border-radius: var(--kb-r); text-align: left;
}
.kb .kb-cta__body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 390px); column-gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding: clamp(2rem, 4.5vw, 3.25rem) clamp(1.5rem, 5vw, 4rem);
}
.kb .kb-cta__body > :not(.kb-cta__actions) { grid-column: 1; }
.kb .kb-cta__body :is(h2, p, div) { max-width: 58ch; margin-inline: 0; text-align: left; }
.kb .kb-cta .row { display: block; margin: 0; }
.kb .kb-cta [class*="col-"] { width: auto; max-width: none; flex: none; padding: 0; }
.kb .kb-cta .mtb { margin: 0; }
.kb .kb-cta h2 { margin: 0 0 .45em; color: var(--kb-ink); font-size: clamp(1.9rem, 3vw, 2.7rem); }
.kb .kb-cta p { color: var(--kb-ink); }
.kb .kb-cta a:not(.linkbtn):not(.kb-btn) { color: var(--kb-ink); text-decoration-color: var(--kb-ink); }
.kb .kb-cta__actions { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: stretch; gap: .75rem; margin: 0 !important; max-width: none !important; }
.kb .kb-cta__actions > a { justify-content: center; text-align: center; }
.kb-btn--dark { background: var(--kb-night); color: #fff !important; }
.kb-btn--dark:hover { background: var(--kb-night-2); }
.kb .kb-cta .kb-btn--line { border-color: var(--kb-ink); }
.kb .kb-cta .kb-btn--line:hover { background: rgb(255 255 255 / .35); }
.kb .kb-cta__media { position: relative; aspect-ratio: 1920 / 545; max-height: 380px; border-radius: 0; }
.kb .kb-cta__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 40%; border-radius: 0; }
@media (max-width: 860px) {
  .kb .kb-cta__body { grid-template-columns: minmax(0, 1fr); }
  .kb .kb-cta__actions { grid-column: 1; grid-row: auto; margin-top: 1.5rem !important; }
  .kb .kb-cta__media { aspect-ratio: 2.4 / 1; }
}
.kb-btn--line { background: transparent; color: var(--kb-ink) !important; border-color: var(--kb-ink); }
.kb-btn--line:hover { background: var(--kb-white); }

/* Über uns: Team als Raster */
.kb-sub .com-content-article__body .dmNewParagraph img { width: 100%; height: auto; }
/* Team-Raster bricht aus der Lesespalte aus: vier nebeneinander auf dem Desktop */
.kb .kb-team { max-width: none !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 40vw), 1fr)); gap: 1.5rem 1.25rem; margin: 1.5rem 0 2.5rem; }
.kb .kb-member { margin: 0; text-align: center; }
.kb .kb-member p { margin: 0; max-width: none; }
.kb .kb-member img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--kb-r); }
.kb .kb-member p + p { margin-top: .7rem; font-weight: 600; line-height: 1.35; }
.kb-sub .com-content-article__body hr { border: 0; border-top: 1px solid var(--kb-line); margin-block: 2.5rem; opacity: 1; }

/* Einsatzorte: je Landkreis eine Karte (per user.js gruppiert) */
.kb .kb-areas { border-bottom: 1px solid var(--kb-line); }
.kb .kb-area { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: .5rem 2.5rem; align-items: start; padding: 1.4rem 0; border-top: 1px solid var(--kb-line); }
.kb .kb-area > * { grid-column: 2; margin: 0; max-width: 75ch; font-size: 1.02rem; line-height: 1.65; color: var(--kb-ink-2); }
.kb .kb-area > :first-child { grid-column: 1; grid-row: 1 / span 3; display: flex; align-items: center; gap: .7rem; font: 700 1.4rem/1.15 var(--kb-display); color: var(--kb-ink); }
@media (max-width: 760px) { .kb .kb-area { grid-template-columns: minmax(0, 1fr); } .kb .kb-area > * , .kb .kb-area > :first-child { grid-column: 1; grid-row: auto; } }
.kb .kb-area > :first-child b { font-weight: inherit; }
.kb .kb-area > :first-child::before {
  content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--kb-green) url("../images/icons/map-pin.svg") center / 20px no-repeat;
}

/* Galerie: Handy zweispaltig, Desktop vierspaltig */
.kb .kb-gallery { grid-template-columns: repeat(auto-fill, minmax(min(240px, 42vw), 1fr)); }

/* Kontakt: links Anschrift + weitere Infos, rechts das Formular */
.kb .kb-contact-aside { grid-column: 1; grid-row: 1 / span 2; display: grid; gap: 1.25rem; align-content: start; margin-top: .4rem; }
.kb .kb-contact-aside > h2 { margin: 1rem 0 0; font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.kb .com-contact__miscinfo { background: var(--kb-white); border: 1px solid var(--kb-line); border-radius: var(--kb-r); padding: clamp(1.25rem, 3vw, 1.75rem); }
.kb .com-contact__miscinfo dl { display: block; margin: 0; }
.kb .com-contact__miscinfo dt { display: none; }
.kb .com-contact__miscinfo dl, .kb .com-contact__miscinfo dd { margin: 0 !important; padding: 0 !important; }
.kb .com-contact__miscinfo dd { font-size: 1.02rem; }
.kb .com-contact__miscinfo p { margin-top: 0; }
.kb-contact-hours { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .35rem .7rem; margin: 1.25rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--kb-line); font-size: 1rem; }
.kb-contact-hours .kb-i { color: var(--kb-green-ink); margin-top: .2em; }
.kb-contact-hours .kb-open { grid-column: 2; }
.kb-contact-hours .kb-open { margin: 0; }
@media (max-width: 860px) { .kb .kb-contact-aside { grid-column: 1; grid-row: auto; } }

/* ---------- Cookie-Hinweis (Plugin kbconsent): kleine Karte unten links statt Balken in der Mitte ----------
   Beide Wahlmöglichkeiten gleich groß (Ablehnen so leicht wie Zustimmen). */
.kb .kbc {
  inset: auto auto 1.25rem 1.25rem; max-width: 23rem; margin: 0; padding: 1.1rem 1.15rem 1.15rem;
  background: rgb(255 255 255 / .97); border: 1px solid var(--kb-line); border-radius: var(--kb-r); box-shadow: var(--kb-shadow);
  font: 400 .92rem/1.5 var(--kb-font); color: var(--kb-ink-2); animation: kb-fade .6s var(--kb-ease) .8s both;
}
.kb .kbc p { margin: 0 0 .9rem; max-width: none; }
.kb .kbc a { color: var(--kb-ink); }
.kb .kbc__btns { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.kb .kbc button {
  min-height: 44px; padding: .5rem .75rem; border-radius: var(--kb-r); cursor: pointer;
  font: 600 .92rem/1.15 var(--kb-font); color: var(--kb-ink); background: transparent; border: 1.5px solid rgb(20 22 18 / .28);
  transition: background-color .2s, border-color .2s;
}
.kb .kbc button:hover { border-color: var(--kb-ink); }
.kb .kbc .kbc__all { background: var(--kb-green); border-color: var(--kb-green); }
.kb .kbc .kbc__all:hover { background: var(--kb-green-hi); border-color: var(--kb-green-hi); }
@media (max-width: 767px) { .kb .kbc { left: .75rem; right: .75rem; bottom: calc(var(--kb-callbar) + .6rem); max-width: none; } }

/* Leistungs-Listen mit fettem Stichwort am Anfang (z. B. Umzüge „Unsere Leistungen im Überblick“): zweispaltiges Raster,
   das Stichwort wird zur Zeilenüberschrift. Schlichte Flächen mit Linie, keine Schatten. */
.kb-sub .com-content-article__body > ul:has(> li > strong:first-child) {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; max-width: none !important; margin-block: 1.5rem 2.5rem; /* gegen die Lesespalten-Regel (:is erbt deren hohe Spezifität) */
}
.kb-sub .com-content-article__body > ul:has(> li > strong:first-child) > li {
  margin: 0; padding: 1.15rem 1.25rem 1.2rem 3.1rem; background: var(--kb-white); border: 1px solid var(--kb-line); border-radius: var(--kb-r);
  font-size: 1rem; line-height: 1.6; color: var(--kb-ink-2);
}
.kb-sub .com-content-article__body > ul:has(> li > strong:first-child) > li::before { left: 1.1rem; top: 1.3rem; }
.kb-sub .com-content-article__body > ul:has(> li > strong:first-child) > li > strong:first-child {
  display: block; margin-bottom: .3rem; font: 700 1.2rem/1.2 var(--kb-display); color: var(--kb-ink);
}
@media (max-width: 760px) { .kb-sub .com-content-article__body > ul:has(> li > strong:first-child) { grid-template-columns: minmax(0, 1fr); } }

/* Rechtstexte (Impressum, Datenschutz, Cookies): ruhige Dokument-Fläche, Zwischenüberschriften kleiner, kein Lead-Grau */
.kb-page-impressum .com-content-article__body, .kb-page-datenschutz .com-content-article__body, .kb-page-cookies .com-content-article__body {
  max-width: 900px; margin: 0; padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--kb-white); border: 1px solid var(--kb-line); border-radius: var(--kb-r);
}
:is(.kb-page-impressum, .kb-page-datenschutz, .kb-page-cookies) .com-content-article__body > * { max-width: 72ch; margin-inline: 0; }
:is(.kb-page-impressum, .kb-page-datenschutz, .kb-page-cookies) .com-content-article__body > p { font-size: 1.02rem; color: var(--kb-ink-2); }
:is(.kb-page-impressum, .kb-page-datenschutz, .kb-page-cookies) .com-content-article__body :is(h2, h3) { font-size: clamp(1.35rem, 2vw, 1.65rem); margin: 2em 0 .55em; }
:is(.kb-page-impressum, .kb-page-datenschutz, .kb-page-cookies) .com-content-article__body > :first-child,
:is(.kb-page-impressum, .kb-page-datenschutz, .kb-page-cookies) .com-content-article__body > :first-child :first-child { margin-top: 0; }
:is(.kb-page-impressum, .kb-page-datenschutz, .kb-page-cookies) .com-content-article__body a { overflow-wrap: anywhere; }

/* Weniger Leerfläche auf der gemeinsamen Kante (user.js baut die Strukturen, Texte bleiben unverändert) */
/* Einleitung der Leistungsseiten: Text links, eine passende echte Google-Bewertung rechts */
.kb .kb-intro {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start;
  max-width: none; margin: 0 0 clamp(3rem, 6vw, 4.5rem);
}
.kb .kb-intro__text p { max-width: 66ch; margin: 0 0 1em; font-size: 1.22rem; line-height: 1.65; color: var(--kb-ink-2); }
.kb .kb-intro__text p:last-child { margin-bottom: 0; }
.kb .kb-intro__quote {
  display: flex; flex-direction: column; margin: .3rem 0 0; padding: 1.8rem 1.9rem 1.5rem;
  background: var(--kb-white); border: 1px solid var(--kb-line); border-radius: var(--kb-r);
}
.kb .kb-intro__quote::before {
  content: ""; display: block; width: 34px; height: 26px; margin-bottom: .8rem; background: var(--kb-green);
  -webkit-mask: var(--kb-quote) center / contain no-repeat; mask: var(--kb-quote) center / contain no-repeat;
}
.kb .kb-intro__quote blockquote { margin: 0; }
.kb .kb-intro__quote blockquote p { margin: 0 0 1.35rem; max-width: none; font-size: 1.08rem; line-height: 1.6; color: var(--kb-ink); }
.kb .kb-intro__quote .kb-review__by { border-top: 1px solid var(--kb-line); }
.kb .kb-intro__more {
  display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; margin-top: 1.1rem; font-weight: 600; color: var(--kb-green-ink);
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}
.kb .kb-intro__more:hover { text-decoration-thickness: 2px; }
@media (max-width: 900px) { .kb .kb-intro { grid-template-columns: minmax(0, 1fr); } }

/* Hinweis-Streifen (Karte mit nur einem Absatz, z. B. Corona): Symbol links, Überschrift und Text gestapelt, leicht grün getönt */
.kb .bg-grau.kb-note {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; align-items: start;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2.25rem);
  background: rgb(170 199 55 / .1); border-color: rgb(170 199 55 / .45);
}
.kb .kb-note__icon {
  grid-row: 1 / span 9; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--kb-green); color: var(--kb-ink); font-size: 1.35rem;
}
.kb .kb-note > :not(.kb-note__icon) { grid-column: 2; max-width: 95ch; }
.kb .kb-note :is(h2, h3) { margin: .35rem 0 .35rem; font-size: clamp(1.3rem, 1.8vw, 1.55rem); }
.kb .kb-note p { margin: 0; color: var(--kb-ink-2); }

/* Karte mit Gegenüberstellung (Messiesyndrom): Überschrift + Einleitung oben, „nicht leisten / leisten“ nebeneinander */
.kb .kb-pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: none !important;
  margin: 1.75rem 0 0; padding-top: 1.75rem; border-top: 1px solid var(--kb-line);
}
.kb .kb-pair__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start; }
.kb .kb-pair__icon { font-size: 1.6rem; color: var(--kb-green-ink); margin-top: .1rem; }
.kb .kb-pair__icon.kb-i--x-circle { color: var(--kb-ink-3); }
.kb .kb-pair__item p { margin: 0; max-width: none; color: var(--kb-ink-2); }
.kb .kb-pair__item p strong { display: block; margin-bottom: .25rem; font: 700 1.2rem/1.2 var(--kb-display); color: var(--kb-ink); }
.kb-i--info { --kb-i: url("../images/icons/info.svg"); }
.kb-i--x-circle { --kb-i: url("../images/icons/x-circle.svg"); }
.kb-i--arrow-left { --kb-i: url("../images/icons/arrow-left.svg"); }
.kb-i--arrow-right { --kb-i: url("../images/icons/arrow-right.svg"); }
@media (max-width: 760px) { .kb .kb-pair { grid-template-columns: minmax(0, 1fr); } }

/* Abschnitt mit langer Liste („Warum sind wir …“): Überschrift und Einleitung lesbar schmal, Liste zweispaltig über die volle Breite */
.kb .kb-wide { max-width: none !important; }
.kb .kb-wide > :not(ul) { max-width: 780px; }
.kb .kb-list2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem clamp(2rem, 4vw, 3.5rem); max-width: none; }
@media (max-width: 760px) { .kb .kb-list2 { grid-template-columns: minmax(0, 1fr); } }

/* Häufige Fragen: zwei Spalten über die volle Breite */
@media (min-width: 992px) { .kb .panel-group { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

/* Rechtstexte: Dokument-Karte + mitlaufendes Inhaltsverzeichnis */
.kb .kb-legal { display: grid; grid-template-columns: minmax(0, 900px) minmax(260px, 360px); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.kb .kb-toc { position: sticky; top: calc(var(--kb-head) + 2rem); }
.kb .kb-toc summary {
  list-style: none; cursor: default; margin: 0 0 .8rem; font: 700 1.15rem/1.2 var(--kb-display); letter-spacing: .02em; color: var(--kb-ink);
}
.kb .kb-toc summary::-webkit-details-marker { display: none; }
.kb .kb-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--kb-line); }
.kb .kb-toc a {
  display: block; padding: .45rem 0 .45rem 1rem; margin-left: -1px; border-left: 2px solid transparent;
  font-size: .98rem; line-height: 1.35; color: var(--kb-ink-2); text-decoration: none; transition: color .2s, border-color .2s;
}
.kb .kb-toc a:hover { color: var(--kb-ink); }
.kb .kb-toc a[aria-current] { color: var(--kb-ink); font-weight: 600; border-left-color: var(--kb-green); }
.kb .kb-toc--box { padding: 1.5rem 1.6rem; background: var(--kb-white); border: 1px solid var(--kb-line); border-radius: var(--kb-r); }
.kb .kb-toc__title { margin: 0 0 .5rem; font: 700 1.15rem/1.2 var(--kb-display); letter-spacing: .02em; color: var(--kb-ink); }
.kb .kb-toc--box p:not(.kb-toc__title) { margin: 0 0 1.1rem; color: var(--kb-ink-2); }
.kb .kb-toc--box .kb-btn { width: 100%; justify-content: center; }
.kb-i--cookie { --kb-i: url("../images/icons/cookie.svg"); }
/* Impressum: wenige kurze Angaben, deshalb zweispaltig über die volle Breite statt eines Inhaltsverzeichnisses */
.kb .kb-legal--cols { display: block; }
.kb .kb-legal--cols .com-content-article__body { max-width: none; }
@media (min-width: 900px) {
  .kb .kb-legal--cols .com-content-article__body { columns: 2; column-gap: clamp(2.5rem, 6vw, 5rem); }
  .kb .kb-legal--cols .com-content-article__body :is(p, li) { break-inside: avoid; }
  .kb .kb-legal--cols .com-content-article__body :is(h2, h3) { break-after: avoid; }
}
@media (max-width: 991px) {
  .kb .kb-legal { grid-template-columns: minmax(0, 1fr); }
  .kb .kb-toc { position: static; order: -1; padding: 1rem 1.25rem; background: var(--kb-white); border: 1px solid var(--kb-line); border-radius: var(--kb-r); }
  .kb .kb-toc summary { cursor: pointer; margin: 0; display: flex; justify-content: space-between; align-items: center; }
  .kb .kb-toc summary::after { content: ""; width: .6rem; height: .6rem; border: solid var(--kb-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
  .kb .kb-toc details[open] summary { margin-bottom: .8rem; }
  .kb .kb-toc details[open] summary::after { transform: rotate(-135deg); }
}

/* ---------- Über uns ---------- */
.kb-page-ueber-uns .kb-hero { min-height: calc(min(44vh, 440px) + var(--kb-head)); }
/* breites Panorama: ohne Zoom-Überhöhe und ohne Tiefenbewegung, sonst sind die Köpfe angeschnitten */
.kb-page-ueber-uns .kb .kb-hero__media img, .kb-page-ueber-uns.kb .kb-hero__media img { top: 0; height: 100%; object-position: 50% 35%; animation: none; transform: none !important; }
/* Geschichte: Text links, Teamfoto rechts */
.kb .kb-about {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 6vw, 5rem); align-items: center;
  max-width: none; margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
}
.kb .kb-about__text h2 { margin: 0 0 .6em; text-align: left !important; font-size: clamp(2rem, 3.4vw, 3rem); }
.kb .kb-about__text h2 b { font-weight: inherit; }
.kb .kb-about__text p { margin: 0 0 1em; max-width: 52ch; font-size: 1.08rem; line-height: 1.7; color: var(--kb-ink-2); }
.kb .kb-about__text .kb-about__lead { font-size: clamp(1.2rem, 1.6vw, 1.38rem); line-height: 1.55; color: var(--kb-ink); }
.kb .kb-about__photo { max-width: none; margin: 0 0 clamp(3rem, 7vw, 5rem); overflow: hidden; border-radius: var(--kb-r); }
.kb .kb-about__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 545; object-fit: cover; }

/* Werte aus dem eigenen Text: eine ruhige Zeile mit Symbolen, getrennt durch feine Linien */
.kb .kb-values { list-style: none; display: grid; max-width: none; margin: 0; padding: 0; border-top: 1px solid var(--kb-line); }
.kb .kb-values li {
  display: flex; align-items: center; gap: 1rem; margin: 0; padding: 1.05rem 0; padding-left: 0 !important; border-bottom: 1px solid var(--kb-line); white-space: nowrap;
  font: 700 clamp(1.25rem, 2vw, 1.6rem)/1.1 var(--kb-display); color: var(--kb-ink);
}
.kb .kb-values li::before { content: none !important; }
.kb .kb-values .kb-i { width: 46px; height: 46px; border-radius: 50%; background: var(--kb-green) var(--kb-vi) center / 26px no-repeat; -webkit-mask: none; mask: none; }
.kb .kb-values .kb-i--handshake { --kb-vi: url("../images/icons/handshake.svg"); }
.kb .kb-values .kb-i--check-circle { --kb-vi: url("../images/icons/check-circle.svg"); }
.kb .kb-values .kb-i--clock { --kb-vi: url("../images/icons/clock.svg"); }
.kb .kb-values .kb-i--broom { --kb-vi: url("../images/icons/broom.svg"); }

/* Team auf dunklem Band, Porträts mit Name und Rolle im Bild */
.kb .kb-teamband {
  /* volle Breite ab der gemeinsamen Kante (--kb-axis = Abstand der Kante zum Fensterrand), Inhalt wieder auf der Kante */
  --kb-axis: max(var(--kb-gutter), (var(--kb-vw) - var(--kb-wrap)) / 2);
  max-width: none !important; width: var(--kb-vw); margin: 0 0 0 calc(-1 * var(--kb-axis)); padding: clamp(3.5rem, 7vw, 5.5rem) var(--kb-axis);
  background: var(--kb-night); color: var(--kb-on-night);
}
.kb .kb-teamband h2 { margin: 0 0 1.4em; color: #fff; text-align: left !important; font-size: clamp(2rem, 3.4vw, 3rem); }
.kb .kb-teamband .kb-team { position: static; left: auto; translate: none; width: auto; margin: 0; gap: 1.25rem; }
/* Zuschnitt per clip-path statt overflow+radius: keine hellen Kanten beim Vergrößern */
.kb .kb-teamband .kb-member { position: relative; isolation: isolate; clip-path: inset(0 round var(--kb-r)); background: var(--kb-night-2); }
.kb .kb-teamband .kb-member img { aspect-ratio: 4 / 5; object-position: 50% 22%; border-radius: 0; transform: translateZ(0); transition: transform .55s var(--kb-ease); }
.kb .kb-teamband .kb-member:hover img { transform: scale(1.035) translateZ(0); }
.kb .kb-teamband .kb-member p + p {
  position: absolute; inset: auto 0 0 0; margin: 0; padding: 4.5rem 1.1rem 1.1rem; text-align: left !important;
  background: linear-gradient(180deg, transparent, rgb(20 22 18 / .7) 40%, rgb(20 22 18 / .96));
}
.kb-member__name { display: block; font: 700 1.3rem/1.15 var(--kb-display); color: #fff; }
.kb-member__role { display: block; margin-top: .2rem; font-size: .9rem; font-weight: 500; color: var(--kb-green); }

/* Hotline: links Symbol, Titel und Öffnungsstatus, rechts je Nummer eine große Kachel mit Symbol */
.kb .kb-hotline {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); align-items: center;
  width: min(var(--kb-wrap), var(--kb-vw) - 2 * var(--kb-gutter)); max-width: none !important;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: clamp(1.5rem, 3.5vw, 2.25rem); background: var(--kb-green); border-radius: var(--kb-r); text-align: left;
}
.kb-hotline__head { display: flex; align-items: center; gap: 1rem; }
.kb-hotline__ico { flex: none; width: 58px; height: 58px; border-radius: 50%; background: var(--kb-night); position: relative; }
.kb-hotline__ico::after { content: ""; position: absolute; inset: 15px; background: var(--kb-green); -webkit-mask: url("../images/icons/phone.svg") center / contain no-repeat; mask: url("../images/icons/phone.svg") center / contain no-repeat; }
.kb .kb-hotline__head p { margin: 0 0 .25rem; text-align: left !important; font: 800 clamp(1.8rem, 3vw, 2.3rem)/1 var(--kb-display); color: var(--kb-ink); }
.kb .kb-hotline__head p b { font-weight: inherit; }
.kb .kb-hotline .kb-open { margin: 0; font-size: .95rem; color: var(--kb-ink); }
.kb .kb-hotline .kb-open b { color: var(--kb-ink); }
.kb .kb-hotline .kb-open[data-open="1"] .kb-open__dot, .kb .kb-hotline .kb-open[data-open="1"] .kb-open__dot::after { background: var(--kb-night); }
.kb-hotline__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.kb-hotline__tiles > div { margin: 0; text-align: left !important; }
.kb .kb-hotline__tile {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .85rem; align-items: center;
  padding: .95rem 1.1rem; background: var(--kb-white); border-radius: var(--kb-r); color: var(--kb-ink); text-decoration: none;
  transition: transform .25s var(--kb-ease), box-shadow .25s var(--kb-ease);
}
.kb .kb-hotline__tile:hover { transform: translateY(-2px); box-shadow: var(--kb-shadow); color: var(--kb-ink); text-decoration: none; }
.kb .kb-hotline__tile:active { transform: translateY(0) scale(.98); }
.kb-hotline__tico { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--kb-night); position: relative; }
.kb-hotline__tico::after { content: ""; position: absolute; inset: 11px; background: var(--kb-green); -webkit-mask: var(--kb-i) center / contain no-repeat; mask: var(--kb-i) center / contain no-repeat; }
.kb-hotline__l { font-size: .88rem; font-weight: 500; color: var(--kb-ink-3); line-height: 1.2; }
.kb-hotline__n { font: 700 clamp(1.3rem, 2vw, 1.6rem)/1.1 var(--kb-display); white-space: nowrap; }
@media (max-width: 860px) { .kb .kb-hotline { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .kb-hotline__tiles { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 860px) {
  .kb .kb-about { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Einsatzorte: Ortssuche ---------- */
.kb .kb-place { max-width: none !important; margin: 0 0 2rem; padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem); background: var(--kb-white); border: 1px solid var(--kb-line); border-radius: var(--kb-r); }
.kb-place__label { display: block; margin-bottom: .5rem; font: 700 1.35rem/1.2 var(--kb-display); color: var(--kb-ink); }
.kb-place__field { position: relative; }
.kb-place__field .kb-i { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; font-size: 1.3rem; color: var(--kb-green-ink); pointer-events: none; }
.kb .kb-place input {
  display: block; width: 100%; min-height: 58px; padding: .8em 1em .8em 3rem; font: 400 1.15rem/1.3 var(--kb-font); color: var(--kb-ink);
  background: var(--kb-white); border: 1.5px solid #c3c7b8; border-radius: var(--kb-r); transition: border-color .2s, box-shadow .2s;
}
.kb .kb-place input:focus { outline: none; border-color: var(--kb-green-ink); box-shadow: 0 0 0 4px rgb(170 199 55 / .38); }
.kb .kb-place__result { margin: .7rem 0 0; min-height: 1.6em; font-size: 1rem; color: var(--kb-ink-2); }
.kb-place__none { display: block; margin-bottom: .9rem; font-size: 1.15rem; color: var(--kb-ink); }
.kb-place__acts { display: flex; flex-wrap: wrap; gap: .75rem; }
.kb-town.is-hit { padding: .05em .25em; margin-inline: -.1em; border-radius: 3px; background: var(--kb-green); color: var(--kb-ink); font-weight: 600; }
.kb .kb-areas.is-filtered .kb-area { animation: none; }

/* ---------- Weitere Symbole (Phosphor Regular, MIT) ---------- */
.kb-i--house { --kb-i: url("../images/icons/house.svg"); }
.kb-i--house-line { --kb-i: url("../images/icons/house-line.svg"); }
.kb-i--truck { --kb-i: url("../images/icons/truck.svg"); }
.kb-i--buildings { --kb-i: url("../images/icons/buildings.svg"); }
.kb-i--recycle { --kb-i: url("../images/icons/recycle.svg"); }
.kb-i--images-square { --kb-i: url("../images/icons/images-square.svg"); }
.kb-i--users-three { --kb-i: url("../images/icons/users-three.svg"); }
.kb-i--warning-circle { --kb-i: url("../images/icons/warning-circle.svg"); }
.kb-i--user { --kb-i: url("../images/icons/user.svg"); }
.kb-i--calendar-blank { --kb-i: url("../images/icons/calendar-blank.svg"); }
.kb-i--chat-text { --kb-i: url("../images/icons/chat-text.svg"); }
.kb-i--tag { --kb-i: url("../images/icons/tag.svg"); }
.kb-i--paper-plane-tilt { --kb-i: url("../images/icons/paper-plane-tilt.svg"); }

/* Footer: Leistungen mit Symbol */
.kb-footer__nav a { display: inline-flex; align-items: center; gap: .6em; }
.kb-footer__nav .kb-i { color: var(--kb-green); font-size: 1.05rem; }

/* Kontaktformular: Symbol im Feld, links; Textfeld oben ausgerichtet */
.kb #contact-form .controls { position: relative; }
.kb #contact-form .control-group:is(:has(#jform_contact_name), :has(#jform_contact_email), :has(#jform_com_fields_kb_telefon), :has(#jform_com_fields_kb_ort),
  :has(#jform_com_fields_kb_leistung), :has(#jform_com_fields_kb_wunschtermin), :has(#jform_contact_emailmsg), :has(#jform_contact_message)) .controls::before {
  content: ""; position: absolute; z-index: 1; left: 1rem; top: 27px; translate: 0 -50%; width: 1.25rem; height: 1.25rem; pointer-events: none;
  background: var(--kb-green-ink); -webkit-mask: var(--kb-fi) center / contain no-repeat; mask: var(--kb-fi) center / contain no-repeat;
}
.kb #contact-form .control-group:has(#jform_contact_name) { --kb-fi: url("../images/icons/user.svg"); }
.kb #contact-form .control-group:has(#jform_contact_email) { --kb-fi: url("../images/icons/envelope-simple.svg"); }
.kb #contact-form .control-group:has(#jform_com_fields_kb_telefon) { --kb-fi: url("../images/icons/phone.svg"); }
.kb #contact-form .control-group:has(#jform_com_fields_kb_ort) { --kb-fi: url("../images/icons/map-pin.svg"); }
.kb #contact-form .control-group:has(#jform_com_fields_kb_leistung) { --kb-fi: url("../images/icons/tag.svg"); }
.kb #contact-form .control-group:has(#jform_com_fields_kb_wunschtermin) { --kb-fi: url("../images/icons/calendar-blank.svg"); }
.kb #contact-form .control-group:has(#jform_contact_emailmsg) { --kb-fi: url("../images/icons/chat-text.svg"); }
.kb #contact-form .control-group:has(#jform_contact_message) { --kb-fi: url("../images/icons/file-text.svg"); }
.kb #contact-form .controls > :is(input, select, textarea) { padding-left: 2.9rem !important; }

/* Leistung als Kacheln (Mehrfachauswahl) und Wunschtermin mit Datumsauswahl – user.js baut sie, die Originalfelder bleiben verborgen im Formular */
.kb #contact-form .kb-cg--choices, .kb #contact-form .kb-cg--dates { grid-column: 1 / -1; }
.kb #contact-form .kb-cg--choices .controls::before, .kb #contact-form .kb-cg--dates .controls::before { display: none !important; }
.kb .kb-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.kb #contact-form .kb-choice {
  position: relative; display: flex; align-items: center; gap: .75rem; min-height: 58px; margin: 0; padding: .7rem 2.6rem .7rem .9rem;
  background: var(--kb-white); border: 1px solid var(--kb-line); border-radius: var(--kb-r); cursor: pointer;
  font-weight: 500; line-height: 1.3; color: var(--kb-ink); transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.kb #contact-form .kb-choice:hover { border-color: var(--kb-ink-3); }
.kb .kb-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.kb .kb-choice__icon {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: rgb(170 199 55 / .18); color: var(--kb-green-ink); -webkit-mask: none; mask: none;
}
.kb .kb-choice__icon::before {
  content: ""; width: 1.2rem; height: 1.2rem; background: currentColor;
  -webkit-mask: var(--kb-i) center / contain no-repeat; mask: var(--kb-i) center / contain no-repeat;
}
.kb .kb-choice__text { min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
.kb .kb-choice__tick {
  position: absolute; right: .85rem; top: 50%; translate: 0 -50%; width: 1.2rem; height: 1.2rem; border: 1.5px solid var(--kb-line); border-radius: 4px;
  background: var(--kb-white); transition: background-color .2s, border-color .2s;
}
.kb .kb-choice__tick::after {
  content: ""; position: absolute; inset: 0; background: var(--kb-ink); opacity: 0; transition: opacity .15s;
  -webkit-mask: var(--kb-check-mark, url("../images/icons/check.svg")) center / 80% no-repeat; mask: var(--kb-check-mark, url("../images/icons/check.svg")) center / 80% no-repeat;
}
.kb .kb-choice:has(input:checked) { border-color: var(--kb-green-ink); background: rgb(170 199 55 / .12); box-shadow: inset 0 0 0 1px var(--kb-green-ink); }
.kb .kb-choice:has(input:checked) .kb-choice__icon { background: var(--kb-green); color: var(--kb-ink); }
.kb .kb-choice:has(input:checked) .kb-choice__tick { background: var(--kb-green); border-color: var(--kb-green); }
.kb .kb-choice:has(input:checked) .kb-choice__tick::after { opacity: 1; }
.kb .kb-choice:has(input:focus-visible) { outline: 3px solid var(--kb-green-ink); outline-offset: 2px; }
/* Wunschtermin: zwei Felder (von / bis) als Knöpfe, darunter der eigene Kalender (kein Browser-Popup) */
.kb .kb-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.kb #contact-form .kb-date {
  display: flex; align-items: center; gap: .75rem; min-height: 58px; padding: .55rem .9rem; text-align: left; cursor: pointer;
  background: var(--kb-white); border: 1px solid var(--kb-line); border-radius: var(--kb-r); color: var(--kb-ink);
  font: inherit; transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.kb #contact-form .kb-date:hover { border-color: var(--kb-ink-3); }
.kb #contact-form .kb-date:focus-visible { outline: 3px solid var(--kb-green-ink); outline-offset: 2px; }
.kb #contact-form .kb-date.is-active { border-color: var(--kb-green-ink); box-shadow: inset 0 0 0 1px var(--kb-green-ink); }
.kb #contact-form .kb-date.is-set { background: rgb(170 199 55 / .12); }
.kb .kb-date__icon { font-size: 1.25rem; color: var(--kb-green-ink); }
.kb .kb-date__txt { display: grid; line-height: 1.25; }
.kb .kb-date__l { font-size: .82rem; color: var(--kb-ink-2); }
.kb .kb-date__v { font-weight: 500; }
.kb .kb-date:not(.is-set) .kb-date__v { color: var(--kb-ink-3); }
.kb .kb-cal {
  grid-column: 1 / -1; width: min(100%, 420px); padding: 1rem 1rem .8rem;
  background: var(--kb-white); border: 1px solid var(--kb-line); border-radius: var(--kb-r); box-shadow: 0 10px 30px -12px rgb(20 22 18 / .25);
}
.kb .kb-cal[hidden] { display: none; }
.kb .kb-cal__head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; margin-bottom: .6rem; }
.kb .kb-cal__month { margin: 0; text-align: center; font: 700 1.15rem/1.2 var(--kb-display); }
.kb #contact-form .kb-cal__nav {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--kb-line); border-radius: 50%;
  background: var(--kb-white); color: var(--kb-ink); cursor: pointer;
}
.kb #contact-form .kb-cal__nav:hover:not(:disabled) { border-color: var(--kb-ink-3); }
.kb #contact-form .kb-cal__nav:disabled { opacity: .35; cursor: default; }
.kb .kb-cal__days, .kb .kb-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.kb .kb-cal__days span { padding: .3rem 0; text-align: center; font-size: .8rem; font-weight: 600; color: var(--kb-ink-3); }
.kb #contact-form .kb-cal__day {
  aspect-ratio: 1; min-height: 40px; padding: 0; border: 0; border-radius: var(--kb-r); background: transparent;
  font: 500 .98rem/1 var(--kb-font); color: var(--kb-ink); cursor: pointer; transition: background-color .15s;
}
.kb #contact-form .kb-cal__day:hover:not(:disabled) { background: rgb(170 199 55 / .2); }
.kb #contact-form .kb-cal__day:disabled { color: #b9bdb0; cursor: default; }
.kb #contact-form .kb-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--kb-green-ink); }
.kb #contact-form .kb-cal__day.is-in { background: rgb(170 199 55 / .22); border-radius: 0; }
.kb #contact-form .kb-cal__day.is-sel { background: var(--kb-green); font-weight: 700; }
.kb #contact-form .kb-cal__day:focus-visible { outline: 2px solid var(--kb-green-ink); outline-offset: 1px; }
.kb .kb-cal__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--kb-line); font-size: .88rem; color: var(--kb-ink-2); }
.kb #contact-form .kb-cal__clear { padding: .3rem 0; border: 0; background: none; color: var(--kb-green-ink); font: 600 .88rem/1 var(--kb-font); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

@media (max-width: 480px) { .kb .kb-choices, .kb .kb-dates { grid-template-columns: minmax(0, 1fr); } }
.kb #contact-form button[type="submit"]::before {
  content: ""; width: 1.2em; height: 1.2em; background: currentColor;
  -webkit-mask: url("../images/icons/paper-plane-tilt.svg") center / contain no-repeat; mask: url("../images/icons/paper-plane-tilt.svg") center / contain no-repeat;
}

/* ---------- Fehlerseite (404 & Co.) ---------- */
.kb-error__body { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem); }
.kb .kb-error__lead { max-width: 52ch; margin: 0 0 1.75rem; font-size: 1.25rem; line-height: 1.55; color: var(--kb-ink-2); }
.kb-error__ways { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0 0 2.5rem; padding: 0; }
.kb-error__ways li { margin: 0; }
.kb-error__ways a {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; background: var(--kb-white); border: 1px solid var(--kb-line); border-radius: var(--kb-r);
  font: 700 1.3rem/1.15 var(--kb-display); color: var(--kb-ink); text-decoration: none; transition: border-color .2s, background-color .2s;
}
.kb-error__ways a:hover { border-color: var(--kb-ink-3); color: var(--kb-ink); text-decoration: none; }
.kb-error__ico { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--kb-green); position: relative; }
.kb-error__ico::after { content: ""; position: absolute; inset: 11px; background: var(--kb-ink); -webkit-mask: var(--kb-i) center / contain no-repeat; mask: var(--kb-i) center / contain no-repeat; }
.kb-error__go { margin-left: auto; width: 1.1em; height: .8em; background: currentColor; -webkit-mask: var(--kb-arrow) center / contain no-repeat; mask: var(--kb-arrow) center / contain no-repeat; transition: transform .3s var(--kb-ease); }
.kb-error__ways a:hover .kb-error__go { transform: translateX(4px); }
.kb .kb-error__call { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 0; font-size: 1.15rem; color: var(--kb-ink); }
@media (max-width: 860px) { .kb-error__ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kb-error__ways { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Bewegung ----------
   Ein Hauptmoment (Foto-Header), sonst nur Bewegung, die etwas erklärt: Laden, Aufklappen, Seitenwechsel, Scroll-Bezug. */
/* Bilder: Schimmer-Platzhalter bis geladen (Platz ist über width/height reserviert), dann weich einblenden (user.js) */
.kb .kb-skel {
  display: block; overflow: hidden; border-radius: var(--kb-r);
  background: linear-gradient(100deg, #e7e9df 30%, #f3f4ee 50%, #e7e9df 70%) 0 0 / 300% 100%; animation: kb-shimmer 1.3s linear infinite;
}
.kb-pending { opacity: 0; }
.kb-in { animation: kb-img-in .6s var(--kb-ease) both; }
@keyframes kb-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes kb-img-in { from { opacity: 0; filter: saturate(.6) blur(6px); } }

/* Seitenwechsel: weiche Überblendung, der Header bleibt stehen (Chrome/Edge; andere Browser wechseln wie bisher) */
@view-transition { navigation: auto; }
.kb-header { view-transition-name: kb-header; }
::view-transition-old(root) { animation: kb-vt-out .18s ease-in both; }
::view-transition-new(root) { animation: kb-vt-in .32s var(--kb-ease) both; }
@keyframes kb-vt-out { to { opacity: 0; } }
@keyframes kb-vt-in { from { opacity: 0; transform: translateY(10px); } }

/* Seitenaufbau beim Scrollen (user.js setzt .kb-rv nur unterhalb des ersten Bildschirms; ohne JS ist alles sichtbar) */
.kb-rv { opacity: 0; transform: translateY(30px); }
.kb-rv.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--kb-ease) var(--kb-d, 0ms), transform .95s var(--kb-ease) var(--kb-d, 0ms);
}
.kb-rv-img { clip-path: inset(0 0 100% 0 round var(--kb-r)); }
.kb-rv-img.is-in { clip-path: inset(0 0 0 0 round var(--kb-r)); transition: clip-path 1.1s var(--kb-ease) .1s; }

/* Weiches Scrollen (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }

/* Fortschrittslinie unter dem Header, mit Abschnitts-Marken (Desktop) */
.kb-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; z-index: 2; }
.kb-progress__fill { position: absolute; inset: 0; background: var(--kb-green); transform: scaleX(0); transform-origin: left; }
.kb-progress ol { list-style: none; margin: 0; padding: 0; }
.kb-progress li { position: absolute; top: 50%; margin: 0; translate: -50% -50%; }
.kb-progress li:first-child { translate: 0 -50%; }
.kb-progress li:last-child { translate: -100% -50%; }
.kb-progress a { position: relative; display: grid; place-items: center; width: 22px; height: 22px; text-decoration: none; }
.kb-progress__dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--kb-night); box-shadow: 0 0 0 2px rgb(255 255 255 / .55);
  transition: transform .3s var(--kb-ease), background-color .25s, box-shadow .25s;
}
.kb-progress li.is-past .kb-progress__dot { background: var(--kb-green); box-shadow: 0 0 0 2px var(--kb-night); }
.kb-progress a[aria-current="true"] .kb-progress__dot { transform: scale(1.45); box-shadow: 0 0 0 2px var(--kb-night), 0 0 0 5px rgb(170 199 55 / .35); }
.kb-progress a:hover .kb-progress__dot { transform: scale(1.6); }
.kb-progress__label {
  position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% -4px; white-space: nowrap; pointer-events: none;
  padding: .35rem .7rem; border-radius: var(--kb-r); background: var(--kb-night); color: #fff; font: 600 .88rem/1.2 var(--kb-font);
  opacity: 0; transition: opacity .2s, translate .3s var(--kb-ease);
}
.kb-progress li:first-child .kb-progress__label { left: 0; translate: 0 -4px; }
.kb-progress li:last-child .kb-progress__label { left: auto; right: 0; translate: 0 -4px; }
.kb-progress a:hover .kb-progress__label, .kb-progress a:focus-visible .kb-progress__label { opacity: 1; translate: -50% 0; }
.kb-progress li:first-child a:hover .kb-progress__label, .kb-progress li:first-child a:focus-visible .kb-progress__label,
.kb-progress li:last-child a:hover .kb-progress__label, .kb-progress li:last-child a:focus-visible .kb-progress__label { translate: 0 0; }
.kb-progress a:focus-visible { outline: 2px solid var(--kb-green); outline-offset: 1px; border-radius: 50%; }
@media (max-width: 1099px), (pointer: coarse) { .kb-progress ol { display: none; } }
@media print { .kb-progress { display: none; } }



/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .kb *, .kb *::before, .kb *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .kb .kb-btn, .kb .kb-svc__panel, .kb .kb-nav a { transition: opacity .2s, background-color .2s, color .2s !important; }
  .kb-pending { opacity: 1; }
  .kb-rv, .kb-rv-img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  @view-transition { navigation: none; }
}

@media (max-width: 720px) { .kb-hero__note { display: flex !important; } }

/* Galerie: doppelt große Fotos (user.js wählt sie so, dass die letzte Reihe aufgeht) */
.kb .kb-gallery { grid-auto-flow: dense; }
/* Kachel bestimmt das Format (4:3), das Foto füllt sie – so bleiben die Reihen gleich hoch, auch mit Hochkant-Fotos */
.kb .kb-gallery__item { position: relative; aspect-ratio: 4 / 3; }
.kb .kb-gallery__item img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.kb .kb-gallery__item.is-big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

/* Startseite: zwei Einleitungsabsätze nebeneinander über die volle Breite */
.kb .kb-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem clamp(2rem, 5vw, 4.5rem); max-width: none; margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); }
.kb .kb-cols > p { max-width: none; margin: 0; }
@media (max-width: 860px) { .kb .kb-cols { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 861px) { .kb .kb-cta__actions .kb-btn { white-space: nowrap; } }

/* Kleine Handys: Knopftexte wie „Kostenloses Angebot anfordern“ bleiben einzeilig */
@media (max-width: 480px) { .kb-btn:not(.kb-header__tel), .kb #contact-form button[type="submit"] { font-size: 1rem; padding-inline: 1em; } }   /* Header-Telefon bleibt dort nur Symbol */

/* Kontaktformular: Sicherheitsprüfung (ALTCHA, Joomla-Plugin „Proof of Work“, ohne fremden Dienst) wie die Leistungs-Kacheln */
.kb #contact-form .control-group:has(altcha-widget) { grid-column: 1 / -1; }
.kb #contact-form .control-group:has(altcha-widget) .controls::before { display: none !important; }
.kb altcha-widget {
  --altcha-max-width: 100%; --altcha-border-width: 1px; --altcha-border-radius: var(--kb-r);
  --altcha-color-base: var(--kb-white); --altcha-color-border: var(--kb-line); --altcha-color-text: var(--kb-ink);
  --altcha-color-border-focus: var(--kb-green-ink); --altcha-color-error-text: #a61b1b;
  display: block;
}
.kb altcha-widget .altcha { max-width: 100%; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.kb altcha-widget .altcha:hover { border-color: var(--kb-ink-3); }
.kb altcha-widget .altcha-main { position: relative; min-height: 58px; padding: .7rem 1rem .7rem 3.6rem; gap: .75rem; font-family: var(--kb-font); font-weight: 500; font-size: 1rem; }
.kb altcha-widget .altcha-main::before {
  content: ""; position: absolute; left: .9rem; top: 50%; translate: 0 -50%; width: 36px; height: 36px; border-radius: 50%;
  background: rgb(170 199 55 / .18) center / 1.2rem no-repeat;
}
.kb altcha-widget .altcha-main::after {
  content: ""; position: absolute; left: calc(.9rem + 8px); top: 50%; translate: 0 -50%; width: 20px; height: 20px; background: var(--kb-green-ink);
  -webkit-mask: url("../images/icons/shield-check.svg") center / contain no-repeat; mask: url("../images/icons/shield-check.svg") center / contain no-repeat;
}
.kb altcha-widget .altcha-checkbox input { width: 1.25rem; height: 1.25rem; accent-color: var(--kb-green-ink); cursor: pointer; }
.kb altcha-widget .altcha[data-state="verified"] { border-color: var(--kb-green-ink); background: rgb(170 199 55 / .12); box-shadow: inset 0 0 0 1px var(--kb-green-ink); }
.kb altcha-widget .altcha[data-state="verified"] .altcha-main::before { background-color: var(--kb-green); }
.kb altcha-widget .altcha[data-state="verified"] .altcha-main::after { background: var(--kb-ink); }

/* Kontaktformular: Datenschutz-Häkchen als Kachel (wie Leistung und Sicherheitsprüfung) */
.kb #contact-form .kb-cg--consent { grid-column: 1 / -1; }
.kb #contact-form .kb-cg--consent .controls::before { display: none !important; }
.kb #contact-form .kb-cg--consent fieldset { display: block; margin: 0; padding: 0; border: 0; }
.kb #contact-form .kb-cg--consent .form-check {
  position: relative; display: flex; align-items: center; gap: .9rem; margin: 0; min-height: 58px; padding: .8rem 1rem .8rem .9rem;
  background: var(--kb-white); border: 1px solid var(--kb-line); border-radius: var(--kb-r); transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.kb #contact-form .kb-cg--consent .form-check:hover { border-color: var(--kb-ink-3); }
.kb #contact-form .kb-cg--consent .form-check:has(input:checked) { border-color: var(--kb-green-ink); background: rgb(170 199 55 / .12); box-shadow: inset 0 0 0 1px var(--kb-green-ink); }
.kb .kb-consent__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgb(170 199 55 / .18); color: var(--kb-green-ink); font-size: 1.15rem; }
.kb #contact-form .kb-cg--consent .form-check:has(input:checked) .kb-consent__icon { background: var(--kb-green); color: var(--kb-ink); }
.kb #contact-form .kb-cg--consent .form-check-input {
  order: 2; flex: none; margin: 0 0 0 auto; width: 1.25rem; height: 1.25rem; appearance: none; -webkit-appearance: none; float: none;
  border: 1.5px solid #b9bdb0; border-radius: 4px; background: var(--kb-white) center / 80% no-repeat; cursor: pointer;
}
.kb #contact-form .kb-cg--consent .form-check-input:checked {
  border-color: var(--kb-green); background-color: var(--kb-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23141612' d='M232.49 80.49l-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 1 1 17-17L96 183 215.51 63.51a12 12 0 0 1 17 17Z'/%3E%3C/svg%3E");
}
.kb #contact-form .kb-cg--consent .form-check-input:focus-visible { outline: 3px solid var(--kb-green-ink); outline-offset: 2px; }
.kb #contact-form .kb-cg--consent .form-check-input.invalid, .kb #contact-form .kb-cg--consent fieldset.invalid .form-check-input { border-color: #a61b1b; }
.kb #contact-form .kb-cg--consent .form-check-label { order: 1; margin: 0; font-size: .98rem; line-height: 1.5; color: var(--kb-ink); cursor: pointer; }
.kb #contact-form .kb-cg--consent .form-check-label a { color: var(--kb-green-ink); text-decoration: underline; text-underline-offset: .2em; }
/* Sicherheitsprüfung: Häkchen rechts wie bei Datenschutz und Leistungs-Kacheln */
.kb altcha-widget .altcha-main { display: flex; align-items: center; }
.kb altcha-widget .altcha-checkbox { order: 2; margin-left: auto; }
.kb altcha-widget .altcha-label { order: 1; }
.kb .kb-short { display: none; }
@media (max-width: 480px) { .kb .kb-long { display: none; } .kb .kb-short { display: inline; } }
/* Sicherheitsprüfung: dasselbe grüne Häkchen wie Datenschutz und Leistungs-Kacheln statt des Browser-Kästchens */
.kb altcha-widget .altcha-checkbox input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 1.25rem; height: 1.25rem;
  border: 1.5px solid #b9bdb0; border-radius: 4px; background: var(--kb-white) center / 80% no-repeat; cursor: pointer;
}
.kb altcha-widget .altcha-checkbox input:checked, .kb altcha-widget .altcha[data-state="verified"] .altcha-checkbox input {
  border-color: var(--kb-green); background-color: var(--kb-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23141612' d='M232.49 80.49l-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 1 1 17-17L96 183 215.51 63.51a12 12 0 0 1 17 17Z'/%3E%3C/svg%3E");
}
.kb altcha-widget .altcha-checkbox input:focus-visible { outline: 3px solid var(--kb-green-ink); outline-offset: 2px; }
/* Hinweis-Streifen am Handy: Symbol neben der Überschrift, Text darunter in voller Breite */
@media (max-width: 480px) {
  .kb .bg-grau.kb-note { align-items: center; }
  .kb .kb-note__icon { grid-row: 1; width: 38px; height: 38px; }
  .kb .kb-note > :not(.kb-note__icon):not(:is(h2, h3)) { grid-column: 1 / -1; margin-top: .6rem; }
}
@media (max-width: 480px) {
  .kb .kb-pair__item { display: block; }
  .kb .kb-pair__icon { float: left; margin: .05rem .55rem 0 0; }
}
/* Rechtstexte: alle Absätze gleich groß (auch verschachtelte), keine Einleitungs-Vergrößerung */
:is(.kb-page-impressum, .kb-page-datenschutz, .kb-page-cookies) .com-content-article__body p { font-size: 1.02rem; line-height: 1.65; color: var(--kb-ink-2); }
.kb .kb-empty { display: none; }
:is(.kb-page-impressum, .kb-page-datenschutz, .kb-page-cookies) .com-content-article__body { font-size: 1.02rem; line-height: 1.65; color: var(--kb-ink-2); }
:is(.kb-page-impressum, .kb-page-datenschutz, .kb-page-cookies) .com-content-article__body :is(div, span) { font-size: inherit; }