/* Klanglichter 2026 – Basis im Stil von Agenturfreunde24 (Christian, 13.11.2026): warmes helles Weiß als Grund,
   dunkle Blöcke nur dort, wo Laserfotos wirken (Kopfbild, Banner, Zahlenband, Fuß). Inter für Text und Überschriften,
   einzelne hervorgehobene Wörter kursiv in Playfair Display und Orange, Logo-Orange für Knöpfe. */

@font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-kursiv.woff2") format("woff2"); font-weight: 600 800; font-style: italic; font-display: swap; }

:root {
  /* hell (Grund der Seite) */
  --kl-grund: #f5f3ef;           /* warmes, angenehmes Weiß */
  --kl-flaeche: #ffffff;         /* Karten und Kästen */
  --kl-flaeche-2: #ebe7e0;       /* Etiketten, Tabellenzeilen */
  --kl-tinte: #121212;           /* Überschriften */
  --kl-text: #2b2f36;
  --kl-text-leise: #565b66;
  --kl-text-blass: #7a7f89;
  --kl-linie: #e2ded5;
  /* dunkel (Kopfbild, Banner, Fuß) */
  --kl-nacht: #121212;
  --kl-nacht-2: #1b1b1d;
  --kl-nacht-3: #26262a;
  /* Akzent */
  --kl-orange: #f29400;          /* Logo-Orange: Knöpfe, Hervorhebungen */
  --kl-orange-text: #d47f00;     /* Orange für Schrift auf hellem Grund (besser lesbar) */
  --kl-orange-hauch: #fdf1df;    /* Infobox-Grund */
  --kl-glas: #ffffff;
  --kl-glas-rand: var(--kl-linie);
  --kl-radius: 4px;
  --kl-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kl-plakat: var(--kl-sans);
  --kl-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --kl-breite: 1240px;
  --kl-schmal: 740px;
  --kl-rand: clamp(20px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--kl-grund);
  color: var(--kl-text);
  font: 400 17px/1.7 var(--kl-sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video, iframe { max-width: 100%; height: auto; }
a { color: var(--kl-tinte); text-decoration-color: var(--kl-orange); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--kl-orange-text); }
:focus-visible { outline: 2px solid var(--kl-orange); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 { font-family: var(--kl-sans); font-weight: 800; line-height: 1.12; margin: 1.7em 0 .55em; color: var(--kl-tinte); letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1.05; letter-spacing: -.03em; }
h2 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.25; letter-spacing: -.015em; }
h4 { font-size: 1.08rem; }
/* Hervorgehobene Wörter in Überschriften: kursiv in Playfair, Orange – wie bei Agenturfreunde */
h1 em, h2 em, h3 em { font-family: var(--kl-serif); font-style: italic; font-weight: 700; letter-spacing: 0; color: var(--kl-orange-text); }
p, ul, ol, table, figure, blockquote { margin: 0 0 1.2em; }
strong { color: var(--kl-tinte); font-weight: 650; }
hr { border: 0; height: 1px; background: var(--kl-linie); margin: 3em 0; }

.kl-breite { width: min(var(--kl-breite), 100% - 2 * var(--kl-rand)); margin-inline: auto; }
.kl-schmal { width: min(var(--kl-schmal), 100% - 2 * var(--kl-rand)); margin-inline: auto; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.kl-sprung { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--kl-tinte); color: #fff; padding: 8px 14px; border-radius: 4px; }
.kl-sprung:focus { left: 8px; }

/* Tabellen im Inhalt */
.kl-inhalt table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.kl-inhalt th, .kl-inhalt td { padding: .75em .95em; border-bottom: 1px solid var(--kl-linie); text-align: left; vertical-align: top; }
.kl-inhalt th { color: var(--kl-tinte); font-weight: 650; }

.kl-inhalt ul { padding-left: 1.2em; }
.kl-inhalt li::marker { color: var(--kl-orange); }
.kl-inhalt blockquote { border-left: 2px solid var(--kl-orange); padding: .2em 0 .2em 1.2em; color: var(--kl-text-leise); }
.kl-inhalt img { border-radius: var(--kl-radius); }
.kl-inhalt figure figcaption { font-size: .86rem; color: var(--kl-text-blass); margin-top: .6em; }

/* Dunkle Blöcke: hier gelten helle Schriftfarben (Kopfbild, Banner, Zahlenband, Anfrage-Kasten, Fuß) */
.kl-hero--voll, .kl-hero--foto, .kl-mockup, .kl-fakten, .kl-cta-box, .kl-cta__innen, .kl-fuss {
  --kl-tinte: #ffffff;
  --kl-text: #f1efea;
  --kl-text-leise: rgba(241, 239, 234, .76);
  --kl-text-blass: rgba(241, 239, 234, .56);
  --kl-linie: rgba(255, 255, 255, .14);
  --kl-orange-text: #ffab2e;
  color: var(--kl-text);
}

/* Lange deutsche Wörter (z. B. „Versammlungsstättenverordnungen“) dürfen am Handy nie über den Rand ragen (13.11.2026).
   Nur umbrechen, wenn ein Wort nicht passt – keine automatische Silbentrennung im Fließtext („Flä-che“ sah unruhig aus). */
.kl-artikel { overflow-wrap: break-word; }