/**
* Seiten-Shell: Kopfleiste, Hero, Inhaltsspalte, Footer.
*
* Phase 8.3 (REDESIGN.md) ist die Neuschrift dieser Datei. Vorher stand hier der
* 965px-Rahmen aus 2003 -- ein 3-Spalten-Grid (180px Wappen | 605px Inhalt |
* 180px Wappen), das auf Desktop exakt passte und auf nichts sonst: 142 von 273
* Aufnahmen der Shot-Matrix hatten horizontalen Ueberlauf, alle bei 375 und
* 768px. Ersetzt durch ein Shell, das von der schmalen Seite her gebaut ist:
*
* .site-header sticky, --brand-800, Wortmarke + Zugwappen + Navigation
* .hero Vollbreitenbild mit gruenem Verlaufs-Scrim
* .page-shell weisses Inhaltsband ueber dem grauen Seitenhintergrund
* .page zentrierte Inhaltsspalte, --width-content bzw. --width-wide
* .site-footer Zugwappen, Schuetzenlust- und Stadtwappen, Impressum/Kontakt
*
* Die beiden 180px-Wappenspalten -- zusammen ein Drittel der Seitenbreite fuer
* zwei Abzeichen -- sind in den Footer gewandert.
*
* Media Queries: dies sind die ersten im Projekt. REDESIGN.md plant sie
* eigentlich fuer 8.6, aber ein Shell kann seine Responsivitaet nicht vertagen;
* 8.6 baut auf denselben Breakpoints (40rem / 60rem) weiter.
*/
/* --- Kopfleiste --------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--brand-800);
color: var(--color-on-brand);
box-shadow: var(--shadow-md);
}
.site-header__inner {
max-width: var(--width-page);
margin-inline: auto;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2) var(--space-6);
padding: var(--space-2) var(--space-4);
}
.site-header__brand {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--color-on-brand);
text-decoration: none;
flex-shrink: 0;
}
.site-header__mark {
width: auto;
height: 2.75rem;
display: block;
}
/* Textwortmarke bis zur Lieferung der echten Fraktur-Wortmarke (s. REDESIGN.md
"Benoetigte Assets"). --font-display traegt den traditionelleren Charakter;
der Austausch gegen ein ![]()
beruehrt spaeter nur das Markup. */
.site-header__wordmark {
font-family: var(--font-display);
font-size: var(--fs-xl);
font-weight: 700;
line-height: var(--lh-tight);
letter-spacing: .01em;
white-space: nowrap;
}
.site-header__navs {
display: flex;
flex-direction: column;
gap: var(--space-1);
flex: 1 1 auto;
min-width: 0;
}
/* --- Menue-Umschalter (Phase 8.6) --------------------------------------- */
/* 8.3 hat die Navigation waagerecht scrollbar gemacht, weil Haupt- und
Mitgliedermenue zusammen bis zu 14 Eintraege haben und umbrechend fuenf Zeilen
ergaeben. Das war ausdruecklich eine Zwischenloesung: am Handy sah man drei von
sieben Eintraegen und musste raten, dass da noch etwas kommt. Jetzt klappt die
Navigation unter 40rem hinter einem Knopf auf und stapelt dann senkrecht.
Fortschrittliche Verbesserung: den Knopf schaltet js/common.js sichtbar und
setzt .has-nav-toggle am . Ohne JavaScript bleibt es beim Stand von 8.3
-- Navigation offen und scrollbar --, statt eine Navigation zu verstecken, die
niemand mehr aufklappen kann. */
.site-header__toggle {
display: none;
align-items: center;
gap: var(--space-2);
min-height: 44px;
margin-left: auto;
padding: var(--space-1) var(--space-3);
background: color-mix(in srgb, var(--color-on-brand) 12%, transparent);
/* 50% statt 35% Weiss: der Rand eines Bedienelements braucht nach WCAG 1.4.11
3:1 gegen die Flaeche daneben. Im Kontrast-Durchgang der Phase 8.8 gemessen
-- 35% ergaben 2,73:1 gegen --brand-800, 50% ergeben 4,06:1. */
border: 1px solid color-mix(in srgb, var(--color-on-brand) 50%, transparent);
border-radius: var(--radius);
color: var(--color-on-brand);
cursor: pointer;
}
.site-header__toggle:hover {
background: color-mix(in srgb, var(--color-on-brand) 20%, transparent);
border-color: var(--color-on-brand);
}
/* Drei Balken, rein dekorativ (der Knopf traegt ausserdem das Wort "Menue"). */
.site-header__toggle-bars,
.site-header__toggle-bars::before,
.site-header__toggle-bars::after {
display: block;
width: 1.25rem;
height: 2px;
background: currentColor;
}
.site-header__toggle-bars {
position: relative;
}
.site-header__toggle-bars::before,
.site-header__toggle-bars::after {
content: "";
position: absolute;
left: 0;
}
.site-header__toggle-bars::before { top: -6px; }
.site-header__toggle-bars::after { top: 6px; }
/* --- Navigation --------------------------------------------------------- */
/* Waagerecht scrollbar statt umbrechend: die Mitgliedernavigation hat bis zu
sieben Eintraege, die zusammen mit der Hauptnavigation auf 375px sonst fuenf
Zeilen ergaeben -- eine sticky Kopfleiste waere damit unbrauchbar. Auf
breiten Viewports passt alles und es erscheint keine Scrollleiste.
8.6 entscheidet, ob zusaetzlich ein Menue-Toggle noetig ist. */
.site-nav {
display: flex;
align-items: stretch;
gap: var(--space-1);
overflow-x: auto;
scrollbar-width: thin;
overscroll-behavior-x: contain;
}
.site-nav__link {
flex: 0 0 auto;
display: flex;
align-items: center;
/* 44px Mindesthoehe = Touch-Ziel nach WCAG 2.5.8 / iOS-HIG. */
min-height: 44px;
padding: 0 var(--space-3);
border-bottom: 3px solid transparent;
color: var(--color-on-brand);
text-decoration: none;
white-space: nowrap;
transition: background-color var(--transition), border-color var(--transition);
}
.site-nav__link:hover {
background: color-mix(in srgb, var(--color-on-brand) 12%, transparent);
color: var(--color-on-brand);
}
/* Aktivmarke als Unterstrich in --accent-gold statt des bisherigen
font-weight:bold -- Gold auf --brand-800 misst 4,7:1. Der fruehere gruene
Hover-Block (--color-hover) entfaellt mit dieser Datei. */
.site-nav__link.is-active {
border-bottom-color: var(--accent-gold);
font-weight: 700;
}
/* Die zweite Menuezeile (Mitgliederbereich) hatte bis Phase 8.2 keine einzige
eigene CSS-Regel -- sie stand nur im Markup (Nebenbefund 4 in REDESIGN.md).
Jetzt optisch als Unterebene erkennbar: kleiner, gedaempft, abgesetzt. */
.site-nav--member {
border-top: 1px solid color-mix(in srgb, var(--color-on-brand) 18%, transparent);
}
.site-nav--member .site-nav__link {
min-height: 40px;
font-size: var(--fs-sm);
color: color-mix(in srgb, var(--color-on-brand) 82%, var(--brand-800));
}
.site-nav--member .site-nav__link:hover,
.site-nav--member .site-nav__link.is-active {
color: var(--color-on-brand);
}
/* Auf der dunkelgruenen Flaeche ist der --brand-700-Ring aus base.css
unsichtbar -- hier die in 8.1 angekuendigte Gold-Variante. */
.site-header :focus-visible {
outline-color: var(--accent-gold);
}
/* Tastatur-Einstieg: springt die Navigation ueber. Nur sichtbar, wenn er den
Fokus hat. */
.skip-link {
position: absolute;
left: var(--space-2);
top: -4rem;
z-index: 100;
padding: var(--space-2) var(--space-4);
background: var(--color-surface);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
transition: top var(--transition);
}
.skip-link:focus {
top: var(--space-2);
}
/* --- Hero --------------------------------------------------------------- */
/* Vorher: das 605x81-Banner per width:100%;height:100% in eine 81px-Box
gestreckt. Jetzt ein echter Zuschnitt ueber object-fit, mit einem
Verlaufs-Scrim, der den Uebergang zur Kopfleiste traegt.
Das Motiv ist ein Platzhalter aus dem Bestand (500x375) -- bis das in
REDESIGN.md angeforderte Hero-Bild vorliegt, deckelt aspect-ratio die
Hochskalierung und der Scrim verdeckt sie zusaetzlich. */
/* Hoehe per clamp() statt aspect-ratio + max-height: die Kombination laesst den
Browser die BREITE schrumpfen, um das Verhaeltnis zu halten -- der Hero sass
dann bei 1440px nicht mehr ueber die volle Breite. */
.hero {
position: relative;
width: 100%;
height: clamp(11rem, 24vw, 24rem);
background: var(--brand-900);
overflow: hidden;
}
.hero__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
display: block;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
color-mix(in srgb, var(--brand-900) 55%, transparent) 0%,
color-mix(in srgb, var(--brand-900) 10%, transparent) 45%,
color-mix(in srgb, var(--brand-900) 35%, transparent) 100%
);
}
/* --- Inhalt ------------------------------------------------------------- */
.page-shell {
background: var(--color-surface);
}
/* Phase 8.8: hier stand bis zuletzt ein "text-align: center" -- der Rest des
nicht standardisierten text-align:-webkit-center, das bis 8.3 die halbe Seite
zentrierte (Nebenbefund 16). 8.5 bis 8.7 haben jedes Fragment auf eine
Komponente mit eigener Ausrichtung umgestellt; die Regel ist damit
gegenstandslos und ersatzlos entfallen. Gegenprobe: keine Aufnahme der
Shot-Matrix zeigt danach linksbuendigen Text, der zentriert sein sollte, und
umgekehrt.
Ein zentrierter Rest bleibt bewusst: die Fusszeile (.site-footer__inner) und
einzelne .text-center-Stellen, die es ausdruecklich wollen. */
.page {
max-width: var(--width-content);
margin-inline: auto;
padding: var(--space-8) var(--space-4);
/* Bezugsrahmen fuer das Wasserzeichen (s. .page::before) und eigener
z-index-Kontext, damit dessen negativer z-index nicht aus .page ausbricht. */
position: relative;
isolation: isolate;
}
/* Wasserzeichen. Bis 8.3 ein Inline-style="background-image:..." am ,
ungesteuert in Originalgroesse oben links; seit 8.3 gedeckelt, oben mittig,
ohne Wiederholung.
Phase 8.8 (Nebenbefund 20): als eigene Ebene mit Opazitaet statt als
background-image direkt. Voll gedeckt war es auf inhaltsarmen Seiten
(Mitglieder, Login, Startseite) deutlicher zu sehen als der Inhalt davor -- ein
background-image laesst sich nicht abschwaechen, eine eigene Ebene schon. */
.page::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: url("../img/nsl_bg.jpg");
background-repeat: no-repeat;
background-position: top center;
background-size: min(100%, 605px) auto;
opacity: .35;
pointer-events: none;
}
.page--wide {
max-width: var(--width-wide);
}
/* Popup-Fenster (news_details.php seit 8.5, die sechs Forum-Popups in 8.7) und
die drei statischen Fehlerseiten. Sie haben keine Kopfleiste und keinen Hero,
sondern nur Inhalt -- ohne .page haengte der seit 8.1 (body{margin:0}) direkt
an der Fensterkante (Nebenbefund 15). Das Wasserzeichen entfaellt hier: in
einem 500px-Fenster wuerde es den Text ueberdecken statt die Flaeche zu
tragen. */
.page--popup {
max-width: var(--width-content);
padding: var(--space-6) var(--space-4);
}
/* Kein Wasserzeichen im Popup: in einem 500px-Fenster wuerde es den Text
ueberdecken statt die Flaeche zu tragen. */
.page--popup::before {
content: none;
}
/* --- Footer ------------------------------------------------------------- */
.site-footer {
background: var(--brand-900);
color: color-mix(in srgb, var(--color-on-brand) 85%, var(--brand-900));
}
.site-footer__inner {
max-width: var(--width-page);
margin-inline: auto;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-6);
padding: var(--space-8) var(--space-4);
text-align: center;
}
/* Die beiden Fremdwappen (Neusser Schuetzenlust, Stadt Neuss) sassen bis 8.3
in je einer 180px-Spalte links und rechts des Inhalts. */
.site-footer__crest img {
height: 4rem;
width: auto;
display: block;
}
.site-footer__text {
flex: 1 1 16rem;
font-size: var(--fs-sm);
line-height: var(--lh-base);
}
.site-footer__text p {
margin: 0 0 var(--space-1);
}
.site-footer a {
color: var(--color-on-brand);
}
.site-footer a:hover {
color: var(--accent-gold);
}
.site-footer :focus-visible {
outline-color: var(--accent-gold);
}
/* --- Forum -------------------------------------------------------------- */
/* forum/forum.php teilt sich seit 8.3 dasselbe Shell. Was hier bleibt, ist nur
noch die Brotkrumenzeile; der eigene 735px-Rahmen mit eigenem Banner (100px
statt 81px), eigener Nav-Breite (100px statt 86px), ohne Aktivzustand und
ohne Footer ist entfallen. */
.forum-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-1);
min-height: 30px;
margin-bottom: var(--space-4);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--color-border-strong);
font-size: var(--fs-sm);
text-align: left;
}
/* --- Breakpoints -------------------------------------------------------- */
/* Unter 40rem: Kopfleiste kompakter, Hero flacher, Inhalt bis an den Rand,
Navigation hinter dem Menue-Knopf. */
@media (max-width: 39.999rem) {
.has-nav-toggle .site-header__toggle {
display: inline-flex;
}
/* Der Knopf steht im Markup unmittelbar vor .site-header__navs -- deshalb
reicht der Geschwister-Selektor und es braucht keine zweite Klasse, die JS
umschalten muesste. */
.has-nav-toggle .site-header__navs {
display: none;
}
.has-nav-toggle .site-header__toggle[aria-expanded="true"] + .site-header__navs {
display: flex;
flex-basis: 100%;
}
/* Aufgeklappt senkrecht statt waagerecht scrollbar. */
.has-nav-toggle .site-nav {
flex-direction: column;
overflow-x: visible;
}
.has-nav-toggle .site-nav__link {
border-bottom: none;
border-left: 3px solid transparent;
}
.has-nav-toggle .site-nav__link.is-active {
border-left-color: var(--accent-gold);
}
.site-header__inner {
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
}
.site-header__mark {
height: 2.25rem;
}
.site-header__wordmark {
font-size: var(--fs-lg);
}
.hero {
height: clamp(8rem, 40vw, 12rem);
}
.page {
padding: var(--space-6) var(--space-3);
}
.site-footer__inner {
padding: var(--space-6) var(--space-3);
gap: var(--space-4);
}
.site-footer__crest img {
height: 3rem;
}
}
/* Ab 60rem steht die Wortmarke neben der Navigation statt darueber. */
@media (min-width: 60rem) {
.site-header__navs {
align-items: flex-end;
}
}