/* Mutlantik — Kunst & Antiquitäten
   Grundlage: Farben, Schrift, Abstände, Layout-Primitive.

   Leitidee: die Seite ist eine Seekarte. Heller Pergamentgrund, Sepia-Tinte,
   Messing als Akzent. Bewegung entsteht von allein und beim Scrollen —
   niemals durch den Mauszeiger. */

/* ------------------------------------------------------------------ Schrift */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/InstrumentSans.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Nur fuer die Einladung ueber der Truhe. Die Schrift des englischen
   Buchdrucks um 1670 — dieselbe Zeit wie die Seekarte. Fuer Fliesstext waere
   sie zu muehsam, fuer eine Zeile ist sie genau richtig. */
@font-face {
  font-family: 'IM Fell English';
  src: url('../fonts/IMFellEnglish.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------- Marken */

:root {
  --pergament:    #FBF7EF;
  --papier:       #F1E7D6;
  --karte:        #E4D5B7;
  --tinte:        #241A10;
  --tinte-tief:   #150F08;
  --messing:      #A9762B;
  --messing-hell: #D4A855;
  --forst:        #1E4620;
  --siegel:       #7A2E22;
  --muted:        #6B5B48;
  --linie:        #DCCEB6;

  --serif:   'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --grotesk: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --alt:     'IM Fell English', 'Iowan Old Style', 'Palatino Linotype', Palatino, serif;

  /* Abstände */
  --r1: 4px;  --r2: 8px;   --r3: 12px;  --r4: 16px;  --r5: 24px;
  --r6: 32px; --r7: 48px;  --r8: 64px;  --r9: 96px;  --r10: 160px;

  --bahn:      1320px;
  --bahn-weit: 1680px;
  --lesespalte: 68ch;

  --ruhig: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------------ Grundlage */

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

/* Ohne !important verliert das Attribut gegen jede Regel, die display setzt —
   etwa .pille { display: inline-flex }. Ein per JavaScript verstecktes Element
   bliebe dann sichtbar. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--grotesk);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinte);
  background: var(--pergament);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* clip statt hidden: hidden macht aus dem Element einen Scroll-Container und
     zerstoert damit jedes position:sticky darin - der Bild-in-Bild-Effekt bliebe
     einfach stehen. clip begrenzt genauso, ohne diesen Nebeneffekt. */
  overflow-x: clip;
}

@media (min-width: 900px) { body { font-size: 18px; } }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--messing); color: var(--pergament); }

:focus-visible {
  outline: 2px solid var(--messing);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- Typografie */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 460;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  line-height: 1.03;
  letter-spacing: -0.022em;
  margin: 0 0 var(--r4);
  text-wrap: balance;
}

h1 { font-size: clamp(3rem, 8vw, 7rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.85rem); letter-spacing: -0.015em; }
h4 { font-size: 1.1rem; letter-spacing: -0.01em; }

p { margin: 0 0 var(--r4); }
p:last-child { margin-bottom: 0; }

.vorspann {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 56ch;
}

.lese { max-width: var(--lesespalte); }
.mitte { margin-left: auto; margin-right: auto; }
.zentriert { text-align: center; }

/* Preise und Zahlen: groß, nackt, in der Serif */
.preis {
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-weight: 420;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------- Layout */

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

.bahn-weit {
  width: 100%;
  max-width: var(--bahn-weit);
  margin-inline: auto;
  padding-inline: var(--r5);
}

@media (min-width: 700px) {
  .bahn, .bahn-weit { padding-inline: var(--r7); }
}

.abschnitt { padding-block: var(--r9); }

@media (min-width: 1100px) {
  .abschnitt { padding-block: var(--r10); }
}

.abschnitt-eng { padding-block: var(--r8); }

/* Flächen fließen ineinander statt hart zu schneiden. */
.flaeche-papier {
  background: var(--papier);
  background-image:
    linear-gradient(180deg, var(--pergament), var(--papier) 140px calc(100% - 140px), var(--pergament));
}

.flaeche-tinte {
  background: var(--tinte-tief);
  color: #E8DCC6;
}
.flaeche-tinte h1, .flaeche-tinte h2, .flaeche-tinte h3 { color: var(--pergament); }
.flaeche-tinte a:hover { color: var(--messing-hell); }

/* ------------------------------------------------------------- Bedienelemente */

/* Genau eine Pille je Abschnitt, daneben höchstens ein Textlink.
   Zwei gleichwertige Knöpfe nebeneinander sind das Kennzeichen einer Baukastenseite. */
.pille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--r2);
  min-height: 52px;
  padding: 0 var(--r6);
  font-family: var(--grotesk);
  font-size: 1rem;
  font-weight: 560;
  letter-spacing: 0.005em;
  color: var(--pergament);
  background: var(--tinte);
  border: 1px solid var(--tinte);
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s var(--ruhig), border-color .18s var(--ruhig),
              transform .18s var(--ruhig);
}
.pille:hover { background: var(--messing); border-color: var(--messing); transform: translateY(-1px); }
.pille:active { transform: translateY(0); }

.pille.messing { background: var(--messing); border-color: var(--messing); }
.pille.messing:hover { background: var(--tinte); border-color: var(--tinte); }

.pille.offen {
  background: transparent;
  color: var(--tinte);
  border-color: var(--linie);
}
.pille.offen:hover { background: var(--tinte); color: var(--pergament); border-color: var(--tinte); }

.pille[disabled], .pille.aus {
  opacity: .45;
  pointer-events: none;
}

/* Apple-Textlink: „Mehr erfahren ›“ */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 520;
  color: var(--messing);
  transition: gap .18s var(--ruhig);
}
.textlink::after { content: '›'; font-size: 1.25em; line-height: 1; transform: translateY(-1px); }
.textlink:hover { gap: 11px; }

.flaeche-tinte .textlink { color: var(--messing-hell); }

/* ------------------------------------------------------------------- Siegel */

/* Auszeichnungen als Siegellack-Marke bzw. Messing-Prägung — keine bunte Pille. */
.siegel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px 5px 11px;
  font-family: var(--grotesk);
  font-size: 11.5px;
  font-weight: 620;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pergament);
  background: var(--siegel);
  border-radius: 2px 10px 2px 10px;
}
.siegel.messing { background: var(--messing); }
.siegel.forst   { background: var(--forst); }
.siegel.papier  { background: var(--karte); color: var(--tinte); }

/* Verkauft: diagonaler Stempel über dem Bild */
.stempel {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  padding: 8px 26px;
  font-family: var(--grotesk);
  font-size: clamp(13px, 1.4vw, 17px);
  font-weight: 660;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--siegel);
  border: 3px solid var(--siegel);
  border-radius: 4px;
  transform: translate(-50%, -50%) rotate(-11deg);
  background: rgba(251, 247, 239, .84);
  pointer-events: none;
}

/* ------------------------------------------------------------------ Bewegung */

/* Scroll-Reveal. Die Startgestalt NIEMALS über clip-path bauen — das nullt die
   Bounding-Box und der IntersectionObserver feuert nie. */
.enthuellen {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s var(--ruhig), transform .5s var(--ruhig);
}
.enthuellen.sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-film video { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .enthuellen { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- Sonstiges */

.nur-vorleser {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.zum-inhalt {
  position: absolute;
  top: -100px;
  left: var(--r4);
  z-index: 100;
  padding: 12px 20px;
  background: var(--tinte);
  color: var(--pergament);
  border-radius: 0 0 8px 8px;
  transition: top .2s var(--ruhig);
}
.zum-inhalt:focus { top: 0; }

hr.zierlinie {
  height: 1px;
  border: 0;
  margin: var(--r7) 0;
  background: linear-gradient(90deg, transparent, var(--linie) 20%, var(--linie) 80%, transparent);
}

/* ------------------------------------------------------------- Grundkarte */

/* Die Seekarte liegt hinter der ganzen Seite. Sehr schwach, damit Text
   uneingeschränkt lesbar bleibt — aber stark genug, dass keine Fläche
   als leeres Weiß daliegt. */

.grundkarte {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  background-image: url('../bild/karte.webp');
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
  opacity: .16;
  /* Multiply hält die Karte im Papierton, statt sie grau aufzuhellen */
  mix-blend-mode: multiply;
}

@media (max-width: 700px) {
  .grundkarte { background-position: 62% 40%; opacity: .13; }
}

/* Der Grund der Seite bleibt Pergament — die Karte legt sich darüber. */
body { background: var(--pergament); }

/* Flächen werden durchscheinend, damit die Karte überall mitspielt. */
.flaeche-papier {
  background: rgba(241, 231, 214, .62);
  background-image:
    linear-gradient(180deg,
      rgba(251, 247, 239, .5), rgba(241, 231, 214, .72) 140px calc(100% - 140px),
      rgba(251, 247, 239, .5));
}