html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
a, .btn-link {
color: #e8590c;
}
.btn-primary {
color: #fff;
background-color: #e8590c;
border-color: #c94d0a;
}
.btn-primary:hover, .btn-primary:active {
background-color: #c94d0a;
border-color: #a83f08;
}
/* Alle Buttons einheitlich orange: auch die Umrissvarianten für Abbrechen/Löschen (secondary, danger)
tragen die Markenfarbe statt Grau/Rot. */
.btn-primary:disabled, .btn-primary.disabled {
background-color: #e8590c;
border-color: #c94d0a;
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger {
color: #e8590c;
border-color: #e8590c;
}
.btn-outline-primary:hover, .btn-outline-primary:active,
.btn-outline-secondary:hover, .btn-outline-secondary:active,
.btn-outline-danger:hover, .btn-outline-danger:active {
color: #fff;
background-color: #e8590c;
border-color: #e8590c;
}
.btn-outline-primary:disabled, .btn-outline-secondary:disabled, .btn-outline-danger:disabled {
color: #e8590c;
background-color: transparent;
border-color: #e8590c;
}
/* Aktiver Zustand von "btn-check"-Toggle-Buttons (z. B. Berechnungsart-Umschaltung in
ChannelAssumptionsEditor.razor) - ohne das fällt der :checked-Zustand auf Bootstraps
Standardblau zurück statt auf die Marken-Akzentfarbe, da Bootstraps eigenes CSS dafür eine
andere Selektor-Kombination (:checked + .btn) nutzt als :hover/:active oben. */
.btn-check:checked + .btn-outline-primary {
color: #fff;
background-color: #e8590c;
border-color: #e8590c;
}
/* Berechnungsart-Umschalter (ChannelAssumptionsEditor.razor) - beide Buttons eines Paars
gleich breit (so breit wie der längere Text "nach Verkaufspreis brutto"), statt dass jeder
Button nur seine eigene, unterschiedlich lange Beschriftung umschließt. */
.calc-mode-toggle-btn {
min-width: 184px;
text-align: center;
}
/* Kanal-Umschalter Amazon/Shop (SensitivitaetsanalyseEditor.razor) - gleiches Prinzip wie
.calc-mode-toggle-btn oben, nur mit kürzeren Beschriftungen. */
.channel-toggle-btn {
min-width: 69px;
text-align: center;
}
/* Button-Zustand während ein Klick eine länger laufende Aktion ausführt (KI-Anfragen) -
blau statt orange (btn-primary), damit "läuft gerade" optisch erkennbar ist. */
.btn-busy {
color: #fff;
background-color: #0d6efd;
border-color: #0a58ca;
}
.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 #ff922b;
}
/* Standard-Bootstrap-Eingabefelder haben nur einen sehr dünnen, hellgrauen Rand ohne
Hintergrundkontrast und sind auf der hellen Seite schwer als Eingabefeld erkennbar -
leichter Hintergrund + kräftigerer Rand macht die Feldgrenzen deutlicher sichtbar. */
.form-control, .form-select {
background-color: #f8f9fa;
border-color: #adb5bd;
}
.form-control:focus, .form-select:focus {
background-color: #fff;
}
/* Browser-native Spinner-Pfeile bei number-Inputs (z. B. GermanNumberInput, Lieferanten-
Felder EK FOB/Werkzeugkosten) ausgeblendet - bei Geldbeträgen/Prozentwerten mit Dezimal-
Nachkommastellen ändern die Pfeile den Wert nur in 1er-Schritten, was hier kaum sinnvoll
nutzbar ist und optisch unruhig wirkt. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
/* Label-Spalte der Masken ("Label links, Eingabefeld rechts"): nur so breit wie das längste Label
der Tabelle, damit die Eingabefelder direkt neben den Labels stehen und nicht durch eine feste
Spaltenbreite weit abgesetzt sind. Gilt für alle Masken (neue Masken nutzen einfach calc-label). */
.calc-label {
width: 1%;
white-space: nowrap;
padding-right: 0.75rem;
}
/* Analoge feste Label-Spaltenbreite für die (kürzeren) Zusammenfassungs-Tabellen der
Kalkulation in Produktanalyse.razor (Beschaffungspreis/Profitabilität Amazon/Shop) - eigene,
schmalere Klasse statt .calc-label, da deren Labels deutlich kürzer sind und eine 280px-Spalte
dort unnötig viel Platz zwischen Label und Wert lassen würde. */
.summary-label {
width: 170px;
}
/* Eigene, mittlere Label-Spaltenbreite für die Szenarioanalyse (Basisszenario in
SzenarioanalyseBearbeiten.razor, Szenario-Spalte in ScenarioFactorSetEditor.razor) - dieselbe
Klasse in beiden Tabellen, damit ihre Eingabefelder trotz unterschiedlicher Spaltenanzahl auf
derselben linken Position beginnen (analoges Muster zu .calc-label oben). Schmaler als
.calc-label (280px), da hier keine so langen Labels wie "Produktanpassung/Branding
(€, Container)" vorkommen, aber breiter als .summary-label (170px), damit z. B.
"Werbekosten (ACoS) (%)" nicht umbricht. */
.scenario-label {
width: 200px;
}
/* Kompakte Zeilenhöhe/Schriftgröße für alle "calc-table"-Tabellen (Kalkulation-Annahmen/
-Ergebnis, Retourenkosten-Rechner) - bewusst global statt in einer gescopten
KalkulationEditor.razor.css, da dieselbe Tabelle über mehrere Komponenten hinweg verwendet
wird (KalkulationEditor, ChannelAssumptionsEditor, ChannelResultBox) und Blazors CSS-Scoping
Regeln nur auf die exakt definierende Komponente anwendet, nicht auf deren Unterkomponenten -
sonst sehen Beschaffung (inline in KalkulationEditor) und Amazon/Shop (eigene Komponenten)
trotz identischer Klassen unterschiedlich aus. */
.calc-table td,
.calc-table th {
height: 33px;
box-sizing: border-box;
vertical-align: middle;
padding-top: 0;
padding-bottom: 0;
font-size: 0.875rem;
}
.calc-table td:last-child,
.calc-table th:last-child {
text-align: right;
}
/* Auf/Ab-Stepper-Buttons für ganzzahlige Prozentwerte (PercentStepInput.razor) - sehr klein
und schmal, damit die beiden übereinandergestapelten Pfeile neben dem Eingabefeld keinen
nennenswerten Platz brauchen, ähnlich einem nativen Zahlenfeld-Spinner. */
.percent-step-btn {
padding: 0 0.25rem;
line-height: 1;
font-size: 0.55rem;
}
@media (max-width: 767.98px) {
.calc-table td,
.calc-table th {
height: auto;
white-space: normal;
}
}
/* Feste Breite für Label-Spalten in Formularen mit "Label neben Eingabefeld"-Layout
(statt Label über dem Feld), damit die Eingabefelder mehrerer untereinanderstehender
Zeilen am selben linken Rand beginnen, unabhängig von der Textlänge des jeweiligen Labels. */
.form-label-fixed {
display: inline-block;
min-width: 180px;
margin-bottom: 0;
}
.content {
padding-top: 1.1rem;
}
/* Standard-Bootstrap-Tabs sind sehr dezent (dünner grauer Rand, kaum Kontrast zum aktiven
Tab) - deutlicherer Rahmen, größere/fette Schrift, ein dicker Farbbalken und ein leichter
Hintergrund-Tint beim aktiven Tab machen die Tab-Navigation (z. B. Recherche/
Markteinschätzung) auffälliger, bleiben aber als zusammenhängende Tab-Leiste erkennbar
(im Unterschied zu einzelnen, lose wirkenden Pill-Buttons). */
.nav-tabs {
border-bottom-width: 2px;
}
.nav-tabs .nav-link {
font-size: 1.1rem;
font-weight: 600;
color: #495057;
border-width: 2px;
border-bottom-width: 4px;
border-color: #dee2e6 #dee2e6 #dee2e6;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
padding-top: 0.6rem;
padding-bottom: 0.6rem;
}
.nav-tabs .nav-link:hover {
border-color: #dee2e6 #dee2e6 #e8590c;
background-color: #fff3ea;
}
/* .nav-tabs .nav-link (oben) setzt eine feste Textfarbe, die Bootstraps eigene
.nav-link.disabled-Farbe überschreiben würde - eigene Regel nötig, damit gesperrte Tabs
(siehe Produktanalyse.razor IsOtherTabsDisabled/IsZusammenfassungDisabled) sich sichtbar von
aktiven/normalen Tabs abheben. */
.nav-tabs .nav-link.disabled,
.nav-tabs .nav-link.disabled:hover {
color: #adb5bd;
font-weight: 400;
background-color: transparent;
border-color: transparent;
cursor: not-allowed;
}
/* Auf schmalen Bildschirmen passen nicht alle 4 Tabs (Recherche/Markteinschätzung/
Lieferanten/Zusammenfassung) in eine Zeile - der Flexbox-Zeilenumbruch von .nav-tabs
würde dann 3 Tabs links und den 4. allein rechtsbündig in Zeile 2 anzeigen. Ein festes
2x2-Raster wirkt stattdessen aufgeräumt. */
@media (max-width: 575.98px) {
.nav-tabs {
display: flex;
flex-wrap: wrap;
}
.nav-tabs .nav-item {
flex: 0 0 50%;
max-width: 50%;
}
.nav-tabs .nav-link {
text-align: center;
font-size: 0.95rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
}
.nav-tabs .nav-link.active {
color: #e8590c;
background-color: #fff3ea;
border-color: #dee2e6 #dee2e6 #fff3ea;
border-bottom: 4px solid #e8590c;
}
/* Icons in den Feature-Karten auf der Startseite (AppIntro.razor) - bewusst global statt in
einer gescopten AppIntro.razor.css, gleicher Grund wie bei .calc-table oben (Blazors
CSS-Scoping würde hier nicht greifen). Eigene Klassen statt der "-nav-menu"-Varianten aus
NavMenu.razor.css: die dortigen Icons sind weiß (für den dunklen Sidebar-Hintergrund) und
wären auf den hellen Karten unsichtbar - hier stattdessen in der Marken-Akzentfarbe. */
.card-icon {
display: inline-block;
position: relative;
width: 1.25rem;
height: 1.25rem;
margin-right: 0.5rem;
top: -2px;
background-size: cover;
}
.bi-search-card {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e8590c' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
}
.bi-arrow-return-left-card {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e8590c' class='bi bi-arrow-return-left' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
}
.bi-graph-up-arrow-card {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e8590c' class='bi bi-graph-up-arrow' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M0 0h1v15h15v1H0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.033L7.6 6.844l-4.751 5.351a.5.5 0 0 1-.698-.716l5-5.5a.5.5 0 0 1 .707.005l2.55 2.5L13.499 4H10.5a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E");
}
h1:focus {
outline: none;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid #e50000;
}
.validation-message {
color: #e50000;
}
.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."
}
.darker-border-checkbox.form-check-input {
border-color: #929292;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
/* Tabellen mit Zeilen zum Anklicken (Listen) */
.list-link {
text-decoration: none;
}
/* Schmale Zahlenfelder (z. B. Anzahl in der Etikettenliste): Pfeiltasten bedienen die Zeilen, die Dreh-Pfeile des Browsers würden nur Platz kosten. */
input.anzahl-eingabe { -moz-appearance: textfield; appearance: textfield; }
input.anzahl-eingabe::-webkit-outer-spin-button,
input.anzahl-eingabe::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }