/* Hollerhof – Webseite. Schriften liegen lokal, keine externen Dienste. */
@font-face { font-family: "Grandstander"; font-weight: 800; font-display: swap; src: url("grandstander-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
:root {
  --bg1: #e9f5d6; --bg2: #c6e39a; --ink: #2a2f22; --ink-soft: #5d6652; --card: #fffdf7;
  --holler: #5a3470; --holler-dark: #3b1d4d; --gold: #f2c230; --line: rgba(42, 47, 34, .12);
  --f: "Grandstander", "Trebuchet MS", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg2); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: linear-gradient(180deg, var(--bg1), var(--bg2)); font: 17px/1.6 var(--body); }
a { color: var(--holler); }
a:focus-visible { outline: 3px solid var(--holler); outline-offset: 2px; }
.wrap { max-width: 860px; margin: 0 auto; padding-inline: 18px; padding-block: 28px 40px; }
header.top { display: flex; align-items: center; gap: 12px; }
header.top img { width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 3px 0 rgba(42, 47, 34, .2); }
header.top a { font: 800 24px/1 var(--f); color: var(--ink); text-decoration: none; }
header.top a.lang { margin-left: auto; font: 700 15px/1 var(--body); padding: 9px 13px; border-radius: 12px; background: var(--card); color: var(--ink); box-shadow: 0 3px 0 rgba(42, 47, 34, .12); }
.hero { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; margin-top: 28px; }
.hero h1 { font: 800 clamp(44px, 10vw, 68px)/1 var(--f); margin: 0 0 12px; color: #fff; -webkit-text-stroke: 4px var(--holler); paint-order: stroke fill; text-shadow: 0 5px 0 var(--holler-dark); }
.hero p { margin: 0 0 16px; font-size: 19px; max-width: 36ch; }
.badge { display: inline-flex; flex-direction: column; padding: 12px 18px; border-radius: 16px; background: var(--holler); color: #fff; font: 800 17px/1.2 var(--f); }
.badge small { font: 400 13px var(--body); opacity: .85; }
.shots { display: flex; gap: 12px; overflow-x: auto; padding: 6px 2px 14px; scroll-snap-type: x mandatory; }
.shots img { width: 200px; max-width: 60vw; height: auto; border-radius: 22px; box-shadow: 0 0 0 5px #fff, 0 10px 24px rgba(42, 47, 34, .2); scroll-snap-align: start; flex: none; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 28px; }
.features div { background: var(--card); border-radius: 18px; padding: 14px 16px; box-shadow: 0 3px 0 rgba(42, 47, 34, .12); min-width: 0; }
.features b { font: 800 18px var(--f); display: block; color: var(--holler); }
.doc { background: var(--card); border-radius: 22px; padding: 22px 20px 26px; margin-top: 22px; box-shadow: 0 4px 0 rgba(42, 47, 34, .12); }
.doc h1 { font: 800 clamp(25px, 7vw, 32px)/1.15 var(--f); margin: 0 0 6px; color: var(--holler); overflow-wrap: anywhere; hyphens: auto; }
.doc h2 { font: 800 21px/1.25 var(--f); margin: 26px 0 6px; }
.doc p, .doc li { max-width: 68ch; }
.doc .stand { color: var(--ink-soft); margin-top: 0; }
.doc .note { font-size: 15px; color: var(--ink-soft); }
address { font-style: normal; }
footer { margin-top: 32px; font-size: 15px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (min-width: 720px) { .hero { grid-template-columns: 1.1fr 1fr; } }