/* brunokaiser.ch — persoenliche Fotoseite.
   Richtung "Bildwand": die Bilder sind das Design, das Chrome bleibt minimal.

   DESIGN SYSTEM
   -------------
   Theme      dunkel, fix. Kein Light-Mode — eine Bildwand vor Weiss funktioniert nicht,
              und die Seite besteht fast nur aus Fotos.
   Farben     Grund #05090F (fast schwarzes Blau), Flaeche #0C1520, Text #EDF2F8,
              gedaempft #7C8AA0 / #9FB0C6, Akzent #7DD3FC. Ein Akzent, sonst nichts.
   Typo       Space Grotesk 400/500/700, selbst gehostet. .lbl = 11px, 0.16em Laufweite,
              Versalien — das einzige Chrome-Textformat.
   Raster     Kacheln stossen randlos aneinander, 2px Fuge. Keine Karten, keine Radien
              ausser den Pillen (999px).
   Bilder     imgix, srcset in drei Breiten. Kein Bild ohne Verlauf (scrim) darunter,
              sonst faellt die Beschriftung ins Motiv.
   Motion     nur Hover und Focus. */

:root {
  color-scheme: dark;

  --ground: #05090F;
  --surface: #0C1520;
  --ink: #EDF2F8;
  --ink-soft: #9FB0C6;
  --ink-muted: #7C8AA0;   /* 5.1:1 auf --ground */
  --ink-faint: #55647A;
  --accent: #7DD3FC;
  --accent-hover: #BAE6FD;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);

  --pad: 56px;
  --gap: 2px;
  --font: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

@media (max-width: 720px) {
  :root { --pad: 20px; }
}

/* Schmale Geraete: der Kopf bricht auf zwei Zeilen, statt die Navigation aus dem
   Bild zu schieben. Vier Eintraege passen bei 390px nicht neben den Namen. */
@media (max-width: 720px) {
  .site-head { flex-wrap: wrap; gap: 14px 18px; padding-top: 20px; padding-bottom: 16px; }
  .brand { white-space: nowrap; }
  .site-nav { width: 100%; flex-wrap: wrap; gap: 8px 18px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

img { display: block; max-width: 100%; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 18px; background: var(--ink); color: var(--ground);
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- Chrome */

.lbl {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lbl a { color: var(--ink-muted); }
.lbl a:hover { color: var(--ink); }
.lbl .here { color: var(--ink); }
.lbl.faint { color: var(--ink-faint); }

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px var(--pad);
  border-bottom: 1px solid var(--line);
}
.site-head.over {           /* auf der Startseite schwebt der Kopf ueber dem Hero */
  position: absolute;
  top: 0; left: 0; right: 0;
  border-bottom: 0;
  padding-top: 28px;
  z-index: 2;
}
.brand {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.site-nav { display: flex; gap: 30px; }
.site-nav a[aria-current='page'] { color: var(--ink); }
/* Die einzige Handlung auf der Seite — darum der einzige Akzent im Chrome. */
.site-nav .login { color: var(--accent); }
.site-nav .login:hover { color: var(--accent-hover); }

.site-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  padding: 26px var(--pad) 40px;
  border-top: 1px solid var(--line);
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 24px; }

/* ------------------------------------------------------------------ Hero */

.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(56,189,248,0.14), rgba(30,64,120,0.12) 50%, rgba(255,255,255,0.02)), var(--surface);
}
.hero > .media { position: absolute; inset: 0; }
.hero > .media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
      rgba(5, 9, 15, 0.72) 0%, rgba(5, 9, 15, 0.12) 34%, rgba(5, 9, 15, 0.88) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  padding: 0 var(--pad) 56px;
}
.hero h1 {
  margin: 18px 0 0;
  font-size: clamp(2.125rem, 1.2rem + 3.4vw, 4.125rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 14ch;
  text-wrap: balance;
}
.hero-aside { max-width: 320px; }
.hero-aside p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }

@media (max-width: 900px) {
  .hero { min-height: 540px; }
  .hero-inner { flex-direction: column; align-items: flex-start; gap: 20px; padding-bottom: 34px; }
  .hero-aside { max-width: none; }
  .hero-aside .lbl:last-child { display: none; }   /* "Scrollen" nur am Desktop */
}

/* -------------------------------------------------------------- Bildwand */

.wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gap);
}
.wall.fine { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.tile {
  position: relative;
  overflow: hidden;
  /* Solange kein Bild da ist, liest sich die Kachel als Bildplatz und nicht als Loch.
     Sobald das <img> drinliegt, deckt es den Verlauf vollstaendig ab. */
  background: linear-gradient(165deg, rgba(56,189,248,0.14), rgba(30,64,120,0.12) 50%, rgba(255,255,255,0.02)), var(--surface);
  color: inherit;
  min-height: 220px;
}
.tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
@media (prefers-reduced-motion: reduce) { .tile img { transition: none; } }
.tile:hover img { transform: scale(1.03); }
.tile::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5, 9, 15, 0.82), rgba(5, 9, 15, 0) 58%);
  pointer-events: none;
}
.tile.plain::after { display: none; }
.tile .cap {
  position: absolute;
  left: 20px; right: 20px; bottom: 18px;
  z-index: 1;
}
.tile .cap h2,
.tile .cap h3 {
  margin: 0;
  font-size: clamp(1.375rem, 1.1rem + 0.7vw, 1.625rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.tile .cap .lbl { margin-top: 6px; }

/* Spannweiten. Die Kachelgroessen stehen im Markup, nicht in den Daten —
   so bleibt das Raster ruhig, egal wie viele Bilder ein Thema hat. */
.s2 { grid-column: span 2; } .s3 { grid-column: span 3; }
.s4 { grid-column: span 4; } .s5 { grid-column: span 5; }
.s6 { grid-column: span 6; } .s7 { grid-column: span 7; }
.s12 { grid-column: span 12; }
.h340 { height: 340px; } .h300 { height: 300px; } .h280 { height: 280px; }
.h400 { height: 400px; } .h360 { height: 360px; } .h320 { height: 320px; }

@media (max-width: 1100px) {
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wall.fine { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .s5, .s7 { grid-column: span 3; }
  .s6 { grid-column: span 4; }
  .s12 { grid-column: span 6; }
}
@media (max-width: 720px) {
  .wall, .wall.fine { grid-template-columns: 1fr; }
  .wall > * { grid-column: 1 / -1 !important; height: 220px !important; }
}

/* --------------------------------------------------------- Seitenkoepfe */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 64px;
  padding: 54px var(--pad) 40px;
}
.page-head h1 {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.page-head .lede {
  margin: 18px 0 0;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.page-head .facts { text-align: right; line-height: 2.1; white-space: nowrap; }

@media (max-width: 900px) {
  .page-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .page-head .facts { text-align: left; }
}

/* --------------------------------------------------------------- Filter */

.filterbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 16px var(--pad);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(5, 9, 15, 0.92);
  backdrop-filter: blur(8px);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}
.chip:hover { color: var(--ink); border-color: var(--ink-muted); }
.chip[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ground);
  font-weight: 500;
}

.btn-more {
  display: block;
  margin: 44px auto 8px;
  min-height: 46px;
  padding: 13px 28px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
}
.btn-more:hover { color: var(--ink); border-color: var(--ink-muted); }

/* ---------------------------------------------------- Hosted Sites, Fuss */

.band { padding: 84px var(--pad) 76px; }
.band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cards a {
  background: var(--ground);
  padding: 26px 24px;
  color: inherit;
}
.cards a:hover { background: var(--surface); }
.cards b { display: block; font-size: 18px; font-weight: 500; }
.cards span { display: block; font-size: 14px; color: var(--ink-muted); margin-top: 6px; }
.cards em { display: block; font-size: 12px; font-style: normal; color: var(--accent); margin-top: 16px; }

@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

.neighbours {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  padding: 56px var(--pad) 0;
}
.neighbours .tile { min-height: 150px; height: 150px; }
.neighbours .tile::after { background: rgba(5, 9, 15, 0.62); }
.neighbours .cap { top: 50%; bottom: auto; transform: translateY(-50%); }
.neighbours .next { text-align: right; }
@media (max-width: 720px) { .neighbours { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- Prosa */

.prose { max-width: 68ch; padding: 54px var(--pad) 70px; }
.prose h1 { font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem); letter-spacing: -0.03em; margin: 0 0 26px; }
.prose h2 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; margin: 40px 0 10px; }
.prose p { margin: 0 0 16px; color: var(--ink-soft); line-height: 1.75; }
.prose address { font-style: normal; color: var(--ink-soft); line-height: 1.75; }

/* ------------------------------------------------------------ Lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #02050A;
  display: flex;
  flex-direction: column;
}
.lightbox[hidden] { display: none; }
.lb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
}
.lb-ctrls { display: flex; gap: 10px; align-items: center; }
.ctrl {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(2, 5, 10, 0.6);
  color: var(--ink);
  cursor: pointer;
}
.ctrl:hover { border-color: var(--ink-muted); }
.lb-body {
  flex-grow: 1;
  display: grid;
  grid-template-columns: 1fr 300px;
  min-height: 0;
}
.lb-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 24px 0 28px; min-height: 0; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: 46px; }
.lb-next { right: 42px; }
.lb-meta { padding: 4px 28px 0 4px; display: flex; flex-direction: column; gap: 22px; overflow-y: auto; }
.lb-meta h2 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.lb-meta p { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
.lb-facts { display: flex; flex-direction: column; }
.lb-facts div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px; color: #C6D3E4;
}
.lb-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.lb-tags span {
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px; color: #A9B8CB;
}
.lb-strip { display: flex; gap: 4px; padding: 20px 28px 22px; align-items: center; overflow-x: auto; }
.lb-strip button {
  flex: 1 1 0; min-width: 60px; height: 58px;
  padding: 0; border: 0; border-radius: 3px;
  background: var(--surface); opacity: 0.45; cursor: pointer; overflow: hidden;
}
.lb-strip button img { width: 100%; height: 100%; object-fit: cover; }
.lb-strip button[aria-current='true'] { opacity: 1; height: 70px; outline: 2px solid var(--ink); outline-offset: 1px; }

@media (max-width: 900px) {
  .lb-body { grid-template-columns: 1fr; }
  .lb-meta { display: none; }
  .lb-meta.open { display: flex; padding: 0 20px 20px; }
  .lb-stage { padding: 0 12px; }
  .lb-prev { left: 12px; }
  .lb-next { right: 12px; }
  .lb-strip { display: none; }
}

/* Nichts anzuzeigen — ehrlicher leerer Zustand statt eines kaputten Rasters. */
.empty {
  padding: 70px var(--pad);
  text-align: center;
  color: var(--ink-muted);
}