/* FACKELPFAD · Landing Page · Fassung VINTAGE (Expedition, 1920er)
   Gesetz ist apps/pyramide/schmiede/MARKE.md, Abschnitt „Landing Page".
   Farben, Schriften, Radien und die Körnung kommen aus marke.css (Kopie von
   www/marke.css, Werte identisch). Hier steht keine einzige neue Hexzahl.

   Die Seite ist ein Expeditionsplakat mit eingeklebten Tagebuchfotos:
   - Kopf wie die Titelseite des Spiels: Etikett links, Siegel als Stempel rechts, schief.
   - Die Bildschirmfotos sind Abzüge mit Papierrand und Fotoecken, jeder anders schief.
   - Die Absätze tragen eingerückte Zeilenüberschriften wie ein Katalog der Zeit.
   - Die Messwerte stehen in einem Kontobuch mit Rockwell-Ziffern.
   Kein Glimmen, kein Schlagschatten, keine Verläufe als Schmuck, keine Bewegung
   außer der Antwort auf einen Druck. Papierkorn über allem. */

:root{
  --hintergrund: var(--farbe-hintergrund, #1c1511);
  --flaeche: var(--farbe-flaeche, #2a211a);
  --text: var(--farbe-text, #e3d3b0);
  --gedaempft: var(--farbe-text-gedaempft, #c4b08a);
  --akzent: var(--farbe-akzent, #b9953f);
  --akzent-text: var(--farbe-akzent-text, #1c1511);
  --fehler: var(--farbe-fehler, #d86e5e);
  --erfolg: var(--farbe-erfolg, #6fafa3);
  --messing: var(--farbe-gold, #b9953f);
  --messing-schatten: var(--messing-tief, #7a6128);
  --rot: var(--stempelrot, #9e3b2e);
  --tinte-farbe: var(--tinte, #120d0a);
  --knopf: var(--farbe-knopf, #3a2e24);
  --titelschrift: var(--schrift-titel, "Rockwell", "Roboto Slab", "Courier New", serif);
  --textschrift: var(--schrift-text, "Futura", "Avenir Next", "Trebuchet MS", Roboto, sans-serif);
  --schmalschrift: var(--schrift-schmal, "Futura", "Avenir Next Condensed", "Arial Narrow", sans-serif);
  --r-karte: var(--radius-karte, 2px);
  --r-knopf: var(--radius-knopf, 2px);
  --rand: var(--rand-leise, rgba(185,149,63,.32));
  --linie: var(--rand-gold, rgba(185,149,63,.6));
  --kante: var(--kante-stein, rgba(0,0,0,.5));
  /* Breite des Satzspiegels: Telefon 560, Tablet hochkant 760, quer 1120 (wie das Spiel) */
  --spiegel: 560px;
  --rand-links: calc(16px + env(safe-area-inset-left));
  --rand-rechts: calc(16px + env(safe-area-inset-right));
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%; background:var(--hintergrund); scroll-behavior:auto}
body{
  margin:0; min-height:100vh; background-color:var(--hintergrund); color:var(--text);
  font-family:var(--textschrift); font-size:16px; line-height:1.5;
  overflow-x:hidden; hyphens:manual; -webkit-hyphens:manual;
}
/* Eine alte Aufnahme hat dunkle Ecken. Die Vignette liegt fest im Fenster, unter dem Inhalt. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(ellipse 110% 85% at 50% 42%, rgba(0,0,0,0) 45%, var(--vignette, rgba(0,0,0,.5)) 100%);
}
/* Das Papierkorn liegt über allem. Es nimmt keine Berührung an. */
body::after{content:""; position:fixed; inset:0; z-index:95; pointer-events:none; background-image:var(--koernung, none)}
main{position:relative; z-index:1; width:100%; min-height:100vh; display:block; overflow:hidden}
a{color:inherit}
img{display:block; max-width:100%; height:auto}
:focus-visible{outline:2px solid var(--messing); outline-offset:3px}

/* ---------- Satzspiegel ---------- */
.bogen{
  width:100%; max-width:var(--spiegel); margin:0 auto;
  padding-left:var(--rand-links); padding-right:var(--rand-rechts);
}
@media (min-width: 700px){ :root{--spiegel:800px} }
@media (min-width: 1000px){ :root{--spiegel:1120px} }

h2{
  font-family:var(--titelschrift); font-size:var(--groesse-titel, 24px); font-weight:700; margin:0 0 14px;
  color:var(--messing); letter-spacing:.03em; line-height:1.15;
}
h2::after{content:""; display:block; width:44px; height:2px; background:var(--messing); margin-top:8px; opacity:.75}
.klein{font-size:13px; color:var(--gedaempft)}
p{margin:8px 0}

/* ---------- 1. Das Plakat: Kopf wie die Titelseite ---------- */
.plakat{
  padding-top:calc(14px + env(safe-area-inset-top)); padding-bottom:36px;
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"etikett" "siegel" "rest";
  align-items:start;
}
/* Das Etikett: die Wortmarke in einem Rahmen aus zwei Linien, leicht schief wie aufgeklebt.
   Die innere Linie sitzt versetzt (Druckversatz). */
.etikett{
  grid-area:etikett; justify-self:start; position:relative; max-width:calc(100% - 20px);
  padding:10px 16px 12px 14px; border:1px solid var(--messing);
  transform:rotate(-1.2deg); transform-origin:left bottom; margin:8px 0 0 2px;
}
.etikett::after{content:""; position:absolute; inset:4px; border:1px solid var(--messing); opacity:.7; transform:translate(3px, 2px); pointer-events:none}
h1.titel{
  font-family:var(--titelschrift); font-weight:700; font-size:var(--groesse-wortmarke, clamp(28px, 10vw, 64px)); line-height:1;
  letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; margin:0; padding:2px 0 0;
  color:var(--messing); text-shadow:2px 2px 0 var(--rot);
}
.unter{
  font-family:var(--schmalschrift); font-stretch:condensed; font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gedaempft); margin:8px 0 0;
}
/* Das Siegel: ein Stempel, rechts, schief. Die Quelle ist www/marke/icon.svg, hier inline kopiert. */
.siegel{
  grid-area:siegel; position:relative; justify-self:end;
  width:var(--siegel, min(58vw, 30vh, 480px)); height:var(--siegel, min(58vw, 30vh, 480px));
  margin:-6px -2% 0 0; transform:rotate(var(--siegel-neigung, -7deg));
}
.siegel-bild{display:block; width:100%; height:100%}
.plakatrest{grid-area:rest; display:flex; flex-direction:column; align-items:flex-start; margin-top:2px}
.einleitung{max-width:38ch; margin:0; font-size:17px; line-height:1.45; color:var(--text)}
.plakatknopf{width:100%; max-width:380px; margin:18px 0 0}
.plakatknopf .klein{margin:10px 0 0 2px}

/* Der Hauptknopf: Messing, ein gedruckter Rahmen mit vier Eckmarken, die Papierkontur
   um drei Punkte versetzt wie beim Mehrfarbdruck. Hier ein Verweis, kein Knopf. */
.knopf{
  display:flex; align-items:center; justify-content:center; width:100%; min-height:58px; margin:0; padding:12px 16px; position:relative;
  text-decoration:none; text-align:center;
  background-color:var(--akzent); color:var(--akzent-text); border:1px solid var(--tinte-farbe);
  border-radius:var(--r-knopf); font-family:var(--titelschrift); font-size:18px; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em;
  background-image:linear-gradient(var(--tinte-farbe), var(--tinte-farbe)), linear-gradient(var(--tinte-farbe), var(--tinte-farbe)),
                   linear-gradient(var(--tinte-farbe), var(--tinte-farbe)), linear-gradient(var(--tinte-farbe), var(--tinte-farbe));
  background-repeat:no-repeat; background-size:5px 5px;
  background-position:7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px);
  box-shadow:inset 0 0 0 3px var(--akzent), inset 0 0 0 4px rgba(18,13,10,.75), 0 3px 0 var(--messing-schatten);
  transition:transform var(--dauer, 160ms), box-shadow var(--dauer, 160ms);
}
.knopf::after{content:""; position:absolute; inset:-1px; border:1px solid var(--text); opacity:.8; transform:translate(3px, 3px); pointer-events:none; border-radius:var(--r-knopf)}
.knopf:active{transform:translateY(2px); box-shadow:inset 0 0 0 3px var(--akzent), inset 0 0 0 4px rgba(18,13,10,.75), 0 1px 0 var(--messing-schatten)}
.knopf:active::after{transform:translate(1px, 1px)}

/* Kurze Telefone hochkant (iPhone SE): der Stempel gibt etwas ab, damit der Knopf im Bild bleibt */
@media (orientation: portrait) and (max-height: 700px){
  :root{--siegel:min(50vw, 26vh, 480px)}
  .einleitung{font-size:16px}
  .plakatknopf{margin-top:12px}
}
/* Tablet hochkant: dasselbe Plakat, nur größer. */
@media (orientation: portrait) and (min-width: 700px){
  :root{--siegel:min(50vw, 38vh, 620px); --groesse-wortmarke:clamp(28px, calc((min(100vw, 800px) - 140px) / var(--wortmarke-em, 7.3)), 84px)}
  .etikett{padding:14px 22px 16px 20px}
  .siegel{margin-top:-14px}
  .plakatrest{margin-top:10px}
  .einleitung{font-size:19px; max-width:40ch}
  .plakatknopf{max-width:420px; margin-top:24px}
  .knopf{min-height:64px; font-size:20px}
}
/* Quer (Telefon und Tablet): zwei Spalten, Etikett und Text links, der Stempel rechts daneben. */
@media (orientation: landscape){
  .plakat{
    grid-template-columns:minmax(0, 11fr) minmax(0, 9fr); grid-template-areas:"etikett siegel" "rest siegel";
    column-gap:clamp(12px, 3vw, 40px); align-items:center; padding-top:calc(10px + env(safe-area-inset-top));
    --siegel:min(40vw, 60vh, 560px);
  }
  .etikett{align-self:end; margin-top:0}
  .siegel{align-self:center; margin:0 -1% 0 0}
  .plakatrest{align-self:start}
  h1.titel{font-size:clamp(24px, calc((min(100vw, 1120px) * .55 - 90px) / var(--wortmarke-em, 7.3)), 72px)}
  .einleitung{max-width:44ch}
}
@media (orientation: landscape) and (min-width: 1000px){
  .plakat{--siegel:min(36vw, 64vh, 600px); padding-top:calc(24px + env(safe-area-inset-top)); padding-bottom:48px}
  .einleitung{font-size:19px}
  .plakatknopf{max-width:420px; margin-top:24px}
  .knopf{min-height:64px; font-size:20px}
}
@media (orientation: landscape) and (max-height: 480px){
  .plakat{--siegel:min(34vw, 74vh, 480px); column-gap:12px; padding-top:calc(22px + env(safe-area-inset-top)); padding-bottom:20px}
  .etikett{margin-top:6px}
  h1.titel{font-size:clamp(24px, calc((min(100vw, 1120px) * .55 - 90px) / var(--wortmarke-em, 7.3)), 44px)}
  .einleitung{font-size:15px; max-width:48ch}
  .unter{margin-top:4px; font-size:12px}
  .plakatknopf{margin-top:10px}
  .knopf{min-height:50px}
}

/* ---------- Abschnitte: ein Blatt nach dem anderen, getrennt durch eine Messinglinie ---------- */
.blatt{padding-top:34px; padding-bottom:38px; position:relative}
/* Die Trennung zwischen zwei Blättern: zwei Linien, die zweite um (2, 3) versetzt, wie beim Mehrfarbdruck */
.blatt::before, .blatt::after{
  content:""; position:absolute; left:var(--rand-links); right:var(--rand-rechts); top:0; height:1px;
  background:var(--linie); pointer-events:none;
}
.blatt::after{transform:translate(2px, 3px); opacity:.5}
.blatt .vorbemerkung{margin:-4px 0 18px; max-width:58ch}

/* ---------- 2. Die Aufnahmen: Abzüge, eingeklebt ---------- */
.aufnahmen{overflow:hidden}
.reihe-fotos{display:flex; flex-direction:column; gap:30px; margin-top:22px; padding:6px 10px 10px}
.foto{margin:0; position:relative; max-width:270px; transform:rotate(var(--neigung, 0deg))}
.foto.f1{--neigung:-2.2deg; align-self:flex-start; margin-left:2%}
.foto.f2{--neigung:1.7deg; align-self:flex-end; margin-right:2%}
.foto.f3{--neigung:-1.1deg; align-self:flex-start; margin-left:9%}
/* Der Abzug: Papierrand, darunter ein versetzter Karton statt eines Schattens (Druckversatz) */
.abzug{position:relative; padding:6px 6px 8px; background-color:var(--text)}
.abzug::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--knopf); transform:translate(5px, 6px)}
.abzug img{width:100%; height:auto; border:1px solid var(--tinte-farbe)}
/* Fotoecken: vier Taschen aus Leder mit Messingsaum, über die Ecken geklebt. Ein Verlauf mit
   durchsichtigem Ende macht das Dreieck, ohne Bilddatei, ohne clip-path. */
.ecke{position:absolute; width:28px; height:28px; pointer-events:none}
.ecke.ol{left:-5px; top:-5px; background:linear-gradient(135deg, var(--flaeche) 0 58%, var(--messing) 58% 64%, transparent 64%)}
.ecke.or{right:-5px; top:-5px; background:linear-gradient(225deg, var(--flaeche) 0 58%, var(--messing) 58% 64%, transparent 64%)}
.ecke.ur{right:-5px; bottom:-5px; background:linear-gradient(315deg, var(--flaeche) 0 58%, var(--messing) 58% 64%, transparent 64%)}
.ecke.ul{left:-5px; bottom:-5px; background:linear-gradient(45deg, var(--flaeche) 0 58%, var(--messing) 58% 64%, transparent 64%)}
.foto figcaption{margin:12px 2px 0; font-size:14px; line-height:1.4; color:var(--gedaempft); max-width:30ch; font-style:italic}
/* Tablet: die drei Abzüge nebeneinander, gestaffelt, wie auf einer Albumseite */
@media (min-width: 700px){
  .reihe-fotos{flex-direction:row; align-items:flex-start; justify-content:space-between; gap:24px; padding:10px 14px 16px}
  .foto{flex:0 1 30%; max-width:300px; margin:0}
  .foto.f1{margin-top:0; margin-left:0}
  .foto.f2{margin-top:44px; margin-right:0}
  .foto.f3{margin-top:14px; margin-left:0}
}

/* ---------- 3. Was du erlebst: Katalogeinträge mit eingerückter Zeilenüberschrift ---------- */
.eintraege{margin:18px 0 0; max-width:62ch}
.eintrag{margin:0 0 16px; padding:0 0 16px; border-bottom:1px solid var(--rand)}
.eintrag:last-child{border-bottom:0; padding-bottom:0}
.eintrag b{font-family:var(--titelschrift); font-weight:700; color:var(--messing); letter-spacing:.02em; font-size:17px; margin-right:.6em}
@media (min-width: 1000px){
  .eintraege{max-width:none; columns:2; column-gap:56px; column-rule:1px solid var(--rand)}
  .eintrag{break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid}
}

/* ---------- 4. Gemessen: ein Kontobuch ---------- */
table.buch{width:100%; table-layout:fixed; border-collapse:collapse; margin-top:16px; font-size:15px; font-variant-numeric:tabular-nums; max-width:760px}
table.buch th:first-child{width:44%}
table.buch th{font-family:var(--titelschrift); font-weight:700; font-size:15px; letter-spacing:.02em; color:var(--messing); text-align:left; padding:6px 4px 8px; border-bottom:2px solid var(--messing)}
table.buch th:not(:first-child), table.buch td:not(:first-child){text-align:right}
table.buch td{padding:9px 4px; border-bottom:1px solid var(--rand); vertical-align:baseline; line-height:1.35}
table.buch td:first-child{color:var(--text); padding-right:10px}
table.buch td:not(:first-child){font-family:var(--titelschrift); font-size:16px; color:var(--text); overflow-wrap:normal}
table.buch td.vorher{color:var(--gedaempft)}
table.buch td.gut{color:var(--erfolg)}
table.buch tr:last-child td{border-bottom:2px solid var(--messing)}
.messung .klein{max-width:58ch; margin-top:14px}
@media (max-width: 359px){
  table.buch{font-size:14px}
  table.buch td:not(:first-child){font-size:15px}
}

/* ---------- 5. Fußzeile ---------- */
.fuss{padding-top:26px; padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.rechtszeile{display:flex; flex-wrap:wrap; align-items:center; gap:0 18px; margin:0}
.rechtszeile a{
  display:inline-flex; align-items:center; min-height:48px; padding:0 2px; font-size:15px; color:var(--gedaempft);
  text-decoration:underline; text-decoration-color:var(--rand); text-decoration-thickness:1px; text-underline-offset:5px; border-radius:var(--r-knopf);
}
.rechtszeile a:active{color:var(--messing); text-decoration-color:var(--messing)}
.fuss .klein{margin:6px 0 0}
/* Der Vorschau-Stempel: wie der PLATZHALTER im Impressum des Spiels, rot, schief aufgedrückt */
.stempel{
  display:inline-block; margin:18px 0 0; padding:7px 12px; border:2px solid var(--fehler); color:var(--fehler);
  transform:rotate(-1.5deg); font-family:var(--titelschrift); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
}

@media (prefers-reduced-motion: reduce){
  .knopf{transition:none}
}