/* ============================================================
   Tante Herzi — Rechtsseiten (Impressum / Datenschutz / Jugendschutz)
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap");

:root{
  --cream:#E7E6B6;
  --paper:#EFEFCF;
  --ink:#1A1712;
  --green:#5E8A37;
  --green-deep:#3B5A24;
  --line:rgba(26,23,18,.14);
  --hair:rgba(26,23,18,.10);
  --text-dim:rgba(26,23,18,.62);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.mono{font-family:"Space Mono",ui-monospace,monospace;}
a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
a:hover{color:var(--green);}
img{display:block;max-width:100%;}

/* paper grain */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;mix-blend-mode:multiply;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.wrap{max-width:820px;margin:0 auto;padding:0 24px;position:relative;z-index:1;}

/* topbar */
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--cream) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);}
.topbar .inner{display:flex;align-items:center;gap:14px;height:74px;max-width:1100px;margin:0 auto;padding:0 24px;}
.brandlink{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);}
.brandlink img{width:48px;height:48px;border-radius:50%;}
.brandname{font-family:"Bricolage Grotesque";font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1;}
.brandsub{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin-top:3px;}
.back{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;white-space:nowrap;
  text-decoration:none;color:var(--ink);border:1.6px solid var(--line);border-radius:999px;padding:9px 16px;transition:.15s;}
.back:hover{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.back svg{width:16px;height:16px;}

/* page head */
.page-head{padding:54px 0 8px;}
.eyebrow{font-family:"Space Mono",monospace;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim);}
h1{font-family:"Bricolage Grotesque";font-weight:800;font-size:clamp(34px,6vw,58px);letter-spacing:-.03em;line-height:1.02;margin:14px 0 0;}
.page-head .lead{color:var(--text-dim);max-width:54ch;margin:16px 0 0;font-size:17px;}

/* content */
.content{padding:30px 0 20px;}
.content h2{font-family:"Bricolage Grotesque";font-weight:700;font-size:clamp(21px,3vw,27px);letter-spacing:-.02em;margin:38px 0 10px;line-height:1.1;}
.content h3{font-family:"Bricolage Grotesque";font-weight:700;font-size:18px;margin:22px 0 6px;}
.content p{margin:0 0 12px;text-wrap:pretty;}
.content ul{margin:0 0 14px;padding-left:22px;}
.content li{margin:5px 0;}
.content strong{font-weight:700;}
hr{border:none;border-top:1px solid var(--hair);margin:30px 0;}

/* address / data block */
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px 26px;margin:6px 0 8px;
  box-shadow:0 1px 0 rgba(255,255,255,.35), 0 18px 40px -26px rgba(26,23,18,.5);}
.dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 22px;font-size:16px;}
.dl dt{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);padding-top:3px;}
.dl dd{margin:0;font-weight:600;}
.addr{font-size:18px;font-weight:700;line-height:1.5;}

/* age tag */
.agetag{display:inline-flex;align-items:center;gap:9px;background:#B4503B;color:#fff;border-radius:999px;
  padding:7px 16px 7px 9px;font-weight:700;font-size:15px;margin:4px 0 8px;white-space:nowrap;}
.agetag .ring{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;
  font-family:"Bricolage Grotesque";font-weight:800;font-size:13px;box-shadow:0 0 0 2px rgba(255,255,255,.3) inset;}
.callout{background:color-mix(in srgb,#B4503B 10%, transparent);border:1px solid color-mix(in srgb,#B4503B 30%, transparent);
  border-radius:14px;padding:18px 20px;margin:14px 0;}
.callout p:last-child{margin-bottom:0;}

/* footer */
.foot{border-top:1px solid var(--hair);margin-top:46px;padding:32px 0 70px;}
.foot-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;}
.foot-links{display:flex;flex-wrap:wrap;gap:18px;}
.foot-links a{font-size:14px;font-weight:600;color:var(--ink);opacity:.78;text-decoration:none;}
.foot-links a:hover{opacity:1;}
.foot .copy{font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.04em;color:var(--text-dim);}

.updated{font-family:"Space Mono",monospace;font-size:12px;color:var(--text-dim);margin-top:26px;}

@media (max-width:560px){
  .wrap{padding:0 16px;}
  .topbar .inner{gap:10px;padding:0 16px;}
  .brandlink img{width:42px;height:42px;}
  .brandname{font-size:17px;}
  .topbar .brandsub{display:none;}
  .back{font-size:13px;padding:8px 13px;}
  .back svg{display:none;}
  .page-head{padding:40px 0 6px;}
  .dl{grid-template-columns:1fr;gap:2px;}
  .dl dt{padding-top:10px;}
  .card{padding:20px 18px;}
  .foot-row{flex-direction:column;align-items:flex-start;gap:12px;}
}