/* Liebespaare – Gestaltung
   Palette: Tanne, Stein, Beere. Schrift: Systemschriften, keine externen Anfragen (Datenschutz). */

:root {
  --tanne: #1e3b34;
  --tanne-hell: #2c5148;
  --stein: #f0f1ed;
  --papier: #fafaf8;
  --text: #1c2623;
  --nebel: #56635e;
  --beere: #8e2c48;
  --beere-dunkel: #6f2038;
  --linie: #d5d9d3;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;

  --rand: clamp(1.25rem, 4vw, 2.5rem);
  --breit: 72rem;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
}

a { color: var(--beere); text-underline-offset: 0.18em; }
a:hover { color: var(--beere-dunkel); }

:focus-visible {
  outline: 3px solid var(--beere);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--tanne); color: var(--stein); padding: 0.6rem 1rem; z-index: 10;
}
.skip:focus { left: 0; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 0.6em;
  color: var(--tanne);
}
h1 { font-size: clamp(2.7rem, 6.4vw, 4.8rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.4rem; }

p { margin: 0 0 1em; max-width: 62ch; }

/* ---------- Kopf ---------- */
.kopf { border-bottom: 1px solid var(--linie); background: var(--papier); }
.kopf-innen {
  max-width: var(--breit); margin: 0 auto; padding: 1rem var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.wortmarke {
  font-family: var(--serif); font-size: 1.5rem; color: var(--tanne);
  text-decoration: none; letter-spacing: 0.01em;
}
.wortmarke:hover { color: var(--tanne); }

.menue summary {
  list-style: none; cursor: pointer; padding: 0.45rem 0.9rem;
  border: 1px solid var(--tanne); border-radius: 999px; color: var(--tanne);
  font-size: 0.95rem;
}
.menue summary::-webkit-details-marker { display: none; }
.menue ul { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.2rem; }
.menue nav a {
  display: block; padding: 0.5rem 0; color: var(--text); text-decoration: none;
}
.menue nav a:hover, .menue nav a[aria-current="page"] { color: var(--beere); }
.menue nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; }

@media (max-width: 859px) {
  .menue { width: 100%; }
  .menue[open] summary { background: var(--tanne); color: var(--stein); }
}
@media (min-width: 860px) {
  .menue summary { display: none; }
  .menue ul { margin: 0; display: flex; gap: 1.6rem; }
  .menue nav a { padding: 0.3rem 0; font-size: 0.98rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--stein);
  overflow: hidden;
  padding: clamp(2.5rem, 7vw, 5.5rem) var(--rand);
  display: grid;
  gap: 2.5rem;
  max-width: none;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: url("hoehenlinien.svg") right center / cover no-repeat;
  opacity: 0.16;
  pointer-events: none;
}
.hero > * { position: relative; }
.hero-text, .event { width: 100%; max-width: var(--breit); }

.lead { font-size: 1.2rem; line-height: 1.6; color: var(--text); max-width: 34rem; }

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: center;
    padding-left: max(var(--rand), calc((100vw - var(--breit)) / 2 + var(--rand)));
    padding-right: max(var(--rand), calc((100vw - var(--breit)) / 2 + var(--rand)));
    column-gap: 4rem;
  }
}

/* ---------- Eventkarte ---------- */
.event {
  background: var(--tanne);
  color: var(--stein);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-left: 6px solid var(--beere);
}
.event-label { margin: 0 0 0.4rem; font-size: 0.95rem; color: #bcd0c9; }
.event h2 { color: var(--stein); margin-bottom: 0.15em; font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.event-sub { margin: 0 0 1.4rem; color: #d7e3de; }
.event-fakten { margin: 0 0 1.6rem; display: grid; gap: 0.7rem; }
.event-fakten div { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.75rem; align-items: baseline; border-top: 1px solid rgba(240, 241, 237, 0.22); padding-top: 0.7rem; }
.event-fakten dt { color: #bcd0c9; font-size: 0.95rem; }
.event-fakten dd { margin: 0; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-block;
  background: var(--stein); color: var(--tanne);
  padding: 0.85rem 1.5rem; border: 0; border-radius: 2px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.knopf:hover { background: #fff; color: var(--tanne); }
.knopf-beere { background: var(--beere); color: #fff; }
.knopf-beere:hover { background: var(--beere-dunkel); color: #fff; }
.event .knopf:focus-visible { outline-color: var(--stein); }

/* ---------- Abschnitte ---------- */
.spalte-innen { max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); }
section.tage, section.zwei-texte, section.gastgeber, section.anfrage, section.platzhalter {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.tage-raster { display: grid; gap: 2rem; margin-top: 1.5rem; }
.tag { border-left: 3px solid var(--tanne); padding-left: 1.4rem; }
.tag h3 { margin-bottom: 0.4em; }
.tag p { margin-bottom: 0; }
@media (min-width: 860px) {
  .tage-raster { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.kurzfakten { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; color: var(--nebel); }
.kurzfakten li { padding-left: 1.1rem; position: relative; }
.kurzfakten li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.5rem; height: 2px; background: var(--beere); }

.zwei-texte { background: var(--stein); }
.zwei-texte .spalte-innen { display: grid; gap: 2.5rem; }
@media (min-width: 860px) {
  .zwei-texte .spalte-innen { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

.platzhalter { min-height: 40vh; }

/* ---------- Formular ---------- */
.anfrage { background: var(--papier); border-top: 1px solid var(--linie); }
.anfrage form { max-width: 34rem; margin-top: 1.6rem; }
.feld { margin-bottom: 1.2rem; }
.feld label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld textarea {
  width: 100%; font: inherit; color: var(--text);
  padding: 0.7rem 0.8rem; background: #fff;
  border: 1px solid #8a948f; border-radius: 2px;
}
.feld textarea { resize: vertical; }
.hinweis { margin: 0.35rem 0 0; font-size: 0.95rem; color: var(--nebel); }
.feld.haken { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; }
.feld.haken input { width: 1.2rem; height: 1.2rem; margin-top: 0.3rem; accent-color: var(--beere); }
.feld.haken label { font-weight: 400; margin: 0; }

.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung { max-width: 34rem; padding: 1rem 1.2rem; margin: 1.4rem 0; border-left: 5px solid var(--tanne); background: var(--stein); }
.meldung.fehler { border-left-color: var(--beere); background: #f6ecee; }
.meldung p { margin: 0 0 0.4em; }
.meldung ul { margin: 0; padding-left: 1.2rem; }

/* ---------- Fuß ---------- */
.fuss { background: var(--tanne); color: var(--stein); padding: 2.2rem 0; }
.fuss-innen { max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; align-items: baseline; }
.fuss-zeile { margin: 0; font-family: var(--serif); font-size: 1.25rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.fuss a { color: var(--stein); }
.fuss a:hover { color: #fff; }
.fuss :focus-visible { outline-color: var(--stein); }