/* Rahmen der Gestaltung F fuer die Unterseiten (Bauvorschlag zwei Gestaltungen v2, Stufe 1; Terminal W).
   Geladen von rahmen/f-stil.inc nach style.css, vor f-unterseiten.css. Enthaelt:
   1. die Werte von Fassung F (wie site.css + refinement.css + f.css auf der Startseite, hell und dunkel),
   2. Kopf und Fuss im Aussehen der F-Startseite, mit eigenen Klassen (fr-...): site.css und style.css teilen sich
      31 Klassennamen (.site-header, .site-footer, .header-inner, .menu-toggle ...), darum hier keine davon.
   Der Kopf braucht site.js (Ids theme-toggle, menu-toggle, navigation; data-theme am Wurzelelement, Klasse menu-ready).
   Dunkelmodus: :root[data-theme=dark] wie auf der F-Startseite (theme.js setzt ihn vor dem ersten Zeichnen). */

:root{color-scheme:light;
  --paper:#fbf9f2;--surface:#ffffff;--ink:#1f3b30;--muted:#566a5d;--line:#dfe6d6;--soft:#e9f0e1;--accent:#2b6b5a;
  --accent-text:#ffffff;--peach:#f6e9dc;--peach-ink:#764626;--terra:#8a4220;--deep:#d3e3cf;--deep-text:#1f3b30;
  --f-bahn:#e6f0ed;--f-streifen:#c8764b;--f-punkt:#c8764b;
  --f-radius:20px;--f-radius-klein:12px;--f-schatten:0 10px 30px color-mix(in srgb,var(--ink) 7%,transparent);
  /* Namen, die Inline-Stile der hellen Seiten benutzen (funktionen, faq, hilfe): wie site.css */
  --primary:var(--accent);--border:var(--line);--text-muted:var(--muted);--text-head:var(--ink)}
:root[data-theme=dark]{color-scheme:dark;
  --paper:#14221c;--surface:#1b2c23;--ink:#edf0e5;--muted:#b5c3b5;--line:#3b4c3e;--soft:#203329;--accent:#aad3b4;
  --accent-text:#15291d;--peach:#302c23;--peach-ink:#ddbea0;--terra:#d9b18b;--deep:#0c1711;--deep-text:#eff4e9;
  --f-bahn:#16241d;--f-punkt:#f8ac8f;--f-schatten:0 10px 30px #0003}

html{scroll-padding-top:100px}

/* ---------- Kopf ---------- */
.fr-wrap{width:min(1160px,calc(100% - 80px));margin-inline:auto}
.fr-kopf{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line);font-family:'Outfit',sans-serif}
.fr-kopf-innen{min-height:82px;display:flex;gap:28px;align-items:center;position:relative}
.fr-marke{display:inline-flex;gap:9px;align-items:center;text-decoration:none;color:var(--ink);flex-shrink:0}
.fr-marke img{width:40px;height:40px}
:root[data-theme=dark] .fr-marke img{background:#fafaf6;border-radius:8px;padding:3px}
.fr-marke-wort{font:italic 700 25px/1 'Fraunces',Georgia,serif;letter-spacing:-.04em;color:#056a71}
/* Schriftzug Petrol wie das P-Zeichen (Logo-Entscheid 24.10.2026, logo/LIESMICH.md); im dunklen Modus bleibt das helle Akzentgruen lesbar */
:root[data-theme=dark] .fr-marke-wort{color:var(--accent)}
.fr-marke-punkt{display:inline-block;width:.15em;height:.15em;margin-left:.05em;border-radius:50%;background:var(--f-punkt);vertical-align:baseline}
.fr-nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.fr-nav a{font-size:.86rem;text-decoration:none;white-space:nowrap;padding-block:14px;color:var(--ink)}
.fr-nav a:hover{color:var(--accent)}
.fr-nav a[aria-current=page]{color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}
.fr-aktionen{display:flex;gap:16px;align-items:center}
.fr-schalter{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--ink);
  flex-shrink:0;cursor:pointer;padding:0}
.fr-schalter svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5}
.fr-schalter .sun{display:none}
:root[data-theme=dark] .fr-schalter .moon{display:none}
:root[data-theme=dark] .fr-schalter .sun{display:block}
.fr-knopf{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:42px;padding:9px 18px;border:1px solid var(--accent);border-radius:7px;
  background:var(--accent);color:var(--accent-text);text-decoration:none;font:500 .82rem/1.2 'Outfit',sans-serif}
.fr-knopf:hover{color:var(--accent-text);filter:brightness(1.06)}
.fr-menue{display:none;border:0;background:transparent;color:var(--ink);min-height:44px;padding:5px;font:.86rem 'Outfit',sans-serif;cursor:pointer}
.fr-kopf a:focus-visible,.fr-kopf button:focus-visible,.fr-fuss a:focus-visible{outline:3px solid var(--terra);outline-offset:4px}

/* ---------- Fuss ---------- */
.fr-fuss{background:var(--soft);border-top:1px solid var(--line);padding:60px 0 25px;color:var(--ink);font-family:'Outfit',sans-serif}
.fr-fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.fr-fuss-raster>div>p{font-size:.88rem;line-height:1.6;color:var(--muted);margin:22px 0 14px}
.fr-fuss-raster>div>a:not(.fr-marke){font-size:.87rem;color:var(--ink)}
.fr-fuss nav{display:flex;flex-direction:column;align-items:start;gap:10px}
.fr-fuss nav h2{font:500 .9rem 'Outfit',sans-serif;margin:0 0 12px;letter-spacing:0;color:var(--ink)}
.fr-fuss nav a{font-size:.83rem;text-decoration:none;color:var(--muted)}
.fr-fuss nav a:hover{color:var(--accent);text-decoration:underline}
.fr-fuss-unten{border-top:1px solid var(--line);margin-top:45px;padding-top:22px;display:flex;justify-content:space-between;gap:20px;font-size:.76rem;color:var(--muted)}
.fr-fuss-unten a{color:inherit}

@media (max-width:1050px){
  .fr-wrap{width:calc(100% - 52px)}
  .fr-nav{gap:17px}
  .fr-aktionen>.fr-knopf{display:none}
  .fr-fuss-raster{gap:25px}
}
@media (max-width:900px){
  .fr-kopf-innen{min-height:74px;justify-content:space-between;flex-wrap:wrap}
  .fr-nav{order:3;width:100%;margin:0;display:flex;flex-wrap:wrap;gap:10px 25px;padding-bottom:18px}
  /* width:auto, sonst gewinnt width:100% gegen left/right und die Flaeche endet vor dem rechten Rand */
  .menu-ready .fr-nav{display:none;position:absolute;top:100%;left:-26px;right:-26px;width:auto;background:var(--surface);border-bottom:1px solid var(--line);padding:20px 26px}
  .menu-ready .fr-nav.open{display:grid;grid-template-columns:1fr 1fr}
  .fr-nav a{padding:10px 0}
  .menu-ready .fr-menue{display:block}
  .fr-fuss-raster{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:600px){
  .fr-wrap{width:calc(100% - 36px)}
  .fr-kopf-innen{min-height:73px;gap:8px}
  .fr-marke img{width:34px;height:34px}
  .fr-marke-wort{font-size:24px}
  .fr-aktionen{gap:10px}
  .menu-ready .fr-nav{left:-18px;right:-18px;padding:18px}
  .fr-fuss{padding-top:40px}
  .fr-fuss-raster{gap:32px 18px}
  .fr-fuss-raster>div:first-child{grid-column:1/-1}
  .fr-fuss nav a{font-size:.82rem}
  .fr-fuss-unten{flex-direction:column;gap:8px}
}
@media print{.fr-kopf,.fr-fuss{display:none!important}}