/* =========================================================================
   Players Lounge Dorsten, Gestaltungsebene „Lounge" (20.09.2026)
   Liegt über stil.css und wird danach geladen. stil.css bleibt unverändert,
   damit Speisekarten-Viewer, Formulare und Unterseiten nicht brechen.

   Leitidee: ein Abend in der Lounge. Dunkler Raum, warmes Messing wie an den
   Lampenstangen und Absperrpfosten, das Grün des Tuchs als zweite Fläche,
   Rot bleibt das Signal der Marke. Überschriften wie auf einem Barschild:
   Plakatschrift in Versalien, Akzentwörter kursiv in Serifen.

   Aufbau: A Schriften und Farben, B Grundformen, C Kopf, D Hero, E Laufband,
           F Kapitel und Kugeln, G Abschnitte der Startseite, H Tuch,
           I Fragen, J Standorte, K Schluss, L Schmale Bildschirme, M Ruhe
   ========================================================================= */

/* --- A Schriften und Farben -------------------------------------------- */

/* Beide Schriften liegen lokal, SIL Open Font License. Kein Abruf bei Google. */
@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/bebas-neue.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-600-italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  --grund:        #0a0a0c;
  --grund-2:      #100f13;
  --karte:        #17161c;
  --karte-hoch:   #1f1e26;
  --rand:         #2a2830;

  --gold:         #c9a35a;
  --gold-hell:    #e7c988;
  --gold-dunkel:  #8f7135;
  --tuch:         #0e6b57;
  --tuch-hell:    #17a184;
  --tuch-dunkel:  #08382f;
  --holz:         #2a190f;

  --plakat: "Bebas Neue", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --feder:  "Playfair Display", Georgia, "Times New Roman", serif;
}

/* --- B Grundformen ------------------------------------------------------ */

h1, h2 {
  font-family: var(--plakat);
  font-weight: 400;
  letter-spacing: .015em;
  line-height: .95;
  text-transform: uppercase;
}
h1 { font-size: clamp(3rem, 1.6rem + 6.4vw, 6.6rem); }
h2 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.2rem); }

/* Akzentwort in Überschriften: kursiv, gemischte Schreibung, Messing */
h1 em, h2 em, .feder {
  font-family: var(--feder);
  font-style: italic;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -.01em;
  color: var(--gold-hell);
}
h1 em { display: block; font-size: .46em; line-height: 1.15; margin-top: .25em; }
h2 em { display: block; font-size: .6em; line-height: 1.15; margin-top: .18em; }

/* Das alte Farbspiel im Hero der Unterseiten wird zum ruhigen Messington */
.leuchten {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--gold-hell);
  animation: none;
  font-family: var(--feder);
  font-style: italic;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -.01em;
}

.vorspann { color: #b9b6ae; }

/* Knöpfe: kantiger, mit Messingkante statt weißer */
.knopf { border-radius: 2px; letter-spacing: .12em; }
.knopf::before { background: var(--gold-hell); }
.knopf-gold {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold-hell);
  box-shadow: none;
}
.knopf-gold::before { background: var(--gold); opacity: 1; }
.knopf-gold:hover,
.knopf-gold:focus-visible {
  background: rgba(201, 163, 90, .14);
  color: #fff;
  box-shadow: none;
}

:focus-visible { outline-color: var(--gold-hell); }

/* --- C Kopf -------------------------------------------------------------- */

.kopf-logo img { height: clamp(48px, 5.2vw, 68px); }
.seite-start .kopf:not(.ist-gescrollt) {
  background: linear-gradient(180deg, rgba(8, 8, 10, .7), transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
body.menue-offen.seite-start .kopf { background: #0a0a0d; }
.statusleiste { border-bottom: 1px solid rgba(201, 163, 90, .16); }

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

.pl-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: min(94svh, 900px);
  margin-top: -6.5rem;              /* Bild läuft unter den Kopf */
  padding-top: 9rem;
  overflow: hidden;
  background: #000;
}
.pl-hero-bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  filter: saturate(1.05) contrast(1.04);
  transform: scale(1.04);
  animation: pl-atmen 22s ease-in-out infinite alternate;
}
@keyframes pl-atmen { to { transform: scale(1.11) translateY(-1.2%); } }

/* Licht: links und unten dunkel, damit die Schrift trägt, rechts bleibt das Foto */
.pl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 8, 10, .93) 0%, rgba(8, 8, 10, .74) 36%, rgba(8, 8, 10, .18) 72%, rgba(8, 8, 10, .35) 100%),
    linear-gradient(0deg, var(--grund) 0%, rgba(10, 10, 12, .55) 22%, transparent 48%),
    linear-gradient(180deg, rgba(8, 8, 10, .8) 0%, transparent 22%);
}

.pl-hero-inhalt { padding-bottom: clamp(7.5rem, 13vw, 10.5rem); }

.pl-dach {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1.3rem;
  color: var(--gold-hell);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.pl-dach::before { content: ""; width: 3.2rem; height: 1px; background: var(--gold); }

.pl-hero h1 { margin: 0 0 .35em; max-width: 9.5em; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }

.pl-hero-text {
  max-width: 34rem;
  margin: 0 0 1.9rem;
  color: #d6d3cb;
  font-size: clamp(1.02rem, .97rem + .35vw, 1.2rem);
}

.pl-spruch {
  margin: 2rem 0 0;
  font-family: var(--feder);
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  color: #a9a59b;
}
.pl-spruch span + span::before { content: "·"; margin: 0 .6em; color: var(--gold); }

/* Die Bande: vier Auskünfte, die jeder sofort braucht */
.pl-bande {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
}
.pl-bande-reihe {
  display: grid;
  grid-template-columns: 1.15fr 1.25fr .9fr 1.15fr;
  margin-block: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--gold);
  background: rgba(12, 11, 14, .78);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.pl-bande-reihe li { margin: 0; border-left: 1px solid rgba(201, 163, 90, .22); }
.pl-bande-reihe li:first-child { border-left: 0; }
.pl-bande-reihe a {
  display: block;
  height: 100%;
  padding: 1.15rem 1.4rem 1.2rem;
  color: #fff;
  text-decoration: none;
  transition: background .25s ease;
}
.pl-bande-reihe a:hover,
.pl-bande-reihe a:focus-visible { background: rgba(201, 163, 90, .13); }
.pl-bande-titel {
  display: block;
  margin-bottom: .3rem;
  color: var(--gold-hell);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.pl-bande-wert { display: block; font-weight: 700; line-height: 1.3; }
.pl-bande-wert small { display: block; font-weight: 400; color: #aeaaa0; font-size: .86em; }

.pl-punkt {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  margin-right: .5rem;
  border-radius: 50%;
  background: #8c887e;
  vertical-align: .08em;
}
.pl-punkt.ist-offen { background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: pl-puls 2.4s ease-out infinite; }
.pl-punkt.ist-zu { background: var(--akzent-hell); }
@keyframes pl-puls { 70% { box-shadow: 0 0 0 10px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }

/* --- E Laufband ------------------------------------------------------------ */

.pl-laufband {
  overflow: hidden;
  padding: 1.05rem 0;
  border-block: 1px solid var(--rand);
  background: var(--grund-2);
  white-space: nowrap;
}
.pl-laufband-spur { display: inline-flex; animation: pl-laufen 38s linear infinite; }
.pl-laufband-spur span {
  display: inline-flex;
  align-items: center;
  font-family: var(--plakat);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.8rem);
  letter-spacing: .08em;
  color: #6f6c65;
}
.pl-laufband-spur span::after {
  content: "";
  width: .5em;
  height: .5em;
  margin: 0 1.4em;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff 0 12%, var(--akzent) 30%, #6b0d10 100%);
}
.pl-laufband-spur span:nth-child(3n+2)::after { background: radial-gradient(circle at 32% 30%, #fff 0 12%, var(--gold) 30%, #5d4515 100%); }
.pl-laufband-spur span:nth-child(3n)::after   { background: radial-gradient(circle at 32% 30%, #fff 0 12%, var(--tuch-hell) 30%, #063a30 100%); }
@keyframes pl-laufen { to { transform: translateX(-50%); } }

/* --- F Kapitel und Kugeln ------------------------------------------------- */

/* Die Seite zählt wie eine Partie von der Eins bis zur Acht. */
.pl-kugel {
  --f: #f1bd2c;
  --f-tief: #7d5c08;
  flex: none;
  display: grid;
  place-items: center;
  width: 3.1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 26%, rgba(255, 255, 255, .9) 0 5%, rgba(255, 255, 255, 0) 17%),
    radial-gradient(circle at 42% 38%, var(--f) 0 46%, var(--f-tief) 100%);
  box-shadow: inset -5px -7px 12px rgba(0, 0, 0, .42), 0 10px 20px rgba(0, 0, 0, .5);
}
.pl-kugel > span {
  display: grid;
  place-items: center;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f5f1e6;
  color: #111;
  font-size: .88rem;
  font-weight: 800;
  line-height: 1;
}
.pl-k1 { --f: #f1bd2c; --f-tief: #7d5c08; }
.pl-k2 { --f: #2459c4; --f-tief: #0b1f52; }
.pl-k3 { --f: #d8262c; --f-tief: #5c0b0e; }
.pl-k4 { --f: #6a3aa8; --f-tief: #27103f; }
.pl-k5 { --f: #ee7a1d; --f-tief: #6b3005; }
.pl-k6 { --f: #148f63; --f-tief: #053626; }
.pl-k7 { --f: #8e1f2b; --f-tief: #36070c; }
.pl-k8 { --f: #26262b; --f-tief: #000; }

.pl-kapitel {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.4rem;
  color: var(--gold-hell);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.pl-kapitel::after { content: ""; flex: 0 1 5rem; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }

/* --- G Abschnitte der Startseite ---------------------------------------- */

.pl-abschnitt { padding-block: var(--abschnitt); }
.pl-abschnitt-hell { background: var(--grund-2); }

/* 1 Billard: großes Foto, die Textkarte greift hinein */
.pl-buehne {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
}
.pl-buehne-bild { grid-column: 1 / span 8; grid-row: 1; position: relative; }
.pl-buehne-bild img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: var(--schatten-hoch);
}
/* Messingwinkel an zwei Ecken, wie Beschläge */
.pl-buehne-bild::before,
.pl-buehne-bild::after {
  content: "";
  position: absolute;
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid var(--gold);
  pointer-events: none;
}
.pl-buehne-bild::before { top: -1rem; left: -1rem; border-right: 0; border-bottom: 0; }
.pl-buehne-bild::after  { bottom: -1rem; right: -1rem; border-left: 0; border-top: 0; }

.pl-buehne-text {
  grid-column: 8 / span 5;
  grid-row: 1;
  position: relative;
  z-index: 1;
  padding: clamp(1.8rem, 3.2vw, 3rem);
  background: linear-gradient(160deg, rgba(31, 30, 38, .97), rgba(18, 17, 22, .97));
  border: 1px solid var(--rand);
  border-top: 2px solid var(--gold);
  box-shadow: var(--schatten-hoch);
}
.pl-buehne-gedreht .pl-buehne-bild { grid-column: 5 / span 8; }
.pl-buehne-gedreht .pl-buehne-text { grid-column: 1 / span 5; }

.pl-merkliste { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.pl-merkliste li {
  position: relative;
  margin: 0;
  padding: .7rem 0 .7rem 1.7rem;
  border-top: 1px solid var(--rand);
  color: #cfccc4;
}
.pl-merkliste li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: 1.2rem;
  width: .5rem;
  height: .5rem;
  background: var(--gold);
  transform: rotate(45deg);
}
.pl-merkliste strong { color: #fff; }

/* 2 Dart, Spiele, Gutscheine: drei Karten */
.pl-kopfzeile { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.pl-dreier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.pl-karte {
  position: relative;
  padding: 2rem 1.8rem 2.1rem;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 3px;
  transition: transform var(--tempo), border-color .3s ease, background .3s ease;
}
.pl-karte:hover { transform: translateY(-6px); border-color: var(--gold-dunkel); background: var(--karte-hoch); }
.pl-karte svg { width: 2.6rem; height: 2.6rem; margin-bottom: 1.2rem; color: var(--gold-hell); }
.pl-karte h3 {
  font-family: var(--plakat);
  font-weight: 400;
  font-size: 1.9rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: .45em;
}
.pl-karte p { margin: 0; color: #bdb9b0; }
.pl-karte-preis {
  display: inline-block;
  margin-top: 1.2rem !important;
  padding-top: .9rem;
  border-top: 1px solid var(--rand);
  color: var(--gold-hell) !important;
  font-weight: 700;
  letter-spacing: .04em;
}

/* 4 Rundgang: Bento aus echten Aufnahmen */
.pl-rundgang {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(200px, 23vw, 300px);
  gap: .9rem;
}
.pl-rundgang figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--karte);
}
.pl-rundgang img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.pl-rundgang figure:hover img { transform: scale(1.06); }
.pl-rundgang figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 2.6rem 1.1rem .95rem;
  background: linear-gradient(0deg, rgba(6, 6, 8, .9), transparent);
  font-size: .9rem;
  font-weight: 600;
  color: #f1eee6;
}
.pl-rundgang figcaption::before { content: ""; display: inline-block; width: 1.4rem; height: 1px; margin-right: .6rem; background: var(--gold); vertical-align: .3em; }
.pl-r-a { grid-column: span 4; grid-row: span 2; }
.pl-r-b { grid-column: span 8; }
.pl-r-c { grid-column: span 5; }
.pl-r-d { grid-column: span 3; }

/* 3 Bar: Foto über die volle Breite, die Karte der Bar liegt darauf */
.pl-bar { position: relative; isolation: isolate; padding-block: clamp(5rem, 12vw, 9.5rem); overflow: hidden; }
.pl-bar-bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.pl-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(270deg, rgba(8, 8, 10, .94) 0%, rgba(8, 8, 10, .78) 36%, rgba(8, 8, 10, .08) 70%),
    linear-gradient(0deg, var(--grund) 0%, transparent 14%, transparent 86%, var(--grund) 100%);
}
.pl-bar-text { max-width: 33rem; margin-left: auto; }

/* --- H Tuch: die Preise liegen auf dem Tisch ---------------------------- */

.pl-tisch {
  position: relative;
  padding: clamp(.9rem, 1.6vw, 1.3rem);
  border-radius: 10px;
  background: linear-gradient(145deg, #3a2415, var(--holz) 45%, #1b0f08);
  box-shadow: var(--schatten-hoch), inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* Rauten auf der Bande, wie die Markierungen am echten Tisch */
.pl-tisch::before,
.pl-tisch::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  height: clamp(.9rem, 1.6vw, 1.3rem);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='10'%3E%3Cpath d='M70 1l4 4-4 4-4-4z' fill='%23d9b86f'/%3E%3C/svg%3E") repeat-x center;
  opacity: .85;
  pointer-events: none;
}
.pl-tisch::before { top: 0; }
.pl-tisch::after  { bottom: 0; }

.pl-tuch {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4.2rem);
  border-radius: 4px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(70% 90% at 50% -10%, rgba(255, 244, 200, .2), transparent 62%),
    linear-gradient(180deg, var(--tuch), var(--tuch-dunkel));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), inset 0 18px 50px rgba(0, 0, 0, .35);
}
.pl-tuch h2 { color: #fff; margin-bottom: .3em; }
.pl-tuch .pl-kapitel { color: #d8f3e9; }
.pl-tuch .pl-kapitel::after { background: linear-gradient(90deg, #d8f3e9, transparent); }
.pl-tuch-text p { color: #cfe9e0; max-width: 30rem; }

.pl-preise { margin: 0; }
.pl-preise > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .28);
}
.pl-preise > div:first-child { border-top: 1px dashed rgba(255, 255, 255, .28); }
.pl-preise dt { font-weight: 700; color: #fff; }
.pl-preise dt small { display: block; margin-top: .15rem; font-weight: 400; font-size: .86rem; color: #bfe0d5; }
.pl-preise dd {
  margin: 0;
  font-family: var(--plakat);
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem);
  letter-spacing: .03em;
  line-height: 1;
  color: var(--gold-hell);
  text-align: right;
}
.pl-preise dd.ist-text { font-family: var(--schrift); font-size: .95rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; max-width: 9.5rem; }

/* --- I Kurz gefragt --------------------------------------------------------- */

.pl-fragen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.pl-fragen-liste { border-top: 1px solid var(--rand); }
.pl-frage { border-bottom: 1px solid var(--rand); }
.pl-frage summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.25rem 0;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.08rem;
  color: #fff;
}
.pl-frage summary::-webkit-details-marker { display: none; }
.pl-frage summary::after {
  content: "";
  flex: none;
  width: .7rem;
  height: .7rem;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s ease;
}
.pl-frage[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.pl-frage summary:hover { color: var(--gold-hell); }
.pl-frage p { margin: 0; padding: 0 2.5rem 1.4rem 0; color: #c4c0b7; }

/* --- J Wann und wo, Standorte ---------------------------------------------- */

.pl-wo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.pl-zeiten { margin: 0; }
.pl-zeiten > div { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--rand); }
.pl-zeiten dt { color: #cfccc4; }
.pl-zeiten dd { margin: 0; font-weight: 700; color: #fff; text-align: right; }
.pl-zeiten .ist-heute dt, .pl-zeiten .ist-heute dd { color: var(--gold-hell); }

.pl-adresse {
  font-style: normal;
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 0 0 1.4rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--gold);
}
.pl-adresse a, .pl-frage a { color: var(--gold-hell); }
.pl-adresse a:hover, .pl-frage a:hover { color: #fff; }
.pl-adresse strong { display: block; font-family: var(--plakat); font-weight: 400; font-size: 1.7rem; letter-spacing: .04em; text-transform: uppercase; }

.pl-orte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.pl-ort { padding: 1.3rem 1.4rem; border: 1px solid var(--rand); border-radius: 3px; background: var(--karte); }
.pl-ort.ist-hier { border-color: var(--gold-dunkel); background: linear-gradient(160deg, rgba(201, 163, 90, .12), var(--karte) 60%); }
.pl-ort-name { margin: 0 0 .2rem; font-family: var(--plakat); font-size: 1.7rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.pl-ort-zeile { margin: 0; color: #aeaaa0; font-size: .93rem; }
.pl-ort-marke { display: inline-block; margin-top: .7rem; font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hell); }

/* --- K Schluss: die Acht ---------------------------------------------------- */

.pl-schluss {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 11vw, 8.5rem);
  text-align: center;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(214, 25, 25, .22), transparent 65%),
    var(--grund-2);
  border-top: 1px solid var(--rand);
}
.pl-acht {
  display: grid;
  place-items: center;
  width: clamp(6rem, 12vw, 9rem);
  aspect-ratio: 1;
  margin: 0 auto 2rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 25%, rgba(255, 255, 255, .85) 0 4%, rgba(255, 255, 255, 0) 16%),
    radial-gradient(circle at 42% 38%, #34343b 0 40%, #000 100%);
  box-shadow: inset -10px -14px 26px rgba(0, 0, 0, .7), 0 26px 50px rgba(0, 0, 0, .6);
}
.pl-acht span {
  display: grid;
  place-items: center;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f5f1e6;
  color: #111;
  font-family: var(--plakat);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1;
  padding-top: .08em;
}
.pl-schluss h2 { margin-bottom: .35em; }
.pl-schluss p { max-width: 36rem; margin-inline: auto; color: #c4c0b7; }
.pl-schluss .knopf-reihe { justify-content: center; }

/* --- L Schmale Bildschirme ------------------------------------------------- */

@media (max-width: 1080px) {
  .pl-bande-reihe { grid-template-columns: 1fr 1fr; }
  .pl-bande-reihe li:nth-child(3) { border-left: 0; }
  .pl-bande-reihe li:nth-child(n+3) { border-top: 1px solid rgba(201, 163, 90, .22); }
  .pl-hero-inhalt { padding-bottom: clamp(11rem, 26vw, 13rem); }
  .pl-dreier { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .pl-buehne { display: block; }
  .pl-buehne-bild img { aspect-ratio: 4 / 3; }
  .pl-buehne-text { margin: -3.5rem 1rem 0; }
  .pl-tuch, .pl-fragen, .pl-wo { grid-template-columns: 1fr; }
  .pl-bar::before {
    background:
      linear-gradient(0deg, rgba(8, 8, 10, .96) 0%, rgba(8, 8, 10, .82) 55%, rgba(8, 8, 10, .45) 100%);
  }
  .pl-bar-text { margin-left: 0; }
  .pl-orte { grid-template-columns: 1fr; }

  /* Der Rundgang wird auf dem Handy zum Wischen */
  .pl-rundgang {
    display: flex;
    gap: .8rem;
    margin-inline: calc(-1 * var(--luft));
    padding-inline: var(--luft);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pl-rundgang::-webkit-scrollbar { display: none; }
  .pl-rundgang figure { flex: 0 0 82%; height: 62vw; max-height: 420px; scroll-snap-align: center; }
  .pl-wisch { display: block !important; }
}
.pl-wisch { display: none; margin: .9rem 0 0; color: #8d897f; font-size: .85rem; letter-spacing: .04em; }

@media (max-width: 720px) {
  /* Auf dem Handy bleibt oben ein Stück Raum frei, damit man den Laden sieht,
     bevor die Schrift kommt. Der Ausschnitt zeigt Tisch und Lampen. */
  .pl-hero { min-height: 0; margin-top: -5.5rem; padding-top: 15.5rem; }
  .pl-hero::before {
    background:
      linear-gradient(0deg, var(--grund) 0%, rgba(8, 8, 10, .94) 40%, rgba(8, 8, 10, .62) 60%, rgba(8, 8, 10, .08) 80%, rgba(8, 8, 10, .55) 100%);
  }
  .pl-hero-bild { object-position: 80% 30%; height: 62%; }
  .pl-hero-inhalt { padding-bottom: 2.2rem; }
  .pl-bande { position: static; }
  .pl-bande-reihe { background: var(--grund-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pl-bande-reihe a { padding: .95rem 1rem 1rem; }
  .pl-hero .knopf-reihe .knopf { flex: 1 1 100%; }
  .pl-preise dd.ist-text { max-width: 7.5rem; }
  .pl-frage p { padding-right: 0; }

  /* Unten fix: drei Wege statt zwei, die Karte gehört dazu */
  .aktionsleiste { grid-template-columns: 1fr 1fr 1.35fr; }
}

/* --- M Ruhe: wer keine Bewegung möchte, bekommt keine ---------------------- */

@media (prefers-reduced-motion: reduce) {
  .pl-hero-bild, .pl-laufband-spur, .pl-punkt.ist-offen { animation: none; }
  .pl-hero-bild { transform: none; }
  .pl-rundgang img, .pl-karte { transition: none; }
}

/* --- N Feiern: Band auf der Startseite und Schritte auf der Unterseite ---- */

/* Rotes Band: bringt zwischen dem dunklen Rundgang und dem grünen Preistisch
   die dritte Farbe der Lounge ins Spiel. */
.pl-feiern {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 7rem);
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(255, 120, 90, .22), transparent 60%),
    radial-gradient(60% 100% at 0% 100%, rgba(0, 0, 0, .55), transparent 70%),
    linear-gradient(135deg, #7a0f14 0%, #a3141b 48%, #5b0a0e 100%);
}
.pl-feiern::after {            /* riesige Drei als stilles Motiv im Hintergrund */
  content: "";
  position: absolute;
  right: -6rem;
  bottom: -9rem;
  width: clamp(16rem, 34vw, 30rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 25%, rgba(255, 255, 255, .5) 0 4%, rgba(255, 255, 255, 0) 17%),
    radial-gradient(circle at 42% 38%, rgba(255, 255, 255, .13) 0 46%, rgba(0, 0, 0, .25) 100%);
  pointer-events: none;
}
.pl-feiern-raster {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.pl-feiern .pl-kapitel { color: #ffe3b0; }
.pl-feiern .pl-kapitel::after { background: linear-gradient(90deg, #ffe3b0, transparent); }
.pl-feiern h2 em { color: #ffe3b0; }
.pl-feiern p { color: #f6dcd9; max-width: 34rem; }
.pl-feiern .knopf { background: #0d0c0f; box-shadow: 0 10px 26px rgba(0, 0, 0, .4); }
.pl-feiern .knopf:hover, .pl-feiern .knopf:focus-visible { background: #000; }
.pl-feiern .knopf-gold { background: transparent; border-color: #ffe3b0; color: #ffe3b0; box-shadow: none; }
.pl-feiern .knopf-gold:hover { background: rgba(0, 0, 0, .25); }

.pl-anlaesse { list-style: none; margin: 0; padding: 0; }
.pl-anlaesse li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(255, 227, 176, .3);
}
.pl-anlaesse li:first-child { border-top: 1px solid rgba(255, 227, 176, .3); }
.pl-anlaesse strong {
  font-family: var(--plakat);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  letter-spacing: .03em;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}
.pl-anlaesse span { color: #f3cfcb; font-size: .93rem; text-align: right; }

/* Drei Schritte, jede Stufe mit ihrer Kugel */
.pl-schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  counter-reset: none;
}
.pl-schritte li {
  position: relative;
  margin: 0;
  padding: 2.6rem 1.8rem 2rem;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 3px;
}
.pl-schritte .pl-kugel { position: absolute; top: -1.55rem; left: 1.6rem; }
.pl-schritte h3 {
  font-family: var(--plakat);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: .4em;
}
.pl-schritte p { margin: 0; color: #bdb9b0; }
/* Verbindungslinie zwischen den Stufen, wie der Lauf einer Kugel */
.pl-schritte li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1.4rem - 1px);
  width: 1.4rem;
  height: 1px;
  background: var(--gold-dunkel);
}

/* Die weiße: Spielkugel ohne Nummer, für „Wann und wo" */
.pl-kweiss { --f: #f7f4ea; --f-tief: #8f8a7c; }
.pl-kweiss > span { display: none; }

/* Unterseiten: die Überschrift im Seitenkopf darf nicht die ganze Breite fluten */
.seiten-kopf h1 { max-width: 10.5em; margin-bottom: .45em; font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5.2rem); text-wrap: balance; }
.seiten-kopf h1 em { margin-top: .3em; }
.seiten-kopf .knopf-reihe { margin-top: 1.6rem; }

@media (max-width: 900px) {
  .pl-feiern-raster { grid-template-columns: 1fr; }
  .pl-schritte { grid-template-columns: 1fr; gap: 2.6rem; }
  .pl-schritte li + li::before { display: none; }
}

/* --- O Gästestimmen --------------------------------------------------------
   Vier Rezensionen aus dem Google-Profil, im Wortlaut. Kein Widget, kein Skript
   von Google: die Seite bleibt ohne externe Dienste. */

.pl-sterne { margin: 0; color: var(--gold-hell); letter-spacing: .14em; font-size: 1rem; line-height: 1; }
.pl-sterne-gross { font-size: 1.7rem; margin-bottom: 1.6rem; }

.pl-hero-wertung { margin: 1.1rem 0 0; font-size: .95rem; }
.pl-hero-wertung a {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .9rem .5rem .8rem;
  border: 1px solid rgba(201, 163, 90, .35);
  border-radius: 2px;
  background: rgba(10, 10, 12, .5);
  color: #e9e5db;
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease;
}
.pl-hero-wertung a:hover, .pl-hero-wertung a:focus-visible { border-color: var(--gold-hell); background: rgba(201, 163, 90, .14); color: #fff; }
.pl-hero-wertung strong { color: #fff; }

.pl-stimmen-raster {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.pl-wertung { position: sticky; top: 7rem; }
.pl-wertung-zahl {
  margin: 0 0 .1em;
  font-family: var(--plakat);
  font-size: clamp(5.5rem, 3rem + 9vw, 10rem);
  line-height: .85;
  letter-spacing: .01em;
  color: #fff;
}
.pl-wertung h2 { margin-bottom: .45em; }
.pl-wertung p { color: #c4c0b7; max-width: 26rem; }
.pl-wertung .pl-wertung-zahl { color: #fff; max-width: none; }
.pl-wertung .pl-sterne { color: var(--gold-hell); }
.pl-quelle { margin-top: 1.6rem !important; font-size: .82rem; color: #8d897f !important; }

.pl-stimmen-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.pl-stimme {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.7rem 1.6rem 1.5rem;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 3px;
  overflow: hidden;
}
.pl-stimme:nth-child(even) { transform: translateY(1.8rem); }   /* versetzt, nicht im Gleichschritt */
.pl-stimme::before {                                             /* großes Anführungszeichen */
  content: "\201C";
  position: absolute;
  top: .02em;
  right: .18em;
  font-family: var(--feder);
  font-style: italic;
  font-size: 7rem;
  line-height: 1;
  color: rgba(201, 163, 90, .16);
  pointer-events: none;
}
.pl-stimme blockquote { margin: 1rem 0 1.4rem; color: #e4e0d7; font-size: 1.02rem; line-height: 1.6; flex: 1; }
.pl-stimme figcaption { display: flex; flex-direction: column; padding-top: 1rem; border-top: 1px solid var(--rand); }
.pl-stimme-name { font-family: var(--plakat); font-size: 1.35rem; letter-spacing: .05em; text-transform: uppercase; color: #fff; line-height: 1.1; }
.pl-stimme-datum { font-size: .82rem; color: #8d897f; }

@media (max-width: 900px) {
  .pl-stimmen-raster { grid-template-columns: 1fr; }
  .pl-wertung { position: static; }
  .pl-stimme:nth-child(even) { transform: none; }
  /* auf dem Handy zum Wischen, wie der Rundgang */
  .pl-stimmen-liste {
    display: flex;
    gap: .9rem;
    margin-inline: calc(-1 * var(--luft));
    padding-inline: var(--luft);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pl-stimmen-liste::-webkit-scrollbar { display: none; }
  .pl-stimme { flex: 0 0 84%; scroll-snap-align: center; }
}