/* ============================================================ sportinformatik — Markenschicht ============================================================ Wird NACH dist/css/sportinformatik.css und NACH damba-shell.css geladen (Schicht 4 in Damba.WebUi/Views/Shared/_Layout.cshtml). WAS HIER LEBT UND WARUM ES NICHT INS KOMPILIERTE THEME KANN Das Kendo-Theme deckt Widgets ab. Es kennt Bootstraps --bs-*-Variablen nicht, weiß nichts von .landing-content und kann Form-Details wie den Buttonradius aus der Bildmarke nicht ausdrücken. Genau diese Lücken füllt diese Datei. @font-face steht NICHT hier — das kompiliert aus dist/scss/_fonts.scss in sportinformatik.css, wo die relativen Pfade einen Umzug ins Paket unbeschadet überstehen. KEINE Shell-Grid-Regeln hier. Die Shell-Struktur gehört nach Damba.WebUi/wwwroot/static/css/damba-shell.css. ============================================================ */ :root { /* -- Marke --------------------------------------------------- Übernommen aus dem :root-Block der Landingpage, damit Produkt und Marketingseite nicht auseinanderlaufen können. Das kompilierte Theme führt dieselben Werte als --kendo-color-*; unter --si-* stehen sie zusätzlich, weil DCL-Landingpages gegen diese Namen schreiben. Werte aus dem Logo-Manual (SportInformatik_logo-prez-02, Farbwelten color 01/02/03). */ --si-cyan: #00BBF1; /* color 01 — Primärton der Bildmarke */ --si-cyan-light: #43CDF4; --si-blue: #0095D9; /* color 02 */ --si-blue-deep: #0068B4; /* color 01 — Flächenblau, = primary */ --si-navy: #00539B; /* color 03 */ --si-navy-dark: #003B76; /* color 03 — Tiefe */ --si-ink: #221F1F; /* Logo-Schwarz */ --si-graphite: #454547; /* color 02 — Grauwert */ /* Die Seitenrinne der ganzen Shell — EIN Wert, damit AppBar und Inhalt auf derselben Senkrechten stehen. Vorher trug die AppBar 1rem und die Inhaltsspalte 0; gemessen stand der Text dadurch 16px LINKS vom Logo. Der Wert stammt aus dem boxed-Entwurf (--gutter). Die Landingpage nutzt dieselbe Variable, deklariert sie aber nicht mehr selbst. */ --si-gutter: clamp(20px, 5vw, 72px); /* Seitentöne */ --si-bg: #FFFFFF; --si-surface: #F6F7F8; --si-text: #221F1F; --si-text-2: #454547; --si-text-3: #6B6767; --si-border: rgba(34, 31, 31, .32); /* Form — hart. "Flächen sind hart, nur markenabgeleitete Formen sind gerundet" (index.html, Zeile 66). Die Rundquadrate der Bildmarke haben r ≈ 22 % der Seitenlänge; --si-radius-btn ist daraus abgeleitet (22 % von 44px Buttonhöhe), nicht gewählt. */ --si-radius-sm: 4px; --si-radius: 6px; --si-radius-btn: 8px; --si-radius-circle: 50%; /* Der Entwurf arbeitet ohne Schatten ("kein Verlauf, kein Schatten"). Diese beiden existieren nur für Overlays, die ohne Trennung vom Untergrund nicht lesbar wären — Dialoge, Dropdowns. Flächen im Fluss bekommen eine Kante, keinen Schatten. */ --si-shadow-overlay: 0 8px 24px rgba(34, 31, 31, .16); --si-shadow-popup: 0 2px 8px rgba(34, 31, 31, .12); /* Type — EINE Familie. Anders als bei Damba ist die Paarung hier nicht Teil der Identität: der Entwurf setzt Poppins durchgehend und trennt Display von Fließtext nur über Schnitt und Laufweite. */ --si-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* -- Typografische Skala ------------------------------------- EINE Familie, sechs Textstufen, zwei Laufweiten. Die Werte standen bisher als Literale verstreut: 6 Selektoren für die Rubrikzeile, 11 für den kleinen Fließtext, 4 für Kartenüberschriften — verteilt auf home.dcl und das Footer-Partial. Optisch stimmig, aber genau so entstehen Abweichungen: angefasst wird eine Kopie, nicht alle. Zwei waren am 2026-08-18 bereits abgedriftet. Hier stehen sie einmal. Aufrufer schreiben var(--si-fs-…, ) — im Damba-Kontext greift das Token, standalone der Fallback, genau wie bei den Farben. 1.5rem fehlt bewusst: dieser Wert ist auf der Seite ausschließlich Icon-Größe, nie Text. */ --si-fs-label: .75rem; /* Rubriken über einem Block, gesperrt, versal */ --si-fs-sm: .875rem; /* kleiner Fließtext, Listen, Bildunterschriften */ --si-fs-body: 1rem; /* Fließtext */ --si-fs-card: 1.25rem; /* Kartenüberschrift, h3-Rang innerhalb eines Panels */ --si-fs-h2: clamp(1.75rem, 3.4vw, 2.5rem); --si-fs-h1: clamp(2.375rem, 5vw, 3.75rem); --si-fs-stat: clamp(3.25rem, 7vw, 4.5rem); --si-track-tight: -.02em; /* Überschriften */ --si-track-label: .1em; /* gesperrte Rubriken */ /* -- Bootstrap-Brücke ---------------------------------------- Komponenten, die --bs-* lesen, erben die Palette, ohne dass Bootstrap neu gebaut werden muss. Quelle sind die --kendo-color-*-Properties, damit es genau eine Wahrheit gibt; der Literalwert ist nur Fallback. ⚠ --bs-primary allein reicht NICHT. Bootstrap 5.3 kompiliert seine Komponenten gegen SCSS-Werte und liest zur Laufzeit andere Properties: Buttons ihre eigenen --bs-btn-*, Links --bs-link-color-RGB (Tripel, nicht Hex). Wer nur --bs-primary setzt, misst hinterher #0d6efd auf jedem .btn-primary und jedem Link — auf /theme-test genau so gemessen. Die Zuweisungen weiter unten sind deshalb der eigentliche Teil der Brücke; DambaCms' site.css hat dieselbe Lücke. */ --bs-body-bg: var(--kendo-color-app-surface, #FFFFFF); --bs-body-color: var(--kendo-color-on-app-surface, #221F1F); --bs-body-font-family: var(--si-font); --bs-primary: var(--kendo-color-primary, #0068B4); --bs-primary-rgb: 0, 104, 180; --bs-secondary: var(--kendo-color-secondary, #00BBF1); --bs-secondary-rgb: 0, 187, 241; --bs-link-color: var(--kendo-color-primary-on-surface, #0068B4); --bs-link-color-rgb: 0, 104, 180; --bs-link-hover-color: var(--kendo-color-primary-hover, #00539B); --bs-link-hover-color-rgb: 0, 83, 155; --bs-border-color: var(--kendo-color-border, rgba(34, 31, 31, .32)); --bs-border-radius: var(--si-radius); --bs-border-radius-sm: var(--si-radius-sm); --bs-border-radius-lg: var(--si-radius-btn); } /* -- Bootstrap-Buttons ---------------------------------------- Jede .btn-{rolle} bringt ihre --bs-btn-*-Werte in der eigenen Regel mit, gesetzt aus Bootstraps Kompilierzeit-Palette. Sie müssen deshalb pro Klasse überschrieben werden, nicht global. Reihenfolge der Zustände wie bei Kendo: hover/active bewegen sich vom on-Farbwert weg, siehe _tokens.scss. */ .btn-primary { --bs-btn-bg: var(--kendo-color-primary, #0068B4); --bs-btn-border-color: var(--kendo-color-primary, #0068B4); --bs-btn-color: var(--kendo-color-on-primary, #FFFFFF); --bs-btn-hover-bg: var(--kendo-color-primary-hover, #00539B); --bs-btn-hover-border-color: var(--kendo-color-primary-hover, #00539B); --bs-btn-hover-color: var(--kendo-color-on-primary, #FFFFFF); --bs-btn-active-bg: var(--kendo-color-primary-active, #003B76); --bs-btn-active-border-color: var(--kendo-color-primary-active, #003B76); --bs-btn-active-color: var(--kendo-color-on-primary, #FFFFFF); --bs-btn-disabled-bg: var(--kendo-color-primary, #0068B4); --bs-btn-disabled-border-color: var(--kendo-color-primary, #0068B4); --bs-btn-disabled-color: var(--kendo-color-on-primary, #FFFFFF); } /* Cyan mit Tinte, nicht mit Weiß — Weiß auf #00BBF1 sind 2.24:1. Entspricht .btn-si der Landingpage. */ .btn-secondary { --bs-btn-bg: var(--kendo-color-secondary, #00BBF1); --bs-btn-border-color: var(--kendo-color-secondary, #00BBF1); --bs-btn-color: var(--kendo-color-on-secondary, #221F1F); --bs-btn-hover-bg: var(--kendo-color-secondary-hover, #43CDF4); --bs-btn-hover-border-color: var(--kendo-color-secondary-hover, #43CDF4); --bs-btn-hover-color: var(--kendo-color-on-secondary, #221F1F); --bs-btn-active-bg: var(--kendo-color-secondary-active, #6BD8F7); --bs-btn-active-border-color: var(--kendo-color-secondary-active, #6BD8F7); --bs-btn-active-color: var(--kendo-color-on-secondary, #221F1F); --bs-btn-disabled-bg: var(--kendo-color-secondary, #00BBF1); --bs-btn-disabled-border-color: var(--kendo-color-secondary, #00BBF1); --bs-btn-disabled-color: var(--kendo-color-on-secondary, #221F1F); } .btn-success { --bs-btn-bg: var(--kendo-color-success, #198754); --bs-btn-border-color: var(--kendo-color-success, #198754); --bs-btn-color: var(--kendo-color-on-success, #FFFFFF); --bs-btn-hover-bg: var(--kendo-color-success-hover, #146C43); --bs-btn-hover-border-color: var(--kendo-color-success-hover, #146C43); --bs-btn-hover-color: var(--kendo-color-on-success, #FFFFFF); --bs-btn-active-bg: var(--kendo-color-success-active, #0F5132); --bs-btn-active-border-color: var(--kendo-color-success-active, #0F5132); --bs-btn-active-color: var(--kendo-color-on-success, #FFFFFF); } /* Bootstrap nennt `danger`, was Kendo `error` nennt. */ .btn-danger { --bs-btn-bg: var(--kendo-color-error, #C62828); --bs-btn-border-color: var(--kendo-color-error, #C62828); --bs-btn-color: var(--kendo-color-on-error, #FFFFFF); --bs-btn-hover-bg: var(--kendo-color-error-hover, #A92020); --bs-btn-hover-border-color: var(--kendo-color-error-hover, #A92020); --bs-btn-hover-color: var(--kendo-color-on-error, #FFFFFF); --bs-btn-active-bg: var(--kendo-color-error-active, #8C1A1A); --bs-btn-active-border-color: var(--kendo-color-error-active, #8C1A1A); --bs-btn-active-color: var(--kendo-color-on-error, #FFFFFF); } .btn-warning { --bs-btn-bg: var(--kendo-color-warning, #E8A33D); --bs-btn-border-color: var(--kendo-color-warning, #E8A33D); --bs-btn-color: var(--kendo-color-on-warning, #221F1F); --bs-btn-hover-bg: var(--kendo-color-warning-hover, #EEB765); --bs-btn-hover-border-color: var(--kendo-color-warning-hover, #EEB765); --bs-btn-hover-color: var(--kendo-color-on-warning, #221F1F); --bs-btn-active-bg: var(--kendo-color-warning-active, #F3C98B); --bs-btn-active-border-color: var(--kendo-color-warning-active, #F3C98B); --bs-btn-active-color: var(--kendo-color-on-warning, #221F1F); } .btn-info { --bs-btn-bg: var(--kendo-color-info, #0095D9); --bs-btn-border-color: var(--kendo-color-info, #0095D9); --bs-btn-color: var(--kendo-color-on-info, #221F1F); --bs-btn-hover-bg: var(--kendo-color-info-hover, #2BAAE4); --bs-btn-hover-border-color: var(--kendo-color-info-hover, #2BAAE4); --bs-btn-hover-color: var(--kendo-color-on-info, #221F1F); --bs-btn-active-bg: var(--kendo-color-info-active, #55BCEB); --bs-btn-active-border-color: var(--kendo-color-info-active, #55BCEB); --bs-btn-active-color: var(--kendo-color-on-info, #221F1F); } /* Outline-Varianten: Schrift und Rahmen tragen die Farbe, gefüllt wird erst beim Hover. */ .btn-outline-primary { --bs-btn-color: var(--kendo-color-primary-on-surface, #0068B4); --bs-btn-border-color: var(--kendo-color-primary, #0068B4); --bs-btn-hover-bg: var(--kendo-color-primary, #0068B4); --bs-btn-hover-border-color: var(--kendo-color-primary, #0068B4); --bs-btn-hover-color: var(--kendo-color-on-primary, #FFFFFF); --bs-btn-active-bg: var(--kendo-color-primary-active, #003B76); --bs-btn-active-border-color: var(--kendo-color-primary-active, #003B76); --bs-btn-active-color: var(--kendo-color-on-primary, #FFFFFF); --bs-btn-disabled-color: var(--kendo-color-primary, #0068B4); --bs-btn-disabled-border-color: var(--kendo-color-primary, #0068B4); } .btn-outline-secondary { --bs-btn-color: var(--kendo-color-secondary-on-surface, #00688A); --bs-btn-border-color: var(--kendo-color-secondary-on-surface, #00688A); --bs-btn-hover-bg: var(--kendo-color-secondary, #00BBF1); --bs-btn-hover-border-color: var(--kendo-color-secondary, #00BBF1); --bs-btn-hover-color: var(--kendo-color-on-secondary, #221F1F); --bs-btn-active-bg: var(--kendo-color-secondary-active, #6BD8F7); --bs-btn-active-border-color: var(--kendo-color-secondary-active, #6BD8F7); --bs-btn-active-color: var(--kendo-color-on-secondary, #221F1F); } /* -- Basis --------------------------------------------------- */ /* Der Seitengrund ist NICHT mehr die Seitenflaeche. Seit dem boxed-Entwurf (webdesign/sportinformatik-mockup-boxed.html) steht die Seite als begrenzte weisse Bahn auf einem grauen Grund; body traegt den Grund, .app-shell die Bahn. --kendo-color-app-surface bleibt Weiss und beschreibt weiterhin die Flaeche, auf der Text steht — sie ist nur nicht mehr randlos. #E9EBED ist der Wert aus dem Entwurf. Er steht als Festwert und nicht als Token, weil Kendo keine Rolle fuer "Grund ausserhalb der Seitenflaeche" kennt: jedes vorhandene Token beschreibt eine Flaeche, auf der etwas steht. Ein neues --kendo-* dafuer zu erfinden haette eine Rolle vorgetaeuscht, die das Framework nicht hat. */ body { background-color: #E9EBED; color: var(--kendo-color-on-app-surface, #221F1F); font-family: var(--si-font); -webkit-font-smoothing: antialiased; } /* -- Die weisse Bahn ------------------------------------------ .app-shell ist das Grid aus AppBar-Zeile, Body-Zeile und Footer-Zeile (damba-shell.css, Zeile 260) und damit der einzige Knoten, der alle drei umschliesst — die Bahn kann nur hier haengen. KEIN overflow, in keiner Richtung. .app-appbar-row ist position:sticky, und ein overflow-Wert ungleich visible auf einem Vorfahren macht sticky wirkungslos. Das ist der Grund, warum die Kante hier ueber box-shadow gezogen wird und nicht ueber border: ein border haette die 1320px zusaetzlich um 2px verbreitert und die Bahn gegen --appbar-w/--content-w verschoben, die beide ebenfalls auf 1320 stehen. min-height:100vh steht bereits auf .app-shell; die Bahn reicht dadurch auch auf kurzen Seiten bis zum unteren Rand und der graue Grund erscheint nicht als Streifen unter dem Footer. */ .app-shell { max-width: 1320px; margin-inline: auto; background-color: var(--kendo-color-app-surface, #FFFFFF); box-shadow: 0 0 0 1px #E4E2E2; } /* -- Innenabstand der Inhaltsspalte --------------------------- damba-shell.css setzt padding-inline: 1rem auf .center-pane und begruendet ausfuehrlich, warum der Wert dort und nicht als Bootstrap-Utility steht (Utilities tragen !important, eine Shell-Dimension darf nicht in fremdem !important liegen). Genau deshalb ist er hier ueberschreibbar. Es bleibt bei der RINNE. Hier standen zwischenzeitlich auch `width: auto` bzw. `max-width: 100%`, um einen Ueberlauf von genau einer Scrollleistenbreite zu beseitigen: --content-w ist min(, 100vw), und 100vw zaehlt die Leiste mit, weshalb die Spalte auf schmalen Fenstern um ~15px breiter wird als ihr Elternblock. Diese Korrektur ist zurueckgenommen, weil sie teurer war als der Fehler: der Deckel klemmt die Spalte an ihren Elternblock, und wenn die Spalte in einer schmalen Rasterspalte landet (auf /Admin/Hubs gemessen), schrumpft sie darauf zusammen statt sie zu ueberschreiten. Bootstrap-Spalten sind Prozentbreiten; aus 280px Elternbreite wurden 51px Spalte und 0px Textbreite — die Karten brachen nach jedem Buchstaben um. Ein sichtbarer Ueberlauf von 15px ist harmlos, kollabierte Karten sind es nicht. Der Fehler gehoert ohnehin nicht hierher: die 100vw-Formel steht in damba-shell.css und muesste dort scrollleistenbewusst werden. GILT NICHT FUER LANDINGPAGES. damba-shell.css:433 setzt `.center-pane:has(> .landing-content) { padding-inline: 0 }` und ist mit seinem :has() spezifischer als diese Regel — eine Landingpage reicht absichtlich bis an die Spaltenkante und zieht ihren Einzug selbst (home.dcl, --shell/--si-gutter). Beide Wege landen bei derselben Textbreite; wer hier etwas aendert, muss dort nachziehen. */ .center-pane { padding-inline: var(--si-gutter); } /* -- Überschriften ------------------------------------------- Kendo kennt für Überschriften kein Token — Schnitt, Laufweite und Zeilenhöhe kommen deshalb hier, mit denselben Werten wie in der Landingpage (font-weight 700, line-height 1.12, letter-spacing -.02em). Die enge Laufweite ist das, was den Poppins-Satz nach Marke aussehen lässt. BEWUSST OHNE `color`. Hier stand `color: var(--kendo-color-on-app-surface)` — aus dem Damba-Theme übernommen, wo derselbe Fehler bis heute steckt. Eine feste Überschriftenfarbe überschreibt die Vererbung, auf die jede dunkle Fläche angewiesen ist: die Landingpage setzt `color: #fff` auf ihre Panels und erwartet, dass die Überschrift das erbt. Auf /theme-test fällt das nicht auf, weil dort alles auf der hellen Seitenfläche steht — auf der Startseite waren "Business-Analyse", "Entwicklung" und "Betrieb" Tinte auf Tinte und damit bei 1.00:1 schlicht unsichtbar, sechs weitere lagen zwischen 1.47:1 und 2.83:1. Die Grundfarbe kommt ohnehin von body bzw. .landing-content; Überschriften brauchen sie nicht noch einmal. */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--si-font); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; } .k-button, .k-appbar, .k-tabstrip-items, .k-window-title, .k-dialog-title { font-family: var(--si-font); font-weight: 600; } code, pre, kbd, samp { font-family: 'Cascadia Mono', Consolas, 'Courier New', monospace; } /* -- Buttonform ----------------------------------------------- 8px statt der 6px des md-Tokens: der Wert stammt aus der Bildmarke (≈22 % Eckradius auf 44px Höhe) und ist der einzige Ort, an dem der Entwurf überhaupt rundet. $kendo-border-radii kann ihn nicht liefern, ohne alle md-Flächen mitzurunden. */ .btn, .k-button { border-radius: var(--si-radius-btn); } /* -- Fokus ---------------------------------------------------- Der Ring der Landingpage ist cyan. Auf weißem Grund misst #00BBF1 aber nur 2.24:1, und WCAG 2.4.11 will 3:1 zwischen fokussiertem und unfokussiertem Zustand — für die Chrome ist das zu wenig. Hier steht deshalb das Flächenblau (5.77:1), das ebenso aus color 01 stammt. Die Landingpage behält ihren cyanen Ring innerhalb von .landing-content: dort sitzt er überwiegend auf dunklen Panels, wo er trägt. */ :focus-visible { outline: 3px solid var(--kendo-color-primary, #0068B4); outline-offset: 3px; border-radius: var(--si-radius-sm); } /* -- Flächen -------------------------------------------------- Kante statt Schatten: "kein Verlauf, kein Schatten" gilt auch für die Admin-Oberfläche, sonst sehen Produkt und Marketingseite aus wie zwei Entwürfe. */ .card, .list-group-item { background: var(--kendo-color-surface, #F6F7F8); border-color: var(--kendo-color-border, rgba(34, 31, 31, .32)); border-radius: var(--si-radius); } .card { box-shadow: none; } /* -- Badges --------------------------------------------------- Die Admin-Zeilentemplates führen Metadaten durchgängig als Badge (nie als text-muted). Damit die Zeilen hier heimisch wirken, sind die beiden Standardbadges auf die Palette gezogen. */ .badge.bg-secondary { background-color: var(--kendo-color-base-subtle, #F6F7F8) !important; color: var(--kendo-color-on-app-surface, #221F1F) !important; } .badge.bg-primary { background-color: var(--kendo-color-primary, #0068B4) !important; color: var(--kendo-color-on-primary, #FFFFFF) !important; } /* -- Footer: Flucht mit der Inhaltsspalte --------------------- Die Shell legt den Footer als EIGENE Grid-Zeile an, die über die volle Breite läuft — auch über die Rail-Spalte. Sein .footer-content zentriert sich deshalb in der ganzen Shell, während .center-pane sich in der 1fr-Spalte NACH der Rail zentriert. Bei 50px Rail sind das exakt 25px Versatz: gemessen bei 1845px nutzbarer Breite liegt die Inhaltsspalte bei 377.5, der Footer bei 352.5. padding-left in Höhe der Rail schiebt den Footer in denselben Rahmen. Über die Variable und nicht über 50px, weil _Layout in setRailVar() genau diese Property umsetzt, wenn die Rail ausklappt (Zeile 386) — der Footer folgt dadurch von selbst. Die Transition ist dieselbe wie die des Grids, sonst springt der Footer, während die Inhaltsspalte gleitet. Nur bei has-rail: im Mobile-Layout (has-overlay) gibt es keine Rail-Spalte und damit auch keinen Versatz. UND NUR OHNE appbar-centered. Seit AppBarPlacement auf CenteredOverContent steht, verlässt die Rail das Grid: damba-shell.css setzt .app-body auf grid-template-columns: 1fr und die Rail auf position: fixed. Es gibt dann keine Rail-Spalte, gegen die es etwas auszugleichen gäbe — der Ausgleich wird selbst zum Versatz. Gemessen bei 1903 px Fensterbreite und ausgeklappter Rail: .center-pane bei 381.5, .footer-content bei 521.5, also 140 px daneben, exakt die Hälfte des padding-left von 280 px. Da --rail-w zwischen 50 und 280 wechselt, wanderte die Fußzeile beim Auf- und Zuklappen sogar mit. */ .app-shell.has-rail:not(.appbar-centered) .app-footer { padding-left: var(--rail-w); transition: padding-left .25s ease-out; } /* -- Fußzeile: Band in Spaltenbreite, wie die AppBar ---------- Der Entwurf schließt die Seite mit einem Tintenband ab (.si-footer, index.html Zeile 509: background var(--si-ink), Text auf 62 % Weiß). Die Shell rendert dafür