/* Salon am Ring – ein Gang durch den Laden: Tür, Stuhl, Preistafel, Spiegel, Straße.
   Grundstile sind statisch. Die Scroll-Szenen greifen nur mit html.bewegt
   (JS an und keine reduzierte Bewegung gewünscht). */

:root {
  --flasche: #1F4D3F;
  --flasche-tief: #173A30;
  --fassade: #22312B;
  --salbei: #EEF1EC;
  --fuge: #D7DFD8;
  --papier: #FAFAF7;
  --messing: #B08A3E;
  --messing-dunkel: #8C6A2A;
  --messing-hell: #E6CF8F;
  --tinte: #1D2420;
  --tinte-leise: #4C5650;
  --filz: #1A1D1B;

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --gold: "Limelight", Georgia, serif;
  --text: "Public Sans", system-ui, sans-serif;

  --rand: 16px;
  --leiste: 52px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fassade);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.02; }
p { margin: 0 0 1em; }
a { color: inherit; text-underline-offset: 0.2em; }

:focus-visible { outline: 3px solid var(--messing-dunkel); outline-offset: 3px; border-radius: 2px; }
.leiste :focus-visible,
.szene--tuer :focus-visible,
.theke :focus-visible,
.anrufleiste:focus-visible { outline-color: var(--messing-hell); }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 20;
  background: var(--papier); padding: 0.5rem 1rem;
}
.skip:focus { left: var(--rand); top: calc(var(--leiste) + 8px); }

.fliesen {
  background-color: var(--salbei);
  background-image:
    linear-gradient(var(--fuge) 1px, transparent 1px),
    linear-gradient(90deg, var(--fuge) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
}

/* Obere Leiste */

.leiste {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  height: var(--leiste);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--rand);
  background: var(--flasche-tief);
  color: var(--papier);
  border-bottom: 1px solid rgba(176, 138, 62, 0.45);
}
.leiste__name { font-family: var(--display); font-weight: 800; font-size: 1.5rem; text-decoration: none; }
.leiste__tel { font-weight: 600; text-decoration: none; }
.leiste a:hover { text-decoration: underline; }

/* Szenen-Grundgerüst */

.buehne {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

/* 1 · Tür */

.szene--tuer .buehne {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--leiste) + 24px) var(--rand) 32px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(230, 207, 143, 0.10), transparent 60%),
    var(--fassade);
}
.fassade { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.tuerrahmen {
  position: relative;
  width: min(84vw, 25rem);
  height: min(74svh, 37rem);
  padding: 12px;
  background: var(--flasche-tief);
  border: 2px solid var(--messing);
  border-radius: 3px;
  perspective: 1800px;
}
.innen {
  position: absolute; inset: 12px;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--salbei);
  background-image:
    linear-gradient(var(--fuge) 1px, transparent 1px),
    linear-gradient(90deg, var(--fuge) 1px, transparent 1px);
  background-size: 40px 40px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.25);
}
.innen p {
  margin: 0;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 4rem);
  color: var(--flasche);
}

.tuer {
  position: relative;
  height: 100%;
  padding: 18px 18px 64px;
  background: linear-gradient(90deg, #1B4537, var(--flasche) 12%, var(--flasche) 88%, #1B4537);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
  transform-origin: left center;
  backface-visibility: hidden;
}
.glas {
  position: relative;
  height: 100%;
  padding: 14% 8% 0;
  text-align: center;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.06) 38%, transparent 46%),
    linear-gradient(170deg, #26332E, #111A17);
  border: 3px solid var(--messing-dunkel);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
}

/* Blattgold-Schrift auf dem Glas */
.vergoldung { font-family: var(--gold); font-weight: 400; line-height: 1; }
.vergoldung span {
  display: block;
  background: linear-gradient(180deg, #FBEFC4 0%, #E3BF6A 40%, #A9792C 62%, #E9CC80 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55));
}
.vergoldung__klein { font-size: clamp(1.4rem, 5.5vw, 2rem); letter-spacing: 0.04em; }
.vergoldung__gross { font-size: clamp(3rem, 14vw, 4.6rem); margin-top: 0.08em; }
.glas__zeile {
  margin: 0.9rem 0 0;
  color: var(--messing-hell);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.tuerschild {
  position: absolute; left: 50%; bottom: 14%;
  width: min(80%, 15rem);
  padding: 0.9rem 1rem 0.8rem;
  background: var(--papier);
  color: var(--tinte);
  border-radius: 4px;
  text-align: left;
  box-shadow: 0 10px 18px -8px rgba(0, 0, 0, 0.7);
  transform: translateX(-50%) rotate(-2.5deg);
  transform-origin: 50% -40px;
}
.schnur {
  position: absolute; left: 20%; right: 20%; top: -34px; height: 34px;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--messing) 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), var(--messing) 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat;
}
.tuerschild__status {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0 0 0.15rem;
  font-family: var(--display); font-weight: 800; font-size: 1.6rem; line-height: 1;
}
.tuerschild__status::before {
  content: ""; flex: none; width: 0.5em; height: 0.5em; border-radius: 50%;
  background: var(--fuge);
}
.tuerschild[data-offen="ja"] .tuerschild__status::before { background: #2F9E5E; }
.tuerschild[data-offen="nein"] .tuerschild__status::before { background: #C9473F; }
.tuerschild__detail { margin: 0; font-size: 0.95rem; color: var(--tinte-leise); }

.griff {
  position: absolute; right: 22px; top: 46%;
  width: 10px; height: 92px; border-radius: 5px;
  background: linear-gradient(90deg, #7A5A22, #E6CF8F 45%, #9C7A35);
  box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.5);
}

.hausnummer {
  margin: 0;
  font-family: var(--display); font-weight: 600; font-size: 1.15rem;
  color: var(--messing-hell);
  letter-spacing: 0.03em;
}
.scrollhinweis { display: none; }

/* 2 · Stuhl mit Schere */

.szene--stuhl .buehne { display: flex; align-items: center; }
.stuhl {
  width: 100%; max-width: 72rem; margin: 0 auto;
  padding: calc(var(--leiste) + 48px) var(--rand) 64px;
  display: grid; gap: 2rem; align-items: center;
}
.stuhl__ueber {
  font-family: var(--text); font-weight: 600; font-size: 1.15rem;
  color: var(--tinte-leise);
  margin-bottom: 1.5rem;
}
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.schritte p { max-width: 34ch; }
.schritte__wort {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(3.6rem, 13vw, 7.5rem); line-height: 0.95;
  color: var(--flasche);
  margin-bottom: 0.4rem;
}

.schere { width: min(60vw, 16rem); justify-self: center; overflow: visible; }
.schere path, .schere circle {
  fill: none; stroke: var(--flasche); stroke-width: 12; stroke-linejoin: round; stroke-linecap: round;
}
.schere__klinge path:first-child { fill: #C9D3CE; stroke: var(--tinte); stroke-width: 3; }
.schere .schere__niete { fill: var(--messing); stroke: var(--messing-dunkel); stroke-width: 2; }
.schere__klinge { transform-box: view-box; transform-origin: 0 8px; }
.schere__klinge--a { transform: rotate(var(--schnitt, 14deg)); }
.schere__klinge--b { transform: rotate(calc(var(--schnitt, 14deg) * -1)); }

@media (min-width: 860px) {
  .stuhl { grid-template-columns: 1.3fr 1fr; gap: 4rem; }
  .schere { width: 18rem; }
}

/* 3 · Preistafel (Steckbuchstaben-Brett) */

.wand { padding: 6rem var(--rand) 5rem; }
.wand__titel {
  max-width: 72rem; margin: 0 auto 2.5rem;
  font-family: var(--display); font-size: clamp(2.2rem, 6vw, 3.6rem);
  color: var(--flasche);
}
.steckbrett {
  max-width: 60rem; margin: 0 auto;
  padding: 2rem 1.4rem;
  display: grid; gap: 0 3rem;
  background:
    repeating-linear-gradient(to bottom, #222624 0 7px, #121513 7px 9px);
  border: 12px solid var(--messing-dunkel);
  border-image: linear-gradient(135deg, #7A5A22, #D9B66A 30%, #8C6A2A 55%, #C9A55A 80%, #6E511C) 1;
  box-shadow: 0 30px 50px -25px rgba(23, 58, 48, 0.6);
  color: #F2EFE6;
}
@media (min-width: 760px) {
  .steckbrett { grid-template-columns: 1fr 1fr; padding: 2.6rem 3rem; }
}
/* Steckbuchstaben sind Großbuchstaben – hier gehört das zur Sache */
.steckbrett h3, .steckbrett li {
  font-family: var(--text); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}
.steckbrett h3 { font-size: 1rem; color: var(--messing-hell); margin: 1.6rem 0 0.6rem; }
.steckbrett__spalte:first-child > h3:first-child { margin-top: 0; }
@media (min-width: 760px) {
  .steckbrett__spalte > h3:first-child { margin-top: 0; }
}
.steckbrett ul { list-style: none; margin: 0; padding: 0; }
.steckbrett li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.28rem 0;
  font-size: 0.9rem;
}
.steckbrett li > span:last-child { white-space: nowrap; }
/* Von Hand gesteckt: nicht jede Reihe sitzt exakt gerade */
.steckbrett li:nth-child(3n+2) > span:first-child { transform: translateY(1px) rotate(-0.35deg); display: inline-block; }
.steckbrett li:nth-child(4n+3) > span:last-child { transform: translateY(-1px) rotate(0.5deg); display: inline-block; }

.wand__notiz {
  max-width: 60rem; margin: 1.2rem auto 0;
  font-size: 0.95rem; color: var(--tinte-leise);
}

/* 4 · Spiegel */

.szene--spiegel .buehne {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.6rem;
  padding: calc(var(--leiste) + 40px) var(--rand) 56px;
  text-align: center;
}
.spiegel__titel {
  font-family: var(--display); font-size: clamp(2rem, 5.5vw, 3.2rem);
  color: var(--flasche); max-width: 18ch;
}
.spiegel {
  width: min(84vw, 26rem);
  padding: 14px;
  border-radius: 50% / 42%;
  background: linear-gradient(135deg, #6E511C, #E6CF8F 28%, #9C7A35 52%, #D9B66A 76%, #7A5A22);
  box-shadow: 0 30px 50px -25px rgba(0, 0, 0, 0.5);
}
.spiegel__glas {
  position: relative;
  min-height: min(50svh, 30rem);
  border-radius: 50% / 42%;
  display: grid; place-items: center;
  padding: 18% 14%;
  background:
    linear-gradient(120deg, transparent 22%, rgba(255, 255, 255, 0.55) 30%, transparent 38%),
    linear-gradient(160deg, #E9EFEC, #BFCBC6 55%, #DCE4E1);
  box-shadow: inset 0 0 30px rgba(23, 58, 48, 0.35);
}
.spiegel figure { margin: 0 0 1.5rem; }
.spiegel blockquote { margin: 0 0 0.6rem; }
.spiegel blockquote p {
  margin: 0;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1.1;
  color: var(--tinte);
}
.spiegel figcaption { font-size: 0.95rem; color: var(--tinte-leise); }
.spiegel__link { font-weight: 600; color: var(--flasche); }

/* 5 · Theke: Terminkärtchen zum Mitnehmen */

.theke {
  background: var(--flasche-tief);
  color: var(--papier);
  padding: 5rem var(--rand) 0;
}
.theke__satz {
  max-width: 72rem; margin: 0 auto 3rem;
  font-family: var(--display); font-size: clamp(2.2rem, 6vw, 3.6rem);
  color: var(--messing-hell);
}

/* Zwei Kärtchen, wie hingelegt: Vorder- und Rückseite */
.kaertchen {
  max-width: 56rem; margin: 0 auto;
  display: grid; gap: 1.6rem; justify-items: center;
}
@media (min-width: 860px) {
  .kaertchen { grid-template-columns: 1fr 1fr; gap: 0; }
  .karte-hinten { margin: 3rem 0 0 -1.5rem; }
}
.karte-vorne, .karte-hinten {
  width: min(100%, 25rem);
  aspect-ratio: 85 / 55;
  background: var(--papier);
  color: var(--tinte);
  border-radius: 3px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15), 0 22px 30px -18px rgba(0, 0, 0, 0.7);
}
.karte-vorne {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 0.15rem;
  padding: 1.2rem;
  text-align: center;
  outline: 1.5px solid var(--messing);
  outline-offset: -10px;
  transform: rotate(-3deg);
}
.karte-vorne__name {
  margin: 0;
  font-family: var(--gold); font-size: clamp(1.7rem, 7vw, 2.3rem); line-height: 1;
  color: var(--flasche);
}
.karte-vorne__zeile { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--tinte-leise); letter-spacing: 0.04em; }
.karte-vorne address { font-style: normal; font-size: 0.95rem; line-height: 1.35; }
.karte-vorne__tel {
  margin-top: 0.4rem;
  font-family: var(--display); font-weight: 800; font-size: 1.5rem;
  color: var(--flasche); text-decoration: none;
}
.karte-vorne__tel:hover { text-decoration: underline; }

.karte-hinten {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1rem 1.2rem;
  transform: rotate(2deg);
  font-size: 0.85rem;
}
.karte-hinten__titel { margin: 0 0 0.1rem; font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--flasche); }
.eintrag { display: flex; align-items: baseline; gap: 0.5rem; }
.eintrag span:first-child { width: 4.2rem; color: var(--tinte-leise); }
.eintrag__linie { flex: 1; border-bottom: 1px solid var(--tinte-leise); height: 1.1rem; }
.woche {
  width: 100%; margin-top: 0.4rem;
  border-collapse: collapse; table-layout: fixed;
  text-align: center; font-variant-numeric: tabular-nums;
}
.woche caption { text-align: left; color: var(--tinte-leise); padding-bottom: 0.15rem; }
.woche th, .woche td { border: 1px solid var(--fuge); padding: 0.1rem 0; }
.woche th { font-weight: 600; color: var(--flasche); }
.woche td { font-size: 0.7rem; }
.woche__zu { color: var(--tinte-leise); background: var(--salbei); }
.karte-hinten__fuss { margin: auto 0 0; font-style: italic; color: var(--tinte-leise); }

.weg { max-width: 56rem; margin: 3.5rem auto 0; }
.weg p { max-width: 52ch; }
.weg__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; font-weight: 600; }
.weg__links a, .textknopf { color: var(--messing-hell); }
.textknopf {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; text-decoration: underline; text-underline-offset: 0.2em;
}
.weg__hinweis { font-size: 0.85rem; opacity: 0.7; }

p[data-platzhalter] { border-left: 3px solid var(--messing); padding-left: 0.7rem; }

.karte { border: 2px solid rgba(230, 207, 143, 0.4); border-radius: 3px; overflow: hidden; }
.karte iframe { width: 100%; min-height: 22rem; border: 0; display: block; }

.fuss {
  max-width: 72rem; margin: 5rem auto 0;
  padding: 1.5rem 0 6rem;
  border-top: 1px solid rgba(230, 207, 143, 0.25);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-size: 0.95rem; opacity: 0.85;
}
.fuss p { margin: 0; display: flex; gap: 1.2rem; }

.anrufleiste {
  position: fixed; inset: auto 0 0 0; z-index: 10;
  padding: 0.9rem var(--rand) calc(0.9rem + env(safe-area-inset-bottom));
  background: var(--flasche);
  border-top: 3px solid var(--messing);
  color: var(--papier);
  text-align: center; font-weight: 600; text-decoration: none;
}
@media (min-width: 760px) {
  .anrufleiste { display: none; }
  .fuss { padding-bottom: 2rem; }
}

/* ---------- Scroll-Szenen (nur mit html.bewegt) ---------- */

.bewegt .szene--tuer { height: 230vh; }
.bewegt .szene--stuhl { height: 420vh; }
.bewegt .szene--spiegel { height: 320vh; }
.bewegt .szene .buehne { position: sticky; top: 0; height: 100vh; height: 100svh; }

/* Tür schwingt nach innen auf, „Komm rein.“ erscheint dahinter */
.bewegt .tuer { transform: rotateY(calc(var(--p, 0) * -82deg)); will-change: transform; }
.bewegt .innen p { opacity: calc((var(--p, 0) - 0.35) * 2); transform: scale(calc(0.9 + var(--p, 0) * 0.1)); }
.bewegt .scrollhinweis {
  display: block;
  position: absolute; bottom: 18px; left: 0; right: 0;
  margin: 0; text-align: center;
  font-size: 0.9rem; color: var(--messing-hell);
  opacity: calc(0.8 - var(--p, 0) * 4);
}
.bewegt .tuerschild { animation: einschwingen 1.6s cubic-bezier(.3, 1.6, .5, 1) 0.3s both; }
@keyframes einschwingen {
  0%   { transform: translateX(-50%) rotate(7deg); }
  45%  { transform: translateX(-50%) rotate(-5deg); }
  70%  { transform: translateX(-50%) rotate(-1.5deg); }
  100% { transform: translateX(-50%) rotate(-2.5deg); }
}

/* Leistungen: immer nur eine sichtbar */
.bewegt .schritte { display: block; position: relative; min-height: 15rem; }
.bewegt .schritte li {
  position: absolute; inset: 0 0 auto 0;
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.bewegt .schritte li.aktiv { opacity: 1; transform: none; }

/* Spiegel: immer nur ein Zitat */
.bewegt .spiegel__glas figure {
  grid-area: 1 / 1; margin: 0;
  opacity: 0; filter: blur(6px);
  transition: opacity 0.5s ease, filter 0.5s ease;
}
.bewegt .spiegel__glas figure.aktiv { opacity: 1; filter: none; }

@media (max-width: 859px) {
  .bewegt .stuhl { grid-template-rows: auto 1fr; }
  .bewegt .schere { width: 11rem; order: -1; justify-self: start; }
}

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */

.kopf { background: var(--flasche-tief); color: var(--papier); }
.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 var(--rand); }
.kopf__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--leiste); }
.marke { font-family: var(--display); font-weight: 800; font-size: 1.5rem; text-decoration: none; margin-right: auto; }
.kopf__tel { font-weight: 600; text-decoration: none; }
.rechtliches { padding: 3rem var(--rand) 5rem; background: var(--salbei); min-height: 80vh; max-width: none; }
.rechtliches > * { max-width: 62ch; }
.rechtliches h1 { font-family: var(--display); font-size: 2.6rem; color: var(--flasche); margin-bottom: 1.5rem; }
.rechtliches h2 { font-family: var(--display); font-size: 1.6rem; margin: 2rem 0 0.6rem; }
.rechtliches a { color: var(--flasche); }
.rechtliches [data-platzhalter] { border-left: 3px solid var(--messing); padding-left: 0.7rem; }