/* ==========================================================
   Farbpakete. Standard = "koralle". Weitere per data-theme.
   ========================================================== */
:root {
  --bg: #121214;            --bg-rgb: 18 18 20;
  --bg-soft: #19191c;       --bg-soft-rgb: 25 25 28;
  --bg-karte: #202024;
  --text: #e8e8ea;
  --text-stark: #ffffff;
  --muted: #a3a3ab;
  --akzent: #ff8a65;
  --akzent-hell: #ffbfa8;
  --akzent-auf-foto: #ff8a65;
  --akzent-fuell: #ff7a52;
  --akzent-fuell-hover: #ff9571;
  --fuell-text: #141416;
  --akzent-linie: rgba(255, 138, 101, 0.38);
  --button-rand: rgba(255, 255, 255, 0.75);
  --line: rgba(255, 255, 255, 0.09);
  --glow-rgb: 255 110 70;   --glow-mult: 0.6;
  --plakat-bg: linear-gradient(160deg, #ff9869 0%, #ff7148 55%, #ea532e 100%);
  --plakat-text: #17110f;
  --plakat-akzent: rgba(23, 17, 15, 0.72);
  --plakat-linie-rgb: 23 17 15;
  --foto-rgb: 12 12 14;
  --radius: 14px;
}

[data-theme="hell"] {
  --bg: #f6f1ea;            --bg-rgb: 246 241 234;
  --bg-soft: #efe7dc;       --bg-soft-rgb: 239 231 220;
  --bg-karte: #fffdf9;
  --text: #3a332e;
  --text-stark: #1b1714;
  --muted: #74685e;
  --akzent: #b4441f;
  --akzent-hell: #c9582f;
  --akzent-auf-foto: #f2a07c;
  --akzent-fuell: #b4441f;
  --akzent-fuell-hover: #9c3818;
  --fuell-text: #ffffff;
  --akzent-linie: rgba(180, 68, 31, 0.35);
  --button-rand: rgba(27, 23, 20, 0.6);
  --line: rgba(0, 0, 0, 0.1);
  --glow-rgb: 217 118 79;   --glow-mult: 0.5;
  --plakat-bg: linear-gradient(160deg, #c95c33 0%, #aa4320 55%, #8a3317 100%);
  --plakat-text: #fff8f3;
  --plakat-akzent: #ffd8c6;
  --plakat-linie-rgb: 255 232 220;
}

[data-theme="nacht"] {
  --bg: #0f1422;            --bg-rgb: 15 20 34;
  --bg-soft: #141b2c;       --bg-soft-rgb: 20 27 44;
  --bg-karte: #1a2336;
  --text: #e3e7ef;
  --text-stark: #ffffff;
  --muted: #9aa4b8;
  --akzent: #e9c9a0;
  --akzent-hell: #f6e3c9;
  --akzent-auf-foto: #e9c9a0;
  --akzent-fuell: #e9c9a0;
  --akzent-fuell-hover: #f3dab8;
  --fuell-text: #0f1422;
  --akzent-linie: rgba(233, 201, 160, 0.35);
  --button-rand: rgba(255, 255, 255, 0.75);
  --line: rgba(255, 255, 255, 0.09);
  --glow-rgb: 80 110 190;   --glow-mult: 1;
  --plakat-bg: linear-gradient(160deg, #f4dfc2 0%, #e8c7a0 55%, #d6ad80 100%);
  --plakat-text: #111827;
  --plakat-akzent: #3a4458;
  --plakat-linie-rgb: 17 24 39;
}

[data-theme="mono"] {
  --bg: #0b0b0b;            --bg-rgb: 11 11 11;
  --bg-soft: #131313;       --bg-soft-rgb: 19 19 19;
  --bg-karte: #1a1a1a;
  --text: #e6e6e6;
  --text-stark: #ffffff;
  --muted: #9d9d9d;
  --akzent: #ffffff;
  --akzent-hell: #ffffff;
  --akzent-auf-foto: #ffffff;
  --akzent-fuell: #ffffff;
  --akzent-fuell-hover: #dcdcdc;
  --fuell-text: #0b0b0b;
  --akzent-linie: rgba(255, 255, 255, 0.3);
  --button-rand: rgba(255, 255, 255, 0.75);
  --line: rgba(255, 255, 255, 0.1);
  --glow-rgb: 255 255 255;  --glow-mult: 0.25;
  --plakat-bg: linear-gradient(160deg, #fbf9f6 0%, #efece7 55%, #e2ded7 100%);
  --plakat-text: #111111;
  --plakat-akzent: #555555;
  --plakat-linie-rgb: 17 17 17;
}

[data-theme="senf"] {
  --bg: #141414;            --bg-rgb: 20 20 20;
  --bg-soft: #1b1b1b;       --bg-soft-rgb: 27 27 27;
  --bg-karte: #232323;
  --text: #e9e9e6;
  --text-stark: #ffffff;
  --muted: #a5a5a0;
  --akzent: #f2b33d;
  --akzent-hell: #f8d27f;
  --akzent-auf-foto: #f2b33d;
  --akzent-fuell: #f2b33d;
  --akzent-fuell-hover: #f7c55e;
  --fuell-text: #141414;
  --akzent-linie: rgba(242, 179, 61, 0.35);
  --button-rand: rgba(255, 255, 255, 0.75);
  --line: rgba(255, 255, 255, 0.09);
  --glow-rgb: 242 179 61;   --glow-mult: 0.4;
  --plakat-bg: linear-gradient(160deg, #f8c95e 0%, #f2b33d 55%, #de9a1f 100%);
  --plakat-text: #141414;
  --plakat-akzent: rgba(20, 20, 20, 0.72);
  --plakat-linie-rgb: 20 20 20;
}

[data-theme="weiss"] {
  --bg: #fbfaf8;            --bg-rgb: 251 250 248;
  --bg-soft: #f2f0ec;       --bg-soft-rgb: 242 240 236;
  --bg-karte: #ffffff;
  --text: #2c2c2c;
  --text-stark: #111111;
  --muted: #6b6b6b;
  --akzent: #d7261e;
  --akzent-hell: #e84a3f;
  --akzent-auf-foto: #ff6a5c;
  --akzent-fuell: #d7261e;
  --akzent-fuell-hover: #b91f18;
  --fuell-text: #ffffff;
  --akzent-linie: rgba(215, 38, 30, 0.3);
  --button-rand: rgba(17, 17, 17, 0.6);
  --line: rgba(0, 0, 0, 0.09);
  --glow-rgb: 215 38 30;    --glow-mult: 0.3;
  --plakat-bg: linear-gradient(160deg, #ea4033 0%, #d7261e 55%, #b31b14 100%);
  --plakat-text: #ffffff;
  --plakat-akzent: #ffe1dd;
  --plakat-linie-rgb: 255 235 232;
}

[data-theme="ultramarin"] {
  --bg: #1b2fa8;            --bg-rgb: 27 47 168;
  --bg-soft: #18299a;       --bg-soft-rgb: 24 41 154;
  --bg-karte: #2239b8;
  --text: #e8ecff;
  --text-stark: #ffffff;
  --muted: #bcc6f5;
  --akzent: #ffe3b3;
  --akzent-hell: #fff1d9;
  --akzent-auf-foto: #ffe3b3;
  --akzent-fuell: #ffe3b3;
  --akzent-fuell-hover: #fff0d6;
  --fuell-text: #1b2fa8;
  --akzent-linie: rgba(255, 227, 179, 0.4);
  --button-rand: rgba(255, 255, 255, 0.8);
  --line: rgba(255, 255, 255, 0.14);
  --glow-rgb: 130 160 255;  --glow-mult: 0.7;
  --plakat-bg: linear-gradient(160deg, #fff5e3 0%, #ffe3b3 55%, #ffcf8a 100%);
  --plakat-text: #1b2fa8;
  --plakat-akzent: #3a4dbd;
  --plakat-linie-rgb: 27 47 168;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Jost", sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.3s, color 0.3s;
  line-height: 1.75;
  font-weight: 300;
  font-size: 1.05rem;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.03em;
  line-height: 1.15;
  color: var(--text-stark);
}

a { color: inherit; }
img { max-width: 100%; }

.eyebrow {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 1rem;
  font-weight: 400;
}
.eyebrow.zentriert { text-align: center; }
.eyebrow.zentriert::before,
.eyebrow.zentriert::after {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  margin: 0 0.9rem;
  vertical-align: middle;
  background: var(--akzent-linie);
}

/* ---------- Header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 1.35rem 6%;
  background: rgb(var(--bg-rgb) / 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.logo {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-stark);
}

nav a {
  display: inline-block;
  text-decoration: none;
  margin-left: 2.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s;
}
nav a:hover { color: var(--akzent); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 6% 8rem;
  background:
    radial-gradient(ellipse at 75% 45%, rgb(var(--glow-rgb) / calc(0.12 * var(--glow-mult))) 0%, transparent 55%),
    linear-gradient(90deg, rgb(var(--foto-rgb) / 0.82) 0%, rgb(var(--foto-rgb) / 0.45) 45%, rgb(var(--foto-rgb) / 0.12) 75%, rgb(var(--foto-rgb) / 0.2) 100%),
    linear-gradient(180deg, rgb(var(--foto-rgb) / 0.25) 0%, rgb(var(--foto-rgb) / 0) 40%, rgb(var(--foto-rgb) / 0.85) 100%),
    url("hero.jpg") center/cover no-repeat;
}
/* feiner Zierrahmen mit betonten Ecken */
.hero::before {
  content: "";
  position: absolute;
  inset: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: calc(1.5rem - 4px);
  pointer-events: none;
  background:
    linear-gradient(var(--akzent-auf-foto), var(--akzent-auf-foto)) top left / 30px 2px,
    linear-gradient(var(--akzent-auf-foto), var(--akzent-auf-foto)) top left / 2px 30px,
    linear-gradient(var(--akzent-auf-foto), var(--akzent-auf-foto)) top right / 30px 2px,
    linear-gradient(var(--akzent-auf-foto), var(--akzent-auf-foto)) top right / 2px 30px,
    linear-gradient(var(--akzent-auf-foto), var(--akzent-auf-foto)) bottom left / 30px 2px,
    linear-gradient(var(--akzent-auf-foto), var(--akzent-auf-foto)) bottom left / 2px 30px,
    linear-gradient(var(--akzent-auf-foto), var(--akzent-auf-foto)) bottom right / 30px 2px,
    linear-gradient(var(--akzent-auf-foto), var(--akzent-auf-foto)) bottom right / 2px 30px;
  background-repeat: no-repeat;
}

.hero-raster {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 4rem;
  align-items: center;
}
.hero-inner { text-align: left; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); }
/* Ohne Veranstaltung: kein Plakat, Text nimmt die ganze Breite */
.hero-raster:not(:has(.plakat)) { grid-template-columns: 1fr; }

.hero h2 {
  font-size: clamp(3rem, 6.6vw, 6.2rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
}
.hero h2::after {
  content: "";
  display: block;
  width: 160px;
  height: 14px;
  margin-top: 1.75rem;
  background: var(--akzent-auf-foto);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 7h62'/%3E%3Cpath d='M98 7h62'/%3E%3Cpath d='M80 1l6 6-6 6-6-6z'/%3E%3Ccircle cx='68' cy='7' r='1.6' fill='%23000'/%3E%3Ccircle cx='92' cy='7' r='1.6' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") left center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 7h62'/%3E%3Cpath d='M98 7h62'/%3E%3Cpath d='M80 1l6 6-6 6-6-6z'/%3E%3Ccircle cx='68' cy='7' r='1.6' fill='%23000'/%3E%3Ccircle cx='92' cy='7' r='1.6' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") left center / contain no-repeat;
}

.hero p {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: #ececec;
  max-width: 34rem;
  margin: 1.5rem 0 2.5rem;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.scroll-hinweis {
  position: absolute;
  bottom: 5.5rem;
  left: 50%;
  width: 1px;
  height: 56px;
  background: linear-gradient(var(--akzent-auf-foto), transparent);
  animation: scrollen 2.2s ease-in-out infinite;
}
@keyframes scrollen {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(8px); }
}

/* ---------- Buttons ---------- */
.button {
  display: inline-block;
  background: transparent;
  color: var(--text-stark);
  border: 1px solid var(--button-rand);
  border-radius: 999px;
  padding: 1rem 2.4rem;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.button:hover { background: var(--akzent-fuell); border-color: var(--akzent-fuell); color: var(--fuell-text); }
.button-akzent { background: var(--akzent-fuell); border-color: var(--akzent-fuell); color: var(--fuell-text); }
.button-akzent:hover { background: var(--akzent-fuell-hover); border-color: var(--akzent-fuell-hover); }

.text-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akzent);
  text-decoration: none;
  border-bottom: 1px solid var(--akzent-linie);
  padding-bottom: 0.2rem;
  transition: color 0.2s, border-color 0.2s;
}
.text-link::after { content: " →"; }
.text-link:hover { color: var(--akzent-hell); border-color: var(--akzent-hell); }

/* ---------- Info-Leiste ---------- */
.info-leiste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px;
  margin: -3.5rem auto 0;
  position: relative;
  z-index: 2;
  background: var(--bg-karte);
  border: 1px solid var(--akzent-linie);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.info-punkt {
  padding: 1.6rem 1.5rem;
  text-align: center;
}
.info-punkt + .info-punkt { border-left: 1px solid var(--line); }
.info-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 0.3rem;
}
.info-wert {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-stark);
  text-decoration: none;
}

/* ---------- Sektionen ---------- */
.sektion {
  padding: 7.5rem 6%;
}
.sektion > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.sektion-dunkel { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.sektion-titel {
  text-align: center;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sektion-titel.links { text-align: left; }

hr.divider {
  width: 160px;
  height: 14px;
  border: none;
  background: var(--akzent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 7h62'/%3E%3Cpath d='M98 7h62'/%3E%3Cpath d='M80 1l6 6-6 6-6-6z'/%3E%3Ccircle cx='68' cy='7' r='1.6' fill='%23000'/%3E%3Ccircle cx='92' cy='7' r='1.6' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 7h62'/%3E%3Cpath d='M98 7h62'/%3E%3Cpath d='M80 1l6 6-6 6-6-6z'/%3E%3Ccircle cx='68' cy='7' r='1.6' fill='%23000'/%3E%3Ccircle cx='92' cy='7' r='1.6' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  margin: 1.5rem auto 3.5rem;
}
hr.divider.links { margin-left: 0; margin-bottom: 2rem; }

/* Willkommen: Bild + Text */
.zwei-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.text-spalte p { color: var(--muted); margin: 0 0 1.25rem; }

.bild-rahmen {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--akzent-linie);
  border-radius: 22px;
  box-shadow: 0 0 0 9px var(--bg), 0 0 0 10px var(--line), 0 30px 60px rgba(0,0,0,0.5);
}
.bild-rahmen img { display: block; width: 100%; height: auto; border-radius: 13px; }

/* Highlights */
.highlight-raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.highlight {
  display: block;
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.25rem 1.75rem;
  transition: border-color 0.3s, transform 0.3s;
}
.highlight:hover { border-color: var(--akzent-linie); transform: translateY(-4px); }
.highlight-zahl {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  color: var(--akzent);
  margin-bottom: 1.25rem;
}
.highlight h3 { font-size: 1.45rem; margin-bottom: 0.6rem; }
.highlight p { color: var(--muted); margin: 0; font-size: 0.95rem; }

/* Triberg-Bild */
.triberg {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 6%;
  background:
    linear-gradient(180deg, rgb(var(--foto-rgb) / 0.92) 0%, rgb(var(--foto-rgb) / 0.55) 30%, rgb(var(--foto-rgb) / 0.62) 70%, rgb(var(--foto-rgb) / 0.95) 100%),
    url("wasserfall.jpg") center/cover no-repeat;
  background-attachment: scroll, fixed;
}
.triberg-inner { max-width: 46rem; }
.hero .eyebrow, .seiten-hero .eyebrow, .triberg .eyebrow { color: var(--akzent-auf-foto); }
.triberg h2, .seiten-hero h2 { color: #fff; }
.hero .button:not(.button-akzent), .triberg .button { color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.hero .button:not(.button-akzent):hover, .triberg .button:hover { color: var(--fuell-text); border-color: var(--akzent-fuell); }
.triberg h2 {
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.triberg p { color: #f2f2f2; text-shadow: 0 1px 12px rgba(0,0,0,0.6); font-size: 1.15rem; margin: 1.75rem 0 3rem; }

.fakten {
  display: flex;
  justify-content: center;
  background: rgb(var(--foto-rgb) / 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--akzent-linie);
  border-radius: var(--radius);
}
.fakten > div { flex: 1; padding: 1.5rem 1rem; }
.fakten > div + div { border-left: 1px solid rgba(255, 255, 255, 0.15); }
.fakt-zahl {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--akzent-auf-foto);
}
.fakt-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.bildnachweis {
  position: absolute;
  right: 1.25rem;
  bottom: 0.9rem;
  margin: 0;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}
.bildnachweis a { color: inherit; }

/* Triberg entdecken */
.entdecken-raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}
.entdecken {
  border-top: 1px solid var(--akzent-linie);
  padding: 1.75rem 0.5rem 0 0;
}
.entdecken-nr {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  color: var(--akzent);
  margin-bottom: 0.75rem;
}
.entdecken h3 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.entdecken p { color: var(--muted); margin: 0; font-size: 0.95rem; }
.entdecken-fazit {
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--akzent-hell);
  margin-top: 4.5rem;
}

/* Gäste */
.lob-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.lob {
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
}
.lob-icon { display: block; color: var(--akzent); font-size: 1.2rem; margin-bottom: 1rem; }
.lob h3 { font-size: 1.55rem; margin-bottom: 0.6rem; }
.lob p { color: var(--muted); margin: 0; font-size: 0.95rem; }
.bewertung-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 3.5rem;
}

/* Kontakt-Karten */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
.karte {
  background: var(--bg-karte);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  text-align: center;
}
.karte h3 {
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--akzent);
  margin-bottom: 1rem;
}
.karte p { color: var(--text); margin: 0 0 0.5rem; }
.karte p a { text-decoration: none; font-family: "Cormorant Garamond", serif; font-size: 1.5rem; font-weight: 600; color: var(--text-stark); }
.karte .karte-klein { font-size: 0.85rem; color: var(--muted); margin-top: 0.75rem; }

/* ---------- Unterseiten (main) ---------- */
main { max-width: 900px; margin: 0 auto; padding: 6rem 1.5rem 7rem; }

main > h2 {
  text-align: center;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
main > .lead {
  text-align: center;
  color: var(--muted);
  max-width: 40rem;
  margin: 0 auto 3.5rem;
}

/* ---------- Veranstaltungen ---------- */
.events-liste {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.event-karte {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s;
}
.event-karte:hover { border-color: var(--akzent-linie); }
.event-info h3 { font-size: 1.6rem; letter-spacing: 0.02em; margin-bottom: 0.4rem; }
.event-info p { color: var(--muted); margin: 0; }

.event-karte.mit-bild { display: grid; grid-template-columns: 280px 1fr; }
.event-karte.mit-bild img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; display: block; }
.event-karte.mit-bild .event-info { padding: 1.75rem 2rem; align-self: center; }

.event-datum {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 0.5rem;
}

.event-karte.ohne-bild { display: flex; align-items: center; gap: 1.75rem; padding: 1.75rem 2rem; }
.event-kalender {
  flex-shrink: 0;
  width: 96px;
  padding: 0.9rem 0.5rem 0.7rem;
  text-align: center;
  border: 1px solid var(--akzent-linie);
  border-radius: 10px;
}
.event-kalender .tag-zahl {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 3rem;
  line-height: 1;
  color: var(--akzent);
}
.event-kalender .monat {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.events-leer {
  text-align: center;
  color: var(--muted);
  padding: 2.5rem;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.events-teaser .events-liste { max-width: 900px; }
.events-teaser .mehr { text-align: center; margin-top: 2.5rem; }

/* ---------- Speisekarte ---------- */
main h2.kategorie {
  text-align: left;
  font-size: 2rem;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 4rem 0 1.25rem;
  scroll-margin-top: 9rem;
}
main > h2.teil-titel { margin-top: 7rem; scroll-margin-top: 9rem; }

.gericht {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  border-bottom: 1px solid var(--line);
  padding: 1.05rem 0;
}
.gericht .name { color: var(--text-stark); font-size: 1.08rem; font-weight: 400; }
.gericht .beschreibung { color: var(--muted); font-size: 0.92rem; margin: 0.15rem 0 0; }
.gericht .tag {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0 0.55rem;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--akzent);
  border: 1px solid var(--akzent-linie);
  border-radius: 999px;
  vertical-align: middle;
}
.gericht .preis {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--akzent);
  white-space: nowrap;
  text-align: right;
}
.gericht .preis small,
h2.kategorie small {
  font-family: "Jost", sans-serif;
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.kategorie-hinweis { color: var(--muted); font-style: italic; margin: -0.5rem 0 0.5rem; font-size: 0.92rem; }

.karten-nav {
  position: sticky;
  top: 78px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: -1.5rem 0 1rem;
  padding: 0.9rem 0;
  background: rgb(var(--bg-rgb) / 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.karten-nav a {
  margin: 0;
  padding: 0.4rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color 0.2s, border-color 0.2s;
}
.karten-nav a:hover { color: var(--akzent); border-color: var(--akzent-linie); }

.karten-fussnote { text-align: center; color: var(--muted); font-size: 0.85rem; margin-top: 4rem; }

/* ---------- 404 ---------- */
.fehlerseite { text-align: center; padding-top: 8rem; }
.fehler-zahl { display: block; font-family: "Cormorant Garamond", serif; font-size: 7rem; line-height: 1; color: var(--akzent); }

/* ---------- Rechtliches ---------- */
.rechtstext h3 { font-size: 1.5rem; color: var(--akzent); margin: 2.5rem 0 0.75rem; }
.rechtstext p { color: var(--text); }
.platzhalter { background: rgba(224, 168, 58, 0.15); color: #e0a83a; padding: 0 0.3rem; border-radius: 4px; }

/* ---------- Footer ---------- */
footer {
  background: var(--bg-soft);
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding: 5rem 6% 2rem;
  font-size: 0.95rem;
}
.footer-raster {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
}
footer a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
footer a:hover { color: var(--akzent); }
.footer-logo {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-stark);
  margin-bottom: 0.5rem;
}
.footer-tagline {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--akzent);
}
.footer-titel {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 0.9rem;
}
.footer-copy {
  max-width: 1100px;
  margin: 4rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

/* ---------- Veranstaltungs-Plakat im Einstieg ---------- */
.plakat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.75rem 1.75rem;
  color: var(--plakat-text);
  text-decoration: none;
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
    var(--plakat-bg);
  border-radius: 4px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: rotate(3.5deg);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.plakat::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgb(var(--plakat-linie-rgb) / 0.45);
  outline: 1px solid rgb(var(--plakat-linie-rgb) / 0.2);
  outline-offset: 3px;
  pointer-events: none;
}
.plakat:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 40px 70px rgba(0, 0, 0, 0.7); }

.plakat-label {
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--plakat-akzent);
  margin-bottom: 1rem;
}
.plakat-bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 1.1rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.plakat-datum { display: flex; align-items: baseline; gap: 0.5rem; line-height: 1; }
.plakat-tag { font-family: "Cormorant Garamond", serif; font-size: 5rem; font-weight: 700; }
.plakat-monat {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.plakat-wochentag {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--plakat-akzent);
  margin: 0.4rem 0 0.9rem;
}
.plakat-titel {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.plakat-ornament { font-size: 1.4rem; color: var(--plakat-akzent); margin-bottom: 0.6rem; }
.plakat-mehr {
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px dashed rgb(var(--plakat-linie-rgb) / 0.5);
  width: 100%;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--plakat-akzent);
}
.plakat-mehr::after { content: " →"; }
.plakat-leer .plakat-titel { font-size: 2.1rem; margin: 0.25rem 0; }

/* ---------- Deko: Eckverzierungen an Karten ---------- */
.karte, .lob, .highlight, .anlass { position: relative; }
.karte::before, .lob::before, .highlight::before, .anlass::before,
.karte::after, .lob::after, .highlight::after, .anlass::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  border-color: var(--akzent);
  border-style: solid;
  opacity: 0.7;
  transition: width 0.3s, height 0.3s, opacity 0.3s;
}
.karte::before, .lob::before, .highlight::before, .anlass::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.karte::after, .lob::after, .highlight::after, .anlass::after { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }
.karte:hover::before, .lob:hover::before, .highlight:hover::before, .anlass:hover::before,
.karte:hover::after, .lob:hover::after, .highlight:hover::after, .anlass:hover::after { width: 34px; height: 34px; opacity: 1; }

/* Deko: weinroter Schimmer in dunklen Sektionen */
.sektion-dunkel {
  background:
    radial-gradient(ellipse at 0% 0%, rgb(var(--glow-rgb) / calc(0.2 * var(--glow-mult))), transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgb(var(--glow-rgb) / calc(0.15 * var(--glow-mult))), transparent 45%),
    var(--bg-soft);
}

/* ---------- Aktiver Menüpunkt ---------- */
nav a.aktiv { color: var(--text-stark); }
nav a.aktiv::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.2rem;
  background: var(--akzent);
}
.karten-nav a, .kapitel-nav a { display: inline-block; }

.triberg-button { margin-top: 2.5rem; }
.zentriert-link { text-align: center; margin-top: 1.5rem; }

/* ---------- Triberg-Seite ---------- */
.seiten-hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1.5rem 6rem;
  background:
    linear-gradient(180deg, rgb(var(--foto-rgb) / 0.55) 0%, rgb(var(--foto-rgb) / 0.5) 50%, rgb(var(--foto-rgb) / 1) 100%),
    url("wasserfall.jpg") center/cover no-repeat;
}
.seiten-hero-inner { max-width: 46rem; }
.seiten-hero .eyebrow, .triberg .eyebrow { color: var(--akzent-auf-foto); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); }
.seiten-hero h2 {
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.seiten-hero p { color: #f2f2f2; font-size: 1.15rem; margin: 1.75rem auto 0; max-width: 36rem; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }

.kapitel-nav {
  position: sticky;
  top: 78px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.25rem;
  background: rgb(var(--bg-rgb) / 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.kapitel-nav a {
  padding: 0.4rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color 0.2s, border-color 0.2s;
}
.kapitel-nav a:hover { color: var(--akzent-hell); border-color: var(--akzent-linie); }

.kapitel-liste { max-width: 980px; margin: 0 auto; padding: 5rem 1.5rem 2rem; }
.kapitel {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 2rem;
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 9rem;
}
.kapitel:last-child { border-bottom: none; }
.kapitel-nr {
  font-family: "Cormorant Garamond", serif;
  font-size: 4.5rem;
  font-weight: 600;
  line-height: 0.9;
  color: var(--akzent);
  opacity: 0.85;
}
.kapitel h3 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 1.25rem; }
.kapitel p { color: var(--text); margin: 0 0 1rem; }

.fakten-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  margin: 1.5rem 0 1rem;
}
.fakten-chips li {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--bg-karte);
  border: 1px solid var(--akzent-linie);
  border-radius: 999px;
}
.fakten-chips strong { color: var(--akzent-hell); font-weight: 500; }

.tipp-box {
  max-width: 980px;
  margin: 2rem auto 7rem;
  padding: 4.5rem 2rem;
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgb(var(--glow-rgb) / calc(0.35 * var(--glow-mult))), transparent 70%),
    var(--bg-karte);
  border: 1px solid var(--akzent-linie);
  border-radius: 22px;
}
.tipp-box > p { color: var(--text); max-width: 36rem; margin: 0 auto 2.25rem; }

/* ---------- Feiern & Events ---------- */
.feiern-hero {
  background:
    linear-gradient(180deg, rgb(var(--foto-rgb) / 0.55) 0%, rgb(var(--foto-rgb) / 0.45) 50%, rgb(var(--foto-rgb) / 0.9) 100%),
    url("hero.jpg") center/cover no-repeat;
}
.hero-buttons.zentriert { justify-content: center; margin-top: 2.25rem; }
.seiten-hero .button:not(.button-akzent), .feiern-teaser .button:not(.button-akzent) { color: #fff; border-color: rgba(255, 255, 255, 0.75); }

.anlass-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.anlass {
  position: relative;
  background: var(--bg-karte);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.25rem 2rem;
  transition: border-color 0.3s, transform 0.3s;
}
.anlass:hover { border-color: var(--akzent-linie); transform: translateY(-4px); }
.anlass-icon { display: block; color: var(--akzent); font-size: 1.1rem; margin-bottom: 0.9rem; }
.anlass h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.anlass p { color: var(--muted); margin: 0; font-size: 0.95rem; }

.leistung-raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}
.leistung { border-top: 1px solid var(--akzent-linie); padding-top: 1.5rem; }
.leistung-nr { display: block; font-family: "Cormorant Garamond", serif; font-size: 1.1rem; color: var(--akzent); margin-bottom: 0.6rem; }
.leistung h3 { font-size: 1.45rem; margin-bottom: 0.5rem; }
.leistung p { color: var(--muted); margin: 0; font-size: 0.95rem; }
.leistung-hinweis {
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.35rem;
  color: var(--akzent-hell);
  margin-top: 3.5rem;
}

.schritte {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  counter-reset: none;
}
.schritte li { text-align: center; padding: 0 1rem; }
.schritt-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1.25rem;
  border: 1px solid var(--akzent-linie);
  border-radius: 50%;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--akzent);
  box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--line);
}
.schritte h3 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.schritte p { color: var(--muted); margin: 0; font-size: 0.95rem; }

/* Anfrage-Formular */
#anfrage { scroll-margin-top: 5rem; }
.anfrage-raster {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 4.5rem;
  align-items: start;
}
.anfrage-info p { color: var(--text); }
.anfrage-kontakt {
  margin-top: 2.25rem;
  padding: 1.5rem 1.75rem;
  background: var(--bg-karte);
  border: 1px solid var(--akzent-linie);
  border-radius: var(--radius);
}
.anfrage-kontakt .info-wert { display: block; font-size: 1.8rem; }
.anfrage-kontakt-klein { font-size: 0.85rem; color: var(--muted); }

.anfrage-formular {
  background: var(--bg-karte);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2.25rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}
.feld-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.1rem; }
.feld { display: flex; flex-direction: column; }
.breit { grid-column: 1 / -1; }
.feld label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.feld label span { color: var(--akzent); }
.feld input, .feld select, .feld textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text-stark);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
  color-scheme: dark;
}
[data-theme="hell"] .feld input, [data-theme="hell"] .feld select, [data-theme="hell"] .feld textarea,
[data-theme="weiss"] .feld input, [data-theme="weiss"] .feld select, [data-theme="weiss"] .feld textarea { color-scheme: light; }
.feld textarea { resize: vertical; min-height: 7rem; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--akzent-linie);
}
.feld-hinweis { font-size: 0.82rem; color: var(--muted); margin: -0.4rem 0 0; }
.feld-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feld-check { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.88rem; color: var(--text); margin-top: 0.4rem; cursor: pointer; }
.feld-check input { margin-top: 0.3rem; width: 18px; height: 18px; accent-color: var(--akzent-fuell); flex-shrink: 0; }
.feld-check a { color: var(--akzent); }
.anfrage-senden { width: 100%; margin-top: 1.5rem; padding: 1.1rem; font-size: 0.82rem; cursor: pointer; }
.anfrage-formular > .feld-hinweis { margin-top: 0.9rem; text-align: center; }

.anfrage-hinweis { padding: 1rem 1.25rem; border-radius: 10px; margin-bottom: 1.5rem; font-size: 0.95rem; }
.anfrage-hinweis strong { display: block; font-family: "Cormorant Garamond", serif; font-size: 1.35rem; margin-bottom: 0.2rem; }
.anfrage-hinweis.erfolg { background: rgba(60, 170, 100, 0.14); border: 1px solid rgba(60, 170, 100, 0.5); color: var(--text-stark); }
.anfrage-hinweis.fehler { background: rgba(224, 70, 60, 0.12); border: 1px solid rgba(224, 70, 60, 0.5); color: var(--text-stark); }

/* Startseite: Hinweis auf Feiern */
.feiern-teaser {
  position: relative;
  padding: 7rem 6%;
  text-align: center;
  background:
    linear-gradient(180deg, rgb(var(--foto-rgb) / 0.8), rgb(var(--foto-rgb) / 0.7)),
    url("aussenansicht.webp") center 40% / cover no-repeat;
}
.feiern-teaser-inner { max-width: 44rem; margin: 0 auto; }
.feiern-teaser .eyebrow { color: var(--akzent-auf-foto); }
.feiern-teaser h2 { color: #fff; font-size: clamp(2.4rem, 5.5vw, 4rem); text-transform: uppercase; letter-spacing: 0.05em; }
.feiern-teaser p { color: #ececec; font-size: 1.1rem; margin: 1.25rem auto 0; max-width: 34rem; }

/* ---------- Barrierefreiheit ---------- */
.sprung-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--akzent-fuell);
  color: var(--fuell-text);
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: top 0.2s;
}
.sprung-link:focus { top: 1rem; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Rechtliches: Ergänzungen ---------- */
.feld-datenschutz { font-size: 0.85rem; color: var(--muted); margin: 0.25rem 0 0; }
.feld-datenschutz a { color: var(--akzent); }
.fakten-chips .chip-hinweis { background: transparent; border-style: dashed; font-size: 0.78rem; }
.rechtstext a { color: var(--akzent); }
.rechtstext-stand { margin-top: 3rem; font-size: 0.85rem; color: var(--muted) !important; }

/* ---------- Handy-Leiste Anrufen/Route ---------- */
.handy-leiste { display: none; }

/* ---------- Einblend-Animation ----------
   Das Einblenden (.reveal) steht jetzt mit allen anderen Bewegungen im Abschnitt
   "Bewegung und weiche Kanten" ganz am Ende dieser Datei. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hinweis { animation: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
  .hero-raster { grid-template-columns: 1fr; gap: 3.5rem; justify-items: center; }
  .hero {
    background:
      linear-gradient(180deg, rgb(var(--foto-rgb) / 0.45) 0%, rgb(var(--foto-rgb) / 0.38) 50%, rgb(var(--foto-rgb) / 0.85) 100%),
      url("hero.jpg") center/cover no-repeat;
  }
  .hero-inner { text-align: center; }
  .hero h2::after { margin-left: auto; margin-right: auto; -webkit-mask-position: center; mask-position: center; }
  .hero p { margin-left: auto; margin-right: auto; }
  .hero-buttons { justify-content: center; }
  .plakat { width: 100%; max-width: 320px; transform: rotate(2deg); }
  .scroll-hinweis { display: none; }
  .highlight-raster, .entdecken-raster { grid-template-columns: repeat(2, 1fr); }
  .zwei-spalten { grid-template-columns: 1fr; gap: 3.5rem; }
  .text-spalte { text-align: center; }
  .sektion-titel.links { text-align: center; }
  hr.divider.links { margin-left: auto; }
  .lob-raster { grid-template-columns: 1fr; }
  .anlass-raster, .leistung-raster { grid-template-columns: repeat(2, 1fr); }
  .anfrage-raster { grid-template-columns: 1fr; gap: 3rem; }
  .anfrage-info { text-align: center; }
  .triberg { background-attachment: scroll, scroll; }
}

/* ---------- Handy ---------- */
@media (max-width: 640px) {
  body { font-size: 1rem; }
  header { padding: 0.9rem 1rem; justify-content: center; text-align: center; }
  .logo { font-size: 1.15rem; width: 100%; }
  nav { white-space: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  nav a { margin: 0 0.35rem; font-size: 0.6rem; letter-spacing: 0.07em; }

  .hero { min-height: 88vh; padding: 5rem 1.25rem 6rem; }
  .hero::before { inset: 0.7rem; }
  .hero { padding: 3.25rem 1.25rem 5rem; }
  .hero-raster { gap: 2.25rem; }
  .hero h2::after { margin-top: 1.1rem; }
  .hero p { font-size: 1rem; margin: 1rem auto 1.5rem; }
  .hero-buttons { gap: 0.7rem; }
  .hero-buttons .button { padding: 0.85rem 1.5rem; }

  /* Plakat kompakt: Datum links, Titel rechts */
  .plakat {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.1rem;
    align-items: center;
    text-align: left;
    padding: 1.5rem 1.4rem 1.1rem;
    max-width: 340px;
    transform: rotate(-1.5deg);
  }
  .plakat-label { grid-column: 1 / -1; margin-bottom: 0.6rem; }
  .plakat-bild { display: none; }
  .plakat-datum { grid-row: 2 / 4; flex-direction: column; align-items: center; gap: 0.35rem; }
  .plakat-tag { font-size: 3.4rem; }
  .plakat-monat { font-size: 1.1rem; }
  .plakat-wochentag { margin: 0; align-self: end; }
  .plakat-titel { font-size: 1.3rem; align-self: start; }
  .plakat-mehr { grid-column: 1 / -1; margin-top: 0.8rem; padding-top: 0.6rem; text-align: center; }
  .plakat-leer { grid-template-columns: 1fr; text-align: center; }
  .plakat-leer .plakat-ornament { display: none; }
  .hero::after { inset: calc(0.7rem - 4px); }
  .hero-buttons .button { width: 100%; max-width: 20rem; }

  .info-leiste { grid-template-columns: 1fr; margin: -2.5rem 1rem 0; }
  .info-punkt { padding: 1.1rem 1rem; }
  .info-punkt + .info-punkt { border-left: none; border-top: 1px solid var(--line); }

  .sektion { padding: 5rem 1.25rem; }
  .highlight-raster, .entdecken-raster { grid-template-columns: 1fr; }
  .triberg { min-height: 0; padding: 6rem 1.25rem 5rem; }
  .hero h2 { font-size: 2.65rem; letter-spacing: 0.03em; }
  .fakten > div { padding: 1.1rem 0.4rem; }
  .fakt-zahl { font-size: 1.7rem; }
  .fakt-label { font-size: 0.58rem; letter-spacing: 0.12em; }
  .triberg { flex-direction: column; }
  .bildnachweis { position: static; margin-top: 2rem; text-align: center; }

  main { padding: 4rem 1.25rem 5rem; }
  .karten-nav { top: 84px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin-left: -1.25rem; margin-right: -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; scrollbar-width: none; }
  .karten-nav::-webkit-scrollbar { display: none; }
  .karten-nav a { white-space: nowrap; }
  .gericht { gap: 1rem; }

  .event-karte.mit-bild { grid-template-columns: 1fr; }
  .event-karte.mit-bild img { aspect-ratio: 16 / 9; min-height: 0; height: auto; }
  .event-karte.mit-bild .event-info { padding: 1.5rem; }
  .event-karte.ohne-bild { gap: 1.25rem; padding: 1.5rem; }
  .event-kalender { width: 78px; }
  .event-kalender .tag-zahl { font-size: 2.4rem; }

  .footer-raster { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .anlass-raster, .leistung-raster, .schritte { grid-template-columns: 1fr; }
  .anfrage-formular { padding: 1.5rem 1.25rem; }
  .feld-raster { grid-template-columns: 1fr; }
  .feiern-teaser { padding: 5rem 1.25rem; }
  .feiern-teaser .button { width: 100%; max-width: 20rem; }

  nav a.aktiv::after { display: none; }
  .seiten-hero { min-height: 60vh; padding: 5rem 1.25rem 4rem; flex-direction: column; }
  .kapitel-nav { top: 84px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .kapitel-nav::-webkit-scrollbar { display: none; }
  .kapitel-nav a { white-space: nowrap; }
  .kapitel-liste { padding: 3rem 1.25rem 1rem; }
  .kapitel { grid-template-columns: 1fr; gap: 0.5rem; padding: 2.75rem 0; }
  .kapitel-nr { font-size: 3rem; }
  .tipp-box { margin: 1rem 1.25rem 5rem; padding: 3rem 1.25rem; }

  .handy-leiste {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgb(var(--bg-soft-rgb) / 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--akzent-linie);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.35s ease, opacity 0.35s ease;
  }
  .handy-leiste.versteckt { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .handy-leiste a {
    padding: 0.8rem 0.5rem;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-stark);
    border-radius: 999px;
  }
  .handy-leiste a:first-child { background: var(--akzent-fuell); color: var(--fuell-text); }
  footer { padding-bottom: 6.5rem; }
}

/* ---------- Footer immer am unteren Rand ----------
   Auf kurzen Seiten (Veranstaltungen, 404) stand der Footer auf hohen Bildschirmen
   mitten im Bild. body ist mindestens fensterhoch; der Footer rutscht per sticky an
   den unteren Rand. Auf langen Seiten steht er unveraendert am Ende, kein anderes
   Element verschiebt sich. Der Header klebt ohnehin oben (siehe Header). */
body { min-height: 100vh; min-height: 100dvh; }
body > footer { position: sticky; top: 100vh; top: 100dvh; }


/* ==========================================================
   BEWEGUNG UND WEICHE KANTEN
   ----------------------------------------------------------
   Alles ab hier ist neu (Oktober 2026, nach dem Vorbild der Dr.-Sleep-Seite).
   Es aendert keine Farben, Schriften oder Texte, nur wie die Seite auftritt und
   wie die Abschnitte ineinander uebergehen. Wer den alten Stand zurueck will,
   loescht diesen Abschnitt bis zum Dateiende und in main.js die Bloecke 1 bis 3.

   Die Grundregeln:
   - Bewegt werden nur opacity, translate, scale, transform und filter. Das
     verschiebt nie das Layout, nichts springt.
   - Ohne JavaScript fehlt am <html> die Klasse "js", dann ist alles sofort da.
   - Wer am Geraet "Bewegung reduzieren" eingestellt hat, sieht alles sofort
     fertig (prefers-reduced-motion).
   - Hover-Effekte nur mit Maus (hover: hover), am Handy bleibt nichts haengen.
   - Weiche Kanten laufen immer in die Grundfarbe var(--bg) aus. Deshalb passen
     sie zu jedem Farbpaket. Fotos blenden nur in dunkle Grundfarben aus, nicht
     in die hellen Pakete "hell" und "weiss" (das saehe milchig aus).

   Inhalt:
     1. Werte zum Anpassen
     2. Einblenden beim Scrollen (.reveal, siehe main.js Block 1)
     3. Auftritt beim Laden (oben auf jeder Seite)
     4. Kopfzeile
     5. Weiche Kanten zwischen Abschnitten
     6. Speisekarte: Bild im Hintergrund, Sprungleiste
     7. Einstiegsbild: Text gleitet davon und blendet unter dem Kopf aus
     8. Hover mit der Maus: Knoepfe, Karten, Plakat
     9. Triberg und Feiern: Kapitel und Schritte
    10. Weicher Seitenwechsel
    11. Kleiner Fix fuer schmale Handys
   ========================================================== */

/* ---------- 1. Werte zum Anpassen ---------- */
:root {
  --ein-deck: cubic-bezier(.33, 0, .2, 1);      /* Deckkraft beim Einblenden */
  --ein-gleiten: cubic-bezier(.19, .8, .22, 1); /* Gleiten, rollt lange aus */
  --weich: cubic-bezier(.2, .7, .2, 1);         /* Auftritt beim Laden */
  --schweben: cubic-bezier(.33, .1, .25, 1);    /* langsames Anheben unter der Maus */
  --feder: cubic-bezier(.22, 1.35, .36, 1);     /* federt kurz ueber das Ziel hinaus */
  --kante: 7rem;                                /* Laenge der weichen Kanten */
  --kopf-schatten: rgb(0 0 0 / .28);            /* Schatten unter dem Kopf beim Scrollen */
  --kopf-h: 88px;                               /* Hoehe des klebenden Kopfs, siehe unten */
}
/* Der Kopf bricht je nach Breite in mehrere Zeilen um (gemessen): einzeilig 88px,
   bis 1138px Breite zweizeilig 132px, von 641 bis 672px dreizeilig 161px, am
   Handy 102px. Danach richten sich die Sprungleisten (Teil 6) und das Ausblenden
   unter dem Kopf (Teil 7). Aendert sich das Menue, hier nachmessen. Setzt main.js
   einmal --kopf-h am <html> aus der echten Hoehe, gilt automatisch dieser Wert. */
@media (max-width: 1138px) {
  :root { --kopf-h: 132px; }
}
@media (max-width: 672px) {
  :root { --kopf-h: 161px; }
}
@media (max-width: 640px) {
  :root { --kante: 4.5rem; --kopf-h: 102px; }
}
/* Helle Farbpakete: kein Schatten, sonst wird der graue Text darunter zu blass */
[data-theme="hell"], [data-theme="weiss"] { --kopf-schatten: transparent; }


/* ---------- 2. Einblenden beim Scrollen ----------
   main.js gibt Bausteinen die Klasse "reveal" und, sobald sie ins Bild kommen,
   zusaetzlich "sichtbar". Was gleichzeitig hereinkommt, bekommt einen kleinen
   Versatz (--staffel), so erscheint es nacheinander.
   Bewegt wird ueber die Eigenschaft "translate", nicht "transform". So bleibt
   transform frei fuer das Anheben unter der Maus (.highlight:hover, .anlass:hover).
   Varianten: .reveal-leise (kurzer Weg, fuer die Zeilen der Speisekarte). */
@media screen and (prefers-reduced-motion: no-preference) {
  .js .reveal {
    transition:
      opacity 1.2s var(--ein-deck),
      translate 1.5s var(--ein-gleiten),
      transform .9s var(--schweben),
      border-color .3s ease,
      box-shadow .9s var(--schweben);
    transition-delay: var(--staffel, 0ms), var(--staffel, 0ms), 0s, 0s, 0s;
  }
  .js .reveal:not(.sichtbar) { opacity: 0; translate: 0 1.75rem; }

  .js .reveal-leise { transition-duration: .7s, .8s, .9s, .3s, .9s; }
  .js .reveal-leise:not(.sichtbar) { translate: 0 .6rem; }

  /* Die Ornamentlinie zieht sich aus der Mitte auf */
  .js hr.divider.reveal {
    transition: opacity 1.2s var(--ein-deck), scale 1.3s var(--weich);
    transition-delay: var(--staffel, 0ms);
  }
  .js hr.divider.reveal:not(.sichtbar) { translate: none; scale: .35 1; }
}
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 961px) {
  /* linksbuendige Linie zieht sich von links auf */
  hr.divider.links { transform-origin: left center; }
  /* Willkommen: das Bild kommt von links, der Text von unten */
  .js .bild-rahmen.reveal:not(.sichtbar) { translate: -1.5rem 0; }
}


/* ---------- 3. Auftritt beim Laden ----------
   Oben auf jeder Seite erscheinen Kleinzeile, Titel, Text und Knoepfe kurz
   nacheinander. Reines CSS, laeuft einmal. Nur opacity und translate, deshalb
   bleiben die Drehung des Plakats und alle Hover-Effekte unberuehrt. */
@keyframes auftritt {
  from { opacity: 0; translate: 0 1.25rem; }
}
@keyframes auftritt-weich {
  from { opacity: 0; translate: 0 .75rem; filter: blur(8px); }
}
@keyframes linie-ziehen {
  from { opacity: 0; scale: .2 1; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  .hero-inner > *,
  .seiten-hero-inner > *,
  main > h2:first-child,
  main > .fehler-zahl,
  main > .fehler-zahl + h2,
  main > .lead,
  main > .lead + .events-liste,
  main > .lead + .hero-buttons,
  .karten-nav,
  .kapitel-nav,
  .info-leiste,
  .anfrage-hinweis {
    animation: auftritt 1s var(--weich) backwards;
  }
  /* Titel kommen zusaetzlich aus einer leichten Unschaerfe */
  .hero h2,
  .seiten-hero h2,
  main > h2:first-child,
  main > .fehler-zahl,
  main > .fehler-zahl + h2 {
    animation-name: auftritt-weich;
    animation-duration: 1.2s;
  }
  /* Reihenfolge: das erste Kind zuerst, jedes weitere 0,12 s spaeter */
  :is(.hero-inner, .seiten-hero-inner, main) > :nth-child(1) { animation-delay: .15s; }
  :is(.hero-inner, .seiten-hero-inner, main) > :nth-child(2) { animation-delay: .27s; }
  :is(.hero-inner, .seiten-hero-inner, main) > :nth-child(3) { animation-delay: .39s; }
  :is(.hero-inner, .seiten-hero-inner, main) > :nth-child(4) { animation-delay: .51s; }
  :is(.hero-inner, .seiten-hero-inner, main) > :nth-child(5) { animation-delay: .63s; }
  .kapitel-nav { animation-delay: .6s; }
  .info-leiste { animation-delay: .8s; }
  .anfrage-hinweis { animation-duration: .8s; animation-delay: .1s; }

  /* Plakat der naechsten Veranstaltung (kommt vom Server) */
  .hero-raster > .plakat { animation: auftritt 1.1s var(--weich) .65s backwards; }

  /* Ornamentlinien oben ziehen sich auf */
  main > h2:first-child + hr.divider,
  main > .fehler-zahl + h2 + hr.divider {
    animation: linie-ziehen 1.2s var(--weich) .45s backwards;
  }
  .hero h2::after {
    transform-origin: left center;
    animation: linie-ziehen 1.2s var(--weich) .7s backwards;
  }
}
@media screen and (prefers-reduced-motion: no-preference) and (max-width: 960px) {
  .hero h2::after { transform-origin: center; }
}


/* ---------- 4. Kopfzeile ----------
   Die Linie unter dem Kopf laeuft an den Enden weich aus. Sobald man scrollt,
   setzt main.js "ist-gescrollt", dann faellt ein weicher Schatten nach unten.
   Groesse und Abstaende des Kopfs bleiben genau gleich. */
header { border-bottom-color: transparent; }
header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 1px);
  height: 1.75rem;
  pointer-events: none;
  background: linear-gradient(var(--kopf-schatten), transparent);
  opacity: 0;
  transition: opacity .5s ease;
}
header.ist-gescrollt::after { opacity: 1; }

/* Menue: unter der Maus waechst eine feine Linie von links herein */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  header nav a { position: relative; }
  header nav a:not(.aktiv)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + .2rem);
    height: 1px;
    background: var(--akzent);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .5s var(--weich);
  }
  header nav a:not(.aktiv):is(:hover, :focus-visible)::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}


/* ---------- 5. Weiche Kanten zwischen Abschnitten ----------
   Keine harten Kanten mehr: jede Grenze laeuft ueber die Grundfarbe var(--bg). */

/* a) Fotoabschnitte: oben und unten in die Grundfarbe auslaufen. Ein Innenschatten
      liegt ueber dem Foto, aber unter dem ganzen Inhalt. Kelvins Hintergruende
      bleiben dabei genau so, wie sie sind. */
.hero,
.seiten-hero,
.triberg,
.feiern-teaser {
  box-shadow:
    inset 0 var(--kante) calc(var(--kante) * .6) calc(var(--kante) * -.5) var(--bg),
    inset 0 calc(var(--kante) * -1) calc(var(--kante) * .6) calc(var(--kante) * -.5) var(--bg);
}
:is([data-theme="hell"], [data-theme="weiss"]) :is(.hero, .seiten-hero, .triberg, .feiern-teaser) {
  box-shadow: none;
}

/* b) Dunkle Abschnitte: der Hintergrund (derselbe wie oben unter "Deko: weinroter
      Schimmer") liegt jetzt in ::before und laeuft oben und unten weich aus. Der
      Verlauf liegt nur im Innenabstand, Text wird nie ausgeblendet. */
.sektion-dunkel {
  position: relative;
  isolation: isolate;
  background: none;
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.sektion-dunkel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 0% 0%, rgb(var(--glow-rgb) / calc(0.2 * var(--glow-mult))), transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgb(var(--glow-rgb) / calc(0.15 * var(--glow-mult))), transparent 45%),
    var(--bg-soft);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--kante), #000 calc(100% - var(--kante)), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 var(--kante), #000 calc(100% - var(--kante)), transparent);
}

/* c) Fuss: beginnt durchsichtig und wird weich zu seiner Farbe */
footer {
  border-top-color: transparent;
  background: linear-gradient(to bottom, rgb(var(--bg-soft-rgb) / 0), var(--bg-soft) calc(var(--kante) * .7));
}

/* d) Fotos der Veranstaltungen laufen in die Karte aus (am Handy nach unten) */
.event-karte.mit-bild img {
  -webkit-mask-image: linear-gradient(to right, #000 72%, transparent);
  mask-image: linear-gradient(to right, #000 72%, transparent);
}
@media (max-width: 640px) {
  .event-karte.mit-bild img {
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, #000 70%, transparent);
  }
}

/* e) Sprungleisten: unten endet der Milchglas-Balken weich. Am Handy, wo man die
      Leiste seitlich wischt, blenden zusaetzlich die Enden links und rechts aus
      (zugleich ein Hinweis, dass dort noch mehr kommt). */
.karten-nav,
.kapitel-nav {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - .8rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - .8rem), transparent);
}
@media (max-width: 640px) {
  .karten-nav,
  .kapitel-nav {
    -webkit-mask-image:
      linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent),
      linear-gradient(to bottom, #000 calc(100% - .8rem), transparent);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent),
      linear-gradient(to bottom, #000 calc(100% - .8rem), transparent);
    mask-composite: intersect;
  }
}


/* ---------- 6. Speisekarte ----------
   <body class="bildgrund"> legt das Titelbild (hero.jpg) ganz ruhig hinter die
   Seite. Der Grund bleibt dunkel: in der Mitte, wo man liest, liegt eine dunkle
   Spalte darueber, an den Seiten sieht man die Pizza. Oben ist das Bild
   deutlicher, nach dem ersten Scrollen tritt es zurueck (--bild-oben auf
   --bild-lesen). "position: fixed" statt "background-attachment: fixed",
   weil iPhones das zweite nicht koennen. Dieselbe Klasse passt auch auf andere
   Seiten, etwa veranstaltungen.html.
   Bis 960px Breite gibt es keine Seiten neben der Lesespalte. Dort liegt die
   Abdunklung deshalb leichter ueber der ganzen Breite und das Bild bleibt auch
   beim Lesen gut zu ahnen (etwa 8 % Bildanteil, oben etwa doppelt so viel).
   Bis 1440px ist die Lesespalte schmaler und laesst beim Lesen etwas mehr Bild
   durch, so wirkt es auch auf Tablets quer und kleinen Laptops nicht leer.
   Kontrast der grauen Texte gemessen (Oktober 2026): ueberall mindestens 5 : 1. */
.bildgrund { --bild-oben: .42; --bild-lesen: .16; }
@media (max-width: 1440px) {
  .bildgrund { --bild-lesen: .24; }
}
@media (max-width: 960px) {
  .bildgrund { --bild-oben: .3; --bild-lesen: .2; }
}

.bildgrund::before,
.bildgrund::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh; /* bleibt gleich hoch, wenn am Handy die Adressleiste ein- und ausfaehrt */
  pointer-events: none;
}
.bildgrund::before {
  z-index: -2;
  background: url("hero.jpg") 68% 35% / cover no-repeat;
  opacity: var(--bild-lesen);
  transform-origin: 68% 35%;
  /* oben weich aus der Kopfzeile heraus, keine harte Kante an ihrer Unterseite */
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--kopf-h), #000 calc(var(--kopf-h) + var(--kante)));
  mask-image: linear-gradient(to bottom, transparent var(--kopf-h), #000 calc(var(--kopf-h) + var(--kante)));
}
.bildgrund::after {
  z-index: -1;
  background:
    linear-gradient(90deg,
      transparent calc(50% - 46rem),
      rgb(var(--bg-rgb) / .72) calc(50% - 30rem),
      rgb(var(--bg-rgb) / .72) calc(50% + 30rem),
      transparent calc(50% + 46rem)),
    radial-gradient(120% 80% at 50% 100%, rgb(var(--bg-rgb) / .55), transparent 70%);
}
/* Bis 1440px ist die Lesespalte schmaler, sonst bliebe vom Bild an den Seiten
   kaum etwas (die Spalte deckt die Schrift trotzdem noch mit mindestens .69) */
@media (min-width: 961px) and (max-width: 1440px) {
  .bildgrund::after {
    background:
      linear-gradient(90deg,
        transparent calc(50% - 40rem),
        rgb(var(--bg-rgb) / .72) calc(50% - 26rem),
        rgb(var(--bg-rgb) / .72) calc(50% + 26rem),
        transparent calc(50% + 40rem)),
      radial-gradient(120% 80% at 50% 100%, rgb(var(--bg-rgb) / .55), transparent 70%);
  }
}
@media (max-width: 960px) {
  .bildgrund::after {
    background: linear-gradient(180deg, rgb(var(--bg-rgb) / .35) 0, rgb(var(--bg-rgb) / .6) 45%, rgb(var(--bg-rgb) / .68));
  }
}
/* Helle Farbpakete ("hell", "weiss"): kein Bild. Auf hellem Grund wuerde das
   dunkle Foto den grauen Text unter 4,5 : 1 Kontrast druecken. */
:is([data-theme="hell"], [data-theme="weiss"]) .bildgrund::before,
:is([data-theme="hell"], [data-theme="weiss"]) .bildgrund::after { display: none; }

@keyframes bildgrund-lesen {
  from { opacity: var(--bild-oben); }
  to { opacity: var(--bild-lesen); }
}
@keyframes bildgrund-atmen {
  from { scale: 1; }
  to { scale: 1.06; }
}
/* Bild tritt beim Scrollen zurueck (Browser ohne scroll(), etwa Firefox, zeigen
   still den Lesewert) */
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .bildgrund::before {
      animation: bildgrund-lesen linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 70vh;
    }
  }
}
/* Am grossen Bildschirm atmet das Bild nach dem Laden ganz langsam einmal ein
   und aus (2 x 40 s), danach steht es still. Keine Endlosschleife, die den Akku
   von Laptops leert. Am Handy gar nicht. */
@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) and (min-width: 961px) {
  .bildgrund::before { animation: bildgrund-atmen 40s ease-in-out 2 alternate; }
  @supports (animation-timeline: scroll()) {
    .bildgrund::before {
      animation: bildgrund-lesen linear both, bildgrund-atmen 40s ease-in-out 2 alternate;
      animation-timeline: scroll(root block), auto;
      animation-range: 0 70vh, normal;
    }
  }
}

/* Sprungleiste: solange sie noch nicht oben klebt, hat sie keinen eigenen
   Hintergrund (main.js setzt "ist-frei"), sonst laege ein dunkler Kasten auf dem
   Bild. Klebt sie oben, kommt Kelvins Milchglas weich zurueck. */
@media (prefers-reduced-motion: no-preference) {
  .karten-nav,
  .kapitel-nav {
    transition: background-color .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease;
  }
}
.karten-nav.ist-frei,
.kapitel-nav.ist-frei {
  background-color: transparent;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}

/* Sprungleisten kleben direkt unter dem Kopf. Sie schieben sich 10px unter ihn,
   das trifft nur ihr Polster (am grossen Bildschirm bleibt es bei Kelvins 78px).
   Vorher stand hier ueberall 78px (am Handy 84px), bei Tablet-Breiten lag der
   zwei- oder dreizeilige Kopf dann fast ganz ueber der Leiste. */
.karten-nav,
.kapitel-nav { top: calc(var(--kopf-h) - 10px); }
/* Sprungziele landen unterhalb von Kopf und Leiste. Die Leiste ist einzeilig
   etwa 4rem hoch und bricht bis 855px (Speisekarte) bzw. 890px (Triberg) in
   zwei Zeilen um. Am grossen Bildschirm bleibt Kelvins 9rem. */
@media (max-width: 1138px) {
  main h2.kategorie,
  main > h2.teil-titel { scroll-margin-top: calc(var(--kopf-h) - 10px + 4rem + .75rem); }
  .kapitel { scroll-margin-top: calc(var(--kopf-h) - 10px + 4rem); }
}
@media (min-width: 641px) and (max-width: 855px) {
  main h2.kategorie,
  main > h2.teil-titel { scroll-margin-top: calc(var(--kopf-h) - 10px + 6.75rem + .75rem); }
}
@media (min-width: 641px) and (max-width: 890px) {
  .kapitel { scroll-margin-top: calc(var(--kopf-h) - 10px + 6.75rem); }
}

/* Sprungleiste zeigt, wo man gerade liest (main.js setzt "ist-aktiv") */
.karten-nav a,
.kapitel-nav a { position: relative; }
.karten-nav a::after,
.kapitel-nav a::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--akzent);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.karten-nav a.ist-aktiv,
.kapitel-nav a.ist-aktiv { color: var(--akzent); }
.karten-nav a.ist-aktiv::after,
.kapitel-nav a.ist-aktiv::after { opacity: .75; }

/* Zeile unter der Maus: ein Hauch Licht fuehrt das Auge vom Namen zum Preis */
@media (hover: hover) and (pointer: fine) {
  .gericht { position: relative; isolation: isolate; }
  .gericht::before {
    content: "";
    position: absolute;
    inset: 0 -1rem;
    z-index: -1;
    border-radius: 10px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgb(var(--glow-rgb) / .07), transparent);
    opacity: 0;
    transition: opacity .4s ease;
  }
  .gericht:hover::before { opacity: 1; }
}


/* ---------- 7. Einstiegsbild: der Text gleitet beim Wegscrollen davon ----------
   a) main.js setzt --hero-p von 0 (ganz oben) bis 1 (Bild fast weg). Der
      Textblock gleitet dann etwas schneller nach oben als die Seite, es wirkt,
      als laege er vor dem Bild. Das Plakat der naechsten Veranstaltung (kommt
      vom Server) bleibt, wo es ist, und blendet nie aus.
   b) Ausgeblendet wird jede Zeile und jeder Knopf fuer sich, und erst, waehrend
      er unter den Kopf gleitet. view() misst dafuer, wo das Teil im Fenster
      steht, das Fenster oben um die Kopfhoehe gekuerzt. So sieht nichts
      verblasst aus, solange es noch ganz zu sehen ist (frueher hing es an
      --hero-p, und am Handy wirkten Knoepfe mitten im Bild wie abgeschaltet).
      Browser ohne view() (etwa Firefox) blenden nicht aus, dort gleitet der
      Text nur. Der Auftritt beim Laden aus Teil 3 steht in der Liste hinten
      und hat damit Vorrang, solange er laeuft. */
@media screen and (prefers-reduced-motion: no-preference) {
  .hero-inner,
  .seiten-hero-inner { translate: 0 calc(var(--hero-p, 0) * -3rem); }
}
@media screen and (prefers-reduced-motion: no-preference) and (max-width: 640px) {
  .hero-inner,
  .seiten-hero-inner { translate: 0 calc(var(--hero-p, 0) * -1.5rem); }
}

@keyframes unter-den-kopf {
  to { opacity: 0; }
}
@supports (animation-timeline: view(block 1px 0px)) {
  @media screen and (prefers-reduced-motion: no-preference) {
    /* Kleinzeile, Titel und Text */
    :is(.hero-inner, .seiten-hero-inner) > :not(.hero-buttons) {
      animation: unter-den-kopf linear both, auftritt 1s var(--weich) backwards;
      animation-timeline: view(block var(--kopf-h) 0px), auto;
      animation-range: exit 0% exit 100%, normal;
    }
    :is(.hero, .seiten-hero) :is(.hero-inner, .seiten-hero-inner) > h2 {
      animation-name: unter-den-kopf, auftritt-weich;
      animation-duration: auto, 1.2s;
    }
    /* dieselbe Reihenfolge beim Laden wie in Teil 3 */
    :is(.hero-inner, .seiten-hero-inner) > :nth-child(1):not(.hero-buttons) { animation-delay: 0s, .15s; }
    :is(.hero-inner, .seiten-hero-inner) > :nth-child(2):not(.hero-buttons) { animation-delay: 0s, .27s; }
    :is(.hero-inner, .seiten-hero-inner) > :nth-child(3):not(.hero-buttons) { animation-delay: 0s, .39s; }
    :is(.hero-inner, .seiten-hero-inner) > :nth-child(4):not(.hero-buttons) { animation-delay: 0s, .51s; }
    :is(.hero-inner, .seiten-hero-inner) > :nth-child(5):not(.hero-buttons) { animation-delay: 0s, .63s; }
    /* Knoepfe: jeder fuer sich (am Handy stehen sie untereinander). Die Gruppe
       .hero-buttons behaelt ihren Auftritt aus Teil 3. */
    :is(.hero-inner, .seiten-hero-inner) > .hero-buttons > * {
      animation: unter-den-kopf linear both;
      animation-timeline: view(block var(--kopf-h) 0px);
      animation-range: exit 0% exit 100%;
    }
  }
}

/* Feststehendes Wasserfall-Foto nur mit Maus: Tablets und Handys koennen das nicht */
@media (hover: none) {
  .triberg { background-attachment: scroll, scroll; }
}


/* ---------- 8. Hover mit der Maus ----------
   Alles hier nur mit Maus und ohne "Bewegung reduzieren". */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Knoepfe heben sich langsam ein wenig an */
  .button {
    transition:
      background .45s ease,
      color .45s ease,
      border-color .45s ease,
      translate .9s var(--schweben),
      box-shadow .9s var(--schweben);
  }
  .button:hover {
    translate: 0 -2px;
    box-shadow: 0 16px 28px -18px rgb(0 0 0 / .7);
  }
  /* Ueber den gefuellten Knopf zieht einmal ein schraeger Lichtstreif */
  .button-akzent {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .button-akzent::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .38) 50%, transparent);
    transform: translateX(-105%) skewX(-16deg);
  }
  .button-akzent:is(:hover, :focus-visible)::after {
    transform: translateX(240%) skewX(-16deg);
    transition: transform 1.05s cubic-bezier(.3, .55, .2, 1);
  }

  /* Karten heben sich langsamer und mit weichem Schatten */
  .highlight,
  .anlass {
    transition: border-color .3s ease, transform .9s var(--schweben), box-shadow .9s var(--schweben);
  }
  .highlight:hover,
  .anlass:hover { box-shadow: 0 30px 46px -32px rgb(0 0 0 / .75); }

  /* Plakat: Kelvins Hover bleibt, nur ruhiger */
  .plakat { transition: transform .9s var(--schweben), box-shadow .9s var(--schweben); }
}


/* ---------- 9. Triberg und Feiern ---------- */
@media screen and (prefers-reduced-motion: no-preference) {
  /* Triberg-Kapitel kommen in Stufen: erst die Nummer von links, dann der Text */
  .js .kapitel.reveal:not(.sichtbar) { opacity: 1; translate: none; }
  .js .kapitel.reveal > * {
    transition: opacity 1.1s var(--ein-deck), translate 1.3s var(--ein-gleiten);
    transition-delay: calc(var(--staffel, 0ms) + var(--stufe, 0) * 170ms);
  }
  .js .kapitel.reveal > :nth-child(2) { --stufe: 1; }
  .js .kapitel.reveal:not(.sichtbar) > * { opacity: 0; translate: 0 1.25rem; }
  .js .kapitel.reveal:not(.sichtbar) > .kapitel-nr { translate: -1rem 0; }

  /* Feiern: die Schrittnummern springen federnd auf, kurz nach ihrem Schritt */
  .js .schritte li.reveal .schritt-nr {
    transition: scale 1.1s var(--feder), opacity .6s ease;
    transition-delay: calc(var(--staffel, 0ms) + 250ms);
  }
  .js .schritte li.reveal:not(.sichtbar) .schritt-nr { scale: .4; opacity: 0; }
}


/* ---------- 10. Weicher Seitenwechsel ----------
   Beim Klick auf einen Link blendet die alte Seite weich in die neue ueber.
   Browser ohne diese Technik (z. B. Firefox) wechseln ganz normal. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation-duration: .3s; }
::view-transition-new(root) { animation-duration: .45s; }


/* ---------- 11. Kleiner Fix fuer schmale Handys ----------
   Einzelne lange Woerter waren auf kleinen Handys breiter als der Bildschirm,
   die ganze Seite liess sich dann seitlich verschieben. Nur diese Titel werden
   kleiner, und nur so weit, dass das Wort passt. Darueber gilt genau Kelvins
   Groesse (seine clamp()-Werte stehen innen), alle anderen Titel bleiben immer,
   wie sie sind (gemessen mit Kelvins Groessen, Breite in px):
   - "VERANSTALTUNGEN" als Seitentitel (zu breit unter 423): kleiner unter 432
   - "VERANSTALTUNGEN" als Vorschau auf der Startseite (unter 390): unter 396
   - "OEFFNUNGSZEITEN" ueber Kontakt auf der Startseite (unter 348): unter 356
   - "SCHWARZWALD" oben auf der Triberg-Seite (unter 390): unter 394
   - "SCHWARZWALD" im Triberg-Bild der Startseite (unter 338): unter 341
   - "MARKTPLATZ" oben auf der Feiern-Seite (unter 336): unter 343 */
@media (max-width: 640px) {
  main:has(> .events-liste) > h2:first-child { font-size: min(clamp(2.4rem, 5vw, 3.6rem), 8.9vw); }
  .events-teaser .sektion-titel { font-size: min(clamp(2.2rem, 5vw, 3.4rem), 8.9vw); }
  #kontakt .sektion-titel { font-size: min(clamp(2.2rem, 5vw, 3.4rem), 9.9vw); }
  .seiten-hero:not(.feiern-hero) h2 { font-size: min(clamp(3rem, 8vw, 6.5rem), 12.2vw); }
  .triberg h2 { font-size: min(clamp(2.6rem, 6.5vw, 5rem), 12.2vw); }
  .feiern-hero h2 { font-size: min(clamp(3rem, 8vw, 6.5rem), 14vw); }
}