/* Gemeinsamer Rahmen aller Seiten: Schriften, Header, Tab-Leiste und Footer. Bewusst eigenständig, weil Rechts- und Rezeptseiten kein styles.css laden. */
/* optional statt swap: Die Schrift wechselt nie sichtbar, also springt auch kein Text. */
@font-face { font-family:"DM Sans"; src:url("/fonts/dm-sans.woff2") format("woff2"); font-weight:100 1000; font-style:normal; font-display:optional; }
@font-face { font-family:"Fraunces"; src:url("/fonts/fraunces.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:optional; }
@font-face { font-family:"Fraunces"; src:url("/fonts/fraunces-italic.woff2") format("woff2"); font-weight:100 900; font-style:italic; font-display:optional; }

:root {
  --chrome-h:72px;
  --chrome-gutter:40px;
  --chrome-tabs-h:calc(64px + env(safe-area-inset-bottom));
  --chrome-ink:#1c2b22;
  --chrome-muted:#566057;
  --chrome-cream:#f4f0e6;
  --chrome-paper:#fbfaf5;
  --chrome-green:#264f3b;
  --chrome-deep:#173d2b;
  --chrome-lime:#dce98e;
  --chrome-orange:#ee7b3a;
  --chrome-line:rgba(28,43,34,.13);
  --chrome-organic:50% 50% 44% 56% / 56% 43% 57% 44%;
}

body > main { min-height:calc(100dvh - var(--chrome-h)); }

.chrome-skip { position:fixed; z-index:100; top:12px; left:16px; padding:10px 14px; border-radius:10px; color:white; background:var(--chrome-green); font:700 14px/1.2 "DM Sans",Arial,sans-serif; transform:translateY(-200%); }
.chrome-skip:focus { transform:none; }

.topbar, .topbar *, .site-footer, .site-footer * { box-sizing:border-box; }
.topbar {
  position:sticky;
  z-index:40;
  top:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:20px;
  min-height:var(--chrome-h);
  padding-inline:max(var(--chrome-gutter),env(safe-area-inset-left),calc((100% - 1300px) / 2)) max(var(--chrome-gutter),env(safe-area-inset-right),calc((100% - 1300px) / 2));
  color:var(--chrome-ink);
  font-family:"DM Sans",Arial,sans-serif;
}
/* Die Unschärfe sitzt auf dem Pseudo-Element, sonst würde die fixierte Tab-Leiste am Header hängen. */
.topbar::before { content:""; position:absolute; z-index:-1; inset:0; background:rgba(244,240,230,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
@supports (animation-timeline:scroll()) {
  .topbar::before { animation:chrome-raise linear both; animation-timeline:scroll(root); animation-range:0 48px; }
  @keyframes chrome-raise { to { box-shadow:0 1px 0 var(--chrome-line),0 12px 28px rgba(28,43,34,.06); } }
}
@supports not (animation-timeline:scroll()) {
  .topbar::before { box-shadow:0 1px 0 var(--chrome-line); }
}

.brand { display:inline-flex; justify-self:start; align-items:center; gap:10px; color:var(--chrome-ink); text-decoration:none; font-size:20px; font-weight:700; letter-spacing:-.03em; }
.brand-mark { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:var(--chrome-organic); color:var(--chrome-cream); background:var(--chrome-green); font-family:"Fraunces",Georgia,serif; font-weight:600; letter-spacing:0; }
.dot { color:var(--chrome-orange); }

.topnav { display:flex; align-items:center; gap:2px; padding:4px; border:1px solid var(--chrome-line); border-radius:999px; background:rgba(251,250,245,.72); }
.topnav a { display:flex; align-items:center; min-height:34px; padding:0 14px; border-radius:999px; color:var(--chrome-muted); text-decoration:none; font-size:13px; font-weight:600; white-space:nowrap; transition:color .18s ease,background-color .18s ease; }
.topnav a:hover { color:var(--chrome-ink); background:rgba(28,43,34,.06); }
.topnav a[aria-current="page"] { color:white; background:var(--chrome-green); }
.nav-icon { display:none; width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nav-avatar { flex:none; display:inline-grid; place-items:center; width:22px; height:22px; margin:0 6px 0 -6px; border-radius:50%; color:white; background:var(--avatar,var(--chrome-orange)); font-size:9px; font-weight:700; }
.native-app [data-web-only] { display:none !important; }

.topbar-actions { display:flex; justify-self:end; align-items:center; gap:8px; min-width:0; }
.topbar-plus { display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border-radius:999px; color:var(--chrome-green); background:var(--chrome-lime); text-decoration:none; font-size:13px; font-weight:700; transition:transform .18s ease,background-color .18s ease; }
.topbar-plus:hover { background:#e6f09e; transform:translateY(-1px); }
.topbar-plus[aria-current="page"] { color:white; background:var(--chrome-green); }
.account-control { display:inline-block; min-width:92px; max-width:170px; min-height:40px; overflow:hidden; padding:0 16px; border:1px solid rgba(35,47,39,.18); border-radius:999px; color:#26362c; background:#fffaf0; text-align:center; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:700; line-height:38px; transition:transform .18s ease,border-color .18s ease,background-color .18s ease; }
.account-control:hover { border-color:var(--chrome-orange); background:white; transform:translateY(-1px); }
.topbar a:focus-visible, .site-footer a:focus-visible, .site-footer button:focus-visible { outline:3px solid rgba(238,123,58,.55); outline-offset:3px; }

.site-footer { position:relative; overflow:hidden; margin-top:clamp(40px,6vw,72px); border-radius:26px 26px 0 0; color:var(--chrome-paper); background:var(--chrome-deep); font-family:"DM Sans",Arial,sans-serif; font-size:14px; line-height:1.5; }
.site-footer::after { content:"A"; position:absolute; right:-70px; bottom:-150px; display:grid; place-items:center; width:440px; height:440px; border-radius:var(--chrome-organic); color:var(--chrome-deep); background:#1e4733; font:600 240px/1 "Fraunces",Georgia,serif; pointer-events:none; }
.footer-shell { position:relative; z-index:1; display:grid; grid-template-columns:minmax(240px,.8fr) minmax(0,2fr); gap:40px 64px; max-width:1300px; margin:0 auto; padding:64px max(var(--chrome-gutter),env(safe-area-inset-right)) 28px max(var(--chrome-gutter),env(safe-area-inset-left)); }
.footer-brand { display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-size:20px; font-weight:700; letter-spacing:-.03em; }
.footer-brand .brand-mark { color:var(--chrome-green); background:var(--chrome-lime); }
.footer-claim { max-width:13em; margin:20px 0 22px; font:600 clamp(26px,2.6vw,34px)/1.1 "Fraunces",Georgia,serif; letter-spacing:-.02em; text-wrap:balance; }
.footer-cta { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:12px; color:var(--chrome-green); background:var(--chrome-lime); text-decoration:none; font-weight:700; transition:transform .18s ease,background-color .18s ease; }
.footer-cta:hover { background:#e6f09e; transform:translateY(-1px); }
.footer-links { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:32px 24px; }
.footer-title { margin:0 0 12px; color:var(--chrome-lime); font-size:13px; font-weight:700; }
.footer-links ul { display:grid; gap:2px; margin:0; padding:0; list-style:none; }
.footer-links a, .footer-links button { display:inline-block; padding:5px 0; border:0; color:#d5e0d4; background:none; text-align:left; text-decoration:none; font:inherit; cursor:pointer; transition:color .18s ease; }
.footer-links a:hover, .footer-links button:hover { color:white; text-decoration:underline; text-underline-offset:3px; }
.footer-copyright { grid-column:1/-1; margin:0; padding-top:20px; border-top:1px solid rgba(251,250,245,.14); color:#b9cbbd; font-size:13px; }
.native-app .site-footer { display:none; }

@media (max-width:1100px) {
  :root { --chrome-gutter:24px; }
  .footer-shell { grid-template-columns:1fr; }
}

/* Unter 900px übernimmt die Tab-Leiste am unteren Rand die Hauptnavigation. */
@media (max-width:900px) {
  :root { --chrome-h:calc(58px + env(safe-area-inset-top)); --chrome-gutter:16px; }
  body:has(> .topbar) { padding-bottom:var(--chrome-tabs-h); }
  .topbar { grid-template-columns:minmax(0,1fr) auto; gap:10px; padding-top:env(safe-area-inset-top); }
  .brand { font-size:18px; }
  .brand-mark { width:34px; height:34px; }
  .topbar-plus, .account-control { min-height:36px; font-size:12px; }
  .topbar-plus { padding:0 12px; }
  .account-control { min-width:82px; max-width:116px; padding:0 12px; line-height:34px; }
  .topnav { position:fixed; z-index:60; inset:auto 0 0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:2px; height:var(--chrome-tabs-h); padding:5px max(6px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px,env(safe-area-inset-left)); border:0; border-top:1px solid var(--chrome-line); border-radius:0; background:rgba(251,250,245,.98); box-shadow:0 -10px 30px rgba(28,43,34,.08); }
  .topnav a { display:grid; justify-items:center; align-content:center; gap:3px; min-width:0; min-height:54px; padding:0 2px; border-radius:12px; font-size:10px; line-height:1.1; }
  .topnav a:hover { background:none; }
  .topnav a[aria-current="page"] { color:var(--chrome-green); background:#eef3d7; }
  .nav-icon { display:block; }
  .nav-avatar { width:21px; height:21px; margin:0; }
  .site-footer { border-radius:20px 20px 0 0; }
  .site-footer::after { right:-120px; bottom:auto; top:-110px; width:300px; height:300px; font-size:160px; }
  .footer-shell { padding-top:44px; padding-bottom:24px; }
}
@media (max-width:640px) {
  .footer-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:480px) {
  body > main :is(h1,h2,h3) { overflow-wrap:break-word; hyphens:auto; }
}
@media (max-width:360px) {
  .topnav a { font-size:9px; }
  .topbar-plus { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .topnav a, .topbar-plus, .account-control, .footer-cta, .footer-links a, .footer-links button { transition:none; }
}
@media print {
  .topbar, .site-footer, .chrome-skip { display:none !important; }
  body > main { min-height:0; }
}

/* Kennzeichnung von KI-Bildern. Der Rahmen um das Bild muss positioniert sein. */
.ai-image-frame { position:relative; display:block; }
.ai-image-label { position:absolute; z-index:1; left:8px; bottom:8px; padding:3px 7px; border-radius:999px; color:#fff; background:rgba(20,35,26,.8); font:700 10px/1.3 "DM Sans",Arial,sans-serif; pointer-events:none; }
.ai-image-label[hidden] { display:none; }
.ai-image-label.is-compact { left:4px; bottom:4px; padding:1px 5px; font-size:9px; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }