/* Yogaapotheke – Visitenkarte. Dunkles Apothekenglas, goldenes Etikett. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/cormorant-garamond-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(fonts/montserrat-latin.woff2) format('woff2');
}

:root {
  --nacht: #08100e;
  --glas: #10201c;
  --glas-hell: #1b332c;
  --gold: #c9a961;
  --gold-hell: #e6d3a0;
  --gold-leise: rgba(201, 169, 97, .38);
  --elfenbein: #efe7d6;
  --salbei: #a9bcb0;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem 2rem;
  background-color: var(--nacht);
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 38%, var(--glas-hell) 0%, var(--glas) 42%, transparent 78%),
    radial-gradient(ellipse 60% 40% at 50% 105%, rgba(201, 169, 97, .10) 0%, transparent 70%);
  background-attachment: fixed;
  color: var(--elfenbein);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Zweisprachig: das Skript im Kopf setzt <html lang>, die jeweils andere Sprache bleibt verborgen.
   lang nur an ganze Blöcke hängen, nie an einzelne Wörter im Fließtext; Sprachwahl-Links (hreflang) bleiben sichtbar. */
html[lang|="de"] [lang|="en"]:not([hreflang]),
html[lang|="en"] [lang|="de"]:not([hreflang]) { display: none !important; }

a { color: var(--gold-hell); text-decoration-color: var(--gold-leise); text-underline-offset: .2em; }
a:hover, a:focus-visible { color: #fff; text-decoration-color: var(--gold); }
a:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* ---------- Das Etikett ---------- */

.etikett {
  position: relative;
  width: 100%;
  max-width: 34rem;
  padding: clamp(2.5rem, 7vw, 4rem) clamp(1.5rem, 6vw, 3.5rem);
  text-align: center;
  isolation: isolate;
  border: 1px solid var(--gold-leise);
  background: linear-gradient(180deg, rgba(16, 32, 28, .55), rgba(8, 16, 14, .35));
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
}
.etikett::before {                       /* innere Goldlinie wie auf alten Apothekenetiketten */
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(201, 169, 97, .18);
  pointer-events: none;
}
.etikett::after {                        /* ruhiges Leuchten, das langsam atmet */
  content: '';
  position: absolute;
  top: -18%;
  bottom: -18%;
  left: 50%;
  width: min(136%, 100vw);               /* nie breiter als das Fenster, sonst scrollt das Handy quer */
  translate: -50% 0;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(201, 169, 97, .13), transparent);
  opacity: .55;
  pointer-events: none;
}

.ornament { display: block; width: 64px; height: 34px; margin: 0 auto 1.4rem; color: var(--gold); }

.unterzeile {
  margin: 0 0 .9rem;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--salbei);
}

.wortmarke {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 11vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: .005em;
  color: var(--elfenbein);
}
.wortmarke em { font-style: italic; font-weight: 300; color: var(--gold-hell); }

.trenner {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 9rem;
  margin: 1.6rem auto;
  color: var(--gold);
}
.trenner::before, .trenner::after { content: ''; flex: 1; height: 1px; background: var(--gold-leise); }
.trenner span { width: 5px; height: 5px; transform: rotate(45deg); border: 1px solid currentColor; }

.lead {
  margin: 0 auto;
  max-width: 24rem;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 4.2vw, 1.45rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--elfenbein);
  text-wrap: balance;
}

.status {
  margin: 1.4rem 0 0;
  font-size: .9rem;
  color: var(--salbei);
}

.kontakt { margin: 2rem 0 0; font-size: .9rem; }
.kontakt a { font-weight: 400; letter-spacing: .02em; }

/* ---------- Fuß ---------- */

.fuss {
  margin-top: 2.5rem;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--salbei);
  text-align: center;
}
.fuss a { color: var(--salbei); text-decoration: none; }
.fuss a:hover, .fuss a:focus-visible { color: var(--gold-hell); }
.fuss .punkt { margin: 0 .6em; color: var(--gold-leise); }

/* ---------- Rechtsseiten ---------- */

.text {
  width: 100%;
  max-width: 40rem;
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 3rem);
  border: 1px solid rgba(201, 169, 97, .22);
  background: rgba(8, 16, 14, .45);
}
.text .zurueck { display: inline-block; margin-bottom: 1.5rem; font-size: .85rem; text-decoration: none; }
.text h1 {
  margin: 0 0 1.5rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 7vw, 2.75rem);
  line-height: 1.1;
}
.text h2 {
  margin: 2.2rem 0 .5rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--gold-hell);
}
.text p { margin: 0 0 1rem; }
.text .leise { font-size: .85rem; color: var(--salbei); }

/* ---------- Bewegung (nur wenn erwünscht) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .etikett, .text { animation: auftauchen 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  .fuss { animation: auftauchen 1.4s .4s cubic-bezier(.2, .7, .2, 1) both; }
  .etikett::after { animation: atmen 9s ease-in-out infinite; }
}
@keyframes auftauchen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes atmen { 0%, 100% { opacity: .35; transform: scale(.92); } 50% { opacity: .75; transform: scale(1); } }