:root {
  /* Theme tokens (brand colors live here so pages can drop their per-page duplicates) */
  --green-900: #0b3d2e; /* dunkles Flaschengrün */
  --green-700: #125c45;
  --green-500: #1c7a5e;
  --gold-400: #d4b26a;

  /* Link theming */
  --link-color: var(--gold-400);
  --link-visited: #b0894a;
  --link-hover: #fff2cc;
  --link-outline: rgba(212,178,106,0.12);

  /* Layout tokens */
  --stone-900: #0f1214;
  --stone-700: #2a2f33;
  --stone-100: #f5f5f4;
  --max: 1100px;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

* { box-sizing: border-box }

html { scroll-behavior: smooth }

body {
  margin: 0;
  background: linear-gradient(180deg, var(--stone-900), #101a16 40%, var(--green-900) 100%);
  color: #eef1ef;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Header / Nav */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 61, 46, .72);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

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

nav { display: flex; align-items: center; justify-content: space-between; height: 72px }

.brand { display: flex; gap: 14px; align-items: center; text-decoration: none; color: #fff }
.brand img { height: 40px; width: auto; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5)) }
.brand .title { display: flex; flex-direction: column; line-height: 1 }
.brand .title b { font-family: "Playfair Display", serif; font-size: 18px; letter-spacing: .08em }
.brand .title span { font-size: 11px; opacity: .8; letter-spacing: .18em }

/* Keep the header brand (logo + text) color stable across states */
.brand,
.brand:visited,
.brand:hover,
.brand:active,
.brand:focus {
  color: #fff; /* don't change color */
  text-decoration: none;
}
.brand:focus { outline: 3px solid var(--link-outline); outline-offset: 2px }

.navlinks { display: flex; gap: 18px; align-items: center }
.navlinks a { color: #eff7f1; text-decoration: none; padding: 10px 14px; border-radius: 12px }
.navlinks a:hover { background: rgba(255, 255, 255, .08) }

/* Keep menu link color stable across states (visited/hover/active/focus) */
.navlinks a,
.navlinks a:visited,
.navlinks a:hover,
.navlinks a:active,
.navlinks a:focus {
  color: var(--gold-400); /* do not change color */
  text-decoration: none; /* avoid underline on hover/focus for menu links */
}

/* Keep an accessible focus outline while preserving color */
.navlinks a:focus { outline: 3px solid var(--link-outline); outline-offset: 2px }

/* Ticker (under the navigation) */
.ticker { background: rgba(11,31,26,0.75); border-bottom: 1px solid rgba(255,255,255,0.04) }
.ticker-wrap { display:block; overflow:hidden; position:relative; height:46px; padding:6px 12px; /* match site typography */ font-family: inherit; font-size: 16px; line-height: 1.4 }
.ticker-content { display:inline-block; white-space:nowrap; will-change:transform; animation-name: ticker-scroll; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: 12s; padding-right: 84px; color: var(--gold-400); font-family: inherit; font-size: 16px; font-weight: 400 }
/* Position toggle absolutely so it's always visible */
.ticker-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: transparent; border: 1px solid rgba(255,255,255,0.06); color: inherit; padding: 6px 10px; border-radius: 10px; cursor: pointer; z-index: 2 }
.ticker-toggle:focus { outline: 3px solid var(--link-outline); outline-offset: 2px }

@keyframes ticker-scroll {
  /* use CSS variables set from JS so we can animate by pixels */
  from { transform: translateX(var(--ticker-start, 100%)); }
  to { transform: translateX(var(--ticker-end, -100%)); }
}

.btn {
  background: var(--gold-400);
  color: #111;
  padding: 10px 16px;
  border-radius: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.btn:hover { filter: brightness(1.03) }

/* Hero */
.hero { position: relative; overflow: hidden }
.hero-inner { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; padding: 70px 0; justify-items: center }

/* Center the welcome card and constrain its width on large screens */
.hero-inner .card { width: 100%; max-width: 560px }

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

h1 { font-family: "Playfair Display", serif; font-size: 46px; margin: 0 0 10px }
.lead { font-size: 18px; line-height: 1.7; opacity: .95 }
.hero .art { display: flex; align-items: center; justify-content: center }

.welcome-logo {
  display: block;
  width: min(100%, 440px);          /* scale with card, align to other content card widths */
  height: auto;                     /* maintain original proportions */
  aspect-ratio: 776 / 218;          /* correct 3.56:1 aspect ratio */
  margin: 0 auto 18px auto;         /* center within the card with bottom spacing */
}

/* Mobile-first refinements keep the hero comfortable on small screens */
@media (max-width: 640px) {
  .hero-inner { padding: 56px 0; }
  .hero-inner .card { padding: 24px 18px; }
  #willkommen { text-align: center; }
  #willkommen h1 { font-size: 34px; line-height: 1.1; }
  #willkommen .lead { font-size: 16px; line-height: 1.6; }
  #willkommen .menu-cta { justify-content: center; }
  .welcome-logo { width: min(100%, 360px); margin-bottom: 16px; }
}

@media (max-width: 420px) {
  .hero-inner { padding: 46px 0; }
  .hero-inner .card { padding: 20px 16px; }
  #willkommen h1 { font-size: 30px; }
  #willkommen .lead { font-size: 15px; }
  .welcome-logo { width: min(100%, 300px); }
}




/* Sections */
section { scroll-margin-top: 84px }
.section { padding: 70px 0 }
.section h2 { font-family: "Playfair Display", serif; font-size: 34px; margin: 0 0 14px }
.muted { opacity: .8 }

/* Links: use theme variables for easy tweaking */
a { color: var(--link-color) }
a:visited { color: var(--link-visited) }
a:hover, a:focus {
  color: var(--link-hover);
  text-decoration: underline;
  outline: 3px solid var(--link-outline);
  outline-offset: 2px;
}

/* Keep footer links using inherited color but still provide underline on hover/focus */
.foot a:hover, .foot a:focus { color: inherit; text-decoration: underline; outline: none }

/* Menu block */
.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px }
.menu-item { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: 18px }
.menu-item b { display: block; font-family: "Playfair Display", serif; letter-spacing: .02em; margin-bottom: 4px }
.menu-item span { opacity: .85 }
.menu-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px }
.ghost { border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: #fff }

/* Calendar */
.calendar {
  background: linear-gradient(180deg, rgba(16, 26, 22, .92), rgba(11, 61, 46, .85));
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px;
  overflow: hidden;
}
.calendar-frame {
  display: block;
  width: 100%;
  height: 650px;
  border: 0;
  background: transparent;
  /* Invert the Google embed to align with the site's dark theme */
  filter: invert(1) hue-rotate(180deg) contrast(1.08) saturate(1.08);
}
.calendar-frame::-webkit-scrollbar {
  width: 10px;
}
.calendar-frame::-webkit-scrollbar-thumb {
  background: rgba(212, 178, 106, .6);
  border-radius: 8px;
}
.calendar-frame::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .2);
}

/* Info grid */
.info-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px }
.tile { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 18px }
.tile h3 { margin: 0 0 8px; font-size: 20px }
.key { font-variant-numeric: tabular-nums }

/* Footer */
footer { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 60px; background: #0b3024 }
.foot { display: grid; gap: 10px; padding: 28px 0; color: #cfe3d8; font-size: 14px }
.foot a { color: inherit; opacity: .9 }

/* Mobile */
.burger { display: none; cursor: pointer; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; padding: 8px 10px }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr }
  .menu-grid { grid-template-columns: 1fr }
  .info-grid { grid-template-columns: 1fr }
}

@media (max-width:760px) {
  .navlinks {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: rgba(11, 61, 46, .98);
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .navlinks.open { display: flex; flex-direction: column; gap: 6px }
  .burger { display: block }
  .calendar-frame { height: 520px; }
}

/* Focus-visible and skip link */
:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px }
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden }
.skip-link:focus {
  position: fixed; left: 1rem; top: 1rem; width: auto; height: auto; padding: .5rem 1rem; z-index: 9999; background: #fff; color: #000; border-radius: .5rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .2)
}