/* Kuroko Labs — gemeinsamer Fussbereich
   Eigenstaendig: alle Werte haengen an --klf-Tokens, damit die Datei auf
   jeder Seite funktioniert, egal welches Seiten-CSS dort sonst laeuft.
   Rand und Breite folgen der Seite: Case-Study-Seiten setzen --cs2-gutter,
   alle anderen bekommen die 10vw, mit denen auch .section arbeitet.
   Der Akzent uebernimmt die Seitenfarbe, wo eine gesetzt ist.            */
:root {
  --klf-font: 'Helvetica Now Display', Helvetica, Arial, sans-serif;
  --klf-max: 1080px;
  --klf-w08: rgba(255,255,255,.08);
  --klf-w35: rgba(255,255,255,.35);
  --klf-w50: rgba(255,255,255,.50);
}
.muc-footer {
  --klf-gutter: var(--cs2-gutter, 10vw);
  --klf-accent: var(--cs2-accent, #E8520A);
}
/* ── Fussbereich ────────────────────────────────────────────────────
   Spaltenfooter statt einer Linkzeile: neue Unterseiten kommen einfach
   in die passende Spalte, ohne dass das Layout kippt. Aufbau wie der
   Rest der Seite — Haarlinien, winzige Versal-Ueberschriften, Orange
   nur als Akzent.                                                     */
.muc-footer {
  width: 100%; box-sizing: border-box;
  border-top: 1px solid var(--klf-w08);
  margin-top: 56px;
}
.muc-footer-inner {
  width: 100%; box-sizing: border-box;
  max-width: calc(var(--klf-max) + 2 * var(--klf-gutter));
  margin: 0 auto; padding: 56px var(--klf-gutter) 0;
}
.muc-footer-top {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 44px 32px;
  padding-bottom: 48px;
}

/* Markenblock */
.muc-footer-mark {
  font-family: var(--klf-font); font-size: 15px; font-weight: 700;
  letter-spacing: .02em; color: #fff; margin-bottom: 14px;
}
.muc-footer-claim {
  font-family: var(--klf-font); font-size: 13px; font-weight: 400;
  color: var(--klf-w50); line-height: 1.65; text-align: left;
  max-width: 34ch; margin: 0 0 20px;
}
.muc-footer-contact {
  display: block; font-family: var(--klf-font); font-size: 12px;
  color: rgba(255,255,255,.75); line-height: 1.9; text-decoration: none;
  transition: color .25s ease;
}
.muc-footer-contact:hover { color: var(--klf-accent); }

/* Linkspalten */
.muc-footer-col { min-width: 0; }
.muc-footer-head {
  font-family: var(--klf-font); font-size: 9px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--klf-w50);
  margin-bottom: 18px; display: flex; align-items: center; gap: 9px;
}
.muc-footer-head::before {
  content: ''; width: 14px; height: 1px; background: var(--klf-accent); flex: 0 0 auto;
}

/* Link mit Textwechsel: zwei Zeilen uebereinander, beim Hover schiebt
   die zweite hoch. Rein in CSS, damit es nicht an IX2 haengt. */
.muc-flink {
  display: block; height: 26px; overflow: hidden;
  text-decoration: none; font-size: 12px;
}
.muc-flink > span {
  display: block; height: 26px; line-height: 26px;
  font-family: var(--klf-font); font-size: 12px; font-weight: 400;
  color: var(--klf-w50); white-space: nowrap;
  transition: transform .42s cubic-bezier(.16,1,.3,1), color .42s ease;
}
.muc-flink > span + span { color: #fff; }
.muc-flink:hover > span, .muc-flink:focus-visible > span { transform: translateY(-26px); }
.muc-flink:focus-visible { outline: 1px solid var(--klf-accent); outline-offset: 3px; }

/* Laufband mit dem Rechtehinweis */
.muc-footer-ticker {
  /* Auf die Inhaltsspalte begrenzt: vorher lief die Schrift ueber die
     ganze Fensterbreite und damit auch ueber die festen Seitenlinien.
     Breite = Fenster minus Rand, hoechstens die Satzbreite. Der Schnitt
     liegt dadurch genau an der Inhaltskante. */
  width: calc(100% - 2 * var(--klf-gutter));
  max-width: var(--klf-max);
  margin: 0 auto;
  border-top: 1px solid var(--klf-w08);
  overflow: hidden; padding: 16px 0 18px;
}
.muc-ticker-track {
  display: flex; width: max-content;
  animation: muc-ticker 42s linear infinite;
}
.muc-ticker-track > span {
  font-family: var(--klf-font); font-size: 10px; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--klf-w35);
  white-space: nowrap; padding-right: 0;
}
.muc-ticker-track b { color: var(--klf-accent); font-weight: 400; padding: 0 14px; }
@keyframes muc-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.muc-footer-ticker:hover .muc-ticker-track { animation-play-state: paused; }

/* ── Volle Seitenbreite ──────────────────────────────────────────────
   Der Fussbereich deckelt seine Satzbreite normalerweise bei 1080 px.
   Auf der Startseite laufen Abschnitte und der CTA-Block dagegen bis
   auf 10vw Rand heraus, wodurch der Fussbereich darunter sichtbar
   schmaler und mittig stand. Diese Klasse nimmt nur den Deckel weg;
   der Rand bleibt derselbe wie bei .section, die Kanten fluchten. */
.muc-footer-wide .muc-footer-inner,
.muc-footer-wide .muc-footer-ticker { max-width: none; }

/* Spalten links zusammengerueckt.
   Das Raster 1.5fr + 4x1fr verteilt die Spalten ueber die ganze
   Satzbreite; auf breiten Schirmen klaffen zwischen den Linklisten
   dadurch grosse Luecken. Mit dieser Klasse behaelt jede Spalte ihre
   eigene Breite, alle stehen dicht am linken Rand, der Freiraum
   sammelt sich rechts.
   Erst ab 1181 px: gemessen brauchen die fuenf Spalten 1024 px (DE),
   1019 px (JA), 968 px (EN) samt Luecken — darunter wird es eng, und
   dort greift ohnehin das zweispaltige Raster beziehungsweise das
   Band mit umbrechenden Labels weiter unten. Die Luecke waechst mit
   der Breite mit, bleibt aber bei 72 px stehen, damit die Spalten
   auf sehr breiten Schirmen nicht wieder auseinanderlaufen. */
@media (min-width: 1181px) {
  .muc-footer-left .muc-footer-top {
    grid-template-columns: auto repeat(4, max-content);
    justify-content: start;
    column-gap: clamp(36px, 4vw, 72px);
  }
}

@media (max-width: 991px) {
  .muc-footer-inner { padding-top: 44px; }
  .muc-footer-top { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; padding-bottom: 40px; }
  .muc-footer-brand { grid-column: 1 / -1; }
  .muc-footer-claim { max-width: 46ch; }
}
@media (max-width: 479px) {
  .muc-footer-inner { padding-top: 36px; }
  .muc-footer-top { gap: 30px 20px; padding-bottom: 32px; }
  .muc-ticker-track { animation-duration: 28s; }
  /* Auf schmalen Schirmen darf der Linktext umbrechen. Der Zeilentausch
     beim Hover braucht eine feste Hoehe und faellt deshalb weg — auf
     Touch gibt es ohnehin kein Hover, dafuer wird die Tippflaeche groesser
     und ein langer Eintrag kann nie ueber die Spalte hinauslaufen. */
  .muc-flink { height: auto; overflow: visible; }
  /* Lange Labels duerfen umbrechen; ein Kompositum wie
     "Prozessautomatisierung" passt bei 320 px sonst nicht in die Spalte. */
  .muc-flink > span { white-space: normal; height: auto; line-height: 1.45; padding: 6px 0;
                      overflow-wrap: break-word; hyphens: auto; }
  .muc-flink > span + span { display: none; }
  .muc-flink:hover > span { transform: none; }
}


@media (max-width: 768px) {
  /* Groessere Tippflaechen: 26 px sind fuer den Daumen zu knapp. */
  .muc-flink { height: 32px; }
  .muc-flink > span { height: 32px; line-height: 32px; }
  .muc-flink:hover > span, .muc-flink:focus-visible > span { transform: translateY(-32px); }
  .muc-footer-contact { line-height: 2.4; }
}
@media (max-width: 479px) {
  /* Auf schmalen Schirmen darf der Linktext umbrechen. Der Zeilentausch
     beim Hover braucht eine feste Hoehe und faellt deshalb weg — auf
     Touch gibt es ohnehin kein Hover, dafuer wird die Tippflaeche groesser
     und ein langer Eintrag kann nie ueber die Spalte hinauslaufen. */
  .muc-flink { height: auto; overflow: visible; }
  /* Lange Labels duerfen umbrechen; ein Kompositum wie
     "Prozessautomatisierung" passt bei 320 px sonst nicht in die Spalte. */
  .muc-flink > span { white-space: normal; height: auto; line-height: 1.45; padding: 6px 0;
                      overflow-wrap: break-word; hyphens: auto; }
  .muc-flink > span + span { display: none; }
  .muc-flink:hover > span { transform: none; }
}

/* Enges Band: ab 992 px greift wieder das vierspaltige Raster, dort sind
   die Spalten aber am schmalsten (121 px bei 992 px, 126 px bei 1024 px).
   Laengere Bezeichnungen liefen gegen overflow:hidden und wurden am Rand
   abgeschnitten, in allen drei Sprachen: "Cookie-Einstellungen" (120 px),
   "RAG knowledge agent" (125 px), "プライバシーポリシー" (124 px).
   Einzelne Labels zu kuerzen loest das nur bis zum naechsten langen Wort,
   deshalb darf der Text in diesem Band umbrechen. Der Zeilentausch beim
   Hover braucht eine feste Hoehe und entfaellt hier, wie schon auf schmalen
   Schirmen. Ab 1181 px sind die Spalten breit genug (148 px). */
@media (min-width: 992px) and (max-width: 1180px) {
  .muc-flink { height: auto; overflow: visible; }
  .muc-flink > span { white-space: normal; height: auto; line-height: 1.45; padding: 5px 0;
                      overflow-wrap: break-word; hyphens: auto; }
  .muc-flink > span + span { display: none; }
  .muc-flink:hover > span, .muc-flink:focus-visible > span { transform: none; }
}

/* Diese Datei laedt jede Seite, deshalb stehen hier auch die wenigen
   Bausteine, die ueber den Fussbereich hinaus ueberall gebraucht werden.
   Der Beleg stand zuerst in kl-landing.css, die aber nur die
   Themenseiten laden. Einmal definiert statt zweimal. */
/* Rahmen fuer den Beleg ausserhalb der Themenseiten. Die Webflow-Seiten
   haben nur .section, und das ist ein display:flex mit 100vh Mindesthoehe —
   ein ganzer Bildschirm fuer drei Zeilen. Deshalb ein eigener, schlanker
   Rahmen mit demselben Rand wie der Fussbereich. */
.muc-cite-wrap {
  width: 100%; box-sizing: border-box;
  max-width: calc(var(--klf-max) + 2 * 10vw);
  margin: 0 auto; padding: 0 10vw 64px;
}
.muc-cite-wrap .muc-cite { margin-top: 0; }

/* ── Beleg aus fremder Quelle ────────────────────────────────────────
   Kennwert, Einordnung, Herkunft mit Verweis. Getrennt vom eigenen
   Zahlenmaterial (.muc-stat), damit erkennbar bleibt, was gemessen und was
   zitiert ist. Grundlage: das GEO-Paper misst die Kombination aus Statistik
   und Quellenangabe als staerkste Massnahme fuer die Sichtbarkeit in
   generativen Antworten.

   Eigenstaendig wie der Fussbereich: die --muc-Tokens gibt es nur auf den
   Themenseiten, die kl-landing.css laden. Auf Startseite, Fallstudien und
   Rechtstexten greifen die Rueckfallwerte.                              */
.muc-cite {
  --mcit-font: var(--muc-font, 'Helvetica Now Display', Helvetica, Arial, sans-serif);
  --mcit-accent: var(--muc-accent, var(--cs2-accent, #E8520A));
  --mcit-accent-rgb: var(--muc-accent-rgb, 232, 82, 10);
  border-left: 2px solid var(--mcit-accent);
  padding: 2px 0 2px 22px; margin: 30px 0 0;
}
.muc-cite-fig {
  font-family: var(--mcit-font); font-size: 30px; font-weight: 700;
  color: #fff; line-height: 1.1; letter-spacing: -.01em; text-transform: none;
}
.muc-cite-txt {
  font-family: var(--mcit-font); font-size: 14px; font-weight: 400;
  color: rgba(255,255,255,.70); line-height: 1.65; margin-top: 8px;
  max-width: 58ch; text-align: left;
}
.muc-cite-src {
  font-family: var(--mcit-font); font-size: 11px; font-weight: 400;
  color: rgba(255,255,255,.50); line-height: 1.55; margin-top: 12px;
  max-width: 58ch; text-align: left;
}
.muc-cite-src a { color: var(--mcit-accent); text-decoration: none;
  border-bottom: 1px solid rgba(var(--mcit-accent-rgb), .45); font-size: inherit; }
.muc-cite-src a:hover { border-bottom-color: var(--mcit-accent); }
@media (max-width: 479px) {
  .muc-cite { padding-left: 16px; }
  .muc-cite-fig { font-size: 24px; }
}

/* ── Einblenden beim Erreichen ───────────────────────────────────────
   Alle Startzustaende haengen an .klf-anim, das kl-footer.js setzt.
   Ohne JavaScript ist der Fussbereich damit von Anfang an sichtbar.
   Reihenfolge: die Oberkante zeichnet sich, danach steigen Marke und
   Spalten versetzt auf, zuletzt kommt das Laufband und laeuft los.   */
.klf-anim .muc-footer { border-top-color: transparent; position: relative; }
.klf-anim .muc-footer::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--klf-w08); transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.klf-anim .muc-footer.is-in::before { transform: scaleX(1); }

.klf-anim .muc-footer-brand,
.klf-anim .muc-footer-col {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--klf-i, 0) * 90ms + 140ms);
}
.klf-anim .muc-footer.is-in .muc-footer-brand,
.klf-anim .muc-footer.is-in .muc-footer-col { opacity: 1; transform: none; }

.klf-anim .muc-footer-head::before {
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--klf-i, 0) * 90ms + 380ms);
}
.klf-anim .muc-footer.is-in .muc-footer-head::before { transform: scaleX(1); }

.klf-anim .muc-footer-ticker { opacity: 0; transition: opacity 1s ease .55s; }
.klf-anim .muc-footer.is-in .muc-footer-ticker { opacity: 1; }
.klf-anim .muc-ticker-track { animation-play-state: paused; }
.klf-anim .muc-footer.is-in .muc-ticker-track { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .klf-anim .muc-footer { border-top-color: var(--klf-w08); }
  .klf-anim .muc-footer::before { display: none; }
  .klf-anim .muc-footer-brand,
  .klf-anim .muc-footer-col { opacity: 1 !important; transform: none !important; transition: none !important; }
  .klf-anim .muc-footer-head::before { transform: none !important; transition: none !important; }
  .klf-anim .muc-footer-ticker { opacity: 1 !important; }
  .klf-anim .muc-ticker-track { animation: none !important; }
}