/* km-bridge.css — schliesst die wenigen CI-Klassen, die im sample52-Export
   nicht vorkommen, aber von den neuen Verknuepfungs-Komponenten benutzt werden.
   Bewusst minimal: der Export (styles.css) bleibt die fuehrende Design-Quelle. */
.km-small { font-size: .85rem; color: var(--km-muted-fg, #65758B); }
a.km-card { text-decoration: none; color: inherit; }
a.km-card:hover { text-decoration: none; }

/* --- Ab hier: Klassen fuer die Hub-Seiten mit eigenem Inhalt (/about, /projects, …) --- */

/* Kennzahl in einer Karte. */
#s52-scope .km-stat {
  font-size: 2rem; font-weight: 800; line-height: 1.1;
  color: var(--km-primary, #1E5AA4); margin-bottom: 4px;
}

/* Karten-Ueberschrift; im Export nur als Inline-Stil vorhanden. */
#s52-scope .km-card__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; }

/* Schlichte Datentabelle (Firmenangaben, Kontaktdaten). */
#s52-scope .km-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
#s52-scope .km-table th,
#s52-scope .km-table td {
  text-align: left; vertical-align: top; padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--km-border, #E1E7EF); font-size: .95rem;
}
#s52-scope .km-table th { width: 34%; font-weight: 600; color: var(--km-muted-fg, #65758B); }

/* Typografie der Inhaltsseiten.
   Der Export stylt Ueberschriften ausschliesslich ueber Utility-Klassen; die
   Tailwind-Preflight setzt h1–h3 auf die Basisgroesse zurueck. Auf den neuen
   Seiten steht semantisches Markup, deshalb hier die Stufen — Werte aus dem
   Hub uebernommen (h1: 800/40px, Zeilenhoehe 1.15, -.02em). */
#s52-scope .km-page h1 {
  font-size: clamp(2rem, 1.4rem + 2vw, 2.5rem); font-weight: 800; line-height: 1.15;
  letter-spacing: -.02em; color: var(--km-navy, #0F1729); margin: 10px 0 16px;
}
#s52-scope .km-page h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.6rem); font-weight: 800; line-height: 1.25;
  letter-spacing: -.01em; color: var(--km-navy, #0F1729); margin: 56px 0 12px;
}
#s52-scope .km-page h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; color: var(--km-navy, #0F1729); }
#s52-scope .km-page p { line-height: 1.65; max-width: 46rem; }
#s52-scope .km-page .km-card p { max-width: none; }
#s52-scope .km-page ul { line-height: 1.8; padding-left: 1.25rem; max-width: 46rem; }
#s52-scope .km-page li { margin-bottom: 4px; }
#s52-scope .km-page .km-stat + p { margin-top: 0; }

/* Der Export setzt die Spaltenzahl teils ausserhalb von Media Queries.
   Auf schmalen Schirmen sonst vierspaltig — das hier faengt es ab. */
@media (max-width: 639px) {
  #s52-scope .km-grid--2,
  #s52-scope .km-grid--3,
  #s52-scope .km-grid--4 { grid-template-columns: 1fr; }
}
@media (min-width: 640px) and (max-width: 899px) {
  #s52-scope .km-grid--3,
  #s52-scope .km-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Kartentitel bleiben klein, auch wenn sie als h2 ausgezeichnet sind
   (.km-page h2 wuerde sie sonst auf Abschnittsgroesse aufblasen). */
#s52-scope .km-page h2.km-card__title,
#s52-scope .km-page h3.km-card__title {
  font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; letter-spacing: 0;
}
/* Links im Fliesstext als Links erkennbar machen. */
#s52-scope .km-page p a:not(.km-btn),
#s52-scope .km-page li a:not(.km-btn),
#s52-scope .km-page td a:not(.km-btn) {
  color: var(--km-primary, #1E5AA4); text-decoration: underline; text-underline-offset: 2px;
}
#s52-scope .km-page p a:not(.km-btn):hover,
#s52-scope .km-page li a:not(.km-btn):hover { text-decoration-thickness: 2px; }

/* ────────────────────────────────────────────────────────────────────────
   Markenraster auf /brands/ — Logos statt reiner Textkarten, jede Karte
   fuehrt auf die Seite des Herstellers (neuer Tab).
   Kundenwunsch 21.09.2026: "we need as well logos in pictures of the
   partners incl. link to the page (in new tab)".
   ──────────────────────────────────────────────────────────────────────── */
#s52-scope .km-brand-card{display:flex;flex-direction:column;align-items:flex-start;
  padding:22px;text-decoration:none;min-height:190px}
/* Feste Box statt width:auto — die Logos haben sehr unterschiedliche
   Seitenverhaeltnisse; so stehen sie in einer Reihe gleich hoch. */
#s52-scope .km-brand-logo{height:44px;width:150px;max-width:100%;object-fit:contain;
  object-position:left center;margin-bottom:14px;filter:saturate(.15) opacity(.78);
  transition:filter .25s}
#s52-scope .km-brand-card:hover .km-brand-logo{filter:none}
#s52-scope .km-brand-card .km-card__title{font-size:1rem;margin:0}
#s52-scope .km-brand-card .km-small{color:var(--km-muted-fg);font-size:.85rem;
  line-height:1.5;margin-top:4px}
#s52-scope .km-brand-more{margin-top:auto;padding-top:12px;color:var(--km-primary);
  font-size:.82rem;font-weight:600;opacity:0;transition:opacity .25s}
#s52-scope .km-brand-card:hover .km-brand-more{opacity:1}
@media (prefers-reduced-motion:reduce){
  #s52-scope .km-brand-logo,#s52-scope .km-brand-more{transition:none}
  #s52-scope .km-brand-more{opacity:1}
}

/* Bildbaender auf den Inhaltsseiten (/about, /projects) — mehr Bild, weniger
   reine Textwueste. */
#s52-scope .km-figure{margin:32px 0;border-radius:var(--km-r-2xl);overflow:hidden;
  border:1px solid var(--km-border)}
#s52-scope .km-figure img{display:block;width:100%;height:auto;object-fit:cover}
#s52-scope .km-figure figcaption{padding:12px 18px;background:var(--km-muted);
  color:var(--km-muted-fg);font-size:.82rem}

/* CTA-Band auf den Portal-Uebergabeseiten (tools/gen-handoff.mjs).
   Kundenwunsch 21.09.2026: drei Handlungsaufrufe von
   /lec/investment-memorandum zurueck in das LEC-Portal. */
#s52-scope .km-cta-band{display:flex;flex-wrap:wrap;gap:12px;margin:48px 0 8px;
  padding:28px;border-radius:var(--km-r-2xl);background:var(--km-navy)}
#s52-scope .km-cta-band .km-btn--outline{color:#fff;border-color:#ffffff47;background:0 0}
#s52-scope .km-cta-band .km-btn--outline:hover{background:#ffffff14;border-color:#fff}
@media (max-width:640px){#s52-scope .km-cta-band{flex-direction:column;align-items:stretch}
  #s52-scope .km-cta-band .km-btn{justify-content:center}}

/* --- Sprachwahl oben rechts (22.09.2026) ------------------------------------
   <details>/<summary>: funktioniert ohne JavaScript; app.js schliesst das
   Menue zusaetzlich bei Klick daneben und mit Esc. */
#s52-scope .km-head-end { display: flex; align-items: center; gap: 12px; }
#s52-scope .km-lang { position: relative; }
#s52-scope .km-lang > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px; border: 1px solid var(--km-border, #E1E7EF); border-radius: var(--km-r-lg, .5rem);
  font-size: .85rem; font-weight: 600; color: var(--km-navy, #0F1729); background: rgba(255,255,255,.6);
}
#s52-scope .km-lang > summary::-webkit-details-marker { display: none; }
#s52-scope .km-lang > summary:hover,
#s52-scope .km-lang[open] > summary { border-color: var(--km-primary, #1E5AA4); color: var(--km-primary, #1E5AA4); }
#s52-scope .km-lang > summary:focus-visible { outline: 2px solid var(--km-primary, #1E5AA4); outline-offset: 2px; }
#s52-scope .km-lang ul {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 70; min-width: 160px;
  margin: 0; padding: 6px; list-style: none; background: #fff;
  border: 1px solid var(--km-border, #E1E7EF); border-radius: var(--km-r-xl, .75rem);
  box-shadow: var(--km-shadow-hover, 0 8px 24px #0f17291a);
}
#s52-scope .km-lang li a {
  display: block; padding: 8px 12px; border-radius: var(--km-r-lg, .5rem);
  font-size: .9rem; color: var(--km-fg, #1F2937);
}
#s52-scope .km-lang li a:hover { background: var(--km-blue-50, #F0F6FF); color: var(--km-primary, #1E5AA4); }
#s52-scope .km-lang li a[aria-current="true"] { font-weight: 700; color: var(--km-primary, #1E5AA4); }

/* Karte mit Titel-Link (23.09.2026, docs/seo/internal_links_*.csv): verlinkt ist
   nur der Titel (Ankertext = Titel), ueber ::after bleibt die ganze Karte klickbar. */
.km-card--link { position: relative; }
.km-card--link .km-card__title a { color: inherit; text-decoration: none; }
.km-card--link .km-card__title a::after { content: ''; position: absolute; inset: 0; }
.km-card--link:hover .km-card__title a { text-decoration: underline; text-underline-offset: 2px; }