/* Klanglichter 2026 – klassische Ebene im Stil des Sydney-Themes (Christian, 13.11.2026):
   „schlicht und einfach, wie mit Elementor gebaut“, Konturen und Knöpfe wie Sydney, keine runden Kacheln, keine Kästen.
   Gilt für Kopf, Knöpfe und alle Seiten außer den Ratgebern (die bleiben im Agenturfreunde-Stil, hell.css). */

/* ---------- Kopfleiste dunkel wie Sydney ---------- */
.kl-kopf, .kl-kopf.ist-gescrollt { background: #1c1c1c; box-shadow: none; backdrop-filter: none; }
.kl-marke { color: #fff; }
.kl-menue__punkt > a { color: #fff; font-size: .9rem; font-weight: 600; }
.kl-menue__punkt > a:hover { color: var(--kl-orange); }
.kl-kopf .kl-knopf--hell { background: #fff; color: #111; border-radius: 0; padding: 13px 26px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.kl-kopf .kl-knopf--hell:hover { background: var(--kl-orange); color: #111; }
.kl-menue-knopf { border-color: rgba(255, 255, 255, .35); }
.kl-menue-knopf__linie, .kl-menue-knopf__linie::before, .kl-menue-knopf__linie::after { background: #fff; }
.kl-menue-knopf[aria-expanded="true"] .kl-menue-knopf__linie { background: transparent; }
@media (max-width: 1080px) {
  .kl-menue { background: #1c1c1c; border-bottom: 0; }
  .kl-menue__unter { background: none; border: 0; box-shadow: none; }
  .kl-menue__unter a { color: rgba(255, 255, 255, .78); }
}
.kl-menue__unter { border-radius: 0; }

/* ---------- Knöpfe wie Sydney: eckig, Großbuchstaben, großzügig ---------- */
.kl-knopf { border-radius: 3px; padding: 17px 34px; font: 700 .8rem/1 var(--kl-sans); letter-spacing: .09em; text-transform: uppercase; }
.kl-knopf--hell::after { content: none; }
.kl-knopf--glas { box-shadow: inset 0 0 0 2px #fff; }
.kl-anfrage-leiste .kl-knopf { padding: 15px 18px; }

/* ---------- Klassische Seiten (alles außer Ratgeber): ruhig, ohne Kästen ---------- */
.kl-artikel:not(.kl-artikel--ratgeber) .kl-kachel,
.kl-artikel:not(.kl-artikel--ratgeber) .kl-begriffe li { background: none; border: 0; border-top: 2px solid var(--kl-tinte); border-radius: 0; padding: 18px 0 0; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-raster { gap: 36px 40px; }
.kl-leistung, .kl-referenz, .kl-karte { background: none; border: 0; border-radius: 0; }
.kl-leistung__text, .kl-referenz__text { padding: 16px 0 0; }
.kl-karte__text { padding: 14px 0 0; }
.kl-leistung__bild img, .kl-karte__bild, .kl-inhalt .kl-referenz img { border-radius: 0; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-inhalt img,
.kl-artikel:not(.kl-artikel--ratgeber) .kl-mockup,
.kl-artikel:not(.kl-artikel--ratgeber) .kl-infobox,
.kl-artikel:not(.kl-artikel--ratgeber) .kl-fakten,
.kl-artikel:not(.kl-artikel--ratgeber) .kl-cta-box,
.kl-artikel:not(.kl-artikel--ratgeber) .kl-tabelle table,
.kl-cta__innen { border-radius: 0; }
/* Zahlen: schwarz mit Orange, gerade statt kursiv (Christian, 13.11.2026) */
.kl-fakt__wert, .kl-fakten .kl-fakt__wert, .kl-fakten--band .kl-fakt__wert { font-family: var(--kl-sans); font-style: normal; font-weight: 800; letter-spacing: -.01em; color: var(--kl-orange); }
.kl-fakten:not(.kl-fakten--band) .kl-fakt { border-left: 3px solid var(--kl-orange); }
/* Etiketten eckig */
.kl-chips li, .kl-chip { border-radius: 0; }
.kl-inhalt .kl-mehr__knopf { border-radius: 0; }
.kl-marke strong { color: inherit; }

/* Aufräumen der klassischen Seiten (13.11.2026) */
.kl-artikel:not(.kl-artikel--ratgeber) .kl-verzeichnis,
.kl-artikel:not(.kl-artikel--ratgeber) .kl-autor-kopf .kl-ratgeber-meta { display: none; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-autor-kopf { border-bottom: 0; padding-bottom: 0; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-chips { gap: 10px 26px; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-chips li { background: none; padding: 0 0 0 24px; position: relative; font-size: .95rem; font-weight: 600; color: var(--kl-tinte); }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-chips li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 11px; height: 6px; border-left: 2px solid var(--kl-orange); border-bottom: 2px solid var(--kl-orange); transform: rotate(-45deg); }
/* „Mehr dazu“ als farbige Knöpfe (Christian, 13.11.2026) */
.kl-artikel:not(.kl-artikel--ratgeber) .kl-inhalt .kl-mehr__knopf { background: var(--kl-orange); border: 0; padding: 12px 20px; color: #111; font-weight: 700; text-decoration: none; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-inhalt .kl-mehr__knopf::after { color: #111; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-inhalt .kl-mehr__knopf:hover { background: var(--kl-tinte); color: #fff; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-inhalt .kl-mehr__knopf:hover::after { color: #fff; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-inhalt .kl-mehr { gap: 10px 12px; }

/* =========================================================================
   Sydney-Bänder für klassische Seiten (Leistung, Kosten, Region, Start):
   statt einer langen Textspalte wechseln sich volle Bänder ab (13.11.2026: „zu generisch“).
   ========================================================================= */
:is(.kl-inhalt--breit, .kl-abschnitt) > .kl-fakten, :is(.kl-inhalt--breit, .kl-abschnitt) > .kl-mockup, :is(.kl-inhalt--breit, .kl-abschnitt) > .kl-galerie {
  width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: 0; border-radius: 0; }

/* Zahlen: Band auf dem abgedunkelten Seitenfoto, mittig, groß und kursiv */
:is(.kl-inhalt--breit, .kl-abschnitt) > .kl-fakten { position: relative; isolation: isolate; margin-block: 4.5em; padding: clamp(56px, 8vw, 96px) max(var(--kl-rand), calc(50vw - 560px)); background: #141414 var(--kl-seitenbild) center / cover no-repeat; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 32px 24px; }
:is(.kl-inhalt--breit, .kl-abschnitt) > .kl-fakten::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(14, 14, 14, .7); }
:is(.kl-inhalt--breit, .kl-abschnitt) > .kl-fakten .kl-fakt { border: 0; padding: 0; text-align: center; }
:is(.kl-inhalt--breit, .kl-abschnitt) > .kl-fakten .kl-fakt__wert { font-size: clamp(2.2rem, 3.6vw, 3.2rem); color: #fff; margin-bottom: 10px; }
:is(.kl-inhalt--breit, .kl-abschnitt) > .kl-fakten .kl-fakt__text { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }

/* Banner: Foto über die volle Breite, dunkler Textkasten links darauf */
:is(.kl-inhalt--breit, .kl-abschnitt) > .kl-mockup { position: relative; display: block; min-height: 520px; margin-block: 4.5em; background: #141414; overflow: hidden; }
:is(.kl-inhalt--breit, .kl-abschnitt) > .kl-mockup > img, :is(.kl-inhalt--breit, .kl-abschnitt) > .kl-mockup > picture { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: cover; opacity: .9; }
:is(.kl-inhalt--breit, .kl-abschnitt) > .kl-mockup .kl-mockup__text { position: relative; max-width: 560px; margin: clamp(48px, 7vw, 88px) 0 clamp(48px, 7vw, 88px) max(var(--kl-rand), calc(50vw - 600px)); padding: clamp(28px, 4vw, 48px); background: rgba(20, 20, 20, .9); }
:is(.kl-inhalt--breit, .kl-abschnitt) > .kl-mockup .kl-mockup__titel { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
:is(.kl-inhalt--breit, .kl-abschnitt) > .kl-mockup .kl-mockup__knoepfe .kl-knopf { white-space: nowrap; }

/* Galerie: randlos über die volle Breite */
:is(.kl-inhalt--breit, .kl-abschnitt) > .kl-galerie { gap: 0; margin-block: 4em; }
:is(.kl-inhalt--breit, .kl-abschnitt) > .kl-galerie img { border-radius: 0; }

/* Vorteile: mittig, kleines Symbol, keine Linie oben */
.kl-inhalt--breit .kl-raster { text-align: center; gap: 48px 40px; margin-block: 2.5em 3.5em; }
.kl-inhalt--breit .kl-raster .kl-kachel { border-top: 0; padding-top: 0; }
.kl-inhalt--breit .kl-raster .kl-kachel::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 16px; background: var(--kl-orange); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M22 38 L6 10'/%3E%3Cpath d='M22 38 L16 6'/%3E%3Cpath d='M22 38 L28 6'/%3E%3Cpath d='M22 38 L38 10'/%3E%3Ccircle cx='22' cy='38' r='3' fill='black'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M22 38 L6 10'/%3E%3Cpath d='M22 38 L16 6'/%3E%3Cpath d='M22 38 L28 6'/%3E%3Cpath d='M22 38 L38 10'/%3E%3Ccircle cx='22' cy='38' r='3' fill='black'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.kl-inhalt--breit .kl-raster .kl-kachel h3 { font-size: 1.15rem; margin-bottom: 8px; }

/* Bild und Text: größer, abwechselnd links und rechts */
:is(.kl-inhalt--breit, .kl-abschnitt) > .kl-bild-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); margin-block: 4.5em; }
:is(.kl-inhalt--breit, .kl-abschnitt) > .kl-bild-text:nth-of-type(even) > :first-child { order: 2; }
:is(.kl-inhalt--breit, .kl-abschnitt) > .kl-bild-text img { border-radius: 0; aspect-ratio: 4 / 3; }
@media (max-width: 800px) {
  :is(.kl-inhalt--breit, .kl-abschnitt) > .kl-bild-text { grid-template-columns: minmax(0, 1fr); }
  :is(.kl-inhalt--breit, .kl-abschnitt) > .kl-bild-text:nth-of-type(even) > :first-child { order: 0; }
  :is(.kl-inhalt--breit, .kl-abschnitt) > .kl-mockup .kl-mockup__text { margin: 180px 0 0; max-width: none; }
  :is(.kl-inhalt--breit, .kl-abschnitt) > .kl-mockup .kl-mockup__knoepfe .kl-knopf { white-space: normal; }
}

/* Handy-Feinschliff der klassischen Seiten (Christian, 13.11.2026, Bildschirmfotos vom Handy) */
/* Zahlen-Band: Beschriftung in normaler Schreibweise, nie getrennt */
:is(.kl-inhalt--breit, .kl-abschnitt) > .kl-fakten .kl-fakt__text { text-transform: none; letter-spacing: 0; font-size: .92rem; font-weight: 500; line-height: 1.45; hyphens: manual; }
/* Bildunterschrift unter randlosen Fotos nicht am Bildschirmrand */
:is(.kl-inhalt--breit, .kl-abschnitt) > .kl-galerie figcaption { margin-inline: var(--kl-rand); }
@media (max-width: 800px) {
  :is(.kl-inhalt--breit, .kl-abschnitt) > .kl-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; padding-block: 56px; }
  :is(.kl-inhalt--breit, .kl-abschnitt) > .kl-fakten .kl-fakt__wert { font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.1; }
  :is(.kl-inhalt--breit, .kl-abschnitt) > .kl-fakten .kl-fakt__text { font-size: .85rem; }
  /* „Mehr dazu“: Wort über den Knöpfen, Knöpfe kompakt */
  .kl-artikel:not(.kl-artikel--ratgeber) .kl-inhalt .kl-mehr__titel { flex-basis: 100%; }
  .kl-artikel:not(.kl-artikel--ratgeber) .kl-inhalt .kl-mehr__knopf { padding: 10px 14px; font-size: .88rem; }
}

/* =========================================================================
   Normale Seiten mit Struktur (Christian, 13.11.2026: „leer und generisch – mehr Struktur, clean, premium, kurze Abstände“).
   Jeder H2-Abschnitt (kl26_abschnitte) ist ein Band, abwechselnd warm und weiß, in zwei Spalten:
   links die Überschrift (läuft mit), rechts der Text; Kacheln, Tabellen, Bilder und Ablauf über die volle Breite.
   ========================================================================= */
.kl-inhalt--breit:has(> .kl-abschnitt) { width: 100%; max-width: none; }
.kl-abschnitt { --spalte-links: minmax(0, 4fr); display: grid; grid-template-columns: var(--spalte-links) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; padding: clamp(48px, 5.5vw, 76px) max(var(--kl-rand), calc(50% - 600px)); }
.kl-abschnitt:nth-of-type(even) { background: var(--kl-flaeche); }
.kl-abschnitt > * { grid-column: 2; margin-inline: 0; max-width: none; min-width: 0; }
.kl-abschnitt > :first-child { margin-top: 0; }
.kl-abschnitt > :last-child { margin-bottom: 0; }
.kl-abschnitt--einstieg { padding-top: clamp(28px, 3vw, 40px); }

/* Überschrift links, läuft beim Scrollen mit */
.kl-abschnitt > h2 { grid-column: 1; grid-row: 1 / span 40; align-self: start; position: sticky; top: 104px; margin: 0; max-width: 16ch; font-size: clamp(1.6rem, 2.3vw, 2.15rem); text-align: left; }
.kl-abschnitt > h2::before { content: ""; display: block; width: 44px; height: 3px; margin-bottom: 18px; background: var(--kl-orange); }
.kl-abschnitt > h2::after { content: none; }
.kl-abschnitt > h2 + p { font-size: 1.12rem; line-height: 1.65; color: var(--kl-tinte); text-align: left; }
.kl-abschnitt > p, .kl-abschnitt > ul, .kl-abschnitt > ol { margin-bottom: 1em; }

/* Breite Bausteine über beide Spalten (stehen unter der Überschrift) */
.kl-abschnitt > :is(.kl-raster, .kl-tabelle, .kl-bild-text, .kl-galerie, .kl-fakten, .kl-mockup, .kl-referenzen, .kl-ablauf, .kl-clip, figure) { grid-column: 1 / -1; }
.kl-abschnitt:has(> :is(.kl-raster, .kl-tabelle, .kl-bild-text, .kl-galerie, .kl-fakten, .kl-mockup, .kl-referenzen, .kl-ablauf, .kl-clip, figure)) > h2 { position: static; grid-row: auto; }
.kl-abschnitt > :is(.kl-raster, .kl-tabelle, .kl-bild-text, .kl-referenzen, .kl-ablauf, .kl-clip) { margin-block: 28px; }

/* Kacheln als klare Karten mit Symbol, linksbündig */
.kl-abschnitt > .kl-raster { text-align: left; gap: 16px; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-abschnitt .kl-kachel { background: var(--kl-flaeche); border: 1px solid var(--kl-linie); border-top: 3px solid var(--kl-orange); border-radius: 4px; padding: 24px 22px 20px; }
.kl-abschnitt:nth-of-type(even) .kl-kachel { background: var(--kl-grund) !important; }
.kl-abschnitt .kl-raster .kl-kachel::before { margin: 0 0 14px; width: 34px; height: 34px; }
.kl-abschnitt .kl-kachel h3 { font-size: 1.08rem; margin: 0 0 6px; }
.kl-abschnitt .kl-kachel p { font-size: .95rem; margin: 0; color: var(--kl-text-leise); }

/* Häkchen-Listen als zweispaltiges Raster mit feinen Linien */
.kl-abschnitt > .kl-checkliste { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 0 32px; margin-block: 18px 22px; }
.kl-abschnitt > .kl-checkliste li { padding: 13px 0 13px 30px; border-bottom: 1px solid var(--kl-linie); }
.kl-abschnitt > .kl-checkliste li::before { top: 1.05em; }

/* Ablauf: Zeitleiste mit Punkten und Verbindungslinie */
.kl-abschnitt > .kl-ablauf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 16px; border: 0; padding: 0; text-align: left; counter-reset: schritt; }
.kl-abschnitt > .kl-ablauf > li { position: relative; padding: 22px 20px 20px; border: 1px solid var(--kl-linie); border-radius: 4px; background: var(--kl-flaeche); }
.kl-abschnitt:nth-of-type(even) > .kl-ablauf > li { background: var(--kl-grund); }
.kl-abschnitt > .kl-ablauf > li::before { position: static; display: grid; place-items: center; width: 38px; height: 38px; margin: 0 0 14px; border-radius: 50%; background: var(--kl-orange); color: #111; font: 800 1rem/1 var(--kl-sans); }
.kl-abschnitt > .kl-ablauf strong { font-size: 1.05rem; margin-bottom: 6px; }

/* Tabelle über die volle Breite, ruhig */
.kl-abschnitt > .kl-tabelle { max-width: none; }

/* Knöpfe, Hinweise, Häkchen-Zeile in der rechten Spalte, linksbündig */
.kl-artikel:not(.kl-artikel--ratgeber) .kl-abschnitt > .kl-mehr { justify-content: flex-start; margin: 6px 0 0; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-abschnitt > .kl-mehr .kl-mehr__titel { flex-basis: auto; text-align: left; }
.kl-abschnitt > .kl-chips { justify-content: flex-start; }
.kl-abschnitt > .kl-infobox { margin-block: 22px; }

/* Bild und Text im Band: abwechselnd */
.kl-abschnitt > .kl-bild-text { max-width: none; }
.kl-abschnitt:nth-of-type(even) > .kl-bild-text > :first-child { order: 2; }
.kl-abschnitt > .kl-bild-text:nth-of-type(even) > :first-child { order: 0; }

/* Einstieg ohne Überschrift: Text über die volle Breite in zwei Spalten-Raster */
.kl-abschnitt--einstieg > * { grid-column: 1 / -1; }
.kl-abschnitt--einstieg > p:first-of-type { font-size: 1.22rem; line-height: 1.6; color: var(--kl-tinte); max-width: 52rem; }
.kl-abschnitt--einstieg > p { max-width: 52rem; }

/* Kopf der Seite: Autor und „Kurz gesagt“ als Kasten, Kernpunkte zweispaltig */
.kl-artikel:not(.kl-artikel--ratgeber) .kl-ratgeber-kopf--breit { width: min(1200px, 100% - 2 * var(--kl-rand)); max-width: none; margin-inline: auto; padding-top: 28px; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-ratgeber-kopf--breit .kl-kurz { background: var(--kl-flaeche); border: 1px solid var(--kl-linie); border-left: 3px solid var(--kl-orange); border-radius: 4px; padding: 26px 30px; margin: 18px 0 0; max-width: none; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-ratgeber-kopf--breit .kl-kurz__punkte { columns: 2 300px; column-gap: 40px; margin-bottom: 0; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-ratgeber-kopf--breit .kl-kurz__punkte li { break-inside: avoid; }

/* Häufige Fragen auf normalen Seiten: links Überschrift, rechts Fragen */
.kl-artikel:not(.kl-artikel--ratgeber) > .kl-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 80px); max-width: 1200px; margin: clamp(48px, 5.5vw, 76px) auto; border-top: 0; }
.kl-artikel:not(.kl-artikel--ratgeber) > .kl-faq > h2 { grid-column: 1; grid-row: 1 / span 40; margin: 0; font-size: clamp(1.6rem, 2.3vw, 2.15rem); }
.kl-artikel:not(.kl-artikel--ratgeber) > .kl-faq > h2::before { content: ""; display: block; width: 44px; height: 3px; margin-bottom: 18px; background: var(--kl-orange); }
.kl-artikel:not(.kl-artikel--ratgeber) > .kl-faq > details { grid-column: 2; }
.kl-artikel:not(.kl-artikel--ratgeber) > .kl-faq > details:first-of-type { border-top: 1px solid var(--kl-linie); }

@media (max-width: 900px) {
  .kl-abschnitt, .kl-artikel:not(.kl-artikel--ratgeber) > .kl-faq { grid-template-columns: minmax(0, 1fr); }
  .kl-abschnitt > *, .kl-abschnitt > h2, .kl-artikel:not(.kl-artikel--ratgeber) > .kl-faq > * { grid-column: 1 !important; grid-row: auto !important; position: static; }
  .kl-abschnitt > h2 { margin-bottom: 18px; max-width: none; }
  .kl-artikel:not(.kl-artikel--ratgeber) > .kl-faq > h2 { margin-bottom: 18px; }
  .kl-abschnitt:nth-of-type(even) > .kl-bild-text > :first-child { order: 0; }
}

/* =========================================================================
   Feinschliff nach Christians Durchgang durch „Lasershow in Bayern“ (13.11.2026): weniger zusammengewürfelt.
   ========================================================================= */
.kl-abschnitt { --abschnitt-grund: var(--kl-grund); --abschnitt-karte: var(--kl-flaeche); }
.kl-abschnitt:nth-of-type(even) { --abschnitt-grund: var(--kl-flaeche); --abschnitt-karte: var(--kl-grund); }

/* Überschrift über die volle Breite, wenn direkt ein breiter Baustein folgt – keine Lücke rechts daneben */
.kl-abschnitt > h2:has(+ :is(.kl-raster, .kl-tabelle, .kl-bild-text, .kl-galerie, .kl-fakten, .kl-mockup, .kl-referenzen, .kl-ablauf, .kl-clip, figure, .kl-cta-box)) { grid-column: 1 / -1; grid-row: auto; position: static; max-width: 30ch; margin-bottom: 26px; }
.kl-abschnitt:has(> .kl-cta-box) > h2 { position: static; grid-row: auto; }

/* Kacheln: kein Symbol mehr („komisches Icon“), klare Karte mit oranger Oberkante */
.kl-inhalt--breit .kl-abschnitt .kl-raster .kl-kachel::before { content: none; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-abschnitt .kl-kachel { background: var(--abschnitt-karte) !important; padding: 26px 26px 24px; }
.kl-abschnitt .kl-kachel h3 { font-size: 1.15rem; margin-bottom: 8px; }

/* Referenz mit Bild: Bild und Text als eine Karte */
.kl-abschnitt > .kl-bild-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; align-items: stretch; background: var(--abschnitt-karte); border: 1px solid var(--kl-linie); }
.kl-abschnitt > .kl-bild-text > img, .kl-abschnitt > .kl-bild-text > picture { height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kl-abschnitt > .kl-bild-text > div { align-self: center; padding: clamp(24px, 3.5vw, 48px); }
.kl-abschnitt > .kl-bild-text h3 { margin-top: 0; font-size: clamp(1.3rem, 1.8vw, 1.6rem); }

/* Anfrage-Kasten: über die volle Breite, Text links, Knöpfe rechts */
.kl-abschnitt > .kl-cta-box { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 48px; margin-block: 28px; padding: clamp(26px, 3vw, 38px) clamp(24px, 3.5vw, 44px); border: 0; border-top: 3px solid var(--kl-orange); border-radius: 4px; }
.kl-abschnitt > .kl-cta-box > .kl-cta-box__titel, .kl-abschnitt > .kl-cta-box > .kl-cta-box__text { grid-column: 1; margin: 0; }
.kl-abschnitt > .kl-cta-box > .kl-cta-box__titel { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.kl-abschnitt > .kl-cta-box > .kl-cta-box__knoepfe { grid-column: 2; grid-row: 1 / span 2; margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

/* Anlass-Etiketten farbig hinterlegt */
.kl-artikel:not(.kl-artikel--ratgeber) .kl-abschnitt > .kl-chips { gap: 10px; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-abschnitt > .kl-chips li { background: var(--kl-orange-hauch); padding: 9px 16px 9px 36px; border-radius: 3px; border: 1px solid #f6dcb4; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-abschnitt > .kl-chips li::before { left: 15px; top: 50%; margin-top: -6px; }

/* Fotos: gleich groß in einer Reihe, im Raster statt randlos */
.kl-inhalt--breit .kl-abschnitt > .kl-galerie, .kl-inhalt--breit .kl-abschnitt > .kl-galerie:has(> figure:nth-child(3):last-child) { width: auto; margin: 28px 0 0; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); grid-auto-rows: auto; gap: 12px; }
.kl-inhalt--breit .kl-abschnitt > .kl-galerie figure:first-child { grid-row: auto; }
.kl-inhalt--breit .kl-abschnitt > .kl-galerie img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.kl-inhalt--breit .kl-abschnitt > .kl-galerie figcaption { margin-inline: 0; }

/* Ablauf als Zeitleiste: Linie mit Nummernpunkten, keine Kästen */
.kl-abschnitt > .kl-ablauf { gap: 0; margin-top: 36px; }
.kl-abschnitt > .kl-ablauf > li, .kl-abschnitt:nth-of-type(even) > .kl-ablauf > li { background: none; border: 0; border-top: 2px solid var(--kl-linie); border-radius: 0; margin-top: 20px; padding: 0 28px 0 0; }
.kl-abschnitt > .kl-ablauf > li::before { margin: -21px 0 18px; width: 40px; height: 40px; box-shadow: 0 0 0 6px var(--abschnitt-grund); }
.kl-abschnitt > .kl-ablauf strong { font-size: 1.12rem; }

/* Projekte: so viele Spalten wie Projekte, Karten mit Text */
.kl-abschnitt > .kl-referenzen { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-abschnitt .kl-referenz { background: var(--abschnitt-karte); border: 1px solid var(--kl-linie); }
.kl-abschnitt .kl-referenz img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.kl-abschnitt .kl-referenz__text { padding: 18px 20px 20px !important; }

/* „Mehr dazu“ mit drei oder mehr Zielen (z. B. Städte): Kacheln statt Knopfreihe */
.kl-artikel:not(.kl-artikel--ratgeber) .kl-abschnitt > .kl-mehr:has(> a:nth-of-type(3)) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; max-width: none; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-abschnitt > .kl-mehr:has(> a:nth-of-type(3)) .kl-mehr__titel { flex-basis: 100%; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-abschnitt > .kl-mehr:has(> a:nth-of-type(3)) .kl-mehr__knopf { flex: 1 1 220px; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-abschnitt > .kl-mehr:has(> a:nth-of-type(3)) .kl-mehr__knopf { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; background: var(--abschnitt-karte); color: var(--kl-tinte); border: 1px solid var(--kl-linie); border-left: 3px solid var(--kl-orange); font-size: 1rem; }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-abschnitt > .kl-mehr:has(> a:nth-of-type(3)) .kl-mehr__knopf::after { color: var(--kl-orange-text); }
.kl-artikel:not(.kl-artikel--ratgeber) .kl-abschnitt > .kl-mehr:has(> a:nth-of-type(3)) .kl-mehr__knopf:hover { background: var(--kl-tinte); color: #fff; }

@media (max-width: 900px) {
  .kl-abschnitt > .kl-bild-text { grid-template-columns: minmax(0, 1fr); }
  .kl-abschnitt > .kl-cta-box { grid-template-columns: minmax(0, 1fr); }
  .kl-abschnitt > .kl-cta-box > .kl-cta-box__knoepfe { grid-column: 1; grid-row: auto; align-items: flex-start; margin-top: 14px; }
  /* Zeitleiste am Handy senkrecht */
  .kl-abschnitt > .kl-ablauf > li, .kl-abschnitt:nth-of-type(even) > .kl-ablauf > li { border-top: 0; border-left: 2px solid var(--kl-linie); margin: 0 0 0 19px; padding: 0 0 28px 34px; }
  .kl-abschnitt > .kl-ablauf > li:last-child { padding-bottom: 0; }
  .kl-abschnitt > .kl-ablauf > li::before { position: absolute; left: -21px; top: 0; margin: 0; }
}

/* Anlass-Kacheln mit echtem Show-Foto (kl26_bebildern, 13.11.2026) */
.kl-artikel:not(.kl-artikel--ratgeber) .kl-abschnitt .kl-kachel--foto { padding: 0; overflow: hidden; border-top: 1px solid var(--kl-linie); display: flex; flex-direction: column; }
.kl-abschnitt .kl-kachel--foto > .kl-kachel__bild { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-radius: 0; margin: 0; border-bottom: 3px solid var(--kl-orange); }
.kl-abschnitt .kl-kachel--foto > :not(img) { margin-inline: 22px; }
.kl-abschnitt .kl-kachel--foto > h3 { margin-top: 18px; }
.kl-abschnitt .kl-kachel--foto > :last-child { margin-bottom: 22px; }
.kl-abschnitt > .kl-raster--anlaesse { gap: 20px; }

/* Ablauf mit Foto: Bild links (steht fest – lief bis 13.11.2026 mit und rutschte über das Band darunter), Zeitleiste senkrecht rechts */
.kl-abschnitt > .kl-ablauf-foto { grid-column: 1; margin: 28px 0 0; align-self: start; }
.kl-abschnitt > .kl-ablauf-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; display: block; }
.kl-abschnitt > .kl-ablauf-foto figcaption { margin-top: 10px; font-size: .86rem; color: var(--kl-text-leise); }
.kl-abschnitt > h2:has(+ .kl-ablauf-foto) { grid-column: 1 / -1; grid-row: auto; position: static; max-width: 30ch; margin-bottom: 0; }
.kl-abschnitt > .kl-ablauf-foto + .kl-ablauf { grid-column: 2; display: block; margin-top: 28px; }
.kl-abschnitt > .kl-ablauf-foto + .kl-ablauf > li, .kl-abschnitt:nth-of-type(even) > .kl-ablauf-foto + .kl-ablauf > li { border-top: 0; border-left: 2px solid var(--kl-linie); margin: 0 0 0 19px; padding: 0 0 30px 38px; }
.kl-abschnitt > .kl-ablauf-foto + .kl-ablauf > li:last-child { padding-bottom: 4px; }
.kl-abschnitt > .kl-ablauf-foto + .kl-ablauf > li::before { position: absolute; left: -21px; top: -4px; margin: 0; }
@media (max-width: 900px) {
  .kl-abschnitt > .kl-ablauf-foto { position: static; }
  .kl-abschnitt > .kl-ablauf-foto img { aspect-ratio: 16 / 10; }
}

/* Anfrage-Knopf am Ende eines Ablaufs (kl26_lesefluss, 13.11.2026) */
.kl-abschnitt > .kl-abschnitt-knopf { margin: 26px 0 0; }

/* Bild + Text am Handy: Überschrift direkt unter dem Foto, weniger Luft um den Block (Christian, 13.11.2026) */
@media (max-width: 800px) {
  .kl-bild-text, .kl-inhalt--breit > .kl-bild-text { gap: 14px; margin-block: 2.2em; }
  .kl-bild-text h3 { margin-top: 0; }
}

/* Icons vor den Kachel-Überschriften (inc/icons.php) */
.kl-kachel__icon { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; background: #141414; color: var(--kl-orange); }
.kl-kachel__icon svg { width: 24px; height: 24px; }

/* Cookie-Banner (Borlabs Cookie 3) im Klanglichter-Look: dunkel, Orange, Inter. Am Handy als Leiste von unten.
   Christian 13.11.2026: „Cookiebanner anpassen, dass er schön aussieht, Startseite Handyansicht“. Texte bleiben (rechtlich). */
body #BorlabsCookieBox .brlbs-cmpnt-dialog{background:#141414!important;color:#e9e6df!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:14px!important;box-shadow:0 24px 60px rgba(0,0,0,.55)!important}
body #BorlabsCookieBox .brlbs-cmpnt-dialog *{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important}
body #BorlabsCookieBox .brlbs-cmpnt-dialog .brlbs-cmpnt-dialog-box{background:transparent!important;border:0!important;box-shadow:none!important}
body #BorlabsCookieBox .brlbs-cmpnt-dialog img{display:none!important}
body #BorlabsCookieBox .brlbs-cmpnt-dialog-box-header{border-color:rgba(242,148,0,.55)!important}
body #BorlabsCookieBox h2.brlbs-cmpnt-dialog-entrance-headline{color:#fff!important;font-size:20px!important;font-weight:800!important;letter-spacing:-.01em!important}
body #BorlabsCookieBox .brlbs-cmpnt-dialog p{color:#bdb8ae!important;font-size:12.5px!important;line-height:1.5!important}
body #BorlabsCookieBox .brlbs-cmpnt-dialog a,body #BorlabsCookieBox .brlbs-cmpnt-dialog .brlbs-cmpnt-link{color:#f29400!important}
body #BorlabsCookieBox .brlbs-cmpnt-dialog hr,body #BorlabsCookieBox .brlbs-cmpnt-with-separator{border-color:rgba(255,255,255,.12)!important}
body #BorlabsCookieBox .brlbs-cmpnt-dialog-box-header.brlbs-cmpnt-with-separator{border-color:rgba(242,148,0,.55)!important}
body #BorlabsCookieBox .brlbs-cmpnt-label,body #BorlabsCookieBox .brlbs-cmpnt-consent-list-content{color:#fff!important;font-size:14px!important}
body #BorlabsCookieBox input[type=checkbox]{accent-color:#f29400!important}
body #BorlabsCookieBox button.brlbs-cmpnt-btn{border-radius:8px!important;font-size:14px!important;font-weight:700!important;padding:13px 16px!important}
body #BorlabsCookieBox button.brlbs-btn-accept-all{background:#f29400!important;color:#111!important;border:0!important}
body #BorlabsCookieBox button.brlbs-btn-save{background:transparent!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.55)!important}
body #BorlabsCookieBox button.brlbs-cmpnt-btn-preferences{background:transparent!important;color:#e9e6df!important;border:1.5px solid rgba(255,255,255,.25)!important}
body #BorlabsCookieBox .brlbs-cmpnt-close-button{color:#fff!important}
body #BorlabsCookieBox .brlbs-cmpnt-dialog-footer{background:#0d0d0d!important;border-color:rgba(255,255,255,.1)!important}
@media (max-width:640px){
  body #BorlabsCookieBox .brlbs-dialog-positioner{align-items:flex-end!important;padding:0!important}
  body #BorlabsCookieBox .brlbs-cmpnt-dialog{border-radius:16px 16px 0 0!important;width:100%!important;max-width:100%!important;margin:0!important;max-height:88vh!important;overflow-y:auto!important}
  body #BorlabsCookieBox .brlbs-cmpnt-dialog-entrance-description{max-height:28vh!important;overflow-y:auto!important;padding-right:6px!important;margin-bottom:8px!important}
  body #BorlabsCookieBox h2.brlbs-cmpnt-dialog-entrance-headline{font-size:18px!important}
  body #BorlabsCookieBox button.brlbs-cmpnt-btn{padding:12px 14px!important}
  body #BorlabsCookieBox .brlbs-cmpnt-dialog-footer{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))!important}
}

/* PC-Runde 13.11.2026 (Christian: „Foto verschiebt sich mit“, „Tipp hängt in der Luft“, „schaut leer aus“).
   Nur ab 901 px – die Handy-Ansicht bleibt unverändert. Test: tests/test_pc_runde.py */
@media (min-width: 901px) {
  /* Foto neben dem Ablauf: steht fest und ist so hoch wie die Zeitleiste (Bild-Plugin: live im <picture>) */
  .kl-abschnitt > .kl-ablauf-foto { position: relative; align-self: stretch; margin-bottom: 28px; min-height: 380px; max-height: 720px; overflow: hidden; }
  .kl-abschnitt > .kl-ablauf-foto > :is(img, picture) { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .kl-abschnitt > .kl-ablauf-foto > picture > img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; display: block; }

  /* Überschrift steht fest, sobald ein Band oder Karten folgen – sonst rutschen die hinter die mitlaufende Überschrift */
  .kl-abschnitt:has(> :is(.kl-infobox, .kl-checkliste)) > h2 { position: static; grid-row: auto; }
  .kl-abschnitt > :is(h2, h3):has(+ .kl-checkliste) { grid-column: 1 / -1; max-width: 30ch; margin-bottom: 0; }

  /* Tipp-Kasten: Band über die volle Breite im Raster der Seite – Titel links, Text in der Textspalte */
  .kl-abschnitt > .kl-infobox { grid-column: 1 / -1; max-width: none; display: grid; grid-template-columns: subgrid; align-items: start; margin-block: 30px; padding: 28px 32px 28px 28px; border-left: 3px solid var(--kl-orange); }
  .kl-abschnitt > .kl-infobox:last-child { margin-bottom: 0; }
  .kl-abschnitt > .kl-infobox::before { left: 28px; top: 28px; }
  .kl-abschnitt > .kl-infobox > .kl-infobox__titel { grid-column: 1; grid-row: 1 / span 20; margin: 1px 0 0 !important; padding-left: 44px; font-size: 1.3rem; }
  .kl-abschnitt > .kl-infobox > :not(.kl-infobox__titel) { grid-column: 2; margin-top: 0; }

  /* Checkliste: Karten über die volle Breite, drei je Reihe; die letzte Reihe füllt sich immer */
  .kl-abschnitt > .kl-checkliste { grid-column: 1 / -1; max-width: none; padding: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-block: 28px; }
  .kl-abschnitt > .kl-checkliste:last-child { margin-bottom: 0; }
  .kl-abschnitt > .kl-checkliste > li { grid-column: span 2; padding: 20px 24px 20px 58px; background: var(--abschnitt-karte); border: 1px solid var(--kl-linie); border-left: 3px solid var(--kl-orange); }
  .kl-abschnitt > .kl-checkliste > li::before { left: 24px; top: calc(20px + .5em); }
  .kl-abschnitt > .kl-checkliste > li:only-child { grid-column: span 6; }
  .kl-abschnitt > .kl-checkliste > li:nth-child(3n+1):nth-last-child(2), .kl-abschnitt > .kl-checkliste > li:nth-child(3n+2):last-child { grid-column: span 3; }
  .kl-abschnitt > .kl-checkliste > li:nth-child(3n+1):nth-last-child(4), .kl-abschnitt > .kl-checkliste > li:nth-child(3n+2):nth-last-child(3),
  .kl-abschnitt > .kl-checkliste > li:nth-child(3n):nth-last-child(2), .kl-abschnitt > .kl-checkliste > li:nth-child(3n+1):last-child { grid-column: span 3; }
}