/* Andreas Reetz Hair Head Spa People. Welt: das Schaufenster.
   Schwarz wie die Folie, Schrift weiß, Gold nur am Ring und an wenigen Linien.
   Display: Bodoni Moda (wie die Schrift im Fenster), Text und Versalien: Jost. */
@font-face { font-family: "Bodoni Moda"; src: url("schriften/bodoni-moda-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("schriften/bodoni-moda-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("schriften/bodoni-moda-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("schriften/jost-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Jost"; src: url("schriften/jost-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("schriften/jost-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --schwarz: #0b0b0a;
  --schwarz-2: #141412;
  --weiss: #f3f0ea;
  --grau: #a8a39a;        /* 7,9 : 1 auf Schwarz */
  --linie: rgb(243 240 234 / .16);
  --gold: #c9a55a;
  --gold-hell: #ecd59a;
  --gold-dunkel: #8a6a2c;
  --platz: #1d1d1b;

  --anzeige: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --text: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --rand: clamp(20px, 5vw, 64px);
  --inhalt: 1240px;
  --abstand: clamp(96px, 14vw, 200px);
  --zug: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--schwarz); color: var(--weiss);
  font: 300 17px/1.65 var(--text); letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { font-size: 18px; } }
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 400; }
::selection { background: var(--gold); color: var(--schwarz); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

.versal { font: 400 12px/1.4 var(--text); letter-spacing: .32em; text-transform: uppercase; }
.anzeige { font-family: var(--anzeige); letter-spacing: -.01em; line-height: 1.04; }

/* Goldener Ring mit Guckloch */
.ring {
  --g: 180px;
  width: var(--g); height: var(--g); border-radius: 50%; position: relative; flex: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 calc(var(--g) * .19), rgb(0 0 0 / .45) calc(var(--g) * .19 + 1px), transparent calc(var(--g) * .23)),
    conic-gradient(from 210deg, #8a6a2c, #ecd59a 12%, #c9a55a 24%, #7d5f25 38%, #d8bd7a 52%, #f1dfac 60%, #a98840 74%, #6f5420 86%, #8a6a2c);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / .9), inset 0 1px 1px rgb(255 255 255 / .35), inset 0 -2px 6px rgb(0 0 0 / .35);
}
.ring::after { /* feiner Glanz */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(120% 70% at 30% 18%, rgb(255 255 255 / .28), transparent 45%);
  pointer-events: none;
}

.knopf {
  display: inline-flex; align-items: center; gap: 14px;
  font: 400 13px/1 var(--text); letter-spacing: .26em; text-transform: uppercase; text-decoration: none;
  color: var(--schwarz); background: var(--weiss);
  padding: 19px 28px; border: 1px solid var(--weiss);
  transition: background-color .4s var(--zug), color .4s var(--zug);
}
.knopf:hover { background: transparent; color: var(--weiss); }
.knopf.leise { background: transparent; color: var(--weiss); border-color: var(--linie); }
.knopf.leise:hover { border-color: var(--gold); }

.foto-platz {
  position: relative; background: var(--platz); display: grid; place-items: center; text-align: center;
  color: var(--grau); font-size: 14px; padding: 20px;
  background-image:
    linear-gradient(to top right, transparent calc(50% - .5px), rgb(243 240 234 / .08) 50%, transparent calc(50% + .5px)),
    linear-gradient(to top left, transparent calc(50% - .5px), rgb(243 240 234 / .08) 50%, transparent calc(50% + .5px));
}
.foto-platz b { display: block; color: var(--weiss); font-weight: 400; }