/* Fundort, Vorschaltseite bis zum Shopstart (Look D "Mole und Karte")

   Design plan
   Subject: fundort.shop vor dem Verkaufsstart. Job: dem Instagram-Profil ein echtes Ziel geben,
   die Marke greifbar machen und Impressum + Datenschutz bereitstellen. Sammelt keine Daten.
   Color: Mole #2A1D18 (Grund), Chilhuacle #43231C (Flaeche), Mais #E2A93B (Fadenkreuz, Fokus),
          Masa #F1E6D8 (Text dunkel / Papier hell), Masa gedeckt #D9C9B6, Mais dunkel #8A5A0C auf hell.
   Type: Archivo (variabel, selbst gehostet). Breit + 800 fuer Wortmarke und Titel,
         schmal fuer Koordinaten, normale Breite fuer Fliesstext.
   Layout: Startseite = Karte bildschirmfuellend, Fadenkreuz auf dem Gipfel, Text unten links.
           Rechtsseiten = helles Masa-Papier wie das Etikett: Pflichtangaben sind immer hell.
   Bold thing: die Hoehenlinienkarte. Alles andere bleibt ruhig.
   Avoided: Grossbuchstaben-Labels, Mittelpunkt-Metazeilen, Mono-Labels, Pfeile an Links. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("archivo.woff2") format("woff2-variations"), url("archivo.woff2") format("woff2");
}

:root {
  --mole: #2a1d18;
  --chil: #43231c;
  --mais: #e2a93b;
  --mais-dunkel: #8a5a0c;
  --masa: #f1e6d8;
  --masa-gedeckt: #d9c9b6;
  --rand: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  background: var(--mole);
  color: var(--masa);
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--mais); outline-offset: 3px; border-radius: 2px; }

/* Wortmarke */
.marke {
  display: inline-flex; align-items: center; gap: .32em;
  font-weight: 800; font-stretch: 115%; letter-spacing: -.02em; line-height: 1;
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  text-decoration: none;
}
.marke svg { width: .66em; height: .66em; flex: none; }

/* Startseite */
.start { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.start canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.start::after {
  /* dunkelt nur die Ecke unter dem Text ab, damit er auf den Linien lesbar bleibt */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(42,29,24,.92) 0%, rgba(42,29,24,.6) 32%, rgba(42,29,24,0) 60%);
}
.start header { position: absolute; z-index: 2; top: var(--rand); left: var(--rand); }

.koordinaten {
  position: absolute; z-index: 2; margin: 0;
  font-stretch: 78%; font-weight: 600; font-size: clamp(.95rem, 1.5vw, 1.15rem); line-height: 1.3;
  color: var(--mais); font-variant-numeric: tabular-nums; white-space: nowrap;
  visibility: hidden;
}
.koordinaten span { display: block; color: var(--masa-gedeckt); font-weight: 400; }

.text {
  position: absolute; z-index: 2; left: var(--rand); right: var(--rand); bottom: var(--rand);
  max-width: 42rem;
}
.text h1 {
  margin: 0;
  font-weight: 800; font-stretch: 122%; letter-spacing: -.035em; line-height: .92;
  font-size: clamp(2.6rem, 8.2vw, 6.5rem);
  max-width: 13ch;
}
.text p { margin: 1.4rem 0 0; max-width: 36em; color: var(--masa-gedeckt); }
.text .bald { color: var(--masa); }
.kontakt { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-weight: 600; }

.fuss {
  position: absolute; z-index: 2; right: var(--rand); top: var(--rand);
  display: flex; gap: 1.2rem; font-size: .9375rem; font-stretch: 85%;
  color: var(--masa-gedeckt);
}

@media (max-width: 640px) {
  .fuss { position: static; padding: 0 var(--rand) 1.5rem; background: var(--mole); }
  .start { min-height: calc(100svh - 3rem); }
  .text p { font-size: 1rem; }
}

/* Rechtsseiten: helles Papier wie das Etikett */
body.papier { background: var(--masa); color: var(--mole); }
.papier .kopf {
  padding: var(--rand) var(--rand) 0;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
}
.papier .marke { color: var(--mole); }
.papier .kopf nav { display: flex; gap: 1.2rem; font-stretch: 85%; }
.papier main { padding: clamp(2.5rem, 6vw, 5rem) var(--rand) 4rem; max-width: calc(38rem + 2 * var(--rand)); }
.papier h1 {
  margin: 0 0 2rem;
  font-weight: 800; font-stretch: 118%; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
}
.papier h2 { margin: 2.4rem 0 .5rem; font-size: 1.2rem; font-weight: 700; font-stretch: 100%; line-height: 1.3; }
.papier p, .papier li { line-height: 1.6; }
.papier p { margin: 0 0 1rem; }
.papier ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.papier a { color: var(--mole); text-decoration-color: var(--mais-dunkel); }
.papier :focus-visible { outline-color: var(--mais-dunkel); }
.papier .stand { margin-top: 3rem; font-size: .9375rem; color: #6b5548; }
.papier address { font-style: normal; margin: 0 0 1rem; }
.papier .fehlt { background: #f6d58f; padding: 0 .2em; }