/* Mike's Bistro, Entwurf Mappe.
   Tisch in Flaschengrün wie die Schirme der Terrasse, Deckel in Ochsenblut,
   schweres helles Papier. Bodoni für die Stimme, Hanken Grotesk für den Rest. */

@font-face { font-family: "Bodoni Moda"; src: url("assets/fonts/bodoni.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("assets/fonts/hanken.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("assets/fonts/hanken-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --sc-canvas: #1E302A;
  --sc-surface: #F1EEE6;
  --sc-ink: #F1EEE6;
  --sc-ink-soft: #C4CDC4;
  --sc-accent: #A3201C;
  --sc-accent-ink: #F7F4EC;
  --sc-font-display: "Bodoni Moda", "Didot", Georgia, serif;
  --sc-font-text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --sc-shadow-color: 165 40% 6%;

  --papier-tinte: #1B2622;
  --papier-leise: #55615B;
  --ochsenblut: #40141A;
  --ochsenblut-hell: #541A21;
  --W: 560px;
  --H: 760px;
}

body { background: var(--sc-canvas); font-size: 17px; line-height: 1.5; letter-spacing: 0; font-weight: 400; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; font-family: var(--sc-font-display); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
figure { margin: 0; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.sc-grain { z-index: 90; opacity: .035; }

.sprung { position: fixed; left: 1rem; top: 1rem; z-index: 200; background: var(--sc-surface); color: var(--papier-tinte); padding: .5em 1em; transform: translateY(-300%); }
.sprung:focus-visible { transform: none; }

/* ------------------------------------------------------------ Der Tisch -- */
.tisch { background: var(--sc-canvas); overflow: clip; }
.ebene { position: absolute; pointer-events: none; }
.tisch__stoff {
  inset: 0;
  background:
    radial-gradient(130% 100% at 56% 40%, hsl(160 30% 26% / .35) 0%, transparent 46%, hsl(165 35% 6% / .6) 100%),
    url("assets/stoff.webp") 0 0 / 320px 320px;
}
.tisch__licht {
  inset: -14%;
  background: url("assets/licht.webp") center / cover no-repeat;
  mix-blend-mode: soft-light;
  will-change: transform, opacity;
}
.tisch__licht--oben { z-index: 50; mix-blend-mode: soft-light; }

/* --------------------------------------------------------- Einstieg ------ */
.auftakt {
  position: absolute; z-index: 40; left: clamp(1.5rem, 6vw, 6rem); top: 50%; translate: 0 -50%;
  width: min(36rem, 44vw); display: grid; justify-items: start; gap: 1.5rem;
}
.auftakt__name {
  font-size: clamp(3.4rem, 7.2vw, 7rem); line-height: .98; letter-spacing: -.012em;
  font-optical-sizing: none; font-variation-settings: "opsz" 44; font-weight: 400;
  text-shadow: 0 2px 22px hsl(165 40% 5% / .6);
}
.auftakt__satz { font-size: clamp(1.05rem, .9rem + .5vw, 1.3rem); line-height: 1.42; color: var(--sc-ink); max-width: 28rem; text-shadow: 0 1px 12px hsl(165 40% 5% / .7); }
/* ----------------------------------------------------------- Kontakt ---
   Ein Papierstreifen über allem: an jeder Stelle der Seite zu sehen, nie abgedunkelt. */
.kontakt {
  position: fixed; z-index: 80; right: .75rem; top: .6rem;
  display: flex; align-items: center; gap: 1.25rem;
  padding: .32rem .5rem .32rem 1rem; min-height: 48px;
  background: var(--sc-surface) url("assets/papier.webp") 0 0 / 192px 192px; color: var(--papier-tinte);
  box-shadow: 0 1px 1px hsl(165 30% 6% / .4), 0 10px 22px -8px hsl(165 40% 4% / .6);
  font-size: .92rem; line-height: 1.2;
}
.kontakt p { margin: 0; white-space: nowrap; }
.kontakt__adresse { color: inherit; text-decoration: none; white-space: nowrap; }
.kontakt__adresse:hover { text-decoration: underline; text-underline-offset: .2em; }
.kontakt__nummer {
  font-family: var(--sc-font-text); font-weight: 600; font-size: 1.32rem; line-height: 1; white-space: nowrap;
  letter-spacing: .005em; font-variant-numeric: lining-nums tabular-nums;
  color: var(--sc-accent); text-decoration: none; padding: .35rem .5rem;
}
.kontakt__nummer:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.kontakt__recht { display: flex; gap: .85rem; font-size: .84rem; white-space: nowrap; }
.kontakt__recht a { color: inherit; display: inline-flex; align-items: center; min-height: 24px; text-underline-offset: .2em; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.stift {
  position: absolute; z-index: 30; left: 0; top: 0; width: min(34vmin, 300px); height: auto; overflow: visible;
  filter: drop-shadow(4px 8px 7px hsl(165 40% 4% / .55));
  will-change: transform;
}

/* --------------------------------------------------------- Das Buch ------ */
.buch { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 20; }
.b3d .buch { will-change: transform; }

.blatt { position: absolute; left: 0; top: calc(var(--H) / -2); width: var(--W); height: var(--H); transform-origin: 0 50%; outline: 1px solid transparent; }
.blatt--deckel { box-shadow: 0 2px 3px hsl(165 40% 4% / .45), 0 22px 46px -6px hsl(165 40% 4% / .6), 0 60px 90px -30px hsl(165 40% 4% / .5); }
.blatt:not(.blatt--deckel) { left: 3px; transform-origin: -3px 50%; top: calc((var(--H) - 12px) / -2); width: calc(var(--W) - 9px); height: calc(var(--H) - 12px); }
.seite {
  position: absolute; inset: 0; overflow: hidden; color: var(--papier-tinte);
  background: var(--sc-surface) url("assets/papier.webp") 0 0 / 192px 192px;
  container-type: inline-size;
}
/* Das Rückseitenblatt wird gespiegelt, damit es nach der Drehung richtig herum liest */
.b3d .seite--rueck { transform: scaleX(-1); }
.seite::before { /* Wölbung zum Falz */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(to right, hsl(165 20% 12% / .2), hsl(165 20% 12% / .05) 5%, transparent 13%);
}
.seite--rueck::before { background: linear-gradient(to left, hsl(165 20% 12% / .22), hsl(165 20% 12% / .05) 5%, transparent 13%); }
.seite::after { /* Licht beim Wenden */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: linear-gradient(to right, hsl(165 30% 6% / .5), hsl(165 30% 6% / .12) 60%, hsl(0 0% 100% / .1));
  opacity: var(--wende, 0);
}
.seite__in {
  position: absolute; inset: 0; padding: 8.5cqw 8.5cqw 7cqw 9.5cqw;
  font-size: clamp(13px, 3cqw, 21px); line-height: 1.5;
  display: flex; flex-direction: column; gap: 1em;
}
.seite--rueck .seite__in { padding: 8.5cqw 9.5cqw 7cqw 8.5cqw; }

.titel { font-size: 2.5em; line-height: 1.06; letter-spacing: -.004em; font-optical-sizing: none; font-variation-settings: "opsz" 26; font-weight: 500; }
.titel--gross { font-size: 3.15em; }
/* Die Schrift hat für W und T vor Kleinbuchstaben keine Unterschneidung */
.unterschneiden { letter-spacing: -.09em; }

/* ------------------------------------------------------------- Deckel ---- */
.deckel { background: var(--ochsenblut); color: #E9DDC9; }
.deckel::before { background: linear-gradient(to right, hsl(350 50% 6% / .5), transparent 5%); }
.deckel--hinten::before { background: linear-gradient(to left, hsl(350 50% 6% / .5), transparent 5%); }
.deckel::after { background: linear-gradient(to right, hsl(350 50% 4% / .6), transparent); }
.deckel__in { align-items: center; justify-content: center; text-align: center; gap: 1.6em; padding: 0 !important; }
.deckel__in {
  /* Leinenbezug: derselbe Stoff wie der Tisch, in Ochsenblut */
  background:
    radial-gradient(90% 70% at 50% 34%, hsl(350 56% 28% / .5), transparent 70%),
    url("assets/stoff.webp") 0 0 / 320px 320px;
  background-blend-mode: normal, luminosity;
  background-color: var(--ochsenblut);
}
.praegung {
  display: block; width: 42cqw; aspect-ratio: 1336 / 1599; background: #2F0A10;
  -webkit-mask: url("assets/logo-maske.svg") center / contain no-repeat; mask: url("assets/logo-maske.svg") center / contain no-repeat;
  filter: drop-shadow(0 1.5px 0 hsl(350 40% 42% / .85)) drop-shadow(0 -1px 0 hsl(350 60% 8% / .9));
}
.praegung--klein { width: 22cqw; }
.deckel__zeile { font-family: var(--sc-font-display); font-size: 3.1cqw; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; font-optical-sizing: none; font-variation-settings: "opsz" 14; font-weight: 500; }
.deckel--hinten .deckel__zeile { letter-spacing: .01em; text-transform: none; font-family: var(--sc-font-text); font-size: 2.6cqw; }

.vorsatz { background: var(--ochsenblut-hell); color: #F1E7D6; }
.vorsatz::before { background: linear-gradient(to left, hsl(350 50% 6% / .4), transparent 12%); }
.seite--vorn.vorsatz::before { background: linear-gradient(to right, hsl(350 50% 6% / .4), transparent 12%); }
.vorsatz__in { justify-content: flex-end; }
.vorsatz__gruss { font-family: var(--sc-font-display); font-size: 13.4cqw; line-height: 1; letter-spacing: -.006em; font-optical-sizing: none; font-variation-settings: "opsz" 40; }
.vorsatz__zeile { font-size: 1.05em; letter-spacing: .02em; color: #E0CFC0; }

/* -------------------------------------------------------------- Abzüge --- */
.abzug { position: relative; background: #FBF9F3; padding: 2.2cqw 2.2cqw 0; box-shadow: 0 1px 1px hsl(165 30% 10% / .3), 0 6px 14px -4px hsl(165 30% 10% / .35); }
.abzug img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.abzug figcaption { font-size: .86em; line-height: 1.32; padding: .55em .1em .75em; color: var(--papier-leise); }
.abzug:not(:has(figcaption)) { padding-bottom: 2.2cqw; }
.abzug--schief-l { transform: rotate(-1.1deg); }
.abzug--schief-r { transform: rotate(.9deg); }
.voll { justify-content: center; }
.abzug--gross { transform: rotate(-.5deg); }

.brief { gap: .85em; }
.abzug--haus { width: 62%; align-self: flex-end; transform: rotate(1.2deg); margin-bottom: .6em; }
.brief__anrede { font-family: var(--sc-font-display); font-size: 1.9em; line-height: 1.1; font-optical-sizing: none; font-variation-settings: "opsz" 20; font-weight: 500; }
.brief__gruss { font-family: var(--sc-font-display); font-size: 1.32em; margin-top: auto; font-optical-sizing: none; font-variation-settings: "opsz" 16; font-weight: 500; }
.brief__datum { font-size: .86em; color: var(--papier-leise); font-variant-numeric: lining-nums tabular-nums; margin-top: -.6em; }

.raum .paar { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; margin-top: auto; align-items: end; }
.wein .abzug--klein { width: 66%; align-self: flex-end; margin-top: auto; }
.wein .titel--gross em { font-style: normal; color: var(--sc-accent); }

.herd blockquote { margin: .3em 0 0; }
.herd blockquote p { font-family: var(--sc-font-display); font-size: 2.1em; line-height: 1.1; color: var(--sc-accent); font-optical-sizing: none; font-variation-settings: "opsz" 22; font-weight: 500; }
.herd blockquote footer { font-size: .8em; color: var(--papier-leise); margin-top: .35em; }
.presse { list-style: none; margin: auto 0 0; padding: .8em 0 0; border-top: 1px solid hsl(165 15% 30% / .28); font-size: .8em; line-height: 1.38; color: var(--papier-leise); display: grid; gap: .3em; }
.presse cite { color: var(--papier-tinte); font-style: normal; font-weight: 500; }

.teller { display: block; padding: 0 !important; }
.teller .abzug { position: absolute; }
.abzug--t1 { left: 10%; top: 7%; width: 74%; transform: rotate(-1deg); }
.abzug--t2 { left: 7%; bottom: 7%; width: 44%; transform: rotate(1.6deg); }
.abzug--t3 { right: 7%; bottom: 10%; width: 44%; transform: rotate(-1.4deg); }
.teller img { aspect-ratio: 1; }

.vor-karte .abzug--kerze { width: 52%; margin-top: auto; align-self: center; }
.vor-karte .abzug--kerze img { aspect-ratio: 3 / 4; }

/* ------------------------------------------------------ Lose Abzüge ----- */
.faecher { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; top: 0; width: 0; height: 0; }
.lose {
  position: absolute; left: 0; top: 0; width: min(44vw, calc((100svh - 150px) * 1.2)); opacity: 0; pointer-events: none;
  background: #FBF9F3; padding: .9rem .9rem 0;
  box-shadow: 0 2px 4px hsl(165 30% 8% / .3), 0 22px 44px -12px hsl(165 30% 6% / .6);
  transform-origin: 0 0; will-change: transform, opacity; color: var(--papier-tinte);
}
.lose--hoch { width: min(31vw, calc((100svh - 190px) * .75)); }
.lose img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.lose--hoch img { aspect-ratio: 3 / 4; }
.lose span { display: block; padding: .6rem .1rem .8rem; font-size: 1rem; line-height: 1.3; color: var(--papier-leise); }

.bilder { gap: 1em; }
.stapel { position: absolute; left: 50%; top: 55%; width: 62%; aspect-ratio: 1 / .78; translate: -50% -50%; }
.stapel i, .stapel img { position: absolute; inset: 0; width: 100%; height: 100%; background: #FBF9F3; padding: 2cqw 2cqw 6cqw; box-shadow: 0 1px 1px hsl(165 30% 10% / .3), 0 6px 14px -4px hsl(165 30% 10% / .35); }
.stapel i:nth-child(1) { rotate: 2.6deg; }
.stapel i:nth-child(2) { rotate: -1.8deg; }
.stapel img { object-fit: cover; rotate: -2.2deg; max-width: none; }

.abdunkeln { position: absolute; left: -300vw; top: -300vh; width: 600vw; height: 600vh; background: hsl(165 40% 5% / .78); opacity: 0; z-index: 4900; pointer-events: none; }

.impressum a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.impressum { font-size: clamp(12px, 2.6cqw, 17px); color: #EDE1CF; justify-content: flex-end; gap: .9em; }
.impressum__titel { font-size: 2.1em; line-height: 1.1; }

/* --------------------------------------------------------- Aufsteller ---- */
.aufsteller {
  position: absolute; left: 0; top: 0; z-index: 35; width: min(25rem, 86vw); padding: 2rem 2rem 1.75rem; display: grid; gap: .45rem; opacity: 0;
  background: var(--sc-surface) url("assets/papier.webp") 0 0 / 192px 192px; color: var(--papier-tinte); text-decoration: none;
  box-shadow: 0 1px 1px hsl(165 30% 6% / .4), 14px 26px 34px -10px hsl(165 40% 4% / .62);
  transform-origin: 0 0; will-change: transform;
}
.aufsteller::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 7px; background: linear-gradient(#CFCBBE, #AFAB9E); }
.aufsteller__oben { font-size: .95rem; color: var(--papier-leise); }
.aufsteller__zeile { font-size: 1rem; line-height: 1.35; }
.aufsteller__nummer { font-family: var(--sc-font-display); font-size: 3.1rem; line-height: 1.08; font-optical-sizing: none; font-variation-settings: "opsz" 16; font-weight: 500; color: var(--sc-accent); white-space: nowrap; font-variant-numeric: lining-nums; margin-bottom: .35rem; }

/* ------------------------------------------------------------ Register --- */
.reiter { position: absolute; left: 0; top: 0; z-index: auto; }
.reiter a {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; text-decoration: none;
  width: 30px; height: 104px; font-size: 13px; line-height: 1; letter-spacing: .01em;
  writing-mode: vertical-rl; color: #F1E7D6; background: var(--ochsenblut-hell);
  box-shadow: 1px 2px 5px hsl(165 40% 4% / .4);
  transition: background-color 140ms var(--sc-ease-out);
}
.reiter a.links { transform-origin: center; }
.reiter a:hover { background: #71242C; }
.reiter a[aria-current="true"] { background: var(--sc-surface); color: var(--papier-tinte); }

/* ----------------------------------------------------------------- Mobil
   Eine Seite im Blick: die Kamera fährt innerhalb der Doppelseite, statt die
   Mappe zu schrumpfen. Der Kontakt wird zur Leiste unter dem Daumen. */
@media (max-width: 900px) {
  .kontakt {
    left: 0; right: 0; top: auto; bottom: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; row-gap: .05rem; align-items: center;
    padding: .5rem max(.75rem, env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    font-size: clamp(.75rem, 3.3vw, .88rem); line-height: 1.25;
    box-shadow: 0 -8px 20px -8px hsl(165 40% 4% / .55);
  }
  .kontakt__zeit { grid-column: 1; grid-row: 1; }
  .kontakt__adresse { grid-column: 1; grid-row: 2; text-decoration: underline; text-underline-offset: .18em; }
  .kontakt__recht { grid-column: 1 / -1; grid-row: 3; font-size: inherit; margin-top: .05rem; }
  .kontakt__nummer { grid-column: 2; grid-row: 1 / span 2; font-size: clamp(1.22rem, 5.5vw, 1.6rem); min-height: 44px; display: flex; align-items: center; padding-inline: .25rem; }

  .auftakt { left: 1.25rem; right: 1.25rem; top: max(1.25rem, env(safe-area-inset-top)); translate: none; width: auto; gap: .5rem; }
  .auftakt__name { font-size: clamp(2.9rem, 13.4vw, 5rem); }
  .auftakt__satz { font-size: 1rem; }
  .reiter { display: none; }
  .seite__in { font-size: clamp(14px, 4.15cqw, 18px); line-height: 1.42; padding: 7cqw 6.5cqw 6cqw 7.5cqw; gap: .8em; }
  .seite--rueck .seite__in { padding: 7cqw 7.5cqw 6cqw 6.5cqw; }
  .titel { font-size: 2.15em; }
  .titel--gross { font-size: 2.6em; }
  .lose { width: min(84vw, calc((100svh - 150px) * 1.2)); }
  .lose--hoch { width: min(66vw, calc((100svh - 190px) * .75)); }
  .aufsteller { padding: 1.4rem 1.5rem 1.25rem; }
  .aufsteller__nummer { font-size: 2.6rem; }
  .stift { display: none; }
}

/* ------------------------------------------------------- Ohne Blättern ---
   Weniger Bewegung oder kein JavaScript: dieselben Seiten, einfach untereinander. */
html:not(.b3d) #mappe { height: auto !important; }
html:not(.b3d) .tisch { position: static !important; height: auto !important; overflow: visible; display: grid; justify-items: center; gap: 2rem; padding: 5rem 1rem 6rem; }
html:not(.b3d) .tisch__stoff, html:not(.b3d) .tisch__licht { position: fixed; inset: 0; z-index: -1; }
html:not(.b3d) .tisch__licht { opacity: .7; }
html:not(.b3d) .tisch__licht--oben, html:not(.b3d) .stift, html:not(.b3d) .reiter, html:not(.b3d) .abdunkeln, html:not(.b3d) .stapel { display: none; }
html:not(.b3d) .auftakt { position: static; translate: none; width: min(40rem, 100%); }
html:not(.b3d) .auftakt { opacity: 1 !important; transform: none !important; }
html:not(.b3d) .buch { position: static; width: min(40rem, 100%); height: auto; display: grid; gap: 1.25rem; transform: none !important; }
html:not(.b3d) .blatt { display: contents; }
html:not(.b3d) .seite { position: relative; inset: auto; overflow: visible; }
html:not(.b3d) .seite__in { position: relative; inset: auto; padding: 2.25rem; font-size: 1.05rem; min-height: 12rem; }
html:not(.b3d) .seite--rueck .seite__in { padding: 2.25rem; }
html:not(.b3d) .seite::before, html:not(.b3d) .seite::after { display: none; }
html:not(.b3d) .abzug { padding: .6rem .6rem 0; transform: none; }
html:not(.b3d) .abzug:not(:has(figcaption)) { padding-bottom: .6rem; }
html:not(.b3d) .teller { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 2.25rem !important; }
html:not(.b3d) .teller .abzug { position: static; width: auto; }
html:not(.b3d) .abzug--t1 { grid-column: 1 / -1; }
html:not(.b3d) .bilder { min-height: 0; }
html:not(.b3d) .faecher { position: static; width: auto; height: auto; display: grid; gap: 1.25rem; }
html:not(.b3d) .lose, html:not(.b3d) .lose--hoch { position: static; width: auto; opacity: 1 !important; transform: none !important; }
html:not(.b3d) .lose--hoch { width: 72%; }
html:not(.b3d) .deckel__in { padding: 3rem 1rem !important; }
html:not(.b3d) .praegung { width: 11rem; }
html:not(.b3d) .praegung--klein { width: 6rem; }
html:not(.b3d) .deckel__zeile { font-size: .95rem; }
html:not(.b3d) .vorsatz__gruss { font-size: 3.4rem; }
html:not(.b3d) .nummer { font-size: clamp(2.4rem, 10vw, 3.6rem); }
html:not(.b3d) .aufsteller { position: static; transform: none !important; opacity: 1 !important; width: min(40rem, 100%); }
html:not(.b3d) .auftakt__name { text-shadow: none; }

/* Der Streifen darf auf schmalen Desktops nichts abschneiden */
@media (min-width: 901px) and (max-width: 1080px) {
  .kontakt { gap: .8rem; font-size: .8rem; }
  .kontakt__recht { gap: .6rem; font-size: .78rem; }
  .kontakt__nummer { font-size: 1.22rem; }
}

/* Fingerbedienung: Das Lichtspiel steht still und blendet nicht über, damit das Blättern flüssig bleibt */
@media (hover: none), (pointer: coarse) {
  .tisch__licht { mix-blend-mode: normal; opacity: .22 !important; will-change: auto; transform: none !important; }
  .tisch__licht--oben { display: none; }
  .blatt, .buch { will-change: transform; }
}