-Landmark (header.php, geschlossen in footer.php). Sie ersetzt
seit 2026-09-14 das leere , das nur Sprungziel war.
Die Flex-Spalte hier ist kein Schmuck: vorher waren .content und die
uebrigen Inhaltsbloecke direkte Flex-Items des . Als normale
Block-Kinder einer -Box verlieren sie 16px Hoehe, weil der untere
Rand des letzten Kindes nach aussen kollabiert - nachgemessen am
2026-09-14 auf home.php, Uebungsdatenbank und Hallenbelegung.
display: flex stellt genau den alten Zustand wieder her. display: contents
taete das auch, nimmt der Landmark aber unter Umstaenden die Rolle im
Accessibility-Baum - also gerade das, wofuer sie da ist. */
#ti-main {
display: flex;
flex-direction: column;
}
img, svg, video, canvas {
max-width: 100%;
height: auto;
display: block;
}
/* === Inputs & Buttons === */
select, input, button, textarea {
font: inherit;
color: var(--text-input);
background-color: var(--bg-flaeche);
border: 1px solid var(--border-light);
border-radius: 10px;
padding: 12px 14px;
min-height: 20px;
}
button,
input[type="button"],
input[type="submit"] {
cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
background-color: var(--background-color);
border: 1px solid var(--border-color);
touch-action: manipulation;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
transform: translateY(-1px);
background-color: var(--bg-table-row-dark);
}
button:active,
input[type="button"]:active,
input[type="submit"]:active {
transform: translateY(0);
}
:focus-visible {
outline: 3px solid var(--tigers-yellow);
outline-offset: 2px;
}
/* === Navigation === */
nav {
position: sticky;
top: 0;
z-index: 1000;
height: var(--navbar-height);
background: var(--nav-glass-bg);
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
border-bottom: 1px solid rgba(253,238,23,0.18);
border-bottom: 1px solid color-mix(in srgb, var(--tigers-yellow) 18%, transparent);
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
padding: 0 0 0 0;
margin-bottom: 16px;
}
/* Logo-Bereich: gelber Akzentstreifen links */
nav .loginHeader {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
height: 100%;
padding: 0 20px;
background: var(--tigers-yellow);
border-right: 3px solid #e6d815;
}
nav a.logo {
max-height: var(--navbar-height);
font-size: 1.1rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
color: var(--tigers-black);
display: flex;
align-items: center;
}
nav .TigersLogo,
nav .TigersLogo img {
max-height: calc(var(--navbar-height) - 12px);
max-width: calc(var(--navbar-height) - 12px);
}
/* Nav-Liste */
nav ul {
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
list-style: none;
gap: 0;
}
nav li {
height: 100%;
min-width: auto;
text-align: center;
position: relative;
}
/* Browser-Vorgaben des abraeumen (2026-08-23).
Beim Menue-Umbau uebersehen: ein bringt background: ButtonFace,
einen eigenen Rahmen und border-radius mit. Die Regel darunter faerbt die
Schrift weiss - Ergebnis waren zwei weisse Kaesten mit unsichtbarem Text.
Muss VOR der gemeinsamen Regel stehen, damit deren border-bottom bleibt. */
nav .nav-gruppe {
background: none;
border: 0;
border-radius: 0;
font: inherit;
text-align: inherit;
-webkit-appearance: none;
appearance: none;
}
nav ul a,
nav ul a:visited,
nav .expandable_li > .nav-gruppe {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
text-decoration: none;
color: rgba(255,255,255,0.88);
font-size: 0.88rem;
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
padding: 0 12px;
transition: background 0.15s ease, color 0.15s ease;
cursor: pointer;
border-bottom: 3px solid transparent;
}
nav ul a i,
nav .expandable_li > .nav-gruppe i {
color: var(--tigers-yellow);
font-size: 0.9rem;
transition: color 0.15s ease;
}
nav li:hover > a,
nav li:hover > a:visited,
nav li:hover > .nav-gruppe,
nav li:focus-within > .nav-gruppe {
color: var(--tigers-yellow);
border-bottom-color: var(--tigers-yellow);
background: rgba(255,255,255,0.05);
}
nav li:hover > a i,
nav li:hover > .nav-gruppe i,
nav li:focus-within > .nav-gruppe i {
color: var(--tigers-yellow);
}
/* Aktiver Nav-Link */
nav ul a.active,
nav ul a.active:visited {
color: var(--tigers-yellow);
border-bottom: 3px solid var(--tigers-yellow);
font-weight: 700;
}
nav ul a.active i {
color: var(--tigers-yellow);
}
/* Dropdown */
.dropdown {
height: min-content;
width: 260px;
background: #1a1a1a;
border: 1px solid rgba(253,238,23,0.2);
border: 1px solid color-mix(in srgb, var(--tigers-yellow) 20%, transparent);
border-top: 3px solid var(--tigers-yellow);
display: none;
flex-direction: column;
position: absolute;
left: 0;
top: var(--navbar-height);
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
border-radius: 0 0 var(--radius-small) var(--radius-small);
overflow: hidden;
}
.dropdown li {
height: 48px;
width: 100%;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dropdown li:last-child {
border-bottom: none;
}
.dropdown li a {
justify-content: flex-start;
padding: 0 18px;
gap: 10px;
width: 100%;
color: rgba(255,255,255,0.75);
font-size: 0.83rem;
font-weight: 500;
letter-spacing: 0.03em;
text-transform: none;
border-bottom: none;
height: 100%;
}
.dropdown li a i {
color: var(--tigers-yellow);
font-size: 0.88rem;
}
.dropdown li:hover a {
background: rgba(253,238,23,0.08);
background: color-mix(in srgb, var(--tigers-yellow) 8%, transparent);
color: var(--tigers-yellow);
border-bottom: none;
}
.dropdown li:hover a i {
color: var(--tigers-yellow);
}
/* Abschnitts-Label & Trenner innerhalb eines Dropdowns, z. B. "Formulare"
unter Abrechnung & Dokumente (Menü-Konsolidierung, 2026-08-07). Gleiche
Optik wie .npm-label/.npm-sep im Profilmenü, hier generisch fürs Dropdown. */
.dropdown li.dropdown-label {
height: auto;
cursor: default;
padding: 9px 18px 4px;
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
/* 0,4 ergab 3,81:1 auf dem dunklen Chrome - unter den geforderten 4,5:1
fuer diese kleine Schrift (2026-08-23 gemessen). 0,6 sind 6,4:1 und
bleiben optisch eine zurueckgenommene Beschriftung. */
color: rgba(255,255,255,0.6);
}
.dropdown li.dropdown-sep {
height: 1px;
padding: 0;
margin: 4px 0;
background: rgba(255,255,255,0.1);
border: none;
}
/* :focus-within ergaenzt den Hover (2026-08-23): ohne das oeffnet sich das
Dropdown auf dem Desktop nur mit der Maus, und die Links darin sind fuer
die Tastatur nicht erreichbar - display:none nimmt sie aus dem Tab-Lauf. */
/* Der Klick auf den Gruppenknopf oeffnet ebenfalls - global, nicht nur
unter 1026px. Ohne diese Regel wuerde der Knopf auf dem Desktop zwar
aria-expanded="true" melden, aber nichts oeffnen: der gemeldete
Zustand waere schlicht falsch. */
nav .expandable_li > .nav-gruppe[aria-expanded="true"] + .dropdown {
display: flex;
}
nav li:hover .dropdown,
nav li:focus-within .dropdown {
display: flex;
}
/* Der frühere Block `nav input[type="checkbox"] { display: none }` ist mit
dem Menue-Umbau vom 2026-08-23 entfallen - es gibt keine Checkboxen mehr,
sondern . Genau dieses display:none war die Ursache
dafuer, dass sich das Menue per Tastatur nicht oeffnen liess. */
.expandable_li {
display: flex;
justify-content: center;
align-items: center;
}
/* Burger-Button */
.toggle_button {
/* Balken bleiben 28x20, die Trefferflaeche wird per padding auf 44x44
gebracht (2026-08-23). Vorher war das Ziel 28x20 und damit klar unter
der Mindestgroesse - ausgerechnet beim einzigen Menue, das es auf dem
Handy gibt. background/border zuruecksetzen, weil es jetzt ein
ist und keine mehr. */
width: 44px;
height: 44px;
padding: 12px 8px;
background: none;
border: 0;
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 10px;
right: 20px;
display: none;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}
.bar {
height: 3px;
width: 100%;
background: var(--tigers-yellow);
border-radius: 100px;
}
/* Responsive Navbar */
@media (max-width: 1025px) {
.toggle_button {
display: flex;
}
nav .loginHeader {
padding: 0 14px;
}
nav a.logo {
font-size: 0.85rem;
}
nav ul {
height: min-content;
width: 100%;
background: #1a1a1a;
display: none;
position: absolute;
top: var(--navbar-height);
left: 0;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
gap: 0;
flex-direction: column;
/* Die Basisregel setzt `justify-content: flex-end` - waagerecht auf dem
Desktop harmlos, hier aber die Hauptachse: die Eintraege wurden ans
UNTERE Ende gedrueckt und liefen oben aus dem Kasten heraus. Was
oberhalb des Anfangs ueberlaeuft, erreicht kein Scrollen - genau
daran war das aufgeklappte Menue nicht zu bewegen. */
justify-content: flex-start;
}
nav li {
height: min-content;
min-width: 100%;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
nav ul a,
nav .expandable_li > .nav-gruppe {
padding: 16px 24px;
justify-content: flex-start;
height: auto;
border-bottom: none;
border-left: 3px solid transparent;
}
nav ul a.active {
border-bottom: none;
border-left: 3px solid var(--tigers-yellow);
}
nav li:hover > a,
nav li:hover > .nav-gruppe,
nav li:focus-within > .nav-gruppe {
border-bottom: none;
border-left: 3px solid var(--tigers-yellow);
background: var(--tigers-yellow-06);
}
.expandable_li {
display: block;
}
.expandable_li .nav-gruppe {
cursor: pointer;
display: flex;
}
.dropdown {
position: static;
width: 100%;
box-shadow: none;
border: none;
border-radius: 0;
background: rgba(0,0,0,0.3);
}
.dropdown li {
height: auto;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dropdown li a {
padding: 13px 40px;
justify-content: flex-start;
width: 100%;
}
/* Das aufgeklappte Menue scrollt in sich selbst (2026-08-24).
Die Liste steht auf `position: absolute` unter einer `position: sticky`
Leiste - sie nimmt also keinen Platz im Seitenfluss ein, die Seite wird
durch sie nicht laenger. Wer sie oeffnete und mehr Eintraege hatte, als
auf den Bildschirm passen (Admin mit allen Gruppen, seit dem
Erscheinungsbild-Schalter eine Zeile mehr), kam an das untere Ende
schlicht nicht heran: Wischen bewegte die Seite dahinter, nicht das
Menue. Deshalb eine Hoehe, die der Bildschirm hergibt, und eigener
Scroll darin. `svh` statt `vh`, weil auf dem Handy die Adressleiste
mitzaehlt; `overscroll-behavior` verhindert, dass die Seite dahinter
mitrutscht, sobald das Menue am Ende ist. */
#toggle_button[aria-expanded="true"] ~ ul {
display: flex;
max-height: calc(100vh - var(--navbar-height) - 2.6rem);
max-height: calc(100svh - var(--navbar-height) - 2.6rem);
overflow-y: auto;
overscroll-behavior: contain;
}
/* Suche links, Burger aussen (2026-08-24).
Der Burger stand absolut auf right:20px, der Suchknopf geht per
margin-left:auto ebenfalls an den rechten Rand - beide lagen 24 von
44 Pixeln uebereinander, und der Burger obenauf. Ein Klick auf die
Lupe traf damit auf dem Handy IMMER das Menue; die Suche war dort
gar nicht erreichbar. Als normales Flex-Element reiht sich der
Burger hinter der Lupe ein, beide behalten ihre 44x44. */
.toggle_button {
position: static;
top: auto;
right: auto;
margin-left: 4px;
}
/* Rechter Rand fuer den Burger, spiegelbildlich zum Logo-Abstand oben. */
nav {
padding-right: 14px;
}
}
/* Trefferflaechen im Menue auf dem Handy (2026-08-23).
Beim Menue-Umbau mitgemessen: der Burger war 28x20 und ist jetzt 44x44,
die Eintraege im Profil-Dropdown lagen aber bei 21px Hoehe - Logout auf
dem Handy war damit ein 215x21-Ziel. Nur Hoehe, keine Optik. */
@media (max-width: 1025px) {
nav .npm-item,
nav .npm-role {
min-height: 44px;
align-items: center;
}
}
.ti-cmdk-trigger {
min-width: 44px;
min-height: 44px;
}
section {
background: var(--darker-background);
background-size: cover;
height: calc(100vh - 80px);
}
h1 {
font-size: 2.5rem;
color: var(--border-color);
}
/* === Modern Web Guidance 2026: Typografie, Textumbruch & Icon-Zentrierung === */
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
p, li, blockquote, .baustein-text, .baustein-box, .baustein-karten, td, th {
text-wrap: pretty;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Exakte vertikale & horizontale Zentrierung von Symbolen/Icons in Kästchen & Buttons */
.btn-icon, .icon-box, .icon-btn, .action-btn, button i, a.btn i, .baustein-actions button, .baustein-actions a, .icon-container {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Interaktives Formular-Feedback erst nach Benutzereingabe */
input:user-invalid, select:user-invalid, textarea:user-invalid {
border-color: var(--err-border-strong, #a8302b) !important;
background-color: var(--err-bg, rgba(226,75,74,0.16));
}