/* POGY Design System — shared by index.html, impressum.html, datenschutz.html.
   Edit tokens here once; every page picks them up. */

@font-face{font-family:'SN Pro';font-style:normal;font-weight:300 900;font-display:swap;src:url("/fonts/sn-pro.woff2") format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url("/fonts/figtree.woff2") format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url("/fonts/geist-mono.woff2") format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url("/fonts/fredoka.woff2") format('woff2')}

:root{
  /* ── Brand five ───────────────────────────────────────────── */
  --pogy-olive:#A1AE37;
  --pogy-olive-bg:#E8EACD;
  --pogy-blue:#95B0C3;
  --pogy-brown:#4B3A00;
  --pogy-gold:#C7AA00;
  --pogy-violet:#5B045F;

  /* ── Olive ramp (500 = brand olive) ──────────────────────── */
  --olive-100:#E8EACD;--olive-200:#D7DBA7;--olive-300:#C5CC82;--olive-400:#B3BD5C;
  --olive-500:#A1AE37;--olive-600:#818B2C;--olive-700:#606822;--olive-800:#404517;--olive-900:#20220C;

  /* ── Sage ─────────────────────────────────────────────────── */
  --sage-100:#F2F3F1;--sage-200:#DDE2D9;--sage-300:#BDCCB3;--sage-400:#97B384;
  --sage-500:#719957;--sage-600:#577345;--sage-700:#425436;--sage-800:#2C3725;--sage-900:#191E15;
  --sage-label:#6F9655;

  /* ── Blau ─────────────────────────────────────────────────── */
  --blue-100:#F1F2F3;--blue-200:#D9DFE2;--blue-300:#B3C1CC;--blue-400:#84A0B3;
  --blue-500:#577E99;--blue-600:#456073;--blue-700:#364854;--blue-800:#252F37;--blue-900:#151A1E;
  --blue-brand:#95B0C3;
  --slate:#323B41;

  /* ── Braun ────────────────────────────────────────────────── */
  --brown-100:#EBE9E1;--brown-200:#D9D5C8;--brown-300:#B6AE96;--brown-400:#A49B7D;
  --brown-500:#928864;--brown-600:#80744B;--brown-700:#6F6132;--brown-800:#5D4D19;--brown-900:#4B3A00;

  /* ── Gold ─────────────────────────────────────────────────── */
  --gold-100:#F2ECC8;--gold-200:#E7DB96;--gold-300:#DDCB64;--gold-400:#D7C34B;
  --gold-500:#C7AA00;--gold-600:#B69B00;--gold-700:#847000;--gold-800:#4A4000;--gold-900:#272200;

  /* ── Terracotta ───────────────────────────────────────────── */
  --terracotta-100:#EFD5CC;--terracotta-200:#E3B8A5;--terracotta-300:#D69B7E;--terracotta-400:#CA7E57;
  --terracotta-500:#BE6130;--terracotta-600:#9E4E26;--terracotta-700:#7E3B1D;--terracotta-800:#5E2813;--terracotta-900:#3E1509;

  /* ── Violett ──────────────────────────────────────────────── */
  --violet-100:#F5EFF6;--violet-200:#ECCFED;--violet-300:#E596E8;--violet-400:#E24EE9;
  --violet-500:#DC0AE6;--violet-600:#A110A8;--violet-700:#731277;--violet-800:#49104B;--violet-900:#260B28;
  --violet-brand:#5B045F;

  /* ── Warme Neutrale ───────────────────────────────────────── */
  --beige-100:#FDFCFA;--beige-200:#FCFAF8;--beige-300:#FAF8F5;--beige-400:#F9F7F3;
  --beige-500:#F8F5F0;--beige-600:#CFCCC8;--beige-700:#A5A3A0;--beige-800:#7C7B78;
  --warm-sand:#E1DAD4;
  --warm-line:#E7D9C8;
  --ink:#37302A;
  --ink-deep:#20220C;

  --font-display:'SN Pro','Figtree',system-ui,sans-serif;
  --font-ui:'Figtree',system-ui,-apple-system,sans-serif;
  --font-mono:'Geist Mono','IBM Plex Mono',ui-monospace,monospace;

  --type-h1-size:32px; --type-h1-weight:800; --type-h1-lh:1.2;
  --type-h2-size:24px; --type-h2-weight:700; --type-h2-lh:1.2;
  --type-h3-size:20px; --type-h3-weight:600; --type-h3-lh:1.3;
  --type-body-size:16px; --type-body-lh:1.6;
  --type-body-sm-size:14px; --type-body-sm-lh:1.55;
  --type-caption-size:12px; --type-caption-lh:1.4;
  --type-label-size:11px; --type-label-weight:700; --type-label-ls:0.06em;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;

  --radius-md:16px;--radius-lg:20px;--radius-xl:24px;--radius-2xl:35px;--radius-pill:999px;

  --shadow-card:0 4px 16px rgba(55,48,42,.14);
  --shadow-raised:0 2px 8px rgba(55,48,42,.10);

  --dur-fast:120ms;--dur-base:200ms;
  --ease-standard:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);

  --surface-page:var(--olive-100);
  --surface-card:#FFFFFF;
  --text-body:var(--ink);
  --text-link:var(--sage-label);
  --text-link-hover:var(--violet-700);
  --border-card:var(--warm-line);
  --focus-ring:var(--pogy-violet);
}

*{box-sizing:border-box}
html,body{margin:0}
/* Component rules below set their own `display` (flex, etc.) on elements that
   are also toggled via the `hidden` attribute. Author CSS normally beats the
   UA stylesheet's `[hidden]{display:none}`, which would otherwise leave
   "hidden" modals/banners visible and intercepting clicks — this rule keeps
   `hidden` authoritative no matter what a component's own display rule says. */
[hidden]{display:none!important}
body{font-family:var(--font-ui);font-size:var(--type-body-size);line-height:var(--type-body-lh);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:var(--font-ui);color:var(--ink)}
h1{font-size:var(--type-h1-size);font-weight:var(--type-h1-weight);line-height:var(--type-h1-lh)}
h2{font-size:var(--type-h2-size);font-weight:var(--type-h2-weight);line-height:var(--type-h2-lh)}
h3{font-size:var(--type-h3-size);font-weight:var(--type-h3-weight);line-height:var(--type-h3-lh)}
p{margin:0 0 1em}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
img{max-width:100%}

/* ── Shared page chrome (header / nav / footer) ─────────────── */
.site-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-6);background:var(--surface-page)}
.site-header .logo img{height:32px;display:block}
.site-nav{display:flex;align-items:center;gap:var(--space-2)}
.site-nav a{display:inline-flex;align-items:center;padding:10px 16px;border-radius:var(--radius-pill);font-family:var(--font-ui);font-size:14px;font-weight:700;color:var(--ink-deep);background:var(--surface-card);box-shadow:var(--shadow-card);transition:background var(--dur-fast) var(--ease-standard)}
.site-nav a:hover{background:var(--olive-200);color:var(--ink-deep)}
.site-nav a.current{background:var(--olive-200)}

.pogy-footer{background:var(--pogy-brown);color:var(--warm-sand)}
.pogy-footer a{color:var(--warm-sand);text-decoration:none}
.pogy-footer a:hover{color:#FFFFFF}
.pogy-footer .footer-inner{max-width:1120px;margin:0 auto;padding:var(--space-12) var(--space-6) var(--space-8);box-sizing:border-box;display:flex;flex-wrap:wrap;gap:var(--space-10) var(--space-8);justify-content:space-between}
.pogy-footer .footer-col{display:flex;flex-direction:column;gap:10px;flex:1 1 0;min-width:180px}
.pogy-footer .footer-col:first-child{gap:var(--space-4);min-width:220px}
.pogy-footer .footer-heading{font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--olive-300)}
.pogy-footer address{font-style:normal;font-family:var(--font-ui);font-size:14px;line-height:1.6;color:var(--warm-sand)}
.pogy-footer .social-row{display:flex;gap:10px}
.pogy-footer .social-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-pill);background:rgba(255,255,255,.12);color:var(--warm-sand);transition:background .12s}
.pogy-footer .social-icon:hover{background:rgba(255,255,255,.22);color:#FFFFFF}
.pogy-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.14)}
.pogy-footer .footer-bottom-inner{max-width:1120px;margin:0 auto;padding:var(--space-4) var(--space-6);box-sizing:border-box}
.pogy-footer .footer-bottom-inner span{font-family:var(--font-ui);font-size:12px;color:var(--olive-300)}

/* ── Legal page layout (Impressum / Datenschutz) ─────────────── */
.legal-main{max-width:820px;margin:0 auto;padding:var(--space-10) var(--space-6) var(--space-16);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--space-8)}
.legal-main .legal-intro{display:flex;flex-direction:column;gap:var(--space-2)}
.legal-main .legal-intro p{margin:0;font-family:var(--font-ui);font-size:var(--type-body-sm-size);color:var(--brown-700)}
.legal-section{display:flex;flex-direction:column;gap:var(--space-3)}
.legal-section h2{font-family:var(--font-display);font-size:var(--type-h3-size);font-weight:var(--type-h3-weight);color:var(--brown-900)}
.legal-section p,.legal-section address{margin:0;font-family:var(--font-ui);font-size:var(--type-body-size);line-height:var(--type-body-lh);color:var(--brown-700)}
.cookie-settings-link{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;box-sizing:border-box;border:1.5px solid var(--border-card);border-radius:var(--radius-pill);color:var(--brown-900);font-family:var(--font-ui);font-size:14px;font-weight:700}