/* Hochzeit Lena & Robert – „Unser roter Faden“.
   Wie die Fotoleine im Dachraum des Jugendhauses: Abzüge hängen mit Holzklammern
   an einem roten Faden, der sich von unserem ersten Foto bis zum Knappenberg
   durch die ganze Seite zieht. Kühles Weiß, viel Luft, der Faden ist die einzige
   kräftige Farbe. Bildunterschriften wie mit der Hand auf die Abzüge geschrieben.

   Schriften (SIL OFL, selbst gehostet): Literata für Text und Überschriften,
   Caveat für Bildunterschriften. */

@font-face { font-family: "Literata"; src: url("fonts/literata/literata-latin-opsz-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/literata/literata-latin-opsz-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat/caveat-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --bg: #fbfbf9;
  --bg-2: #eef1f2;
  --field: #ffffff;
  --ink: #2a2523;
  --ink-soft: #6e6560;
  --akzent: #a51c30;
  --on-akzent: #fbfbf9;
  --weg: #c8243b;
  --holz: #cfa77b;
  --line: #e4e1dc;
  --line-strong: #c4beb7;
  --danger: #a3352a;
  /* Bänder der Gäste im Wunschknoten: gedeckt, damit der rote Faden die kräftigste Farbe bleibt */
  --band-1: #cfa77b;
  --band-2: #9bb08f;
  --band-3: #8ea6bd;
  --band-4: #d8a3a8;
  --band-5: #d9b45f;
  --band-6: #ab9cc4;
  --band-7: #6f9a9a;

  --font-text: "Literata", Charter, "Sitka Text", Cambria, Georgia, serif;
  --font-display: var(--font-text);
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --step--1: 0.833rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
  --step-hero: clamp(3.25rem, 1.6rem + 7vw, 7.5rem);

  --gutter: clamp(1rem, 4vw, 3rem);
  --measure: 38rem;
  --radius: 6px;
  --foto-radius: 0;

  color-scheme: light;
}

/* ---------------------------------------------------------------- Basis */

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

html {
  font-size: 106.25%;
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 60rem) { html { font-size: 112.5%; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.62;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; margin: 0; text-wrap: balance; }
h2 { font-size: var(--step-3); color: var(--akzent); }
h3 { font-size: var(--step-1); font-weight: 600; margin: 1.6em 0 0.4em; }
p { margin: 0 0 0.9em; }
strong { font-weight: 600; }
img { max-width: 100%; }

a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

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

.skip { position: absolute; left: -999px; top: 0.5rem; z-index: 50; background: var(--bg); padding: 0.5rem 1rem; }
.skip:focus { left: 0.5rem; }

.hint { color: var(--ink-soft); font-size: var(--step--1); font-family: var(--font-ui); }

/* ---------------------------------------------------------------- Formularelemente */

input[type="text"], input[type="password"], input[type="date"], input[type="time"],
input[type="datetime-local"], select, textarea {
  width: 100%;
  font: inherit;
  font-size: max(1rem, 16px);
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
}
textarea { resize: vertical; min-height: 5.5rem; line-height: 1.5; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }
[aria-invalid="true"] { border-color: var(--danger); }

button, .button, .button-quiet, .button-danger {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.75rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
button, .button { background: var(--akzent); color: var(--on-akzent); }
button:hover, .button:hover { filter: brightness(1.1); }
.button-quiet { background: transparent; color: var(--akzent); border-color: var(--line-strong); }
.button-quiet:hover { border-color: var(--akzent); filter: none; }
.button-danger { background: var(--danger); color: #fff; }

/* ---------------------------------------------------------------- Landingpage */

.gate {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: var(--gutter);
  padding-bottom: clamp(2rem, 9vh, 6rem);
  overflow: hidden;
}
.gate-inner { position: relative; max-width: 34rem; width: 100%; }
.gate-names { font-size: var(--step-hero); line-height: 0.95; color: var(--akzent); }
.gate-date { font-size: var(--step-1); color: var(--ink-soft); margin: 0.8rem 0 2.2rem; }
.gate-form label { display: block; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0.4rem; }
.gate-row { display: flex; gap: 0.5rem; }
.gate-row input { flex: 1; min-width: 0; }
.gate-error { color: var(--danger); font-family: var(--font-ui); font-size: var(--step--1); margin-top: 0.6rem; }

/* ---------------------------------------------------------------- Navigation */

.topnav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: var(--step--1);
}
.topnav-home { font-family: var(--font-display); font-size: var(--step-1); text-decoration: none; padding: 0.5rem 0; white-space: nowrap; }
.topnav ul {
  display: flex;
  gap: 0.25rem;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(to right, #000 85%, transparent);
}
.topnav ul::-webkit-scrollbar { display: none; }
.topnav li a {
  display: block;
  padding: 0.9rem 0.6rem;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.topnav li a:hover, .topnav li a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--weg); }
@media (min-width: 70rem) { .topnav ul { mask-image: none; } }

/* ---------------------------------------------------------------- Der Weg (Linie über Hero, Etappen, Wochenende) */

.seite { position: relative; }
.seite > header, .seite > main { position: relative; z-index: 1; }

.weg-linie {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
.weg-linie path { fill: none; }
.weg-linie .weg-pfad { stroke: var(--weg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.weg-pin { position: absolute; display: block; width: 0; height: 0; z-index: 2; }

/* Die Linie läuft hinter Überschriften durch, nicht durch die Schrift */
.block-weg > h2, .block-wochenende > h2, .block-knoten > h2, .trail-day h3, .weg-intro, .weg-schluss, .knoten-gruss {
  position: relative;
  z-index: 1;
  width: fit-content;
  background: var(--bg);
}

/* ---------------------------------------------------------------- Hero */

.hero {
  position: relative;
  min-height: min(88vh, 54rem);
  display: flex;
  align-items: flex-end;
  padding: var(--gutter);
  padding-bottom: clamp(2rem, 7vh, 4.5rem);
  overflow: hidden;
}
.hero-text { position: relative; }
.hero-names { font-size: var(--step-hero); line-height: 0.95; color: var(--akzent); }
.hero-date { font-size: var(--step-2); line-height: 1.3; margin: 1rem 0 0; text-wrap: balance; }
.hero-countdown { margin: 1.2rem 0 0; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-soft); }
.hero-foto { position: relative; margin: 0; }
.hero-foto img { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------- Abschnitte */

main { padding: 0 var(--gutter); }

.intro, .block {
  max-width: 68rem;
  margin: 0 auto;
}
.intro { padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(1rem, 4vw, 2.5rem); }
.intro p { max-width: var(--measure); }
.intro .lede { font-size: var(--step-2); line-height: 1.38; max-width: 34rem; }

.block { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.block > h2 { margin-bottom: 1.2rem; }
.block > p, .prose { max-width: var(--measure); }
.columns h3:first-child { margin-top: 0; }

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.5rem 2.5rem;
}

/* ---------------------------------------------------------------- Fotos */

.foto { margin: 0; position: relative; }
.foto img { display: block; width: 100%; height: auto; border-radius: var(--foto-radius); }
.foto figcaption { font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.45rem; line-height: 1.4; }

.bild-fehlt {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  width: 100%;
  padding: 1rem;
  background: var(--bg-2);
  border: 2px dashed var(--line-strong);
  border-radius: var(--foto-radius);
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  line-height: 1.4;
  text-align: center;
}

/* Fotoreihe bei den Tagen: auf dem Handy zum Wischen */
.fotoreihe {
  display: flex;
  gap: 0.9rem;
  margin: 1.25rem calc(-1 * var(--gutter)) 0 0;
  padding: 0 var(--gutter) 0.5rem 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.fotoreihe .foto { flex: 0 0 min(15rem, 68vw); scroll-snap-align: start; }
.fotoreihe .foto--breit { flex-basis: min(24rem, 82vw); }
.fotoreihe .foto img { aspect-ratio: 4 / 3; object-fit: cover; }
.fotoreihe .foto--hoch img { aspect-ratio: 4 / 5; }
@media (min-width: 60rem) {
  .fotoreihe {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 52rem;
    overflow: visible;
    margin-right: 0;
    padding-right: 0;
  }
  .fotoreihe .foto img, .fotoreihe .foto--hoch img { aspect-ratio: 1; }
  .fotoreihe .foto--breit { grid-column: span 2; }
  .fotoreihe .foto--breit img { aspect-ratio: 3 / 2; }
}

/* Galerie der Unterkunft */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 42vw), 1fr));
  grid-auto-flow: dense;
  gap: 0.9rem;
  margin: 2rem 0;
}
.galerie .foto { display: flex; flex-direction: column; }
.galerie .foto img { aspect-ratio: 4 / 3; object-fit: cover; }
.galerie .foto--gross { grid-column: span 2; grid-row: span 2; }
.galerie .foto--gross img { flex: 1; aspect-ratio: auto; min-height: 0; height: 100%; }

/* ---------------------------------------------------------------- Unser roter Faden: Etappen */

.weg-intro { font-size: var(--step-1); max-width: 30rem; }

.etappen { list-style: none; margin: 3rem 0 1rem; padding: 0; }
.etappe { position: relative; margin-bottom: 3.5rem; width: min(22rem, 82%); }
.etappe--paar { width: min(30rem, 96%); }
.etappe--rechts { margin-left: auto; }

@media (min-width: 48rem) {
  .etappe { width: 38%; margin-bottom: 0; }
  .etappe--hoch { width: 27%; }
  .etappe--paar { width: 46%; }
  .etappe--links { margin-left: 3%; }
  .etappe--rechts { margin-right: 3%; }
  .etappe + .etappe { margin-top: -3.5rem; }
}

/* Abzüge: weißer Rand, leicht schief, jede mit eigener Klammer am Faden */
.abzug {
  position: relative;
  display: block;
  background: #fff;
  padding: 8px;
  box-shadow: 0 1px 2px rgba(42, 37, 35, 0.12), 0 10px 22px -10px rgba(42, 37, 35, 0.3);
  transform: rotate(var(--dreh, -1.2deg));
}
.abzug img, .abzug .bild-fehlt { display: block; width: 100%; height: auto; }
/* Sehr hohe Fotos (z. B. Handy-Bildschirmfotos) auf 3:4 beschneiden */
.etappe--hoch .abzug img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; }
.abzug .weg-pin { left: 50%; top: 2px; }

.abzuege { display: flex; align-items: flex-start; }
.abzuege .abzug { flex: 1 1 100%; min-width: 0; }
.abzuege--2 .abzug { flex-basis: 56%; }
.abzuege--2 .abzug + .abzug { margin: 2.4rem 0 0 -12%; }

.etappe--links  .abzug { --dreh: -1.5deg; }
.etappe--rechts .abzug { --dreh: 1.3deg; }
.etappe--links  .abzug + .abzug { --dreh: 2deg; }
.etappe--rechts .abzug + .abzug { --dreh: -1.8deg; }
.etappe:nth-child(4n) .abzug:first-child { --dreh: 0.4deg; }

.foto--weg figcaption {
  font-family: var(--font-hand);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
  text-align: center;
  margin-top: 0.9rem;
}

.weg-schluss { font-size: var(--step-1); max-width: 30rem; margin: 4.5rem 0 0 auto; text-align: right; }

/* ---------------------------------------------------------------- Wochenende */

.trail { list-style: none; margin: 0; padding: 0 0 0 2rem; }
.trail-day { position: relative; padding-bottom: 3.5rem; }
.trail-day:last-child { padding-bottom: 0; }
.trail-day .weg-pin--tag { left: -1.55rem; top: 1.05rem; }
.trail-day h3 { margin: 0; font-size: var(--step-2); font-weight: 400; }
.trail-weekday { font-weight: 600; }
.trail-place { color: var(--ink-soft); font-style: italic; margin: 0.15rem 0 1rem; }

.trail-steps { margin: 0; max-width: 42rem; }
.trail-steps dt { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600; color: var(--akzent); font-variant-numeric: lining-nums tabular-nums; }
.trail-steps dd { margin: 0 0 0.9rem; }
@media (min-width: 40rem) {
  .trail-steps { display: grid; grid-template-columns: 8.5rem 1fr; column-gap: 1.25rem; }
  .trail-steps dt { padding-top: 0.2rem; }
}

/* ---------------------------------------------------------------- Wunschknoten */

/* Eingerückt wie die Tage, damit der Faden links daneben weiterläuft */
.knoten-inhalt { padding-left: 2rem; display: grid; gap: 2rem 3rem; margin-top: 1.5rem; }
@media (min-width: 52rem) {
  .knoten-inhalt { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: start; }
}
.knoten-text h3 { margin-top: 1.4rem; }

.knoten-schritte { margin: 0; padding-left: 1.6rem; max-width: var(--measure); }
.knoten-schritte li { margin-bottom: 0.8rem; padding-left: 0.3rem; }
.knoten-schritte li::marker { font-family: var(--font-hand); font-size: 1.5rem; font-weight: 600; color: var(--weg); }

/* Die Skizze ist auf Weiß gezeichnet und läuft an den Rändern aus: ohne Rahmen, mit dem Grund verschmolzen */
.knoten-skizze { justify-self: center; width: min(24rem, 100%); }
.knoten-skizze img {
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%);
}
@media (min-width: 52rem) { .knoten-skizze { position: sticky; top: 5rem; } }

/* Das Ende des Fadens: Knoten und Bänder zeichnet assets/app.js */
.knoten-ende { position: relative; padding-top: 13.5rem; text-align: center; }
.knoten-ende .weg-pin--umweg { left: 0.45rem; top: 0; }
.knoten-ende .weg-pin--knoten { left: 50%; top: 3.5rem; }
.knoten-ende .weg-pin { width: 0; height: 0; margin: 0; background: none; box-shadow: none; }
.knoten-gruss { font-family: var(--font-hand); font-size: 1.75rem; font-weight: 500; line-height: 1.1; margin: 0 auto; padding: 0 0.5rem; }

.weg-linie .weg-pfad.weg-pfad--rand { stroke: var(--bg); stroke-width: 7; }
.weg-linie .knoten-band { fill: none; stroke-width: 3; stroke-linecap: round; }

/* ---------------------------------------------------------------- Unterkunft & Kleidung */

.notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem 2.5rem;
  padding: 1.4rem 1.5rem;
  background: var(--bg-2);
  border-left: 4px solid var(--weg);
  max-width: 46rem;
}
.note h3 { margin: 0 0 0.3rem; font-size: var(--step-0); }
.note p { margin: 0; }

.dress { margin: 0; max-width: 42rem; }
.dress dt { font-size: var(--step-1); font-weight: 600; margin-top: 1.4rem; }
.dress dt:first-child { margin-top: 0; }
.dress dd { margin: 0.25rem 0 0; }

/* ---------------------------------------------------------------- Packliste */

.checklist { list-style: none; margin: 0; padding: 0; columns: 2 17rem; column-gap: 2.5rem; max-width: 46rem; }
.checklist li { break-inside: avoid; border-bottom: 1px solid var(--line); }
.checklist label { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.6rem 0; cursor: pointer; }
.checklist input { accent-color: var(--akzent); width: 1.1rem; height: 1.1rem; flex: none; transform: translateY(0.15rem); }
.checklist label:has(input:checked) { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--line-strong); }

/* ---------------------------------------------------------------- Zusage */

.message { max-width: var(--measure); padding: 1rem 1.25rem; border-radius: var(--radius); margin: 0 0 1.5rem; font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.5; }
.message p:last-child { margin-bottom: 0; }
.message-ok { background: var(--bg-2); border-left: 4px solid var(--akzent); }
.message-error { background: color-mix(in srgb, var(--danger) 10%, var(--bg)); border-left: 4px solid var(--danger); }

.copy { display: flex; gap: 0.5rem; margin-top: 0.75rem; max-width: 34rem; }
.copy input { font-family: var(--font-ui); font-size: 0.85rem; flex: 1; min-width: 0; }

.rsvp-heading { margin: 0 0 0.3rem; font-size: var(--step-2); font-weight: 400; }
.rsvp-heading + .hint { margin-bottom: 1.5rem; }

.answer { max-width: 44rem; padding: 1.25rem 0 1.25rem 1.25rem; border-left: 3px solid var(--akzent); margin-bottom: 1.75rem; }
.answer.is-editing { border-left-color: var(--weg); }
.answer dl { margin: 0; }
.answer dt { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.8rem; }
.answer dt:first-child { margin-top: 0; }
.answer dd { margin: 0.1rem 0 0; }
.answer dd ul { margin: 0; padding-left: 1.1rem; }
.answer .empty { color: var(--ink-soft); font-style: italic; }
.answer-meta { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-soft); margin: 1rem 0 0.75rem; }
.answer-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; }

.confirm summary { list-style: none; }
.confirm summary::-webkit-details-marker { display: none; }
.confirm[open] { flex-basis: 100%; }
.confirm[open] summary { border-color: var(--akzent); }
.confirm > form, .confirm > .copy { margin-top: 0.75rem; }
.confirm > form p { font-family: var(--font-ui); font-size: var(--step--1); margin-bottom: 0.6rem; }

.rsvp { max-width: 40rem; margin-top: 1rem; }
.answer ~ .rsvp { margin-top: 2.5rem; }
.field { border: 0; margin: 0 0 1.6rem; padding: 0; min-width: 0; }
.field > label, .field > legend { display: block; font-weight: 600; padding: 0; margin-bottom: 0.35rem; }
.field .req { font-weight: 400; color: var(--ink-soft); font-size: var(--step--1); font-family: var(--font-ui); }
.field-desc { color: var(--ink-soft); font-size: var(--step--1); font-family: var(--font-ui); margin: -0.1rem 0 0.5rem; }
.field-error { color: var(--danger); font-family: var(--font-ui); font-size: var(--step--1); margin: 0.4rem 0 0; }

.choices { display: grid; gap: 0.4rem; }
.choices-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.choice { display: flex; gap: 0.65rem; align-items: baseline; cursor: pointer; padding: 0.15rem 0; }
.choice input { accent-color: var(--akzent); width: 1.1rem; height: 1.1rem; flex: none; transform: translateY(0.15rem); }

.rsvp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ---------------------------------------------------------------- Fuß */

.footer { padding: 3rem var(--gutter) 5rem; text-align: center; color: var(--ink-soft); }
.footer p:first-child { font-family: var(--font-display); font-size: var(--step-2); color: var(--akzent); margin-bottom: 1rem; }
.footer a { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-soft); }
.footer-links { display: flex; justify-content: center; gap: 1.5rem; }

/* Impressum */
.gate-impressum { position: absolute; right: var(--gutter); bottom: 1rem; margin: 0; font-family: var(--font-ui); font-size: var(--step--1); }
.gate-impressum a { color: var(--ink-soft); }
.rechtliches { max-width: var(--measure); margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) var(--gutter) 5rem; }
.rechtliches h1 { font-size: var(--step-3); margin: 1.5rem 0 1rem; }
.rechtliches h2 { font-size: var(--step-1); font-weight: 600; margin: 2rem 0 0.4rem; }
.rechtliches address { font-style: normal; }
.rechtliches-zurueck { font-family: var(--font-ui); font-size: var(--step--1); }
.rechtliches .fehlt { color: var(--danger); font-style: italic; }

/* ---------------------------------------------------------------- Faden, Klammern, Hero, Landingpage */

h2 { color: var(--ink); }
.hero-names, .gate-names { color: var(--ink); font-weight: 300; letter-spacing: -0.015em; }

.weg-linie .weg-pfad { stroke-width: 2.2; }

/* Holzklammer */
.weg-pin {
  width: 12px; height: 30px; margin: -15px 0 0 -6px;
  background: var(--holz);
  border-radius: 2px;
  box-shadow: inset -4px 0 0 rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
}
/* Bei den Tagen ein roter Knoten im Faden */
.weg-pin--tag { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--weg); box-shadow: none; }
.weg-pin--ziel { width: 18px; height: 18px; margin: -9px 0 0 -9px; }

/* Fotos bei Wochenende und Unterkunft: Abzüge mit Rand, handschriftlich beschriftet */
.fotoreihe .foto img, .galerie .foto img {
  background: #fff;
  padding: 6px;
  box-shadow: 0 1px 2px rgba(42, 37, 35, 0.12), 0 8px 16px -10px rgba(42, 37, 35, 0.3);
}
.foto figcaption { font-family: var(--font-hand); font-size: 1.4rem; font-weight: 500; line-height: 1.15; color: var(--ink); }

/* Hero: Namen links, das Hauptbild hängt rechts als erster Abzug am Faden */
.hero { min-height: 0; display: grid; gap: 2.5rem; align-items: end; padding-top: clamp(3rem, 8vw, 6rem); }
.hero-foto { justify-self: center; width: min(30rem, 88%); }
.hero-foto .abzug { --dreh: 1.6deg; padding: 10px; }
@media (min-width: 52rem) {
  .hero { grid-template-columns: 1fr 1fr; align-items: center; }
  .hero-foto { grid-column: 2; grid-row: 1; }
}

.notes { border-left-color: var(--weg); }

/* Landingpage: ein loser Faden mit einer Schlaufe */
.gate-faden { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gate-faden path { fill: none; stroke: var(--weg); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (max-aspect-ratio: 4/5) {
  .gate-faden { left: -50%; width: 200%; height: 70%; }
}
@media (prefers-reduced-motion: no-preference) {
  .gate-faden path { stroke-dasharray: 1 1; animation: faden-zieht 2.6s 0.2s cubic-bezier(0.5, 0, 0.2, 1) both; }
}
@keyframes faden-zieht { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

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

/* ---------------------------------------------------------------- Kontakt & Adressen */

.block-kontakt h3 { margin: 2.2rem 0 1rem; }
.block-kontakt > h2 + h3 { margin-top: 0.5rem; }

/* Orte wie beschriftete Karteikarten an der Pinnwand: weiß, leicht schief, mit Klammer */
.orte {
  list-style: none;
  margin: 0;
  padding: 0.75rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 2rem 1.5rem;
  margin-bottom: 2rem;
}
@media (min-width: 60rem) { .orte { grid-template-columns: repeat(3, 1fr); } }
.orte-gruppe { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 0.6rem; }
.ort {
  position: relative;
  background: #fff;
  padding: 1.4rem 1.25rem 1.1rem;
  box-shadow: 0 1px 2px rgba(42, 37, 35, 0.12), 0 10px 22px -12px rgba(42, 37, 35, 0.3);
  transform: rotate(-0.6deg);
}
.ort:nth-child(even) { transform: rotate(0.7deg); }
.ort::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  width: 12px;
  height: 30px;
  margin-left: -6px;
  background: var(--holz);
  border-radius: 2px;
  box-shadow: inset -4px 0 0 rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
}
.ort p, .ort address { margin: 0; }
.ort-wann { font-family: var(--font-hand); font-size: 1.45rem; font-weight: 500; line-height: 1.1; color: var(--weg); }
.ort .ort-name { font-weight: 600; margin-top: 0.2rem; }
.ort address { font-style: normal; color: var(--ink-soft); line-height: 1.5; margin-top: 0.15rem; }
.ort .ort-links { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin-top: 0.7rem; font-family: var(--font-ui); font-size: var(--step--1); }

/* Ansprechpersonen */
.ansprech { margin: 0; max-width: 46rem; }
.ansprech > div { display: grid; gap: 0.2rem 1.5rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.ansprech > div:last-child { border-bottom: 1px solid var(--line); }
.ansprech dt { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-soft); padding-top: 0.2rem; }
.ansprech dd { margin: 0; }
.ansprech dd p { margin: 0 0 0.2rem; }
.ansprech .folgt { color: var(--ink-soft); font-style: italic; font-size: var(--step--1); }
@media (min-width: 40rem) {
  .ansprech > div { grid-template-columns: 15rem 1fr; }
}