/* index.css: Startseite. Selektoren unter .p-index. */

/* Hero, mobil: Foto zuerst, Text unten ueber dem Foto, Leiste darunter ------ */
.p-index .hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Handy: Foto oben, darunter Logo und Name auf dunklem Grund (nichts liegt auf dem Foto) */
  grid-template-rows: clamp(300px, 56vh, 520px) auto auto;
  grid-template-rows: clamp(300px, 56svh, 520px) auto auto;
}

.p-index .hero__photo {
  grid-area: 1 / 1;
  position: relative;
  min-height: 0;
  background: var(--bg-2);
  overflow: clip; /* Drift-Animation bleibt im Bildrahmen */
  isolation: isolate; /* Verlauf bleibt sicher über dem bewegten Foto */
}

.p-index .hero__photo::after { z-index: 1; }

.p-index .hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.p-index .hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(20 16 14 / .25) 0, rgb(20 16 14 / 0) 20%, rgb(20 16 14 / 0) 55%, var(--bg) 100%);
}

.p-index .hero__lead {
  grid-area: 2 / 1;
  position: relative;
  z-index: 1;
  padding: var(--s-2) var(--gutter) 0;
}

/* Logo: warmes Gold mit sanftem Leuchten */
.p-index .hero__logo {
  display: block;
  width: auto;
  height: clamp(150px, 42vw, 185px);
  margin-bottom: var(--s-4);
  filter: drop-shadow(0 0 10px rgb(232 190 110 / .35));
}

.p-index .hero h1 {
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.02em;
  text-wrap: wrap;
}

.p-index .hero__small {
  display: block;
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1;
}

.p-index .hero__big {
  display: block;
  font-size: var(--step-4);
  font-weight: 700;
  line-height: .95;
}

.p-index .hero__hours {
  margin-top: var(--s-4);
  max-width: none;
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 500;
}

.p-index .hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-3);
  max-width: none;
}

.p-index .hero__actions .btn { display: none; }

.p-index .hero__karte {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 600;
}

.p-index .hero__advent {
  padding: var(--s-6) var(--gutter) var(--s-2);
}


/* Kacheln, mobil: gestapelt -------------------------------------------------- */
.p-index .tiles {
  margin-block: var(--s-6) var(--section);
  gap: var(--s-2);
}



/* Karten: grosse goldene Zahl mit echtem Fakt, darunter Titel, eine Zeile, Link.
   3D-Neigung und Zaehlen per site.js; die Zahl schwebt in 3D ueber der Karte. */
.p-index .tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-2);
  border-radius: var(--radius);
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.p-index .tile.is-tilting { transition: transform .12s linear; }

/* Gezeichnete Motive aus dem Garten, im Stil des Hinte-Logos:
   gerade Goldlinien, abgeschrägte Ecken, ein Punkt als Akzent */
.p-index .tile__art {
  display: block;
  width: 100%;
  height: clamp(150px, 38vw, 210px);
  padding: var(--s-5) 0 0;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  overflow: visible;
  transform: translateZ(40px);
}
.p-index .tile__art .punkt { fill: var(--gold); stroke: none; }
.p-index .tile__art .flamme { fill: #e8be6e; stroke: none; transform-box: fill-box; transform-origin: 50% 100%; }
.p-index .tile__art .licht { fill: var(--gold); stroke: none; opacity: .35; }
.p-index .art-glas .fl { stroke: var(--accent); stroke-width: 3; }
.p-index .art-garage .vorhang { fill: rgb(179 32 42 / .55); stroke: var(--accent); }
.p-index .art-garage .raum { fill: rgb(232 190 110 / .04); transition: fill .6s ease; }
.p-index .art-garage .kette { stroke-width: 1.4; opacity: .8; }
.p-index .tile--garage:hover .art-garage .raum,
.p-index .tile--garage:focus-within .art-garage .raum { fill: rgb(232 190 110 / .16); }

.p-index .tile__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--s-4) var(--s-5) var(--s-5);
}

/* Leuchtender Rand wie am Anfang: ein goldener Lichtstreifen läuft langsam am Rand entlang.
   Der weiche Schein entsteht aus zwei breiteren, durchsichtigen Linien darunter (kein Filter),
   so sieht es auch auf dem iPhone weich aus und bleibt leicht */
.p-index .tile__border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.p-index .tile__border rect {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 9 91;
  stroke-dashoffset: 0;
}
.p-index .tile__border .schein2 { stroke: rgb(196 42 61 / .1); stroke-width: 16; }
.p-index .tile__border .schein1 { stroke: rgb(232 190 110 / .2); stroke-width: 8; }
.p-index .tile__border .kern { stroke: #f3d28c; stroke-width: 2.2; }
.p-index .tile__panel h2 { font-size: var(--step-1); }
.p-index .tile__panel p { margin-top: var(--s-1); color: var(--muted); font-size: var(--step--1); font-weight: 500; }
.p-index .tile__panel .tile__link { margin-top: auto; padding-top: var(--s-3); }
.p-index .tile__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-weight: 700;
}

.p-index .tile__panel h2 .tile__link { text-decoration: none; }

.p-index .tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.p-index .tile:focus-within { outline: 2px solid var(--gold); outline-offset: -4px; }
.p-index .tile__link:focus-visible { outline: none; }
.p-index .tile:hover .tile__link { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* Hero, Desktop: ein durchgehendes Band, Foto rechts blendet nach links in den Hintergrund ---- */
@media (min-width: 900px) {
  .p-index .hero {
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [content-start] min(100% - 2 * var(--gutter), var(--max))
      [content-end] minmax(var(--gutter), 1fr) [full-end];
    /* Band: 82 % der Fensterhöhe, 560 bis 820px; darunter die Advent-Leiste */
    grid-template-rows: clamp(560px, 82vh, 820px) auto;
    grid-template-rows: clamp(560px, 82svh, 820px) auto;
  }

  /* Foto: rechte ~64 % des Bandes, nie breiter als 1240px (Quelle: 1050px, kaum Hochskalierung) */
  .p-index .hero__photo {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: end;
    width: min(64%, 1240px);
    background: transparent;
  }

  /* Weich einblenden: Maske links (eine Ebene, laeuft in allen Browsern), warm abgedunkelt */
  .p-index .hero__photo img {
    object-position: 50% 3%;
    filter: brightness(.86) saturate(.85) sepia(.14);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgb(0 0 0 / .25) 14%, rgb(0 0 0 / .7) 30%, #000 46%);
    mask-image: linear-gradient(90deg, transparent 0, rgb(0 0 0 / .25) 14%, rgb(0 0 0 / .7) 30%, #000 46%);
  }

  /* Verlauf: links und unten in die Seitenfarbe, damit Text und Foto ein Bild sind */
  /* oben und unten weich in die Seitenfarbe (links uebernimmt die Maske) */
  .p-index .hero__photo::after {
    display: block;
    background:
      linear-gradient(0deg, var(--bg) 0, rgb(20 16 14 / .55) 14%, rgb(20 16 14 / 0) 34%),
      linear-gradient(180deg, rgb(20 16 14 / .6) 0, rgb(20 16 14 / 0) 16%);
  }

  .p-index .hero__lead {
    grid-column: content;
    grid-row: 1;
    align-self: end;
    padding: 0 0 var(--s-8);
  }

  .p-index .hero__logo { height: clamp(150px, 20vh, 215px); margin-bottom: var(--s-5); }
  .p-index .hero__small { font-size: clamp(1.75rem, 2.7vw, 3.25rem); }
  .p-index .hero__big { font-size: min(4.8vw, 5.75rem); }

  .p-index .hero__hours {
    margin-top: var(--s-5);
    font-size: var(--step-0);
    color: var(--text);
  }

  .p-index .hero__actions { margin-top: var(--s-4); gap: var(--s-3) var(--s-6); }

  /* Advent-Leiste: eigene Zeile unter dem Band, an der Inhaltsspalte ausgerichtet */
  .p-index .hero__advent {
    grid-column: content;
    grid-row: 2;
    padding: var(--s-6) 0 var(--s-2);
  }

  .p-index .advent { gap: var(--s-4); }
  .p-index .advent__title { font-size: var(--step-1); }
  .p-index .advent__d { font-size: var(--step-2); }
  .p-index .advent__wk { grid-template-columns: 2.75rem max-content; }
  .p-index .advent__m { font-size: var(--step-0); padding-bottom: .55rem; }
  .p-index .advent time { min-width: 2.75rem; padding: .35rem .25rem .4rem; }
  .p-index .advent__list { justify-content: space-between; column-gap: var(--s-6); row-gap: var(--s-4); }

  /* breit: alle sechs Wochen in einer Zeile, sonst zwei Zeilen (Nov, Dez) */
  @container (min-width: 78rem) {
    .p-index .advent__list { grid-template-columns: repeat(6, max-content); column-gap: var(--s-3); }
  }
}

/* unter 960 steht der Button unten am Bildschirm, im Hero nicht doppelt */
@media (min-width: 960px) {
  .p-index .hero__actions .btn { display: inline-flex; }
}

/* Kacheln, Desktop: ruhig und symmetrisch, Einleitung oben, drei gleiche Kacheln */
@media (min-width: 900px) {
  .p-index .tiles {
    margin-top: var(--s-6);
    row-gap: var(--s-5);
  }

    
  .p-index .tile { grid-column: span 4; }
  .p-index .tile__art { height: clamp(170px, 13vw, 230px); }
  .p-index .tile__panel { padding: var(--s-4) var(--s-5) var(--s-5); }
}

/* Bewegung: nur wenn nicht reduziert ------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  /* Startbild: langsamer Drift, Texte blenden nacheinander ein */
  .p-index .hero__photo img { animation: hero-drift 26s ease-in-out infinite alternate; }
  .p-index .hero__lead > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .p-index .hero__lead > :nth-child(2) { animation-delay: .25s; }
  .p-index .hero__lead > :nth-child(3) { animation-delay: .4s; }
  .p-index .hero__lead > :nth-child(4) { animation-delay: .55s; }
  /* Logo erscheint zuerst und atmet danach ganz leise */
  .p-index .hero__logo { animation: rise 1.1s cubic-bezier(.2, .7, .2, 1) both, logo-glow 5s ease-in-out 1.2s infinite; }

  /* Motive: Flammen flackern, Lichter gehen nacheinander an, Garage leuchtet warm */
  .p-index .tile__art .flamme { animation: flamme 2.8s ease-in-out infinite; }
  .p-index .art-tanne .flamme { animation-delay: .7s; }
  .p-index .art-tanne .licht,
  .p-index .art-garage .licht { animation: licht 6s ease-in-out infinite; }
  .p-index .tile__art .l2 { animation-delay: 1s; }
  .p-index .tile__art .l3 { animation-delay: 2s; }
  .p-index .tile__art .l4 { animation-delay: 3s; }
  .p-index .tile__art .l5 { animation-delay: 4s; }
  .p-index .tile__art .l6 { animation-delay: 5s; }
  .p-index .tile:hover .tile__art .licht { animation-duration: 2.4s; }

  /* Lichtstreifen läuft dauerhaft und langsam um den Rand */
  .p-index .tile__border rect { animation: border-run 9s linear infinite; }
}

@keyframes hero-drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.09) translate(-1.5%, 1%); } }
@keyframes logo-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgb(232 190 110 / .28)); }
  50% { filter: drop-shadow(0 0 22px rgb(232 190 110 / .6)); }
}
@keyframes border-run { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes flamme { 0%, 100% { transform: scale(1, 1); } 35% { transform: scale(.88, 1.08); } 70% { transform: scale(1.06, .94); } }
@keyframes licht { 0%, 100% { opacity: .3; } 15%, 45% { opacity: 1; } 60% { opacity: .3; } }

/* Schnee über dem Startbild (Canvas von site.js) */
.p-index .hero__snow {
  grid-area: 1 / 1;
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media (min-width: 900px) { .p-index .hero__snow { grid-column: 1 / -1; grid-row: 1; } }


/* Ruhige Version: Lichter leuchten dauerhaft */
@media (prefers-reduced-motion: reduce) {
  .p-index .tile__art .licht { opacity: .9; }
}

/* Goldene Akzente: Karten mit feinem Goldrand, beim Drüberfahren warmer Schein */
.p-index .tile { box-shadow: inset 0 0 0 1px rgb(217 180 106 / .2); }
.p-index .tile:hover, .p-index .tile:focus-within { box-shadow: inset 0 0 0 1px rgb(232 190 110 / .55), 0 0 30px rgb(232 190 110 / .16); }
.p-index .tile__art { filter: drop-shadow(0 0 6px rgb(232 190 110 / .35)); }
.p-index .advent__title { color: var(--gold-hell); }

/* Einleitung: zentriert, ohne Kasten, goldene Überschrift mit Zierlinie im Logo-Stil */
.p-index .tile-intro {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--s-6) 0 var(--s-4);
}
.p-index .tile-intro h2 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--gold-hell);
  text-shadow: 0 0 22px rgb(232 190 110 / .3), 0 0 40px rgb(163 24 47 / .25);
}
.p-index .tile-intro .zier {
  display: block;
  width: 140px;
  height: 2px;
  margin: var(--s-4) auto var(--s-4);
  background: var(--wein);
  box-shadow: 0 0 10px var(--wein-glow);
}
.p-index .tile-intro p { max-width: 58ch; margin: 0 auto; color: var(--muted); }

/* Donnerstag als kleines Schild statt grauer Zeile */
.p-index .extra-pill {
  display: inline-block;
  padding: .3em .9em;
  border: 1px solid rgb(163 24 47 / .8);
  border-radius: 999px;
  background: rgb(163 24 47 / .18);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 0 14px var(--wein-glow);
}

/* Mehr Weinrot: Karten mit rot-goldenem Rand und roter Glut */
.p-index .tile { box-shadow: inset 0 0 0 1px rgb(163 24 47 / .45), 0 0 26px rgb(163 24 47 / .14); }
.p-index .tile:hover, .p-index .tile:focus-within { box-shadow: inset 0 0 0 1px rgb(232 190 110 / .6), 0 0 34px rgb(163 24 47 / .3); }
.p-index .tile__panel h2 { padding-bottom: var(--s-2); background: var(--wein-linie) left bottom / 60% 2px no-repeat; }
/* Flüssig auf dem Handy: Logo leuchtet ruhig statt zu atmen, Motive ohne Weichzeichner-Filter */
@media (max-width: 899.98px) {
  .p-index .hero__logo { filter: drop-shadow(0 0 12px rgb(232 190 110 / .4)); }
  .p-index .tile__art { filter: none; }
}
@media (max-width: 899.98px) and (prefers-reduced-motion: no-preference) {
  .p-index .hero__logo { animation: rise 1.1s cubic-bezier(.2, .7, .2, 1) both; }
}

/* Motive lassen sich antippen (Reaktion in site.js), liegen dafür über dem Kartenlink */
.p-index .tile__art.is-spielbar { position: relative; z-index: 2; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.p-index .tile__art .funke { fill: #f6d98f; stroke: none; }
.p-index .art-garage .raum { transition: none; }
/* Abstand zwischen den Karten: der Schein ragt etwas über den Rand */
.p-index .tiles { row-gap: 44px; }
@media (min-width: 900px) {
  .p-index .tiles { row-gap: 44px; column-gap: max(var(--gap), 40px); }
}
/* Leichter Modus (schwache Handys, gesetzt von site.js): weniger Bewegung, gleiches Layout */

.leicht .p-index .hero__photo img { animation: none; }
.leicht .p-index .tile__art .licht { animation: none; opacity: .8; }
/* Startseite auf dem Handy: eine ruhige, zentrierte Spalte ------------------------------ */
@media (max-width: 899.98px) {
  .p-index .hero__lead { text-align: center; padding-top: var(--s-1); }
  .p-index .hero__logo { margin-inline: auto; height: clamp(130px, 36vw, 165px); }
  .p-index .hero__hours {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-4);
    font-size: var(--step-0);
  }
  /* Live-Status als kleines Schild */
  .p-index .hero__hours .live {
    margin: 0;
    padding: .35em .9em;
    border: 1px solid rgb(217 180 106 / .45);
    border-radius: 999px;
    background: rgb(232 190 110 / .07);
    font-size: var(--step--1);
    text-align: left;
  }
  .p-index .hero__actions { justify-content: center; margin-top: var(--s-4); }
  .p-index .hero__karte {
    justify-content: center;
    width: 100%;
    max-width: 22rem;
    padding: 0 var(--s-4);
    border: 1px solid rgb(217 180 106 / .5);
    border-radius: var(--radius);
    text-decoration: none;
  }

  /* Öffnungsabende: eine Reihe zum Wischen statt eines vollen Rasters */
  .p-index .hero__advent { padding: var(--s-7) 0 var(--s-2); }
  .p-index .advent { gap: var(--s-3); }
  .p-index .advent__title { padding-inline: var(--gutter); text-align: center; }
  .p-index .advent__list {
    display: flex;
    gap: var(--s-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    padding: var(--s-1) var(--gutter) var(--s-2);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
  }
  .p-index .advent__list::-webkit-scrollbar { display: none; }
  .p-index .advent__wk { display: flex; align-items: flex-end; gap: var(--s-2); flex: 0 0 auto; scroll-snap-align: start; }
  .p-index .advent__m { padding-bottom: .55rem; color: var(--gold-hell); font-weight: 600; }
  .p-index .advent time { min-width: 2.6rem; }
  .p-index .advent__extra time { box-shadow: inset 0 0 0 1px rgb(163 24 47 / .8); }
  .p-index .advent__hours { padding-inline: var(--gutter); text-align: center; }
  .p-index .extra-pill { padding: 0; border: 0; background: none; box-shadow: none; color: var(--muted); font-weight: 500; }
  .p-index .advent__hinweis { display: block; padding-inline: var(--gutter); text-align: center; color: var(--dim); font-size: var(--step--1); }

  .p-index .tile-intro { padding-top: var(--s-5); }
}
@media (min-width: 900px) {
  .p-index .advent__hinweis { display: none; }
}@media (max-width: 899.98px) {
  .p-index .advent__hours { text-wrap: balance; }
}/* versteckte Vorlesetexte in der Wischreihe an die Reihe binden, sonst ragen sie über die Seite hinaus */
@media (max-width: 899.98px) {
  .p-index .advent__list { position: relative; }
}
/* Handy: "Zur Karte" im Startbereich weglassen (Karte-Kachel und Menü führen schon dorthin) */
@media (max-width: 899.98px) {
  .p-index .hero__actions { display: none; }
}

@media (max-width: 899.98px) { .p-index .advent__list { flex-wrap: nowrap; } }

/* ---------- Karten dezenter: offene Spalten wie eine Infoleiste statt geschlossener Kästen ----------
   Keine Box, kein Rahmen. Feine Linie oben, dünne Trennlinien dazwischen. Als spielerisches Element
   läuft ein goldener Lichtstreifen über die obere Linie (nur transform, synchron auf allen drei). */
.p-index .tile,
.p-index .tile:hover,
.p-index .tile:focus-within { background-color: transparent; box-shadow: none; border-radius: 0; }
.p-index .tile__border { display: none; }
.p-index .tile { position: relative; border-top: 1px solid rgb(239 231 218 / .14); overflow: clip; }
.p-index .tile::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 38%;
  height: 2px;
  background: linear-gradient(90deg, rgb(232 190 110 / 0), var(--gold-hell) 50%, rgb(232 190 110 / 0));
  box-shadow: 0 0 10px rgb(232 190 110 / .7);
  transform: translateX(-110%);
  pointer-events: none;
}
.p-index .tile__panel { padding: var(--s-4) 0 var(--s-5); }
.p-index .tile__art { padding-top: var(--s-6); }
.p-index .tile__panel h2 { background: none; padding-bottom: 0; }
.p-index .tiles { row-gap: var(--s-6); }
@media (min-width: 900px) {
  .p-index .tiles { column-gap: 0; row-gap: 0; }
  .p-index .tile { padding-inline: var(--s-6); }
  .p-index .tile + .tile { border-left: 1px solid rgb(239 231 218 / .1); }
  .p-index .tile:first-of-type { padding-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .p-index .tile::before { animation: streif 6s cubic-bezier(.45, 0, .2, 1) infinite; will-change: transform; }
}
@keyframes streif { 0% { transform: translateX(-110%); } 55%, 100% { transform: translateX(290%); } }
/* Drüberfahren: Motiv leuchtet etwas, Titel wird gold */
.p-index .tile:hover .tile__panel h2, .p-index .tile:focus-within .tile__panel h2 { color: var(--gold-hell); }
.p-index .tile__panel h2 { transition: color .3s ease; }
/* Vier Punkte in Besucher-Reihenfolge: Zeiten & Anfahrt, Karte, Garten, Glühoase.
   Symbole kleiner und linksbündig, Text darunter. */
.p-index .tile__art { width: auto; height: 96px; margin: 0; align-self: flex-start; padding-top: var(--s-5); overflow: visible; }
.p-index .tile__art.is-spielbar { margin-left: 0; }
@media (min-width: 900px) and (max-width: 1099.98px) {
  .p-index .tile { grid-column: span 6; }
  .p-index .tile + .tile { border-left: 0; }
  .p-index .tile:nth-of-type(even) { border-left: 1px solid rgb(239 231 218 / .1); }
  .p-index .tile:nth-of-type(odd) { padding-left: 0; }
}
@media (min-width: 1100px) {
  .p-index .tile { grid-column: span 3; padding-inline: var(--s-5); }
  .p-index .tile:first-of-type { padding-left: 0; }
}
/* Startbild ruckelfrei: erst zeigen, wenn es fertig geladen ist, dann sanft einblenden.
   Die langsame Bildbewegung startet erst danach (nur mit JS; ohne JS sofort sichtbar). */
.js .p-index .hero__photo img { opacity: 0; transition: opacity .9s ease; will-change: transform; }
.js .p-index .hero.ist-geladen .hero__photo img { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .p-index .hero:not(.ist-geladen) .hero__photo img { animation: none; }
}
/* Weicher Übergang links am PC: Die Ausblendmaske sitzt jetzt am festen Bildrahmen statt am bewegten Foto.
   Vorher wanderte die Maske mit der langsamen Bildbewegung mit, und am Rahmenrand entstand zeitweise eine harte Kante. */
@media (min-width: 900px) {
  .p-index .hero__photo img { -webkit-mask-image: none; mask-image: none; }
  .p-index .hero__photo {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgb(0 0 0 / .25) 14%, rgb(0 0 0 / .7) 30%, #000 46%);
    mask-image: linear-gradient(90deg, transparent 0, rgb(0 0 0 / .25) 14%, rgb(0 0 0 / .7) 30%, #000 46%);
  }
}
/* Startbild: vorerst wieder der Weihnachtsmann (neues Foto folgt). Zum Wechsel: Bildpfade in index.html und diese Ausschnitte anpassen. Für die Ausschankhütte passten 50% 55% (Handy) und 50% 38% (PC). */
.p-index .hero__photo img { object-position: 50% 45%; }
@media (min-width: 900px) { .p-index .hero__photo img { object-position: 50% 22%; } }

/* Neue Symbole: Uhr (Öffnungszeiten), Speisekarte, Hütte (Garten), anstoßende Becher (Glühoase) */
.p-index .art-karte .fl, .p-index .art-oase .fl { stroke: var(--accent); stroke-width: 3; }
.p-index .art-huette .kette { stroke-width: 1.4; opacity: .8; }
.p-index .art-huette .stern { fill: var(--accent); stroke: none; filter: drop-shadow(0 0 4px rgb(224 52 79 / .7)); }
.p-index .art-oase .dampf { stroke: rgb(243 233 216 / .55); stroke-width: 1.6; stroke-linecap: round; opacity: .7; }
.p-index .art-uhr .zeiger-gross, .p-index .art-uhr .zeiger-klein,
.p-index .art-oase .becher-l, .p-index .art-oase .becher-r { transform-box: view-box; }
.p-index .art-uhr .zeiger-gross, .p-index .art-uhr .zeiger-klein { transform-origin: 60px 60px; }
.p-index .art-oase .becher-l { transform-origin: 37px 94px; }
.p-index .art-oase .becher-r { transform-origin: 83px 94px; }
@media (prefers-reduced-motion: no-preference) {
  .p-index .art-uhr .zeiger-gross { animation: zeiger 40s linear infinite; }
  .p-index .art-huette .licht { animation: licht 6s ease-in-out infinite; }
  .p-index .art-oase .dampf { animation: dampf-steigt 3.6s ease-in-out infinite; }
  .p-index .art-oase .dampf + .dampf { animation-delay: 1.8s; }
  .p-index .tile:hover .art-oase .becher-l { transform: rotate(8deg); }
  .p-index .tile:hover .art-oase .becher-r { transform: rotate(-8deg); }
  .p-index .art-oase .becher-l, .p-index .art-oase .becher-r { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
}
@keyframes zeiger { to { transform: rotate(360deg); } }
@keyframes dampf-steigt { 0%, 100% { opacity: 0; transform: translateY(4px); } 40% { opacity: .8; } 80% { opacity: 0; transform: translateY(-6px); } }
.p-index .art-oase .dampf { transform-box: fill-box; }
/* Linien der Spalten laufen an den Enden weich aus (statt harter Rahmenlinien) */
.p-index .tile,
.p-index .tile + .tile,
.p-index .tile:nth-of-type(even),
.p-index .tile:nth-of-type(odd) { border-top: 0; border-left: 0; }
.p-index .tile {
  background-image: linear-gradient(90deg, rgb(239 231 218 / 0), rgb(239 231 218 / .16) 30%, rgb(239 231 218 / .16) 70%, rgb(239 231 218 / 0));
  background-size: 100% 1px;
  background-position: left top;
  background-repeat: no-repeat;
}
@media (min-width: 900px) and (max-width: 1099.98px) {
  .p-index .tile:nth-of-type(even) {
    background-image:
      linear-gradient(90deg, rgb(239 231 218 / 0), rgb(239 231 218 / .16) 30%, rgb(239 231 218 / .16) 70%, rgb(239 231 218 / 0)),
      linear-gradient(180deg, rgb(239 231 218 / 0), rgb(239 231 218 / .12) 35%, rgb(239 231 218 / .12) 65%, rgb(239 231 218 / 0));
    background-size: 100% 1px, 1px 100%;
    background-position: left top, left top;
  }
}
@media (min-width: 1100px) {
  .p-index .tile + .tile {
    background-image:
      linear-gradient(90deg, rgb(239 231 218 / 0), rgb(239 231 218 / .16) 30%, rgb(239 231 218 / .16) 70%, rgb(239 231 218 / 0)),
      linear-gradient(180deg, rgb(239 231 218 / 0), rgb(239 231 218 / .12) 35%, rgb(239 231 218 / .12) 65%, rgb(239 231 218 / 0));
    background-size: 100% 1px, 1px 100%;
    background-position: left top, left top;
  }
}
/* Kurze Spaltentexte auf der Startseite ohne automatische Silbentrennung (sonst z. B. "Perso-nen") */
.p-index .tile__panel p { hyphens: manual; -webkit-hyphens: manual; }