/* gastroworx.de – schlichte Website im Gastroworx-Stil (#184). Schrift vom eigenen Server, keine Cookies, kein Tracking. */
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 400; font-display: swap; src: url('fonts/barlow-semi-condensed-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 700; font-display: swap; src: url('fonts/barlow-semi-condensed-latin-700-normal.woff2') format('woff2'); }

:root {
    --grund: #f4f1ea; --flaeche: #ffffff; --text: #222427; --leise: #5f636b; --linie: #e2ddd2; --gold: #e2b23f; --gold-text: #8a6514; --kopf: #222427;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root { --grund: #222427; --flaeche: #2d2f34; --text: #f3ece0; --leise: #b1b5bc; --linie: #40434a; --gold: #f0c04f; --gold-text: #f0c04f; --kopf: #1a1c1f; color-scheme: dark; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font: 18px/1.6 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--gold-text); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.kopf { background: var(--kopf); color: #fff; }
.kopf .innen, main, .fuss .innen { max-width: 860px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.kopf .innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.marke { font-size: 24px; font-weight: 700; letter-spacing: .04em; text-decoration: none; color: #fff; }
.marke span { color: var(--gold); }
.kopf nav a { color: #fff; opacity: .85; text-decoration: none; margin-left: 18px; }
.kopf nav a:hover { opacity: 1; color: var(--gold); }

main { padding-block: 48px 64px; }
h1 { font-size: clamp(34px, 6vw, 52px); line-height: 1.05; margin: 0 0 16px; text-wrap: balance; }
h2 { font-size: 26px; line-height: 1.2; margin: 40px 0 10px; }
h3 { font-size: 21px; line-height: 1.25; margin: 30px 0 6px; text-wrap: balance; }
p, li { max-width: 68ch; }
.unterzeile { font-size: 22px; color: var(--leise); margin: 0 0 32px; max-width: 40ch; }
.band { display: inline-block; background: repeating-linear-gradient(-45deg, #f0c04f 0 14px, #e2ae35 14px 28px); color: #222427; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; padding: 4px 12px; border-radius: 6px; margin-bottom: 20px; }
.punkte { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding: 0; list-style: none; margin: 0 0 36px; }
.punkte li { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 16px 18px; }
.punkte strong { display: block; font-size: 20px; }
.kontakt { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 18px 20px; }
.text { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 8px 24px 24px; }
.text ul { padding-left: 22px; }
.stand { color: var(--leise); }

.fuss { border-top: 1px solid var(--linie); color: var(--leise); font-size: 16px; }
.fuss .innen { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-block: 22px calc(22px + env(safe-area-inset-bottom)); }
.fuss .innen span { margin-right: auto; }

@media (max-width: 520px) {
    body { font-size: 17px; }
    .kopf nav a { margin-left: 12px; }
    main { padding-block: 32px 48px; }
    .text { padding: 4px 16px 18px; }
}