/* VERO - vero-olbernhau.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 ---------- */

/* Englische Fassung eines Absatzes */
.en { color: var(--muted); font-style: italic; }

/* Ein Puppenhaus mit Bildern und Datenblatt */
.object { margin-bottom: 88px; }
.object:last-child { margin-bottom: 32px; }
.object figure + figure { margin-top: 12px; }

.specs {
  margin: 28px 0 32px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.specs .type { margin: 0 0 18px; font-weight: 700; }
.specs .type .en { font-weight: 400; }
.specs dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 24px;
  font-size: 15px;
}
.specs dt { color: var(--muted); }
.specs dd { margin: 0; }

/* Liste der gesuchten Modelle */
.wanted { margin: 0 0 20px; padding: 0; list-style: none; }
.wanted li { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.wanted li:first-child { border-top: 1px solid var(--rule); }

/* ---------- 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; }
  .object { margin-bottom: 56px; }
  .specs { margin: 22px 0 26px; padding-top: 18px; }
  .specs dl { gap: 4px 16px; font-size: 14px; }
  .wanted li { padding: 14px 0; }
}

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

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