html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Fokus-Ring nur für Buttons/Links aus der ASP.NET-Standardvorlage. Die Formular-Selektoren
   (.form-control:focus, .form-check-input:focus) wurden bewusst entfernt: sie überschrieben sonst
   den Fokus-Schatten der Komponente (fmh-bootstrap.css) mit einem Nicht-CD-Blau (#258cfb). */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Kopf-Navigation in den FMH-CI-Farben (wie in der Vorgängerversion): dunkelblaue Leiste mit
   weisser Schrift. Umsetzung über die Bootstrap-Navbar-Variablen, damit Brand, Links und der
   mobile Toggler-Button einheitlich hell dargestellt werden. Die Seitenabstände bleiben durch
   den unveränderten .container-fluid im Layout erhalten. */
.fmh-navbar {
  --bs-navbar-color: rgba(255, 255, 255, 0.85);
  --bs-navbar-hover-color: #ffffff; /* $weiss */
  --bs-navbar-active-color: #ffffff; /* $weiss */
  --bs-navbar-brand-color: #ffffff; /* $weiss */
  --bs-navbar-brand-hover-color: #ffffff; /* $weiss */
  background-color: #3C5587; /* $fmh-dunkelblau ($primaerfarbe) */
}

:root {
  /* Höhe der haftenden Kopfzeile. Der Wert hier ist die Rückfallebene (Navigationsleiste + Abstand);
     site.js misst die tatsächliche Höhe beim Laden und bei Grössenänderung und schreibt sie hier
     hinein — die Leiste wird auf schmalen Fenstern höher, sobald das Menü umbricht oder aufklappt. */
  --fmh-kopfzeile-hoehe: 4.5rem;
}

/* Die Kopfzeile bleibt beim Scrollen stehen: Auf den langen Demo- und Anleitungsseiten ist die
   Navigation damit jederzeit erreichbar, ohne nach oben zurückzuscrollen. position: sticky statt
   fixed — so bleibt der Platz im Textfluss reserviert und der Inhalt braucht keinen Ausgleich.
   z-index 1030 ist Bootstraps $zindex-sticky: über dem Seiteninhalt, aber unter Dialog (1055)
   und Tooltip (1080), die weiterhin über der Leiste liegen müssen. Der eigene Hintergrund ist
   nötig, weil der Abstand unter der Navigationsleiste sonst durchsichtig wäre und der Inhalt
   dort durchscheinen würde. */
.fmh-kopfzeile {
  position: sticky;
  top: 0;
  z-index: 1030;
  padding-bottom: 1rem;
  background-color: var(--bs-body-bg, #ffffff);
}

html {
  position: relative;
  min-height: 100%;
  /* Sprungmarken (z. B. die Überschriften-Anker der Anleitungen) landen sonst unter der haftenden
     Kopfzeile. */
  scroll-padding-top: var(--fmh-kopfzeile-hoehe);
}

/* Navigation links auf den Komponenten-/Demoseiten: bleibt beim Scrollen stehen und bekommt einen
   eigenen Scrollbereich. Der Inhalt daneben scrollt weiter am Fenster — die Navigation wandert
   dabei nicht mit weg, und ist die Navigation selbst länger als das Fenster, scrollt sie für sich.
   align-self: flex-start ist nötig, weil die Spalte als Flex-Element sonst auf die volle Höhe der
   Zeile gestreckt würde und dann nichts zum Haften bliebe.
   Erst ab dem md-Umbruch: darunter stehen Navigation und Inhalt untereinander, dort wäre eine
   haftende Navigation nur im Weg. */
@media (min-width: 768px) {
  .demo-navigation {
    position: sticky;
    top: var(--fmh-kopfzeile-hoehe);
    align-self: flex-start;
    max-height: calc(100vh - var(--fmh-kopfzeile-hoehe));
    overflow-y: auto;
    /* Am Ende der Navigation nicht weiterscrollen und dabei die Seite mitziehen. */
    overscroll-behavior: contain;
  }
}

body {
  margin-bottom: 60px;
}

/* -----------------------------------------------------------------------------------------------
   Farben aus dem FMH Corporate Design (Basis: wwwroot/css/_variables.scss + _corporate_design.scss).
   site.css ist plain CSS (keine SCSS-Pipeline im WebUI), daher die Werte hier direkt eingesetzt und
   je Stelle mit der CD-Variable benannt:
     #3C5587 = $fmh-dunkelblau ($primaerfarbe)   #556473 = $fmh-dunkelgrau ($sekundaerfarbe)
     #DCE1E6 = $fmh-hellblau    #DCDCDC = $fmh-hellgrau    #16161d = $eigengrau    #ffffff = $weiss
     #942A20 = $rot    #289437 = $gruen    #FFE60A = $fmh-gelb    #dadce0 = $border-color
   ----------------------------------------------------------------------------------------------- */

/* Prism: helles Theme (passt ins Layout), kräftigerer Schrift-Kontrast im Code-Block. Der helle
   text-shadow des Standard-Themes wird entfernt (lässt den Text sonst verwaschen wirken). */
pre[class*="language-"],
code[class*="language-"] {
  color: #16161d; /* $eigengrau */
  text-shadow: none;
  background: #f6f8fa; /* neutrales Hell – kein CD-Pendant für einen Near-White-Code-Grund */
}

pre[class*="language-"] {
  background: #f6f8fa;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #556473; /* $fmh-dunkelgrau */
}

.token.punctuation {
  color: #16161d; /* $eigengrau */
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #942A20; /* $rot */
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #289437; /* $gruen */
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #556473; /* $fmh-dunkelgrau */
  background: transparent;
}

.token.atrule,
.token.attr-value,
.token.keyword,
.token.function,
.token.class-name {
  color: #3C5587; /* $fmh-dunkelblau ($primaerfarbe) */
}

/* Prism: Copy-Button dauerhaft sichtbar (Standard-Prism nur beim Hover), Hover = CD-Primärfarbe. */
div.code-toolbar > .toolbar {
  opacity: 1;
}

div.code-toolbar > .toolbar .toolbar-item > button {
  color: #556473; /* $fmh-dunkelgrau */
  background: #DCDCDC; /* $fmh-hellgrau */
  border: 1px solid #dadce0; /* $border-color */
  border-radius: 0.25rem;
  padding: 0.05rem 0.5rem;
  font-size: 0.8rem;
  box-shadow: none;
  cursor: pointer;
}

div.code-toolbar > .toolbar .toolbar-item > button:hover,
div.code-toolbar > .toolbar .toolbar-item > button:focus {
  color: #ffffff; /* $weiss */
  background: #3C5587; /* $fmh-dunkelblau */
}

/* Prism line-highlight: kräftige, barrierearme Hervorhebung (dunkle Kante + CD-Gelb-Fläche). Das
   Plugin setzt pre[data-line] padding-left auf 3em – für line-numbers wieder auf 3.8em korrigieren,
   damit die Zeilennummern-Spalte bündig bleibt. */
pre[data-line].line-numbers {
  padding-left: 3.8em;
}

.line-highlight {
  /* Gelb bewusst dezent (niedrige Deckkraft): das Overlay liegt hinter dem Text, ein kräftiges Gelb
     würde den Kontrast der farbigen Syntax-Tokens (v. a. grüne Strings) senken. Das deutliche
     "Abheben" leisten Rahmen + Balken (berühren den Text nicht), die Fläche markiert nur zusätzlich. */
  background: rgba(255, 230, 10, 0.22); /* $fmh-gelb #FFE60A */
  border: 2px solid #16161d; /* $eigengrau */
  border-left-width: 6px;
  border-radius: 2px;
}

/* Code-Tabs: aktiven Tab deutlich hervorheben – über Schriftstärke + obere Akzentkante + Farbe
   (nicht allein über Farbe), inaktive Tabs dezent abgesetzt. */
.demo-code-tabs .nav-link {
  color: #556473; /* $fmh-dunkelgrau */
}

.demo-code-tabs .nav-link:not(.active) {
  background-color: #DCE1E6; /* $fmh-hellblau */
}

.demo-code-tabs .nav-link.active {
  font-weight: 700;
  color: #3C5587; /* $fmh-dunkelblau ($primaerfarbe) */
  box-shadow: inset 0 3px 0 #3C5587; /* $fmh-dunkelblau */
}

/* Anleitungs-Rubrik (gerendertes Markdown) unterhalb der Beispiel-Darstellung:
   dezente Tabellen-Optik, da Markdig reine <table>-Elemente ohne Bootstrap-Klassen liefert. */
.demo-anleitung table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
}

.demo-anleitung th,
.demo-anleitung td {
  padding: 0.375rem 0.5rem;
  border: 1px solid #DCE1E6; /* $fmh-hellblau */
  text-align: left;
  vertical-align: top;
}

.demo-anleitung th {
  background-color: #DCE1E6; /* $fmh-hellblau */
  color: #3C5587; /* $fmh-dunkelblau ($primaerfarbe) */
}

.demo-anleitung > :last-child {
  margin-bottom: 0;
}

/* Lesespalte der Anleitungsseiten (Bereich «Wie funktionierts»): Über die volle Fensterbreite
   werden die Zeilen so lang, dass das Auge beim Zeilenwechsel den Anschluss verliert. 210mm
   entspricht der Breite eines A4-Hochformats und trifft die für Fliesstext übliche Zeilenlänge.
   Gilt bewusst nur für den gerenderten Anleitungstext (.anleitung-inhalt) — die Übersicht mit
   ihren Karten und der Komponenten-Bereich bleiben über die volle Breite. */
.anleitung-inhalt {
  max-width: 240mm;
}

/* Aufklappbare Rubrik (Navigation links, Paket-Karten und Themen-Karten). Der Umschalter ist ein
   Button ohne Button-Optik, damit die Rubrik per Tastatur bedienbar ist und trotzdem wie eine
   Überschrift wirkt. Das Chevron zeigt nach rechts (zu) bzw. nach unten (offen). */
.demo-rubrik-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 0;
  background: none;
  color: #6C757D; /* Bootstrap $secondary-color */
  text-align: left;
}

.demo-rubrik-toggle:hover,
.demo-rubrik-toggle:focus-visible {
  color: #3C5587; /* $fmh-dunkelblau ($primaerfarbe) */
}

.demo-rubrik-titel {
  flex-grow: 1;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* Auf den Karten-Seiten ist die Rubrik eine echte Abschnittsüberschrift und darf grösser wirken. */
.demo-rubrik-toggle-karten .demo-rubrik-titel {
  font-size: 1rem;
  color: #3C5587; /* $fmh-dunkelblau ($primaerfarbe) */
}

.demo-rubrik-chevron {
  display: inline-block;
  font-size: 1.25rem;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform 0.2s ease-in-out;
}

/* Bootstrap setzt .collapsed auf den Umschalter, solange der Bereich zu ist. */
.demo-rubrik-toggle.collapsed .demo-rubrik-chevron {
  transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .demo-rubrik-chevron {
    transition: none;
  }
}