/* ==========================================================================
   Tischlerei Matthias Mundt – Visitkarten-One-Pager
   Fraunces (Display) + Karla (Text), lokal per @font-face.
   Dunkle Holzmaserung (reine CSS-Gradienten + SVG-Noise als Data-URI),
   darauf eine cremefarbene Karte; darunter der Kleingedrucktbereich.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --c-cream: #f7f1e6;
  --c-ink: #1d160f;
  --c-line: #d9c8ac;
  --c-honey: #b06a1d;
  --c-fir: #2f4a3a;
  --c-bark: #241a12;
  --c-white: #fffdf8;
  --c-muted: #5d4c39;
  --c-honey-dark: #8f5314;
  --c-honey-light: #d99b4b;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-text: "Karla", system-ui, sans-serif;

  --shadow-card: 0 2px 6px rgba(0, 0, 0, .28), 0 24px 60px rgba(0, 0, 0, .42);

  /* Holzmaserung rein per CSS: SVG-Rauschen als Data-URI + gestreifte Verlaeufe */
  --wood-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  --wood-lines:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, .30) 0 1px, rgba(0, 0, 0, 0) 1px 6px, rgba(255, 255, 255, .035) 6px 7px, rgba(0, 0, 0, 0) 7px 15px),
    repeating-linear-gradient(87deg, rgba(0, 0, 0, .20) 0 2px, rgba(0, 0, 0, 0) 2px 27px);
}

/* ---- Lokal ausgelieferte Schriften (nur latin-Subset) -------------------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/karla-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--c-ink);
  background:
    var(--wood-noise),
    radial-gradient(900px 420px at 85% -10%, rgba(176, 106, 29, .35), transparent 70%),
    var(--wood-lines),
    linear-gradient(158deg, #3a2a1c 0%, var(--c-bark) 52%, #16100a 100%);
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--c-ink);
  margin: 0;
}

p { margin: 0 0 1em; }
a { color: var(--c-honey-dark); }
svg { display: block; }
address { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--c-honey);
  outline-offset: 2px;
  border-radius: 2px;
}
::selection { background: var(--c-honey); color: var(--c-white); }

[id] { scroll-margin-top: 1rem; }

/* ---- Skip-Link ----------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--c-ink);
  color: var(--c-white);
  padding: .8rem 1.2rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---- Buehne: dunkles Holz, zentrierte Karte ------------------------------ */
.stage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: clamp(1.5rem, 5vh, 3.5rem) clamp(1rem, 4vw, 2rem) 1.6rem;
}
.stage :focus-visible { outline-color: var(--c-honey-light); }

.card {
  margin: auto;
  width: min(620px, 100%);
  padding: clamp(2.4rem, 8vw, 4.2rem) clamp(1.4rem, 6vw, 3.4rem);
  text-align: center;
  background: linear-gradient(180deg, var(--c-white) 0%, var(--c-cream) 100%);
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-honey);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}

.card__signet {
  margin: 0 auto 1.4rem;
  color: var(--c-honey);
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-honey-dark);
  margin: 0 0 .9rem;
}

.card h1 {
  font-size: clamp(2.5rem, 9vw, 4.4rem);
  font-weight: 700;
  margin: 0 0 1.1rem;
}

.subline {
  font-size: clamp(1.02rem, 2.4vw, 1.18rem);
  color: var(--c-muted);
}
.subline__part + .subline__part::before {
  content: "·";
  color: var(--c-honey-dark);
  margin: 0 .55em;
}

/* ---- Fusszeile auf der Buehne -------------------------------------------- */
.stage__footer {
  width: min(620px, 100%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .4rem 1.4rem;
  font-size: .92rem;
  color: rgba(247, 241, 230, .82);
}
.stage__footer a { color: var(--c-honey-light); }
.stage__copy { margin: 0; }

/* ---- Kleingedrucktes ------------------------------------------------------ */
.legal {
  background: var(--c-cream);
  border-top: 4px solid var(--c-fir);
  padding-block: clamp(2.4rem, 6vw, 4rem);
}
.legal__inner {
  max-width: 70ch;
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
  font-size: .92rem;
  line-height: 1.7;
  color: var(--c-ink);
}
.legal h2 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 .9rem;
}
.legal h2:not(:first-child) { margin-top: 2.2rem; }
.legal p:last-child { margin-bottom: 0; }

/* ---- Staffelte Load-Animation --------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.anim {
  opacity: 0;
  animation: rise .8s cubic-bezier(.2, .6, .3, 1) var(--d, 0s) forwards;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim { animation: none; opacity: 1; transform: none; }
}

/* ---- Schmale Viewports (bis 320 px) --------------------------------------- */
@media (max-width: 479px) {
  .subline__part { display: block; }
  .subline__part + .subline__part::before { content: none; }
  .subline__part + .subline__part { margin-top: .25rem; }
}