/* Klanglichter 2026 – helle Gestaltung im Stil von Agenturfreunde24 (Christian, 13.11.2026).
   Liegt über komponenten.css: warmer heller Grund, weiße Karten mit feiner Linie, dunkle Blöcke für Fotos und Abschluss,
   kleine orange Etiketten, Playfair kursiv für hervorgehobene Wörter. Keine Nummern-Kacheln, keine Strich-Flut. */

/* ---------- Knöpfe ---------- */
.kl-knopf { border-radius: var(--kl-radius); font: 650 .97rem/1 var(--kl-sans); padding: 1em 1.5em; }
.kl-knopf--hell, .kl-knopf--leuchtend { background: var(--kl-orange); color: #121212; }
.kl-knopf--hell:hover, .kl-knopf--leuchtend:hover { background: #ffa51f; color: #121212; }
.kl-knopf--hell::after { content: "→"; font-weight: 500; }
.kl-knopf--glas { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.kl-knopf--glas:hover { background: #fff; color: #121212; }
.kl-glas { background: var(--kl-flaeche); border: 1px solid var(--kl-linie); }

/* ---------- Kopfleiste: hell und ruhig ---------- */
.kl-kopf, .kl-kopf.ist-gescrollt { background: rgba(245, 243, 239, .96); box-shadow: 0 1px 0 var(--kl-linie); backdrop-filter: saturate(1.2) blur(8px); }
.kl-kopf__innen { height: 72px; }
.kl-marke { color: var(--kl-tinte); font: 800 1.2rem/1 var(--kl-sans); letter-spacing: -.02em; }
.kl-marke img { width: 30px; height: 30px; }
.kl-menue__punkt > a { color: var(--kl-tinte); font-size: .92rem; font-weight: 500; }
.kl-menue__punkt > a:hover { color: var(--kl-orange-text); text-decoration: none; }
.kl-menue__unter { background: var(--kl-flaeche); border: 1px solid var(--kl-linie); box-shadow: 0 12px 30px rgba(18, 18, 18, .08); }
.kl-menue__unter a { color: var(--kl-text); }
.kl-menue__unter a:hover { background: var(--kl-grund); color: var(--kl-tinte); }
.kl-kopf .kl-knopf--hell { background: var(--kl-tinte); color: #fff; padding: .85em 1.2em; font-size: .9rem; }
.kl-kopf .kl-knopf--hell::after { content: none; }
.kl-kopf .kl-knopf--hell:hover { background: #2e2e30; color: #fff; }
.kl-menue-knopf { border-color: var(--kl-linie); }
.kl-menue-knopf__linie, .kl-menue-knopf__linie::before, .kl-menue-knopf__linie::after { background: var(--kl-tinte); }
@media (max-width: 1080px) { .kl-menue { inset: 72px 0 auto; background: var(--kl-grund); border-bottom: 1px solid var(--kl-linie); } }

/* ---------- Kopfbild (dunkel, Laserfotos) ---------- */
.kl-hero--voll, .kl-hero--foto { padding-top: 132px; }
.kl-hero__titel { text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
.kl-hero--voll .kl-hero__titel::before, .kl-hero--foto .kl-hero__titel::before { content: none; }
.kl-hero--voll .kl-hero__titel, .kl-hero--foto .kl-hero__titel { color: #fff; }
.kl-hero__unter { color: rgba(255, 255, 255, .88); }
.kl-hero--schlicht { padding: 132px 0 8px; }
.kl-hero--schlicht .kl-hero__titel { color: var(--kl-tinte); text-shadow: none; }
.kl-hero--schlicht .kl-hero__unter { color: var(--kl-text-leise); text-shadow: none; }

/* Ratgeber-Band: dunkel, Text links, Titelfoto als Karte rechts */
.kl-hero--band { background: var(--kl-nacht); padding: 120px 0 56px; color: #f1efea; }
.kl-hero__band { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.kl-hero--band .kl-hero__text { width: auto; margin: 0; }
.kl-hero__zeile { margin: 0 0 18px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--kl-orange); }
.kl-hero--band .kl-hero__titel { color: #fff; font-size: clamp(2rem, 3.6vw, 3rem); text-shadow: none; max-width: none; }
.kl-hero--band .kl-hero__titel em { color: #ffab2e; }
.kl-hero--band .kl-hero__unter { color: rgba(241, 239, 234, .78); text-shadow: none; font-size: 1.08rem; }
.kl-hero__karte { margin: 0; }
.kl-hero__karte img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--kl-radius); }
@media (max-width: 900px) { .kl-hero__band { grid-template-columns: minmax(0, 1fr); } .kl-hero--band { padding-top: 104px; } }

/* ---------- Abschnitte und Artikel ---------- */
.kl-artikel { padding: 56px 0 24px; }
.kl-abschnitt-unter, .kl-intro__text p { color: var(--kl-text-leise); }
.kl-intro__bild::before { content: none; }
.kl-anlaesse li { color: var(--kl-tinte); }
.kl-inhalt .kl-einleitung { color: var(--kl-tinte); font-size: clamp(1.12rem, 1.5vw, 1.28rem); }

/* Karten: weiß, feine Linie, kleines oranges Etikett */
.kl-leistung, .kl-referenz { background: var(--kl-flaeche); border: 1px solid var(--kl-linie); border-radius: var(--kl-radius); color: var(--kl-text-leise); }
.kl-leistung__titel, .kl-referenz__titel, .kl-karte__titel { color: var(--kl-tinte); font-weight: 750; }
.kl-leistung__punkte { color: var(--kl-text-leise); }
.kl-leistung__mehr, .kl-referenz:hover .kl-referenz__titel { color: var(--kl-orange-text); }
.kl-karte { background: var(--kl-flaeche); border: 1px solid var(--kl-linie); border-radius: var(--kl-radius); }
.kl-karte__bild { border-radius: 0; }
.kl-karte__text { padding: 16px 18px 20px; }
.kl-karte__auszug { color: var(--kl-text-leise); }
.kl-karte:hover .kl-karte__titel { text-decoration-color: var(--kl-orange); }
.kl-film__eintrag { color: #fff; }

/* Kacheln: ruhige weiße Karten, ohne Nummern und Balken */
.kl-kachel { background: var(--kl-flaeche); border: 1px solid var(--kl-linie); border-radius: var(--kl-radius); padding: 24px 22px; }
.kl-kachel::before, .kl-kachel::after { content: none; }
.kl-kachel:hover { border-color: #d6cfc2; transform: none; }
.kl-kachel h3 { color: var(--kl-tinte); }

/* Etiketten statt oranger Kästchen */
.kl-chips li, .kl-chip { background: var(--kl-flaeche-2); color: var(--kl-tinte); border: 0; font-weight: 600; font-size: .88rem; padding: 7px 13px; border-radius: var(--kl-radius); }
.kl-chip:hover, .kl-chip:focus-visible { background: var(--kl-tinte); color: #fff; }
.kl-ratgeber-meta__kat { background: none; color: var(--kl-orange-text); padding: 0; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }

/* Fotos und Unterschriften */
.kl-bild figcaption, .kl-clip figcaption { border-left: 0; padding-left: 0; color: var(--kl-text-blass); }
.kl-hinweis { background: var(--kl-flaeche); }

/* Banner: dunkle Karte mit Foto (wie die dunklen Blöcke bei Agenturfreunde) */
.kl-mockup { background: var(--kl-nacht); border-radius: var(--kl-radius); }
.kl-mockup::before { content: none; }
.kl-mockup__titel, .kl-mockup__text .kl-mockup__titel { color: #fff; }

/* Infobox: zarter oranger Grund */
.kl-infobox { background: var(--kl-orange-hauch); border-radius: var(--kl-radius); }
.kl-infobox__titel { color: var(--kl-tinte); }

/* Zahlen: dunkles Band wie bei Agenturfreunde */
.kl-fakten { gap: 0; background: var(--kl-nacht); border-radius: var(--kl-radius); overflow: hidden; }
.kl-fakt { background: none; border-left: 1px solid var(--kl-linie); padding: 24px 22px; }
.kl-fakt:first-child { border-left: 0; }
.kl-fakt__wert, .kl-fakten .kl-fakt__wert { color: #fff; }
.kl-fakten--band { margin: 0 0 80px; }
.kl-fakten--band .kl-fakt__wert { color: #fff; }
.kl-fakten--band .kl-fakt:first-child { padding-left: 24px; }

/* Tabellen: weiß, dunkler Kopf */
.kl-tabelle table { background: var(--kl-flaeche); border: 1px solid var(--kl-linie); border-radius: var(--kl-radius); }
.kl-tabelle caption { color: var(--kl-tinte); }
.kl-inhalt .kl-tabelle thead th { background: var(--kl-tinte); color: #fff; }
.kl-inhalt .kl-tabelle tbody tr:nth-child(even) td { background: #faf8f4; }
@media (max-width: 640px) {
  .kl-tabelle table { background: none; border: 0; }
  .kl-inhalt .kl-tabelle tr { background: var(--kl-flaeche); border: 1px solid var(--kl-linie); border-left: 3px solid var(--kl-orange); }
  .kl-inhalt .kl-tabelle tr > :first-child { color: var(--kl-tinte); }
  .kl-inhalt .kl-tabelle td[data-label]::before, .kl-inhalt .kl-tabelle tbody th[data-label]::before { color: var(--kl-orange-text); }
}

/* Merksatz: kursiv in Playfair */
.kl-inhalt .kl-zitat { color: var(--kl-tinte); border-left: 3px solid var(--kl-orange); }
.kl-zitat p { font: italic 700 clamp(1.3rem, 2vw, 1.6rem)/1.35 var(--kl-serif); letter-spacing: 0; }

/* Begriffe und Verweise */
.kl-begriffe li { background: var(--kl-flaeche); border: 1px solid var(--kl-linie); border-radius: var(--kl-radius); color: var(--kl-text-leise); }
.kl-begriffe li strong { color: var(--kl-tinte); }
.kl-inhalt .kl-mehr__knopf { color: var(--kl-tinte); border-color: var(--kl-linie); background: var(--kl-flaeche); }
.kl-inhalt .kl-mehr__knopf::after { content: "↗"; color: var(--kl-orange-text); }
.kl-inhalt .kl-mehr__knopf:hover, .kl-inhalt .kl-mehr__knopf:focus-visible { background: var(--kl-tinte); border-color: var(--kl-tinte); color: #fff; }
.kl-inhalt .kl-mehr__knopf:hover::after { color: #fff; }

/* Anfrage-Kasten im Text: dunkel */
.kl-cta-box { background: var(--kl-nacht); border: 0; border-top: 3px solid var(--kl-orange); }
.kl-cta-box__titel { color: #fff; }
.kl-cta-box__tel { color: #fff; }

/* „Kurz gesagt“ wie „Das Wichtigste“ */
.kl-kurz { border-left: 3px solid var(--kl-orange); padding-left: 22px; }
.kl-kurz__titel { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--kl-orange-text); }
.kl-kurz p { color: var(--kl-tinte); font-weight: 600; font-size: 1.08rem; }
.kl-kurz__punkte { color: var(--kl-text-leise); }
.kl-verzeichnis__titel, .kl-quellen__titel, .kl-autor__name, .kl-autor-kopf__person, .kl-faq__punkt summary, .kl-stimme__name { color: var(--kl-tinte); }
.kl-verzeichnis a:hover, .kl-quellen li:target { color: var(--kl-tinte); }
.kl-autor-kopf__bild, .kl-autor__bild--foto { border-color: var(--kl-flaeche); box-shadow: 0 0 0 1px var(--kl-linie); }
.kl-autor__bild { background: var(--kl-flaeche-2); }
.kl-ablauf > li::before { color: #121212; }

/* Abschluss-Anfrage: dunkler Block */
.kl-cta { padding: 24px 0 80px; }
.kl-cta__innen { background: var(--kl-nacht); border: 0; border-radius: var(--kl-radius); padding: clamp(32px, 5vw, 64px); }
.kl-cta h2 { color: #fff; }

/* Fuß: dunkel */
.kl-fuss { background: var(--kl-nacht); border-top: 0; }
.kl-fuss__titel { color: #fff; }
.kl-fuss ul a:hover { color: #fff; }

/* Anfrage-Leiste am Handy: hell */
@media (max-width: 760px) {
  .kl-anfrage-leiste { background: rgba(245, 243, 239, .97); border-top: 1px solid var(--kl-linie); }
  .kl-anfrage-leiste__tel { color: var(--kl-tinte); border-color: var(--kl-tinte); }
  .kl-anfrage-leiste .kl-knopf--hell::after { content: none; }
}

/* Formular (Gravity Forms) hell */
.kl-artikel--anfrage .gform_wrapper { background: var(--kl-flaeche); border: 1px solid var(--kl-linie); }
.gform_wrapper .gfield_label, .gform_wrapper legend { color: var(--kl-tinte) !important; }
.gform_wrapper input:not([type=submit]):not([type=checkbox]):not([type=radio]), .gform_wrapper textarea, .gform_wrapper select {
  background: #fff !important; border: 1px solid #d3cdc2 !important; color: var(--kl-tinte) !important; }
.gform_wrapper input:focus, .gform_wrapper textarea:focus, .gform_wrapper select:focus { border-color: var(--kl-tinte) !important; }
.gform_wrapper .gform_button, .gform_wrapper .gform_next_button, .gform_wrapper input[type=submit] { color: #121212 !important; }
.gform_wrapper .gform_previous_button { color: var(--kl-tinte) !important; border-color: #d3cdc2 !important; }
.gform_wrapper .validation_message, .gform_wrapper .gfield_validation_message { color: #b42318 !important; }
.kl-seiten .current { color: #121212; }

/* =========================================================================
   Ratgeber wie bei Agenturfreunde: links „In diesem Beitrag“, rechts der Text
   ========================================================================= */
.kl-artikel--ratgeber { padding-top: 48px; }
.kl-ratgeber-raster { display: grid; grid-template-columns: 250px minmax(0, 720px); gap: clamp(32px, 5vw, 80px); justify-content: center; align-items: start; }
.kl-ratgeber-seite { position: sticky; top: 96px; }
.kl-seitenverzeichnis { border-top: 2px solid var(--kl-orange); padding-top: 14px; }
.kl-seitenverzeichnis__titel { margin: 0 0 12px; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--kl-tinte); }
.kl-seitenverzeichnis ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kl-seitenverzeichnis a { display: grid; grid-template-columns: 28px 1fr; gap: 4px; padding: 5px 0; font-size: .86rem; line-height: 1.4; color: var(--kl-text-leise); text-decoration: none; }
.kl-seitenverzeichnis a span { color: var(--kl-orange-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.kl-seitenverzeichnis a:hover { color: var(--kl-tinte); }
.kl-ratgeber-haupt .kl-schmal, .kl-ratgeber-haupt .kl-breite { width: 100%; margin-inline: 0; }
.kl-ratgeber-haupt .kl-schmal > .kl-mockup, .kl-ratgeber-haupt .kl-schmal > .kl-galerie, .kl-ratgeber-haupt .kl-schmal > .kl-bild--breit,
.kl-ratgeber-haupt .kl-schmal > .kl-clip { width: 100%; left: auto; transform: none; }
.kl-ratgeber-haupt .kl-verzeichnis { display: none; }
.kl-ratgeber-haupt .kl-faq { max-width: none; }
/* Abschnitte nummeriert wie bei Agenturfreunde (01, 02 …) mit feiner Trennlinie */
.kl-artikel--ratgeber .kl-inhalt { counter-reset: abschnitt; }
.kl-artikel--ratgeber .kl-inhalt > h2 { counter-increment: abschnitt; padding-top: 2em; border-top: 1px solid var(--kl-linie); margin-top: 2.2em; }
.kl-artikel--ratgeber .kl-inhalt > h2::before { content: counter(abschnitt, decimal-leading-zero); display: block; margin-bottom: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: var(--kl-orange-text); }
.kl-artikel--ratgeber .kl-inhalt > h2:first-of-type { margin-top: 1.2em; }
@media (max-width: 1000px) {
  .kl-ratgeber-raster { grid-template-columns: minmax(0, 1fr); }
  .kl-ratgeber-seite { display: none; }
  .kl-ratgeber-haupt .kl-verzeichnis { display: block; }
}

/* Feinschliff */
.kl-artikel--ratgeber .kl-autor-kopf .kl-ratgeber-meta { display: none; }
.kl-fakten--band .kl-fakt__wert { font-size: clamp(1.35rem, 1.9vw, 1.8rem); overflow-wrap: normal; hyphens: manual; }
.kl-fakt__wert { font-size: clamp(1.3rem, 1.8vw, 1.6rem); }

/* Ratgeber-Kopf wie Agenturfreunde: Pfad, Lesezeit mit Uhr */
.kl-hero__pfad { margin: 0 0 14px; font-size: .8rem; color: rgba(241, 239, 234, .6); }
.kl-hero__pfad a { color: rgba(241, 239, 234, .75); text-decoration: none; }
.kl-hero__pfad a:hover { color: #fff; }
.kl-hero__lesezeit { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; font-size: .85rem; color: rgba(241, 239, 234, .7); }
.kl-hero--band .kl-hero__karte img { aspect-ratio: 16 / 10; }

/* Feinschliff 13.11.2026 (Christian: „Das Wichtigste zu weit oben“, Banner „abgeschnitten“) */
.kl-kurz, .kl-kurz.kl-glas { background: none; border: 0; border-left: 3px solid var(--kl-orange); border-radius: 0; padding: 4px 0 4px 22px; margin: 36px 0 40px; }
.kl-autor-kopf { margin-bottom: 0; }
.kl-mockup__titel { overflow-wrap: normal; hyphens: manual; -webkit-hyphens: manual; }
/* Im Ratgeber ist die Textspalte schmal: Banner untereinander, Foto oben, Text darunter */
.kl-ratgeber-haupt .kl-mockup { grid-template-columns: minmax(0, 1fr); }
.kl-ratgeber-haupt .kl-inhalt .kl-mockup img { min-height: 0; aspect-ratio: 16 / 8; }
.kl-ratgeber-haupt .kl-mockup__text { padding: 28px 30px 32px; }
.kl-ratgeber-haupt .kl-mockup__knoepfe .kl-knopf { white-space: nowrap; }
@media (max-width: 560px) { .kl-ratgeber-haupt .kl-mockup__knoepfe .kl-knopf { white-space: normal; } .kl-ratgeber-haupt .kl-mockup__text { padding: 22px 20px 24px; } }

/* Luft in den weißen Kästen (Christian, 13.11.2026: „reingequetscht“) – Autor und Häufige Fragen, alle Seiten */
.kl-autor { padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 44px); gap: clamp(20px, 3vw, 32px); margin-block: 56px; }
.kl-autor__text { margin-block: 10px 16px; line-height: 1.7; }
.kl-faq h2 { margin-bottom: 28px; }
.kl-faq__punkt summary { padding: 24px 64px 24px clamp(20px, 3vw, 32px); line-height: 1.45; }
.kl-faq__punkt summary::after { right: clamp(20px, 3vw, 32px); }
.kl-faq__antwort { padding: 0 clamp(20px, 3vw, 32px) 20px; }