/* Modulare Synthesizer – statische Version (ohne WordPress/Elementor) */

@font-face { font-family: "Staatliches"; src: url("fonts/staatliches.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Crimson Text"; src: url("fonts/crimson-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Crimson Text"; src: url("fonts/crimson-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Crimson Text"; src: url("fonts/crimson-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --text: #000;
  --muted: #333;
  --accent: #fead50;
  --button: #080808;
  --line: #000;
  --max: 925px;
  --display: "Staatliches", "Arial Narrow", sans-serif;
  --serif: "Crimson Text", Georgia, serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.15rem;      /* ≈ 18.4px */
  line-height: 1.5;
}

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

a { color: var(--accent); }
a:hover { color: #e08a24; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 10; }

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

/* Kopf */
.site-header { padding: 20px 0 50px; text-align: center; }
.site-header img { width: 267px; margin: 0 auto; }

/* Buchcover + Downloads */
.books {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px;
}
.book { display: flex; flex-direction: column; align-items: center; }
.book img { width: 100%; box-shadow: 0 2px 14px rgba(0,0,0,.08); }
.book .buttons { display: flex; flex-direction: column; align-items: center; gap: 35px; margin-top: 35px; }

/* Buttons */
.btn {
  display: inline-block;
  background: var(--button);
  color: #fff;
  font-family: var(--display);
  font-size: 1.1rem;       /* ≈ 17.6px */
  line-height: 26px;
  padding: 12px 24px;
  border-radius: 80px;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.btn:hover, .btn:focus-visible { background: var(--accent); color: #000; }

/* Beschreibungstexte – versetzt wie im Original */
.text { margin-top: 100px; }
.text p { margin: 0 0 20px; }
.text .de { max-width: 70%; }
.text .en { max-width: 70%; margin-left: auto; margin-top: 55px; }

.shop { text-align: center; margin: 100px 0 80px; }

hr.divider { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Bezugsquellen */
.sources { padding: 60px 0 50px; }
h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.3rem;       /* ≈ 36.8px */
  line-height: 1;
  color: var(--accent);
  margin: 0 0 30px;
}
.sources ul { margin: 0; padding-left: 1.5em; }
.sources li { margin: 0; }

/* Fuß */
.site-footer { padding: 50px 0 40px; text-align: center; border-top: 1px solid var(--line); }
.site-footer ul {
  list-style: none; margin: 0 0 30px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0;
}
.site-footer li a {
  display: block;
  padding: 12px 16px;
  font-family: var(--display);
  font-size: .92rem;       /* ≈ 14.7px */
  color: #000;
  text-decoration: none;
}
.site-footer li a:hover { color: var(--accent); }
.site-footer p { margin: 0; font-size: .95rem; }

/* Unterseite Kontakt / Impressum / Datenschutz */
.legal { padding-bottom: 60px; }
.legal section { scroll-margin-top: 20px; margin-bottom: 60px; }
.legal h3 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin: 40px 0 10px; }
.legal h4 { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; margin: 30px 0 6px; }
.legal p { margin: 0 0 14px; }
.legal a { word-break: break-word; }

/* Mobil */
@media (max-width: 767px) {
  body { font-size: 1.05rem; }
  .site-header { padding-bottom: 30px; }
  .site-header img { width: 220px; }
  .books { grid-template-columns: 1fr; gap: 60px; }
  .book .buttons { gap: 20px; margin-top: 25px; }
  .text { margin-top: 60px; }
  .text .de, .text .en { max-width: none; }
  .text .en { margin-top: 40px; }
  .shop { margin: 60px 0; }
  h2 { font-size: 2rem; }
  .site-footer li a { padding: 8px 12px; }
}