/* Garten-Papeterie — Basis: Reset, Papier, Schrift, Layout. Lädt nach tokens.css + fonts.css (keine @imports). */

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ff-header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ff-text);
  background-color: var(--ff-bg);
  background-image: var(--ff-grain);
  font-family: var(--ff-font-body);
  font-size: var(--ff-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 2px; }
a:hover { color: var(--ff-coral-deeper); }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* Browser-Oberflächen aus der Palette */
::selection { background: var(--ff-blush); color: var(--ff-ink); }
:root { accent-color: var(--ff-coral-deep); scrollbar-color: var(--ff-caramel) var(--ff-cream); }
input, textarea, select { caret-color: var(--ff-coral-deep); }
:focus-visible { outline: 3px solid var(--ff-focus); outline-offset: 3px; border-radius: 4px; }

/* Layout */
.ff-container { width: min(calc(100% - 2 * var(--ff-gutter)), var(--ff-container)); margin-inline: auto; }
.ff-container--narrow { max-width: var(--ff-container-narrow); }
.ff-section { padding-block: var(--ff-section); overflow-x: clip; /* Esel vor dem Einblenden dürfen kein seitliches Scrollen auslösen */ }
/* Sprungziele: der Inhalt landet 24px unter dem Header, nicht die Abschnittskante (sonst liegt der Abschnittsabstand als Leerraum davor) */
.ff-section[id] { scroll-margin-top: calc(8px - var(--ff-section)); }
.ff-center { text-align: center; }
.ff-grid { display: grid; gap: var(--ff-space-6); }
.ff-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

/* Abgesetzter Abschnitt: Sandpapier mit Holzkante, auf der Esel stehen können */
.ff-section--sand {
  background-color: var(--ff-sand); background-image: var(--ff-grain);
  border-bottom: 6px solid var(--ff-wood);
  box-shadow: inset 0 -9px 0 -6px var(--ff-sand-light);
}

/* Typografie: Serif für Titel, gesperrte Versalzeile als Zier, Script nur für Namen */
.ff-caps {
  font-family: var(--ff-font-display);
  font-weight: 600;
  font-size: var(--ff-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ff-track-caps);
  line-height: 1.3;
}
.ff-h2 {
  margin: 0;
  font-family: var(--ff-font-display);
  font-weight: 500;
  font-size: var(--ff-text-3xl);
  letter-spacing: 0;
  line-height: 1.08;
  color: var(--ff-ink);
}
.ff-h3 {
  margin: 0 0 var(--ff-space-1);
  font-family: var(--ff-font-display);
  font-weight: 600;
  font-size: var(--ff-text-xl);
  line-height: 1.15;
}
/* Allura: nur für Namen */
.ff-script { font-family: var(--ff-font-script); font-weight: 400; letter-spacing: 0; text-transform: none; }
.ff-lead { max-width: 58ch; color: var(--ff-text-muted); font-size: var(--ff-text-lg); line-height: 1.55; }
.ff-muted { color: var(--ff-text-muted); }
.ff-small { font-size: var(--ff-text-sm); }
.ff-signature { margin: var(--ff-space-6) 0 0; font-family: var(--ff-font-script); font-size: 3.2rem; line-height: 1; color: var(--ff-brown); }

.ff-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ff-skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .6rem 1rem; border-radius: var(--ff-radius-sm);
  background: var(--ff-ink); color: var(--ff-paper); text-decoration: none;
}
.ff-skip:focus, .ff-skip:hover { top: 1rem; color: var(--ff-paper); }

@media (max-width: 800px) {
  .ff-split { grid-template-columns: 1fr; }
}