/*
* Nachwuchswerk – Design-Fundament (Maßsystem)
* =======================================
* Eine einzige Quelle für Abstände, Schriftgrößen, Eckenradien, Höhen und
* Rasteranordnungen. Diese Datei wird in JEDEM Kontext zuerst geladen:
* WordPress-Backend, App (Token-Frontend) und öffentliche Seiten.
*
* Warum ein Maßsystem?
* Vor der Einführung nutzte das Plugin 25 verschiedene Abstandswerte,
* 18 Schriftgrößen (darunter halbe Pixel wie 12,5 px) und 12 Eckenradien.
* Das ist der Grund, warum Abstände „unruhig" wirken, obwohl jede Seite für
* sich stimmig aussieht. Ab jetzt gilt: Es gibt nur noch die hier
* festgelegten Stufen. Neue Bausteine verwenden ausschließlich Variablen.
*
* Raster: 2-px-Basis, Hauptstufen im 4-px-Abstand.
*/
:root,
.mnd-wrap,
.mnd-fe-app,
.mnd-pub-card {
/* ---------- Farben ----------
► Vorher standen die Farben an zwei Stellen mit unterschiedlichen Werten:
admin.css setzte sie auf `.mnd-wrap`, appshell.css auf `:root` - mit
abweichendem Grau und Hintergrund. Sechs Variablen (Karte, Gold,
Schatten, Radius, Raster) gab es AUSSCHLIESSLICH im Backend. In der App
waren sie undefiniert: Kartenflächen, Schatten und der Goldakzent
fielen dort still aus. Das ist der Grund, warum App und Verwaltung
unterschiedlich wirkten, obwohl beide dieselben Ansichten zeigen.
Ab jetzt: eine Quelle für alle vier Kontexte.
Die Vereinsfarbe wird zur Laufzeit überschrieben (mnd_cd_css) -
deshalb stehen hier nur die Voreinstellungen. */
--mnd-red: #c8102e; /* Vereinsfarbe (überschreibbar) */
--mnd-red-d: #8a1220; /* dunkle Variante für Verläufe und Hover */
--mnd-red-dark: #8a1220; /* Zweitname, historisch in der App verwendet */
--mnd-gold: #d4a017; /* sparsamer Akzent, nur für Hinweise */
--mnd-ink: #1f2430; /* Fließtext */
--mnd-mut: #5c6470; /* gedämpfter Text, Beschriftungen (v6.59.0) */
/* ► #6b7280 lag bei 4.51 auf weiss, aber nur 4.26 auf einer Panelflaeche -
unter der Lesbarkeitsschwelle 4.5:1. #5c6470 haelt 5.27 auch auf der
dunkelsten Flaeche und bleibt optisch klar zweitrangig zum Fliesstext. */
--mnd-line: #e3e7ec; /* Rahmen und Trennlinien */
--mnd-bg: #f6f7f9; /* Seitenhintergrund */
--mnd-card: #ffffff; /* Karten- und Panelfläche */
/* Statusfarben - bewusst gedämpft, mit lesbarem Textwert daneben. */
--mnd-ok: #2e9e4f; --mnd-ok-text: #1e7d34;
--mnd-warn: #d68910; --mnd-warn-text: #8a5309;
--mnd-stop: #c8102e; --mnd-stop-text: #a10d25;
--mnd-neutral: #8a93a3; --mnd-neutral-text:#5b6a80;
/* ---------- Flächenwirkung ---------- */
--mnd-radius: 12px;
--mnd-shadow: 0 1px 2px rgba(20,24,33,.06), 0 4px 14px rgba(20,24,33,.05);
--mnd-gap:20px;
--mnd-field-gap:16px;
/* ---------- Abstände (Innen, Außen, Lücken) ---------- */
--mnd-s0: 2px; /* Haarabstand: Badge-Innenrand, Trennlinien-Versatz */
--mnd-s1: 4px; /* sehr eng: Symbol zu Text in kleinen Chips */
--mnd-s2: 6px; /* eng: Lücke in Werkzeugleisten, Chip-Innenrand */
--mnd-s3: 8px; /* Standardlücke zwischen zusammengehörigen Elementen */
--mnd-s4: 12px; /* Innenabstand kleiner Karten, Lücke zwischen Feldern */
--mnd-s5: 16px; /* Innenabstand Karten, Lücke zwischen Kacheln */
--mnd-s6: 20px; /* Innenabstand Panels, Außenabstand zwischen Panels */
--mnd-s7: 24px; /* großzügiger Innenabstand, Abstand zu Überschriften */
--mnd-s8: 32px; /* Abschnittstrennung */
--mnd-s9: 48px; /* Seitenabschnitte, große Leerräume */
/* ---------- Schriftgrößen ---------- */
--mnd-fs-xs: 11px; /* Hilfstext, Zeitstempel, Badge */
--mnd-fs-sm: 12px; /* Sekundärtext, Tabellenzusatz, Bildunterschrift */
--mnd-fs-base: 13px; /* Fließtext im Backend */
--mnd-fs-md: 14px; /* Formularfelder, Listeneinträge, Schaltflächen */
--mnd-fs-lg: 16px; /* Panel-Überschrift, Eingabefelder auf Mobilgeräten */
--mnd-fs-xl: 20px; /* Seitentitel */
--mnd-fs-2xl: 26px; /* Kennzahlen auf Kacheln */
--mnd-fs-3xl: 34px; /* große Kennzahl im Cockpit */
/* ---------- Zeilenhöhen ---------- */
--mnd-lh-eng: 1.25; /* Überschriften, Kennzahlen */
--mnd-lh-normal:1.45; /* Standard */
--mnd-lh-weit: 1.6; /* Fließtext, Hilfetexte, Erklärungen */
/* ---------- Eckenradien ---------- */
--mnd-r-xs: 6px; /* Badge, Chip */
--mnd-r-sm: 8px; /* kleine Schaltfläche, Bildvorschau */
--mnd-r-md: 10px; /* Eingabefeld, Karte innen */
--mnd-r-lg: 12px; /* Panel, große Karte (= bisheriges --mnd-radius) */
--mnd-r-xl: 20px; /* Dialog, große Fläche */
--mnd-r-pill: 999px; /* Pillenform */
/* ---------- Bedienelemente: Mindestgrößen ---------- */
--mnd-touch: 44px; /* Mindestgröße auf Touchgeräten (Finger) */
--mnd-touch-min: 36px; /* Mindestgröße bei Mausbedienung */
--mnd-feld-h: var(--mnd-btn-h); /* Feldhöhe = Schaltflächenhöhe (s. u.) */
/* ---------- Umbrüche ---------- */
--mnd-lesebreite: 78ch; /* maximale Textbreite für gute Lesbarkeit */
}
/* ==========================================================================
Rastersystem
==========================================================================
Verbindliche Anordnungen. Regel für alle:
unter 640 px → immer einspaltig
640–899 px → höchstens zweispaltig
ab 900 px → volle Spaltenzahl
Damit ist ausgeschlossen, dass Inhalte auf dem Handy gequetscht werden.
*/
.mnd-grid { display:grid; gap:var(--mnd-s5); grid-template-columns:1fr; align-items:start; }
.mnd-grid.is-eng { gap:var(--mnd-s3); }
.mnd-grid.is-weit{ gap:var(--mnd-s7); }
@media (min-width:640px) {
.mnd-grid-2, .mnd-grid-3, .mnd-grid-4 { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:900px) {
.mnd-grid-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.mnd-grid-4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (min-width:1200px) {
.mnd-grid-4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
}
/* Selbstanordnendes Raster: passt die Spaltenzahl der Breite an.
minmax(0,1fr) ist entscheidend – ohne die 0 sprengen lange Wörter das Raster. */
.mnd-grid-auto { display:grid; gap:var(--mnd-s5); grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.mnd-grid-auto-sm { display:grid; gap:var(--mnd-s4); grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.mnd-grid-auto-lg { display:grid; gap:var(--mnd-s6); grid-template-columns:repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
/* Zwei Spalten im Verhältnis 2:1 bzw. 1:2 – ab Tablet quer, davor gestapelt. */
.mnd-split-21, .mnd-split-12 { display:grid; gap:var(--mnd-s6); grid-template-columns:1fr; align-items:start; }
@media (min-width:1024px) {
.mnd-split-21 { grid-template-columns:2fr 1fr; }
.mnd-split-12 { grid-template-columns:1fr 2fr; }
}
/* Jedes Rasterfeld darf schrumpfen – verhindert seitlichen Überlauf. */
.mnd-grid > *, .mnd-grid-auto > *, .mnd-grid-auto-sm > *, .mnd-grid-auto-lg > *,
.mnd-split-21 > *, .mnd-split-12 > * { min-width:0; }
/* ==========================================================================
Werkzeug- und Aktionsleisten
========================================================================== */
.mnd-bar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--mnd-s3); }
.mnd-bar.is-eng { gap:var(--mnd-s2); }
.mnd-bar > * { min-width:0; }
.mnd-bar-rechts { margin-left:auto; }
/* ==========================================================================
Abstandshelfer – bewusst wenige, damit sie nicht ausufern
========================================================================== */
.mnd-mt-0{margin-top:0 !important;} .mnd-mb-0{margin-bottom:0 !important;}
.mnd-mt-3{margin-top:var(--mnd-s3);} .mnd-mb-3{margin-bottom:var(--mnd-s3);}
.mnd-mt-5{margin-top:var(--mnd-s5);} .mnd-mb-5{margin-bottom:var(--mnd-s5);}
.mnd-mt-7{margin-top:var(--mnd-s7);} .mnd-mb-7{margin-bottom:var(--mnd-s7);}
/* ==========================================================================
Umbruchsicherung – Text ragt unter keinen Umständen aus seinem Kasten
==========================================================================
Ausgangslage: Von 494 nebeneinander angeordneten Bereichen waren nur 98
gegen Überlauf abgesichert. Ursache ist eine Eigenheit der Anordnung:
Ein Element in einer Reihe darf standardmäßig nicht kleiner werden als
sein längstes Wort. Eine lange E-Mail-Adresse oder ein Dateiname sprengt
damit die Karte – ohne dass es an der Karte selbst liegt.
Die folgenden vier Regeln lösen das an der Wurzel, statt an 396 Stellen
einzeln nachzubessern.
*/
/* 1. Lange Zeichenketten dürfen umbrechen.
► KORREKTUR v12.7.0 – hier stand `anywhere`, und der Kommentar daneben
behauptete, normale Wörter würden „weiterhin nur dann getrennt, wenn sie
sonst überlaufen würden". Das ist falsch, und der Irrtum hat sich durch
die ganze App gezogen.
`anywhere` und `break-word` trennen dasselbe – der Unterschied liegt
woanders: `anywhere` zählt bei der **Mindestbreiten-Berechnung** mit.
Der Browser darf einer Flex- oder Tabellenspalte damit eine Mindestbreite
von einem einzigen Zeichen zugestehen. Die Spalte schrumpft, und *dann*
muss das Wort brechen – nicht weil es überläuft, sondern weil man ihm den
Platz genommen hat.
Sichtbare Folgen auf dem Handy: „Nachwuc/hswerk" in der Kopfzeile,
„Kriterienka/talog" im Untertitel, „Heu/te", „18 ÜBUN/GEN" – und in der
Mannschaftstabelle stand „Profis (Herren)" als **senkrechte Kolonne aus
einzelnen Buchstaben**, weil die Aktionsspalte daneben die ganze Breite
nahm und die Namensspalte auf ein Zeichen zusammenfallen durfte.
`break-word` bricht ein Wort ebenfalls, wenn es allein nicht in die Zeile
passt – aber die Mindestbreite bleibt das längste Wort. Genau das ist
gewollt.
Lehre: Eine Regel, die Überlauf verhindert, kann Umbruch erzwingen. Wer
nur auf „ragt nichts heraus?" misst, sieht den Schaden nicht – meine
Messläufe haben diese Seiten alle als fehlerfrei gemeldet. */
.mnd-wrap, .mnd-fe-app, .mnd-pub-card { overflow-wrap:break-word; }
/* Für die wenigen Stellen, an denen wirklich unbrechbare Zeichenketten stehen
(Zugangsschlüssel, lange Adressen, Prüfsummen): dort ausdrücklich anfordern. */
.mnd-brechbar, .mnd-token, .mnd-hash { overflow-wrap:anywhere; word-break:break-all; }
/* 2. Bereiche in einer Reihe dürfen schrumpfen. */
.mnd-wrap .mnd-panel > *, .mnd-wrap .mnd-tile > *, .mnd-wrap .mnd-header > *,
.mnd-wrap .mnd-alert > *, .mnd-wrap .mnd-bar > *, .mnd-wrap .mnd-card > *,
.mnd-fe-app .mnd-panel > *, .mnd-fe-app .mnd-fe-row > *, .mnd-fe-app .mnd-fe-card > *,
.mnd-pub-card .mnd-pub-row > * { min-width:0; }
/* 3. Überschriften und Namen brechen sauber statt zu überlaufen. */
.mnd-wrap h1, .mnd-wrap h2, .mnd-wrap h3, .mnd-wrap h4,
.mnd-fe-app h1, .mnd-fe-app h2, .mnd-fe-app h3, .mnd-fe-app h4 {
overflow-wrap:break-word; hyphens:auto; min-width:0;
}
/* 4. Tabellen: Zellen dürfen umbrechen, Zahlenspalten bleiben zusammen. */
.mnd-wrap .mnd-table td, .mnd-wrap .mnd-table th { overflow-wrap:break-word; }
.mnd-wrap .mnd-table .mnd-num, .mnd-wrap .mnd-table .mnd-datecell { overflow-wrap:normal; }
/* ---------- Helfer für bewusst gekürzte Anzeige ----------
Verwendung: …
Der vollständige Inhalt bleibt über den Titel-Hinweis und für Vorlesehilfen
erreichbar – gekürzt wird nur die Anzeige. */
.mnd-kurz { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mnd-kurz-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mnd-kurz-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* Fließtext bleibt lesbar breit. */
.mnd-lesetext { max-width:var(--mnd-lesebreite); line-height:var(--mnd-lh-weit); }
/* ---------- Auf schmalen Geräten: erzwungener Umbruch statt Quetschung ---------- */
@media (max-width:640px) {
/* ► Diese drei Regeln galten nur im Backend (v6.56.3, UI-01)
Gemessen bei 390 px: Die Info-Seite war in der App 993 px breit -
zweieinhalb Bildschirme. Ursache war nicht die Tabelle, sondern der
Geltungsbereich: Die mobile Umbruchsicherung stand nur unter
`.mnd-wrap` (Verwaltung), während die App unter `.mnd-fe-app` läuft.
Ausgerechnet die Info-Seite, die laut Vorgabe überall erreichbar sein
muss, war damit auf dem Handy unbenutzbar.
Andere Seiten fielen nicht auf, weil `.mnd-table` mobil ohnehin zu
Karten wird - `.mnd-kv` allein tut das nicht. */
/* Zeilenköpfe in Kennwert-Tabellen dürfen umbrechen und ihre feste Breite aufgeben. */
.mnd-wrap .mnd-kv th, .mnd-fe-app .mnd-kv th { white-space:normal; width:auto; }
/* Die Tabelle selbst darf die Seite nicht auseinanderziehen. */
.mnd-wrap .mnd-kv, .mnd-fe-app .mnd-kv { table-layout:fixed; width:100%; }
.mnd-wrap .mnd-kv td, .mnd-fe-app .mnd-kv td { word-break:break-word; overflow-wrap:break-word; }
/* Namen in Zuordnungslisten kürzen statt überlaufen lassen. */
.mnd-wrap .mnd-grp-name, .mnd-fe-app .mnd-grp-name { overflow:hidden; text-overflow:ellipsis; max-width:100%; }
/* Aktionsspalten dürfen umbrechen, wenn drei Schaltflächen nicht nebeneinander passen. */
.mnd-wrap .mnd-actions, .mnd-fe-app .mnd-actions { white-space:normal; }
}
/* ==========================================================================
Kastenmodell – Innenabstand zählt zur Breite, nicht dazu
==========================================================================
Gefunden beim Härtetest: Die Kopfleiste der App rechnete ihren Innenabstand
ZUSÄTZLICH zur Breite (content-box) und ragte dadurch 20 px über den Rand
hinaus. Diese Regel schließt die gesamte Fehlerklasse aus – unabhängig
davon, was ein WordPress-Theme mitbringt. */
.mnd-wrap, .mnd-wrap *, .mnd-wrap *::before, .mnd-wrap *::after,
.mnd-fe-app, .mnd-fe-app *, .mnd-fe-app *::before, .mnd-fe-app *::after,
.mnd-pub-card, .mnd-pub-card *, .mnd-pub-card *::before, .mnd-pub-card *::after {
box-sizing:border-box;
}
/* Bewusste Ausnahme: Die fixierte Kopfleiste der App rechnet den Abstand zum
Bildschirmrand (Notch) zur Höhe hinzu – dort ist content-box richtig und
in public/css/appshell.css absichtlich gesetzt. */
/* ==========================================================================
Bedienung mit dem Finger (Q1.3 – Pruefstrecke, Q1.4 – Sanierung)
==========================================================================
Die Messung ueber alle Seiten bei 390 px ergab: 151 Schaltflaechen der
Klasse .button-small waren nur 30 px hoch, Reiter sogar 21 px. Eine
Flaeche unter 44 px ist mit dem Daumen nicht zuverlaessig zu treffen –
der Nutzer trifft den Nachbarknopf. Weil WordPress bei .button-small
eine FESTE Hoehe setzt, genuegt min-height nicht; height muss auf auto.
Der Schwellenwert 44 px stammt aus den Bedienrichtlinien von Apple und
Google und ist zugleich Erfolgskriterium 2.5.8 der WCAG 2.2.
Gilt fuer Touchgeraete (pointer:coarse) UND fuer schmale Fenster – Letzteres,
damit die Pruefung am Schreibtisch dasselbe Ergebnis zeigt wie am Handy. */
/* WARUM die Wurzelklasse doppelt steht: WordPress setzt die feste Hoehe ueber
.wp-core-ui .button-small – zwei Klassen, also dieselbe Gewichtung wie
.mnd-wrap .button. Bei Gleichstand entscheidet die Ladereihenfolge, und die
Kern-Stilvorlage kommt spaeter. Die doppelte Wurzelklasse hebt die Gewichtung
um eine Stufe an; das ist eindeutig und kommt ohne !important aus, das sich
spaeter nicht mehr ueberschreiben liesse. */
@media (max-width:900px), (pointer:coarse) {
.mnd-wrap.mnd-wrap .button, .mnd-wrap.mnd-wrap button, .mnd-wrap.mnd-wrap input[type=submit],
.mnd-wrap.mnd-wrap input[type=button], .mnd-wrap.mnd-wrap a.mnd-act-text,
.mnd-fe-app.mnd-fe-app .button, .mnd-fe-app.mnd-fe-app button, .mnd-fe-app.mnd-fe-app input[type=submit],
.mnd-pub-card.mnd-pub-card .button, .mnd-pub-card.mnd-pub-card button {
min-height:var(--mnd-touch);
height:auto; /* hebt die feste Hoehe von .button-small auf */
display:inline-flex;
align-items:center;
justify-content:center;
line-height:var(--mnd-lh-eng);
}
/* ACHTUNG fuer spaetere Aenderungen: Diese Regel setzt auch die
Anzeigeart (display) und hat durch die doppelte Wurzelklasse ein
hohes Gewicht. Ein spaeteres display:none auf eine Schaltflaeche
bleibt daher wirkungslos, solange es nicht mindestens gleich hoch
gewichtet ist - in so einem Fall besser die Schaltflaeche gar nicht
erst erzeugen. */
/* Auswahlfelder und einzeilige Eingaben genauso – sie werden getippt. */
.mnd-wrap.mnd-wrap select,
.mnd-wrap.mnd-wrap input[type=text], .mnd-wrap.mnd-wrap input[type=search], .mnd-wrap.mnd-wrap input[type=email],
.mnd-wrap.mnd-wrap input[type=tel], .mnd-wrap.mnd-wrap input[type=number], .mnd-wrap.mnd-wrap input[type=date],
.mnd-wrap.mnd-wrap input[type=time], .mnd-wrap.mnd-wrap input[type=password],
.mnd-fe-app.mnd-fe-app select,
.mnd-fe-app.mnd-fe-app input[type=text], .mnd-fe-app.mnd-fe-app input[type=search], .mnd-fe-app.mnd-fe-app input[type=email],
.mnd-fe-app.mnd-fe-app input[type=tel], .mnd-fe-app.mnd-fe-app input[type=number], .mnd-fe-app.mnd-fe-app input[type=date],
.mnd-fe-app.mnd-fe-app input[type=time], .mnd-fe-app.mnd-fe-app input[type=password] {
min-height:var(--mnd-touch);
}
/* Ankreuzfelder brauchen eine eigene, groessere Trefferflaeche. */
.mnd-wrap.mnd-wrap input[type=checkbox], .mnd-wrap.mnd-wrap input[type=radio],
.mnd-fe-app.mnd-fe-app input[type=checkbox], .mnd-fe-app.mnd-fe-app input[type=radio] {
min-width:22px; min-height:22px;
}
/* ---- Bewusste Ausnahmen ----------------------------------------------
Symbolknoepfe in dichten Werkzeugleisten wuerden bei 44 px die Leiste
sprengen. Fuer sie gilt der kleinere, aber noch sicher treffbare Wert
(36 px) – sie stehen einzeln und haben keinen Nachbarknopf an der Kante. */
.mnd-wrap.mnd-wrap .mnd-ic-klein, .mnd-wrap.mnd-wrap .mnd-chat-del, .mnd-wrap.mnd-wrap .mnd-tac-chip-btn,
.mnd-fe-app.mnd-fe-app .mnd-ic-klein, .mnd-fe-app.mnd-fe-app .mnd-chat-del, .mnd-fe-app.mnd-fe-app .mnd-tac-chip-btn {
min-height:var(--mnd-touch-min);
min-width:var(--mnd-touch-min);
}
/* Symbolknoepfe in Aktionsspalten: Die Grundregel weiter unten setzt sie auf
die kompakte Groesse (32 px) und hat durch `:not(.mnd-act-text)` ein
hoeheres Gewicht als die allgemeine Fingerregel. Ohne diese Zeile blieben
sie am Handy bei 32 px - unter der sicher treffbaren Groesse. Die doppelte
Wurzelklasse hebt das Gewicht wieder an. */
.mnd-wrap.mnd-wrap .mnd-actions .button-small:not(.mnd-act-text),
.mnd-fe-app.mnd-fe-app .mnd-fe-mini{
width:var(--mnd-touch); min-width:var(--mnd-touch);
min-height:var(--mnd-touch); height:auto;
}
/* Das Schliesskreuz einer Meldung bleibt klein – es liegt in der Ecke und
die Meldung laesst sich auch ohne es wegklicken. */
.mnd-wrap.mnd-wrap .notice-dismiss, .mnd-fe-app.mnd-fe-app .notice-dismiss {
min-height:0; min-width:0; height:auto;
}
}
/* Auf Zeigegeraeten mit Maus reicht der kleinere Wert – dort ist der Zeiger
pixelgenau. So bleiben Uebersichten am Schreibtisch kompakt. */
@media (min-width:901px) and (pointer:fine) {
.mnd-wrap.mnd-wrap .button-small, .mnd-wrap.mnd-wrap button.button-small {
min-height:var(--mnd-touch-min);
}
}
/* ===========================================================================
v6.6.0 – Zwei Ursachen, die in allen fünf Bildschirmformaten auffielen.
1) Text ragte aus Kacheln und Tabellenzellen.
Die Umbruchsicherung greift zwar an der Wurzel, aber `` und
`` sind Inline-Elemente: Sie bekommen keine eigene Breite und
können deshalb nicht umbrechen, wenn der umgebende Kasten schmaler ist
als das längste Wort. Gemessen: 217 px Inhalt in einem 150-px-Kasten.
2) Symbole waren größer als ihre Box.
Dashicons bringen eine feste Zeichengröße von 20 px mit; in Kacheln
wurde die Box aber auf 15–23 px gerechnet. Das Zeichen stand über den
Rand hinaus. Jetzt richtet sich das Zeichen nach der Box, nicht umgekehrt.
=========================================================================== */
.mnd-wrap strong, .mnd-wrap small, .mnd-wrap b, .mnd-wrap em,
.mnd-fe-app strong, .mnd-fe-app small, .mnd-fe-app b, .mnd-fe-app em,
.mnd-pub-card strong, .mnd-pub-card small{
min-width:0; max-width:100%; overflow-wrap:break-word;
}
.mnd-tile strong, .mnd-tile small,
.mnd-hub-tile strong, .mnd-hub-tile small,
.mnd-table td strong, .mnd-table td small{ display:inline-block; }
.mnd-tile-icon, .mnd-hub-icon{
flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
overflow:hidden;
}
.mnd-tile-icon.dashicons, .mnd-hub-icon.dashicons,
.mnd-tile-icon .dashicons, .mnd-hub-icon .dashicons{
font-size:inherit; width:1em; height:1em; line-height:1;
}
/* Dashicons bringen 20 px Zeichenbreite mit. Wird die Schriftgroesse
groesser gesetzt (z. B. 30 px fuer eine Bereichsueberschrift), waechst das
Zeichen, die Box bleibt 20 px - und das Symbol steht ueber den Rand.
Diese Regel bindet die Box an die Zeichengroesse. */
.mnd-wrap .dashicons, .mnd-fe-app .dashicons, .mnd-pub-card .dashicons{
width:auto; height:auto; min-width:1em; line-height:1;
}
/* ===========================================================================
Schaltflächen – eine gemeinsame Grundlage für App und Verwaltung.
► Gemessen wurden acht verschiedene Höhen (28, 30, 34, 36, 38, 40, 42,
44 px) und 24 Innenabstands-Kombinationen, verteilt über vier Dateien.
Nebeneinander in derselben Leiste ergab das sichtbare Höhenversätze –
zuletzt 9 px zwischen Auswahlfeld und Schaltfläche in der Filterleiste.
Zusätzlich sah dieselbe Schaltfläche in der App anders aus als in der
Verwaltung, obwohl beide dieselbe Ansicht zeigen.
Ab hier gilt eine Höhe, ein Innenabstand, ein Eckenradius. Wo eine
Ausnahme nötig ist (Symbolknöpfe, große Handlungsknöpfe), leitet sie
sich aus derselben Variablen ab.
=========================================================================== */
:root, .mnd-wrap, .mnd-fe-app, .mnd-pub-card{
--mnd-btn-h: 40px; /* Standardhöhe, deckt sich mit der Feldhöhe */
--mnd-btn-h-sm: 36px; /* kleine Schaltflächen und Aktionsspalten */
--mnd-btn-h-lg: 48px; /* Haupt-Handlungsknopf; entspricht dem Wert, den
WordPress für .button-hero vorgibt - so gibt es
keinen stillen Widerspruch zwischen Kern und
Fundament. */
}
.mnd-wrap .button, .mnd-wrap button.button,
.mnd-fe-app .mnd-fe-btn, .mnd-fe-app .mnd-fe-btn2,
.mnd-fe-app .mnd-fe-linkbtn, .mnd-fe-app .mnd-hub-attn-btn,
.mnd-pwa-yes, .mnd-pwa-no{
min-height:var(--mnd-btn-h);
padding:var(--mnd-s3) var(--mnd-s5);
border-radius:var(--mnd-r-sm);
font-size:var(--mnd-fs-md);
line-height:1.3;
display:inline-flex; align-items:center; justify-content:center; gap:var(--mnd-s2);
box-sizing:border-box;
}
.mnd-wrap .button-small, .mnd-wrap .button.button-small{
min-height:var(--mnd-btn-h-sm);
padding:var(--mnd-s1) var(--mnd-s4);
font-size:var(--mnd-fs-sm);
}
.mnd-wrap.mnd-wrap .button.button-hero, .mnd-wrap.mnd-wrap .button-hero,
.mnd-fe-app.mnd-fe-app .mnd-fe-btn-hero{
min-height:var(--mnd-btn-h-lg);
padding:var(--mnd-s4) var(--mnd-s7);
font-size:var(--mnd-fs-lg);
/* WordPress gibt .button-hero eine Zeilenhöhe von 3,29 - das sind 46 px
allein für die Zeile, plus Innenabstand ergab 71 px statt 46 px.
Gemessen am Knopf „Anlegen": 71 px hoch bei 122 px Breite.
ACHTUNG Gewichtungsfalle: Die Kernregel heißt `.wp-core-ui .button.button-hero`
- drei Klassen. Eine Regel mit `.mnd-wrap .button-hero` (zwei Klassen)
verliert, egal in welcher Reihenfolge geladen wird. Deshalb steht die
Wurzelklasse hier doppelt; das genügt ohne !important. */
line-height:1.3;
}
/* Symbolknöpfe bleiben quadratisch und behalten die Trefferfläche.
Bewusst `min-height` statt `height`: In einer Aktionsspalte steht neben
ihnen manchmal ein zweizeiliger Textknopf. Mit fester Höhe stünde die Reihe
schief - so wachsen alle gemeinsam auf die Höhe des höchsten. */
.mnd-actions .button-small:not(.mnd-act-text),
.mnd-fe-mini{
width:var(--mnd-btn-h-sm); min-width:var(--mnd-btn-h-sm);
min-height:var(--mnd-btn-h-sm); height:auto; padding:0;
}
/* Felder auf dieselbe Höhe wie die Schaltflächen daneben. */
.mnd-wrap input[type=text], .mnd-wrap input[type=email], .mnd-wrap input[type=tel],
.mnd-wrap input[type=number], .mnd-wrap input[type=date], .mnd-wrap input[type=search],
.mnd-wrap input[type=password], .mnd-wrap select,
.mnd-fe-app input[type=text], .mnd-fe-app input[type=email], .mnd-fe-app input[type=tel],
.mnd-fe-app input[type=number], .mnd-fe-app input[type=date], .mnd-fe-app select{
min-height:var(--mnd-btn-h); box-sizing:border-box;
}
/* Datum, Uhrzeit und Farbe bringen eine eigene, vom Browser gesetzte Höhe mit
(gemessen: 45 px bzw. 27 px). Sie stehen fast immer neben einem normalen
Feld - deshalb bekommen sie hier dieselbe Höhe. `min-height` aus der
Fingerregel bleibt wirksam, weil die tatsächliche Höhe stets das Größere
von Höhe und Mindesthöhe ist. */
.mnd-wrap.mnd-wrap input[type=date], .mnd-wrap.mnd-wrap input[type=time], .mnd-wrap.mnd-wrap input[type=color],
.mnd-fe-app.mnd-fe-app input[type=date], .mnd-fe-app.mnd-fe-app input[type=time], .mnd-fe-app.mnd-fe-app input[type=color]{
height:var(--mnd-btn-h); padding-top:0; padding-bottom:0;
}
.mnd-wrap.mnd-wrap input[type=color], .mnd-fe-app.mnd-fe-app input[type=color]{
width:var(--mnd-btn-h-lg); padding:var(--mnd-s0); cursor:pointer;
}
/* Alles in einer Leiste steht auf einer Linie.
► Zuerst stand hier `stretch`. Das war falsch: Steht in derselben Leiste ein
mehrzeiliger Hinweistext, zieht `stretch` die Schaltfläche daneben auf
dessen Höhe - gemessen 71 px für den Knopf „Anlegen" bei 122 px Breite.
Seit die Höhen ohnehin aus einer Quelle kommen, genügt `center`: gleiche
Höhe, gemeinsame Mittellinie, und ein längerer Text daneben verzerrt
nichts mehr. */
.mnd-bar, .mnd-filterbar, .mnd-form-foot, .mnd-actions, .mnd-fg, .mnd-players-toolbar{
align-items:center;
}
/* ===========================================================================
Schreibweise – eine Regel statt Mischformen (v6.9.0)
► Gemessen auf der Startseite: elf von zwölf Abschnittsüberschriften standen
in Großbuchstaben, eine einzige nicht („Nächste Spiele via fußball.de").
Im Seitenpfad rechts standen beide Formen direkt untereinander - das war
der sichtbare Bruch.
Festlegung: Kurze Abschnitts- und Bereichsnamen stehen in Großbuchstaben,
Zusätze und Fließtext in normaler deutscher Rechtschreibung. Die
Großschreibung macht ausschließlich das Stilblatt - im Quelltext, in
Ausdrucken, E-Mails und Ausgaben bleibt der Text normal geschrieben und
damit lesbar. Eigennamen wie „fußball.de" behalten ihre Schreibweise,
weil sie als `` ausgezeichnet sind.
=========================================================================== */
.mnd-wrap .mnd-panel > h2, .mnd-wrap .mnd-panel-head-row > h2,
.mnd-fe-app .mnd-panel > h2, .mnd-fe-app .mnd-panel-head-row > h2{
text-transform:uppercase;
letter-spacing:.05em;
}
/* Zusätze, Eigennamen und Zählwerte bleiben normal geschrieben. */
.mnd-panel h2 small, .mnd-panel h2 .mnd-zusatz,
.mnd-panel-head-row h2 small{
text-transform:none;
letter-spacing:0;
}
/* ===========================================================================
Seitenpfad rechts – zugeklappt mit sichtbarem Griff (v6.9.0)
► Vorher: Die Beschriftungen erschienen nur, solange der Mauszeiger auf der
Leiste lag. Wer das nicht zufällig ausprobierte, sah nur ein paar Striche
und wusste nicht, dass sich dort etwas öffnen lässt. Am Handy fehlte der
Pfad ganz - genau dort, wo langes Scrollen am meisten weh tut.
Jetzt: ein schmaler Griff mit Pfeil zeigt an, dass sich etwas öffnen lässt.
Ein Klick bzw. Fingertipp fährt die Beschriftungen aus und lässt sie offen,
bis wieder zugeklappt wird. Auf Mausgeräten bleibt die Vorschau beim
Darüberfahren erhalten - sie ist bequem, aber nicht mehr der einzige Weg.
=========================================================================== */
/* Der Griff ist zugeklappt das EINZIGE, was von der Leiste zu sehen ist.
Beschriftung darüber, damit niemand raten muss, was der Pfeil tut. */
.mnd-rail-griff{
position:absolute; right:0; top:50%; transform:translateY(-50%);
min-width:var(--mnd-btn-h-sm); min-height:var(--mnd-btn-h-lg);
display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
gap:2px; padding:var(--mnd-s2) var(--mnd-s1);
border:1px solid var(--mnd-line); border-right:0;
border-radius:var(--mnd-r-sm) 0 0 var(--mnd-r-sm);
background:var(--mnd-card); color:var(--mnd-red);
cursor:pointer; box-shadow:var(--mnd-shadow);
}
.mnd-rail-griff:hover{ border-color:var(--mnd-red); }
.mnd-rail-grifftext{
font-size:var(--mnd-fs-xs); font-weight:700; line-height:1.1;
color:var(--mnd-mut); white-space:nowrap;
writing-mode:vertical-rl; transform:rotate(180deg);
}
.mnd-rail-griff .dashicons{ transition:transform .2s; }
.mnd-rail.is-open .mnd-rail-griff .dashicons{ transform:rotate(180deg); }
.mnd-rail{ padding-right:calc(var(--mnd-btn-h-sm) + var(--mnd-s2)); }
/* ► Zugeklappt ist NICHTS zu sehen außer dem Griff.
Vorher blieben die Striche und die Beschriftung des gerade sichtbaren
Abschnitts stehen - dann ist der Pfeil kein Schalter mehr, sondern
Beiwerk. Jetzt gilt: Pfeil zu = Leiste weg. */
.mnd-rail:not(.is-open) .mnd-rail-item{ display:none; }
.mnd-rail:not(.is-open){ border-right:0; padding:0 0 0 0; padding-right:calc(var(--mnd-btn-h-sm) + var(--mnd-s2)); background:none; box-shadow:none; }
/* Aufgeklappt: alles wie zuvor, samt Vorschau beim Darüberfahren. */
.mnd-rail.is-open .mnd-rail-lbl{ opacity:1; transform:none; pointer-events:auto; }
/* Am Handy war der Pfad bisher ausgeblendet. Jetzt ist er da - zugeklappt
belegt er nur die Breite des Griffs, aufgeklappt legt er sich über den
Inhalt statt ihn zu verschieben. */
@media (max-width:782px){
.mnd-rail-admin{ display:flex; }
.mnd-rail{ right:0; }
.mnd-rail:not(.is-open) .mnd-rail-item{ display:none; }
.mnd-rail.is-open{
background:var(--mnd-card); border:1px solid var(--mnd-line);
border-right:0; border-radius:var(--mnd-r-md) 0 0 var(--mnd-r-md);
padding:var(--mnd-s4) calc(var(--mnd-btn-h-sm) + var(--mnd-s2)) var(--mnd-s4) var(--mnd-s4);
box-shadow:var(--mnd-shadow); max-height:70vh; overflow-y:auto;
}
.mnd-rail.is-open .mnd-rail-item{ min-height:var(--mnd-touch); }
}
/* ===========================================================================
Seitenpfad im Kopf – „wo bin ich?" vor „was ist das?" (v6.9.0)
Der Pfad steht klein über dem Titel und ist anklickbar. Der Titel selbst
wird kleiner, weil er nicht mehr allein die Einordnung leisten muss.
=========================================================================== */
.mnd-header-txt{ min-width:0; }
.mnd-pfad{
display:flex; flex-wrap:wrap; align-items:center; gap:var(--mnd-s1);
font-size:var(--mnd-fs-sm); line-height:1.4;
color:rgba(255,255,255,.75); margin:0 0 var(--mnd-s1); min-width:0;
}
.mnd-pfad a{ color:rgba(255,255,255,.92); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); }
.mnd-pfad a:hover, .mnd-pfad a:focus-visible{ color:#fff; border-bottom-color:#fff; }
.mnd-pfad-sep{ color:rgba(255,255,255,.45); }
.mnd-pfad-hier{ color:#fff; font-weight:700; }
/* Der Titel darf jetzt kleiner sein - der Pfad trägt die Einordnung. */
.mnd-header h1{ font-size:var(--mnd-fs-xl); }
@media (max-width:640px){
.mnd-header h1{ font-size:var(--mnd-fs-lg); }
.mnd-pfad{ font-size:var(--mnd-fs-xs); }
}
/* In der App steht der Pfad nicht auf dem roten Kopfbalken, sondern direkt
auf der Seite - dort braucht er dunkle Schrift. */
.mnd-pfad-app{ color:var(--mnd-mut); margin:var(--mnd-s1) 0 var(--mnd-s0); }
.mnd-pfad-app a{ color:var(--mnd-red-d); border-bottom-color:rgba(200,16,46,.3); }
.mnd-pfad-app a:hover, .mnd-pfad-app a:focus-visible{ color:var(--mnd-red); border-bottom-color:var(--mnd-red); }
.mnd-pfad-app .mnd-pfad-sep{ color:var(--mnd-line); }
.mnd-pfad-app .mnd-pfad-hier{ color:var(--mnd-ink); }
/* Der Titel folgt direkt darunter - der bisherige obere Abstand entfällt. */
.mnd-pfad-app + .mnd-fe-h1{ margin-top:var(--mnd-s1); font-size:var(--mnd-fs-xl); }
/* ===========================================================================
Spielerfilter – eingeklappt eine Zeile, aufgeklappt ein Mega-Menü (v6.9.0)
=========================================================================== */
.mnd-flt{ margin:0 0 var(--mnd-s5); }
.mnd-flt-knopf{
display:inline-flex; align-items:center; gap:var(--mnd-s2);
min-height:var(--mnd-btn-h); padding:var(--mnd-s3) var(--mnd-s5);
background:var(--mnd-card); border:1px solid var(--mnd-line);
border-radius:var(--mnd-r-md); cursor:pointer;
font-size:var(--mnd-fs-md); font-weight:700; color:var(--mnd-ink);
}
.mnd-flt.hat-filter .mnd-flt-knopf{ border-color:var(--mnd-red); color:var(--mnd-red-d); }
.mnd-flt-knopf .dashicons{ color:var(--mnd-red); }
.mnd-flt-zahl{
display:inline-flex; align-items:center; justify-content:center;
min-width:20px; height:20px; padding:0 var(--mnd-s2);
border-radius:var(--mnd-r-pill); background:var(--mnd-red); color:#fff;
font-size:var(--mnd-fs-xs); font-weight:700;
}
.mnd-flt-pfeil{ transition:transform .2s; }
.mnd-flt.is-open .mnd-flt-pfeil{ transform:rotate(180deg); }
.mnd-flt-panel{
margin-top:var(--mnd-s3); padding:var(--mnd-s5);
background:var(--mnd-card); border:1px solid var(--mnd-line);
border-radius:var(--mnd-r-lg); box-shadow:var(--mnd-shadow);
}
.mnd-flt-grid{
display:grid; gap:var(--mnd-s6);
grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.mnd-flt-gruppe h3{
margin:0 0 var(--mnd-s3); padding:0; border:0;
font-size:var(--mnd-fs-xs); font-weight:800; letter-spacing:.06em;
text-transform:uppercase; color:var(--mnd-mut);
}
.mnd-flt-chips{ display:flex; flex-wrap:wrap; gap:var(--mnd-s2); }
.mnd-flt-leer{ margin:0; font-size:var(--mnd-fs-sm); color:var(--mnd-mut); }
/* Ankreuzfeld unsichtbar, aber bedienbar: Die ganze Pille ist die Fläche. */
.mnd-flt-chip{
display:inline-flex; align-items:center; gap:var(--mnd-s2);
min-height:var(--mnd-btn-h-sm); padding:var(--mnd-s2) var(--mnd-s4);
border:1px solid var(--mnd-line); border-radius:var(--mnd-r-pill);
background:var(--mnd-bg); cursor:pointer; margin:0;
font-size:var(--mnd-fs-sm); font-weight:600; color:var(--mnd-ink);
transition:background .12s, border-color .12s, color .12s;
}
.mnd-flt-chip input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.mnd-flt-chip:hover{ border-color:var(--mnd-red); }
.mnd-flt-chip:has(input:checked){ background:var(--mnd-red); border-color:var(--mnd-red); color:#fff; }
.mnd-flt-chip:has(input:focus-visible){ box-shadow:0 0 0 3px rgba(200,16,46,.25); }
/* Die drei Ampelfarben behalten ihre Bedeutung auch im gewählten Zustand. */
.mnd-flt-ampel-gruen:has(input:checked){ background:var(--mnd-ok); border-color:var(--mnd-ok); }
.mnd-flt-ampel-gelb:has(input:checked){ background:var(--mnd-warn); border-color:var(--mnd-warn); }
.mnd-flt-ampel-rot:has(input:checked){ background:var(--mnd-stop); border-color:var(--mnd-stop); }
.mnd-flt-foot{
display:flex; flex-wrap:wrap; align-items:center; gap:var(--mnd-s4);
margin-top:var(--mnd-s5); padding-top:var(--mnd-s4);
border-top:1px solid var(--mnd-line);
}
.mnd-flt-treffer{ font-size:var(--mnd-fs-sm); color:var(--mnd-mut); margin-right:auto; }
@media (max-width:640px){
.mnd-flt-knopf{ width:100%; justify-content:center; }
.mnd-flt-grid{ gap:var(--mnd-s5); }
.mnd-flt-chip{ min-height:var(--mnd-touch); }
.mnd-flt-foot .mnd-fe-btn2{ width:100%; }
}
/* ===========================================================================
Mauszeiger-Effekt und offene Seite (v6.9.1)
► Gefunden: Der Magenta-Ton, den Philipp gemeldet hat, stammt NICHT aus
diesem Plugin. Er kommt aus der `reset.css` des Themes und lautet
`[type="button"]:hover { background-color:#cc3366; color:#fff }`. Diese
Regel greift auf jede schlichte Schaltfläche der App - und #cc3366 ist
weder die Vereinsfarbe noch dazu abgestimmt.
Deshalb bestimmt das Plugin seinen Hover-Zustand ab jetzt selbst. Die
Farben stammen aus den Einstellungen; die Schriftfarbe darauf wird
automatisch hell oder dunkel gewählt, damit der Text in jedem Fall lesbar
bleibt.
Zur Gewichtung: Die Theme-Regel hat zwei Stufen (Attribut + Pseudoklasse).
Die Regeln hier haben mit der Wurzelklasse drei - sie gewinnen also,
unabhängig von der Ladereihenfolge und ohne !important.
=========================================================================== */
:root, .mnd-wrap, .mnd-fe-app, .mnd-pub-card{
--mnd-hover: #f6f7f9;
--mnd-hover-text: #1f2430;
--mnd-aktiv: var(--mnd-red);
--mnd-aktiv-text: #ffffff;
}
.mnd-wrap button:hover, .mnd-wrap [type="button"]:hover, .mnd-wrap [type="submit"]:hover,
.mnd-wrap .button:hover, .mnd-wrap .mnd-flt-knopf:hover,
.mnd-fe-app button:hover, .mnd-fe-app [type="button"]:hover, .mnd-fe-app [type="submit"]:hover,
.mnd-fe-app .button:hover, .mnd-fe-app .mnd-flt-knopf:hover,
.mnd-wrap button:focus, .mnd-wrap [type="button"]:focus,
.mnd-fe-app button:focus, .mnd-fe-app [type="button"]:focus{
background-color:var(--mnd-hover);
color:var(--mnd-hover-text);
border-color:var(--mnd-red);
}
/* Farbig gefüllte Schaltflächen behalten ihre Farbe und werden nur dunkler -
sie sollen beim Darüberfahren nicht plötzlich weiß werden. */
.mnd-wrap .button-primary:hover, .mnd-wrap .button-hero:hover,
.mnd-fe-app .mnd-fe-btn:hover, .mnd-fe-app .button-primary:hover,
.mnd-fe-app .mnd-fe-btn-hero:hover{
background-color:var(--mnd-red-d);
color:#fff;
border-color:var(--mnd-red-d);
}
/* Die gerade geöffnete Seite - im Menü und in Reitern. */
.mnd-fe-app .mnd-fe-nav-item.is-active, .mnd-fe-app .mnd-fe-dnav.is-active,
.mnd-wrap .nav-tab-active, .mnd-wrap .mnd-tab.is-active,
.mnd-startbar-chip.is-active{
background-color:var(--mnd-aktiv);
color:var(--mnd-aktiv-text);
border-color:var(--mnd-aktiv);
}
/* ===========================================================================
Der Griff des Seitenpfads liegt AUSSERHALB der App (v6.9.2)
► Warum er trotz der Regeln oben magenta wurde: Die Leiste wird per
JavaScript an `document.body` gehängt, nicht in `.mnd-fe-app`. Alle
Regeln, die mit `.mnd-fe-app` beginnen, greifen dort nicht - die
Theme-Regel `[type="button"]:hover` dagegen schon. Deshalb steht der
Griff hier eigenständig, ohne Wurzelklasse.
Gestaltung: ruhige Fläche, Vereinsfarbe nur als Akzent. Beim Darüberfahren
wird die Fläche leicht getönt statt vollflächig eingefärbt - eine
180 px hohe, kräftig gefüllte Fläche am Bildrand zieht mehr Aufmerksamkeit
auf sich als der Inhalt, um den es geht.
=========================================================================== */
.mnd-rail-griff, .mnd-rail-griff:hover, .mnd-rail-griff:focus{
background-color:var(--mnd-card);
color:var(--mnd-red);
border-color:var(--mnd-line);
}
.mnd-rail-griff:hover, .mnd-rail-griff:focus-visible{
background-color:var(--mnd-hover);
border-color:var(--mnd-red);
}
.mnd-rail-griff:focus-visible{ outline:2px solid var(--mnd-red); outline-offset:2px; }
.mnd-rail-griff .mnd-rail-grifftext{ color:var(--mnd-mut); }
.mnd-rail-griff:hover .mnd-rail-grifftext{ color:var(--mnd-red-d); }
.mnd-rail-griff .dashicons{ color:var(--mnd-icon, var(--mnd-red)); }
/* Auch die Einträge der Leiste selbst liegen außerhalb der App. */
.mnd-rail-item:hover .mnd-rail-lbl{
background-color:var(--mnd-hover);
color:var(--mnd-hover-text);
border-color:var(--mnd-red);
}
/* Symbolfarbe aus den Einstellungen - überall dort, wo ein Zeichen für sich
steht und nicht Teil einer farbigen Fläche ist. */
.mnd-wrap .mnd-panel h2 .dashicons, .mnd-fe-app .mnd-panel h2 .dashicons,
.mnd-wrap .mnd-tile-icon, .mnd-fe-app .mnd-hub-icon,
.mnd-flt-knopf .dashicons{ color:var(--mnd-icon, var(--mnd-red)); }
/* Im Menü ist der Grund dunkel - dort gilt eine eigene, halbtransparente
Fläche. Würde hier die helle Fläche von oben greifen, wäre der Eintrag
beim Darüberfahren weiß auf Weiß. */
.mnd-fe-drawer .mnd-fe-dnav:hover,
.mnd-fe-drawer .mnd-fe-nav-item:hover{
background-color:color-mix(in srgb, var(--mnd-hover-menu) 18%, transparent);
color:var(--mnd-hover-menu);
}
.mnd-fe-drawer .mnd-fe-dnav.is-active,
.mnd-fe-drawer .mnd-fe-nav-item.is-active{
background-color:var(--mnd-aktiv);
color:var(--mnd-aktiv-text);
}
/* Aufgeklappt darf der Griff die Einträge nicht überdecken (v6.9.3).
Der Platz für den Griff wird aus seiner tatsächlichen Breite reserviert,
und die Leiste bekommt eine eigene Fläche - sonst schweben die
Beschriftungen frei über dem Hintergrundbild und der Griff sitzt mitten
in der Liste. */
:root, .mnd-wrap, .mnd-fe-app{ --mnd-rail-griff-b: 30px; }
.mnd-rail{ padding-right:calc(var(--mnd-rail-griff-b) + var(--mnd-s3)); }
.mnd-rail-griff{ width:var(--mnd-rail-griff-b); min-width:var(--mnd-rail-griff-b); }
.mnd-rail.is-open{
background:var(--mnd-card);
border:1px solid var(--mnd-line); border-right:0;
border-radius:var(--mnd-r-md) 0 0 var(--mnd-r-md);
box-shadow:var(--mnd-shadow);
padding:var(--mnd-s4) calc(var(--mnd-rail-griff-b) + var(--mnd-s4)) var(--mnd-s4) var(--mnd-s4);
max-height:80vh; overflow-y:auto;
}
/* Auf eigener Fläche brauchen die Beschriftungen keinen zweiten Kasten mehr. */
.mnd-rail.is-open .mnd-rail-lbl{
background:none; border:0; padding:2px 0; font-size:var(--mnd-fs-sm);
}
/* Beide Griffe liegen bündig am Bildrand (v6.15.2)
► Der Seitenpfad stand 10 px eingerückt, die Werkzeugleiste bündig - zwei
gleich aussehende Griffe an derselben Kante, aber nicht in einer Flucht.
► Die 10 px sind in appshell.css bzw. admin.css auf 0 gesetzt. Hier bleibt
der zweite Teil: Der Griff sitzt absolut im PADDING-Kasten der Leiste;
der rechte Innenabstand und die Randlinie hätten ihn erneut um einige
Pixel hereingezogen. Zugeklappt gibt es deshalb weder das eine noch das
andere. */
.mnd-rail:not(.is-open){ padding-right:0; border-right:0; }
.mnd-rail:not(.is-open) .mnd-rail-griff{ right:0; }
.mnd-rail.is-open .mnd-rail-item{ justify-content:flex-start; gap:var(--mnd-s3); }
.mnd-rail.is-open .mnd-rail-lbl{ order:2; }
.mnd-rail.is-open .mnd-rail-tick{ order:1; }
/* ===========================================================================
Schaltflächen-Farben aus den Einstellungen (v6.10.0)
Die vier Werte für Fläche und Schrift - im Grundzustand und beim
Darüberfahren - kommen jetzt aus der Farbtabelle. Die Regeln liegen hier
ganz am Ende, damit sie die älteren Einzelfestlegungen überschreiben, und
sie stehen mit doppelter Wurzelklasse, damit die Theme-Regel
`[type="button"]:hover` nicht dazwischenfunkt.
=========================================================================== */
:root, .mnd-wrap, .mnd-fe-app, .mnd-pub-card{
--mnd-btn-bg: #ffffff;
--mnd-btn-tx: #1f2430;
--mnd-btn-hbg: #f1f3f5;
--mnd-btn-htx: #8a1220;
--mnd-akzent: #8a93a3;
}
.mnd-wrap.mnd-wrap .button, .mnd-wrap.mnd-wrap button:not(.button-primary):not(.button-hero),
.mnd-fe-app.mnd-fe-app .button, .mnd-fe-app.mnd-fe-app .mnd-fe-btn2,
.mnd-fe-app.mnd-fe-app button:not(.button-primary):not(.mnd-fe-btn):not(.mnd-fe-btn-hero){
background-color:var(--mnd-btn-bg);
color:var(--mnd-btn-tx);
}
.mnd-wrap.mnd-wrap .button:hover, .mnd-wrap.mnd-wrap .button:focus-visible,
.mnd-wrap.mnd-wrap button:not(.button-primary):not(.button-hero):hover,
.mnd-fe-app.mnd-fe-app .button:hover, .mnd-fe-app.mnd-fe-app .mnd-fe-btn2:hover,
.mnd-fe-app.mnd-fe-app button:not(.button-primary):not(.mnd-fe-btn):not(.mnd-fe-btn-hero):hover,
.mnd-rail-griff:hover{
background-color:var(--mnd-btn-hbg);
color:var(--mnd-btn-htx);
border-color:var(--mnd-red);
}
.mnd-rail-griff:hover .mnd-rail-grifftext{ color:var(--mnd-btn-htx); }
/* ===========================================================================
Aufklapp-Bereiche (v6.10.1)
Ein gemeinsamer Baustein für alles, was Platz spart: lange Listen,
Formulare, Zusatzangaben. Gebaut mit / - das kann der
Browser von Haus aus, funktioniert also auch ohne JavaScript und ist für
Vorlesehilfen richtig ausgezeichnet.
=========================================================================== */
.mnd-aufklapp{ margin:var(--mnd-s3) 0 0; }
.mnd-aufklapp > summary{
display:flex; align-items:center; justify-content:center; gap:var(--mnd-s2);
min-height:var(--mnd-btn-h); padding:var(--mnd-s2) var(--mnd-s5);
background:var(--mnd-bg); border:1px dashed var(--mnd-line);
border-radius:var(--mnd-r-md); cursor:pointer; list-style:none;
font-size:var(--mnd-fs-sm); font-weight:700; color:var(--mnd-mut);
}
.mnd-aufklapp > summary::-webkit-details-marker{ display:none; }
.mnd-aufklapp > summary:hover{
background:var(--mnd-btn-hbg); color:var(--mnd-btn-htx); border-color:var(--mnd-red);
}
.mnd-aufklapp > summary .dashicons{ color:var(--mnd-icon); transition:transform .2s; }
.mnd-aufklapp[open] > summary .dashicons{ transform:rotate(180deg); }
.mnd-aufklapp-inhalt{ padding-top:var(--mnd-s3); }
.mnd-aufklapp-form > summary{ justify-content:flex-start; }
@media (max-width:640px){ .mnd-aufklapp > summary{ min-height:var(--mnd-touch); } }
/* ===========================================================================
Panels ein- und ausklappen (v6.11.0)
Die Überschrift ist der Griff: Ein Klick darauf oder auf den Pfeil rechts
klappt den Bereich zu. Voreinstellung ist offen - wer nichts tut, sieht
alles wie bisher.
=========================================================================== */
/* Jeder Abschnittskopf ist ein Griff. */
.mnd-abschnitt-kopf{ cursor:pointer; display:flex; align-items:center; }
h2.mnd-abschnitt-kopf{ gap:var(--mnd-s3); }
.mnd-panel-klapp{
margin-left:auto; flex:0 0 auto;
width:var(--mnd-btn-h-sm); height:var(--mnd-btn-h-sm);
display:inline-flex; align-items:center; justify-content:center;
background:none; border:1px solid transparent; border-radius:var(--mnd-r-sm);
color:var(--mnd-icon); cursor:pointer; padding:0;
}
.mnd-panel-klapp:hover{ background:var(--mnd-btn-hbg); border-color:var(--mnd-line); }
.mnd-panel-klapp .dashicons{ transition:transform .2s; }
.mnd-abschnitt-kopf.is-zu .mnd-panel-klapp .dashicons{ transform:rotate(180deg); }
/* Zugeklappt braucht die Überschrift keine Trennlinie und keinen Abstand
nach unten - sonst bleibt ein leerer Streifen stehen. */
.mnd-abschnitt-kopf.is-zu{
margin-bottom:0; padding-bottom:0; border-bottom:0;
}
.mnd-panel.is-zu{ padding-bottom:var(--mnd-s4); }
@media (max-width:640px){
.mnd-panel-klapp{ width:var(--mnd-touch); height:var(--mnd-touch); }
}
/* ===========================================================================
Kartenlook (v6.12.0) – nach der Vorlage, die Philipp mitgebracht hat
Fünf Merkmale machen dort die ruhige, professionelle Wirkung aus. Alle
fünf sind hier umgesetzt, aber mit den Farben aus den Einstellungen statt
mit Pastelltönen:
1. Ein sehr zarter Verlauf von einem Farbhauch nach Weiß - kein Vollton.
Der Farbanteil liegt bei acht Prozent; die Farbe ordnet zu, ohne zu
schreien.
2. Große, weiche Ecken (16 px statt 12 px).
3. Ein weicher Schatten statt einer harten Linie. Ränder trennen, Schatten
heben - Letzteres wirkt ruhiger.
4. Das Symbol sitzt auf einer weißen Kachel mit eigener Rundung, nicht frei
im Text. Das gibt der Überschrift einen festen Anker.
5. Eine kleine Zeile in Großbuchstaben über der Überschrift ordnet den
Block ein („Vorspann").
► Was BEWUSST nicht übernommen wurde: die kräftig orangefarbenen Knöpfe der
Vorlage. Sie stammen aus einer Werbeseite, auf der ein einziger Knopf alle
Aufmerksamkeit bekommen soll. In einem Arbeitswerkzeug mit zwanzig
Schaltflächen je Seite hebt das nichts hervor, sondern nur den Lärmpegel.
=========================================================================== */
/* Wurzelklasse doppelt: `admin.css` legt `.mnd-panel` mit weißer Fläche und
12-px-Ecken fest und wird SPÄTER geladen - bei gleicher Gewichtung gewänne
sie. Zwei Wurzelklassen heben das Gewicht um eine Stufe. */
.mnd-wrap.mnd-wrap .mnd-panel, .mnd-fe-app.mnd-fe-app .mnd-panel,
.mnd-fe-app.mnd-fe-app .mnd-hub-attn, .mnd-fe-app.mnd-fe-app .mnd-fe-chartblock{
background:
linear-gradient(158deg,
color-mix(in srgb, var(--mnd-red) 8%, var(--mnd-card)) 0%,
var(--mnd-card) 58%);
border:1px solid color-mix(in srgb, var(--mnd-red) 10%, var(--mnd-line));
border-radius:16px;
box-shadow:0 1px 2px rgba(20,24,33,.04), 0 10px 28px rgba(20,24,33,.06);
}
/* Das Symbol in der Überschrift wird zur Kachel. */
.mnd-panel > h2 > .dashicons:first-child,
.mnd-panel > .mnd-panel-head-row > h2 > .dashicons:first-child,
.mnd-hub-attn > .mnd-hub-h2 > .dashicons:first-child{
flex:0 0 auto;
width:40px; height:40px;
display:inline-flex; align-items:center; justify-content:center;
/* Getönte Kachel, farbiges Zeichen - so ist es in allen Vorlagen. Eine
weiße Kachel auf weißer Karte wäre unsichtbar. */
background:color-mix(in srgb, var(--mnd-icon) 12%, var(--mnd-card));
border-radius:12px;
font-size:20px; line-height:1;
color:var(--mnd-icon);
}
/* Überschrift daneben, mit Luft. */
.mnd-panel > h2, .mnd-panel > .mnd-panel-head-row > h2{
gap:var(--mnd-s4);
}
/* Vorspann: kleine Zeile über der Überschrift.
Verwendung: Kader & Leistung */
.mnd-vorspann{
display:block;
font-size:var(--mnd-fs-xs); font-weight:800; letter-spacing:.08em;
text-transform:uppercase; color:var(--mnd-red-d);
margin:0 0 var(--mnd-s1);
}
/* Listen mit Symbol vor jeder Zeile - wie in der Vorlage. */
.mnd-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--mnd-s4); }
.mnd-liste > li{ display:flex; align-items:flex-start; gap:var(--mnd-s3); min-width:0; }
.mnd-liste > li > .dashicons{ flex:0 0 auto; color:var(--mnd-icon); font-size:18px; margin-top:2px; }
/* Kacheln und Karten bekommen denselben Verlauf, nur schwächer. */
.mnd-wrap.mnd-wrap .mnd-tile, .mnd-fe-app.mnd-fe-app .mnd-hub-tile{
background:
linear-gradient(158deg,
color-mix(in srgb, var(--mnd-red) 6%, var(--mnd-card)) 0%,
var(--mnd-card) 62%);
border-radius:14px;
border:1px solid color-mix(in srgb, var(--mnd-red) 8%, var(--mnd-line));
box-shadow:0 1px 2px rgba(20,24,33,.04), 0 6px 18px rgba(20,24,33,.05);
}
/* Schaltflächen als Pille - die Form der Vorlage, in Vereinsfarbe. */
.mnd-wrap.mnd-wrap .button-primary, .mnd-wrap.mnd-wrap .button-hero,
.mnd-fe-app.mnd-fe-app .mnd-fe-btn, .mnd-fe-app.mnd-fe-app .button-primary{
border-radius:var(--mnd-r-pill);
box-shadow:0 2px 6px color-mix(in srgb, var(--mnd-red) 25%, transparent);
}
.mnd-wrap.mnd-wrap .button:not(.button-primary):not(.button-hero),
.mnd-fe-app.mnd-fe-app .mnd-fe-btn2, .mnd-fe-app.mnd-fe-app .button:not(.button-primary){
border-radius:var(--mnd-r-pill);
}
/* Auf schmalen Geräten weniger Rundung - sonst wirken Karten wie Blasen. */
@media (max-width:640px){
.mnd-wrap.mnd-wrap .mnd-panel, .mnd-fe-app.mnd-fe-app .mnd-panel,
.mnd-fe-app.mnd-fe-app .mnd-hub-attn, .mnd-fe-app.mnd-fe-app .mnd-fe-chartblock{ border-radius:14px; }
.mnd-panel > h2 > .dashicons:first-child{ width:36px; height:36px; font-size:18px; }
}
/* ---------------------------------------------------------------------------
Weitere Merkmale aus der Vorlage (v6.12.0)
------------------------------------------------------------------------- */
/* Der Aufklapp-Schalter als runder Kreis rechts - wie das „+" in der Vorlage.
Er sitzt am Zeilenende, nicht mitten im Text, und ist dadurch überall an
derselben Stelle zu finden. */
.mnd-panel-klapp{
width:32px; height:32px; border-radius:50%;
background:color-mix(in srgb, var(--mnd-red) 10%, var(--mnd-card));
border:0; color:var(--mnd-red-d);
}
.mnd-panel-klapp:hover{
background:color-mix(in srgb, var(--mnd-red) 18%, var(--mnd-card));
border:0;
}
.mnd-panel-klapp .dashicons{ font-size:16px; width:16px; height:16px; }
@media (max-width:640px){ .mnd-panel-klapp{ width:var(--mnd-touch); height:var(--mnd-touch); } }
/* Listeneinträge als eigene helle Karten mit weichem Schatten - die Bauform,
die in der Vorlage die Fragen trägt. */
.mnd-fe-app.mnd-fe-app .mnd-fe-row, .mnd-wrap.mnd-wrap .mnd-fx-row,
.mnd-fe-app.mnd-fe-app .mnd-fx-row{
background:var(--mnd-card);
border:1px solid color-mix(in srgb, var(--mnd-red) 7%, var(--mnd-line));
border-radius:14px;
box-shadow:0 1px 2px rgba(20,24,33,.03), 0 4px 14px rgba(20,24,33,.04);
}
.mnd-fe-app.mnd-fe-app .mnd-fe-row:hover, .mnd-fx-row:hover{
border-color:color-mix(in srgb, var(--mnd-red) 30%, transparent);
box-shadow:0 2px 4px rgba(20,24,33,.05), 0 8px 22px rgba(20,24,33,.07);
}
/* Abzeichen und Merkmale als weiche Pillen mit Farbhauch statt Vollton. */
.mnd-fx-comp, .mnd-fx-loc, .mnd-fe-tag, .mnd-pos-chip, .mnd-startbar-chip{
border-radius:var(--mnd-r-pill);
}
.mnd-fx-loc.mnd-fx-heim{
background:color-mix(in srgb, var(--mnd-ok) 14%, var(--mnd-card));
color:var(--mnd-ok-text); border:0;
}
.mnd-fx-loc.mnd-fx-ausw{
background:color-mix(in srgb, var(--mnd-neutral) 16%, var(--mnd-card));
color:var(--mnd-neutral-text); border:0;
}
/* Der Seitenhintergrund darf einen Hauch der Vereinsfarbe tragen - so wirkt
die Fläche nicht wie ein leeres Blatt, ohne bunt zu werden. */
.mnd-fe-app{
background-color:color-mix(in srgb, var(--mnd-red) 3%, var(--mnd-bg));
}
/* Eingabefelder in derselben weichen Form wie die Karten. */
.mnd-wrap.mnd-wrap input[type=text], .mnd-wrap.mnd-wrap input[type=search],
.mnd-wrap.mnd-wrap input[type=email], .mnd-wrap.mnd-wrap select,
.mnd-fe-app.mnd-fe-app input[type=text], .mnd-fe-app.mnd-fe-app input[type=search],
.mnd-fe-app.mnd-fe-app select{
border-radius:var(--mnd-r-pill);
padding-left:var(--mnd-s5); padding-right:var(--mnd-s5);
border-color:color-mix(in srgb, var(--mnd-red) 10%, var(--mnd-line));
}
/* ---------------------------------------------------------------------------
Abschnitts-Einleitung (v6.12.0)
Das Muster aus den Vorlagen: kleine Zeile in Großbuchstaben, darunter die
große Überschrift, darunter ein ruhiger Fließtext - mittig, mit Luft.
Verwendung:
Kader & Leistung
Überschrift
Erklärender Satz.
------------------------------------------------------------------------- */
.mnd-intro{ text-align:center; max-width:62ch; margin:var(--mnd-s8) auto var(--mnd-s7); }
.mnd-intro-kicker{
display:block; font-size:var(--mnd-fs-sm); font-weight:800;
letter-spacing:.1em; text-transform:uppercase;
color:var(--mnd-red); margin:0 0 var(--mnd-s3);
}
.mnd-intro h2{
font-size:var(--mnd-fs-2xl); line-height:var(--mnd-lh-eng);
margin:0 0 var(--mnd-s4); border:0; padding:0; text-transform:none;
letter-spacing:-.01em;
}
.mnd-intro p{ color:var(--mnd-mut); line-height:var(--mnd-lh-weit); margin:0; }
/* Karten ohne harte Linie - der Schatten trägt die Abgrenzung.
Ein Rahmen zeichnet eine Grenze, ein Schatten hebt an; das zweite wirkt
ruhiger, sobald viele Karten nebeneinanderstehen. */
.mnd-wrap.mnd-wrap .mnd-panel, .mnd-fe-app.mnd-fe-app .mnd-panel,
.mnd-fe-app.mnd-fe-app .mnd-hub-attn, .mnd-fe-app.mnd-fe-app .mnd-fe-chartblock{
border-color:transparent;
box-shadow:0 1px 2px rgba(20,24,33,.04), 0 12px 32px rgba(20,24,33,.07);
}
/* Der Seitenhintergrund bleibt fast weiß - die Karten sollen sich abheben,
nicht der Grund. */
.mnd-fe-app{ background-color:color-mix(in srgb, var(--mnd-red) 2%, #f7f9fb); }
/* Hauptknöpfe mit weichem Schein, wie in den Vorlagen. */
.mnd-wrap.mnd-wrap .button-primary, .mnd-fe-app.mnd-fe-app .mnd-fe-btn{
box-shadow:0 4px 14px color-mix(in srgb, var(--mnd-red) 30%, transparent);
border:0;
}
.mnd-wrap.mnd-wrap .button-primary:hover, .mnd-fe-app.mnd-fe-app .mnd-fe-btn:hover{
box-shadow:0 6px 20px color-mix(in srgb, var(--mnd-red) 38%, transparent);
}
/* ---------------------------------------------------------------------------
Mannschaftskarten (v6.12.1) – Korrektur
► Der Fehler: Die Karten trugen bisher die Mannschaftsfarbe als Fläche und
deshalb WEISSE Schrift. Als sie in v6.12.0 den hellen Kartenlook bekamen,
blieb die weiße Schrift stehen - weiß auf weiß, praktisch unlesbar.
Genau das ist die Gefahr, wenn man Flächen zentral umstellt: Die Schrift
wird an anderer Stelle festgelegt und wandert nicht mit.
► Die Lösung folgt der Vorlage: helle Karte, dunkle Schrift, die
Mannschaftsfarbe als Akzent - ein farbiger Streifen links und das Kürzel
in Mannschaftsfarbe. Die Zuordnung bleibt damit auf einen Blick erkennbar,
ohne dass die Fläche schreit.
------------------------------------------------------------------------- */
.mnd-fe-app.mnd-fe-app .mnd-fe-teamcard{
background:
linear-gradient(158deg,
color-mix(in srgb, var(--team, var(--mnd-red)) 10%, var(--mnd-card)) 0%,
var(--mnd-card) 60%);
color:var(--mnd-ink);
border:0;
border-left:4px solid var(--team, var(--mnd-red));
border-radius:0 14px 14px 0;
box-shadow:0 1px 2px rgba(20,24,33,.04), 0 8px 22px rgba(20,24,33,.06);
}
.mnd-fe-app.mnd-fe-app .mnd-fe-teamcard .mnd-fe-kuerzel{
color:var(--team, var(--mnd-red));
}
.mnd-fe-app.mnd-fe-app .mnd-fe-teamcard small{
color:var(--mnd-mut); opacity:1;
}
.mnd-fe-app.mnd-fe-app .mnd-fe-teamcard:hover{
box-shadow:0 2px 4px rgba(20,24,33,.05), 0 12px 30px rgba(20,24,33,.09);
}
/* Dieselbe Falle bei anderen ehemals farbigen Flächen abfangen: Wo der
Kartenlook greift, muss die Schrift dunkel sein. */
.mnd-fe-app.mnd-fe-app .mnd-panel, .mnd-fe-app.mnd-fe-app .mnd-hub-tile,
.mnd-wrap.mnd-wrap .mnd-tile{ color:var(--mnd-ink); }
/* Einmaliger Hinweis auf die persönliche Ansicht (v6.13.0). */
.mnd-l3-hinweis{
display:flex; align-items:flex-start; gap:var(--mnd-s3);
margin:0 0 var(--mnd-s5); padding:var(--mnd-s4) var(--mnd-s5);
background:color-mix(in srgb, var(--mnd-red) 7%, var(--mnd-card));
border-radius:14px; font-size:var(--mnd-fs-sm);
line-height:var(--mnd-lh-normal); color:var(--mnd-ink);
}
.mnd-l3-hinweis > .dashicons{ color:var(--mnd-icon); flex:0 0 auto; margin-top:1px; }
.mnd-l3-hinweis-txt{ flex:1 1 auto; min-width:0; }
.mnd-l3-hinweis-zu{
flex:0 0 auto; width:28px; height:28px; border:0; border-radius:50%;
background:transparent; color:var(--mnd-mut); cursor:pointer;
display:inline-flex; align-items:center; justify-content:center;
}
.mnd-l3-hinweis-zu:hover{ background:var(--mnd-btn-hbg); color:var(--mnd-btn-htx); }
/* ===========================================================================
Ruhigere Kacheln: Mannschaftskürzel, Zuständigkeiten, Ampel (v6.16.0)
► Der Befund
Auf der Mannschaftsseite standen bis zu vierzehn kräftig gefüllte
Kürzelplaketten mit Ballsymbol und Schlagschatten nebeneinander, dazu je
Karte bis zu sechs farbig beschriftete Rollenschilder in Fettschrift.
Das Auge findet darin keinen Anfang - und ausgerechnet das Wichtigste,
die Ampel (Kaderstärke, einsatzbereit, eingeschränkt, ausgefallen),
ging in dem Farbteppich unter.
► Die Regel dahinter
Farbe ist ein Signal und kein Schmuck. Was auf jeder Karte gleich
aussieht, braucht keine Farbe; was sich unterscheidet und Handeln
auslöst, bekommt sie. Deshalb: Kürzel und Rollen treten zurück, die
Ampel tritt hervor.
► Gewichtung
Die Regeln stehen bewusst am Dateiende und mit doppelter Wurzelklasse.
Die Ursprungsregeln liegen in admin.css bzw. frontend.css, die NACH
dieser Datei geladen werden - mit nur einer Klasse käme keine Wirkung an.
=========================================================================== */
/* --- 1. Mannschaftskürzel: helle Fläche, Farbe nur als Akzent ------------- */
.mnd-wrap.mnd-wrap .mnd-team-chip,
.mnd-fe-app.mnd-fe-app .mnd-team-chip,
.mnd-pub-card.mnd-pub-card .mnd-team-chip{
background:color-mix(in srgb, var(--team, var(--mnd-red)) 12%, var(--mnd-card));
color:var(--team, var(--mnd-red));
border:1px solid color-mix(in srgb, var(--team, var(--mnd-red)) 30%, transparent);
font-weight:700;
letter-spacing:.02em;
padding:5px 14px 5px 11px;
box-shadow:none;
text-shadow:none;
}
/* Das Ballsymbol wich einem schlichten Punkt in Mannschaftsfarbe.
Zwei Gründe: Vierzehn gleiche Bälle nebeneinander tragen keine Aussage -
und ein Fußball an einer Volleyballmannschaft wäre schlicht falsch. */
.mnd-wrap.mnd-wrap .mnd-team-chip::before,
.mnd-fe-app.mnd-fe-app .mnd-team-chip::before,
.mnd-pub-card.mnd-pub-card .mnd-team-chip::before{
content:'';
width:8px; height:8px; border-radius:50%;
background:currentColor;
filter:none; box-shadow:none;
flex:0 0 auto;
}
/* --- 2. Zuständigkeiten: dünner, ruhiger, ein Punkt statt farbiger Schrift -- */
.mnd-wrap.mnd-wrap .mnd-tc-z,
.mnd-fe-app.mnd-fe-app .mnd-tc-z{
align-items:center;
gap:var(--mnd-s2);
background:var(--mnd-flaeche, #f6f8fa);
border:1px solid var(--mnd-line);
color:var(--mnd-ink);
font-weight:400;
padding:3px 10px;
border-radius:var(--mnd-r-pill);
}
/* Die Rollenbezeichnung war fett, groß gesperrt und farbig zugleich - drei
Betonungen für dieselbe Aussage. Jetzt trägt sie nur noch die Form. */
.mnd-wrap.mnd-wrap .mnd-tc-z b,
.mnd-fe-app.mnd-fe-app .mnd-tc-z b{
font-weight:600;
color:var(--mnd-mut);
letter-spacing:.04em;
}
/* Die Rollenfarbe wandert auf einen kleinen Punkt: erkennbar, aber leise. */
.mnd-wrap.mnd-wrap .mnd-tc-z::before,
.mnd-fe-app.mnd-fe-app .mnd-tc-z::before{
content:''; width:7px; height:7px; border-radius:50%;
background:var(--mnd-rolle, var(--mnd-mut));
flex:0 0 auto;
}
.mnd-wrap.mnd-wrap .mnd-tc-z-trainer,
.mnd-fe-app.mnd-fe-app .mnd-tc-z-trainer{ --mnd-rolle:var(--mnd-red, #c8102e); }
.mnd-wrap.mnd-wrap .mnd-tc-z-verantwortlich,
.mnd-fe-app.mnd-fe-app .mnd-tc-z-verantwortlich{ --mnd-rolle:var(--mnd-red-d, #8a1220); }
.mnd-wrap.mnd-wrap .mnd-tc-z-athletik,
.mnd-fe-app.mnd-fe-app .mnd-tc-z-athletik{ --mnd-rolle:#e08b1e; }
.mnd-wrap.mnd-wrap .mnd-tc-z-physio,
.mnd-wrap.mnd-wrap .mnd-tc-z-reha,
.mnd-fe-app.mnd-fe-app .mnd-tc-z-physio,
.mnd-fe-app.mnd-fe-app .mnd-tc-z-reha{ --mnd-rolle:#2f9bb5; }
.mnd-wrap.mnd-wrap .mnd-tc-z-arzt,
.mnd-fe-app.mnd-fe-app .mnd-tc-z-arzt{ --mnd-rolle:#5a2ea6; }
/* --- 3. Die Ampel tritt hervor -------------------------------------------- */
/* Sie ist die eigentliche Aussage der Karte: Wie viele kann ich einsetzen?
Deshalb größer, mit Ampelpunkt, und mit klarem Abstand zum Rest. */
/* Die Kaderzahl bleibt bei der Kachelgröße aus der Maßtabelle (26 px) - sie
war nie das Problem. Größer zu machen hätte nur die Skala aufgeweicht.
Was fehlte, war der Kontrast des Zusatzes daneben: „von 18 einsatzbereit"
stand blass und wirkte wie eine Fußnote. */
.mnd-wrap.mnd-wrap .mnd-tc-zahl span,
.mnd-fe-app.mnd-fe-app .mnd-tc-zahl span{
font-size:var(--mnd-fs-sm); color:var(--mnd-ink); font-weight:500;
}
/* Die drei Ampelangaben stehen in einem Raster statt im freien Umbruch.
Vorher brachen sie je nach Kartenbreite als 2 + 1 um und standen versetzt -
drei zusammengehörige Werte müssen aber in einer Flucht liegen, sonst liest
man sie nicht als eine Aussage. */
.mnd-wrap.mnd-wrap .mnd-tc-status,
.mnd-fe-app.mnd-fe-app .mnd-tc-status{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
gap:var(--mnd-s2);
margin-top:var(--mnd-s1);
}
.mnd-wrap.mnd-wrap .mnd-tc-s,
.mnd-fe-app.mnd-fe-app .mnd-tc-s{
display:inline-flex; align-items:center; gap:6px;
font-size:var(--mnd-fs-sm, 12px);
font-weight:500;
padding:4px 12px;
border:1px solid transparent;
}
.mnd-wrap.mnd-wrap .mnd-tc-s::before,
.mnd-fe-app.mnd-fe-app .mnd-tc-s::before{
content:''; width:8px; height:8px; border-radius:50%;
background:currentColor; flex:0 0 auto;
}
.mnd-wrap.mnd-wrap .mnd-tc-s b,
.mnd-fe-app.mnd-fe-app .mnd-tc-s b{ font-weight:800; font-size:var(--mnd-fs-md, 14px); }
/* Die Ampelfarben selbst bleiben unangetastet - sie sind eine Aussage über
die Mannschaft, keine Gestaltung. Nur der Rand kommt hinzu, damit die
Plakette auch auf getönten Karten sauber steht. */
.mnd-wrap.mnd-wrap .mnd-tc-s-gruen,
.mnd-fe-app.mnd-fe-app .mnd-tc-s-gruen{ border-color:#cfe8d8; }
.mnd-wrap.mnd-wrap .mnd-tc-s-gelb,
.mnd-fe-app.mnd-fe-app .mnd-tc-s-gelb{ border-color:#f0e0b4; }
.mnd-wrap.mnd-wrap .mnd-tc-s-rot,
.mnd-fe-app.mnd-fe-app .mnd-tc-s-rot{ border-color:#f3ccd0; }
/* --- 4. Positionsfelder: Beiwerk, kein Blickfang -------------------------- */
.mnd-wrap.mnd-wrap .mnd-tc-p,
.mnd-fe-app.mnd-fe-app .mnd-tc-p{ background:var(--mnd-card); border-color:var(--mnd-line); }
.mnd-wrap.mnd-wrap .mnd-tc-p-val,
.mnd-fe-app.mnd-fe-app .mnd-tc-p-val{ font-weight:700; }
/* ===========================================================================
Rückmeldung nach KI-Aktionen (v6.18.0)
Regeln aus dem Farbfundament: Grün heißt „hat geklappt", Rot heißt
„stimmt nicht". Beides sind Aussagen, keine Gestaltung - deshalb feste
Farben, unabhängig von den Vereinsfarben.
Die Meldung hängt per JS an `body` und liegt damit AUSSERHALB von
`.mnd-wrap`/`.mnd-fe-app`. Ihre Regeln dürfen deshalb keine Wurzelklasse
tragen - dieselbe Falle wie beim Seitenpfad (v6.9.0).
=========================================================================== */
.mnd-meldung{
position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
z-index:100020;
display:inline-flex; align-items:center; gap:var(--mnd-s2, 8px);
max-width:calc(100vw - 24px);
padding:10px 18px;
border-radius:var(--mnd-r-pill, 999px);
font-size:var(--mnd-fs-sm, 13px); font-weight:600;
box-shadow:0 12px 30px rgba(0,0,0,.22);
background:#1a7f37; color:#fff;
opacity:1; transition:opacity .3s ease, transform .3s ease;
}
.mnd-meldung.is-fehler{ background:#b42318; }
.mnd-meldung.is-weg{ opacity:0; transform:translateX(-50%) translateY(8px); }
.mnd-meldung .dashicons{ font-size:18px; width:18px; height:18px; color:#fff; }
@media (prefers-reduced-motion:reduce){ .mnd-meldung{ transition:none; } }
/* Der grüne Streifen an Ort und Stelle - direkt bei den Werkzeugen. */
.mnd-wrap.mnd-wrap .mnd-ai-status.ok,
.mnd-fe-app.mnd-fe-app .mnd-ai-status.ok{
display:inline-flex; align-items:center; gap:6px;
background:#e7f5ec; color:#1a7f37;
border:1px solid #cfe8d8; border-radius:var(--mnd-r-pill, 999px);
padding:4px 12px; font-weight:600;
}
.mnd-wrap.mnd-wrap .mnd-ai-status.ok .dashicons,
.mnd-fe-app.mnd-fe-app .mnd-ai-status.ok .dashicons{ font-size:16px; width:16px; height:16px; color:#1a7f37; }
/* Stichtag der Einschätzung (v6.18.0) */
.mnd-rt-datum{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--mnd-s2, 8px); margin:0 0 var(--mnd-s4, 16px); }
.mnd-rt-datum label{ font-weight:600; }
.mnd-rt-datum input[type=date]{ min-height:var(--mnd-feld-h, 40px); }
.mnd-rt-datum .mnd-help-text{ flex:1 1 240px; min-width:0; margin:0; }
/* ===========================================================================
Arztfeld mit Suche und Nachfrage (v6.19.0)
=========================================================================== */
.mnd-azf{ display:flex; flex-direction:column; gap:var(--mnd-s1, 4px); min-width:0; }
.mnd-azf > label{ font-weight:600; }
.mnd-azf-box{ position:relative; }
.mnd-azf-in{ width:100%; }
.mnd-azf-liste{
position:absolute; left:0; right:0; top:100%; z-index:30;
background:var(--mnd-card, #fff); border:1px solid var(--mnd-line, #e3e7ec);
border-radius:var(--mnd-r-sm, 8px); box-shadow:var(--mnd-shadow, 0 12px 30px rgba(20,24,33,.14));
max-height:260px; overflow-y:auto; padding:4px;
}
.mnd-azf-liste[hidden]{ display:none; }
.mnd-azf-treffer{
display:block; width:100%; text-align:left; border:0; background:none;
padding:8px 10px; border-radius:var(--mnd-r-sm, 8px); cursor:pointer;
font-size:var(--mnd-fs-sm, 13px); min-height:var(--mnd-touch-min, 36px);
}
.mnd-azf-treffer:hover, .mnd-azf-treffer:focus-visible{ background:var(--mnd-hover, #f4f6f9); }
.mnd-azf-status{ margin:0; font-size:var(--mnd-fs-xs, 12px); min-height:1em; }
.mnd-azf-ok{ display:inline-flex; align-items:center; gap:4px; color:#1a7f37; font-weight:600; }
.mnd-azf-ok .dashicons{ font-size:15px; width:15px; height:15px; color:#1a7f37; }
.mnd-azf-fehler{ color:#b42318; font-weight:600; }
/* Die Nachfrage ist bewusst auffällig, aber nicht rot: Es ist kein Fehler,
sondern ein Angebot. */
.mnd-azf-frage{
display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px;
background:#fdf6e3; color:#8a6100; border:1px solid #f0e0b4;
border-radius:var(--mnd-r-sm, 8px); padding:6px 10px;
}
.mnd-azf-frage .dashicons{ font-size:15px; width:15px; height:15px; color:#b97309; }
/* Schaltflächen über der Verletzungshistorie in einer Reihe (v6.19.0).
Vorher waren sie Geschwister der Überschrift und richteten sich einzeln
aus - der grüne RTC-Knopf stand sichtbar höher. */
.mnd-fe-sec-tools{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--mnd-s2, 8px); }
.mnd-fe-sec-tools > *{ min-height:var(--mnd-btn-h, 40px); display:inline-flex; align-items:center; }
/* Verlaufstabelle „Entwicklung": Die letzte Spalte trug keine Beschriftung und
endete vor dem Rand - sie sah abgeschnitten aus. Jetzt volle Breite, die
Aktionsspalte so schmal wie nötig. */
.mnd-wrap.mnd-wrap .mnd-rt-hist,
.mnd-fe-app.mnd-fe-app .mnd-rt-hist{ width:100%; }
.mnd-wrap.mnd-wrap .mnd-rt-hist th:last-child,
.mnd-wrap.mnd-wrap .mnd-rt-hist td:last-child,
.mnd-fe-app.mnd-fe-app .mnd-rt-hist th:last-child,
.mnd-fe-app.mnd-fe-app .mnd-rt-hist td:last-child{ width:1%; white-space:nowrap; text-align:right; }
/* ===========================================================================
Vier Ansichten der Leistungsbewertung (v6.20.0)
=========================================================================== */
.mnd-av{ display:flex; flex-direction:column; gap:var(--mnd-s3, 12px); min-width:0; }
.mnd-av-tabs{ display:flex; flex-wrap:wrap; gap:var(--mnd-s2, 8px); }
.mnd-av-tab{
display:inline-flex; align-items:center; gap:6px;
min-height:var(--mnd-btn-h-sm, 36px); padding:0 var(--mnd-s4, 16px);
border:1px solid var(--mnd-line, #e3e7ec); border-radius:var(--mnd-r-pill, 999px);
background:var(--mnd-card, #fff); color:var(--mnd-mut, #5c6470);
font-size:var(--mnd-fs-sm, 13px); font-weight:600; cursor:pointer;
transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.mnd-av-tab .dashicons{ font-size:16px; width:16px; height:16px; }
.mnd-av-tab:hover{ border-color:var(--mnd-red, #c8102e); transform:translateY(-1px); }
/*
* Aktiver Reiter in HELLEM Rot statt Vollrot (Wunsch 29.07.): Auf dem vollen
* Rot wurde das Symbol weiß - und weiß auf weiß, sobald eine fremde Regel den
* Hintergrund überstimmte. Der helle Rotton braucht keine weiße Schrift,
* damit kann das Symbol IMMER dunkelrot bleiben, egal wer den Hintergrund
* gewinnt. Die verdoppelte Wurzelklasse schlägt Theme- und WordPress-Regeln
* ohne !important (bewährtes Muster).
*/
.mnd-wrap.mnd-wrap .mnd-av-tab .dashicons,
.mnd-fe-app.mnd-fe-app .mnd-av-tab .dashicons{ color:var(--mnd-mut, #5c6470); }
.mnd-wrap.mnd-wrap .mnd-av-tab:hover .dashicons,
.mnd-fe-app.mnd-fe-app .mnd-av-tab:hover .dashicons{ color:var(--mnd-red, #c8102e); }
/* Gemessen (29.07.): Die Schaltflächen-Grundregel aus v6.10.0 arbeitet mit
:not()-Ketten und erreicht dadurch Spezifität (0,5,1) - eine Aktiv-Regel
mit vier Klassen verlor Fläche und Schriftfarbe an sie (der Rand blieb,
weil sie keinen setzt). Deshalb hier dieselbe Gewichtsklasse: Elternklasse
+ button-Element. Dieser Block steht später in der Datei und gewinnt damit
das Unentschieden. */
.mnd-wrap.mnd-wrap .mnd-av-tabs button.mnd-av-tab.is-on,
.mnd-fe-app.mnd-fe-app .mnd-av-tabs button.mnd-av-tab.is-on{
background-color:#f9e7ea;
border-color:var(--mnd-red, #c8102e);
color:var(--mnd-red-d, #8a1220);
}
.mnd-wrap.mnd-wrap .mnd-av-tabs button.mnd-av-tab.is-on .dashicons,
.mnd-fe-app.mnd-fe-app .mnd-av-tabs button.mnd-av-tab.is-on .dashicons{ color:var(--mnd-red, #c8102e); }
/* Die feste Kastenhöhe (.mnd-av-cv) entfällt seit v6.22.4: Die neuen
SVG-Diagramme tragen ihre Höhe im eigenen Attribut und können nicht
in die Wachstums-Rückkopplung der Leinwand-Diagramme geraten. */
.mnd-av-buehne{ position:relative; min-width:0; }
.mnd-av-view{ display:none; }
.mnd-av-view.is-on{ display:block; animation:mnd-av-auf .35s ease both; }
@keyframes mnd-av-auf{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.mnd-av-hinweis{ margin:var(--mnd-s2, 8px) 0 0; font-size:var(--mnd-fs-xs, 12px); color:var(--mnd-mut, #5c6470); }
/* ---- Rangliste ---------------------------------------------------------- */
.mnd-av-rang{ display:flex; flex-direction:column; gap:4px; max-height:420px; overflow-y:auto; padding-right:4px; }
.mnd-av-rangzeile{
display:grid; grid-template-columns:28px minmax(120px, 1.4fr) 2fr 38px;
align-items:center; gap:var(--mnd-s2, 8px);
padding:5px 8px; border-radius:var(--mnd-r-sm, 8px);
opacity:0; transform:translateX(-8px);
transition:opacity .35s ease var(--verz, 0ms), transform .35s ease var(--verz, 0ms), background .15s ease;
}
.mnd-av-rangzeile.is-da{ opacity:1; transform:none; }
.mnd-av-rangzeile:hover{ background:var(--mnd-hover, #f4f6f9); }
.mnd-av-rangpos{ font-size:var(--mnd-fs-xs, 12px); font-weight:800; color:var(--mnd-mut, #5c6470); text-align:right; }
.mnd-av-rangname{ font-size:var(--mnd-fs-sm, 13px); min-width:0; overflow-wrap:break-word; }
.mnd-av-rangname small{ display:block; font-size:12px; color:var(--mnd-mut, #5c6470); }
.mnd-av-rangbalken{ height:10px; border-radius:5px; background:var(--mnd-flaeche, #eef1f5); overflow:hidden; }
.mnd-av-rangbalken i{
display:block; height:100%; border-radius:5px;
background:var(--farbe, #2e9e4f); width:0;
transition:width .7s cubic-bezier(.2,.8,.2,1) var(--verz, 0ms);
position:relative; overflow:hidden;
animation:mnd-av-puls 2.6s ease-in-out infinite;
}
/* Wandernder Lichtschein + sanftes Atmen (v6.22.2). Bewusst dezent: Der
Effekt soll die Balken lebendig machen, nicht von den Zahlen ablenken. */
.mnd-av-rangbalken i::after{
content:""; position:absolute; top:0; bottom:0; width:36px;
background:linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
animation:mnd-av-schein 3.2s ease-in-out infinite;
animation-delay:var(--verz, 0ms);
}
@keyframes mnd-av-puls{
0%, 100%{ filter:brightness(1); }
50%{ filter:brightness(1.12); }
}
@keyframes mnd-av-schein{
0%{ left:-40px; }
55%, 100%{ left:100%; }
}
.mnd-av-rangzeile.is-da .mnd-av-rangbalken i{ width:var(--breite, 0%); }
.mnd-av-rangwert{ font-weight:800; text-align:right; font-size:var(--mnd-fs-sm, 13px); }
@media (max-width:520px){
.mnd-av-rangzeile{ grid-template-columns:24px 1fr 34px; }
.mnd-av-rangbalken{ grid-column:2 / 4; }
}
/* Wer weniger Bewegung eingestellt hat, bekommt keine - das ist für manche
Menschen der Unterschied zwischen benutzbar und unbenutzbar. */
@media (prefers-reduced-motion:reduce){
.mnd-av-view.is-on{ animation:none; }
.mnd-av-rangzeile, .mnd-av-rangbalken i, .mnd-av-tab{ transition:none; }
.mnd-av-rangbalken i, .mnd-av-rangbalken i::after{ animation:none; }
.mnd-av-rangzeile{ opacity:1; transform:none; }
.mnd-av-rangzeile .mnd-av-rangbalken i{ width:var(--breite, 0%); }
}
/* ---------------------------------------------------------------------------
* Demodaten-Kennzeichen (v6.20.2)
*
* Bewusst grau und klein: Das Schild soll auffallen, weil es ungewohnt ist –
* nicht, weil es laut ist. Rot wäre eine Warnung, und eine Warnung ist es
* nicht; es ist eine Herkunftsangabe.
* ------------------------------------------------------------------------ */
.mnd-demo-chip {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 6px;
padding: 1px 7px;
border: 1px dashed var(--mnd-line, #d5dbe3);
border-radius: 999px;
background: var(--mnd-bg-soft, #f4f6f9);
color: var(--mnd-text-soft, #5c6470);
font-size: 12px;
font-weight: 500;
line-height: 1.5;
letter-spacing: .02em;
white-space: nowrap;
vertical-align: middle;
cursor: help;
}
.mnd-demo-chip::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
background: currentColor;
opacity: .55;
}
/* In Überschriften darf es nicht mitwachsen - sonst wird aus der Kennung
eine zweite Überschrift. */
h1 .mnd-demo-chip, h2 .mnd-demo-chip, h3 .mnd-demo-chip,
.mnd-h1 .mnd-demo-chip, .mnd-page-title .mnd-demo-chip {
font-size: 12px;
font-weight: 500;
text-transform: none;
letter-spacing: .02em;
vertical-align: middle;
}
/* Postfach: Spieler und Plan in einer Spalte (v6.20.2) */
.mnd-fb-wer { text-decoration: none; }
.mnd-fb-plan { margin-top: 2px; color: var(--mnd-text-soft, #5c6470); font-size: 13px; }
/* ---------------------------------------------------------------------------
* Personen-Detailansicht (v6.21.0)
*
* Baut bewusst auf den vorhandenen Bausteinen auf (mnd-panel, mnd-team-chip,
* mnd-tc-z): Die Seite soll aussehen wie ein Spielerprofil für Personal,
* nicht wie ein weiteres eigenes Design.
* ------------------------------------------------------------------------ */
.mnd-wrap.mnd-wrap .mnd-sd-kopf,
.mnd-fe-app.mnd-fe-app .mnd-sd-kopf {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.mnd-sd-foto { width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
background: var(--mnd-bg-soft, #f4f6f9); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mnd-sd-foto img { width: 100%; height: 100%; object-fit: cover; }
.mnd-sd-foto .dashicons { font-size: 34px; width: 34px; height: 34px; color: var(--mnd-text-soft, #5c6470); }
.mnd-sd-wer { flex: 1 1 260px; min-width: 0; }
.mnd-sd-wer h2 { margin: 0 0 6px; }
.mnd-sd-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.mnd-sd-kontakt { display: flex; gap: 14px; flex-wrap: wrap; }
.mnd-sd-kontakt a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.mnd-sd-aktion { flex: 0 0 auto; }
.mnd-sd-liste { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 6px 16px; margin: 0; }
.mnd-sd-liste dt { color: var(--mnd-text-soft, #5c6470); font-weight: 600; }
.mnd-sd-liste dd { margin: 0; overflow-wrap: break-word; }
.mnd-wrap.mnd-wrap .mnd-sd-team,
.mnd-fe-app.mnd-fe-app .mnd-sd-team {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; margin-bottom: 8px;
border: 1px solid var(--mnd-line, #e3e7ee); border-radius: 10px;
background: #fff; text-decoration: none; color: inherit;
min-height: 44px; /* Fingerregel */
}
.mnd-sd-team:hover { border-color: var(--mnd-red, #c8102e); }
.mnd-sd-team small { margin-left: auto; color: var(--mnd-text-soft, #5c6470); white-space: nowrap; }
.mnd-sd-untertitel { margin: 14px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--mnd-text-soft, #5c6470); }
.mnd-sd-spieler { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.mnd-wrap.mnd-wrap .mnd-sd-sp,
.mnd-fe-app.mnd-fe-app .mnd-sd-sp {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px; border: 1px solid var(--mnd-line, #e3e7ee); border-radius: 10px;
background: #fff; text-decoration: none; color: inherit; min-height: 44px;
}
.mnd-sd-sp:hover { border-color: var(--mnd-red, #c8102e); }
.mnd-sd-sp span { font-weight: 600; min-width: 0; overflow-wrap: break-word; }
.mnd-sd-sp small { margin-left: auto; color: var(--mnd-text-soft, #5c6470); white-space: nowrap; }
/* Verlinkte Personen-Chips: als klickbar erkennbar, ohne lauter zu werden. */
.mnd-wrap.mnd-wrap a.mnd-tc-z,
.mnd-fe-app.mnd-fe-app a.mnd-tc-z { text-decoration: none; cursor: pointer; }
.mnd-wrap.mnd-wrap a.mnd-tc-z:hover,
.mnd-fe-app.mnd-fe-app a.mnd-tc-z:hover { border-color: var(--mnd-rolle, #c8102e); }
@media (max-width: 640px) {
.mnd-sd-liste { grid-template-columns: 1fr; gap: 2px; }
.mnd-sd-liste dt { margin-top: 8px; }
.mnd-sd-aktion { width: 100%; }
}
/* ---------------------------------------------------------------------------
* Profilkopf mit großem Foto (v6.22.1)
*
* Das Foto ist bewusst großzügig (128 px): Es soll die Frage „wer ist das?"
* beantworten, nicht nur die Zeile schmücken. Am Handy schrumpft es auf 84 px,
* bleibt aber links - dieselbe Ordnung auf jedem Gerät.
* ------------------------------------------------------------------------ */
.mnd-fe-app.mnd-fe-app .mnd-fe-mitfoto { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mnd-fe-pfoto {
width: 128px; height: 128px; flex: 0 0 auto;
border-radius: 18px; overflow: hidden;
background: var(--mnd-bg-soft, #f4f6f9);
border: 1px solid var(--mnd-line, #e3e7ee);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
.mnd-fe-pfoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mnd-fe-pfoto .dashicons { font-size: 52px; width: 52px; height: 52px; color: var(--mnd-text-soft, #5c6470); }
.mnd-fe-pinfo { flex: 1 1 280px; min-width: 0; }
.mnd-fe-app.mnd-fe-app .mnd-fe-mitfoto .mnd-fe-headbtns { flex: 0 0 auto; }
@media (max-width: 640px) {
.mnd-fe-pfoto { width: 84px; height: 84px; border-radius: 14px; }
.mnd-fe-pfoto .dashicons { font-size: 36px; width: 36px; height: 36px; }
.mnd-fe-app.mnd-fe-app .mnd-fe-mitfoto { gap: 12px; }
.mnd-fe-app.mnd-fe-app .mnd-fe-mitfoto .mnd-fe-headbtns { flex-basis: 100%; }
}
/* ---------------------------------------------------------------------------
* Leises Atmen der Diagramme (v6.22.3)
*
* Nach dem Aufbau schimmert ein schwacher roter Schein im Takt von gut drei
* Sekunden um das Gezeichnete. drop-shadow folgt den gezeichneten Pixeln -
* die kräftige rote Linie trägt den Schein, die blassen Achsen bleiben
* praktisch unsichtbar. Bewusst nur auf der sichtbaren Ansicht, damit keine
* unsichtbare Fläche im Hintergrund mitrechnet.
* ------------------------------------------------------------------------ */
/* Das frühere Atmen der ganzen Leinwand ist ersetzt (v6.22.4): Das Pulsieren
liegt jetzt ausschließlich auf den gezeichneten Formen selbst - siehe
mnd-svgcharts.css. */
/* ===========================================================================
Reiter im Spielerprofil + „Mehr Informationen" (v6.25.0)
Gilt in der Verwaltung UND in der App, deshalb hier im Fundament.
========================================================================= */
.mnd-ptabs{margin-top:18px;}
.mnd-ptabs-leiste{
/* EINE Zeile (v6.25.1): Alle Reiter teilen sich die verfügbare Breite.
Wird es eng, greift zuerst die Kurzform der Beschriftung, dann kürzt der
Text mit Auslassungspunkten - umgebrochen oder gescrollt wird nie.
Erst auf schmalen Geräten (unten) wird bewusst umbrochen. */
display:flex;flex-wrap:nowrap;gap:6px;
padding:8px;margin-bottom:16px;
border:1px solid var(--mnd-line,#e3e7ec);border-radius:14px;
background:var(--mnd-bg-2,#f7f8fa);
}
.mnd-wrap.mnd-wrap .mnd-ptabs-leiste button.mnd-ptab,
.mnd-fe-app.mnd-fe-app .mnd-ptabs-leiste button.mnd-ptab,
.mnd-wrap.mnd-wrap .mnd-ptabs-leiste a.mnd-ptab,
.mnd-fe-app.mnd-fe-app .mnd-ptabs-leiste a.mnd-ptab{
display:inline-flex;align-items:center;justify-content:center;gap:7px;
text-decoration:none;
flex:1 1 0;min-width:0; /* gleichmäßig aufteilen */
min-height:44px;padding:0 12px; /* 44 px = Fingerregel */
border:1px solid transparent;border-radius:999px;
background:transparent;color:var(--mnd-mut,#5c6470);
font-size:13px;font-weight:600;line-height:1.2;cursor:pointer;
white-space:nowrap;text-align:center;
}
.mnd-ptab-txt,
.mnd-ptab-kurz{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mnd-ptab-kurz{display:none;}
/* Umgeschaltet wird gemessen, nicht geraten (v6.26.0): profil-reiter.js prüft,
ob die Beschriftung vollständig lesbar ist, und setzt sonst diese Klassen.
Eine Bildschirmbreiten-Abfrage würde hier danebenliegen, weil der Inhalt in
der App schmaler ist als das Fenster. */
.mnd-ptabs-leiste.is-kurz .mnd-ptab-txt{display:none;}
.mnd-ptabs-leiste.is-kurz .mnd-ptab-kurz{display:inline;}
.mnd-ptabs-leiste.is-umbruch{flex-wrap:wrap;}
/* In der Umbruch-Stufe darf NICHTS mehr schrumpfen - sonst stünde der Text
trotz Umbruch wieder halb da. Doppelte Wurzelklasse, weil die Grundregel
der Reiter selbst schon vier Klassen wiegt. */
.mnd-wrap.mnd-wrap .mnd-ptabs-leiste.is-umbruch button.mnd-ptab,
.mnd-fe-app.mnd-fe-app .mnd-ptabs-leiste.is-umbruch button.mnd-ptab,
.mnd-wrap.mnd-wrap .mnd-ptabs-leiste.is-umbruch a.mnd-ptab,
.mnd-fe-app.mnd-fe-app .mnd-ptabs-leiste.is-umbruch a.mnd-ptab{
flex:0 0 auto;justify-content:flex-start;
}
.mnd-wrap.mnd-wrap .mnd-ptabs-leiste button.mnd-ptab:hover,
.mnd-fe-app.mnd-fe-app .mnd-ptabs-leiste button.mnd-ptab:hover,
.mnd-wrap.mnd-wrap .mnd-ptabs-leiste a.mnd-ptab:hover,
.mnd-fe-app.mnd-fe-app .mnd-ptabs-leiste a.mnd-ptab:hover{
background:#fff;border-color:var(--mnd-line,#e3e7ec);color:var(--mnd-txt,#1f2733);
}
.mnd-wrap.mnd-wrap .mnd-ptabs-leiste button.mnd-ptab.is-on,
.mnd-fe-app.mnd-fe-app .mnd-ptabs-leiste button.mnd-ptab.is-on,
.mnd-wrap.mnd-wrap .mnd-ptabs-leiste a.mnd-ptab.is-on,
.mnd-fe-app.mnd-fe-app .mnd-ptabs-leiste a.mnd-ptab.is-on{
background:#fff;border-color:var(--mnd-red,#c8102e);
color:var(--mnd-red-d,#8a1220);box-shadow:0 1px 3px rgba(16,24,40,.06);
}
.mnd-ptab .dashicons{font-size:17px;width:17px;height:17px;flex:0 0 auto;}
.mnd-ptab-inhalt[hidden]{display:none;}
/* Das erste Panel im Reiter braucht oben keinen doppelten Abstand. */
.mnd-ptab-inhalt > .mnd-panel:first-child,
.mnd-ptab-inhalt > section.mnd-panel:first-child{margin-top:0;}
/* „Mehr Informationen" */
.mnd-mehr{margin:12px 0 4px;}
.mnd-mehr-knopf .dashicons{margin-right:4px;}
.mnd-mehr-inhalt{margin-top:12px;}
.mnd-mehr-raster{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.mnd-mehr-block h3{margin:16px 0 8px;font-size:14px;display:flex;align-items:center;gap:6px;}
.mnd-mehr-block h3:first-child{margin-top:0;}
.mnd-mehr-aktionen{display:flex;flex-wrap:wrap;gap:8px;}
@media (max-width:900px){
/* Auf Handy und kleinem Tablet wird bewusst umbrochen statt gequetscht -
neun Knöpfe nebeneinander wären dort nur noch Symbole. */
.mnd-ptabs-leiste{padding:6px;gap:6px;flex-wrap:wrap;}
.mnd-ptab-txt{display:inline;}
.mnd-ptab-kurz{display:none;}
/* Auf schmalen Geräten zwei Reiter je Zeile - so bleibt jeder Knopf
groß genug für den Daumen und die Beschriftung ganz lesbar. */
.mnd-wrap.mnd-wrap .mnd-ptabs-leiste button.mnd-ptab,
.mnd-fe-app.mnd-fe-app .mnd-ptabs-leiste button.mnd-ptab,
.mnd-wrap.mnd-wrap .mnd-ptabs-leiste a.mnd-ptab,
.mnd-fe-app.mnd-fe-app .mnd-ptabs-leiste a.mnd-ptab{
flex:1 1 calc(50% - 6px);justify-content:flex-start;padding:0 12px;font-size:12.5px;
}
.mnd-mehr-raster{grid-template-columns:1fr;}
.mnd-wrap.mnd-wrap button.mnd-mehr-knopf,
.mnd-fe-app.mnd-fe-app button.mnd-mehr-knopf{width:100%;min-height:44px;justify-content:center;}
.mnd-mehr-aktionen .button{width:100%;justify-content:center;}
}
@media (max-width:520px){
/* Ganz schmal: ein Reiter je Zeile, sonst bricht die Beschriftung
dreizeilig um und die Leiste wird höher als der Inhalt. */
.mnd-wrap.mnd-wrap .mnd-ptabs-leiste button.mnd-ptab,
.mnd-fe-app.mnd-fe-app .mnd-ptabs-leiste button.mnd-ptab,
.mnd-wrap.mnd-wrap .mnd-ptabs-leiste a.mnd-ptab,
.mnd-fe-app.mnd-fe-app .mnd-ptabs-leiste a.mnd-ptab{flex:1 1 100%;}
}
/* ===========================================================================
Mein Zugang: Hinweisband, Kontoverweis, Einrichtungsstrecke (v6.30.0)
---------------------------------------------------------------------------
Das Band ist bewusst ruhig gehalten. Es ist ein Hinweis, keine Störung -
Farbe wird hier nur zum Signal, wenn die zweite Stufe Pflicht ist.
========================================================================= */
.mnd-fe-band{
display:flex;align-items:center;gap:var(--mnd-s3);flex-wrap:wrap;
margin:var(--mnd-s4) 0 0;padding:var(--mnd-s4) var(--mnd-s5);
background:#fff8ec;border:1px solid #f0d5ab;border-radius:var(--mnd-radius);
color:#7a4f08;font-size:13px;line-height:1.45;
}
.mnd-fe-band.is-pflicht{background:#fdecef;border-color:#f3c2cb;color:#8a1220;}
.mnd-fe-band .dashicons{flex:0 0 auto;}
.mnd-fe-band-txt{flex:1 1 220px;min-width:0;}
.mnd-fe-band-btn{
flex:0 0 auto;display:inline-flex;align-items:center;min-height:36px;
padding:0 var(--mnd-s4);border-radius:8px;background:var(--mnd-red);color:#fff !important;
text-decoration:none;font-weight:600;font-size:12.5px;
}
.mnd-fe-band-btn:hover{background:var(--mnd-red-d);}
.mnd-fe-band-zu{
flex:0 0 auto;width:32px;height:32px;border:0;background:transparent;cursor:pointer;
font-size:20px;line-height:1;color:inherit;opacity:.6;border-radius:6px;
}
.mnd-fe-band-zu:hover{opacity:1;background:rgba(0,0,0,.06);}
/* Verweis auf die eigene Kontoseite im Menüfuß */
.mnd-fe-zugang{
display:flex;align-items:center;gap:var(--mnd-s3);min-height:44px;
margin:var(--mnd-s3) 0;padding:0 var(--mnd-s4);border-radius:10px;
background:rgba(255,255,255,.10);text-decoration:none;font-size:13.5px;
}
.mnd-fe-zugang:hover{background:rgba(255,255,255,.18);}
.mnd-fe-zugang.is-offen{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);}
.mnd-fe-zugang .mnd-fe-dbadge{margin-left:auto;}
/* Statuszeile über den Reitern */
.mnd-zg-status{display:flex;flex-wrap:wrap;gap:var(--mnd-s3);margin-top:var(--mnd-s3);}
.mnd-chip-gut{background:#eaf7ee !important;color:#1e7d34 !important;border-color:#c7e8d2 !important;}
.mnd-chip-offen{background:#fdf4e6 !important;color:#8a5309 !important;border-color:#f0d5ab !important;}
.mnd-chip-neutral{background:#eef1f5 !important;color:#5b6a80 !important;border-color:#dde3ea !important;}
/* Einrichtungsstrecke: QR links, Ersatzcodes rechts, Probe darunter */
.mnd-tf-einrichtung{display:grid;grid-template-columns:1fr 1fr;gap:var(--mnd-s6);margin:var(--mnd-s5) 0;}
.mnd-tf-qr img{width:100%;max-width:220px;height:auto;image-rendering:pixelated;background:#fff;padding:8px;border-radius:8px;}
.mnd-tf-secret{display:inline-block;margin-top:var(--mnd-s2);letter-spacing:1px;}
.mnd-tf-codes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--mnd-s2);}
.mnd-tf-codes code{display:block;padding:6px 8px;background:#f2f4f7;border-radius:6px;font-size:13px;text-align:center;}
.mnd-tf-probe{border-top:1px solid var(--mnd-line);padding-top:var(--mnd-s5);}
.mnd-tf-probe-reihe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mnd-s3);margin-top:var(--mnd-s3);}
.mnd-tf-probe-reihe input.mnd-tf-code{
flex:0 0 auto;width:150px;min-height:44px;font-size:20px;letter-spacing:4px;text-align:center;
}
.mnd-tf-status{margin-top:var(--mnd-s3);font-size:13px;color:var(--mnd-ok-text);min-height:18px;}
.mnd-tf-status.is-fehler,.mnd-pk-status.is-fehler,.mnd-pk-loginstatus.is-fehler{color:var(--mnd-stop-text);}
@media (max-width:900px){
.mnd-tf-einrichtung{grid-template-columns:1fr;}
.mnd-tf-probe-reihe input.mnd-tf-code{width:100%;}
.mnd-tf-probe-reihe .mnd-fe-btn{width:100%;text-align:center;}
.mnd-fe-band-btn{width:100%;justify-content:center;}
}
/* Abschalten ist eine Rücknahme, kein Hauptweg - deshalb zurückhaltend rot. */
.mnd-zg-abschalten{color:var(--mnd-stop-text) !important;border-color:#f3c2cb !important;}
.mnd-zg-abschalten:hover{background:#fdecef;}
/* Rückfrage vor Änderungen am eigenen Zugang (v6.30.1) */
.mnd-zg-ruecktrage{margin-top:var(--mnd-s4);padding-top:var(--mnd-s4);border-top:1px solid var(--mnd-line);}
.mnd-zg-rf-reihe{display:flex;flex-wrap:wrap;gap:var(--mnd-s4);align-items:flex-end;}
.mnd-zg-rf-reihe label{flex:1 1 220px;min-width:0;}
.mnd-zg-rf-reihe input{width:100%;min-height:44px;}
.mnd-zg-rf-reihe input.is-fehler{border-color:var(--mnd-stop) !important;box-shadow:0 0 0 2px rgba(200,16,46,.15);}
/* ===========================================================================
Nachträge aus dem Abschluss-Review (v6.30.2)
---------------------------------------------------------------------------
Drei Klassen wurden im Markup benutzt, ohne dass es je eine Regel dazu gab:
die Karte der Seite „Mein Zugang", der Google-Knopf und die Trennzeile
„oder". Ergebnis war ein randloser Text auf dem Hintergrundbild und ein
Knopf, der wie ein Textlink aussah.
========================================================================= */
.mnd-fe-app.mnd-fe-app .mnd-fe-card{
background:var(--mnd-card);border:1px solid var(--mnd-line);
border-radius:var(--mnd-radius);padding:var(--mnd-s6);
margin:0 0 var(--mnd-s6);box-shadow:var(--mnd-shadow);min-width:0;
}
.mnd-fe-app.mnd-fe-app .mnd-fe-card > h2{margin-top:0;}
/* Anmeldemaske: alle drei Wege gleich hoch, gleich breit, klare Rangfolge */
.mnd-pub-card a.mnd-pub-btn{
display:flex;align-items:center;justify-content:center;gap:var(--mnd-s2);
min-height:44px;text-decoration:none;box-sizing:border-box;
}
.mnd-pub-card .mnd-pub-btn2{
background:#fff;color:var(--mnd-ink);border:1px solid var(--mnd-line);
}
.mnd-pub-card .mnd-pub-btn2:hover{
background:#f6f7f9;border-color:var(--mnd-red);color:var(--mnd-red-d);
}
.mnd-pub-card .mnd-pub-btn + .mnd-pub-btn,
.mnd-pub-card .mnd-pub-btn2{margin-top:var(--mnd-s3);}
/* „oder" als Trennzeile, nicht als Fließtext */
.mnd-pk-oder{
display:flex;align-items:center;gap:var(--mnd-s3);margin:var(--mnd-s5) 0;
color:var(--mnd-mut);font-size:var(--mnd-fs-sm);text-transform:uppercase;letter-spacing:.06em;
}
.mnd-pk-oder::before,.mnd-pk-oder::after{content:"";flex:1 1 auto;height:1px;background:var(--mnd-line);}
/* Meldung mit Symbolspalte statt Symbol im Textfluss.
► Nur innerhalb der Anmeldekarte (v6.30.3): Dieselbe Klasse steht auch in
der Verwaltung, dort mit mitten im Satz - „display:flex" hätte den
Satz in drei nebeneinanderstehende Spalten zerlegt. */
.mnd-pub-card .mnd-pub-notice{display:flex;align-items:flex-start;gap:var(--mnd-s3);flex-wrap:wrap;}
/* Gleiche Höhe für alles, was in einer Reihe steht */
.mnd-fe-band .mnd-fe-band-btn{min-height:44px;}
.mnd-fe-band .mnd-fe-band-zu{width:44px;height:44px;}
.mnd-tf-probe-reihe .mnd-fe-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:var(--mnd-s2);}
/* Verwaltungsknöpfe, die in der App landen (Gerätetabelle) */
.mnd-fe-app.mnd-fe-app .mnd-actions .button,
.mnd-fe-app.mnd-fe-app .mnd-actions .button-small{
display:inline-flex;align-items:center;gap:var(--mnd-s1);
min-height:36px;padding:0 var(--mnd-s4);border-radius:8px;
/* Die Farben kommen aus den Einstellungen - feste Werte hätten das
Farbsystem des Vereins ausgehebelt. (v6.30.3) */
background:var(--mnd-btn-bg);border:1px solid var(--mnd-line);color:var(--mnd-btn-tx);
font-size:var(--mnd-fs-sm);font-weight:600;cursor:pointer;text-decoration:none;
}
.mnd-fe-app.mnd-fe-app .mnd-actions .button:hover,
.mnd-fe-app.mnd-fe-app .mnd-actions .button-small:hover{
background:var(--mnd-btn-hbg);border-color:var(--mnd-red);color:var(--mnd-red-d);
}
/* Die bekannte [hidden]-Falle gilt auch auf der Anmeldemaske */
.mnd-pub-card [hidden]{display:none !important;}
/* ===========================================================================
Spieltag: Aufstellung, Kader, Kennzahlen (v6.31.0)
---------------------------------------------------------------------------
Das Spielfeld ist bewusst schlicht: eine grüne Fläche mit weißen Linien,
sonst nichts. Die Aufmerksamkeit gehört den Spielern und ihren Ampeln -
ein fotorealistischer Rasen würde davon nur ablenken.
========================================================================= */
.mnd-st-kopf{display:flex;flex-wrap:wrap;gap:var(--mnd-s3);margin:0 0 var(--mnd-s5);}
.mnd-st-kpi{
flex:1 1 140px;min-width:0;display:flex;flex-direction:column;gap:2px;
padding:var(--mnd-s4) var(--mnd-s5);background:var(--mnd-card);
border:1px solid var(--mnd-line);border-left:3px solid var(--mnd-neutral);
border-radius:var(--mnd-radius);
}
.mnd-st-kpi.is-gruen{border-left-color:var(--mnd-ok);}
.mnd-st-kpi.is-gelb{border-left-color:var(--mnd-warn);}
.mnd-st-kpi.is-rot{border-left-color:var(--mnd-stop);}
.mnd-st-kpi-zahl{font-size:24px;font-weight:800;line-height:1.1;color:var(--mnd-ink);}
.mnd-st-kpi-zahl small{font-size:15px;font-weight:600;color:var(--mnd-mut);}
.mnd-st-kpi-lbl{font-size:var(--mnd-fs-sm);color:var(--mnd-mut);}
/* Spielauswahl, wenn kein Spiel gewählt ist */
.mnd-st-liste{display:flex;flex-direction:column;gap:var(--mnd-s2);margin-bottom:var(--mnd-s5);}
.mnd-st-zeile{
display:flex;align-items:center;gap:var(--mnd-s4);min-height:52px;
padding:0 var(--mnd-s4);border:1px solid var(--mnd-line);border-radius:10px;
background:var(--mnd-card);text-decoration:none;color:var(--mnd-ink);
}
.mnd-st-zeile:hover{border-color:var(--mnd-red);}
.mnd-st-datum{flex:0 0 auto;font-size:var(--mnd-fs-sm);color:var(--mnd-mut);min-width:130px;}
.mnd-st-namen{flex:1 1 auto;min-width:0;font-weight:600;overflow-wrap:break-word;}
.mnd-st-pfeil{flex:0 0 auto;color:var(--mnd-mut);}
/* Feld und Kader nebeneinander, auf dem Telefon untereinander */
.mnd-st-auf{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--mnd-s6);align-items:start;}
.mnd-st-leiste{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--mnd-s4);margin-bottom:var(--mnd-s3);}
.mnd-st-leiste label{margin:0;font-size:var(--mnd-fs-sm);font-weight:600;}
.mnd-st-leiste select{min-height:40px;min-width:150px;}
.mnd-st-zaehler{font-size:var(--mnd-fs-sm);color:var(--mnd-mut);}
.mnd-st-zaehler.ist-voll{color:var(--mnd-ok-text);font-weight:700;}
.mnd-st-feld{
position:relative;width:100%;aspect-ratio:68/105;max-height:70vh;margin:0 auto;
background:#2f7d4f;border:2px solid rgba(255,255,255,.75);border-radius:10px;overflow:hidden;
background-image:
linear-gradient(to top,rgba(255,255,255,.55) 0 2px,transparent 2px),
linear-gradient(to top,transparent calc(50% - 1px),rgba(255,255,255,.55) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px));
}
/* Mittelkreis und Strafräume - reine Zeichnung, keine Bilder.
► pointer-events:none ist hier kein Feinschliff, sondern der Fehler (v6.32.0)
Beide Zeichnungen sind Kindelemente des Feldes und liegen damit ÜBER den
Spielerplätzen. Der Torwart steht bei 6 % Höhe - genau im Strafraum. Sein
Antippen landete auf der Zeichnung statt auf dem Knopf, der Platz liess
sich nicht belegen. Zeichnungen fangen ab jetzt keine Berührung mehr ab. */
.mnd-st-feld::before,.mnd-st-feld::after{content:"";position:absolute;border:2px solid rgba(255,255,255,.55);pointer-events:none;z-index:0;}
.mnd-st-feld::before{left:50%;top:50%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;}
.mnd-st-feld::after{left:22%;right:22%;bottom:0;height:16%;border-bottom:0;}
.mnd-st-platz{
position:absolute;transform:translate(-50%,50%);z-index:1;
display:flex;flex-direction:column;align-items:center;gap:2px;
width:64px;padding:0;background:transparent;border:0;cursor:pointer;
}
.mnd-st-platz .mnd-st-bild{
width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.9);border:2px solid rgba(255,255,255,.9);overflow:hidden;color:#5b6a80;
}
.mnd-st-platz .mnd-st-bild img{width:100%;height:100%;object-fit:cover;}
.mnd-st-platz .mnd-st-name{
max-width:64px;padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.95);
font-size:12px;font-weight:700;color:#1f2430;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mnd-st-platz.is-gruen .mnd-st-bild{border-color:var(--mnd-ok);}
.mnd-st-platz.is-gelb .mnd-st-bild{border-color:var(--mnd-warn);}
.mnd-st-platz.is-rot .mnd-st-bild{border-color:var(--mnd-stop);}
.mnd-st-platz.ist-gewaehlt .mnd-st-bild{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--mnd-red);}
.mnd-st-platz:not(.ist-besetzt) .mnd-st-bild{background:rgba(255,255,255,.35);border-style:dashed;color:#fff;}
.mnd-st-platz:not(.ist-besetzt) .mnd-st-name{background:rgba(0,0,0,.35);color:#fff;}
.mnd-st-warn{position:absolute;top:-4px;right:6px;font-size:16px;color:var(--mnd-stop);
background:#fff;border-radius:50%;line-height:1;}
/* Kaderliste neben dem Feld */
.mnd-st-kader{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--mnd-s2);
max-height:70vh;overflow-y:auto;}
.mnd-st-kchip{
display:flex;align-items:center;gap:var(--mnd-s3);width:100%;min-height:52px;
padding:var(--mnd-s2) var(--mnd-s3);border:1px solid var(--mnd-line);border-left:3px solid var(--mnd-neutral);
border-radius:10px;background:var(--mnd-card);cursor:pointer;text-align:left;
}
.mnd-st-kchip.is-gruen{border-left-color:var(--mnd-ok);}
.mnd-st-kchip.is-gelb{border-left-color:var(--mnd-warn);}
.mnd-st-kchip.is-rot{border-left-color:var(--mnd-stop);}
.mnd-st-kchip.ist-drin{background:#eaf7ee;}
.mnd-st-kchip:hover{border-color:var(--mnd-red);}
.mnd-st-kchip .mnd-st-bild{
flex:0 0 auto;width:36px;height:36px;border-radius:50%;overflow:hidden;
display:flex;align-items:center;justify-content:center;background:#eef1f5;color:#5b6a80;
}
.mnd-st-kchip .mnd-st-bild img{width:100%;height:100%;object-fit:cover;}
.mnd-st-ktxt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.mnd-st-ktxt strong{font-size:13.5px;overflow-wrap:break-word;}
.mnd-st-ktxt small{font-size:12px;color:var(--mnd-mut);overflow-wrap:break-word;}
.mnd-st-kmark{flex:0 0 auto;color:var(--mnd-ok);}
.mnd-st-status{font-size:var(--mnd-fs-sm);color:var(--mnd-ok-text);}
.mnd-st-status.is-fehler{color:var(--mnd-stop-text);}
.mnd-st-punkt{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;background:var(--mnd-neutral);}
.mnd-st-punkt.is-gruen{background:var(--mnd-ok);}
.mnd-st-punkt.is-gelb{background:var(--mnd-warn);}
.mnd-st-punkt.is-rot{background:var(--mnd-stop);}
.mnd-st-felder{display:grid;grid-template-columns:1fr 1fr;gap:var(--mnd-s4);margin:var(--mnd-s4) 0;}
@media (max-width:900px){
.mnd-st-auf{grid-template-columns:1fr;}
.mnd-st-feld{max-height:none;}
.mnd-st-kader{max-height:none;}
.mnd-st-felder{grid-template-columns:1fr;}
.mnd-st-werkzeuge .button{width:100%;justify-content:center;}
.mnd-st-datum{min-width:0;flex:1 1 100%;}
.mnd-st-zeile{flex-wrap:wrap;padding:var(--mnd-s3) var(--mnd-s4);}
}
/* ► Die Spielfeld-Chips sind Schaltflächen - und damit ein Fall für die
bekannte Spezifitätsfalle (v6.31.0). `.mnd-wrap button` in der Verwaltung
gibt jedem Knopf Fläche, Rahmen und Radius; ohne die doppelte Wurzelklasse
sähen die Spieler auf dem Rasen wie weiße Kästchen aus. */
.mnd-wrap.mnd-wrap .mnd-st-auf .mnd-st-feld button.mnd-st-platz,
.mnd-fe-app.mnd-fe-app .mnd-st-auf .mnd-st-feld button.mnd-st-platz{
background:transparent;border:0;box-shadow:none;padding:0;min-height:0;
width:64px;border-radius:0;
}
.mnd-wrap.mnd-wrap .mnd-st-auf .mnd-st-feld button.mnd-st-platz:hover,
.mnd-fe-app.mnd-fe-app .mnd-st-auf .mnd-st-feld button.mnd-st-platz:hover{background:transparent;}
.mnd-wrap.mnd-wrap .mnd-st-feld button.mnd-st-platz .mnd-st-bild,
.mnd-fe-app.mnd-fe-app .mnd-st-feld button.mnd-st-platz .mnd-st-bild{border-radius:50%;}
.mnd-wrap.mnd-wrap .mnd-st-kader button.mnd-st-kchip,
.mnd-fe-app.mnd-fe-app .mnd-st-kader button.mnd-st-kchip{
min-height:52px;border-radius:10px;background:var(--mnd-card);
border:1px solid var(--mnd-line);border-left-width:3px;box-shadow:none;
}
.mnd-wrap.mnd-wrap .mnd-st-kader button.mnd-st-kchip.is-gruen,
.mnd-fe-app.mnd-fe-app .mnd-st-kader button.mnd-st-kchip.is-gruen{border-left-color:var(--mnd-ok);}
.mnd-wrap.mnd-wrap .mnd-st-kader button.mnd-st-kchip.is-gelb,
.mnd-fe-app.mnd-fe-app .mnd-st-kader button.mnd-st-kchip.is-gelb{border-left-color:var(--mnd-warn);}
.mnd-wrap.mnd-wrap .mnd-st-kader button.mnd-st-kchip.is-rot,
.mnd-fe-app.mnd-fe-app .mnd-st-kader button.mnd-st-kchip.is-rot{border-left-color:var(--mnd-stop);}
.mnd-wrap.mnd-wrap .mnd-st-kader button.mnd-st-kchip.ist-drin,
.mnd-fe-app.mnd-fe-app .mnd-st-kader button.mnd-st-kchip.ist-drin{background:#eaf7ee;}
/* ===========================================================================
Trainingsplan: Abschnitte mit Übungskarten (v6.31.0)
---------------------------------------------------------------------------
Ein Plan wird am Platz gelesen, nicht am Schreibtisch. Deshalb je Übung eine
Karte mit Skizze, Dauer und Teilnehmerzahl statt eines Fließtextabsatzes.
========================================================================= */
.mnd-trn-abschnitt{margin:0 0 var(--mnd-s6);}
.mnd-trn-ahead{
display:flex;align-items:center;justify-content:space-between;gap:var(--mnd-s3);
margin:0 0 var(--mnd-s3);padding-bottom:var(--mnd-s2);
border-bottom:1px solid var(--mnd-line);font-size:14px;
}
.mnd-trn-aname{font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--mnd-ink);}
.mnd-trn-adauer{display:inline-flex;align-items:center;gap:4px;font-size:var(--mnd-fs-sm);color:var(--mnd-mut);font-weight:600;}
.mnd-trn-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--mnd-s4);}
.mnd-trn-karte{
display:flex;gap:var(--mnd-s4);min-width:0;padding:var(--mnd-s4);
background:var(--mnd-card);border:1px solid var(--mnd-line);border-radius:var(--mnd-radius);
box-shadow:var(--mnd-shadow);
}
.mnd-trn-kbild{flex:0 0 auto;width:110px;}
.mnd-trn-kbild .mnd-skizze{width:100%;height:auto;display:block;border-radius:6px;}
.mnd-trn-ktxt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px;}
.mnd-trn-ktxt strong{font-size:14px;line-height:1.3;overflow-wrap:break-word;}
.mnd-trn-kmeta{display:flex;flex-wrap:wrap;gap:var(--mnd-s4);font-size:var(--mnd-fs-sm);color:var(--mnd-mut);}
.mnd-trn-kmeta span{display:inline-flex;align-items:center;gap:4px;}
.mnd-trn-kmeta .dashicons{font-size:15px;width:15px;height:15px;}
/* ► Beschreibung auf vier Zeilen begrenzen (v6.31.2)
Stehen mehrere Karten nebeneinander, ziehen unterschiedlich lange Texte die
Reihe auseinander und das Raster wirkt unruhig. Der vollständige Text steht
im Mouseover - so bleibt nichts verborgen, und die Reihe bleibt ruhig. */
.mnd-trn-ktxt p{
margin:2px 0 0;font-size:12.5px;color:var(--mnd-ink);overflow-wrap:break-word;
display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.mnd-trn-ktxt small{color:var(--mnd-mut);overflow-wrap:break-word;}
/* Übungsdatenbank: Skizze über der Karte */
.mnd-trn-exbild{margin:calc(-1 * var(--mnd-s3)) calc(-1 * var(--mnd-s3)) var(--mnd-s3);}
.mnd-trn-exbild .mnd-skizze{width:100%;height:auto;display:block;border-radius:8px 8px 0 0;}
@media (max-width:600px){
.mnd-trn-karte{flex-direction:column;}
.mnd-trn-kbild{width:100%;max-width:180px;}
}
/* ===========================================================================
Spieltag und Übungskarten auf dem Telefon (v6.31.3)
---------------------------------------------------------------------------
► Gemessen, nicht geschätzt: Bei 375 px nutzbarer Breite ist das Feld 296 px
breit. Eine Viererkette steht dort auf 18 % Abstand = 53 px. Mit 64 px
breiten Chips überlappten sich drei Spieler - und ein überlappender Chip ist
nicht antippbar. Deshalb schrumpfen die Chips mit dem Feld, nicht der Text.
========================================================================= */
@media (max-width:700px){
/* Kennzahlen: zwei nebeneinander, Zahl und Beschriftung in einer Zeile -
spart über die Hälfte der Höhe, ohne etwas wegzulassen. */
.mnd-st-kpi{
flex:1 1 calc(50% - var(--mnd-s3));
flex-direction:row;align-items:baseline;gap:var(--mnd-s2);
padding:var(--mnd-s3) var(--mnd-s4);
}
.mnd-st-kpi-zahl{font-size:19px;}
.mnd-st-kpi-lbl{font-size:12px;}
/* Spielerchips: schmaler, damit eine Viererkette nebeneinander passt. */
.mnd-wrap.mnd-wrap .mnd-st-auf .mnd-st-feld button.mnd-st-platz,
.mnd-fe-app.mnd-fe-app .mnd-st-auf .mnd-st-feld button.mnd-st-platz{width:44px;}
.mnd-st-platz .mnd-st-bild{width:32px;height:32px;}
.mnd-st-platz .mnd-st-bild .dashicons{font-size:16px;width:16px;height:16px;}
.mnd-st-platz .mnd-st-name{max-width:52px;font-size:12px;padding:1px 4px;}
.mnd-st-warn{font-size:13px;top:-2px;right:2px;}
/* Das Feld darf höher werden - Höhe ist auf dem Telefon billiger als Breite. */
.mnd-st-feld{aspect-ratio:68/118;}
/* Übungskarten: Skizze bleibt links, aber schmaler. Untereinander würden
je Karte 90 px Höhe verschenkt, und man sähe nur noch zwei Übungen. */
.mnd-trn-karte{flex-direction:row;gap:var(--mnd-s3);padding:var(--mnd-s3);}
.mnd-trn-kbild{width:84px;}
.mnd-trn-ktxt strong{font-size:13px;}
/* Auf dem Telefon drei statt vier Zeilen: Bei 271 px Kartenbreite wird die
Karte sonst über 200 px hoch und man sieht kaum zwei Übungen. */
.mnd-trn-ktxt p{-webkit-line-clamp:3;line-clamp:3;}
.mnd-trn-ahead{flex-wrap:wrap;gap:var(--mnd-s2);}
}
@media (max-width:430px){
/* Ganz schmal: Auch eine Fünferkette (5-3-2) muss noch passen. */
.mnd-wrap.mnd-wrap .mnd-st-auf .mnd-st-feld button.mnd-st-platz,
.mnd-fe-app.mnd-fe-app .mnd-st-auf .mnd-st-feld button.mnd-st-platz{width:38px;}
.mnd-st-platz .mnd-st-bild{width:28px;height:28px;}
.mnd-st-platz .mnd-st-name{max-width:46px;font-size:12px;}
.mnd-st-kpi{flex:1 1 calc(50% - var(--mnd-s2));}
}
/* ==========================================================================
v6.58.0 – Reiterleisten umbrechen statt scrollen, Klappköpfe gut treffbar
========================================================================== */
/* ► Reiterleisten brechen um (Dauervorgabe aus v6.27.0, hier nachgezogen)
`.mnd-ck-tabs` (Rechte-Cockpit) und `.mnd-sa-tabs` (Selbstauskunft) waren
die letzten waagerecht scrollenden Leisten. Gemessen bei 390 px ragte ein
Reiter bis 587 px – sichtbar war er nur nach seitlichem Wischen, und was
man wegwischen muss, findet man nicht. Umbruch zeigt alles auf einmal. */
.mnd-ck-tabs, .mnd-sa-tabs { flex-wrap:wrap; overflow-x:visible; }
.mnd-ck-tabs .mnd-sa-tab, .mnd-sa-tabs .mnd-sa-tab { flex:0 1 auto; white-space:normal; }
/* ► Der Klappkopf ist die Trefferfläche, nicht nur der Pfeil (v6.58.0)
Seit alle Abschnitte zugeklappt starten, ist Aufklappen die häufigste
Handlung im ganzen Werkzeug. Die ganze Kopfzeile reagiert bereits auf den
Klick – sie bekommt jetzt auch die Höhe dazu, damit man sie mit dem Daumen
sicher trifft, ohne den kleinen Pfeil suchen zu müssen. */
.mnd-abschnitt-kopf { min-height:40px; }
@media (max-width:900px), (pointer:coarse) {
.mnd-abschnitt-kopf { min-height:var(--mnd-touch); }
.mnd-wrap.mnd-wrap .mnd-panel-klapp, .mnd-fe-app.mnd-fe-app .mnd-panel-klapp,
.mnd-fe-app.mnd-fe-app .mnd-fe-drawer-close {
min-width:var(--mnd-touch); min-height:var(--mnd-touch);
}
}
/* ==========================================================================
v6.60.0 – Abstaende in Tabellen, Bezeichnung und Wert sauber getrennt
========================================================================== */
/* ► Kein Wort klebt an einer Linie
`.mnd-kv` war als rahmenlose Schluessel-Wert-Liste gebaut: linke Spalte ohne
Innenabstand, weil links nichts war. Sobald sie mit `.mnd-table` kombiniert
wird - und das tun alle Erklaerabschnitte -, bekommt sie Zellenlinien und
Flaechen, und die Bezeichnung klebt an der Kante. Ein Wort, das eine Linie
beruehrt, wirkt wie ein Fehler, egal wie gut der Text ist. */
/* ► NACHBESSERUNG v12.7.0 – die Regel verlangte ZWEI Klassen.
*
* Sie stand als `.mnd-table.mnd-kv` da und griff damit nur, wenn beide
* Klassen zusammen gesetzt sind. Wo im Markup nur `.mnd-kv` steht – und das
* ist an vielen Stellen so – blieb der Innenabstand null. Auf dem Handy
* klebte der Wert dort weiter an der Kante: bei der Prüfkette, beim
* Reifegrad, bei den laufenden Fällen, bei der Tauglichkeit.
*
* Ich hatte den Fehler in v6.60.0 an einer Stelle behoben und für erledigt
* gehalten. Eine Korrektur, die eine Klassenkombination voraussetzt, ist
* keine Korrektur an der Wurzel – sie ist eine Korrektur für die Fälle, die
* man beim Schreiben gerade vor Augen hatte.
*
* Jetzt gilt der Abstand für jede `.mnd-kv`, gleich womit sie kombiniert ist.
*/
.mnd-wrap .mnd-kv th, .mnd-fe-app .mnd-kv th,
.mnd-wrap .mnd-kv td, .mnd-fe-app .mnd-kv td {
padding: 12px 16px;
vertical-align: top;
line-height: 1.55;
}
.mnd-wrap .mnd-kv th, .mnd-fe-app .mnd-kv th {
width: 210px; white-space: normal; font-weight: 600;
}
.mnd-wrap .mnd-table.mnd-kv th, .mnd-fe-app .mnd-table.mnd-kv th {
border-right: 1px solid var(--mnd-line);
}
@media (max-width:640px) {
/* Auf dem Handy stehen Bezeichnung und Text untereinander - nebeneinander
bliebe fuer den Text eine Spalte von zwei Woertern Breite. */
.mnd-wrap .mnd-kv th, .mnd-fe-app .mnd-kv th {
width: auto; border-right: 0; padding-bottom: 2px;
}
.mnd-wrap .mnd-kv td, .mnd-fe-app .mnd-kv td { padding-top: 0; }
}
/* ► Derselbe Fehler, andere Bauform: Kennwert-Kästen ohne Tabelle.
* „Voraussichtliche Größe", „Erreicht", „Siegel (letzte Prüfsumme)", die
* Blöcke unter „Laufende Fälle" und „Handlungsbedarf" sind Listen aus
* Beschriftung + Wert, gebaut als dl/div statt als Tabelle. Sie hatten nie
* einen Innenabstand, weil die Korrektur oben nur Tabellen kannte. */
.mnd-wrap .mnd-feldliste > *, .mnd-fe-app .mnd-feldliste > *,
.mnd-wrap .mnd-kvblock, .mnd-fe-app .mnd-kvblock,
.mnd-wrap dl.mnd-liste dd, .mnd-fe-app dl.mnd-liste dd,
.mnd-wrap dl.mnd-liste dt, .mnd-fe-app dl.mnd-liste dt {
padding-left: 16px; padding-right: 16px;
}
/* ► Klappkoepfe: der Pfeil steht immer ganz rechts
Bei nebeneinanderliegenden Abschnitten sass er mal mittig, mal am Rand -
je nachdem, wie lang die Ueberschrift war. Uneinheitlich wirkt unfertig. */
.mnd-abschnitt-kopf { display:flex; align-items:center; gap:10px; }
.mnd-abschnitt-kopf .mnd-panel-klapp { margin-left:auto; flex:0 0 auto; }
/* ► v12.7.1 – Hinweiskästen sind Text, kein Layout
*
* `display:flex` macht aus JEDEM Kind ein eigenes Element mit eigener
* Spalte – auch aus einem `` mitten im Satz. Ein Hinweiskasten mit
* Symbol links und zwei fett ausgezeichneten Stellen im Text wurde damit zu
* fünf Spalten nebeneinander, jede ein Fünftel breit. Auf der Anmeldeseite
* stand deshalb „Sie wurden eingelad / en?" – Buchstaben in der Senkrechten.
*
* Ich habe genau diesen Fehler in v6.60.0 an `.mnd-alert` behoben und nicht
* nach Geschwistern gesucht. Eine maschinelle Suche findet **85 Stellen**
* derselben Bauform. **Eine Bauform, die einmal falsch war, ist meist
* mehrfach verbaut – die Suche nach Geschwistern gehört zur Korrektur.**
*
* Statt 85 Ansichten einzeln umzubauen: Diese Kästen sind Fließtext mit
* einem Symbol davor. Also Blockfluss mit hängendem Einzug – das Symbol
* steht absolut, der Text läuft als Text. Optisch identisch, aber kein
* Wort wird mehr zerlegt.
*/
.mnd-wrap .mnd-warnbox, .mnd-fe-app .mnd-warnbox,
.mnd-wrap .mnd-alert, .mnd-fe-app .mnd-alert,
.mnd-wrap .mnd-pub-notice, .mnd-fe-app .mnd-pub-notice,
.mnd-pub-card .mnd-warnbox, .mnd-pub-card .mnd-pub-notice,
.mnd-fe-hilfe {
display:block; position:relative;
padding-left:34px;
}
.mnd-wrap .mnd-warnbox > .dashicons:first-child,
.mnd-fe-app .mnd-warnbox > .dashicons:first-child,
.mnd-wrap .mnd-alert > .dashicons:first-child,
.mnd-fe-app .mnd-alert > .dashicons:first-child,
.mnd-wrap .mnd-pub-notice > .dashicons:first-child,
.mnd-fe-app .mnd-pub-notice > .dashicons:first-child,
.mnd-pub-card .mnd-warnbox > .dashicons:first-child,
.mnd-pub-card .mnd-pub-notice > .dashicons:first-child,
.mnd-fe-hilfe > .dashicons:first-child {
position:absolute; left:10px; top:calc(var(--mnd-s3, 10px) + 2px);
}
/* Mehrere Absätze im Kasten bleiben Absätze – nur ohne Aussenabstand oben. */
.mnd-fe-hilfe-txt > p:first-child { margin-top:0; }
.mnd-fe-hilfe-txt > p:last-child { margin-bottom:0; }
/* ► v12.7.0 – Etiketten brechen nie um
*
* Ein Chip, eine Plakette, ein Zähler ist ein **Etikett**: eine geschlossene
* Marke, die man auf einen Blick erfasst. Sobald sie umbricht, hört sie auf,
* eine Marke zu sein, und wird zu einem Textabsatz in einem farbigen Kasten.
* Auf dem Handy stand deshalb „18 ÜBUN / GEN" über drei Zeilen und in der
* Mannschaftsliste „Profis (Herren)" als senkrechte Buchstabenkolonne.
*
* Regel: Etiketten brechen nicht. Passt der Text nicht, wird er gekürzt –
* der volle Wortlaut steht im Titel-Hinweis. Lieber ein sichtbar gekürztes
* Etikett als ein zerlegtes.
*/
.mnd-team-chip, .mnd-kat-chip, .mnd-status-chip, .mnd-chip,
.mnd-abschnitt-kopf .mnd-anzahl, .mnd-abschnitt-kopf .mnd-cnt,
.mnd-tc-z, .mnd-pill, .mnd-tag {
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
max-width:100%; word-break:normal; overflow-wrap:normal;
}
/* Kurze Schaltflächen („Heute", „Suchen", „Öffnen") sind ebenfalls Etiketten.
„Heu / te" auf zwei Zeilen lässt eine fertige App unfertig aussehen. */
.mnd-wrap .button-small, .mnd-fe-app .button-small,
.mnd-wrap .mnd-btn-klein, .mnd-fe-app .mnd-btn-klein {
white-space:nowrap; word-break:normal; overflow-wrap:normal;
}
/* ► v12.7.0 – die Aktionsspalte nahm der Namensspalte den Platz
*
* In der Mannschaftsliste stehen sechs Spalten; die letzte trägt zwei bis
* drei Symbolknöpfe. Diese Knöpfe haben eine feste Breite und geben keinen
* Millimeter ab. Auf einem 390-px-Gerät blieb für die Bezeichnung so wenig,
* dass sie senkrecht Buchstabe für Buchstabe stand.
*
* Zwei Maßnahmen: Die Aktionsspalte bekommt eine feste, knappe Breite und
* bricht ihre Knöpfe um, statt zu wachsen. Und die Textspalten behalten eine
* Mindestbreite – lieber scrollt die Tabelle, als dass ein Wort zerfällt.
*/
.mnd-wrap .mnd-table td.mnd-actions, .mnd-fe-app .mnd-table td.mnd-actions {
white-space:normal; width:1%; min-width:0;
}
.mnd-wrap .mnd-table td.mnd-actions .button,
.mnd-fe-app .mnd-table td.mnd-actions .button { flex:0 0 auto; }
@media (max-width:640px) {
/* Unter 640 px steht die Aktionszeile unter dem Inhalt, nicht daneben.
Nebeneinander bliebe für beides zu wenig. */
.mnd-wrap .mnd-table td.mnd-actions, .mnd-fe-app .mnd-table td.mnd-actions {
width:auto; display:flex; flex-wrap:wrap; gap:8px; padding-top:10px;
}
}
/* ► Das Wort "frei" brach in "fr" und "ei" um (v6.60.0)
Die Beschriftung stand als Flex-Element zwischen zwei Schaltflaechen und
bekam nur die Breite von zwei Buchstaben. Ein umgebrochenes Wort ist der
sichtbarste aller Layoutfehler - man liest zweimal, bevor man versteht.
Jetzt: "oder [14] Tage" als geschlossene Einheit, die nie umbricht. */
.mnd-sp-freifeld { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; flex:0 0 auto; }
.mnd-sp-freifeld input { width:76px; text-align:center; }
.mnd-sp-freifeld span { color:var(--mnd-mut); font-size:13px; }
/* ► Die Schrittliste der Taktiktafel wurde seitlich abgeschnitten
Die Spalte scrollte waagerecht, statt die Zeilen umbrechen zu lassen.
Ein Spielzugschritt ist ein Satz - den liest man, man wischt ihn nicht. */
.mnd-tac-schritte, .mnd-tac-li, .mnd-tac-lib { overflow-x:visible; }
.mnd-tac-li, .mnd-tac-lib li, .mnd-tac-schritte li {
white-space:normal; overflow-wrap:break-word; line-height:1.45;
}
/* ► Hinweiskaesten halten ihren Rahmen ein
Lange Aufzaehlungen (etwa alle Mannschaften ohne Kennung) schoben den
Kasten ueber den Seitenrand hinaus, der Text lief rechts ins Nichts. */
.mnd-wrap .mnd-alert, .mnd-fe-app .mnd-alert,
.mnd-wrap .mnd-info-box, .mnd-fe-app .mnd-info-box {
max-width:100%; overflow-wrap:break-word;
}
/* ► Auswertungszeitraum der Trainingsbeteiligung (v6.60.0) */
.mnd-at-form { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.mnd-at-zeitraum { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.mnd-at-zeitraum label { display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
color:var(--mnd-mut); font-size:13px; }
.mnd-at-zeitraum input[type="date"] { min-width:150px; }
.mnd-at-zr-hinweis { margin:12px 16px 0; }
@media (max-width:640px) {
.mnd-at-form, .mnd-at-zeitraum { width:100%; }
.mnd-at-zeitraum label { flex:1 1 100%; }
.mnd-at-zeitraum input[type="date"] { flex:1; min-width:0; }
}
/* ► Randspalten bekommen Luft – überall, nicht nur wo jemand daran dachte
(v6.60.0)
Es gab bereits `.mnd-table-flush` mit 20 px an den Aussenkanten – aber nur
Tabellen, die diese Klasse ausdruecklich tragen, bekamen sie. Alle anderen
standen mit 12 px an der Kastenkante, und die erste Spalte wirkte
angeklatscht. Ein Wert, den man je Tabelle setzen muss, wird irgendwann
vergessen; deshalb gilt er jetzt fuer jede Tabelle in einem Kasten. */
.mnd-wrap .mnd-panel .mnd-table thead th:first-child,
.mnd-wrap .mnd-panel .mnd-table tbody td:first-child,
.mnd-wrap .mnd-panel .mnd-table tbody th:first-child,
.mnd-fe-app .mnd-panel .mnd-table thead th:first-child,
.mnd-fe-app .mnd-panel .mnd-table tbody td:first-child,
.mnd-fe-app .mnd-panel .mnd-table tbody th:first-child { padding-left: 20px; }
.mnd-wrap .mnd-panel .mnd-table thead th:last-child,
.mnd-wrap .mnd-panel .mnd-table tbody td:last-child,
.mnd-fe-app .mnd-panel .mnd-table thead th:last-child,
.mnd-fe-app .mnd-panel .mnd-table tbody td:last-child { padding-right: 20px; }
@media (max-width:782px) {
/* Mobil sind die Zeilen Karten – dort zaehlt der Kartenrand, nicht der
Zellenrand. Sonst entstuende ein doppelter Einzug. */
.mnd-wrap .mnd-panel .mnd-table tbody td:first-child,
.mnd-fe-app .mnd-panel .mnd-table tbody td:first-child { padding-left: 0; }
.mnd-wrap .mnd-panel .mnd-table tbody td:last-child,
.mnd-fe-app .mnd-panel .mnd-table tbody td:last-child { padding-right: 0; }
}
/* ==========================================================================
v6.61.0 – Übungsdatenbank und Kalender an den Trainingsplaner angebunden
========================================================================== */
/* ► „Übernehmen für folgendes Training" an der Übungskarte
Die Auswahl steht IN der Karte, nicht in einer Werkzeugleiste am Seitenrand:
Man entscheidet vor der Übung, die man gerade liest - nicht danach, wenn man
sie wiederfinden muss. */
.mnd-trn-uebernahme {
margin-top: 10px; padding-top: 10px;
border-top: 1px solid var(--mnd-line);
display: flex; flex-direction: column; gap: 6px;
}
.mnd-trn-ueb-lbl { font-size: 12px; font-weight: 600; color: var(--mnd-mut); }
.mnd-trn-ueb-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mnd-trn-ueb-ziel { flex: 1 1 160px; min-width: 0; }
.mnd-trn-ueb-go { flex: 0 0 auto; }
.mnd-trn-ueb-note, .mnd-trn-evnote { font-size: 12px; color: var(--mnd-mut); min-height: 16px; }
.mnd-trn-ueb-note.is-ok, .mnd-trn-evnote.is-ok { color: #1f7a3d; }
.mnd-trn-ueb-note.is-fehler, .mnd-trn-evnote.is-fehler { color: var(--mnd-red, #c8102e); }
/* ► Terminzuordnung im Kopf der Einheit */
.mnd-trn-termin {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
padding: 10px 12px; margin-bottom: 4px;
background: var(--mnd-bg); border-radius: var(--mnd-r-md, 8px);
}
.mnd-trn-termin label { font-weight: 600; font-size: 13px; white-space: nowrap; }
.mnd-trn-termin .dashicons { color: var(--mnd-mut); }
.mnd-trn-evsel { flex: 1 1 240px; min-width: 0; }
.mnd-trn-evhinweis { margin: 0 0 12px; }
@media (max-width:640px) {
.mnd-trn-termin label, .mnd-trn-evsel { flex: 1 1 100%; }
.mnd-trn-ueb-go { width: 100%; justify-content: center; }
}
.mnd-trn-evleer { flex:1 1 240px; font-size:13px; color:var(--mnd-mut); line-height:1.5; }
/* ==========================================================================
v6.62.0 – Vier Ansichten der Trainingswoche
========================================================================== */
/* ► Die Ansichtswahl bricht um, statt zu scrollen (Dauervorgabe seit v6.9) */
.mnd-wp-ansichten {
display:flex; flex-wrap:wrap; gap:6px;
padding:12px 16px 0; margin:0;
}
.mnd-wp-ansicht {
display:inline-flex; align-items:center; gap:6px;
padding:8px 14px; border:1px solid var(--mnd-line); border-radius:999px;
background:#fff; color:var(--mnd-ink); text-decoration:none;
font-size:13px; font-weight:600; white-space:nowrap;
min-height:var(--mnd-touch-min,36px);
}
.mnd-wp-ansicht .dashicons { font-size:16px; width:16px; height:16px; color:var(--mnd-mut); }
.mnd-wp-ansicht:hover { border-color:var(--mnd-red,#c8102e); color:var(--mnd-red,#c8102e); }
.mnd-wp-ansicht.is-on {
background:var(--mnd-red,#c8102e); border-color:var(--mnd-red,#c8102e); color:#fff;
}
.mnd-wp-ansicht.is-on .dashicons { color:#fff; }
@media (max-width:900px), (pointer:coarse) {
.mnd-wp-ansicht { min-height:var(--mnd-touch,44px); }
}
/* ► Listenansicht: ganze Zeilen statt sieben Spalten */
.mnd-wp-liste { padding:12px 16px 16px; display:flex; flex-direction:column; gap:14px; }
.mnd-wp-ltag { border:1px solid var(--mnd-line); border-radius:var(--mnd-r-md,8px); overflow:hidden; }
.mnd-wp-ltag.is-heute { border-color:var(--mnd-red,#c8102e); }
.mnd-wp-lkopf {
display:flex; flex-wrap:wrap; align-items:center; gap:10px;
padding:10px 14px; background:var(--mnd-bg); font-size:13px;
}
.mnd-wp-lkopf span { color:var(--mnd-mut); }
.mnd-wp-ldauer { margin-left:auto; font-weight:600; color:var(--mnd-ink) !important; }
.mnd-wp-lzeile {
display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
padding:10px 14px; border-top:1px solid var(--mnd-line); font-size:14px;
}
.mnd-wp-lzeit { font-weight:700; min-width:48px; }
.mnd-wp-ltyp {
font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
color:var(--mnd-mut);
}
.mnd-wp-ltxt { flex:1 1 200px; min-width:0; overflow-wrap:break-word; }
.mnd-wp-ltxt em { color:var(--mnd-mut); font-style:normal; }
.mnd-wp-ltxt em::before { content:' · '; }
.mnd-wp-ldau { color:var(--mnd-mut); font-size:13px; }
/* ► Zeitschiene: Uhrzeit als senkrechte Achse */
.mnd-wp-zeit { display:flex; gap:2px; padding:12px 16px 4px; overflow-x:auto; }
.mnd-wp-zskala { flex:0 0 52px; display:flex; flex-direction:column; }
.mnd-wp-zecke { height:44px; flex:0 0 44px; }
.mnd-wp-zstunde {
height:calc(var(--wp-px) * 2); font-size:12px; color:var(--mnd-mut);
border-top:1px solid var(--mnd-line); padding-top:2px;
}
.mnd-wp-zspalte { flex:1 1 0; min-width:74px; }
.mnd-wp-zkopf {
height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center;
font-size:12px; line-height:1.2;
}
.mnd-wp-zkopf span { color:var(--mnd-mut); }
.mnd-wp-zspalte.is-heute .mnd-wp-zkopf { color:var(--mnd-red,#c8102e); }
.mnd-wp-zfeld {
position:relative; height:calc(var(--wp-px) * 31);
background:repeating-linear-gradient(
to bottom, var(--mnd-bg) 0, var(--mnd-bg) 1px,
transparent 1px, transparent calc(var(--wp-px) * 2)
);
border-left:1px solid var(--mnd-line);
}
.mnd-wp-zspalte.is-heute .mnd-wp-zfeld { background-color:rgba(200,16,46,.03); }
.mnd-wp-zblock {
position:absolute; left:2px; right:2px;
border-radius:6px; padding:3px 6px; overflow:hidden;
background:#eef2f7; border-left:3px solid var(--mnd-mut);
font-size:12px; line-height:1.3;
}
.mnd-wp-zzeit { display:block; font-weight:700; }
.mnd-wp-ztitel { display:block; color:var(--mnd-mut); overflow-wrap:break-word; }
/* ► Belastungsansicht: Rhythmus statt Termine */
.mnd-wp-last {
display:flex; align-items:flex-end; gap:8px;
padding:16px; min-height:200px;
}
.mnd-wp-lsp { flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
.mnd-wp-lbalkenraum {
width:100%; height:130px; display:flex; align-items:flex-end;
background:var(--mnd-bg); border-radius:6px 6px 0 0;
}
.mnd-wp-lbalken {
width:100%; border-radius:6px 6px 0 0;
background:linear-gradient(to top, #4f7ea8, #7ba7cc);
transition:height .25s ease;
}
.mnd-wp-lbalken.is-hb { background:linear-gradient(to top, var(--mnd-red,#c8102e), #e2566d); }
.mnd-wp-lbalken.is-frei { background:var(--mnd-line); }
.mnd-wp-lwert { font-size:12px; font-weight:700; }
.mnd-wp-lwt { font-size:13px; font-weight:600; }
.mnd-wp-ldt { font-size:12px; color:var(--mnd-mut); }
.mnd-wp-lsp.is-heute .mnd-wp-lwt { color:var(--mnd-red,#c8102e); }
@media (max-width:640px) {
.mnd-wp-last { min-height:170px; padding:12px 8px; gap:4px; }
.mnd-wp-lbalkenraum { height:100px; }
.mnd-wp-ldt { display:none; }
}
/* ==========================================================================
v6.64.0 – Mobile Durchsicht: gekürzter Text, der nirgendwo weitergeht
========================================================================== */
/* ► Auf dem Handy wird nichts weggekürzt, was man braucht
Die Übungsbeschreibungen sind auf vier Zeilen begrenzt - am Schreibtisch
sinnvoll, damit die Karten gleich hoch bleiben. Bei 320 px passen in vier
Zeilen aber nur rund 90 von 340 Zeichen: Der Trainer sieht ein Viertel der
Anweisung, und es gibt keinen Weg zum Rest - kein Aufklappen, kein Hinweis,
dass da noch etwas kommt.
Am Platz zählt Vollständigkeit mehr als gleich hohe Karten. Die Karte darf
wachsen; gescrollt wird auf dem Handy ohnehin. Damit gilt die Vorgabe
„reicht die Breite nicht, geht es untereinander weiter" auch für Text
innerhalb einer Karte. */
@media (max-width:640px), (pointer:coarse) {
.mnd-trn-ktxt p, .mnd-trn-excard p {
display:block; -webkit-line-clamp:none; line-clamp:none; overflow:visible;
}
.mnd-trn-kkarte, .mnd-trn-excard { height:auto; }
}
/* ► Der Kopf der App bleibt zweizeilig, aber vollständig
`.mnd-fe-brandtxt small` trägt den Seitennamen und war auf zwei Zeilen
begrenzt. Bei 320 px reicht das für „Trainingsplaner" gerade so - für
„Rückkehr zum Spielbetrieb" nicht mehr. Der Seitenname steht ohnehin
nochmal in der Überschrift; hier genügt eine Zeile mit sauberem Auslauf,
statt zwei Zeilen mit halbem Wort. */
@media (max-width:400px) {
.mnd-fe-brandtxt small {
-webkit-line-clamp:1; line-clamp:1;
white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
}
/* ==========================================================================
v6.64.0 – Schmale Geräte: lieber untereinander als gequetscht
==========================================================================
Gemessen wurde in 320 / 390 / 430 px über 24 Module: kein einziger
Überlauf, kein abgeschnittener Text, kein randloses Panel - das Fundament
aus v6.7 trägt. Was auffiel, war das Gegenteil: Elemente, die sich die
Breite teilen, obwohl für keines mehr genug übrig bleibt.
Die Regel dahinter: Ab wann etwas umbricht, entscheidet nicht die
Gerätebreite, sondern die Frage, ob der Inhalt noch lesbar bzw. bedienbar
ist. 320 px ist die kleinste gängige Breite (iPhone SE); alles darunter
gibt es praktisch nicht mehr. */
@media (max-width:380px) {
/* ► Filter- und Werkzeugzeilen: volle Breite statt Drittel
Drei Auswahlfelder nebeneinander sind auf 320 px je 84 px breit -
dort steht dann „alle" statt „alle Mannschaften". Ein Auswahlfeld,
dessen Inhalt man nicht lesen kann, ist eine Ratewahl. */
.mnd-wrap .mnd-filter, .mnd-fe-app .mnd-filter,
.mnd-wrap .mnd-toolbar, .mnd-fe-app .mnd-toolbar,
.mnd-wrap .mnd-bar, .mnd-fe-app .mnd-bar,
.mnd-wrap .mnd-sp-frei, .mnd-fe-app .mnd-sp-frei { flex-wrap:wrap; }
.mnd-wrap .mnd-filter > *, .mnd-fe-app .mnd-filter > *,
.mnd-wrap .mnd-toolbar > select, .mnd-fe-app .mnd-toolbar > select,
.mnd-wrap .mnd-bar > select, .mnd-fe-app .mnd-bar > select {
flex:1 1 100%; min-width:0;
}
/* ► Auswahlfelder brauchen Platz für ihren längsten Eintrag
Ein