: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}
body{
  background:radial-gradient(ellipse 1200px 700px at 50% -10%, #1b1917 0%, var(--bg) 55%);
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
}
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 .2s ease;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}
.brand-logo-nav{height:22px}
.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}
.kicker{display:block;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin:24px 0 8px}
/* 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}
.intro-rule{width:56px;height:2px;background:var(--accent);border:0;margin:22px 0 32px}
.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%}
.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}
.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}
/* 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}

/* 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}
.gate-vorschau img{width:100%;height:auto;display:block}
.gate-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;max-width:460px}
.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;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{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)}
.gate-loading{width:100%;color:var(--muted);font-size:.85rem;margin:2px 0 0}
footer.site{border-top:1px solid #262626;margin-top:40px;padding:24px 20px;color:var(--muted);font-size:.82rem}
footer.site .foot-wrap{max-width:1400px;margin:0 auto;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}
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. */
.lightbox{position:fixed;inset:0;background:rgba(6,6,6,.96);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}
.lightbox .lb-close,.lightbox .lb-prev,.lightbox .lb-next{
  position:absolute;background:none;border:0;color:#eee;font-size:2rem;cursor:pointer;padding:10px;transition:color .2s ease;
}
.lightbox .lb-close:hover,.lightbox .lb-prev:hover,.lightbox .lb-next:hover{color:var(--accent)}
.lightbox .lb-close{top:6px;right:14px}
.lightbox .lb-prev{left:6px;top:50%;transform:translateY(-50%)}
.lightbox .lb-next{right:6px;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{transition:none}
  .gallery a:hover img,.project-grid a:hover .tile-frame 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}
  @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)} }
/* 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)}
  /* 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%)}
}