/* ==========================================================================
   Bereich Rechenzentren (17.09.2026)
   Ergänzungen an bestehenden Bausteinen, die zuerst dort gebraucht werden,
   aber allgemein nutzbar sind:
   1. Statusmarke über Überschriften (text_image `marke`)
   2. Bildmarke „Visualisierung" (text_image `visualisierung`)
   3. Fußnoten unter Leisten und Karten (`fussnote`, `hinweis`)
   4. Karten mit Menü-Symbol und Sprungmarke, Leistungskarten dreispaltig
   5. Planungszone (Flächenton `zone`)
   6. Vergleichstabelle (Set `table`, Darstellung „vergleich")
   7. Standortkarte in Textspalten
   Bewegung nur dezent und langsam; bei reduzierter Bewegung steht alles.
   ========================================================================== */

/* ---- 1. Statusmarke --------------------------------------------------- */
.k-marke {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--kyb-neon);
  padding: 6px 12px 6px 10px; border-radius: var(--r-pill);
  background: rgba(15, 255, 155, .07);
  box-shadow: inset 0 0 0 1px rgba(15, 255, 155, .28);
}
.k-marke__punkt {
  position: relative; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--kyb-neon);
}
.k-marke__punkt::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(15, 255, 155, .55);
  opacity: 0; animation: k-rz-puls 3.6s cubic-bezier(.2, .6, .2, 1) infinite;
}
@keyframes k-rz-puls {
  0% { transform: scale(.6); opacity: .9; }
  70%, 100% { transform: scale(1.6); opacity: 0; }
}
.k-ti__body > .k-marke + h2 { margin-top: var(--s3); }

/* ---- 2. Bildmarke „Visualisierung" -------------------------------------- */
.k-ti__media--visualisierung { position: relative; }
.k-visualisierung {
  position: absolute; left: 12px; top: 12px; z-index: 5;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--kyb-white); line-height: 1;
  padding: 7px 10px; border-radius: var(--r-pill);
  background: rgba(14, 15, 20, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  pointer-events: none;
}

/* ---- 3. Fußnoten -------------------------------------------------------- */
.k-fussnote {
  font-family: var(--mono); font-size: .74rem; line-height: 1.6; letter-spacing: .01em;
  color: var(--kyb-text-3); max-width: 72ch;
  margin-top: var(--s3);
}
.k-ti__body > .k-fussnote { margin-top: var(--s4); }
.k-fussnote--zentriert { margin-inline: auto; text-align: center; }
.k-fussnote a { color: var(--kyb-neon); }

/* ---- 4. Karten ------------------------------------------------------------ */
.k-cards__item[id] { scroll-margin-top: 110px; }
.k-cards__ic {
  width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: var(--s3);
  border-radius: var(--r-2); color: var(--kyb-neon);
  background: linear-gradient(145deg, rgba(15, 255, 222, .13), rgba(0, 255, 130, .045));
  box-shadow: inset 0 0 0 1px rgba(15, 255, 155, .2);
}
.k-cards--center .k-cards__ic { margin-inline: auto; }
.k-cards__ic svg { width: 24px; height: 24px; overflow: visible; }

@media (min-width: 1000px) {
  .k-angebote--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Dreispaltig: Verfügbarkeit über dem Titel statt daneben, damit nichts gequetscht wird */
.k-angebote--3 .k-angebot__top { flex-direction: column-reverse; align-items: flex-start; gap: var(--s2); }
.k-angebot__badge { white-space: normal; }
/* Lange Merkmalslisten brechen um statt die Karte zu sprengen */
.k-angebot__chips span { overflow-wrap: anywhere; }
.k-angebot__preis small { display: block; margin: 6px 0 0; line-height: 1.5; }
.k-angebote--3 .k-angebot__foot { align-items: flex-end; }

/* ---- 5. Planungszone ------------------------------------------------------
   Aufeinanderfolgende Bausteine mit Flächenton „zone" bilden eine
   zusammenhängende, gestrichelt umrandete Fläche: oben geöffnet mit dem
   ersten, unten geschlossen mit dem letzten Baustein. */
.k-set--zone {
  --zone-rand: 1px dashed rgba(15, 255, 155, .34);
  position: relative;
  padding: clamp(var(--s4), 3.5vw, var(--s6)) clamp(var(--s3), 3.5vw, var(--s6));
  background-color: rgba(30, 30, 40, .55);
  background-image:
    radial-gradient(70% 60% at 100% 0%, rgba(15, 255, 222, .05), transparent 70%);
  border-left: var(--zone-rand); border-right: var(--zone-rand);
}
.k-set--zone + .k-set--zone { margin-top: 0; padding-top: clamp(var(--s3), 2.5vw, var(--s4)); background-image: none; }
:not(.k-set--zone) + .k-set--zone,
.k-set--zone:first-child {
  border-top: var(--zone-rand);
  border-top-left-radius: var(--r-4); border-top-right-radius: var(--r-4);
  padding-top: clamp(var(--s5), 4.5vw, var(--s7));
}
.k-set--zone:not(:has(+ .k-set--zone)) {
  border-bottom: var(--zone-rand);
  border-bottom-left-radius: var(--r-4); border-bottom-right-radius: var(--r-4);
  padding-bottom: clamp(var(--s5), 4.5vw, var(--s7));
}
/* Innen: Kacheln und Leisten behalten ihre Bühnenfarbe, CTA ohne Doppelfläche */
.k-set--zone .k-proof { box-shadow: 0 0 0 1px var(--kyb-line); }
.k-set--zone .k-cta { box-shadow: 0 0 0 1px var(--kyb-line), var(--kante-oben); }

/* ---- 6. Vergleichstabelle ----------------------------------------------- */
.k-vgl__cap {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kyb-text-3); margin-bottom: var(--s4);
  display: flex; align-items: center; gap: var(--s2);
}
.k-vgl__cap::after { content: ""; flex: 1; height: 1px; background: var(--kyb-line); }


.k-vgl__t {
  width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed;
  font-size: .93rem; line-height: 1.45;
}
.k-vgl__t th, .k-vgl__t td { text-align: left; vertical-align: top; padding: 14px 16px; }
.k-vgl__ecke { width: 17%; }
.k-vgl__kopf {
  padding-block: 18px !important;
  border-bottom: 1px solid var(--kyb-line-strong);
  background-image: var(--g-karte);
  background-color: var(--kyb-stage);
}
.k-vgl__kopf:first-of-type { border-top-left-radius: var(--r-3); }
.k-vgl__kopf:last-child { border-top-right-radius: var(--r-3); }
.k-vgl__code {
  display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  color: var(--kyb-neon); margin-bottom: 4px;
}
.k-vgl__name { display: block; color: var(--kyb-white); font-weight: 600; font-size: 1.08rem; letter-spacing: -.01em; }
.k-vgl__merkmal {
  font-family: var(--mono); font-weight: 400; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--kyb-text-3); padding-top: 17px !important;
}
.k-vgl__t tbody th, .k-vgl__t tbody td { border-bottom: 1px solid var(--kyb-line); }
.k-vgl__t tbody td { color: var(--kyb-text-2); }
.k-vgl__t tbody tr { transition: background-color var(--t); }
.k-vgl__t tbody tr:hover { background-color: rgba(255, 255, 255, .025); }
.k-vgl__t td.is-leer { color: var(--kyb-text-3); }

/* Status */
.k-vgl__status { display: inline-flex; align-items: center; gap: 8px; color: var(--kyb-white); font-weight: 500; }
.k-vgl__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.k-vgl__status--betrieb .k-vgl__dot { background: var(--kyb-neon); box-shadow: 0 0 0 3px rgba(15, 255, 155, .16); }
.k-vgl__status--planung { color: var(--kyb-text); }
.k-vgl__status--planung .k-vgl__dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--kyb-neon); }
.k-vgl__zusatz { display: block; margin-top: 4px; font-size: .84rem; color: var(--kyb-text-3); }

/* Geplante Spalte: gedämpft, gestrichelt eingefasst */
.k-vgl__t .is-geplant {
  background-color: rgba(30, 30, 40, .5);
  border-left: 1px dashed rgba(15, 255, 155, .34);
  border-right: 1px dashed rgba(15, 255, 155, .34);
}
.k-vgl__t tbody td.is-geplant { color: var(--kyb-text-3); }
.k-vgl__t thead .is-geplant { background-image: none; border-top: 1px dashed rgba(15, 255, 155, .34); border-bottom-style: dashed; }
.k-vgl__t tbody tr:last-child .is-geplant { border-bottom: 1px dashed rgba(15, 255, 155, .34); }
.k-vgl__t .is-geplant .k-vgl__code,
.k-vgl__t .is-geplant .k-vgl__name { color: var(--kyb-text-2); }

/* Telefon und Tablett: je Spalte eine Karte */
.k-vgl__karten { display: grid; gap: var(--s2); }
@media (min-width: 640px) and (max-width: 899px) { .k-vgl__karten { grid-template-columns: 1fr 1fr; } }
.k-vgl__tabelle { display: none; }
@media (min-width: 900px) {
  .k-vgl__tabelle { display: block; }
  .k-vgl__karten { display: none; }
}
.k-vgl__karte {
  padding: var(--s4); border-radius: var(--r-3);
  background-color: var(--kyb-stage); background-image: var(--g-karte);
  box-shadow: 0 0 0 1px var(--kyb-line), var(--kante-oben);
}
.k-vgl__karte.is-geplant {
  background-color: rgba(30, 30, 40, .5); background-image: none;
  box-shadow: none; outline: 1px dashed rgba(15, 255, 155, .38); outline-offset: -1px;
}
.k-vgl__kh { margin-bottom: var(--s3); }
.k-vgl__dl { display: grid; gap: 0; margin: 0; }
.k-vgl__paar { display: grid; gap: 2px; padding-block: 10px; border-top: 1px solid var(--kyb-line); }
.k-vgl__paar dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--kyb-text-3); }
.k-vgl__paar dd { margin: 0; color: var(--kyb-text-2); font-size: .95rem; }
.k-vgl__karte.is-geplant .k-vgl__paar dd { color: var(--kyb-text-3); }

/* ---- 7. Standortkarte in Textspalten ------------------------------------- */
.standorte-map { border-radius: var(--r-3); }
.k-cols > div:has(> p > .standorte-map),
.k-cols > div:has(> .standorte-map) { align-self: center; }
/* Auf dem Telefon steht die Karte unter dem Text */
@media (max-width: 859px) {
  .k-cols > div:has(> p > .standorte-map),
  .k-cols > div:has(> .standorte-map) { order: 2; }
}

/* ---- Bewegung ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .k-marke__punkt::after { animation: none; opacity: 0; }
  .k-vgl__t tbody tr { transition: none; }
}

/* ---- Verweis unter Bausteinen (steps, sk_konzept) ------------------------ */
.k-verweis { margin-top: var(--s4); }

/* Globale Tabellenregeln (.k-set th) für die Vergleichstabelle zurücksetzen */
.k-set .k-vgl__t th, .k-set .k-vgl__t td { padding: 14px 16px; border-bottom: 1px solid var(--kyb-line); }
.k-set .k-vgl__t thead th, .k-set .k-vgl__t thead td { border-bottom-color: var(--kyb-line-strong); }
.k-set .k-vgl__t thead tr:first-child th { font-family: var(--font); font-size: inherit; text-transform: none; letter-spacing: 0; color: inherit; }
.k-set .k-vgl__t tbody tr th.k-vgl__merkmal { font-family: var(--mono); font-weight: 400; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--kyb-text-3); }
.k-set .k-vgl__t .k-vgl__kopf { font-weight: 400; }
.k-set .k-vgl__t .k-vgl__kopf .k-vgl__code { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; color: var(--kyb-neon); }
.k-set .k-vgl__t .is-geplant .k-vgl__code { color: var(--kyb-text-2); }
.k-set .k-vgl__t .k-vgl__kopf .k-vgl__name { font-size: 1.08rem; font-weight: 600; color: var(--kyb-white); }
.k-set .k-vgl__t .is-geplant .k-vgl__name { color: var(--kyb-text-2); }
.k-set .k-vgl__t thead .is-geplant { border-bottom: 1px dashed rgba(15, 255, 155, .34); }

/* ---- Große Kennzahlenleiste mit fünf Werten: eine Zeile, Werte ohne Umbruch */
.k-proof--gross.kyb-seq--5 .k-proof__v { white-space: nowrap; }
@media (min-width: 1000px) {
  .k-proof--gross.kyb-seq--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); }
  .k-proof--gross.kyb-seq--5 .k-proof__v { font-size: clamp(1.6rem, 2.3vw, 1.85rem); }
}
@media (min-width: 700px) and (max-width: 999px) {
  .k-proof--gross.kyb-seq--5 { grid-template-columns: repeat(6, 1fr); }
  .k-proof--gross.kyb-seq--5 > .k-proof__item { grid-column: span 2; }
  .k-proof--gross.kyb-seq--5 > .k-proof__item:nth-child(n+4) { grid-column: span 3; }
  .k-proof--gross.kyb-seq--5 .k-proof__v { font-size: clamp(1.8rem, 4.4vw, 2.4rem); }
}
@media (max-width: 699px) {
  .k-proof--gross.kyb-seq--5 { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s3); }
  .k-proof--gross.kyb-seq--5 > .k-proof__item:last-child { grid-column: 1 / -1; }
  .k-proof--gross.kyb-seq--5 .k-proof__v { font-size: clamp(1.5rem, 7vw, 2.1rem); }
}

/* Leistungskarten dreispaltig: Preis und Verweis untereinander */
.k-angebote--3 .k-angebot__foot { flex-direction: column; align-items: flex-start; gap: var(--s2); }
.k-angebote--3 .k-angebot__preis small { max-width: 34ch; }

/* Reiter ohne Bild: angenehme Zeilenlänge */
.k-tabs__panel:not(.k-tabs__panel--img) > div { max-width: 80ch; }

/* Ablauf: Überschrift ohne Einleitung braucht Abstand; fünf Schritte in einer Reihe */
.k-set > h2 + .k-steps { margin-top: var(--s5); }
@media (min-width: 1100px) {
  .k-steps:has(> .k-steps__item:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Kontaktblock auf dem Telefon: Spalten dürfen schmaler werden als ihr Inhalt (sonst 30 px Überstand) */
.k-conv > div { min-width: 0; }
.kyb-person > div { min-width: 0; }
.k-conv__ct a { overflow-wrap: anywhere; }
/* Zweispaltige Tabellen (Merkmal/Wert) brechen auf dem Telefon um statt quer zu scrollen */
@media (max-width: 700px) {
  .k-set table.k-table:not(:has(tr > :nth-child(3))) { display: table; white-space: normal; }
  .k-set table.k-table:not(:has(tr > :nth-child(3))) th:first-child,
  .k-set table.k-table:not(:has(tr > :nth-child(3))) td:first-child { width: 38%; }
}