@import url("https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap");

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }
html { background: #000 url("stars.gif"); }

body {
  color: #d8d8d8;
  font-family: "Noto Sans Math", "Cambria Math", "Segoe UI Symbol",
               "Apple Symbols", Georgia, serif;
  padding: 2rem 1rem 4rem;
}

/* ---------- Kopf ---------- */
.menue {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.8rem;
  margin: 0 auto 2.5rem;
  font-size: 1.25rem;
}
.menue a { color: #cfcfcf; text-decoration: none; }
.menue a:hover, .menue a:focus-visible { color: #fff; text-shadow: 0 0 10px #fff; }
.menue a[aria-current] { color: #fff; border-bottom: 1px solid #999; }
.menue a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

h1 {
  margin: 0 0 2.5rem;
  text-align: center;
  font-size: clamp(2rem, 7vw, 3.5rem);
  font-weight: normal;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.45);
}

main { max-width: 64rem; margin: 0 auto; }

/* ---------- Black-Metal-Rahmen ---------- */
.rahmen {
  position: relative;
  padding: 20px;
  background: #0b0b0b;
  clip-path: polygon(
    0 22px, 22px 0, calc(100% - 22px) 0, 100% 22px,
    100% calc(100% - 22px), calc(100% - 22px) 100%,
    22px 100%, 0 calc(100% - 22px));
  box-shadow: inset 0 0 0 2px #9a9a9a,
              inset 0 0 0 6px #0b0b0b,
              inset 0 0 0 8px #555;
}
.rahmen::before,
.rahmen::after {
  content: "†";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 0.4rem;
  background: #0b0b0b;
  color: #9a9a9a;
  font-size: 15px;
  line-height: 1;
}
.rahmen::before { top: 1px; }
.rahmen::after  { bottom: 1px; transform: translateX(-50%) rotate(180deg); }

/* ---------- Galerie ---------- */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 2.5rem 2rem;
}
.stueck { margin: 0; }
.stueck img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;      /* z.B. 4 / 5 für Hochformat */
  object-fit: cover;
  background: #050505;
  border: 1px solid #333;
  color: #777;
  font-size: 0.9rem;
  text-align: center;
}
.stueck figcaption {
  margin-top: 0.9rem;
  text-align: center;
  line-height: 1.5;
  text-shadow: 0 0 6px #000;
}

/* ---------- Blog ---------- */
.blog { max-width: 42rem; margin: 0 auto; }
.post { padding: 26px 28px; }
.post + .post { margin-top: 2.5rem; }
.post time { color: #999; font-size: 0.95rem; }
.post h2 { margin: 0.3rem 0 0.8rem; font-size: 1.6rem; font-weight: normal; color: #fff; }
.post p { margin: 0 0 1rem; line-height: 1.7; }
.post p:last-child { margin-bottom: 0; }
.post img { display: block; max-width: 100%; margin: 0 0 1rem; border: 1px solid #333; }

/* ---------- Normale Tastatur-Texte im Fraktur-Look ---------- */
.stueck figcaption,
.post h2,
.post p,
.post time {
  font-family: "UnifrakturCook", "Noto Sans Math", "Cambria Math", "Segoe UI Symbol", Georgia, serif;
  font-weight: 700;
}
.stueck figcaption { font-size: 1.2rem; }
.post p { font-size: 1.2rem; }
.post h2 { font-size: 1.8rem; }