/* shouwanga.de – statische Fassung (2026) */
:root {
  --bg: #f3efe9;
  --karte: #e4ddd3;
  --text: #2b2b2b;
  --leise: #6a6a6a;
  --kopf: #232323;
  --akzent: #e8a21c;
  --rand: #d6ccc0;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* Kopf */
.kopf { background: var(--kopf); }
.kopf .innen {
  max-width: 1200px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
}
.kopf .logo img { width: 190px; }
.kopf nav { display: flex; gap: 4px 20px; flex-wrap: wrap; }
.kopf nav a {
  color: #eee; text-decoration: none; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.kopf nav a:hover, .kopf nav a[aria-current="page"] { border-bottom-color: var(--akzent); color: #fff; }

/* Startseite */
.start { position: relative; display: block; background: #87a9d6; }
.start img { width: 100%; max-height: 80vh; object-fit: cover; object-position: 70% 50%; }
.start .knopf { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); }
.knopf {
  display: inline-block; background: var(--akzent); color: #1d1d1d; text-decoration: none;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 15px;
  padding: 10px 22px; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.knopf:hover { background: #f2b632; }

/* Inhaltsseiten */
.seite { max-width: 1200px; margin: 0 auto; padding: 28px 16px 48px; }
.text { max-width: 720px; }
h1 { font-size: 28px; font-weight: 600; margin: 0 0 20px; padding-bottom: 10px; border-bottom: 1px solid var(--rand); }
h2 { font-size: 19px; font-weight: 600; margin: 28px 0 8px; }
.text p, .text ul { margin: 0 0 12px; }

/* Galerie */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.filter button {
  font: inherit; font-size: 14px; cursor: pointer; padding: 6px 14px; border-radius: 3px;
  border: 1px solid #bbb; background: #fff; color: var(--text);
}
.filter button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.raster {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.raster li[hidden] { display: none; }
.raster a { display: block; text-decoration: none; background: var(--karte); border-radius: 3px; overflow: hidden; }
.raster img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .25s; }
.raster a:hover img { transform: scale(1.03); }
.raster span { display: block; padding: 6px 10px; font-size: 14px; color: var(--leise); }

/* Großansicht */
dialog.gross {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh;
  width: 100vw; height: 100vh; margin: 0;
}
dialog.gross::backdrop { background: rgba(0,0,0,.88); }
dialog.gross figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 56px 16px; }
dialog.gross img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; }
dialog.gross figcaption { color: #ddd; margin-top: 10px; font-size: 15px; }
dialog.gross button {
  position: absolute; background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 40px; line-height: 1; padding: 8px 12px; opacity: .8;
}
dialog.gross button:hover { opacity: 1; }
dialog.gross .zu { top: 6px; right: 8px; font-size: 34px; }
dialog.gross .zurueck { left: 4px; top: 50%; transform: translateY(-50%); }
dialog.gross .weiter { right: 4px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  dialog.gross figure { padding: 48px 8px 16px; }
  dialog.gross .zurueck, dialog.gross .weiter { top: auto; bottom: 4px; transform: none; }
}

/* Fuß */
.fuss { border-top: 1px solid var(--rand); color: var(--leise); font-size: 14px; }
.fuss .innen { max-width: 1200px; margin: 0 auto; padding: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.fuss nav { display: flex; gap: 16px; }