/* gL.-Familie – gemeinsamer Baukasten
   Seiten: green-longevity.com · grezept.de · greset.de · grent.studio
   Schriften liegen lokal im Ordner schrift/ neben dieser Datei (keine Google-Fonts-Anfrage). */

@font-face { font-family: 'Playfair Display'; src: url('schrift/playfair-600.woff2') format('woff2'); font-weight: 500 600; font-display: swap; }
@font-face { font-family: 'Quattrocento';     src: url('schrift/quattrocento-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Quattrocento';     src: url('schrift/quattrocento-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --schrift-marke: 'Playfair Display', Georgia, serif;
  --schrift-text: 'Quattrocento', Georgia, serif;
  --schrift-ui: -apple-system, system-ui, sans-serif;
  --rundung: 16px;
  --pille: 999px;
  --linie: rgba(0,0,0,.08);
}

/* Farbsets – nur hier werden Farben festgelegt */
[data-seite="green"]   { --hintergrund:#1B241E; --text:#E8EDE3; --akzent:#A9BF95; --auf-akzent:#14201A; --linie:rgba(255,255,255,.1); }  /* Tanne · Moos: natürlich, nicht neon */
[data-seite="grezept"] {                        /* Salbei · Wald — die Farbwelt der Rezeptseite, vollständig */
  /* Grundrollen */
  --hintergrund:#eaf2ec; --text:#163d2c; --akzent:#2c6b49; --auf-akzent:#ecf5ee;
  --linie:rgba(24,67,44,.17); --text-leise:#526e5d;
  /* Flächen */
  --flaeche-1:#f1f7f1; --flaeche-2:#d1e2d5; --flaeche-3:#b4cebd;
  --flaeche-tiefer:#102f23; --flaeche-blog:#d5e4d9; --verlauf-hero:#d5e7d8;
  /* Akzentabstufungen in Überschriften und Knöpfen */
  --akzent-hell:#5c8f6c; --akzent-titel:#508363; --akzent-titel-2:#58846a; --akzent-tief:#235539;
  /* Bühnen der Scroll-Geschichte: hell, mittel, dunkel */
  --buehne-1:#d6e5d9; --buehne-2:#8eaf9b; --buehne-2-text:#274e39;
  --buehne-3-text:#e5f1e7; --buehne-3-leise:#b1cab9; --buehne-3-akzent:#a7cdb3;
  --buehne-3-knopf:#bedbc7; --buehne-3-knopf-hover:#d6eadb; --buehne-3-bildtext:#d5e9da;
  /* Karten der Kollektion; -4 und -8 sind die dunklen, Text darauf --karte-text */
  --karte-1:#cfdfd2; --karte-2:#deebe1; --karte-3:#b6cebb; --karte-4:#254e38;
  --karte-5:#9ebfa8; --karte-6:#c6d7c3; --karte-7:#d6e4d9; --karte-8:#3b674c;
  --karte-9:#b8d5c2; --karte-text:#e3efe5;
  /* Karten mit Foto */
  --foto-text:#eaf5ec; --foto-chip:#c7e2ce; --marke-flagge:#d9ecdd; --bildtext:#234b32;
  /* Bedienflächen, Rahmen, Zustände */
  --knopf-flaeche:#dceade; --knopf-flaeche-hover:#c9dfcf; --panel-flaeche:#e2eee4; --notiz-flaeche:#deebe0;
  --rahmen-dialog:#d0e1d4; --rahmen-feld:#cfe0d3; --rahmen-gestrichelt:#b9d2bf;
  --fokus:#6c9f7c; --platzhalter:#8aa694; --hinweis-flaeche:#f6e0d8; --hinweis-text:#7a3418;
  --fuss-text:#d7e9dc;
}
[data-seite="greset"]  { --hintergrund:#F7F3E8; --text:#412402; --akzent:#854F0B; --auf-akzent:#FAEEDA; }
[data-seite="grent"]   { --hintergrund:#F5F2E9; --text:#272821; --akzent:#272821; --auf-akzent:#F5F2E9; }

body {
  margin:0; background:var(--hintergrund); color:var(--text);
  font-family:var(--schrift-text); font-size:19px; line-height:1.65;
}
h1, h2, .wortmarke { font-family:var(--schrift-marke); font-weight:500; }
nav, button, input, select, textarea, .hotbar, .filter, .familie { font-family:var(--schrift-ui); }

/* Familienleiste */
.familie   { display:flex; justify-content:center; gap:16px; padding:8px 0;
             font-size:13px; border-bottom:1px solid var(--linie); }
.familie a { color:inherit; text-decoration:none; opacity:.7; }
.familie a.aktiv { color:var(--akzent); opacity:1; font-weight:500; }

/* Hotbar — schwebende Pille oben in der Mitte.
   Aufbau: Wortmarke · (bis zu zwei Punkte der Seite) · drei Striche · (Punkt) · Hauptknopf.
   Die drei Striche werden beim Klick zum Baumstumpf (Jahresringe) und zeigen alle Seiten
   der gL.-Familie plus die Abschnitte der aktuellen Seite. Script: gl-familie.js */
.hotbar {
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:50;
  display:flex; align-items:center; gap:2px; padding:5px; border-radius:var(--pille);
  background:color-mix(in srgb, var(--hintergrund) 72%, transparent);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--linie); font-family:var(--schrift-ui); font-size:.86rem; color:var(--text);
  max-width:calc(100vw - 24px);
}
.hotbar__marke { display:flex; align-items:baseline; padding:6px 14px; margin-right:4px;
                 text-decoration:none; line-height:1; border-right:1px solid var(--linie); color:inherit; }
/* Einheitlich auf allen Seiten: nur "gL." - Playfair 500, 1.4rem, Akzentfarbe. Kein Seitenname daneben. */
.hotbar__marke b { font-family:var(--schrift-marke); font-weight:500; font-size:1.4rem; letter-spacing:-.02em; color:var(--akzent); }
.hotbar__marke small { display:none; }
.hotbar a.hotbar__link, .hotbar button.hotbar__link {
  appearance:none; border:0; background:transparent; color:inherit; cursor:pointer; font:inherit; font-weight:500;
  padding:8px 14px; border-radius:var(--pille); text-decoration:none; white-space:nowrap; transition:background .25s; }
.hotbar a.hotbar__link:hover, .hotbar button.hotbar__link:hover { background:color-mix(in srgb, var(--hintergrund) 82%, var(--text)); }
.hotbar__link .bald { font-size:.62rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; opacity:.55; margin-left:6px; vertical-align:middle; }
.hotbar__cta { appearance:none; border:1px solid var(--akzent); cursor:pointer; font:inherit; font-weight:600; padding:8px 16px;
               border-radius:var(--pille); background:transparent; color:var(--akzent); text-decoration:none; white-space:nowrap; margin-left:4px;
               transition:background .25s, color .25s, transform .25s; }
.hotbar__cta:hover { background:var(--akzent); color:var(--auf-akzent); transform:translateY(-1px); }
/* drei Striche → Baumstumpf */
.hotbar__mehr { position:relative; }
.hotbar__streifen { appearance:none; border:0; background:transparent; color:inherit; cursor:pointer; width:42px; height:36px;
                    border-radius:var(--pille); display:grid; place-items:center; transition:background .25s; }
.hotbar__streifen:hover, .hotbar__mehr.offen .hotbar__streifen { background:color-mix(in srgb, var(--hintergrund) 82%, var(--text)); }
.hotbar__streifen svg { width:22px; height:22px; display:block; overflow:visible; }
.hotbar__streifen .ring { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hotbar__mehr.offen .hotbar__streifen .ring { stroke:var(--akzent); }
.hotbar__menue { position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-6px);
                 min-width:19rem; padding:8px; border-radius:var(--rundung);
                 background:color-mix(in srgb, var(--hintergrund) 94%, transparent);
                 backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--linie); color:var(--text);
                 opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; }
.hotbar__mehr.offen .hotbar__menue { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.hotbar__menue a, .hotbar__menue button { display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%;
                 appearance:none; border:0; background:transparent; color:inherit; cursor:pointer; text-align:left;
                 font:inherit; font-weight:500; padding:11px 14px; border-radius:12px; text-decoration:none; }
.hotbar__menue a:hover, .hotbar__menue button:hover { background:color-mix(in srgb, var(--hintergrund) 82%, var(--text)); }
.hotbar__menue a.aktiv { color:var(--akzent); font-weight:600; }
.hotbar__menue small { font-family:var(--schrift-ui); font-size:.68rem; opacity:.6; letter-spacing:.04em; }
.hotbar__menue .bald { font-size:.62rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; opacity:.55; }
.hotbar__menue .titel { font-family:var(--schrift-ui); font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; opacity:.55; padding:8px 14px 2px; }
.hotbar__menue .nur-mobil { display:none; }
.hotbar__menue hr { border:0; border-top:1px solid var(--linie); margin:6px 8px; }
@media (max-width:760px) {
  .hotbar { top:10px; padding:4px; }
  .hotbar__marke { padding:6px 12px; margin-right:2px; }
  .hotbar__marke b { font-size:1.3rem; }
  .hotbar > a.hotbar__link { display:none; }
  .hotbar__menue .nur-mobil { display:flex; }
  .hotbar__menue { min-width:14rem; }
  .hotbar__cta { padding:8px 14px; }
}

/* Buttons und Karten */
.button        { display:inline-block; border-radius:var(--pille); padding:10px 20px;
                 background:var(--akzent); color:var(--auf-akzent); border:0; text-decoration:none; }
.button.neben  { background:transparent; color:var(--akzent); border:1px solid var(--akzent); }
.karte         { border-radius:var(--rundung); border:1px solid var(--linie); padding:20px; }

/* Fußzeile */
.fusszeile { text-align:center; font-size:13px; padding:16px 0; border-top:1px solid var(--linie); }