:root {
  --color-bg: #faf7f2;
  --color-text: #3a3a3a;
  --color-text-muted: #6b6b6b;
  --color-accent: #a98467;
  --color-accent-hover: #8f6c4f;
  --color-border: #cfc6b8;
  --color-card-bg: #ffffff;
  --color-error: #a94442;
  --color-sage: #dce4dd;
  /* Braunbeige: Kopfleiste auf allen Seiten, dazu der Hero der Startseite. */
  --color-beige: #e9dfd1;
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-display: 'Cormorant', Georgia, serif;
  --max-width: 800px;
}

@font-face {
  font-family: 'Cormorant';
  src: url(/assets/Cormorant-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-serif);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}


a {
  color: var(--color-accent);
}

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

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

/* Header / Navigation */

.site-header {
  background: var(--color-beige);
  box-shadow: 0 1px 0 rgba(58, 58, 58, 0.1);
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--color-accent-hover);
  border-radius: 1px;
}

.primary-nav {
  display: none;
  flex-direction: column;
  width: 100%;
}

.primary-nav.open {
  display: flex;
}

.primary-nav a {
  padding: 0.75rem 0;
  color: var(--color-accent-hover);
  text-decoration: none;
  font-size: 1.05rem;
  border-top: 1px solid rgba(58, 58, 58, 0.15);
}

.primary-nav a[aria-current="page"] {
  color: var(--color-text);
  font-weight: bold;
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }

  .nav-wrap {
    flex-wrap: nowrap;
  }

  .primary-nav {
    display: flex !important;
    flex-direction: row;
    width: auto;
    gap: 1.75rem;
  }

  .primary-nav a {
    border-top: none;
    padding: 0;
  }
}

/* Landing page hero */

.hero {
  background: var(--color-beige);
  text-align: center;
  overflow: hidden;
  /* Bleibt beim Scrollen unter der Kopfleiste stehen, waehrend sich erst
     .hero-photo-wrap und danach .page-overlay darueber hinwegschieben. */
  position: sticky;
  top: var(--header-height, 0px);
  z-index: 1;
}

.hero-text {
  padding: 4.5rem 1.5rem 1.5rem;
}

.hero-date {
  color: var(--color-accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

.hero-date::before,
.hero-date::after {
  content: '\2013';
  display: inline-block;
  margin: 0 0.6em;
}

.hero-name {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: 4.8rem;
  line-height: 1.1;
  margin: 0 0 2rem;
}

.hero-tagline {
  color: var(--color-text-muted);
  font-size: 1.35rem;
  margin-bottom: 0.25rem;
}

/* Wandert zunaechst normal mit dem Scrollen nach oben und schiebt sich dabei
   (Schatten an der Oberkante) ueber den stehenbleibenden .hero. Sobald es
   oben an der Kopfleiste ankommt, bleibt es selbst stehen (eigenes
   position:sticky), bis .page-overlay seinerseits darueber hinwegschiebt. */
.hero-photo-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: sticky;
  top: var(--header-height, 0px);
  z-index: 2;
  box-shadow: 0 -16px 32px rgba(58, 58, 58, 0.16);
}

.hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Blumenband - bildet auf der Startseite den Abschluss ganz unten, unterhalb
   des Footer-Texts. "multiply" laesst den hellen Hintergrund der Illustration
   mit dem Seitenhintergrund verschmelzen, statt als weisser Kasten
   aufzutragen. Der Text liegt nicht auf der Illustration, weil dort einzelne
   Stiele bis weit nach oben reichen und er auf jeder Hoehe mit Blueten
   kollidiert. */

.flower-band {
  width: 100%;
  aspect-ratio: 1280 / 645;
  overflow: hidden;
  /* Die Illustration bringt oben rund 1,3 % der Seitenbreite an Leerraum mit.
     Der negative Abstand holt den groesseren Teil davon zurueck, sodass der
     Footer-Text dicht ueber den Blueten sitzt. Prozent statt Pixel, damit es
     mit der Fensterbreite mitskaliert - genau wie der Leerraum selbst. */
  margin-top: -1.1%;
}

.flower-band-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  mix-blend-mode: multiply;
}

/* Schiebt sich dank position:relative + hoeherem z-index beim Scrollen als
   letzte Schicht ueber das inzwischen selbst stehengebliebene
   .hero-photo-wrap. box-shadow gibt dem Schieben etwas Tiefe - gleiche Optik
   wie beim Foto, das vorher ueber den Hero-Text geschoben ist. */
.page-overlay {
  position: relative;
  z-index: 3;
  background: var(--color-bg);
  box-shadow: 0 -16px 32px rgba(58, 58, 58, 0.16);
}

.welcome {
  background: #fff;
  text-align: center;
  padding: 5rem 1.5rem;
}

.welcome-kicker {
  color: var(--color-accent);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 1rem;
  margin-bottom: 2rem;
}

.welcome-text {
  max-width: 620px;
  margin: 0 auto;
  font-size: 1.5rem;
  line-height: 1.75;
  color: var(--color-text);
}

@media (max-width: 600px) {
  .hero-name {
    font-size: 2.8rem;
  }

  /* Im Hochformat waere 16:9 nur ein schmaler Streifen - hier darf das Foto hoeher sein. */
  .hero-photo-wrap {
    aspect-ratio: 4 / 3;
  }

  .welcome-text {
    font-size: 1.2rem;
  }
}

/* Page layout */

main.page {
  max-width: var(--max-width);
  margin: 0 auto;
  /* Kaum Abstand nach unten: darunter folgt der Footer, der seinen eigenen
     mitbringt. */
  padding: 2.5rem 1.25rem 0.5rem;
}

h1 {
  font-size: 2rem;
  letter-spacing: 0.03em;
  margin: 0 0 0.5rem;
}

/* Abschnittsueberschrift mit dem Gewicht der Seitenueberschrift - fuer Seiten
   mit zwei gleichwertigen Teilen, etwa "Orte" und "Hotel". Bleibt ein h2,
   damit die Gliederung fuer Screenreader stimmt. */

h2.section-title {
  font-size: 2rem;
  letter-spacing: 0.03em;
  color: var(--color-text);
  margin: 3.5rem 0 0.5rem;
}

.hero-carousel {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: var(--color-border);
}

.hero-carousel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.hero-carousel-img.active {
  opacity: 1;
}

@media (min-width: 768px) {
  .hero-carousel {
    height: 320px;
  }
}

h2 {
  font-size: 1.4rem;
  margin-top: 2.5rem;
  color: var(--color-accent);
}

h3 {
  font-size: 1.15rem;
  margin-top: 0;
}

.lead {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  margin-top: 0;
}

/* Placeholder / dummy content marker */

.placeholder {
  border: 1px dashed var(--color-border);
  background: #fff;
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  margin: 1.25rem 0;
  color: var(--color-text-muted);
}

.placeholder p:last-child {
  margin-bottom: 0;
}

.placeholder-tag {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--color-accent);
  color: #fff;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}

.wip-icon {
  display: inline-block;
  height: 28px;
  width: auto;
  vertical-align: middle;
  margin-right: 0.5rem;
  border-radius: 4px;
}

.wip-icon-large {
  display: block;
  height: 110px;
  width: auto;
  margin: 0 auto 0.75rem;
  border-radius: 8px;
}

.venue-links {
  margin: 0.5rem 0 0;
}

.venue-links a {
  margin-right: 1rem;
  white-space: nowrap;
}

/* Kontakte */

.contact-role {
  margin: -0.35rem 0 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-placeholder {
  color: var(--color-text-muted);
}

.contact-placeholder .placeholder-tag {
  margin: 0 0 0 0.5rem;
  vertical-align: middle;
}

.map-placeholder {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Cards */

.card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  scroll-margin-top: 5rem;
}

/* Timeline (Zeitplan) */

.timeline {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  border-left: 2px solid var(--color-border);
}

/* Schlusspunkt, damit die Linie nicht einfach aufhoert, sondern sichtbar
   endet - das Gegenstueck zu den Punkten an jedem Programmpunkt oben. */
.timeline::after {
  content: '';
  position: absolute;
  left: -7px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Nur direkte Kinder, damit die Unterpunkte in .sub-timeline (verschachtelt
   in einem Programmpunkt) nicht denselben grossen Punkt + Einzug erben. */
.timeline > li {
  position: relative;
  padding: 0 0 1.5rem 1.5rem;
}

/* Sonst liefe die Linie noch ein Stueck ueber den letzten Punkt hinaus. */
.timeline > li:last-child {
  padding-bottom: 0;
}

.timeline > li::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
}

.timeline .time {
  font-weight: bold;
  color: var(--color-accent);
  display: block;
}

.timeline .place {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

/* Erlaeuternder Absatz unter einem Programmpunkt - etwas groesser als die
   Ortszeile, damit er sich als Fliesstext lesen laesst. */
.timeline .note {
  display: block;
  margin-top: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* Unterpunkte innerhalb eines Programmpunkts (z.B. der grobe Ablauf der
   Feier) - deutlich zurueckhaltender als die Haupt-Timeline: duennere
   Linie, keine grossen Punkte, kleinere Schrift. */
.sub-timeline {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0 0 0 1rem;
  border-left: 1px solid var(--color-border);
}

.sub-timeline li {
  padding: 0.2rem 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.sub-timeline li:last-child {
  padding-bottom: 0;
}

.sub-timeline .sub-time {
  display: inline-block;
  min-width: 3.5em;
  font-weight: bold;
  color: var(--color-accent);
}

/* Footer */

.site-footer {
  text-align: center;
  /* Kein Abstand nach unten: direkt darunter folgt das Blumenband, und der
     Text soll dicht ueber den Blueten sitzen. */
  padding: 2.5rem 1rem 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.site-footer p:last-child {
  margin-bottom: 0;
}

/* Das Blumenband ist auf schmalen Displays kleiner und bringt entsprechend
   weniger eigenen Leerraum mit - sonst beruehrt der Text die obersten
   Blueten. Diese Regel muss nach der Grundregel stehen, sonst gewinnt deren
   padding-Kurzschreibweise. */
@media (max-width: 600px) {
  .site-footer {
    padding-bottom: 0.25rem;
  }
}

.login-footer-link {
  margin-top: 2rem;
  font-size: 0.85rem;
}

.login-footer-link a {
  color: var(--color-text-muted);
}

/* Login page */

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
  text-align: center;
}

.login-card {
  max-width: 360px;
  width: 100%;
}

.login-card h1 {
  font-size: 2rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.login-card .hint {
  color: var(--color-text-muted);
  margin-top: 0;
  margin-bottom: 2rem;
}

.login-card .login-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.login-card input[type="password"] {
  font-family: inherit;
  font-size: 1.1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: #fff;
}

.login-card button {
  font-family: inherit;
  font-size: 1.1rem;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 4px;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
}

.login-card button:hover {
  background: var(--color-accent-hover);
}

.login-card .error {
  color: var(--color-error);
  margin: 0;
}

/* Error page */

.error-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
  text-align: center;
}