html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1:focus {
outline: none;
}
a, .btn-link {
color: #0071c1;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content {
padding-top: 1.1rem;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.loading-progress {
position: relative;
display: block;
width: 8rem;
height: 8rem;
margin: 20vh auto 1rem auto;
}
.loading-progress circle {
fill: none;
stroke: #e0e0e0;
stroke-width: 0.6rem;
transform-origin: 50% 50%;
transform: rotate(-90deg);
}
.loading-progress circle:last-child {
stroke: #1b6ec2;
stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
position: absolute;
text-align: center;
font-weight: bold;
inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after {
content: var(--blazor-load-percentage-text, "Loading");
}
/* =====================================================================================
Startladeanzeige (ergänzt am 15.09.2026)
Wird angezeigt, solange der Browser das Programm herunterlädt (Markup in index.html,
innerhalb von #app). Blazor ersetzt den Inhalt von #app beim ersten Zeichnen, damit
verschwindet die Anzeige von selbst.
GEÄNDERT in 1.1.74 (Vorab-HTML): Die index.html gibt es nicht mehr. Die öffentlichen Seiten liefert der Server
fertig vorgerendert aus, sie brauchen keine Ladeanzeige. Nur die Verwaltung (/admin, wird nicht vorgerendert)
zeigt sie noch: das Markup steht in EquiDeck.Web/Components/Dokument.razor (Kennung startlade-huelle) und wird
von App.razor nach dem ersten Zeichnen über equideckStart.ladeanzeigeEntfernen (js/start.js) entfernt.
Die beiden .loading-progress-Regeln darüber sind Reste der Blazor-Projektvorlage und
werden nirgends benutzt. Sie bleiben bewusst unangetastet; die neue Anzeige nutzt
eigene Klassen (startlade-...), damit sich beides nicht in die Quere kommt.
Den Fortschritt setzt der .NET-Lader selbst in zwei CSS-Variablen am Wurzelelement
(belegt in _framework/blazor.webassembly.js):
--blazor-load-percentage z. B. 37.5% (für die Füllung des Rings)
--blazor-load-percentage-text z. B. "37%" (fertiger Text für content:)
Farben wie auf der Seite: Hintergrund #121212 und Schrift #f3f4f6 aus der dunklen
Palette in mud-compat.css, iTS-Rot #ed2024 als Fortschrittsfarbe.
Kein weißes Aufblitzen: Die Stylesheets im blockieren das Zeichnen, bis sie
geladen sind, und mud-compat.css färbt body schon ohne Programm dunkel (:root). Ein
zusätzlicher Inline-Stil ist deshalb nicht nötig - er würde im Gegenteil den hellen
Modus der Seite überschreiben.
===================================================================================== */
/* Deckt das ganze Fenster ab und zentriert Logo, Ring und Text untereinander.
top/right/bottom/left statt "inset", damit auch ältere Handy-Browser mitspielen. */
.startlade-flaeche {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.75rem;
padding: 1.5rem;
background: #121212;
color: #f3f4f6;
/* --- ERSETZT am 2026-10-19 (1.1.76): font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
Grund: Der Name "Roboto" gehört seit dem Radzen-Theme auch Radzens 730-KB-Schrift RobotoFlex; "iTS Roboto"
ist die eigene, kleine Schrift (fonts/roboto.css) und wird nie mit ihr verwechselt. --- */
font-family: "Segoe UI", "iTS Roboto", "Helvetica Neue", Arial, sans-serif;
}
/* Logo (weiß-rot, braucht den dunklen Grund). Auf schmalen Handys höchstens 45 %
der Bildschirmbreite, damit bei 375 px noch Luft an den Seiten bleibt. */
.startlade-logo {
width: 180px;
max-width: 45vw;
height: auto;
}
/* Fortschrittsring: ein Kegelverlauf, der von oben im Uhrzeigersinn bis zum aktuellen
Prozentwert rot gefüllt ist, der Rest dunkelgrau. Die erste background-Zeile ist der
Ersatz für Browser ohne conic-gradient - dort bleibt der Ring einfach grau, die
Prozentzahl in der Mitte zählt trotzdem hoch. */
.startlade-ring {
position: relative;
width: 6.5rem;
height: 6.5rem;
border-radius: 50%;
background: #2a2a2a;
background: conic-gradient(#ed2024 var(--blazor-load-percentage, 0%), #2a2a2a 0%);
}
/* Das Loch in der Mitte: eine Scheibe in Hintergrundfarbe macht aus der Fläche einen Ring. */
.startlade-ring::before {
content: "";
position: absolute;
top: 0.5rem;
right: 0.5rem;
bottom: 0.5rem;
left: 0.5rem;
border-radius: 50%;
background: #121212;
}
/* Die Prozentzahl in der Ringmitte. Vor dem ersten Download ist die Variable noch
nicht gesetzt - dann bleibt die Mitte leer statt eine erfundene "0%" zu zeigen.
tabular-nums: alle Ziffern gleich breit, damit die Zahl beim Hochzählen nicht zappelt. */
.startlade-ring::after {
content: var(--blazor-load-percentage-text, "");
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.startlade-text {
font-size: 1rem;
letter-spacing: 0.02em;
color: #a1a1aa;
}
/* Lesbarer Text für Suchmaschinen (Sofortpaket, ergänzt am 08.10.2026; Markup in index.html,
innerhalb von #app, direkt unter .startlade-flaeche).
Roboter ohne JavaScript sehen von der Homepage nur index.html. Damit sie dort mehr als
"Wird geladen ..." finden, steht unter der Ladeanzeige ein echter Textblock. Blazor ersetzt
ihn beim ersten Zeichnen zusammen mit der Ladeanzeige.
NICHT MEHR IN BENUTZUNG seit 1.1.74 (Vorab-HTML): Der Server liefert den echten Inhalt jeder Seite vorgerendert
aus, der Lesetext für Roboter ohne JavaScript ist überflüssig geworden und steht nur noch in der Kopie der alten
Seite (railway/ersetzt/index.html). Die Regeln bleiben hier stehen, bis Frank sie freigibt.
NICHT verstecken: kein display:none, kein visibility:hidden, nichts aus dem Bild geschoben.
Suchmaschinen werten das als Verschleiern (Cloaking). Der Block ist ein ganz normaler Teil
der Seite und per Scrollen erreichbar.
Warum margin-top: 100vh und z-index: Die Ladeanzeige (.startlade-flaeche) ist
"position: fixed" und deckt immer das ganze Fenster ab - auch beim Scrollen. Ein Block ohne
eigene Ebene läge dauerhaft HINTER ihr und wäre für Besucher unsichtbar. Darum: Der Block
beginnt erst nach einer Bildschirmhöhe (im ersten Bildschirm sieht man nur die Ladeanzeige)
und liegt mit z-index 1 über der Ladeanzeige. Der eigene, undurchsichtige Hintergrund in der
Farbe der Ladeanzeige verdeckt sie beim Hochscrollen sauber.
Farben wie die Ladeanzeige. Kontrast gegen den Hintergrund #121212 (WCAG-Berechnung):
Fließtext #f3f4f6 -> 17,0 : 1 (verlangt: 4,5 : 1)
Nebentext #a1a1aa -> 7,3 : 1 (verlangt: 4,5 : 1)
Links #f3f4f6, unterstrichen (so auch ohne Farbunterschied erkennbar)
Das iTS-Rot #ed2024 hat auf #121212 nur etwa 4,3 : 1 und wird deshalb ausschließlich als
Zierlinie benutzt, nie für Text. */
.startlade-seo-text {
position: relative;
z-index: 1;
margin-top: 100vh;
padding: 3rem 1.5rem 4rem;
background: #121212;
color: #f3f4f6;
/* --- ERSETZT am 2026-10-19 (1.1.76): font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
Grund: siehe oben (eigener Schriftname "iTS Roboto"). --- */
font-family: "Segoe UI", "iTS Roboto", "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
}
.startlade-seo-inner {
max-width: 48rem;
margin: 0 auto;
}
.startlade-seo-text h1 {
margin: 0 0 1rem;
font-size: 1.75rem;
line-height: 1.25;
font-weight: 600;
color: #f3f4f6;
}
.startlade-seo-text h2 {
margin: 2rem 0 0.5rem;
padding-left: 0.75rem;
border-left: 4px solid #ed2024;
font-size: 1.25rem;
line-height: 1.3;
font-weight: 600;
color: #f3f4f6;
}
.startlade-seo-text p,
.startlade-seo-text address {
margin: 0 0 1rem;
font-style: normal;
color: #a1a1aa;
}
.startlade-seo-text ul {
margin: 0;
padding-left: 1.25rem;
}
.startlade-seo-text a,
.startlade-seo-text a:visited {
color: #f3f4f6;
text-decoration: underline;
}
code {
color: #c02d76;
}