/* KI Boost Mittelstand — Seitenlayout
   Ergänzt ki-boost.css. Enthält nur Anordnung, keine neuen Markenwerte.
   Marke der dotnet Services GmbH */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img, svg { max-width: 100%; height: auto; }

/* Grundfläche ist Nebel statt Weiß. Die Karten und die hellen Abschnitte
   sind dafür Weiß — das Verhältnis 60 bis 70 % helle Fläche nach
   CI-Handbuch 3 bleibt erhalten, die Seite wirkt nur ruhiger. */
body { margin: 0; -webkit-font-smoothing: antialiased; background: var(--kb-nebel-50); }
.kb-card { background: var(--kb-weiss); box-shadow: var(--kb-shadow); }
.kb-card--dunkel { background: var(--kb-petrol-700); box-shadow: none; }
.kb-note { background: var(--kb-weiss); }
/* Grau auf Nebel ist nach CI-Handbuch 3 unzulässig. Auf der Grundfläche
   steht deshalb Tinte, Grau nur noch innerhalb weißer Karten. */
.kb-stat__label, .kb-etikett, .kb-preis__zusatz { color: var(--kb-tinte); }

/* ---------- Raster ---------- */

.kb-breite { width: min(1120px, 100% - 2 * var(--kb-space-l)); margin-inline: auto; }
.kb-schmal { max-width: 68ch; }                 /* Zeilenlänge unter 90 Zeichen */
/* Beide Klassen am selben Element: Behälter bleibt breit und zentriert,
   der Text darin bleibt schmal und linksbündig — sonst rutscht die Spalte
   in die Seitenmitte und der Aufbau springt von Seite zu Seite. */
.kb-breite.kb-schmal { max-width: none; }
.kb-breite.kb-schmal > * { max-width: 68ch; }
.kb-abschnitt { padding: clamp(48px, 7vw, 88px) 0; }
.kb-abschnitt--eng { padding: clamp(32px, 4vw, 48px) 0; }
.kb-flaeche { background: var(--kb-weiss); }   /* abgesetzter Abschnitt auf der Nebel-Grundfläche */

.kb-raster { display: grid; gap: var(--kb-space-l); }
@media (min-width: 720px) {
  .kb-raster--2 { grid-template-columns: repeat(2, 1fr); }
  .kb-raster--3 { grid-template-columns: repeat(3, 1fr); }
  .kb-raster--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) { .kb-raster--4 { grid-template-columns: repeat(4, 1fr); } }

.kb-vorspann { font-size: 1.15rem; color: var(--kb-tinte); }
.kb-section--dunkel .kb-vorspann { color: var(--kb-blaugrau-100); }
.kb-knopfreihe { display: flex; flex-wrap: wrap; gap: var(--kb-space-m); margin-top: var(--kb-space-l); }
/* Leise Schaltfläche auf dunklem Grund — Petrol-Kontur wäre dort unsichtbar. */
.kb-section--dunkel .kb-button--leise,
.kb-aufmacher--dunkel .kb-button--leise,
.kb-button--hell,
.kb-fuss .kb-button--leise { color: var(--kb-weiss); box-shadow: inset 0 0 0 2px var(--kb-weiss); }
.kb-section--dunkel .kb-button--leise:hover,
.kb-aufmacher--dunkel .kb-button--leise:hover,
.kb-button--hell:hover { background: var(--kb-petrol-900); color: var(--kb-weiss); }
h1 + .kb-vorspann, h2 + .kb-vorspann { margin-top: var(--kb-space-m); }

/* ---------- Sprungmarke für Tastaturbedienung ---------- */

.kb-sprung {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--kb-petrol-700); color: var(--kb-weiss);
  padding: 12px 20px; border-radius: 0 0 var(--kb-radius) 0; text-decoration: none;
}
.kb-sprung:focus { left: 0; color: var(--kb-weiss); }

/* ---------- Kopf ---------- */

.kb-kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--kb-weiss);
  border-bottom: 1px solid var(--kb-linie);
}
.kb-kopf__zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--kb-space-m); min-height: 96px;
}
/* Schutzraum nach CI-Handbuch 2: rundherum mindestens die Höhe des „K".
   Bei 58 px Logohöhe sind das rund 18 px — die Zeilenhöhe von 96 px hält
   diesen Abstand oben und unten ein. Höhe wird gesetzt, nicht die Breite:
   das Logo ist 262 : 102 hoch, sonst überragt es die Zeile. */
.kb-kopf__logo { display: flex; align-items: center; padding: 19px 0; }
.kb-kopf__logo img { height: 58px; width: auto; }   /* ergibt 149 px Breite, über der Mindestgröße von 120 px */
@media (max-width: 420px) {
  .kb-kopf__zeile { min-height: 84px; }
  .kb-kopf__logo { padding: 16px 0; }
  .kb-kopf__logo img { height: 50px; }
}

.kb-navi { display: flex; align-items: center; gap: var(--kb-space-l); }
.kb-navi a {
  font-weight: 600; text-decoration: none; color: var(--kb-tinte);
  padding: 6px 0; font-size: 1rem;
}
.kb-navi a:hover { color: var(--kb-petrol-700); }
.kb-navi a[aria-current="page"] { color: var(--kb-petrol-700); }
/* Die Regel .kb-navi a ist stärker als .kb-button und würde sonst die
   Schaltfläche dunkel auf Petrol setzen. */
.kb-navi a.kb-button { padding: 10px 20px; font-size: .95rem; color: var(--kb-weiss); }
.kb-navi a.kb-button:hover { color: var(--kb-weiss); }

.kb-schalter { display: none; }
.kb-schalter__knopf {
  display: none; align-items: center; gap: 8px;
  font-family: var(--kb-font-body); font-weight: 700; font-size: .95rem;
  color: var(--kb-petrol-700); background: transparent;
  border: 2px solid var(--kb-petrol-700); border-radius: var(--kb-radius);
  padding: 8px 14px; cursor: pointer;
}

@media (max-width: 900px) {
  .kb-schalter__knopf { display: inline-flex; }
  .kb-navi {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--kb-weiss); border-bottom: 1px solid var(--kb-linie);
    padding: var(--kb-space-s) var(--kb-space-l) var(--kb-space-l);
  }
  .kb-navi a { padding: 14px 0; border-bottom: 1px solid var(--kb-linie); }
  .kb-navi .kb-button { margin-top: var(--kb-space-m); text-align: center; border-bottom: 0; }
  .kb-schalter:checked ~ .kb-navi { display: flex; }
}

/* ---------- Aufmacher ---------- */

.kb-aufmacher { padding: clamp(48px, 8vw, 104px) 0 clamp(40px, 6vw, 72px); }
.kb-aufmacher h1 { margin: 0; }
.kb-aufmacher .kb-vorspann { font-size: 1.3rem; color: var(--kb-tinte); }

/* Aufmacher auf Petrol. „Dunkel und hell im Wechsel" nach CI-Handbuch 5 —
   der Auftakt trägt Farbe, der Inhalt darunter steht auf hellem Grund. */
.kb-aufmacher--dunkel { background: var(--kb-petrol-700); }
.kb-aufmacher--dunkel h1 { color: var(--kb-weiss); }
.kb-aufmacher--dunkel .kb-vorspann { color: var(--kb-blaugrau-100); }
/* Der kurze Amber-Strich ist ein festgelegtes Markenelement (CI-Handbuch 4). */
.kb-strich { width: 84px; height: 5px; background: var(--kb-amber-500); border-radius: 2px; margin-bottom: var(--kb-space-l); }

/* ---------- Karten und Listen ---------- */

.kb-card h3 { margin-top: 0; }
.kb-card p:last-child { margin-bottom: 0; }
.kb-card--dunkel p { color: var(--kb-blaugrau-100); }

.kb-schritt { display: flex; gap: var(--kb-space-m); align-items: flex-start; }
/* Ziffern mittig im Kreis.
   Eine Zeilenbox ist dafür der falsche Bezug: sie ist so hoch wie Ober- und
   Unterlänge der Schrift zusammen, und dieses Verhältnis ist bei jeder Schrift
   anders. Cambria sitzt darin tiefer als Georgia oder DejaVu — zentriert man
   die Zeilenbox, steht die Ziffer je nach installierter Schrift woanders.
   Bezug ist deshalb die Versalhöhe: `text-box` schneidet oben auf Versalhöhe
   und unten auf Grundlinie zu, danach ist die Kiste genau so hoch wie die
   Ziffer selbst und mittig heißt wirklich mittig — in jeder Schrift.
   Für Browser ohne `text-box` bleibt der Notbehelf mit Zeilenbox und einer
   kleinen Rücknahme nach oben. */
.kb-schritt__nr {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px;
  background: var(--kb-amber-500); color: var(--kb-petrol-900);
  font-family: var(--kb-font-heading); font-weight: 700; font-size: 1.25rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  display: grid; place-content: center; text-align: center;
}
.kb-schritt__ziffer { display: block; line-height: 1; padding-bottom: .09em; }

@supports (text-box: trim-both cap alphabetic) {
  .kb-schritt__ziffer { text-box: trim-both cap alphabetic; padding-bottom: 0; }
}
.kb-schritt h3 { margin: 4px 0 var(--kb-space-s); }
.kb-schritt p { margin: 0; }

.kb-kennzahl { text-align: left; }
/* Kacheln auf Petrol sind Petrol Tief — CI-Handbuch 3, „Karten auf Petrol". */
.kb-section--dunkel .kb-card--dunkel { background: var(--kb-petrol-900); }
.kb-kennzahl .kb-stat { margin-bottom: var(--kb-space-s); }
.kb-kennzahl .kb-stat__label { margin: 0; }
.kb-section--dunkel .kb-stat { color: var(--kb-weiss); }
.kb-section--dunkel .kb-stat__label { color: var(--kb-blaugrau-100); }

.kb-preis {
  font-family: var(--kb-font-heading); font-weight: 700;
  font-size: 2.2rem; color: var(--kb-petrol-700); line-height: 1.1;
  display: block; margin-bottom: var(--kb-space-s);
}
.kb-preis__zusatz { font-size: .95rem; color: var(--kb-grau-500); font-family: var(--kb-font-body); font-weight: 400; }

.kb-tabellenrahmen {
  overflow-x: auto; background: var(--kb-weiss);
  border-radius: var(--kb-radius-lg); box-shadow: var(--kb-shadow);
}
table.kb-table { min-width: 520px; }
/* Preise nie am Euro-Zeichen umbrechen lassen. Zusätzlich stehen im Text
   geschützte Leerzeichen, das hier fängt auch Zellen ohne solche ab. */
table.kb-table td, table.kb-table th { white-space: nowrap; }
table.kb-table td.kb-fliess, table.kb-table th.kb-fliess { white-space: normal; }
.kb-preis { white-space: nowrap; }
/* Die Zeilenkopf-Farbe regelt seit dem 23.08.2026 ki-boost.css selbst. */
table.kb-table thead th:first-child { width: 34%; }

/* ---------- Für Bildschirmleser, nicht fürs Auge ---------- */

.kb-versteckt { position: absolute; left: -9999px; }

/* ---------- Eigener Symbolsatz ---------- */

/* Ein Motiv, konsequent: jedes Zeichen steht im Amber-Kreis, gleiche Größe,
   gleiche Strichstärke. Siehe _symbole.py.
   Ohne diese Regeln zeigt der Browser das nackte SVG — es hat absichtlich
   keine width- und height-Attribute und füllt dann die ganze Karte. */
.kb-symbol {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--kb-amber-500); color: var(--kb-petrol-900);
  margin-bottom: var(--kb-space-m);
}
.kb-symbol svg { width: 24px; height: 24px; display: block; }
.kb-card--dunkel .kb-symbol, .kb-section--dunkel .kb-symbol { background: var(--kb-amber-500); }

/* ---------- Aufmacher mit Bild ---------- */

.kb-aufmacher__raster { display: grid; gap: var(--kb-space-xl); align-items: center; }
@media (min-width: 900px) {
  .kb-aufmacher__raster { grid-template-columns: 1.05fr .95fr; gap: 56px; }
}
.kb-bild { width: 100%; height: auto; display: block; }
@media (max-width: 899px) { .kb-bild { max-width: 480px; } }

/* Auf schmalen Bildschirmen steht die Zeichnung über der Überschrift.
   Sonst beginnt die Seite mit einer Textwand und der Leser sieht als Erstes
   nichts, was ihn hält. Nur im Aufmacher — in den Bausteinabschnitten
   erklärt das Bild den Text und gehört deshalb dahinter. */
@media (max-width: 899px) {
  .kb-aufmacher .kb-aufmacher__raster { gap: var(--kb-space-l); }
  .kb-aufmacher .kb-aufmacher__raster > :last-child { order: -1; }
}

/* ---------- Referenzen ---------- */

.kb-referenz { display: flex; flex-direction: column; }
.kb-referenz h3 { margin-top: 0; font-size: 1.1rem; }
.kb-referenz__branche { font-size: .9rem; color: var(--kb-grau-500); margin: 0 0 var(--kb-space-m); }
/* Bewusst ruhig gehalten: drei Amber-Marken nebeneinander würden sich nach
   CI-Handbuch 3 gegenseitig aufheben. Der einzige Amber-Akzent des
   Abschnitts bleibt der Strich in der Überschrift. */
.kb-referenz__baustein {
  display: inline-block; align-self: flex-start;
  font-size: .85rem; font-weight: 700;
  color: var(--kb-petrol-700); background: var(--kb-nebel-50);
  padding: 4px 10px; border-radius: var(--kb-radius); margin-bottom: var(--kb-space-m);
}
.kb-referenz p:last-child { margin-bottom: 0; }
/* Platzhalter fallen absichtlich auf. Sie dürfen nicht online gehen. */
.kb-platzhalter {
  background: var(--kb-amber-500); color: var(--kb-petrol-900);
  padding: 1px 6px; border-radius: 3px; font-weight: 700;
}

/* ---------- Kontaktzeile ---------- */

.kb-kontaktliste { list-style: none; padding: 0; margin: 0; }
.kb-kontaktliste li { margin-bottom: var(--kb-space-m); }
.kb-kontaktliste .kb-etikett { display: block; font-size: .85rem; color: var(--kb-grau-500); }
.kb-kontaktliste .kb-wert { font-size: 1.15rem; font-weight: 700; color: var(--kb-petrol-700); text-decoration: none; }

/* ---------- Fuß ---------- */

.kb-fuss { background: var(--kb-petrol-900); color: var(--kb-blaugrau-100); padding: var(--kb-space-xl) 0 var(--kb-space-l); }
.kb-fuss a { color: var(--kb-blaugrau-100); }
.kb-fuss a:hover { color: var(--kb-weiss); }
.kb-fuss h3 { color: var(--kb-weiss); font-size: 1rem; margin: 0 0 var(--kb-space-m); }
.kb-fuss__logo { width: 200px; margin-bottom: var(--kb-space-m); }
.kb-fuss ul { list-style: none; padding: 0; margin: 0; }
.kb-fuss li { margin-bottom: 10px; }
.kb-fuss__unten {
  margin-top: var(--kb-space-xl); padding-top: var(--kb-space-m);
  border-top: 1px solid var(--kb-blaugrau-200);
  font-size: .85rem; display: flex; flex-wrap: wrap; gap: var(--kb-space-m); justify-content: space-between;
}

/* ---------- Fließtext ---------- */

.kb-text h2:first-child { margin-top: 0; }
.kb-text ol { padding-left: 1.2em; }
.kb-text dt { font-weight: 700; color: var(--kb-petrol-700); margin-top: var(--kb-space-m); }
.kb-text dd { margin: 4px 0 0; }

@media print {
  .kb-kopf, .kb-fuss, .kb-knopfreihe { display: none; }
  body { font-size: 11pt; }
}