/* sixhop.net Markenbausteine für die Website. Version 2.0, Stand 13.10.2026. Geprüft in Chromium.
   Diese Datei unverändert einbinden. Logo, Claim, Header, Footer, Hero, Kacheln, Buttons und alle weiteren Bausteine
   nur mit diesen Klassen bauen, nie nachbauen. Regeln: docs/entwurf-website.md (W1 bis W13) im Repository corporate-identity.
   Seiten tragen <body class="sx">. Für das Burger-Menü zusätzlich marke.js einbinden. */

@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 700; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }

/* ------------------------------------------------------------------ Tokens (aus marke/tokens.json, Version 6) */
:root {
  --sixhop-blau: #006AB3; --sixhop-orange: #F49E00; --tiefblau: #003A63; --waben-dunkel: #0A4C7E;
  --hellblau: #E3EEF8; --linie: #CFD8E1; --anthrazit: #2B3238; --weiss: #FFFFFF;
  --ink-muted: #55626E; --ink-muted-dunkel: #C3D2E0; --konsole-hell: #DFE9F3; --erfolg-konsole: #45B873;
  --fokus: #003A63;
  --erfolg-flaeche: #E1F0E2; --erfolg-text: #256628; --warnung-flaeche: #FDEFD6;
  --fehler: #C62828; --fehler-flaeche: #F8DDDD; --fehler-text: #A91F1F; --fehler-dunkel: #FF8A80;
  --info-flaeche: #E3EEF8; --info-text: #005A99;
  --font-sans: 'IBM Plex Sans', Arial, Helvetica, sans-serif;
  --font-mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
  --rand: 32px; --spalt: 24px; --sektion: 64px;
  --dauer: 150ms;
}
@media (max-width: 767px) { :root { --rand: 16px; --spalt: 16px; --sektion: 48px; } }
@media (prefers-reduced-motion: reduce) { :root { --dauer: 0ms; } }

/* ------------------------------------------------------------------ Grundlage und Schrift (W1) */
.sx { margin: 0; font: 400 18px/28px var(--font-sans); color: var(--anthrazit); background: var(--weiss); -webkit-text-size-adjust: 100%; }
.sx *, .sx *::before, .sx *::after { box-sizing: border-box; }
.sx h1, .sx h2, .sx h3, .sx h4 { margin: 0 0 8px; color: var(--tiefblau); hyphens: manual; }
.sx h1 { font: 700 32px/40px var(--font-sans); }
.sx h2 { font: 600 24px/32px var(--font-sans); margin-top: 48px; }
.sx h3 { font: 600 18px/26px var(--font-sans); margin-top: 24px; }
.sx h4 { font: 600 16px/24px var(--font-sans); }
.sx h2:first-child, .sx h3:first-child { margin-top: 0; }
.sx p { margin: 0 0 16px; max-width: 70ch; }
.sx .sx-display { font: 700 48px/54px var(--font-sans); color: var(--tiefblau); margin: 0; white-space: nowrap; }
.sx .sx-lead { font: 400 18px/28px var(--font-sans); max-width: 60ch; }
.sx .sx-body { font: 400 16px/24px var(--font-sans); }
.sx .sx-small { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.sx .sx-pr { color: var(--sixhop-orange); }   /* Umleitungszeichen „>“; nie in Textfarbe */
.sx code, .sx pre, .sx .sx-mono { font-family: var(--font-mono); font-size: 14px; line-height: 20px; }
@media (max-width: 767px) {
  .sx { font-size: 16px; line-height: 26px; }
  .sx h1 { font-size: 28px; line-height: 36px; }
  .sx h2 { font-size: 22px; line-height: 30px; }
  .sx .sx-display { font-size: 32px; line-height: 38px; }
  .sx .sx-lead { font-size: 16px; line-height: 26px; }
}
@media (max-width: 359px) { .sx .sx-display { font-size: 8.9vw; line-height: 1.19; } }

/* Aufzählung mit Spiegelstrich in Textfarbe (Komponente Aufzaehlung) */
.sx ul:not([class]) { list-style: none; margin: 0 0 16px; padding: 0; }
.sx ul:not([class]) > li { position: relative; padding-left: 1.05em; }
.sx ul:not([class]) > li::before { content: "-"; position: absolute; left: 0; top: 0; color: currentColor; transform: scaleX(1.6); transform-origin: 0 50%; }

/* ------------------------------------------------------------------ Links und Fokus (W2) */
.sx a:not([class]) { color: var(--sixhop-blau); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--dauer); }
.sx a:not([class]):hover, .sx a:not([class]):active { color: var(--tiefblau); text-decoration-thickness: 2px; }
.sx :focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 2px; }
.sx-tief, .sx-section--tief { --fokus: var(--weiss); }
:is(.sx-tief, .sx-section--tief) a:not([class]), :is(.sx-tief, .sx-section--tief) a:not([class]):hover, :is(.sx-tief, .sx-section--tief) a:not([class]):active { color: var(--weiss); }

/* ------------------------------------------------------------------ Raster und Sektionen (W3b, W4) */
.sx-container { width: 100%; max-width: calc(1200px + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.sx-section { padding: var(--sektion) 0; background: var(--weiss); }
.sx-section--hell { background: var(--hellblau); }
.sx-section--tief, .sx-tief { background: var(--tiefblau); color: var(--weiss); }
:is(.sx-tief, .sx-section--tief) h1, :is(.sx-tief, .sx-section--tief) h2, :is(.sx-tief, .sx-section--tief) h3, :is(.sx-tief, .sx-section--tief) h4, :is(.sx-tief, .sx-section--tief) .sx-display { color: var(--weiss); }
:is(.sx-tief, .sx-section--tief) .sx-small { color: var(--ink-muted-dunkel); }
.sx-grid { display: grid; gap: var(--spalt); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .sx-grid, .sx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sx-grid, .sx-grid--2, .sx-grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ Logo */
/* Logo: immer die SVG-Datei aus design/logos, nie als Text. 4c auf Weiß und Hellblau, negativ auf Tiefblau. */
.sx-logo { display: block; width: var(--logo-w, 192px); height: auto; }
@media (max-width: 767px) { .sx-logo { --logo-w: 160px; } }

/* ------------------------------------------------------------------ Header und Burger-Menü (K3, W2, W3b, W4) */
/* Menüpunkte auf der Grundlinie der Wortmarke (64,5 % der Logohöhe von oben). Header immer hell. */
.sx-header { --logo-w: 192px; display: flex; align-items: baseline; gap: 24px; padding: 24px 0; background: var(--weiss); }
.sx-header .sx-brand { display: block; line-height: 0; flex: none; }
.sx-header .sx-brand .sx-logo { display: inline-block; vertical-align: baseline; margin-bottom: calc(var(--logo-w) * -0.0856); }
.sx-header .sx-nav { white-space: nowrap; font: 600 16px/1.5 var(--font-sans); color: var(--tiefblau); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; transition: border-color var(--dauer); }
.sx-header .sx-nav:hover, .sx-header .sx-nav[aria-current="page"] { color: var(--tiefblau); border-bottom-color: var(--sixhop-orange); }
.sx-header .sx-header-action { margin-left: auto; align-self: center; white-space: nowrap; }
.sx-menu { display: none; margin-left: auto; align-self: center; width: 48px; height: 48px; padding: 12px; background: none; border: 0; border-radius: 4px; color: var(--tiefblau); cursor: pointer; }
.sx-menu svg { display: block; width: 24px; height: 24px; }
/* Top-Zeile für Schnellzugriffe über der Menüzeile: Kontakt links, Kundenbereich (Status, Webmail, Toolbox) rechts.
   Hellblau wie alle Navigation hell (K2); Schrift small 14/20; unter 768 px nur der Kundenbereich. */
.sx-topbar { background: var(--hellblau); font: 400 14px/20px var(--font-sans); }
.sx-topbar .sx-container { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 40px; }
.sx-topbar p { margin: 0; display: flex; gap: 24px; }
.sx-topbar-links { display: flex; gap: 24px; margin-left: auto; }
.sx .sx-topbar a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--tiefblau); text-decoration: none; }
.sx .sx-topbar a:hover { text-decoration: underline; text-underline-offset: 2px; }
.sx-topbar svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 767px) { .sx-topbar-kontakt { display: none !important; } .sx-topbar-links { margin: 0; justify-content: flex-end; width: 100%; gap: 16px; } }
/* Burger-Menü ohne feste Breite (Andreas Nitsche, 19.10.2026): Passen alle Menüpunkte und „Termin buchen“ in eine Zeile,
   steht die Menüzeile, sonst der Burger. marke.js misst das und setzt .ist-burger. Ohne JavaScript bricht die Menüzeile um. */
.sx-header.ist-burger .sx-nav, .sx-header.ist-burger .sx-header-action { display: none; }
.sx-header.ist-burger .sx-menu { display: block; }
html:not(.sx-js) .sx-header { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 767px) { .sx-header { --logo-w: 160px; padding: 16px 0; } }

/* Geöffnetes Menü: weiße Ebene über der ganzen Seite */
.sx-menu-ebene { position: fixed; inset: 0; z-index: 100; background: var(--weiss); overflow-y: auto; }
.sx-menu-ebene[hidden] { display: none; }
.sx-menu-ebene .sx-menu-kopf { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--rand); }
.sx-menu-ebene .sx-menu-kopf .sx-menu { display: block; margin: 0; }
.sx-menu-ebene nav { padding: 8px var(--rand) 32px; }
.sx .sx-menu-ebene nav a:not(.sx-btn) { display: flex; align-items: center; min-height: 52px; font: 600 18px/28px var(--font-sans); color: var(--tiefblau); text-decoration: none; border-bottom: 1px solid var(--linie); }
.sx .sx-menu-ebene nav a:not(.sx-btn):hover { color: var(--tiefblau); }
.sx-menu-ebene nav a span { border-bottom: 2px solid transparent; }
.sx-menu-ebene nav a[aria-current="page"] span, .sx-menu-ebene nav a:hover span { border-bottom-color: var(--sixhop-orange); }
.sx-menu-ebene .sx-btn { width: 100%; margin-top: 24px; }
html.sx-menu-offen { overflow: hidden; }

/* ------------------------------------------------------------------ Buttons (W2, K1) */
.sx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 2px solid transparent; border-radius: 4px;
  font: 600 16px/24px var(--font-sans); text-decoration: none; cursor: pointer; transition: background-color var(--dauer), color var(--dauer), border-color var(--dauer); }
.sx-btn--primaer { background: var(--sixhop-orange); border-color: var(--sixhop-orange); color: var(--tiefblau); }
.sx-btn--sekundaer { background: var(--sixhop-blau); border-color: var(--sixhop-blau); color: var(--weiss); }
.sx-btn--rahmen { background: transparent; border-color: var(--tiefblau); color: var(--tiefblau); }
.sx-btn:hover, .sx-btn:active { background: var(--tiefblau); border-color: var(--tiefblau); color: var(--weiss); }
.sx-btn:disabled, .sx-btn[aria-disabled="true"] { background: var(--hellblau); border-color: var(--hellblau); color: var(--ink-muted); cursor: not-allowed; }
.sx-section--hell .sx-btn:disabled, .sx-section--hell .sx-btn[aria-disabled="true"] { background: var(--weiss); border-color: var(--linie); }
.sx-btn--rahmen:disabled { background: transparent; border-color: var(--linie); }
/* auf Tiefblau: Primär mit weißer Schrift (Ausnahme K1, 2,2 : 1), Rahmen weiß, Hover weiß; kein Sekundär */
:is(.sx-tief, .sx-section--tief) .sx-btn--primaer { color: var(--weiss); }
:is(.sx-tief, .sx-section--tief) .sx-btn--rahmen { border-color: var(--weiss); color: var(--weiss); }
:is(.sx-tief, .sx-section--tief) .sx-btn:hover, :is(.sx-tief, .sx-section--tief) .sx-btn:active { background: var(--weiss); border-color: var(--weiss); color: var(--tiefblau); }
:is(.sx-tief, .sx-section--tief) .sx-btn:disabled { background: var(--waben-dunkel); border-color: var(--waben-dunkel); color: var(--ink-muted-dunkel); }
@media (max-width: 767px) { .sx-btn--voll-mobil { width: 100%; } }

/* ------------------------------------------------------------------ Großform-Waben (B.5.1, W11) */
/* Höchstens eine pro Bildschirm, deckend, oben oder rechts angeschnitten, nie unten, nie unter Text.
   Datei je Grund: Weiß sixhop-grossform-hellblau.svg, Hellblau sixhop-grossform-weiss.svg, Tiefblau sixhop-grossform-dunkel.svg */
.sx-grossform { position: absolute; pointer-events: none; opacity: 1; height: auto; }

/* ------------------------------------------------------------------ Hero (W3a) */
.sx-hero { position: relative; overflow: hidden; padding: 64px 0; background: var(--weiss); }
.sx-hero.sx-tief { background: var(--tiefblau); }
.sx-hero .sx-grossform { --gf: 45vw; width: var(--gf); right: calc(var(--gf) * -0.15); top: calc(var(--gf) * -0.225); }
/* Großform nie unten angeschnitten: Der Hero ist mindestens so hoch wie der sichtbare Teil der Großform (Höhe 1,127 × Breite, oben 0,225 × Breite angeschnitten) plus 24 px. */
.sx-hero { min-height: calc(45vw * 0.902 + 24px); }
.sx-hero .sx-container { position: relative; }
.sx-hero-text { max-width: calc((100% - 11 * var(--spalt)) / 12 * 7 + 6 * var(--spalt)); }
.sx-hero .sx-hero-logo { --logo-w: 192px; margin-bottom: 32px; }
.sx-hero .sx-codezeile { margin: 0 0 16px; color: var(--tiefblau); white-space: pre; }
.sx-hero.sx-tief .sx-codezeile { color: var(--konsole-hell); }
.sx-hero .sx-codezeile .kb { color: var(--sixhop-orange); }
.sx-hero .sx-display { margin-bottom: 24px; }
.sx-hero .sx-lead { margin-bottom: 32px; }
:is(.sx-tief, .sx-section--tief) .sx-lead { color: var(--weiss); }
@media (max-width: 1023px) {
  .sx-hero .sx-grossform { --gf: 55vw; right: calc(var(--gf) * -0.25); top: calc(var(--gf) * -0.28); }
  .sx-hero { min-height: 0; padding-top: calc(55vw * 1.127 * 0.75 - 55vw * 0.03 + 24px); }
  .sx-hero-text { max-width: none; }
}
@media (max-width: 767px) {
  .sx-hero .sx-grossform { --gf: 70vw; }
  .sx-hero { padding-top: calc(70vw * 1.127 * 0.75 - 70vw * 0.03 + 16px); padding-bottom: 48px; }
  .sx-hero .sx-hero-logo { --logo-w: 160px; }
  .sx-hero .sx-btn { width: 100%; }
}

/* ------------------------------------------------------------------ Kachel mit Link (W3a, W8) */
/* Link unten, in allen Kacheln einer Reihe auf einer Höhe; Pfeil auf Bindestrichhöhe. Linktext nennt das Ziel. Ganze Kachel klickbar. */
.sx-card { position: relative; display: flex; flex-direction: column; background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; padding: 24px; color: var(--anthrazit); }
.sx-section--hell .sx-card { border-color: var(--weiss); }
.sx-card--hellblau { background: var(--hellblau); border-color: var(--hellblau); }
.sx-card--tief { background: var(--tiefblau); border-color: var(--tiefblau); color: var(--weiss); --fokus: var(--weiss); }
.sx-card h3 { margin: 0 0 8px; }
.sx .sx-card:not(.sx-card--tief) { --fokus: var(--tiefblau); }
.sx .sx-card:not(.sx-card--tief) h3 { color: var(--tiefblau); }   /* helle Kachel bleibt hell, auch in einer Tiefblau-Sektion */
.sx-card--tief h3 { color: var(--weiss); }
.sx-card p { font-size: 16px; line-height: 24px; margin: 0 0 24px; }
.sx-card .sx-card-icon { width: 32px; height: 32px; margin-bottom: 16px; color: var(--sixhop-blau); stroke-width: 1.5; }
.sx-card--tief .sx-card-icon { color: var(--weiss); }
.sx-card .sx-more { margin-top: auto; font: 600 16px/24px var(--font-sans); color: var(--sixhop-blau); text-decoration: none; white-space: nowrap; }
.sx-card--tief .sx-more { color: var(--weiss); }
.sx-card .sx-more::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.sx-card .sx-more:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.sx-card .sx-more:focus-visible { outline: none; }
.sx-card .sx-more:focus-visible::after { outline: 2px solid var(--fokus); outline-offset: 2px; }
.sx-card .sx-more svg { width: 1em; height: 1em; margin-left: .3em; vertical-align: -0.2em; }

/* ------------------------------------------------------------------ Kennzahl (W3b) */
.sx-kennzahl { margin: 0; }
.sx-kennzahl dt, .sx-kennzahl .sx-kennzahl-wert { display: block; font: 700 48px/52px var(--font-sans); color: var(--tiefblau); }
.sx-kennzahl dd, .sx-kennzahl .sx-kennzahl-text { display: block; margin: 4px 0 0; font: 400 16px/24px var(--font-sans); color: var(--anthrazit); }
:is(.sx-tief, .sx-section--tief) .sx-kennzahl .sx-kennzahl-wert, :is(.sx-tief, .sx-section--tief) .sx-kennzahl dt, :is(.sx-tief, .sx-section--tief) .sx-kennzahl dd, :is(.sx-tief, .sx-section--tief) .sx-kennzahl .sx-kennzahl-text { color: var(--weiss); }
.sx-kennzahlen { display: grid; gap: var(--spalt); grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
@media (max-width: 1023px) { .sx-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sx-kennzahl dt, .sx-kennzahl .sx-kennzahl-wert { font-size: 36px; line-height: 40px; } }

/* ------------------------------------------------------------------ Kontaktbox: Akzentkasten mit Porträt, genau eine Handlung (W3b) */
.sx-kontakt { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 16px 32px; padding: 32px; border: 1px solid var(--linie); border-left: 6px solid var(--sixhop-orange); border-radius: 8px; background: transparent; }
.sx-kontakt .sx-kontakt-person img { display: block; width: 96px; height: 96px; border-radius: 8px; object-fit: cover; }
.sx-kontakt .sx-kontakt-person h4 { margin: 8px 0 0; }
.sx-kontakt .sx-kontakt-person .sx-small { margin: 0; }
.sx-kontakt h2 { margin: 0 0 8px; }
.sx-kontakt p { font-size: 16px; line-height: 24px; }
@media (max-width: 767px) { .sx-kontakt { grid-template-columns: minmax(0, 1fr); padding: 24px; } }

/* ------------------------------------------------------------------ Kundenstimmen und Google-Bewertung (Reputation) */
/* Nur freigegebene Zitate echter Kunden, mit Name, Funktion und Firma. Keine Sterne, kein eingebettetes Google-Widget, kein Review-Markup. */
.sx-stimme { margin: 0; }
.sx-stimme blockquote { margin: 0 0 24px; font: 400 18px/28px var(--font-sans); color: var(--anthrazit); }
.sx-stimme blockquote p { margin: 0; font: inherit; }
.sx-stimme figcaption { margin-top: auto; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.sx-stimme figcaption strong { display: block; font: 600 16px/24px var(--font-sans); color: var(--tiefblau); }
.sx .sx-stimmen > h2 { margin-bottom: 24px; }
.sx .sx-stimmen-hinweis { margin: 16px 0 0; }
.sx .sx-bewertung { max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin: 32px 0 0; padding: 24px 0 0; border-top: 1px solid var(--linie); }
.sx-section--hell .sx-bewertung { border-top-color: var(--weiss); }
.sx-bewertung-wert { font: 700 32px/40px var(--font-sans); color: var(--tiefblau); }
.sx-bewertung-text { font: 400 16px/24px var(--font-sans); color: var(--anthrazit); }
.sx-bewertung .sx-more { font: 600 16px/24px var(--font-sans); color: var(--sixhop-blau); text-decoration: none; }
.sx-bewertung .sx-more:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.sx-bewertung .sx-more svg { width: 1em; height: 1em; margin-left: .3em; vertical-align: -0.2em; }

/* Nur Vorschauseiten: Abstand zwischen gestapelten Bausteinen */
.sx-stapel { display: grid; gap: 24px; }
.sx-stapel--eng { gap: 16px; }

/* ------------------------------------------------------------------ Formulare (W5) */
.sx-form { max-width: 640px; }
.sx-feld { margin: 0 0 24px; }
.sx-feld label, .sx-feld legend { display: block; margin: 0 0 8px; padding: 0; font: 600 16px/24px var(--font-sans); color: var(--tiefblau); }
.sx-feld .sx-optional { font-weight: 400; color: var(--ink-muted); }
.sx-feld input:not([type="checkbox"]):not([type="radio"]), .sx-feld textarea, .sx-feld select {
  display: block; width: 100%; min-height: 48px; padding: 11px 15px; border: 1px solid var(--ink-muted); border-radius: 4px; background: var(--weiss);
  font: 400 16px/24px var(--font-sans); color: var(--anthrazit); transition: border-color var(--dauer); }
.sx-feld textarea { min-height: calc(5 * 24px + 24px); resize: vertical; }
.sx-feld input:focus-visible, .sx-feld textarea:focus-visible, .sx-feld select:focus-visible { border-color: var(--tiefblau); outline: 2px solid var(--fokus); outline-offset: 2px; }
.sx-feld .sx-hilfe { margin: 4px 0 0; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.sx-feld .sx-fehlertext { display: none; margin: 4px 0 0; font: 400 14px/20px var(--font-sans); color: var(--fehler); }
.sx-feld--fehler input:not([type="checkbox"]):not([type="radio"]), .sx-feld--fehler textarea, .sx-feld--fehler select { border: 2px solid var(--fehler); padding: 10px 14px; }
.sx-feld--fehler .sx-fehlertext { display: block; }
fieldset.sx-feld { border: 0; padding: 0; }
.sx-check { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 12px 0; font: 400 16px/24px var(--font-sans); color: var(--anthrazit); cursor: pointer; }
.sx-check input { appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: 1px solid var(--ink-muted); border-radius: 4px; background: var(--weiss) center / 16px no-repeat; cursor: pointer; }
.sx-check input[type="radio"] { border-radius: 50%; }
.sx-check input:checked { background-color: var(--tiefblau); border-color: var(--tiefblau);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.sx-check input[type="radio"]:checked { background-image: radial-gradient(circle, var(--weiss) 0 4px, transparent 5px); }
.sx-check input:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.sx-feld--fehler .sx-check input { border: 2px solid var(--fehler); }
.sx-bestaetigung { padding: 24px; border-radius: 8px; background: var(--hellblau); }
.sx-bestaetigung h3 { margin-top: 0; }
.sx-bestaetigung p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ Tabellen (W10) */
.sx-tabelle { width: 100%; overflow-x: auto; margin: 0 0 24px; }
.sx-tabelle table { width: 100%; border-collapse: collapse; font: 400 16px/24px var(--font-sans); color: var(--anthrazit); }
.sx-tabelle th { text-align: left; font-weight: 600; color: var(--tiefblau); padding: 12px 16px 8px 0; border-bottom: 1px solid var(--tiefblau); white-space: nowrap; }
.sx-tabelle td { white-space: nowrap; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.sx-tabelle .sx-zahl { text-align: right; font-variant-numeric: tabular-nums; }
.sx-tabelle--zebra tbody tr:nth-child(even) td { background: var(--hellblau); }
.sx-tabelle td code { font-size: 14px; }

/* ------------------------------------------------------------------ Status (Komponente StatusBadge) */
.sx-status { display: inline-block; padding: 4px 8px; border: 1px solid currentColor; border-radius: 12px; font: 600 14px/20px var(--font-sans); }
.sx-status--laeuft { background: var(--erfolg-flaeche); color: var(--erfolg-text); }
.sx-status--warnung { background: var(--warnung-flaeche); color: var(--tiefblau); border-color: var(--sixhop-orange); }
.sx-status--fehler { background: var(--fehler-flaeche); color: var(--fehler-text); }
.sx-status--info { background: var(--info-flaeche); color: var(--info-text); }

/* ------------------------------------------------------------------ Preiskachel (W10) */
.sx-preis .sx-preis-betrag { margin: 8px 0 16px; font: 700 32px/40px var(--font-sans); color: var(--tiefblau); }
.sx-preis .sx-preis-betrag .sx-small { font-weight: 400; margin-left: 4px; }
.sx-preis ul:not([class]) { font-size: 16px; line-height: 24px; margin-bottom: 24px; }

/* ------------------------------------------------------------------ Meldungen (W12) */
.sx-meldung { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 8px; font: 400 16px/24px var(--font-sans); }
.sx-meldung svg { flex: none; width: 24px; height: 24px; }
.sx-meldung strong { font-weight: 600; }
.sx-meldung--info { background: var(--hellblau); color: var(--anthrazit); }
.sx-meldung--warnung { background: var(--warnung-flaeche); color: var(--tiefblau); border: 1px solid var(--sixhop-orange); }
.sx-meldung--fehler { background: var(--weiss); color: var(--fehler-text); border: 2px solid var(--fehler); }
.sx-meldung--erfolg { background: var(--erfolg-flaeche); color: var(--erfolg-text); }

/* ------------------------------------------------------------------ Konsole (Design Manual Abschnitt B.4.5) */
/* Befehl in Orange, echte Ausgabe, leere Eingabezeile; Cursor genau am ersten Zeichen nach „$ “. */
.sx-konsole { background: var(--tiefblau); border-radius: 8px; padding: 24px 28px; font: 400 16px/1.5 var(--font-mono); color: var(--konsole-hell); white-space: nowrap; text-align: left; overflow-x: auto; }
.sx-footer .sx-konsole { background: none; padding: 0; border-radius: 0; }
.sx-konsole .kb { color: var(--sixhop-orange); white-space: pre; }
.sx-konsole .out { white-space: pre; }
.sx-konsole .ok { color: var(--erfolg-konsole); white-space: pre; }   /* nur Erfolgsausgaben (K6) */
.sx-konsole .cursor { display: inline-block; width: 1ch; height: 1.15em; background: var(--sixhop-orange); vertical-align: -0.2em; }
@media (max-width: 767px) { .sx-konsole { font-size: 14px; padding: 16px; } }

/* ------------------------------------------------------------------ Claim mit Logo */
/* („Linux > mit Leichtigkeit“): Logo oben, Claim darunter, zweizeilig, linksbündig, Plex Sans Bold.
   Maße wie im Design Manual Abschnitt B.2.1 „Claim“, alle aus der Logobreite abgeleitet:
   Abstand 14,3 % der Logobreite, Schriftgröße 18,1 % der Logobreite, Zeilenhöhe 1,12. */
.sx-claimlogo { --logo-w: 192px; display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--logo-w) * 0.198); }
.sx-claimlogo .sx-claim { margin: 0; font: 700 calc(var(--logo-w) * 0.181)/1.12 var(--font-sans); color: var(--tiefblau); white-space: nowrap; }
.sx-claimlogo .sx-claim .sx-pr { color: var(--sixhop-orange); }
.sx-claimlogo--neg .sx-claim, .sx-footer .sx-claimlogo .sx-claim, :is(.sx-tief, .sx-section--tief) .sx-claimlogo .sx-claim { color: var(--weiss); }   /* auf Tiefblau: Text Weiß, Zeichen bleibt Orange */

/* ------------------------------------------------------------------ Footer */
/* Footer auf Tiefblau. Negativ-Logo (Weiß, Orange bleibt) mit Claim. Tiefblau ist im Web auch für Hero, Sektionen und Kacheln erlaubt, nie für den Header. */
.sx-footer { background: var(--tiefblau); color: var(--weiss); padding: 64px 0; font: 400 16px/24px var(--font-sans); --fokus: var(--weiss); }
.sx-footer a, .sx-footer a:not([class]), .sx-footer a:not([class]):hover { color: var(--weiss); }
.sx-footer h4 { color: var(--weiss); margin: 0 0 8px; }
.sx-footer-spalten { display: grid; gap: var(--spalt); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; }
.sx-footer-spalten ul { list-style: none; margin: 0; padding: 0; }
.sx-footer-spalten li { margin: 0 0 8px; }
/* Adresse als Block: Zeilen direkt untereinander, kein Listen- oder Absatzabstand (Andreas Nitsche, 05.11.2026) */
.sx-adresse { margin: 0 0 16px; font-style: normal; }
.sx-footer .sx-small { color: var(--ink-muted-dunkel); }
@media (max-width: 1023px) { .sx-footer-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sx-footer { padding: 48px 0; } .sx-footer-spalten { grid-template-columns: minmax(0, 1fr); } }