/* Schnatterinchens Puppenecke - kinderbuchedition.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: 21px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  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 ---------- */

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

/* Einzelnes Bild, das sich vergroessern laesst */
.zoom { margin: 0 0 6px; }
.zoom a { border: 0; display: block; }
.zoom a:hover img { opacity: .85; }

figcaption { margin: 6px 0 34px; font-size: 13px; color: var(--muted); }

/* Zweispaltiges Raster aus anklickbaren Vorschaubildern */
.tafeln {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 18px;
  margin: 24px 0 36px;
}
.tafeln figure { margin: 0; display: flex; flex-direction: column; }
.tafeln a { border: 0; display: block; }
.tafeln a:hover img { opacity: .82; }
.tafeln img { width: 100%; height: auto; background: #f4f3f1; }
/* margin-top:auto haelt die Unterschriften auf einer Linie,
   auch wenn die Bilder unterschiedlich hoch sind */
.tafeln figcaption {
  margin: 8px 0 0;
  margin-top: auto;
  padding-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* Eckdaten einer Ausstellung */
.eckdaten {
  margin: 28px 0 40px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.6;
}
.eckdaten strong { display: block; margin-bottom: 6px; font-size: 16px; }

/* Liste der Ausstellungen */
.termine { margin: 0; padding: 0; list-style: none; }
.termine li { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.termine li:first-child { border-top: 1px solid var(--rule); }
.termine .ort { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }

/* ---------- 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: 19px; letter-spacing: 0.14em; text-indent: 0.14em; }

  /* Zeitungsseiten und Faltblatt einspaltig - zweispaltig waeren sie unlesbar */
  .tafeln { grid-template-columns: 1fr; gap: 30px; }
  .tafeln figcaption { margin-top: 8px; padding-top: 0; }

  figcaption { margin-bottom: 26px; }
  .eckdaten { margin: 24px 0 32px; }
  .termine li { padding: 18px 0; }
}

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

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