@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); }

:root {
  --tinte: #24221e;
  --tinte-leise: rgba(36, 34, 30, .72);
  --papier: #efece5;
  --serif: "EB Garamond", "Adobe Garamond Pro", Garamond, Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--papier); color: var(--tinte); font-family: var(--serif);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }

/* Startseite: Vollbild */
.start { overflow: hidden; }
.buehne { position: fixed; inset: 0; overflow: hidden; background: #d9d4c8; }
.buehne img, .buehne video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.buehne video { z-index: 1; }
.buehne #film2 { z-index: 2; opacity: 0; }

.marke { position: fixed; left: var(--x, 50%); top: var(--y, 54%); transform: translate(-50%, -50%);
  text-align: center; white-space: nowrap; animation: auftauchen 2.4s ease-out both .3s; }
.marke h1 { font-weight: 400; font-size: clamp(44px, 5.4vw, 104px); line-height: 1; letter-spacing: .005em; }
.marke p { font-style: italic; font-size: clamp(15px, 1.45vw, 26px); margin-top: .7em; color: var(--tinte-leise); }
@keyframes auftauchen { from { opacity: 0; } to { opacity: 1; } }

.fuss { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 2.2em;
  padding: 0 16px calc(22px + env(safe-area-inset-bottom)); font-size: 16px; z-index: 1; font-style: italic; }
.fuss::before { content: ""; position: absolute; inset: -60px 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(239, 236, 229, .62), rgba(239, 236, 229, 0)); }
.fuss a { color: var(--tinte-leise); transition: color .3s; }
.fuss a:hover { color: var(--tinte); }

.wahl { position: fixed; left: 14px; top: 12px; font: 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .02em;
  color: rgba(36, 34, 30, .55); background: rgba(239, 236, 229, .45); border: 0; padding: 6px 8px; border-radius: 3px;
  cursor: pointer; white-space: pre; }

@media (max-width: 700px) {
  .buehne img, .buehne video { object-position: 22% 50%; }
  .marke { left: 50% !important; top: 46% !important; }
  .fuss { gap: 1.6em; font-size: 14px; }
}

/* Textseiten */
.text { max-width: 640px; margin: 0 auto; padding: 72px 16px 96px; font-size: 18px; line-height: 1.55; }
.text .zurueck { display: inline-block; font-style: italic; color: var(--tinte-leise); margin-bottom: 48px; }
.text h1 { font-weight: 400; font-size: 40px; line-height: 1.1; margin-bottom: 36px; }
.text h2 { font-weight: 400; font-style: italic; font-size: 21px; margin: 32px 0 6px; }
.text p { margin-bottom: 12px; }
.text a { border-bottom: 1px solid rgba(36, 34, 30, .3); }