/* Gera-Lusan - gera-lusan.netlify.app
   Schlanke statische Website. Keine Frameworks, keine externen Schriften,
   keine Cookies, kein Tracking, kein JavaScript.

   Aufbau dieser Datei
   1. Farben und Grundwerte
   2. Grundgeruest (Kopf, Menue, Inhalt, Fuss)
   3. Bausteine dieser Website
   4. Mobil (bis 720 px) - inklusive Klappmenue
   5. Druck
*/

/* ---------- 1. Farben und Grundwerte ---------- */

:root {
  color-scheme: light;
  --bg:      #ffffff;
  --text:    #1a1a1a;
  --muted:   #6f6f6f;
  --rule:    #e4e2df;
  --accent:  #a8443a;
  --maxw:    880px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- 2. Grundgeruest ---------- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.site-header { padding: 48px 0 0; }

.wordmark {
  display: inline-block;
  border: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  line-height: 1.25;
  color: var(--text);
}
.wordmark:hover { color: var(--accent); }

.tagline {
  margin: 12px 0 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.site-nav {
  margin-top: 28px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
}

.site-nav a {
  border: 0;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2px 0;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] {
  color: var(--text);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

/* Schaltflaeche und Schalter des Klappmenues: auf dem Desktop unsichtbar */
.nav-knopf { display: none; }
.nav-schalter {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Auf der Startseite ist die Wortmarke zugleich die Seitenueberschrift.
   Das h1 darf dabei nichts am Aussehen aendern. */
.marke {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  line-height: inherit;
}

main { flex: 1; padding: 56px 0 24px; }

h1 {
  margin: 0 0 32px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

h2 {
  margin: 64px 0 20px;
  font-size: 19px;
  font-weight: 700;
  text-wrap: balance;
}

h3 {
  margin: 40px 0 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

p { margin: 0 0 20px; overflow-wrap: break-word; }

figure { margin: 0 0 12px; }

address { font-style: normal; margin-bottom: 24px; }

.legal h3 { margin-top: 36px; }
.legal p, .legal li { font-size: 15px; }
.legal ul { padding-left: 20px; }

.site-footer {
  margin-top: 40px;
  padding: 26px 0 56px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--muted);
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.site-footer a { color: var(--muted); border: 0; }
.site-footer a:hover { color: var(--accent); }
.site-footer a[aria-current="page"] { color: var(--text); }

/* ---------- 3. Bausteine dieser Website ---------- */

/* Bilderraster */
.galerie {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 28px 0 32px;
}
.galerie a, .galerie figure { margin: 0; border: 0; display: block; }
.galerie img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #f4f3f1;
}
.galerie a:hover img { opacity: .78; }

.galerie-5 { grid-template-columns: repeat(5, 1fr); }
.galerie-2 { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
.galerie-2 img { aspect-ratio: auto; }

.galerie-hinweis {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* Buchausgabe oder Shop-Artikel */
.artikel {
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  margin-bottom: 44px;
}
.artikel.erste { border-top: 0; padding-top: 0; }
.artikel h3 {
  margin: 0 0 16px;
  font-size: 17px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}
.artikel h3 .zusatz { font-weight: 400; color: var(--muted); }
.artikel img { max-width: 340px; }

.daten { margin: 18px 0 12px; font-size: 15px; color: var(--muted); line-height: 1.5; }
.preis { font-size: 15px; margin: 0; }
.status { font-weight: 700; }
.status.frei { color: #2f7d4f; }
.status.weg  { color: var(--accent); }

/* Pressezitate */
blockquote { margin: 0 0 10px; padding: 0; font-size: 18px; line-height: 1.55; }
.quelle { font-size: 14px; color: var(--muted); margin: 0 0 40px; }

/* Bestellhinweis */
.hinweis {
  margin: 36px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
}

/* ---------- 4. Mobil (bis 720 px) ---------- */

@media (max-width: 720px) {
  :root { --maxw: 100%; }

  body { font-size: 16px; line-height: 1.6; }
  .wrap { padding: 0 20px; }

  /* Lange deutsche Woerter auf schmalen Schirmen trennen */
  p, li, dd, figcaption, .daten, .quelle, .ort { hyphens: auto; -webkit-hyphens: auto; }
  .tagline, h1, h2, h3 { hyphens: manual; -webkit-hyphens: manual; }

  /* --- Kopfzeile: Wortmarke links, Schaltflaeche rechts --- */
  .site-header { padding-top: 22px; }
  .site-header .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  /* flex-basis 0: Flexbox entscheidet den Zeilenumbruch anhand der
     Ausgangsbreite. Mit "auto" waere das die volle Textbreite und die
     Schaltflaeche rutschte bei langen Wortmarken in die naechste Zeile. */
  .wordmark, .marke { order: 1; flex: 1 1 0; min-width: 0; }
  .nav-knopf { order: 2; }
  .tagline   { order: 3; flex: 1 0 100%; }
  .site-nav  { order: 4; flex: 1 0 100%; }

  .tagline {
    margin: 10px 0 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule);
    line-height: 1.5;
  }

  /* --- Schaltflaeche (Hamburger) --- */
  .nav-knopf {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 48px;
    height: 48px;
    margin-right: -6px;
    flex: 0 0 auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-icon {
    position: relative;
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text);
    transition: background-color .15s ease;
  }
  .nav-icon::before,
  .nav-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--text);
    transition: transform .2s ease;
  }
  .nav-icon::before { top: -7px; }
  .nav-icon::after  { top:  7px; }

  /* geoeffnet: Balken werden zum Kreuz */
  .nav-schalter:checked ~ .nav-knopf .nav-icon { background: transparent; }
  .nav-schalter:checked ~ .nav-knopf .nav-icon::before { transform: translateY(7px) rotate(45deg); }
  .nav-schalter:checked ~ .nav-knopf .nav-icon::after  { transform: translateY(-7px) rotate(-45deg); }

  /* Tastaturbedienung sichtbar machen */
  .nav-schalter:focus-visible ~ .nav-knopf .nav-icon { background: var(--accent); }
  .nav-schalter:focus-visible ~ .nav-knopf .nav-icon::before,
  .nav-schalter:focus-visible ~ .nav-knopf .nav-icon::after { background: var(--accent); }

  /* --- Das Menue selbst --- */
  .site-nav {
    display: none;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    padding: 0;
    border-top: 0;
    border-bottom: 1px solid var(--rule);
  }
  .nav-schalter:checked ~ .site-nav { display: flex; }
  .site-nav a {
    padding: 15px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--rule);
  }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav a[aria-current="page"] {
    box-shadow: none;
    color: var(--accent);
  }

  /* --- Inhalt --- */
  main { padding: 30px 0 16px; }
  h1 { font-size: 22px; margin-bottom: 24px; }
  h2 { font-size: 18px; margin-top: 48px; }
  h3 { margin-top: 32px; }

  /* --- Fusszeile: gestapelt, grosse Tippflaechen --- */
  .site-footer { margin-top: 32px; padding: 14px 0 40px; }
  .site-footer .wrap { flex-direction: column; gap: 0; }
  .site-footer span { padding: 12px 0 4px; }
  .site-footer a { padding: 12px 0; }
}

@media (max-width: 720px) {
  .wordmark { font-size: 24px; letter-spacing: 0.28em; text-indent: 0.28em; }

  /* Buchdoppelseiten: zwei statt vier Spalten, sonst zu klein zum Erkennen */
  .galerie   { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .galerie-5 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .galerie-2 { grid-template-columns: repeat(2, 1fr); max-width: none; }

  .artikel { margin-bottom: 36px; padding-top: 24px; }
  .artikel img { max-width: 100%; }
  .artikel h3 { font-size: 16px; }
  .daten { font-size: 14px; }
  blockquote { font-size: 17px; }
  .hinweis { font-size: 15px; }
}

/* ---------- 5. Druck ---------- */

@media print {
  .site-nav, .nav-knopf, .site-footer { display: none; }
  body { font-size: 11pt; }
  a { border: 0; }
}

/* ---------- Bildergalerie: Vergroesserung im Overlay ----------
   Rein mit CSS geloest (:target). Kein JavaScript, weil die
   Content-Security-Policy in _headers keines zulaesst. Nebeneffekt:
   Der Zurueck-Knopf des Browsers schliesst die Vergroesserung. */

.lb { display: none; }

.lb:target {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 64px 72px;
  background: var(--bg);
}

/* Klick neben das Bild schliesst */
.lb-flaeche { position: absolute; inset: 0; border: 0; }

.lb figure {
  position: relative;
  z-index: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 100%;
  /* Haelt den Platz frei, solange das grosse Bild noch laedt -
     sonst springt die Bildunterschrift beim Erscheinen nach unten. */
  min-height: 58vh;
}
/* Die Ausstellungsfotos sind klein und sofort da - kein Platzhalter noetig */
.lb-klein figure { min-height: 0; }
.lb img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  object-fit: contain;
  /* Fuellfarbe, solange das grosse Bild noch laedt */
  background: #f4f3f1;
}
/* Die Ausstellungsfotos liegen nur in 500 px vor - nicht hochrechnen */
.lb-klein img { max-width: 560px; }

.lb figcaption {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: center;
}

.lb-zu, .lb-vor, .lb-weiter {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  color: var(--muted);
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.lb-zu:hover, .lb-vor:hover, .lb-weiter:hover { color: var(--accent); }

.lb-zu { top: 10px; right: 10px; width: 52px; height: 52px; font-size: 30px; }
.lb-vor, .lb-weiter { top: 50%; transform: translateY(-50%); width: 60px; height: 72px; font-size: 40px; }
.lb-vor    { left: 4px; }
.lb-weiter { right: 4px; }

/* Seite hinter der Vergroesserung nicht mitscrollen lassen */
html:has(.lb:target) { overflow: hidden; }

@media (max-width: 720px) {
  .lb:target { padding: 56px 12px 76px; }
  .lb img { max-height: 68vh; }
  .lb figure { min-height: 50vh; }
  .lb-klein img { max-width: 100%; }
  .lb-zu { top: 4px; right: 4px; width: 48px; height: 48px; font-size: 28px; }
  /* Auf dem Handy stehen die Pfeile unten - am Bildrand waeren sie im Weg */
  .lb-vor, .lb-weiter {
    top: auto; bottom: 8px; transform: none;
    width: 64px; height: 56px; font-size: 34px;
  }
  .lb-vor    { left: 12px; }
  .lb-weiter { right: 12px; }
}