/*******************************************************************************
galerien_uebersicht.css – Übersichtsseite der Fotogalerie (fotogalerie/index.html)
Plakat-Kacheln ohne Rahmen, Text über dem Bild, dunkelgrauer Hintergrund.
Body: . Basis: site.css.
Kachel: li.kachel (normal, 4:3) oder li.kachel.gross (doppelt so gross, Marcel setzt sie von Hand),
optional Neu. Titelbilder: img/.jpg (Kachel 560 x 420, gross ca. 1200 x 900).
Aufbau einer Kachel im HTML:
"gross" nur bei den grossen Kacheln
Neu optional: gelbe "Neu"-Pille oben links
Masse: "rem" = Vielfaches der Basis-Schriftgrösse (normal 16 px, also 1rem = 16 px).
"px" sind feste Bildschirmpunkte. Variablen wie --gelb, --text kommen aus site.css.
*******************************************************************************/
/* Farben der dunklen Seite: Hintergrund, Linien und "leiser" Text (grau).
Diese Variablen überschreiben die Standardwerte aus site.css, die übrigen Regeln
(und site.css selbst) benutzen sie dann automatisch. */
body.galerien {
--bg: #232323; --rand: #444; --text-leise: #b0b0b0;
--text-kachel-titel: var(--text); /* Titel der Kachel, z. B. "Frankreich" #fff */
--text-kachel-untertitel: var(--text); /* Zeile darunter, z. B. "Juli 2026 · 77 Bilder" #d0d0d0 */
}
/* ---------- Kopf ohne Bannerbild ----------
Hier gibt es kein Bild wie bei den Wanderungen, nur die Navigation und einen grossen Titel. */
/* Kleiner Abstand ganz oben. */
.seitenkopf { padding-top: 6px; }
/* Navigationszeile (Derflinger.ch links, Links rechts): 14 px Luft oben und unten. */
.seitenkopf .kopfnav { padding: 14px 0; }
.seitenkopf .kopfnav .marke { font-size: 1.05rem; letter-spacing: .02em; } /* letter-spacing = leicht weitere Buchstaben */
.seitenkopf .kopfnav a { color: var(--text); } /* Textfarbe der dunklen Seite (hell) */
/* Trenner "|" zwischen den Links (wie bei den Banner-Seiten in kopf.css):
li + li = jeder Listenpunkt, vor dem schon ein anderer steht (also nicht vor dem ersten).
::before setzt davor ein "|", mit 18 px Abstand rechts (der Abstand links kommt vom gap
der Liste) und 60 % Deckkraft, damit er dezent wirkt. */
.seitenkopf .kopfnav li + li::before { content: "|"; margin-right: 18px; opacity: .6; }
/* Titelbereich mit grossem "Fotogalerie".
clamp(min, wunsch, max) wählt eine Grösse, die mit dem Fenster mitwächst, aber nie
kleiner als min und nie grösser als max wird:
- padding oben: 6vw (= 6 % der Fensterbreite), mindestens 24 px, höchstens 56 px.
- Schrift: 7vw, mindestens 2.2rem (≈ 35 px), höchstens 4rem (64 px). */
.titelblock { padding: clamp(24px, 6vw, 56px) 0 8px; }
.titelblock h1 { margin: 0; font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1.05; letter-spacing: -.01em; }
.titelblock p { margin: 10px 0 0; color: var(--text); } /* Untertitel; keine max-width: füllt die ganze Breite und bricht erst bei schmalen Fenstern um */
/* ---------- Kachelraster ---------- */
/* Die Liste ist ein CSS-Grid; die Kacheln ordnen sich automatisch in Spalten an.
- list-style/margin/padding: Aufzählungspunkte und Standardabstände entfernen
(margin 28px oben = Abstand zum Titel).
- gap: 14px = Abstand zwischen den Kacheln.
- grid-auto-flow: dense = Lücken füllen: Wenn eine grosse Kachel nicht mehr in die Zeile
passt, rücken spätere kleine Kacheln nach vorne in die Lücke. Dadurch bleibt das Raster
ohne Löcher (die Reihenfolge kann dann leicht von der im HTML abweichen).
- repeat(auto-fill, minmax(min(100%, 280px), 1fr)): so viele Spalten, wie Platz haben,
jede mindestens 280 px breit, der Rest wird gleichmässig verteilt. min(100%, 280px)
verhindert, dass eine Spalte auf schmalen Handys breiter als der Bildschirm wird. */
.plakate {
list-style: none; margin: 28px 0 0; padding: 0;
display: grid; gap: 14px; grid-auto-flow: dense;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
/* Eine einzelne Kachel.
- position: relative: Bezugspunkt für Bild und unsichtbaren Link (absolut positioniert).
- isolation: isolate: eigener "Stapel", damit das Bild mit z-index: -1 nicht hinter den
Seitenhintergrund fällt, sondern hinter dem Text der Kachel bleibt.
- display: flex + column + justify-content: flex-end: der Textstreifen sitzt unten.
- aspect-ratio: 4 / 3: Breite zu Höhe = 4 : 3; die Höhe ergibt sich aus der Breite.
- overflow: hidden: schneidet das Bild an den abgerundeten Ecken (6 px) ab.
- background: dunkle Fläche, solange das Bild noch lädt. */
.kachel {
position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: #2e2e2e;
}
/* Titelbild: liegt als Hintergrund hinter dem Text und füllt die ganze Kachel.
- position: absolute + inset: 0: von Kante zu Kante der Kachel.
- z-index: -1: hinter dem Text (siehe isolation oben).
- object-fit: cover: Bild füllt die Fläche, Überstehendes wird abgeschnitten (nie verzerrt).
- transition: der Zoom unten läuft sanft in 0,5 Sekunden ab. */
.kachel img {
position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover;
transition: transform .5s ease;
}
/* Maus darüber (hover) oder Tastatur-Fokus auf dem Link (focus-within):
Bild vergrössert sich leicht auf 105 %. Die Kachel schneidet den Rand ab (overflow: hidden). */
.kachel:hover img, .kachel:focus-within img { transform: scale(1.05); }
/* Textstreifen unten. Bewusst NICHT positioniert (kein position:): Damit deckt der unsichtbare
Link (h2 a::after, siehe unten) die ganze Kachel ab und nicht nur den Streifen. Das Bild
liegt dank z-index: -1 trotzdem dahinter.
Der Verlauf (to top) ist unten 85 % schwarz und oben ganz durchsichtig, damit der weisse
Text auf jedem Foto lesbar ist. Der grosse padding-top (40 px) ist die Länge des Verlaufs. */
.kachel .tx {
padding: 40px 16px 14px;
background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
}
/* Titel (weiss, ohne Unterstreichung) und Zeile mit Datum/Bildanzahl (hellgrau, klein). */
.kachel h2 { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.kachel h2 a { color: var(--text-kachel-titel); text-decoration: none; }
.kachel h2 a::after { content: ""; position: absolute; inset: 0; } /* ganze Kachel klickbar */
.kachel p { margin: 2px 0 0; font-size: .85rem; color: var(--text-kachel-untertitel); }
/* ---------- Grosse Kachel (class="kachel gross") ----------
- grid-column: span 2 / grid-row: span 2: belegt 2 Spalten und 2 Zeilen, also die vierfache Fläche
(doppelt so breit und doppelt so hoch).
- aspect-ratio: auto: das feste 4:3 der normalen Kachel entfällt, die Höhe kommt aus den 2 Zeilen.
- Titel und Zeile darunter sind grösser. clamp(1.5rem, 3vw, 2.2rem) = mit dem Fenster
wachsend, aber mindestens 1.5rem (24 px) und höchstens 2.2rem (≈ 35 px). */
.kachel.gross { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.kachel.gross h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.kachel.gross p { font-size: 1.1rem; }
/* "Neu"-Pille oben links auf dem Bild: gelber Hintergrund, kleine fette Grossbuchstaben,
border-radius 999px = ganz rund. z-index: 1 liegt vor dem Bild. pointer-events: none =
Mausklicks gehen durch die Pille hindurch (die Kachel bleibt klickbar). */
.kachel .neu {
position: absolute; top: 12px; left: 12px; z-index: 1;
background: var(--gelb); color: #000; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; padding: .25em .7em; border-radius: 999px; pointer-events: none;
}
/* ---------- Schmalere Fenster: grosse Kachel anpassen ----------
Unter 900 px sind es nur noch 2 Spalten: Die grosse Kachel geht dann über die volle Breite
(beide Spalten), aber nur eine Zeile hoch, im Format 16:9 (grid-row: auto).
Unter 606 px ist es nur noch 1 Spalte: Die grosse Kachel ist wie die anderen (eine Spalte, 4:3). */
@media (max-width: 899px) {
.kachel.gross { grid-row: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 605px) {
.kachel.gross { grid-column: auto; aspect-ratio: 4 / 3; }
}
