:root{
  --bg:#101010; --fg:#f2f2f2; --muted:#9a9a9a; --accent:#c9835a;
  --gap:6px;
  --font-display:Georgia,"Iowan Old Style","Palatino Linotype","Book Antiqua",serif;
}
/* Sanftes Ueberblenden beim Wechsel zwischen Seiten statt hartem Umspringen.
   Browser ohne Unterstuetzung ignorieren die Regel einfach - dann verhaelt
   sich die Seite exakt wie bisher. */
@view-transition{navigation:auto}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Die Seite ist mindestens so hoch wie das Fenster, und 'main' nimmt den
   Rest ein. Sonst schwebte die Fusszeile auf kurzen Seiten (Fehlerseite)
   mitten im Bild, und darunter begann der Farbverlauf des Hintergrunds von
   vorn - er wiederholte sich, weil die Seite kuerzer war als das Fenster.
   'no-repeat' plus Grundfarbe verhindert das zusaetzlich. */
body{
  background:radial-gradient(ellipse 1200px 700px at 50% -10%, #1b1917 0%, var(--bg) 55%) no-repeat var(--bg);
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
}
a{color:inherit;text-decoration:none}
/* Tastaturbedienung sichtbar machen: Wer mit der Tabulatortaste navigiert,
   muss erkennen koennen, wo er gerade steht. :focus-visible zeigt die
   Markierung nur bei Tastatur, nicht bei Mausklick. */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;border-radius:2px
}
.gallery a:focus-visible,.gallery-hero:focus-visible,.project-grid a:focus-visible{
  outline:3px solid var(--accent);outline-offset:-3px
}
header.site{
  position:sticky; top:0; z-index:20;
  background:rgba(16,16,16,.78);
  border-bottom:1px solid #262626;
  transition:background .3s ease, box-shadow .3s ease;
}
/* Der Weichzeichner sitzt BEWUSST erst im gescrollten Zustand.
   Grund: Ganz oben liegt die Kopfzeile ueber dem Titelbild, und das zoomt
   28 Sekunden lang. Ein backdrop-filter muss seinen Hintergrund in jedem
   Einzelbild neu weichzeichnen - bei bewegtem Hintergrund also ununterbrochen.
   Das hat das Titelbild sichtbar ruckeln lassen. Sobald gescrollt ist, steht
   hinter der Leiste ruhiger Inhalt und der Effekt kostet fast nichts. */
header.site.scrolled{
  background:rgba(16,16,16,.92);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}
/* Ohne Weichzeichner-Unterstuetzung bleibt die Kopfzeile deckend lesbar */
@supports not (backdrop-filter:blur(1px)){
  header.site,header.site.scrolled{background:rgb(16,16,16)}
}
.nav-wrap{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.brand{font-size:1.3rem;font-weight:400;display:inline-flex;align-items:baseline;transition:opacity .3s ease,visibility .3s;font-family:var(--font-display)}
.brand:hover{opacity:.85}
.brand-mark{color:var(--accent);margin-right:2px}
.brand-text{letter-spacing:.08em}
.brand-logo{display:block;width:auto}
/* 30 statt 22 Pixel: Bei 22 war die Schrift im Kasten des Logos rund 8 Pixel
   hoch und nicht zu lesen. Die Datei dazu ist eine eigene, scharf
   gerechnete kleine Fassung (logo-kopf.png, siehe Save-LogoAsset). */
.brand-logo-nav{height:30px}
/* Auf der Startseite steht die Marke gross im Titelbild. Die kleine in der
   Kopfzeile kommt erst dazu, wenn das Titelbild weggescrollt ist - zweimal
   dieselbe Marke auf einen Blick ist einmal zu viel. site.js setzt dafuer
   'titel-weg'. Ohne Skript oder ohne :has() bleibt sie wie bisher stehen. */
.js body:has(.hero-cover):not(.titel-weg):not(.menu-open) header.site .brand{opacity:0;visibility:hidden}
.brand-logo-hero{height:auto;width:min(60%,380px)}
nav.main-nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0}
nav.main-nav a{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:4px 2px;border-bottom:2px solid transparent;transition:color .2s ease,border-color .2s ease}
nav.main-nav a.active,nav.main-nav a:hover{color:var(--fg);border-bottom-color:var(--accent)}
.nav-toggle{display:none;background:none;border:0;color:var(--fg);font-size:1.6rem;cursor:pointer}
main{max-width:1400px;margin:0 auto;padding:20px;width:100%;flex:1 0 auto}
.kicker{display:block;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin:24px 0 8px}
/* Nennt die Zeile die Seite, zu der ein Bereich gehoert, fuehrt sie dorthin
   zurueck. Nur so breit wie ihr Text, sonst waere die ganze Zeile klickbar. */
a.kicker{width:max-content;max-width:100%;transition:color .2s ease}
a.kicker:hover{color:var(--fg)}
/* Titelbild fast bildschirmfuellend: der Besucher wird vom Foto empfangen,
   nicht von einem Bild in Briefmarkengroesse. Der Beschnitt bleibt moderat,
   weil die Hoehe begrenzt ist (88% der Bildschirmhoehe). */
.hero-cover{position:relative;display:block;overflow:hidden;background:#1a1a1a;margin:0 0 28px;height:88vh;height:88svh}
.hero-cover > img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:52% 48%;animation:heroZoom 28s linear both;will-change:transform}
/* Sehr langsamer Zoom - bewusst kaum wahrnehmbar, wirkt nur lebendig.
   Zwei Dinge daran sind nicht beliebig:
   'linear' statt 'ease-out', weil ease-out den langsamsten Teil ans Ende legt -
   und genau dort, bei Bruchteilen eines Bildpunktes pro Einzelbild, wird aus
   langsamer Bewegung sichtbares Stocken.
   'will-change:transform' hebt das Bild auf eine eigene Zeichenebene, damit die
   Vergroesserung mit Zwischenwerten berechnet wird statt auf ganze Bildpunkte
   gerundet. site.js nimmt den Hinweis nach dem Ende wieder weg - er kostet
   dauerhaft Speicher. */
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.075)}}
/* Logo/Schriftzug steigt beim Laden sanft auf */
.hero-overlay > *{animation:heroRise 1.1s cubic-bezier(.22,.61,.36,1) both}
.hero-overlay > *:nth-child(2){animation-delay:.18s}
@keyframes heroRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* Hinweis zum Weiterscrollen - bei bildschirmfuellendem Titelbild wichtig,
   damit klar ist, dass darunter noch Inhalt kommt */
.hero-scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:26px;height:26px;opacity:.75;animation:heroNudge 2.4s ease-in-out infinite}
.hero-scroll::before{content:"";display:block;width:12px;height:12px;margin:0 auto;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
@keyframes heroNudge{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}
.hero-overlay{position:absolute;left:0;right:0;bottom:0;padding:6% 5% 5%;background:linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 100%);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hero-brand{font-family:var(--font-display);font-weight:400;font-size:clamp(2.1rem,7vw,4.6rem);line-height:1.05;color:#fff}
.hero-brand .brand-mark{color:var(--accent)}
.hero-tagline{font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.page-title{font-family:var(--font-display);font-size:2.3rem;font-weight:400;letter-spacing:.01em;text-transform:uppercase;margin:0 0 26px;color:var(--fg)}
.intro-text{max-width:58ch;font-family:var(--font-display);font-size:1.5rem;font-weight:400;line-height:1.4;color:var(--fg);margin:8px 0 0}
/* Das Trennzeichen aus den Logos der Marke: Linie - Punkt - Linie. Vorher
   stand hier ein schlichter Strich; so spricht die Seite dieselbe Sprache
   wie das Logo, ohne eine neue Farbe oder Schrift. */
.intro-rule{width:118px;height:9px;border:0;margin:22px 0 32px;
  background:radial-gradient(circle, var(--accent) 3.5px, transparent 4px) center/9px 9px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left center/45px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right center/45px 1px no-repeat}
.page-text{max-width:70ch;color:#cfcfcf;margin-bottom:24px}
/* Auf dem Handy nur zwei Spalten: bei drei waeren die Bilder auf einem
   375 Pixel breiten Bildschirm nur noch rund 110 Pixel breit - Gesichter
   sind darin kaum zu erkennen. Ab Tablet-Breite wieder drei (siehe unten). */
/* HIER BITTE NIE WIEDER column-count EINSETZEN.
   Ein Spaltenlayout (column-count) hat auf dem iPhone einen hartnaeckigen
   Fehler ausgeloest: WebKit berechnet die Trefferflaechen aller Bilder ab der
   ZWEITEN Spalte falsch. Die Bilder werden angezeigt, reagieren aber auf
   keinen Tipp - linke Spalte geht, rechte nicht. Das laesst sich nicht durch
   einzelne Eigenschaften umgehen (versucht wurden column-span und clip-path),
   der Fehler steckt im Spaltenumbruch selbst.
   Stattdessen baut site.js echte Spalten-<div>s und verteilt die Bilder
   darauf. Das sind gewoehnliche Bloecke - kein Umbruch, keine verrutschten
   Trefferflaechen, auf jedem Geraet. */
.gallery{display:block}
.gallery.spalten{display:flex;align-items:flex-start;gap:var(--gap)}
.gallery-spalte{flex:1 1 0;min-width:0}
/* touch-action:manipulation nimmt dem Browser das Warten auf einen
   moeglichen Doppeltipp - der Tipp wird sofort ausgeloest statt nach
   ca. 300 ms. cursor:pointer signalisiert am Rechner die Anklickbarkeit. */
.gallery a, .gallery-hero{display:block;overflow:hidden;background:#1a1a1a;break-inside:avoid;margin:0 0 var(--gap);touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:rgba(201,131,90,.25)}
/* Bild 1 steht als eigener Block NEBEN dem Spaltenlayout, nicht darin -
   column-span:all wuerde die Trefferauswertung auf iPhones zerstoeren
   (siehe ausfuehrlicher Kommentar bei Get-GalleryHtml). */
.gallery-hero{width:100%}
/* Bild 1 laeuft ueber die VOLLE Breite - so wie das Titelbild der Startseite.
   Am 27.09.2026 war es zwischenzeitlich auf die Fensterhoehe begrenzt, damit
   es ohne Scrollen ganz zu sehen ist. Das sah ungleich aus, und zwar aus
   einem Grund, der sich nicht wegrechnen laesst: Das Titelbild wird
   ZUGESCHNITTEN (object-fit:cover) und bleibt deshalb immer randfuellend;
   Bild 1 wird nicht zugeschnitten und musste zum Einhalten derselben Hoehe
   schmaler werden - bei 1440x900 gemessen 1065 gegen 1360 Pixel, also 22
   Prozent schmaler bei gleicher Unterkante.
   Rolf hat sich am 27.09.2026 ausdruecklich fuer die volle Breite
   entschieden, auch wenn das Foto dann unten ueber den Fensterrand hinausgeht
   (Portraits: Unterkante 1067 statt 870). Wer die Begrenzung wieder einbauen
   will, braucht dafuer seine Zustimmung.
   Das Seitenverhaeltnis --sv steht weiterhin am Bild (siehe
   Get-BildEinsStil): Der Vorgeschmack ueber der Passwortabfrage
   (.gate-vorschau) braucht es, und beide Fassungen erzeugen dasselbe HTML. */
.gallery-hero img{width:100%;height:auto;display:block;transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.gallery-hero:hover img{transform:scale(1.045)}
.gallery-desc{margin:0 0 28px}
/* Textbehaelter werden immer erzeugt, auch wenn (noch) kein Text darin steht -
   der Bearbeitungsbereich auf dem Server braucht die Stelle. Leer sollen sie
   aber keinen Platz einnehmen. Kommentare zaehlen fuer ':empty' nicht als
   Inhalt, die Markierungen stoeren also nicht. */
.gallery-desc:empty,.middle-text:empty,.below-gallery-text:empty{display:none}
.gallery-desc p{max-width:70ch;color:#cfcfcf;margin:0 0 1em}
.gallery-desc p:last-child{margin-bottom:0}
.below-gallery-text{max-width:70ch;color:#cfcfcf;margin:28px 0 0}
.below-gallery-text p{margin:0 0 1em}
.below-gallery-text p:last-child{margin-bottom:0}
/* Seitentext Mitte: unterbricht die Bilderstrecke bewusst und hebt sich
   durch Serifenschrift und Groesse von den beiden anderen Textstellen ab. */
.middle-text{max-width:62ch;margin:46px auto;padding:0 4px;text-align:center}
.middle-text p{font-family:var(--font-display);font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.5;color:var(--fg);margin:0 0 .7em}
.middle-text p:last-child{margin-bottom:0}
/* Seite ganz ohne Fotos - dann tragen die Texte die Seite allein.
   Hier wird der mittlere Text linksbuendig gesetzt: zentriert wirkt er
   zwischen Bildern richtig, als alleiniger Seiteninhalt waere laengerer
   Fliesstext so aber schlecht lesbar. */
.text-page{margin:0 0 40px}
.text-page .middle-text{margin:8px 0 0;text-align:left;max-width:70ch}
.text-page .below-gallery-text:first-child{margin-top:0}
.gallery img{width:100%;height:auto;display:block}
/* Rechtstexte (Impressum, Datenschutz). Zwei Dinge, die vorher fehlten:
   eine begrenzte Zeilenlaenge - ueber rund 70 Zeichen findet das Auge beim
   Ruecksprung die naechste Zeile nicht mehr sicher - und sichtbare
   Zwischenueberschriften. Wie die erkannt werden: ConvertTo-RechtstextHtml. */
.rechtstext{max-width:70ch}
.rechtstext p{margin:0 0 1.15em}
.rechtstext p:last-child{margin-bottom:0}
.rechtstext h2{font-family:var(--font-display);font-size:1.3rem;font-weight:400;line-height:1.3;margin:2em 0 .6em}
.rechtstext h2:first-child{margin-top:0}
/* Keine einzelnen Woerter in der letzten Zeile. Am Handy stand "Fotos." der
   Begruessung allein in einer Zeile, in der Fusszeile ";-)". 'balance'
   verteilt kurze Texte gleichmaessig auf ihre Zeilen, 'pretty' schuetzt bei
   Absaetzen nur das Ende. Browser, die beides nicht kennen, brechen wie
   bisher um. */
.page-title,.intro-text,.middle-text p,.blog-titel,.rechtstext h2,.gate-form label,.gate-hinweis,.grid-hinweis,footer.site .foot-text p{text-wrap:balance}
.gallery-desc p,.below-gallery-text p,.page-text,.rechtstext p,.blog-anriss{text-wrap:pretty}
/* Verweis mitten im Fliesstext (Fehlerseite). Er bricht nicht um - vorher
   stand am Zeilenende ein unterstrichenes Leerzeichen. */
.text-link{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
/* Bilder werden beim Hineinscrollen sanft eingeblendet - bewusst nur ueber
   'opacity' am <img>, weil das die Geometrie des Bildes nicht antastet. */
.js .gallery a img{opacity:0;transition:opacity 1.1s cubic-bezier(.22,.61,.36,1)}
.js .gallery a.in-view img{opacity:1}
/* Bild 1 liegt ausserhalb von .gallery und wird daher gar nicht erst
   ausgeblendet - es ist das erste, was man von der Seite sieht. */
/* Langsames Heranzoomen beim Ueberfahren mit der Maus - das umgebende <a>
   hat overflow:hidden, das Bild bleibt also sauber im Rahmen. */
.gallery a img{transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.gallery a:hover img{transform:scale(1.045)}
/* Aus demselben Grund wie oben kein column-count. Die Kacheln sind gleich
   breit, deshalb reicht hier ein einfaches Raster ohne Zutun von site.js. */
.project-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  align-items:start;
  margin-top:8px;
}
.project-grid a{display:block;margin:0}
.project-grid img{width:100%;height:auto;display:block;background:#1a1a1a}
/* Eigener Rahmen um das Kachelbild: nur er schneidet den Hover-Zoom ab,
   damit das Textlabel darunter nicht ueberdeckt wird. */
.tile-frame{display:block;overflow:hidden;background:#1a1a1a}
.tile-frame img{transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.project-grid a:hover .tile-frame img{transform:scale(1.05)}
.project-tile-label{display:block;margin-top:12px;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .2s ease}
.project-grid a:hover .project-tile-label{color:var(--accent)}
.project-tile-locked{display:flex;align-items:center;justify-content:center;min-height:140px;background:#1a1a1a;border:1px dashed #333}
.project-tile-locked .project-tile-label{margin-top:0;text-align:center;padding:0 16px}
/* Sind alle Kacheln geschuetzt, steht das EINMAL darueber statt an jeder.
   Sonst ein leiser Vermerk an der einzelnen Kachel. */
.grid-hinweis{margin:18px 0 14px;font-size:.9rem;color:var(--muted)}
.tile-schutz{margin-left:.6em;font-size:.8em;opacity:.7}

/* --- Blog ---------------------------------------------------------------
   Eine Liste statt eines Rasters: Ein Blog wird von oben nach unten gelesen,
   nicht ueberflogen wie eine Projektauswahl. Deshalb bekommt jeder Eintrag
   eine ganze Zeile, mit Bild und Text nebeneinander, sobald Platz ist.

   Geklickt werden kann die ganze Karte, im Quelltext steht dafuer aber nur
   EIN Verweis (auf der Ueberschrift), der per ::after ueber die Karte gelegt
   wird. Drei Verweise auf dasselbe Ziel - Bild, Titel, "Weiterlesen" - liest
   eine Vorlesehilfe dreimal hintereinander vor. */
.blog-liste{display:flex;flex-direction:column;gap:0;margin-top:8px}
.blog-eintrag{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  padding:32px 0;
  border-top:1px solid #262626;
}
.blog-eintrag:first-child{border-top:0;padding-top:8px}
/* Festes Seitenverhaeltnis fuer die Vorschau. Ohne das wird aus einem
   Hochformat eine anderthalb Mal so hohe Karte wie aus einem Querformat, und
   die Liste bekommt einen unruhigen Rhythmus. Das vollstaendige Bild steht
   ungeschnitten auf der Seite des Eintrags. */
.blog-bild{display:block;overflow:hidden;background:#1a1a1a}
.blog-bild img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center;height:auto;display:block;transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.blog-eintrag:hover .blog-bild img{transform:scale(1.04)}
.blog-inhalt{min-width:0}
.blog-datum{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.blog-titel{font-family:var(--font-display);font-size:1.6rem;font-weight:400;line-height:1.25;margin:0 0 10px;color:var(--fg)}
/* Der Verweis auf der Ueberschrift deckt die ganze Karte ab. */
.blog-titel a::after{content:"";position:absolute;inset:0}
.blog-eintrag:hover .blog-titel{color:var(--accent)}
/* Das kleine Merkmal steht in der Ueberschrift und wuerde sonst deren
   Serifenschrift erben - in 0,68rem sieht das nach Druckfehler aus. */
.blog-schutz{font-family:inherit;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap;vertical-align:middle}
.blog-titel .blog-schutz{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.blog-anriss{max-width:62ch;color:#cfcfcf;margin:0 0 12px}
.blog-mehr{display:inline-block;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .2s ease}
.blog-eintrag:hover .blog-mehr{color:var(--accent)}
.blog-leer{color:var(--muted);margin:8px 0 0}
/* Auf der Seite eines einzelnen Eintrags steht das Datum unter der
   Ueberschrift - dort mit etwas mehr Luft nach unten als in der Liste. */
.page-title + .blog-datum{margin:-14px 0 26px}

/* Passwort-Gate: ersetzt den nativen Browser-Basic-Auth-Dialog durch ein
   seiteneigenes Formular (siehe site.js) - der eigentliche Schutz bleibt
   serverseitig ueber Apache Basic-Auth bestehen. */
/* Bild 1 darf volle Breite einnehmen, das Formular darunter bleibt schmal */
.password-gate{margin:0 0 40px}
.gate-vorschau{width:100%;margin:0 0 22px;cursor:default}
/* Der Vorgeschmack darf das Passwortfeld nicht aus dem ersten Blick
   schieben. Vorher fuellte er auf Laptops (1366x768, 1440x900, 1536x864)
   das ganze Fenster, und das Feld kam erst nach dem Scrollen. Abgezogen
   werden Kopfzeile, Ueberschrift und das Formular. */
.gate-vorschau{max-width:min(100%, max(18rem, calc((100vh - 360px) * var(--sv))));margin-inline:auto}
.gate-vorschau img{width:100%;height:auto;display:block}
/* Der duenne Rahmen ist der der Logos. Feld und Knopf gleich hoch - vorher
   war der Knopf 7 Pixel niedriger und stand in Arial, weil Knoepfe ihre
   Schrift nicht von der Seite erben. */
.gate-form{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;max-width:460px;padding:20px 22px;border:1px solid rgba(201,131,90,.45)}
.gate-form label{width:100%;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.gate-form input[type="password"]{flex:1 1 200px;min-height:44px;background:#1a1a1a;border:1px solid #333;color:var(--fg);padding:10px 12px;font-size:.95rem;font-family:inherit}
/* Kein outline:none ohne Ersatz - die Markierung kommt von der Regel oben */
.gate-form input[type="password"]:focus{border-color:var(--accent)}
.gate-form button{font:inherit;min-height:44px;background:var(--accent);color:#151005;border:0;padding:10px 22px;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.gate-form button:hover{opacity:.85}
.gate-error{width:100%;color:#e08a6e;font-size:.85rem;margin:2px 0 0}
/* Ohne diesen Hinweis ist die Seite fuer jeden ohne Passwort eine Sackgasse:
   kein Wort dazu, worum es geht oder wie man hineinkommt. */
.gate-hinweis{margin:16px 0 0;max-width:460px;font-size:.9rem;color:var(--muted)}
/* Auswahl und Herunterladen in geschuetzten Bereichen. Erscheint erst nach
   richtigem Passwort - site.js baut die Leiste dann ein. */
.auswahlleiste{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
.auswahlleiste button{background:transparent;color:var(--fg);border:1px solid #333;border-radius:2px;
padding:8px 16px;font:inherit;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.auswahlleiste button:hover{border-color:var(--accent);color:var(--accent)}
.auswahlleiste button:disabled{opacity:.4;cursor:default;border-color:#333;color:var(--muted)}
.auswahlleiste .auswahl-laden{background:var(--accent);color:#151005;border-color:var(--accent)}
.auswahlleiste .auswahl-laden:hover:not(:disabled){opacity:.88;color:#151005}
.auswahl-zahl,.auswahl-status{font-size:.85rem;color:var(--muted)}
/* Im Auswahlmodus soll auf einen Blick klar sein, was gewaehlt ist und was
   nicht. Deshalb wird das NICHT Gewaehlte abgedunkelt - nicht umgekehrt:
   die Aufmerksamkeit gehoert den ausgewaehlten Fotos.
   Bewusst nur Deckkraft, Rahmen und Ueberlagerung - kein filter, kein
   transform. In dieser Galerie hat sich schon einmal geraecht, was eine
   eigene Zeichenebene aufmacht (siehe Hinweis oben bei .gallery).
   Die Klasse sitzt auf der Fotostrecke, nicht auf .gallery - deshalb hier
   kein .gallery davor. Das war zuerst falsch, und dann griff keine Regel. */
.auswahlmodus a[data-datei]{position:relative;cursor:copy}
.auswahlmodus a[data-datei]::before{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(0,0,0,.62);transition:background .12s ease}
.auswahlmodus a[data-datei].gewaehlt::before{background:transparent;box-shadow:inset 0 0 0 4px var(--accent)}
.auswahlmodus a[data-datei]::after{content:"";position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.9);background:rgba(0,0,0,.5);pointer-events:none;display:grid;place-items:center;font-size:11px;line-height:1;font-weight:700;letter-spacing:.02em;color:transparent}
.auswahlmodus a[data-datei].gewaehlt::after{content:"OK";background:var(--accent);border-color:var(--accent);color:#151005}
.gate-loading{width:100%;color:var(--muted);font-size:.85rem;margin:2px 0 0}
/* Der Innenabstand sitzt am Innenblock, genau wie bei 'main'. Vorher sass er
   aussen, und auf Bildschirmen ab 1440 Pixel Breite stand die Fusszeile
   20 Pixel links neben der Kante der Fotos. */
footer.site{border-top:1px solid #262626;margin-top:40px;padding:24px 0;color:var(--muted);font-size:.82rem}
footer.site .foot-wrap{max-width:1400px;margin:0 auto;padding:0 20px;display:flex;flex-direction:column;gap:14px}
footer.site .foot-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
footer.site .foot-brand .brand-mark{color:var(--accent)}
footer.site .foot-contact{display:flex;flex-wrap:wrap;gap:18px}

/* --- Dokumente (PDF) ------------------------------------------------------
   Steht UNTER der Bilderstrecke, nicht darin - site.js faengt innerhalb von
   .fotostrecke jeden Verweis ab und wuerde ein PDF in die Grossansicht laden
   statt es zu oeffnen. */
.dokumente{display:flex;flex-wrap:wrap;gap:12px}
/* ZWINGEND: Ein eigenes 'display' ueberstimmt die eingebaute Regel
   [hidden]{display:none}. Ohne diese Zeile stuende die PDF-Karte eines
   geschuetzten Bereichs sichtbar auf der Seite, obwohl der Block als
   'hidden' ausgeliefert wird. */
.dokumente[hidden]{display:none}
/* Eckig wie die Rahmen der Logos - vorher mit runden Ecken. */
.dokumente .dokument{
  display:flex;align-items:center;gap:12px;margin-top:28px;
  padding:12px 16px;border:1px solid #2e2e2e;border-radius:0;
  background:#161616;
  transition:border-color .2s ease, background .2s ease;
}
.dokumente .dokument:hover{border-color:var(--accent);background:#1c1a19}
.dokumente .dok-art{
  font-size:.7rem;letter-spacing:.08em;font-weight:600;
  color:var(--bg);background:var(--accent);padding:3px 7px;border-radius:0;
}
.dokumente .dok-name{font-size:.95rem}
.dokumente .dok-groesse{font-size:.8rem;color:var(--muted)}
/* Hinweis, wenn eine Datei auf dem Server fehlt - eine eigene Zeile
   unter den Karten, nicht eine Karte mehr in der Reihe. */
.dokumente .dok-hinweis{flex-basis:100%;margin:14px 0 0;font-size:.85rem;color:var(--muted)}
@media (max-width:600px){
  .dokumente{flex-direction:column}
  .dokumente .dokument{margin-top:0}
  .dokumente .dokument:first-child{margin-top:28px}
}
/* Der frei eingegebene Text. Etwas heller und groesser als der Rest der
   Fusszeile: Er ist Inhalt, nicht Beiwerk wie Impressum und Jahreszahl.

   KEINE Breitenbegrenzung. Hier stand zuerst 'max-width:70ch', uebernommen
   vom Fliesstext im Seiteninhalt. Das war falsch: In der Fusszeile stehen
   1385 px zur Verfuegung, die Begrenzung schnitt aber schon bei 555 px ab -
   ein Satz von 90 Zeichen brach dadurch mitten entzwei, obwohl mehr als
   doppelt so viel Platz da war. Ein Fliesstext im Seiteninhalt wird gelesen
   wie ein Absatz und braucht ein enges Mass; die Fusszeile ist eine Zeile
   unter der Seite und richtet sich nach deren Breite - wie die Zeile mit
   dem Urheberrecht daneben auch. Wer selbst umbrechen will, laesst im
   Eingabefeld eine Leerzeile: Daraus wird ein zweiter Absatz. */
footer.site .foot-text{color:#cfcfcf;font-size:.92rem}
footer.site .foot-text p{margin:0 0 .6em}
footer.site .foot-text p:last-child{margin-bottom:0}
footer.site a:hover{color:var(--accent)}
.legal-page main{max-width:800px}
.legal-page h1{font-size:1.5rem;font-weight:300;letter-spacing:.01em}
.legal-page p{color:#d5d5d5;white-space:pre-wrap}

/* Lightbox */
/* Sichtbarkeit ueber opacity/visibility statt display:none - nur so laesst
   sich das Oeffnen und Schliessen weich ueberblenden. */
/* WICHTIG: pointer-events:none, solange die Grossansicht zu ist.
   Sie liegt als bildschirmfuellende Flaeche ueber der ganzen Seite. Ohne
   diese Zeile haengt es allein daran, dass der Browser visibility:hidden
   auch beim Antippen beruecksichtigt - Safari/WebKit tut das in Verbindung
   mit einer Ueberblendung nicht zuverlaessig und verschluckt dann JEDEN
   Fingertipp auf der Seite. */
/* Deckend: Durch den durchscheinenden Grund stand am Handy das Menue-Symbol
   der Kopfzeile sichtbar hinter dem Schliessen-Kreuz. */
.lightbox{position:fixed;inset:0;background:#060606;display:flex;align-items:center;justify-content:center;z-index:100;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s}
.lightbox.open{opacity:1;visibility:visible;pointer-events:auto}
.lightbox img{max-width:92vw;max-height:82vh;object-fit:contain;transform:scale(.94);transition:transform .34s cubic-bezier(.22,.61,.36,1);touch-action:pan-y}
.lightbox.open img{transform:scale(1)}
/* Waehrend die Lightbox offen ist, darf die Seite dahinter nicht mitscrollen */
body.lb-open{overflow:hidden}
/* z-index ist Pflicht: Das Foto hat ein transform und damit eine eigene
   Ebene. Der Zurueck-Knopf steht im Quelltext VOR dem Foto und lag deshalb
   am Handy bei jedem Querformat darunter - zu sehen war nur "weiter".
   Der dunkle Grund mit duennem Rahmen haelt die Knoepfe auch ueber einem
   hellen Himmel sichtbar. */
.lightbox .lb-close,.lightbox .lb-prev,.lightbox .lb-next{
  position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;margin:0;
  background:rgba(10,10,10,.55);border:1px solid rgba(242,242,242,.22);border-radius:0;
  color:#eee;font:inherit;font-size:1.3rem;line-height:1;cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.lightbox .lb-close:hover,.lightbox .lb-prev:hover,.lightbox .lb-next:hover{color:var(--accent);border-color:var(--accent);background:rgba(10,10,10,.8)}
.lightbox .lb-close{top:12px;right:12px}
.lightbox .lb-prev{left:10px;top:50%;transform:translateY(-50%)}
.lightbox .lb-next{right:10px;top:50%;transform:translateY(-50%)}
.lightbox .lb-caption{color:var(--muted);font-size:.8rem;margin-top:10px}

@media (prefers-reduced-motion:reduce){
  .js .gallery a img{opacity:1;transition:none}
  .gallery img,.tile-frame img,.blog-bild img{transition:none}
  .gallery a:hover img,.project-grid a:hover .tile-frame img,.blog-eintrag:hover .blog-bild img{transform:none}
  header.site{transition:none}
  .hero-cover > img{animation:none;transform:none}
  .hero-overlay > *{animation:none;opacity:1;transform:none}
  .hero-scroll{animation:none}
  .lightbox,.lightbox img{transition:none}
  .lightbox img,.lightbox.open img{transform:none}
  .brand{transition:none}
  @view-transition{navigation:none}
}
@media (min-width:600px){ .project-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:900px){ .project-grid{grid-template-columns:repeat(4,1fr)} }
/* Blog: ab hier ist Platz fuer Bild und Text nebeneinander. Darunter bleibt
   es gestapelt - ein 40 Prozent breites Foto neben drei Woertern sieht auf
   dem Telefon nach Unfall aus. */
@media (min-width:700px){
  .blog-eintrag{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:28px;align-items:start}
  /* Ein Eintrag ohne Foto haette sonst seinen Text in der schmalen Bildspalte
     stehen - halb so breit wie die anderen und dadurch doppelt so hoch. */
  .blog-eintrag > .blog-inhalt:first-child{grid-column:1 / -1}
  .blog-titel{font-size:1.8rem}
}
/* Mehr Spalten als Projekte lassen rechts ein Loch stehen und die Reihe
   wirkt abgebrochen. Deshalb deckelt die Anzahl der Projekte die Spalten. */
.project-grid[data-anzahl="1"]{grid-template-columns:minmax(0,420px)}
@media (min-width:600px){
  .project-grid[data-anzahl="1"]{grid-template-columns:minmax(0,420px)}
  .project-grid[data-anzahl="2"]{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .project-grid[data-anzahl="1"]{grid-template-columns:minmax(0,420px)}
  .project-grid[data-anzahl="2"]{grid-template-columns:repeat(2,1fr)}
  .project-grid[data-anzahl="3"]{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  /* Vollbild-Menue unterhalb der Kopfzeile.
     ACHTUNG, zwei Fallstricke:
     1. Die Hoehe der Kopfzeile darf NICHT fest eingetragen werden - sie
        aendert sich mit Logo und Schriftgroesse. site.js schreibt den
        gemessenen Wert in --kopf-hoehe.
     2. Ein Element mit backdrop-filter wird zum Bezugsrahmen fuer
        position:fixed. Bleibt der Weichzeichner der Kopfzeile aktiv,
        schrumpft das Menue auf deren Hoehe zusammen und ist unbedienbar.
        Solange das Menue offen ist, wird er deshalb abgeschaltet. */
  nav.main-nav{
    position:fixed; top:var(--kopf-hoehe,56px); left:0; right:0; bottom:0;
    background:var(--bg); display:none; flex-direction:column;
    align-items:center; justify-content:center; padding:24px 20px; overflow-y:auto;
  }
  nav.main-nav.open{display:flex}
  nav.main-nav ul{flex-direction:column;gap:4px;align-items:stretch;width:100%;max-width:420px}
  nav.main-nav a{display:block;padding:16px 8px;border-bottom:0;font-family:var(--font-display);font-size:clamp(1.35rem,6vw,1.9rem);text-transform:uppercase;letter-spacing:.04em;text-align:center}
  nav.main-nav a.active{color:var(--accent)}
  body.menu-open header.site{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  body.menu-open{overflow:hidden}
  .nav-toggle{display:block;position:relative;z-index:2;line-height:1;padding:4px 8px}
  /* Unter 16px zoomt Safari auf dem iPhone beim Antippen ungefragt hinein */
  .gate-form input[type="password"]{font-size:16px}
  .gate-form button{padding:12px 22px}
  .page-title{font-size:1.7rem}
  .intro-text{font-size:1.2rem}
  .hero-brand{font-size:clamp(2.1rem,11vw,3rem)}
  .brand-logo-nav{height:28px}
  /* Am Handy weiss jeder, dass man weiterwischt - und der Pfeil stand hier
     direkt neben der Wortmarke im Titelbild. */
  .hero-scroll{display:none}
  /* Das Titelbild soll auch am Handy ein Eintritt sein und kein Streifen.
     Mit 78vw kam es bei 375px Breite auf 293px = 36% der Bildschirmhoehe.
     60svh ist der Kompromiss: das Foto fuellt den Auftakt, und der Preis
     ist ein staerkerer Beschnitt links und rechts, weil ein Querformat in
     ein hohes Fenster gesetzt wird. Wer den Beschnitt kleiner haben will,
     senkt diesen einen Wert. */
  .hero-cover{height:60svh}
  /* Die Wortmarke traf im Titelfoto genau auf die Schiffsbeschriftung -
     zwei weisse Schriftebenen an derselben Stelle. Wichtig zum Verstaendnis:
     der Verlauf liegt NICHT ueber dem ganzen Bild, sondern nur im Kasten
     .hero-overlay, und der ist nur so hoch wie sein Inhalt (gemessen: die
     unteren 25% des Titelbildes). Ein sanfter Verlauf verpufft darin - er
     muss ueber fast die volle Hoehe des Kastens kraeftig sein und erst ganz
     oben auslaufen, sonst bleibt die Beschriftung lesbar.
     Werte am echten Foto ausprobiert, nicht gerechnet. */
  .hero-overlay{background:linear-gradient(to top, rgba(0,0,0,.93) 0%, rgba(0,0,0,.9) 50%, rgba(0,0,0,.72) 78%, rgba(0,0,0,.3) 92%, rgba(0,0,0,0) 100%)}
}