/* Klanglichter 2026 – Startseite mit eigenem Aufbau (Christian, 13.11.2026: „die Startseite muss separat sein“).
   Wird nur auf der Startseite geladen (inc/assets.php). Bänder über die volle Breite, Inhalt auf 1200 px,
   abwechselnd warm und weiß, ein dunkles Band für Agenturen. Texte stehen unverändert in inhalte/startseite.html. */

.kl-artikel--start > .kl-inhalt { width: 100%; max-width: none; margin: 0; }
.kl-start-band { padding: clamp(56px, 6vw, 96px) max(var(--kl-rand), calc(50% - 600px)); }
.kl-start-band--weiss { background: var(--kl-flaeche); }
.kl-start-band h2 { margin: 0 0 18px; font-size: clamp(1.8rem, 3vw, 2.6rem); max-width: 22ch; }
.kl-start-band h2::before { content: ""; display: block; width: 44px; height: 3px; margin-bottom: 18px; background: var(--kl-orange); }
.kl-start-band img { border-radius: 0; display: block; width: 100%; }
.kl-start-kopf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: 36px; }
.kl-start-kopf > h2 { margin: 0; }
.kl-start-kopf > p { margin: 0; color: var(--kl-text-leise); font-size: 1.05rem; }

/* Faktenleiste: dunkle, halbtransparente Leiste unten im Kopfvideo (Christian: „Idee gut, Stil anders“) */
.kl-start-fakten { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(1200px, 100% - 2 * var(--kl-rand)); margin: -112px auto 0; background: rgba(14, 14, 14, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 2px solid var(--kl-orange); }
.kl-start-fakten .kl-fakt { padding: 24px 28px 26px; border: 0; border-left: 1px solid rgba(255, 255, 255, .12); background: none; }
.kl-start-fakten .kl-fakt:first-child { border-left: 0; }
.kl-start-fakten .kl-fakt__wert { display: block; font: italic 700 clamp(1.45rem, 2.1vw, 1.9rem)/1.1 var(--kl-serif); color: #fff; margin-bottom: 6px; }
.kl-start-fakten .kl-fakt__text { font-size: .88rem; color: rgba(241, 239, 234, .74); text-transform: none; letter-spacing: 0; }

/* Leistungen direkt unter dem Video: Abstand zur Faktenleiste */
.kl-leistungen { padding-top: clamp(40px, 5vw, 72px); }

/* Einstieg: großes Foto, Text daneben, Anlässe als Etiketten */
.kl-start-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.kl-start-intro__bild { margin: 0; }
.kl-start-intro__bild img { aspect-ratio: 4 / 3; object-fit: cover; }
.kl-start-intro__text > p { font-size: 1.08rem; line-height: 1.7; }
.kl-start-anlaesse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.kl-start-anlass { display: flex; align-items: center; gap: 14px; padding: 8px 14px 8px 8px; background: var(--kl-flaeche); border: 1px solid var(--kl-linie); color: var(--kl-tinte); font-weight: 650; font-size: .95rem; line-height: 1.3; text-decoration: none; transition: border-color .2s, transform .2s; }
.kl-start-anlass img { width: 64px; height: 64px; flex: none; object-fit: cover; }
.kl-start-anlass span { flex: 1; }
.kl-start-anlass::after { content: "↗"; color: var(--kl-orange-text); font-weight: 500; }
.kl-start-anlass:hover { border-color: var(--kl-orange); transform: translateY(-1px); color: var(--kl-tinte); }
.kl-start-anlass:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Für Unternehmen / für Städte: zwei große Bildkarten */
.kl-start-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.kl-start-ziel { display: flex; flex-direction: column; background: var(--kl-grund); border: 1px solid var(--kl-linie); }
.kl-start-ziel > img, .kl-start-ziel > picture { aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 3px solid var(--kl-orange); }
.kl-start-ziel > h2 { padding: 28px 30px 0; margin: 0 0 10px; font-size: clamp(1.4rem, 2vw, 1.75rem); max-width: none; }
.kl-start-ziel > h2::before { content: none; }
.kl-start-ziel > div { padding: 0 30px 30px; }
.kl-start-ziel h3 { margin: 0 0 10px; font-size: 1.05rem; color: var(--kl-orange-text); }
.kl-start-ziel p { color: var(--kl-text); }
.kl-start-ziel p:last-child { margin-bottom: 0; }

/* Referenzen: vier Bildkarten */
.kl-start-referenzen .kl-referenzen { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; margin: 0; }
.kl-start-referenzen .kl-referenz { background: var(--kl-flaeche); border: 1px solid var(--kl-linie); color: var(--kl-text-leise); }
.kl-start-referenzen .kl-referenz img { aspect-ratio: 4 / 3; object-fit: cover; }
.kl-start-referenzen .kl-referenz__text { padding: 18px 20px 22px; }
.kl-start-referenzen .kl-referenz__titel { display: block; color: var(--kl-tinte); font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.kl-start-referenzen .kl-referenz:hover .kl-referenz__titel { color: var(--kl-orange-text); }

/* Ablauf: Foto links, Zeitleiste senkrecht rechts, Knopf darunter */
.kl-start-ablauf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.kl-start-ablauf__bild { margin: 0; position: sticky; top: 104px; }
.kl-start-ablauf__bild img { aspect-ratio: 4 / 5; object-fit: cover; }
.kl-start-ablauf .kl-ablauf { list-style: none; counter-reset: schritt; margin: 28px 0 24px; padding: 0; border: 0; display: block; }
.kl-start-ablauf .kl-ablauf > li { counter-increment: schritt; position: relative; margin: 0 0 0 21px; padding: 0 0 30px 40px; border: 0; border-left: 2px solid var(--kl-linie); }
.kl-start-ablauf .kl-ablauf > li:last-child { padding-bottom: 4px; border-left-color: transparent; }
.kl-start-ablauf .kl-ablauf > li::before { content: counter(schritt); position: absolute; left: -22px; top: -6px; display: grid; place-items: center; width: 42px; height: 42px; margin: 0; border-radius: 50%; background: var(--kl-orange); color: #111; font: 800 1rem/1 var(--kl-sans); box-shadow: 0 0 0 6px var(--kl-flaeche); }
.kl-start-ablauf .kl-ablauf strong { display: block; font-size: 1.12rem; margin-bottom: 6px; color: var(--kl-tinte); }

/* Knöpfe in Karten und Abschnitten */
.kl-start-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0 !important; }
.kl-knopf--rand { background: transparent; color: var(--kl-tinte); box-shadow: inset 0 0 0 1.5px var(--kl-tinte); }
.kl-knopf--rand:hover { background: var(--kl-tinte); color: #fff; }

/* Agenturen: dunkles Band mit Knopf */
.kl-start-agentur { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 64px; align-items: center; background: var(--kl-nacht); --kl-tinte: #fff; --kl-text: #f1efea; --kl-text-leise: rgba(241, 239, 234, .76); color: var(--kl-text); }
.kl-start-agentur h2 { color: #fff; }
.kl-start-agentur p { max-width: 62ch; }
.kl-start-agentur a:not(.kl-knopf) { color: #fff; }
.kl-start-agentur__knopf { margin: 0; }
.kl-start-agentur .kl-knopf { background: var(--kl-orange); color: #111; }

/* Was eine gute Lasershow ausmacht: Bild-Text-Karte und Film */
.kl-start-gut .kl-bild-text { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; margin: 10px 0 0; background: var(--kl-flaeche); border: 1px solid var(--kl-linie); align-items: stretch; }
.kl-start-gut .kl-bild-text > img, .kl-start-gut .kl-bild-text > picture { height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kl-start-gut .kl-bild-text > div { padding: clamp(24px, 3.5vw, 48px); align-self: center; }
.kl-start-gut .kl-bild-text h3 { margin-top: 0; font-size: clamp(1.3rem, 1.8vw, 1.6rem); }
.kl-start-film { margin-top: 32px; }
.kl-start-film .kl-video { max-width: none; margin: 0; }

/* Regionen: Kacheln für die Bundesländer */
.kl-start-laender { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kl-start-land { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; background: var(--kl-grund); border: 1px solid var(--kl-linie); border-left: 3px solid var(--kl-orange); color: var(--kl-tinte); font-weight: 600; text-decoration: none; }
.kl-start-land::after { content: "↗"; color: var(--kl-orange-text); }
.kl-start-land:hover { background: var(--kl-tinte); color: #fff; }

/* Häufige Fragen und Kundenstimmen im gleichen Raster */
.kl-artikel--start > .kl-faq { width: min(1200px, 100% - 2 * var(--kl-rand)); }

@media (max-width: 900px) {
  .kl-start-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kl-start-intro, .kl-start-zwei, .kl-start-kopf, .kl-start-agentur, .kl-start-gut .kl-bild-text { grid-template-columns: minmax(0, 1fr); }
  .kl-start-kopf { align-items: start; }
  .kl-start-ablauf { grid-template-columns: minmax(0, 1fr); }
  .kl-start-ablauf__bild { position: static; }
  .kl-start-ablauf__bild img { aspect-ratio: 16 / 10; }
  .kl-start-laender { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kl-start-fakten { margin-top: -60px; background: #141414; }
  .kl-start-fakten .kl-fakt:nth-child(3) { border-left: 0; }
  .kl-start-fakten .kl-fakt:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .12); }
}
@media (max-width: 560px) {
  .kl-start-anlaesse { grid-template-columns: minmax(0, 1fr); }
  .kl-start-fakten .kl-fakt { padding: 16px 14px; min-width: 0; }
  .kl-start-fakten .kl-fakt__wert { font-size: 1.15rem; hyphens: manual; -webkit-hyphens: manual; }
  .kl-start-fakten .kl-fakt__text { display: block; font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; }
  .kl-start-ziel > h2 { padding: 22px 20px 0; }
  .kl-start-ziel > div { padding: 0 20px 22px; }
}

/* Platz im Kopfvideo für die Faktenleiste */
.kl-hero--voll { padding-bottom: 176px; }
@media (max-width: 900px) { .kl-hero--voll { padding-bottom: 104px; } }

/* Leistungs-Kacheln: „Lasershow mieten“, „Zur Firmenfeier“ … als Knopf (Christian, 13.11.2026) */
.kl-leistung__mehr { align-self: flex-start; margin-top: 18px; padding: 12px 18px; background: var(--kl-orange); color: #111 !important; font: 700 .78rem/1 var(--kl-sans); letter-spacing: .08em; text-transform: uppercase; border-radius: 3px; transition: background .2s, color .2s; }
.kl-leistung:hover .kl-leistung__mehr, .kl-leistung:focus-visible .kl-leistung__mehr { background: var(--kl-tinte); color: #fff !important; }

/* Kundenstimmen vor den Fragen: eigenes weißes Band */
.kl-artikel--start > .kl-stimmen { width: 100%; max-width: none; padding: clamp(56px, 6vw, 96px) max(var(--kl-rand), calc(50% - 600px)); background: var(--kl-flaeche); margin: 0; }