/* ==========================================================================
   ERZEUGT von tools/wissen_rahmen.php aus templates/frischfuettern/assets/css/site.css
   – nicht von Hand bearbeiten. Header und Footer wie auf der Website.
   Eigene Anpassungen der Wissensdatenbank: frischfuettern.css
   ========================================================================== */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/poppins-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins-700-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/poppins-800-latin.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/caveat-700-latin.woff2') format('woff2'); }

:root {
  --gruen: #A4B70A;           /* Logo-Grün */
  --gruen-hover: #8E9F08;
  --gruen-dunkel: #636E06;      /* Links, Häkchen (dunkles Logo-Grün) */
  --gruen-hell: #EEF1DC;        /* Info, Auswahl */
  --gruen-hell-text: #4A5304;
  --gruen-auf-dunkel: #CFE70D;
  --bordeaux: #92141A;           /* Logo-Rot */
  --sand: #D9C9A0;
  --creme: #F7F1E1;             /* Seite */
  --creme-2: #F3EEDD;           /* Fläche 2 */
  --karte: #FFFDF6;
  --linie: #E4DCC3;
  --feld: #D9D0B4;
  --feld-bg: #FFFFFF;
  --text: #2B2A22;
  --text-2: #5C5A4E;
  --text-auf-dunkel: #D9D3BF;
  --dunkel: #2B2A22;            /* dunkle Sektion */
  --dunkel-linie: #45443A;
  --fehler: #B42318;
  --header-bg: rgba(255, 253, 246, 0.96);
  --schatten: 0 10px 30px rgba(43, 42, 34, 0.16);
  --btn-hell-bg: #FFFDF6;       /* Creme-Button auf grüner Fläche */
  --btn-hell-text: #2B2A22;

  --r-pill: 40px; --r-input: 12px; --r-btn: 14px; --r-kachel: 16px; --r-karte: 20px; --r-bild: 18px;

  --maxw: 1160px;
  --gutter: 24px;
  color-scheme: light;
}
[data-md-color-scheme="slate"] {
  --gruen-dunkel: #CFE70D;
  --gruen-hell: #2E3318;
  --gruen-hell-text: #D7E28A;
  --bordeaux: #E59A9B;
  --sand: #B8A87E;
  --creme: #1D1C17;
  --creme-2: #2A2922;
  --karte: #25241E;
  --linie: #3A392F;
  --feld: #55533F;
  --feld-bg: #1A1915;
  --text: #F2ECDA;
  --text-2: #BDB7A3;
  --dunkel: #12110E;
  --dunkel-linie: #3A392F;
  --fehler: #FF8A7E;
  --header-bg: rgba(29, 28, 23, 0.92);
  --schatten: 0 10px 30px rgba(0, 0, 0, 0.45);
  --btn-hell-bg: #1D1C17;
  --btn-hell-text: #F2ECDA;
  color-scheme: dark;
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
@media (max-width: 480px) { :root { --gutter: 16px; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 17px 28px; border-radius: var(--r-btn);
  font-size: 17px; font-weight: 700; line-height: 1.2; text-decoration: none; text-align: center;
  border: 1.5px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.btn--primary, .btn--pill { background: var(--gruen); color: #fff; }
.btn--primary:hover, .btn--pill:hover { background: var(--gruen-hover); color: #fff; }
.btn--outline { border-color: var(--text); color: var(--text); background: transparent; font-weight: 600; padding-inline: 24px; }
.btn--outline:hover { background: var(--gruen-hell); border-color: var(--gruen-dunkel); color: var(--gruen-hell-text); }
.btn--hell { background: var(--btn-hell-bg); color: var(--btn-hell-text); }
.btn--hell:hover { background: var(--gruen-hell); color: var(--gruen-hell-text); }
.btn--dunkel { background: var(--text); color: var(--creme); }
.btn--dunkel:hover { background: var(--gruen-dunkel); color: var(--creme); }
.btn--pill { border-radius: var(--r-pill); padding: 11px 20px; font-size: 15px; white-space: nowrap; }
.btn--klein { padding: 15px 20px; font-size: 16px; }
.btn--block { width: 100%; }
.btn-reihe { display: flex; gap: 12px; flex-wrap: wrap; }

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand__logo { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand__name { font-size: 20px; font-weight: 800; color: var(--gruen-dunkel); letter-spacing: -0.3px; white-space: nowrap; }
.brand__slogan { font-family: 'Caveat', cursive; font-size: 17px; color: var(--bordeaux); white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 22px; font-size: 15px; font-weight: 500; }
.nav__list { display: flex; align-items: center; gap: 22px; list-style: none; padding: 0; }
.nav__list a { color: var(--text); text-decoration: none; padding-block: 8px; white-space: nowrap; }
.nav__list a:hover { color: var(--gruen-dunkel); }
.nav__list a[aria-current="page"] { color: var(--gruen-dunkel); font-weight: 700; box-shadow: inset 0 -2px 0 var(--gruen); }
.nav__list .nav__extern { color: var(--text-2); font-size: 14px; }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--feld); background: var(--feld-bg); color: var(--text); align-items: center; justify-content: center; }

/* Ab 1100 px passt das ganze Menü in eine Zeile, darunter Burger-Menü */
@media (max-width: 1099px) {
  .nav { gap: 10px; }
  .nav__toggle { display: inline-flex; }
  .nav__list {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--karte); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
    padding: 8px var(--gutter) 18px; font-size: 17px;
    box-shadow: 0 16px 24px rgba(0, 0, 0, .08);
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .nav__list a { display: block; padding: 12px 0; }
  .nav__list a[aria-current="page"] { box-shadow: none; }
  .nav__list .nav__extern { font-size: 17px; }
  .nav.is-open .nav__list { display: flex; }
  /* Ohne JavaScript: Menü bleibt bedienbar */
  .no-js .nav__list { display: flex; position: static; flex-direction: row; flex-wrap: wrap; gap: 4px 16px; padding: 0; border: 0; box-shadow: none; background: none; font-size: 15px; }
  .no-js .site-header__bar { flex-wrap: wrap; }
  .no-js .nav__toggle { display: none; }
}
@media (max-width: 560px) {
  .brand__slogan { display: none; }
  .brand__name { font-size: 17px; }
  .brand__logo { width: 40px; height: 40px; }
  .site-header .btn--pill { padding: 10px 14px; font-size: 14px; }
}
/* Handys (z. B. iPhone 17 Pro, 402 px): nur das runde Logo, es enthält die Wortmarke bereits.
   So bleibt Platz für „Preis berechnen“ und das Menü. */
@media (max-width: 480px) { .brand__text { display: none; } }

.site-footer { background: #2B2A22; color: #D9D3BF; }
[data-md-color-scheme="slate"] .site-footer { background: #12110E; }
.site-footer a { color: #D9D3BF; text-decoration: none; }
.site-footer a:hover { color: #CFE70D; text-decoration: underline; }
.site-footer__grid { padding-block: 56px 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px; font-size: 15px; line-height: 1.7; }
.site-footer__marke { font-size: 19px; font-weight: 800; color: #CFE70D; margin-bottom: 8px; }
.site-footer__titel { font-size: 15px; font-weight: 700; color: #F7F1E1; margin-bottom: 8px; }
.site-footer__links { list-style: none; padding: 0; }
.site-footer__links a { display: inline-block; padding-block: 2px; }
.site-footer__copy { padding-block: 18px 28px; border-top: 1px solid #45443A; font-size: 13px; color: #A8A28C; }
.theme-switch { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.theme-switch__label { width: 100%; font-size: 13px; color: #A8A28C; }
.theme-switch button { border: 1px solid #5C5A4E; background: transparent; color: #D9D3BF; border-radius: var(--r-pill); padding: 6px 12px; font-size: 13px; min-height: 36px; }
.theme-switch button[aria-pressed="true"] { background: #CFE70D; border-color: #CFE70D; color: #2B2A22; font-weight: 700; }
.no-js .theme-switch { display: none; }

/* ---------- Einbettung in MkDocs Material ---------- */
.site-header, .site-footer { font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.6; color: var(--text); -webkit-font-smoothing: antialiased; }
.site-header *, .site-footer * { box-sizing: border-box; }
.site-header ul, .site-header p, .site-footer ul, .site-footer p, .site-footer h2, .site-footer address { margin: 0; }
.site-footer address { font-style: normal; }
.site-header a, .site-footer a { text-underline-offset: 3px; }
.site-header picture { display: contents; }
.site-header picture > source { display: none; }
/* Material hält seine eigene Leiste (Suche, Hell/Dunkel) oben fest – der Website-Header scrollt mit */
.site-header { position: relative; z-index: 5; }
.site-footer { color: #D9D3BF; }
.site-footer__hinweis { padding-block: 24px 0; font-size: 14px; line-height: 1.6; color: #A8A28C; }
.site-footer__copy { color: #A8A28C; }