/* Herr Dur und Frau Moll – Stylesheet
   Leitidee vom Cover: links Dur (Sonnengelb), rechts Moll (Regengrau). Mobil zuerst. */

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/playfair-display-latin-wght-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-wght-italic.woff2') format('woff2');
}

:root {
  --sonne: #fae078;        /* Sonnengelb (Cover links) */
  --sonne-hell: #fff7dc;
  --sonne-tief: #f4b740;
  --regen: #8c97ab;        /* Regengrau / Blaugrau (Cover rechts) */
  --regen-hell: #e9ecf3;
  --regen-dunkel: #5d6378;
  --dur: #e5892f;          /* Orange – Herr Dur */
  --dur-tief: #b85a12;
  --moll: #3b3a6e;         /* Dunkelblau/Violett – Frau Moll */
  --nacht: #1d2145;        /* Titelschrift-Blau */
  --wiese: #8bc06a;        /* Wiesengrün */
  --text: #1d2145;
  --weiss: #fffdf7;

  --serif-titel: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --rand: 1.25rem;
  --breite: 68rem;
  --radius: 14px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; /* eigenes Druck-Feedback statt grauem Blitz */
}
a, button, summary { touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem); /* 19–21 px */
  line-height: 1.6;
  font-optical-sizing: auto;
}

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

h1, h2, h3 {
  font-family: var(--serif-titel);
  font-style: italic;
  font-weight: 700;
  line-height: 1.1;
  color: var(--nacht);
  margin: 0 0 0.5em;
}
/* Laufweite je Größe: große Titel enger, kleine neutral */
h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); line-height: 1.05; letter-spacing: -0.015em; }
h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.6rem); }
p { margin: 0 0 1em; }

a { color: var(--moll); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--dur-tief); }
:focus-visible { outline: 3px solid var(--dur); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.wrap.schmal { max-width: 44rem; }

.skip { position: absolute; left: -999px; top: 0; background: var(--nacht); color: #fff; padding: 0.75rem 1rem; z-index: 100; }
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Platzhalter (noch offene Angaben) ---------- */
.ph {
  display: inline-block;
  background: repeating-linear-gradient(-45deg, #ffe7f1 0 10px, #ffd3e6 10px 20px);
  color: #7a0f3a;
  border: 2px dashed #c2185b;
  border-radius: 6px;
  padding: 0.05em 0.45em;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.82em;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
  vertical-align: baseline;
}
.ph-tag { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85em; background: #c2185b; color: #fff; padding: 0 0.35em; border-radius: 3px; margin-right: 0.2em; }
.is-ph { opacity: 0.85; cursor: not-allowed; }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  /* Transluzentes Material: Inhalt scrollt sichtbar darunter durch */
  background: rgba(255, 253, 247, 0.78);
  border-bottom: 3px solid;
  border-image: linear-gradient(90deg, var(--sonne-tief) 50%, var(--regen) 50%) 1;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
@media (prefers-reduced-transparency: reduce) {
  .kopf { background: var(--weiss); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .kopf { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.kopf-inner { max-width: var(--breite); margin: 0 auto; padding: 0.6rem var(--rand); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marke { font-family: var(--serif-titel); font-style: italic; font-weight: 700; font-size: 1.3rem; text-decoration: none; color: var(--nacht); white-space: nowrap; }
.marke-dur { color: var(--dur-tief); }
.marke-moll { color: var(--moll); }
.marke-und { font-size: 0.8em; font-weight: 500; }

.menue { position: relative; }
.menue summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 1.05rem;
  padding: 0.55rem 0.9rem; border: 2px solid var(--nacht); border-radius: 999px;
  min-height: 48px;
  transition: transform 100ms ease-out, background-color 100ms ease-out;
}
.menue summary:active { transform: scale(0.96); background: var(--sonne-hell); }
.menue summary::-webkit-details-marker { display: none; }
.menue-icon, .menue-icon::before, .menue-icon::after { display: block; width: 20px; height: 2.5px; background: var(--nacht); border-radius: 2px; position: relative; content: ''; }
.menue-icon { transition: background-color 150ms; }
.menue-icon::before, .menue-icon::after { transition: top 200ms ease, transform 200ms ease; }
.menue-icon::before { position: absolute; top: -6px; }
.menue-icon::after { position: absolute; top: 6px; }
.menue[open] .menue-icon { background: transparent; }
.menue[open] .menue-icon::before { top: 0; transform: rotate(45deg); }
.menue[open] .menue-icon::after { top: 0; transform: rotate(-45deg); }
.menue nav {
  position: absolute; right: 0; top: calc(100% + 0.6rem);
  background: var(--weiss); border: 2px solid var(--nacht); border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(29, 33, 69, 0.2);
  min-width: 15rem; padding: 0.5rem;
}
/* Menü wächst aus dem Menü-Knopf heraus und schrumpft dorthin zurück.
   CSS-Transitions starten beim Umkehren vom aktuellen Wert – also jederzeit unterbrechbar. */
.js .menue nav {
  transform-origin: top right;
  opacity: 0;
  transform: scale(0.92) translateY(-8px);
  transition: opacity 160ms cubic-bezier(0.4, 0, 1, 1), transform 220ms cubic-bezier(0.6, 0, 0.8, 0.2);
}
.js .menue.ist-offen nav {
  opacity: 1;
  transform: none;
  transition: opacity 160ms cubic-bezier(0, 0, 0.6, 1), transform 260ms cubic-bezier(0.2, 0.8, 0.4, 1);
}
.menue ul, .nav-breit ul { list-style: none; margin: 0; padding: 0; }
.menue a { display: block; padding: 0.7rem 0.9rem; text-decoration: none; font-size: 1.15rem; border-radius: 8px; color: var(--nacht); }
.menue a:active { background: var(--sonne); }
.menue a[aria-current] { font-weight: 700; box-shadow: inset 4px 0 0 var(--dur); }
.nav-breit { display: none; }

@media (min-width: 1000px) {
  .menue { display: none; }
  .nav-breit { display: block; }
  .nav-breit ul { display: flex; gap: 0.25rem; }
  .nav-breit a { display: block; padding: 0.4rem 0.7rem; text-decoration: none; color: var(--nacht); font-size: 1.05rem; border-radius: 8px; }
  .nav-breit a:active { background: var(--sonne); }
  .nav-breit a[aria-current] { box-shadow: inset 0 -3px 0 var(--dur); font-weight: 600; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0.7rem 1.5rem;
  background: var(--dur); color: var(--nacht);
  border: 2px solid var(--nacht); border-radius: 999px;
  font-weight: 700; font-size: 1.1rem; text-decoration: none; text-align: center;
  box-shadow: 0 3px 0 var(--nacht);
  transition: transform 100ms ease-out, box-shadow 100ms ease-out, background-color 100ms ease-out;
}
/* Druck-Feedback sofort beim Antippen; Hover nur auf Geräten mit Maus (sonst „klebt“ er am Handy) */
.knopf:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--nacht); }
@media (hover: hover) {
  .knopf:hover { color: var(--nacht); background: #ef9a45; }
  .knopf-hell:hover { background: var(--sonne-hell); }
  .menue a:hover { background: var(--sonne-hell); }
  .nav-breit a:hover { background: var(--sonne-hell); color: var(--nacht); }
}
@media (prefers-reduced-motion: reduce) {
  .knopf, .knopf:active, .menue summary:active { transform: none; }
  .js .menue nav, .js .menue.ist-offen nav { transform: none; }
  .menue-icon::before, .menue-icon::after { transition: none; }
}
.knopf-hell { background: var(--weiss); }
.knopf.is-ph { box-shadow: none; transform: none; border-style: dashed; color: #4a4f72; }

.kicker {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  color: var(--dur-tief); font-size: 1.05rem; letter-spacing: 0.02em; margin: 0 0 0.3rem;
}
.kicker a { color: inherit; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero-buehne {
  position: relative;
  background: linear-gradient(90deg, var(--sonne) 50%, var(--regen) 50%);
  padding: 2.75rem var(--rand) 2.25rem;
  display: flex; justify-content: center;
}
/* Regen auf der Moll-Seite */
.hero-buehne::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 50%;
  background-image: repeating-linear-gradient(105deg, transparent 0 22px, rgba(255, 255, 255, 0.45) 22px 24px, transparent 24px 46px);
  -webkit-mask-image: linear-gradient(transparent 12%, #000 30%);
  mask-image: linear-gradient(transparent 12%, #000 30%);
  pointer-events: none;
}
/* Wiese */
.hero-buehne::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2rem; background: var(--wiese); z-index: 0;
}
.hero-cover { position: relative; z-index: 2; width: min(54vw, 300px); }
.hero-cover img { border-radius: 4px; box-shadow: 0 18px 40px rgba(29, 33, 69, 0.35), 0 2px 6px rgba(29, 33, 69, 0.25); transform: rotate(-1.5deg); }
.deko-sonne { position: absolute; z-index: 1; width: 22vw; max-width: 130px; left: 4%; top: 1.2rem; }
.deko-wolke { position: absolute; z-index: 1; width: 34vw; max-width: 220px; right: 2%; top: 1rem; }
.deko-note { position: absolute; z-index: 1; font-size: clamp(2rem, 6vw, 3.4rem); color: var(--nacht); line-height: 1; }
.deko-note-dur { left: 8%; bottom: 3.5rem; }
.deko-note-moll { right: 7%; bottom: 3.5rem; color: var(--nacht); }

.hero-text { background: var(--sonne); padding: 2rem var(--rand) 2.5rem; }
.hero-text > * { max-width: 40rem; margin-left: auto; margin-right: auto; }
.hero-text h1 { margin-bottom: 0.6rem; }
.h1-unter { display: block; font-size: 0.45em; font-weight: 600; margin-top: 0.35rem; color: var(--moll); }
.claim { font-family: var(--serif-titel); font-style: italic; font-weight: 600; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); line-height: 1.3; color: var(--nacht); border-left: 5px solid var(--dur); padding-left: 0.9rem; }
.hero-fakten { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-weight: 600; }
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.25rem auto 1.75rem; }
.hero-knoepfe .knopf { flex: 1 1 14rem; }

@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: 1fr 1fr; background: linear-gradient(90deg, var(--sonne) 50%, var(--regen) 50%); }
  .hero-text { order: 1; background: none; padding: 3rem 3rem 4rem max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand))); display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
  .hero-text > * { margin-left: 0; max-width: 34rem; }
  .hero-buehne { order: 2; background: none; padding: 5rem 2rem 4.5rem; align-items: center; position: static; }
  .hero-buehne::after { width: 50%; }
  .hero-buehne::before { height: 3rem; }
  .hero-cover { width: 340px; }
  .deko-sonne { left: calc(50% - 160px); top: 1.5rem; width: 120px; opacity: 0.9; z-index: 0; }
  .deko-wolke { right: 4%; top: 2rem; width: 220px; }
  .deko-note-dur { left: 3%; bottom: 4.5rem; }
  .deko-note-moll { right: 6%; bottom: 4.5rem; }
}

/* ---------- Abschnitte: abwechselnd Dur und Moll ---------- */
.abschnitt { padding: 3.5rem 0; position: relative; }
@media (min-width: 900px) { .abschnitt { padding: 5rem 0; } }
.abschnitt.dur { background: var(--sonne-hell); }
.abschnitt.moll { background: var(--regen-hell); }
.abschnitt.dur::before, .abschnitt.moll::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
}
.abschnitt.dur::before { background: linear-gradient(90deg, var(--sonne-tief), var(--sonne)); }
.abschnitt.moll::before { background: linear-gradient(90deg, var(--regen), var(--moll)); }
.abschnitt.moll .kicker { color: var(--moll); }

.abschnitt.nacht { background: var(--moll); color: #fff; }
.abschnitt.nacht h2, .abschnitt.nacht .kicker { color: #fff; }
.abschnitt.nacht .kicker { color: var(--sonne); }
.abschnitt.nacht a { color: var(--sonne); }

.zwischen { margin-top: 2.5rem; }
.fakten { font-size: 0.95em; color: #3d4166; margin-top: 1.5rem; }
.gross { font-size: 1.2em; }

/* Das Buch */
.klappentext { max-width: 44rem; }
.klappentext p:first-child::first-letter {
  font-family: var(--serif-titel); font-style: italic; font-weight: 700;
  float: left; font-size: 3.6em; line-height: 0.85; margin: 0.08em 0.1em 0 0; color: var(--dur-tief);
}
.inhalt { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
@media (min-width: 900px) { .inhalt { grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; } }
.inhalt li {
  display: flex; gap: 0.9rem; align-items: flex-start;
  background: #fff; border: 2px solid #f1dfa3; border-radius: var(--radius); padding: 1rem 1.1rem;
}
.inhalt li.inhalt-limerick { background: #f8f9fc; border-color: #d3d8e4; }
.inhalt h3 { font-size: 1.3rem; margin: 0 0 0.25rem; }
.inhalt p { margin: 0; font-size: 0.95em; }
.inhalt-zeichen { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; background: var(--sonne); color: var(--nacht); }
.inhalt-limerick .inhalt-zeichen { background: var(--regen); color: #fff; }

/* Leseprobe */
.leseprobe-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .leseprobe-grid { grid-template-columns: 0.8fr 1.2fr; align-items: start; } }
.limerick-karte {
  margin: 0; background: #fff; border-radius: var(--radius); padding: 1.5rem 1.25rem;
  border-left: 8px solid var(--sonne-tief); box-shadow: 0 6px 20px rgba(29, 33, 69, 0.1);
}
.limerick-karte figcaption { font-family: var(--serif-titel); font-style: italic; font-weight: 700; font-size: 1.4rem; margin-bottom: 0.8rem; }
.vers { font-style: italic; font-size: 1em; line-height: 1.7; }
@media (min-width: 600px) { .vers { font-size: 1.1em; } }
.nebenzeile { font-size: 0.9em; color: #4a4f72; }
.anriss-titel { font-weight: 700; color: var(--moll); }
.anriss h3 { font-size: 1.3rem; }

/* Bestellen */
.vorab-hinweis { background: #fff; border-left: 6px solid var(--dur); border-radius: var(--radius); padding: 1rem 1.25rem; max-width: 44rem; font-size: 1.05em; }
.bestell-grid { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .bestell-grid { grid-template-columns: repeat(3, 1fr); } }
.bestell-karte { background: #fff; border-radius: var(--radius); padding: 1.5rem; border: 2px solid #f1dfa3; }
.shops { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.shops li { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.shops .knopf { width: 100%; }
.shops small { font-size: 0.85em; color: #4a4f72; }
.isbn-gross { font-family: var(--serif-titel); font-style: italic; font-weight: 700; font-size: 1.35rem; }

/* Hörprobe */
.hoer-player { width: 100%; max-width: 40rem; }
.hoer-ph { padding: 1.5rem; border: 2px dashed #c2185b; border-radius: var(--radius); background: #fff; }

/* Autor */
.autor-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 800px) { .autor-grid { grid-template-columns: 283px 1fr; gap: 3rem; } }
.autor-foto img { border-radius: 50%; border: 6px solid var(--sonne); width: min(220px, 60vw); margin: 0 auto; }
@media (min-width: 800px) { .autor-foto img { width: 283px; } }

/* Weitere Bücher */
.buecher { display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .buecher { grid-template-columns: 1fr 1fr; } }
.buch-karte { background: #fff; border-radius: var(--radius); padding: 1.5rem; border: 2px solid #f1dfa3; display: flex; flex-direction: column; }
.buch-karte > p:last-child { margin-top: auto; margin-bottom: 0; }
.buch-hinweis { margin-top: auto; font-style: italic; color: #4a4f72; }
.buch-karte > .buch-knoepfe { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0; }
.buch-logo { height: 8rem; display: flex; align-items: center; margin-bottom: 1rem; }
.buch-logo img { max-height: 8rem; width: auto; }
.buch-unter { font-style: italic; color: #4a4f72; margin-top: -0.4rem; }
.buch-karte .is-ph { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; height: auto; }

/* Für Chöre */
.chor-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .chor-grid { grid-template-columns: 1.3fr 1fr; align-items: center; } }
.chor-karte { background: #fff; border-radius: var(--radius); padding: 1.75rem; border-top: 8px solid var(--moll); box-shadow: 0 6px 20px rgba(29, 33, 69, 0.1); }
.haken { padding: 0; list-style: none; }
.haken li { padding-left: 2rem; position: relative; margin-bottom: 0.5rem; }
.haken li::before { content: '♪'; position: absolute; left: 0.3rem; color: var(--moll); font-weight: 700; }

/* Leserstimmen */
.stimmen { list-style: none; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 800px) { .stimmen { grid-template-columns: 1fr 1fr; } }
.stimmen blockquote { margin: 0; background: #fff; border-radius: var(--radius); padding: 1.5rem; border-left: 6px solid var(--dur); }
.stimmen blockquote p { font-style: italic; font-size: 1.1em; }
.stimmen blockquote img { border-radius: 8px; margin-bottom: 1rem; }
.stimmen footer { font-weight: 600; }
.stimmen-leer { font-style: italic; max-width: 40rem; }

/* Presse */
.presse-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .presse-grid { grid-template-columns: 1.4fr 1fr; } }
.downloads { padding-left: 1.2rem; }
.downloads li { margin-bottom: 0.9rem; }

/* Kontakt */
.kontakt-liste { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 0.8rem; }
.kontakt-liste li { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline; }
.kontakt-art { font-weight: 700; min-width: 6.5rem; }
.kontakt-liste a { word-break: break-word; }
.newsletter { background: #fff; border-radius: var(--radius); padding: 1.75rem; border: 2px solid #f1dfa3; max-width: 44rem; }

/* ---------- Unterseiten ---------- */
.unterseite { padding: 2.5rem 0 4rem; background: linear-gradient(180deg, var(--sonne-hell), var(--weiss) 20rem); }
.unterseite h2 { font-size: 1.6rem; margin-top: 2rem; }
.lead { font-size: 1.15em; }
.lesetext h2 { font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.4rem); margin-top: 2.5rem; }
.lesetext h3 { font-size: 1.35rem; margin-top: 2rem; color: var(--moll); }
.lesetext p { hyphens: auto; }
.weiter-karte { margin-top: 3rem; background: var(--sonne); border-radius: var(--radius); padding: 1.75rem; }

/* ---------- Fußzeile ---------- */
.fuss { background: var(--nacht); color: #e9ecf3; padding: 2.5rem 0 3rem; }
.fuss a { color: var(--sonne); }
.fuss-titel { font-family: var(--serif-titel); font-style: italic; font-weight: 700; font-size: 1.5rem; color: #fff; margin-bottom: 0.3rem; }
.fuss-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1rem 0; }
.fuss-links a { display: inline-block; padding: 0.3rem 0; }
.fuss-klein { font-size: 0.85em; color: #c3c8da; }