/* ==========================================================================
   Purrtrait Gallery Memory — Landingpage
   Sleepink Studios · style.css
   ========================================================================== */

:root {
  --wall:        #262626;
  --wall-deep:   #1C1B1B;
  --wall-warm:   #34302D;
  --gold:        #E4C27E;
  --gold-soft:   #F0D392;
  --gold-deep:   #A87D28;
  --cream:       #FBEFD9;
  --cream-dim:   rgba(251, 239, 217, .74);
  --wine:        #5C1F2B;
  --parchment:   #F3E3B0;

  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans:  'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --max: 1180px;
  --pad: clamp(20px, 5vw, 56px);
  --frame-ratio: 0.8;      /* frame-gold.png = 560 × 700 */
  --hole-l: 13.29%;
  --hole-t: 11.01%;
  --hole-w: 73.13%;
  --hole-h: 77.99%;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--wall);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  text-wrap: pretty;
  overflow-x: hidden;
}

/* the gallery wall: fine vertical panelling + a warm spill from above */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255, 206, 130, .16), transparent 62%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.13) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, var(--wall-warm) 0%, var(--wall) 26%, var(--wall-deep) 100%);
}

img { max-width: 100%; display: block; }

a { color: var(--gold-soft); text-decoration: none; }
a:hover { color: #FFF3D8; text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.04; margin: 0; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--parchment); color: var(--wine);
  padding: 10px 16px; z-index: 200; border-radius: 4px;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- buttons ------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; gap: 11px;
  min-height: 52px; padding: 0 26px;
  border: 0; border-radius: 999px;
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn--play {
  background: linear-gradient(158deg, #F6E7B7 0%, #E4C27E 44%, #C39B41 100%);
  color: #3A1B12;
  box-shadow: 0 12px 28px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.55);
  font-weight: 600;
}
.btn--play:hover { color: #3A1B12; box-shadow: 0 16px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6); }
.btn--play svg { flex: 0 0 auto; }

.btn--ghost {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(240,211,146,.46);
  color: var(--cream);
}
.btn--ghost:hover { background: rgba(240,211,146,.16); color: var(--cream); }

.btn--sm { min-height: 42px; padding: 0 18px; font-size: 13.5px; }

/* ---------- header ------------------------------------------------------ */

.hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(24,23,23,.72);
  backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid rgba(240,211,146,.16);
  transition: background .25s ease, border-color .25s ease;
}
.hdr.is-lifted { background: rgba(20,19,19,.9); border-bottom-color: rgba(240,211,146,.3); }

.hdr__in {
  display: flex; align-items: center; gap: 18px;
  min-height: 68px;
}

/* Huelle um Navigation und Sprachwaehler. `contents` heisst: auf breiten
   Schirmen ist sie fuer das Layout nicht vorhanden, die Kinder liegen
   weiter direkt in der Kopfzeile. Erst auf Mobil wird sie zur Klappe. */
.hdr__menu { display: contents; }

.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand img { width: 34px; height: 34px; border-radius: 5px; box-shadow: 0 2px 9px rgba(0,0,0,.5); }
.brand__txt { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--cream); white-space: nowrap; }
.brand__sub {
  font-size: 8.5px; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(240,211,146,.72); padding-left: .34em; margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 26px); }
.nav a {
  color: var(--cream-dim); font-size: 14.5px; letter-spacing: .02em; white-space: nowrap;
  padding: 6px 0; border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--cream); text-decoration: none; border-bottom-color: var(--gold); }

.lang { position: relative; display: flex; align-items: center; }
.lang select {
  appearance: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(240,211,146,.34);
  color: var(--cream);
  font-family: var(--sans); font-size: 13.5px;
  border-radius: 999px;
  padding: 9px 34px 9px 15px;
  cursor: pointer;
}
.lang select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lang::after {
  content: ''; position: absolute; right: 14px; pointer-events: none;
  width: 7px; height: 7px; border-right: 1.5px solid var(--gold-soft); border-bottom: 1.5px solid var(--gold-soft);
  transform: translateY(-2px) rotate(45deg);
}

.hdr__cta { display: inline-flex; white-space: nowrap; }
.hdr__cta .btn__long { display: inline; }
.hdr__cta .btn__short { display: none; }
.burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(240,211,146,.34);
  border-radius: 999px; cursor: pointer;
}
.burger span { display: block; width: 17px; height: 1.5px; background: var(--gold-soft); box-shadow: 0 5px 0 var(--gold-soft), 0 -5px 0 var(--gold-soft); }

/* ---------- section furniture ------------------------------------------- */

section { position: relative; }

.sec { padding: clamp(64px, 9vw, 118px) 0; }
.sec--tint { background: rgba(0,0,0,.2); border-block: 1px solid rgba(240,211,146,.13); }

.kicker {
  display: inline-block;
  font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(240,211,146,.82); padding-left: .28em;
  margin-bottom: 16px;
}
.h2 { font-size: clamp(30px, 4.4vw, 50px); color: var(--cream); }
.h2 em { font-style: italic; color: var(--gold-soft); }
.lead {
  margin: 16px 0 0; max-width: 56ch;
  font-family: var(--serif); font-size: clamp(19px, 2.1vw, 24px); font-style: italic;
  line-height: 1.42; color: #F4DFB6;
}
.sec__head { max-width: 780px; }
.sec__head--mid { margin-inline: auto; text-align: center; }
.sec__head--mid .lead { margin-inline: auto; }

.rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, rgba(216,178,90,.5) 18%, rgba(216,178,90,.5) 82%, transparent);
}

/* ---------- hero -------------------------------------------------------- */

.hero { padding: clamp(46px, 7vw, 92px) 0 clamp(56px, 8vw, 104px); }
.hero__grid {
  display: grid; gap: clamp(34px, 5vw, 68px);
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  align-items: center;
}

.badge {
  display: inline-block;
  background: var(--parchment); color: var(--wine);
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  padding: 9px 18px; border-radius: 3px;
  box-shadow: 0 8px 18px rgba(0,0,0,.34);
  transform: rotate(-1.6deg);
}

.hero h1 {
  margin: 22px 0 0;
  font-size: clamp(46px, 7.4vw, 88px);
  letter-spacing: -.005em;
  text-shadow: 0 6px 26px rgba(0,0,0,.5);
}
.hero h1 em { font-style: italic; color: var(--gold-soft); }
.hero__word {
  display: block;
  margin-top: 14px;
  /* An die Wortmarke gebunden: `em` meint hier die Groesse des <h1>, in dem
     das Wort steht. So bleibt das Verhaeltnis auf jedem Schirm gleich, statt
     auf dem Handy zu gross und auf dem Monitor zu klein zu wirken. */
  font-size: clamp(17px, .32em, 28px);
  letter-spacing: .34em; text-transform: uppercase;
  color: rgba(240,211,146,.86); padding-left: .34em;
}
.hero__claim {
  margin: 20px 0 0;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(21px, 2.6vw, 29px); line-height: 1.32; color: #F6E4BE;
}
.hero__lead { margin: 14px 0 0; max-width: 46ch; color: var(--cream-dim); }

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; list-style: none; }
.trust li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: .03em; color: rgba(251,239,217,.66);
}
.trust svg { flex: 0 0 auto; color: var(--gold); }

/* phone mockup */
.phone { position: relative; margin-inline: auto; width: min(100%, 320px); }
.phone::after {                    /* pool of shadow on the floor */
  content: ''; position: absolute; left: 6%; right: 6%; bottom: -26px; height: 42px;
  background: radial-gradient(50% 100% at 50% 0, rgba(0,0,0,.62), transparent 72%);
  filter: blur(10px);
}
.phone__body {
  position: relative;
  border-radius: 40px;
  padding: 9px;
  background: linear-gradient(152deg, #6E5A2E 0%, #E9D49B 22%, #7B6534 52%, #E3CE95 78%, #6A5528 100%);
  box-shadow: 0 34px 64px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.4);
}
.phone__screen {
  position: relative; overflow: hidden;
  border-radius: 32px; background: #201F1F;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6);
}
.phone__screen img { width: 100%; height: auto; }
.phone__notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 5px; border-radius: 99px;
  background: rgba(0,0,0,.55); z-index: 2;
}
.caption {
  margin: 34px 0 0; text-align: center;
  font-size: 12.5px; letter-spacing: .05em; color: rgba(251,239,217,.5);
}

/* ---------- how it works ------------------------------------------------ */

.how__grid {
  display: grid; gap: clamp(26px, 4vw, 54px);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center; margin-top: clamp(34px, 5vw, 56px);
}
.steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.step {
  display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start;
  padding: 22px 24px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(240,211,146,.17);
  border-radius: 3px;
}
.step__n {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #F6E7B7, #C39B41 78%);
  color: #3A1B12; font-family: var(--serif); font-size: 25px; font-weight: 600;
  box-shadow: 0 6px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
}
.step h3 { font-size: 24px; color: var(--cream); }
.step p { margin: 7px 0 0; font-size: 15.5px; color: var(--cream-dim); }

/* ---------- gallery ----------------------------------------------------- */

.gal { padding-bottom: clamp(56px, 8vw, 96px); }
.gal__rail {
  display: flex; gap: clamp(22px, 3vw, 40px);
  margin-top: clamp(34px, 5vw, 54px);
  padding: 30px var(--pad) 42px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(216,178,90,.42) transparent;
  cursor: grab;
}
.gal__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.gal__rail::-webkit-scrollbar { height: 8px; }
.gal__rail::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 99px; }
.gal__rail::-webkit-scrollbar-thumb { background: rgba(216,178,90,.42); border-radius: 99px; }

/* Wortloser Hinweis, dass die Schiene seitlich laeuft: eine Leiste mit zwei
   Spitzen, auf der ein Punkt hin und her wandert. Die Bewegung macht die
   Geste verstaendlich, die ein starres Pfeilpaar nur behauptet.

   Verschwindet, sobald jemand die Schiene bewegt hat — ein Hinweis, der nach
   dem Verstandenwerden stehen bleibt, wird zur Zierde. */
.rail__cue {
  display: flex; justify-content: center;
  margin: -18px 0 0; color: var(--gold-soft);
  transition: opacity .45s ease;
}
.rail__cue.is-gone { opacity: 0; }
.rail__dot { animation: railHint 2.4s ease-in-out infinite; }

@keyframes railHint {
  0%, 100% { transform: translateX(-17px); opacity: .4; }
  50%      { transform: translateX(17px);  opacity: 1; }
}

/* Wer weniger Bewegung eingestellt hat, bekommt den Punkt ruhend in der Mitte
   — das Zeichen bleibt lesbar, nur die Geste entfaellt. */
@media (prefers-reduced-motion: reduce) {
  .rail__dot { animation: none; }
}

.art { flex: 0 0 auto; scroll-snap-align: center; width: clamp(186px, 21vw, 252px); }
.art__frame {
  position: relative; width: 100%; aspect-ratio: var(--frame-ratio);
  filter: drop-shadow(2px 3px 3px rgba(0,0,0,.5)) drop-shadow(10px 18px 24px rgba(0,0,0,.46));
  transition: transform .3s ease;
}
.art:nth-child(odd)  .art__frame { transform: rotate(-1.1deg); }
.art:nth-child(even) .art__frame { transform: rotate(1.3deg); }
.art:hover .art__frame { transform: rotate(0) translateY(-6px); }
.art__canvas {
  position: absolute; left: var(--hole-l); top: var(--hole-t);
  width: var(--hole-w); height: var(--hole-h);
  object-fit: cover;
}
.art__glaze {
  position: absolute; left: var(--hole-l); top: var(--hole-t);
  width: var(--hole-w); height: var(--hole-h);
  background:
    linear-gradient(178deg, rgba(255,226,171,.26) 0%, rgba(255,226,171,.07) 26%, transparent 52%, rgba(10,6,2,.3) 100%);
  box-shadow: inset 0 5px 14px rgba(0,0,0,.5);
  pointer-events: none;
}
.art__gild { position: relative; width: 100%; height: 100%; }
.art__plate { margin: 16px 0 0; text-align: center; }
.art__name { font-family: var(--serif); font-style: italic; font-size: 18px; color: #F4E3BB; }
.art__med {
  margin-top: 5px;
  font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(240,211,146,.6);
}

/* ---------- about ------------------------------------------------------- */

.about__grid {
  display: grid; gap: clamp(28px, 4.5vw, 60px);
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  align-items: start; margin-top: clamp(30px, 4vw, 46px);
}
.about p { color: var(--cream-dim); }
.about p + p { margin-top: 16px; }
.about__dev {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(240,211,146,.2);
  font-size: 14px; letter-spacing: .04em; color: rgba(240,211,146,.7);
}
.feats { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.feats li {
  display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start;
  padding: 16px 18px;
  background: rgba(255,255,255,.035);
  border-left: 2px solid rgba(216,178,90,.55);
  font-size: 15.5px; color: var(--cream);
}
.feats svg { color: var(--gold); margin-top: 4px; }

/* ---------- legal ------------------------------------------------------- */

.legal { padding: clamp(40px, 5vw, 64px) 0; }
.legal__box {
  max-width: 860px; margin-inline: auto;
  border: 1px solid rgba(240,211,146,.18); border-radius: 4px;
  background: rgba(0,0,0,.18);
}
.legal__sum {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 18px 22px; cursor: pointer; list-style: none;
}
.legal__sum::-webkit-details-marker { display: none; }
.legal__sum::after {
  content: ""; margin-left: auto; flex: 0 0 auto;
  width: 8px; height: 8px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.legal__box[open] .legal__sum::after { transform: rotate(-135deg) translate(-2px, -2px); }
.legal__sum:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.legal__h { font-family: var(--serif); font-size: 19px; color: #F4E3BB; }
.legal__date { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(240,211,146,.5); }

.legal__body {
  padding: 4px 22px 26px;
  border-top: 1px solid rgba(240,211,146,.14);
  font-size: 14px; line-height: 1.65; color: var(--cream-dim);
}
.legal__body h3 {
  margin: 24px 0 8px;
  font-family: var(--serif); font-size: 16px; font-weight: 600; color: #F4E3BB;
}
.legal__body p { margin: 0 0 12px; max-width: 74ch; }
.legal__addr, .legal__mail { margin: 0 0 12px; font-style: normal; }
.legal__links { margin: 0 0 12px; padding-left: 18px; }
.legal__links li { margin-bottom: 4px; }
.legal__body a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 2px; }
.legal__body a:hover { color: var(--gold); }

/* ---------- final cta --------------------------------------------------- */

.close {
  padding: clamp(64px, 9vw, 112px) 0;
  text-align: center;
  background:
    radial-gradient(70% 80% at 50% 0%, rgba(255,206,130,.16), transparent 68%),
    rgba(0,0,0,.26);
  border-top: 1px solid rgba(240,211,146,.2);
}
.close .h2 { max-width: 20ch; margin-inline: auto; }
.close .lead { margin-inline: auto; }
.close .btn { margin-top: 32px; }
.close__note {
  margin: 18px 0 0;
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(240,211,146,.56);
}

/* ---------- footer ------------------------------------------------------ */

.foot {
  padding: clamp(48px, 6vw, 74px) 0 34px;
  background: var(--wall-deep);
  border-top: 3px solid rgba(216,178,90,.42);
}
.foot__grid {
  display: grid; gap: clamp(28px, 4vw, 54px);
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
}
.foot__tag { margin: 16px 0 0; max-width: 34ch; font-size: 14.5px; color: rgba(251,239,217,.6); }
.foot h4 {
  margin: 0 0 14px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(240,211,146,.72);
}
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.foot li, .foot address { font-size: 14.5px; font-style: normal; color: rgba(251,239,217,.66); line-height: 1.62; }
.foot a { color: rgba(251,239,217,.82); }
.foot a:hover { color: var(--gold-soft); }
.foot__base {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  margin-top: clamp(34px, 4vw, 52px); padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: 12.5px; color: rgba(251,239,217,.42);
}

/* ---------- reveal on scroll ------------------------------------------- */

.rv { opacity: 1; transform: none; }
html.js-reveal .rv { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
html.js-reveal .rv.is-in { opacity: 1; transform: none; }

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 1120px) {
  .hdr__cta .btn__long { display: none; }
  .hdr__cta .btn__short { display: inline; }
}

@media (max-width: 940px) {
  .hero__grid, .how__grid, .about__grid { grid-template-columns: minmax(0, 1fr); }
  .how__grid .phone { margin-top: 8px; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1040px) {
  .hdr__cta { display: none; }
  .burger { display: flex; }

  /* Navigation **und Sprachwaehler** wandern in die Klappe. In der Kopfzeile
     bleiben nur Marke und Knopf: der Waehler traegt den ausgeschriebenen
     Sprachnamen, und neben der Wortmarke passte beides ab etwa 400 Pixel
     nicht mehr nebeneinander — die Marke verschwand unter dem Waehler. */
  .hdr__menu {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 16px;
    padding: 14px var(--pad) 22px;
    /* Voll deckend und nicht .97: der Hero darunter traegt sehr helle Flaechen
       (Badge, Wortmarke), und drei Prozent davon geistern sichtbar durch. */
    background: #121111;
    border-bottom: 1px solid rgba(240,211,146,.24);
  }
  .hdr.is-open .hdr__menu { display: flex; }
  .hdr__menu .nav { flex-direction: column; align-items: flex-start; gap: 2px; }
  .hdr__menu .nav a { width: 100%; padding: 12px 0; font-size: 17px; }
  .hdr__menu .lang select { width: 100%; }
  body { font-size: 16px; }
}

@media (max-width: 620px) {
  .step { grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 18px; }
  .step__n { width: 44px; height: 44px; font-size: 21px; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; justify-content: center; }
  .hero__cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, html.js-reveal .rv { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}