/*
 * Feuer & Glas – Design-System für bratapfel-punsch.de
 * Alle Regeln hängen an der Wurzelklasse .fg (Seiten-Snippets) bzw. .fg-b2b (Bestellformular),
 * damit Theme und Elementor nicht beeinflusst werden.
 * Layout: dunkles Kopfband mit Glut-Akzent und Reißkante wie auf der Dose, darunter helle
 * Papierflächen mit Karten, Rezeptblöcken und Tabellen.
 */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
.fg, .fg-b2b, body.fgk-shop {
  --fg-ink: #2a1711;
  --fg-ink-2: #5a4336;
  --fg-cream: #f7eedb;
  --fg-paper: #efe2c4;
  --fg-card: #fffaf1;
  --fg-line: #d9c7a3;
  --fg-field: #8f7259;
  --fg-red: #a3211b;
  --fg-red-dark: #7f1813;
  --fg-ember: #e39a3b;
  --fg-dark: #26140f;
  --fg-dark-2: #3a2018;
  --fg-on-dark: #f6ead2;
  --fg-on-dark-2: #dcc8a8;
  --fg-ok: #2f6b3a;
  --fg-ok-bg: #e3f0dc;
  --fg-warn: #7a4b0c;
  --fg-warn-bg: #fbefd5;
  --fg-err: #a3211b;
  --fg-err-bg: #f8e1dc;
  --fg-todo: #ffe58a;
  --fg-font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --fg-font-body: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;
  --fg-radius: 14px;
  --fg-wrap: 1180px;
  --fg-gutter: max(16px, env(safe-area-inset-left, 0px));
  --fg-gutter-r: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- Basis ---------- */
.fg {
  background: var(--fg-cream);
  color: var(--fg-ink);
  font-family: var(--fg-font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-size-adjust: from-font;
  /* Normalziffern: Cormorant setzt sonst Mediävalziffern („ı8o g“ statt „180 g“) */
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
.fg *, .fg *::before, .fg *::after { box-sizing: border-box; }
.fg :where(h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote) { margin: 0; }
.fg :where(h1, h2) { font-family: var(--fg-font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.005em; text-wrap: balance; color: inherit; }
.fg h1 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); }
.fg h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.fg :where(h3, h4) { font-family: var(--fg-font-body); font-weight: 700; line-height: 1.3; text-wrap: balance; color: inherit; }
.fg h3 { font-size: 1.3rem; }
.fg h4 { font-size: 1.1rem; }
.fg p, .fg li { text-wrap: pretty; }
.fg a { color: var(--fg-red); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.fg a:hover { color: var(--fg-red-dark); text-decoration-thickness: 2px; }
.fg :focus-visible { outline: 3px solid var(--fg-red); outline-offset: 3px; border-radius: 4px; }
.fg img { max-width: 100%; height: auto; }
.fg strong { font-weight: 700; }
.fg .fg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.fg-wrap { width: 100%; max-width: calc(var(--fg-wrap) + 64px); margin-inline: auto; padding-left: var(--fg-gutter); padding-right: var(--fg-gutter-r); }
@media (min-width: 720px) { .fg-wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
.fg-narrow { max-width: 46rem; }

.fg-section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.fg-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.fg-section--paper { background: var(--fg-paper); }
.fg-section--card { background: var(--fg-card); }
.fg-section--dark { background: var(--fg-dark); color: var(--fg-on-dark); }
.fg-section--dark a:not(.fg-btn), .fg-hero a:not(.fg-btn), .fg-cta a:not(.fg-btn) { color: var(--fg-ember); }
.fg-section--dark a:not(.fg-btn):hover, .fg-hero a:not(.fg-btn):hover, .fg-cta a:not(.fg-btn):hover { color: var(--fg-on-dark); }
.fg-section--dark :focus-visible, .fg-hero :focus-visible, .fg-cta :focus-visible, .fg-header :focus-visible, .fg-footer :focus-visible { outline-color: var(--fg-ember); }

.fg-stack { display: grid; gap: 1.1rem; }
.fg-stack--lg { gap: 1.75rem; }
.fg-head { display: grid; gap: 0.85rem; max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.fg-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.fg-eyebrow { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-red); }
.fg-section--dark .fg-eyebrow, .fg-hero .fg-eyebrow { color: var(--fg-ember); }
.fg-lead { font-size: clamp(1.15rem, 1.8vw, 1.3rem); line-height: 1.55; color: var(--fg-ink-2); max-width: 40rem; }
.fg-section--dark .fg-lead, .fg-hero .fg-lead { color: var(--fg-on-dark-2); }
.fg-muted { color: var(--fg-ink-2); }
.fg-small { font-size: 0.95rem; }

mark.fg-todo { background: var(--fg-todo); color: var(--fg-ink); padding: 0 0.25em; border-radius: 3px; font-weight: 700; }

/* ---------- Buttons ---------- */
.fg .fg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 48px; padding: 0.75rem 1.4rem; border-radius: 999px;
  border: 2px solid var(--fg-red); background: var(--fg-red); color: #ffffff;
  font: 700 1rem/1.2 var(--fg-font-body); text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.fg .fg-btn:hover { background: var(--fg-red-dark); border-color: var(--fg-red-dark); color: #ffffff; text-decoration: none; }
.fg .fg-btn--ghost { background: transparent; color: var(--fg-red); }
.fg .fg-btn--ghost:hover { background: var(--fg-red); color: #ffffff; }
.fg .fg-btn--ember { background: var(--fg-ember); border-color: var(--fg-ember); color: var(--fg-dark); }
.fg .fg-btn--ember:hover { background: var(--fg-on-dark); border-color: var(--fg-on-dark); color: var(--fg-dark); }
.fg .fg-btn--light { background: transparent; border-color: var(--fg-on-dark-2); color: var(--fg-on-dark); }
.fg .fg-btn--light:hover { background: var(--fg-on-dark); border-color: var(--fg-on-dark); color: var(--fg-dark); }
.fg .fg-btn svg { width: 1.1em; height: 1.1em; flex: none; }
.fg-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ---------- Kopf und Navigation ---------- */
.fg-header { background: var(--fg-dark); color: var(--fg-on-dark); border-bottom: 1px solid var(--fg-dark-2); }
.fg-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; padding-block: 0.6rem; }
.fg-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--fg-on-dark); text-decoration: none; font: 700 1.5rem/1 var(--fg-font-display); letter-spacing: 0.04em; font-variant: small-caps; }
.fg .fg-brand { color: var(--fg-on-dark); text-decoration: none; }
.fg .fg-brand:hover { color: var(--fg-ember); }
.fg-brand svg { width: 30px; height: 30px; color: var(--fg-ember); flex: none; }
.fg-brand small { display: block; font: 600 0.72rem/1.2 var(--fg-font-body); letter-spacing: 0.1em; text-transform: uppercase; font-variant: normal; color: var(--fg-on-dark-2); margin-top: 0.2rem; }
.fg-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; align-items: center; }
.fg .fg-nav a:not(.fg-btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 0.8rem; border-radius: 999px; color: var(--fg-on-dark); text-decoration: none; font-weight: 600; }
.fg .fg-nav a:not(.fg-btn):hover, .fg .fg-nav a[aria-current="page"] { background: var(--fg-dark-2); color: var(--fg-ember); }
.fg-nav--desktop { display: none; }
.fg-nav--mobile { position: relative; }
.fg-nav--mobile > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.4rem 0.9rem; border: 1px solid var(--fg-on-dark-2); border-radius: 999px; cursor: pointer; font-weight: 700; color: var(--fg-on-dark); }
.fg-nav--mobile > summary::-webkit-details-marker { display: none; }
.fg-nav--mobile > summary svg { width: 18px; height: 18px; }
.fg-nav--mobile ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; flex-direction: column; align-items: stretch; min-width: 15rem; padding: 0.5rem; background: var(--fg-dark); border: 1px solid var(--fg-dark-2); border-radius: var(--fg-radius); box-shadow: 0 16px 40px rgb(0 0 0 / 0.35); }
.fg-nav--mobile li a:not(.fg-btn) { width: 100%; }
.fg-nav--mobile li .fg-btn { width: 100%; margin-top: 0.35rem; }
@media (min-width: 900px) {
  .fg-nav--desktop { display: block; }
  .fg-nav--mobile { display: none; }
}

/* ---------- Brotkrumen ---------- */
.fg-breadcrumb { font-size: 0.95rem; }
.fg-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.fg-breadcrumb li { display: inline-flex; gap: 0.35rem; align-items: center; color: var(--fg-on-dark-2); }
.fg-breadcrumb li + li::before { content: "›"; color: var(--fg-on-dark-2); }
.fg .fg-breadcrumb a { color: var(--fg-on-dark); }
.fg-section--paper .fg-breadcrumb li, .fg-section--paper .fg-breadcrumb li + li::before { color: var(--fg-ink-2); }
.fg-section--paper .fg-breadcrumb a { color: var(--fg-red); }

/* ---------- Hero ---------- */
.fg-hero {
  position: relative; overflow: hidden; color: var(--fg-on-dark);
  background:
    radial-gradient(60rem 40rem at 78% 30%, rgb(227 154 59 / 0.22), transparent 60%),
    radial-gradient(40rem 30rem at 10% 90%, rgb(163 33 27 / 0.25), transparent 70%),
    var(--fg-dark);
}
.fg-hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); }
@media (min-width: 900px) { .fg-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.fg-hero__text { display: grid; gap: 1.35rem; min-width: 0; }
.fg-hero h1 { color: var(--fg-on-dark); }
.fg-hero h1 em { font-style: normal; color: var(--fg-ember); }
.fg-hero__price { font-size: 0.98rem; color: var(--fg-on-dark-2); }
.fg-hero__price strong { color: var(--fg-on-dark); font-size: 1.15rem; }
.fg-hero__media { position: relative; min-width: 0; }
.fg-hero__media .fg-media { box-shadow: 0 30px 60px rgb(0 0 0 / 0.45); }
.fg-hero__pack { position: absolute; left: -1.25rem; bottom: -1.5rem; width: clamp(8rem, 34%, 12rem); }
.fg-hero__pack .fg-media { border: 4px solid var(--fg-on-dark); background: var(--fg-paper); }
@media (max-width: 520px) { .fg-hero__pack { left: 0.5rem; } }
.fg-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fg-chips li { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem; border: 1px solid rgb(220 200 168 / 0.45); border-radius: 999px; font-size: 0.95rem; color: var(--fg-on-dark); }
.fg-chips svg { width: 1.05em; height: 1.05em; color: var(--fg-ember); flex: none; }

/* Elementor-Rahmen der Einrichtung: keine Abstände zwischen den Bausteinen einer Seite */
.fgk-seite { --kit-widget-spacing: 0px; }

/* Reißkante wie auf dem Etikett */
.fg-tear { display: block; line-height: 0; background: var(--fg-cream); }
.fg-tear svg { display: block; width: 100%; height: clamp(18px, 3vw, 34px); }
.fg-tear--to-paper { background: var(--fg-paper); }
.fg-tear--to-dark { background: var(--fg-dark); }
.fg-tear .fg-tear__top { fill: var(--fg-dark); }
.fg-tear .fg-tear__band { fill: var(--fg-red); }
.fg-tear--from-paper .fg-tear__top { fill: var(--fg-paper); }
.fg-tear--from-cream .fg-tear__top { fill: var(--fg-cream); }

/* ---------- Bilder ---------- */
.fg-media { position: relative; margin: 0; aspect-ratio: var(--ar, 3 / 2); border-radius: var(--fg-radius); overflow: hidden; background: var(--fg-dark-2); max-width: 100%; }
.fg-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Platzhalter, solange die Bilddatei noch fehlt (wird nur bei fehlendem Bild angezeigt) */
.fg-media img::after {
  content: "Bild folgt: " attr(data-datei);
  position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center;
  background: repeating-linear-gradient(135deg, #3a2018 0 14px, #43261c 14px 28px);
  color: #f6ead2; font: 600 0.95rem/1.4 "Source Sans 3", Arial, sans-serif;
}
/* Kennzeichnung KI-generierter Bilder (Transparenzpflicht nach Art. 50 KI-Verordnung) */
.fg-media__label { position: absolute; right: 0.6rem; bottom: 0.6rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: rgb(38 20 15 / 0.82); color: #f6ead2; font: 600 0.75rem/1.3 var(--fg-font-body); letter-spacing: 0.02em; pointer-events: none; }
.fg-figure { display: grid; gap: 0.6rem; margin: 0; }
.fg-figure figcaption { font-size: 0.9rem; color: var(--fg-ink-2); }
.fg-section--dark .fg-figure figcaption { color: var(--fg-on-dark-2); }

/* ---------- Zweispalter ---------- */
.fg-split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 880px) {
  .fg-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fg-split--media-first > :first-child { order: 2; }
}
.fg-split > * { min-width: 0; }

/* ---------- Schritte ---------- */
.fg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: fgstep; }
@media (min-width: 760px) { .fg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fg-steps > li { counter-increment: fgstep; display: grid; gap: 0.6rem; align-content: start; padding: 1.5rem; background: var(--fg-card); border: 1px solid var(--fg-line); border-radius: var(--fg-radius); }
.fg-steps > li::before { content: counter(fgstep); font: 700 2.6rem/1 var(--fg-font-display); font-variant-numeric: lining-nums; color: var(--fg-red); }
.fg-steps--4 { }
@media (min-width: 980px) { .fg-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Dosierung (drei Getränke) ---------- */
.fg-doses { display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .fg-doses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fg-dose { position: relative; display: grid; gap: 0.75rem; align-content: start; padding: 1.75rem 1.5rem 1.5rem; background: var(--fg-card); border: 1px solid var(--fg-line); border-radius: var(--fg-radius); }
.fg-dose__amount { font: 700 3rem/1 var(--fg-font-display); font-variant-numeric: lining-nums; color: var(--fg-red); }
.fg-dose__amount span { font: 700 1rem/1 var(--fg-font-body); color: var(--fg-ink-2); margin-left: 0.25rem; }
.fg-dose h3 { font-size: 1.25rem; }

/* ---------- Karten ---------- */
.fg-cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.fg-card { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--fg-card); border: 1px solid var(--fg-line); border-radius: var(--fg-radius); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.fg-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgb(42 23 17 / 0.14); }
.fg-card:focus-within { outline: 3px solid var(--fg-red); outline-offset: 3px; }
.fg-card .fg-media { border-radius: 0; aspect-ratio: 3 / 2; }
.fg-card__body { display: grid; gap: 0.5rem; align-content: start; padding: 1.2rem 1.3rem 1.4rem; }
.fg-card__meta { font-size: 0.9rem; color: var(--fg-ink-2); }
.fg-card h3 { font-size: 1.2rem; }
.fg .fg-card__link { color: var(--fg-ink); text-decoration: none; }
.fg .fg-card__link:hover { color: var(--fg-red); }
.fg .fg-card__link::after { content: ""; position: absolute; inset: 0; }
.fg .fg-card__link:focus-visible { outline: none; }

/* ---------- Rezept ---------- */
.fg-recipe { display: grid; gap: 2rem; }
@media (min-width: 900px) { .fg-recipe { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; } }
.fg-recipe__box { padding: 1.75rem; background: var(--fg-card); border: 1px solid var(--fg-line); border-radius: var(--fg-radius); display: grid; gap: 1.1rem; min-width: 0; }
.fg-recipe-meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin: 0; padding: 0; }
.fg-recipe-meta div { display: grid; gap: 0.1rem; }
.fg-recipe-meta dt { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-ink-2); }
.fg-recipe-meta dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.fg-ingredients { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.fg-ingredients li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: 0.6rem; align-items: baseline; }
.fg-ingredients li::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--fg-red); transform: translateY(-0.05rem); }
.fg-ingredients b { font-variant-numeric: tabular-nums; }
.fg-method { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; counter-reset: fgm; }
.fg-method li { counter-increment: fgm; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.85rem; align-items: start; }
.fg-method li::before { content: counter(fgm); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--fg-red); color: #ffffff; font: 700 1.05rem/1 var(--fg-font-body); }
.fg-method li strong { display: block; margin-bottom: 0.15rem; }

.fg-tip { padding: 1.25rem 1.4rem; border-left: 5px solid var(--fg-ember); background: var(--fg-card); border-radius: 0 var(--fg-radius) var(--fg-radius) 0; display: grid; gap: 0.45rem; }
.fg-tip h3 { font-size: 1.05rem; }
.fg-note { padding: 1rem 1.2rem; background: var(--fg-warn-bg); color: var(--fg-warn); border-radius: 10px; font-size: 0.98rem; }
.fg-note strong { color: var(--fg-warn); }

/* ---------- Tabellen ---------- */
.fg-table-wrap { overflow-x: auto; border: 1px solid var(--fg-line); border-radius: var(--fg-radius); background: var(--fg-card); }
.fg-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 32rem; }
.fg-table--compact { min-width: 0; }
.fg-table caption { text-align: left; padding: 1rem 1.1rem 0.25rem; font-weight: 700; }
.fg-table th, .fg-table td { padding: 0.75rem 1.1rem; text-align: left; border-bottom: 1px solid var(--fg-line); vertical-align: top; }
.fg-table thead th { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-ink-2); background: var(--fg-paper); }
.fg-table tbody tr:last-child > * { border-bottom: 0; }
.fg-table td.num, .fg-table th.num { text-align: right; }
.fg-table .sub th { padding-left: 2rem; font-weight: 400; font-style: italic; }

/* ---------- Häufige Fragen ---------- */
.fg-faq { display: grid; border-top: 1px solid var(--fg-line); }
@media (min-width: 880px) { .fg-faq-head { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 1.5rem); } }
.fg-faq details { border-bottom: 1px solid var(--fg-line); }
.fg-faq summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.15rem 0.25rem; cursor: pointer; font-weight: 700; font-size: 1.1rem; }
.fg-faq summary::-webkit-details-marker { display: none; }
.fg-faq summary::after { content: ""; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--fg-red); background: linear-gradient(var(--fg-red), var(--fg-red)) center / 0.7rem 2px no-repeat, linear-gradient(var(--fg-red), var(--fg-red)) center / 2px 0.7rem no-repeat; }
.fg-faq details[open] summary::after { background: linear-gradient(var(--fg-red), var(--fg-red)) center / 0.7rem 2px no-repeat; }
.fg-faq details > div { padding: 0 0.25rem 1.25rem; display: grid; gap: 0.6rem; color: var(--fg-ink); max-width: 46rem; }

/* ---------- Autor / Vertrauen ---------- */
.fg-author { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1.25rem 1.4rem; background: var(--fg-card); border: 1px solid var(--fg-line); border-radius: var(--fg-radius); }
.fg-author .fg-media { --ar: 1 / 1; border-radius: 50%; }
.fg-author p { font-size: 0.98rem; }
.fg-author__name { font-weight: 700; }
.fg-facts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); margin: 0; }
.fg-facts div { padding: 1.2rem 1.25rem; border-radius: var(--fg-radius); background: var(--fg-card); border: 1px solid var(--fg-line); display: grid; gap: 0.2rem; }
.fg-facts dt { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-ink-2); }
.fg-facts dd { margin: 0; font: 700 1.6rem/1.15 var(--fg-font-display); font-variant-numeric: lining-nums; color: var(--fg-ink); }
.fg-section--dark .fg-facts div { background: var(--fg-dark-2); border-color: transparent; }
.fg-section--dark .fg-facts dt { color: var(--fg-on-dark-2); }
.fg-section--dark .fg-facts dd { color: var(--fg-on-dark); }

/* ---------- Produkt-Hinweis (CTA) ---------- */
.fg-cta { display: grid; gap: 1.5rem; align-items: center; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: calc(var(--fg-radius) + 6px); background: var(--fg-dark); color: var(--fg-on-dark); }
@media (min-width: 760px) { .fg-cta { grid-template-columns: 11rem minmax(0, 1fr); } }
.fg-cta .fg-media { --ar: 1 / 1; background: var(--fg-paper); }
.fg-cta h2, .fg-cta h3 { color: var(--fg-on-dark); }
.fg-cta h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.fg-cta p { color: var(--fg-on-dark-2); }
.fg-cta__text { display: grid; gap: 0.75rem; min-width: 0; }

/* ---------- Liste mit Häkchen ---------- */
.fg-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.fg-checks li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.fg-checks li::before { content: ""; width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; border-radius: 50%; background: var(--fg-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.9rem no-repeat; }
.fg-section--dark .fg-checks li::before { background-color: var(--fg-ember); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%2326140f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---------- Fußzeile ---------- */
.fg-footer { background: var(--fg-dark); color: var(--fg-on-dark-2); padding-block: 3.5rem 2rem; font-size: 0.98rem; }
.fg-footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.fg-footer h2 { font: 700 0.85rem/1.3 var(--fg-font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-on-dark); margin-bottom: 0.9rem; }
.fg-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.fg .fg-footer a { color: var(--fg-on-dark); text-decoration: none; display: inline-block; padding-block: 0.25rem; }
.fg .fg-footer a:hover { color: var(--fg-ember); text-decoration: underline; }
.fg-footer address { font-style: normal; line-height: 1.7; }
.fg .fg-footer address a { display: inline; padding-block: 0; }
.fg-footer__bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--fg-dark-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; font-size: 0.9rem; }
.fg .fg-footer button.fg-linkbtn { background: none; border: 0; padding: 0.25rem 0; color: var(--fg-on-dark); font: inherit; cursor: pointer; text-decoration: none; min-height: auto; }
.fg .fg-footer button.fg-linkbtn:hover { color: var(--fg-ember); text-decoration: underline; }

/* ---------- Rechtstexte (Impressum, Datenschutz, AGB, Widerruf) ---------- */
.fg-hero--compact .fg-hero__grid { grid-template-columns: minmax(0, 1fr); padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 5vw, 4rem); }
.fg-hero--compact h1 { font-size: clamp(2.3rem, 4.5vw, 3.6rem); }
.fg-legal { max-width: 46rem; margin-inline: auto; overflow-wrap: anywhere; }
.fg-legal :where(h2) { font-family: var(--fg-font-display); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; margin: 2.25rem 0 0.75rem; }
.fg-legal :where(h2:first-child) { margin-top: 0; }
.fg-legal :where(h3, h4) { font-family: var(--fg-font-body); font-weight: 700; font-size: 1.15rem; line-height: 1.35; margin: 1.75rem 0 0.5rem; }
.fg-legal :where(p, ul, ol, table, .fg-table-wrap) { margin: 0 0 1rem; }
.fg-legal :where(ul, ol) { padding-left: 1.3rem; }
.fg-legal :where(li) { margin-bottom: 0.35rem; }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .fg *, .fg *::before, .fg *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .fg-card:hover { transform: none; }
}

/* =====================================================================
 * B2B-Bestellformular  [fg_b2b_bestellung]
 * ===================================================================== */
.fg-b2b { color: var(--fg-ink); font-family: var(--fg-font-body); font-size: 1.0625rem; line-height: 1.55; }
.fg-b2b *, .fg-b2b *::before, .fg-b2b *::after { box-sizing: border-box; }
.fg-b2b :where(h2, h3, p, ol, ul, fieldset, legend) { margin: 0; }
.fg-b2b__form { display: grid; gap: 1.5rem; }
.fg-b2b__progress { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; counter-reset: fgb; }
.fg-b2b__progress li { counter-increment: fgb; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.9rem 0.45rem 0.45rem; border-radius: 999px; background: var(--fg-card); border: 1px solid var(--fg-line); font-weight: 600; font-size: 0.95rem; color: var(--fg-ink-2); }
.fg-b2b__progress li::before { content: counter(fgb); display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--fg-paper); color: var(--fg-ink); font-weight: 700; font-size: 0.9rem; }
.fg-b2b__progress li[aria-current="step"] { border-color: var(--fg-red); color: var(--fg-ink); }
.fg-b2b__progress li[aria-current="step"]::before { background: var(--fg-red); color: #ffffff; }
.fg-b2b__progress li.is-done::before { content: "✓"; background: var(--fg-ok); color: #ffffff; }

.fg-b2b__step { display: grid; gap: 1.1rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--fg-line); border-radius: var(--fg-radius); background: var(--fg-card); min-width: 0; }
.fg-b2b__step > legend { float: left; width: 100%; padding: 0; margin-bottom: 0.25rem; font: 700 clamp(1.5rem, 2.4vw, 1.9rem)/1.15 var(--fg-font-display); font-variant-numeric: lining-nums; color: var(--fg-ink); }
.fg-b2b__step > legend + * { clear: both; }
.fg-b2b__intro { color: var(--fg-ink-2); max-width: 44rem; }
.fg-b2b__grid { display: grid; gap: 1rem 1.25rem; }
@media (min-width: 700px) { .fg-b2b__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fg-b2b__grid--plz { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); } }
.fg-b2b__grid > * { min-width: 0; }
.fg-b2b__span { grid-column: 1 / -1; }

.fg-field { display: grid; gap: 0.35rem; min-width: 0; }
.fg-field > label, .fg-label { font-weight: 700; font-size: 0.98rem; }
.fg-field .fg-req { color: var(--fg-red); font-weight: 700; }
.fg-b2b input[type="text"], .fg-b2b input[type="email"], .fg-b2b input[type="tel"], .fg-b2b input[type="date"], .fg-b2b input[type="number"], .fg-b2b select, .fg-b2b textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem; font: inherit; font-size: 1rem; color: var(--fg-ink);
  background: #ffffff; border: 1.5px solid var(--fg-field); border-radius: 10px; box-shadow: none;
}
.fg-b2b textarea { min-height: 7rem; resize: vertical; }
.fg-b2b ::placeholder { color: #6b5a4f; opacity: 1; }
.fg-b2b select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235a4336' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 1rem; padding-right: 2.5rem; }
.fg-b2b input:focus-visible, .fg-b2b select:focus-visible, .fg-b2b textarea:focus-visible { outline: 3px solid var(--fg-red); outline-offset: 2px; border-color: var(--fg-red); }
.fg-b2b input[readonly] { background: var(--fg-paper); }
.fg-b2b input:user-invalid, .fg-b2b select:user-invalid, .fg-b2b textarea:user-invalid, .fg-b2b [aria-invalid="true"] { border-color: var(--fg-err); background: var(--fg-err-bg); }
.fg-hint { font-size: 0.92rem; color: var(--fg-ink-2); }
.fg-error { font-size: 0.95rem; font-weight: 700; color: var(--fg-err); }
.fg-error:empty { display: none; }
.fg-b2b__vatrow { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.fg-b2b__vatrow + .fg-hint { margin-top: -0.6rem; }
.fg-b2b__vatrow .fg-field { flex: 1 1 16rem; }

.fg-b2b .fg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.75rem 1.4rem; border-radius: 999px; border: 2px solid var(--fg-red); background: var(--fg-red); color: #ffffff; font: 700 1rem/1.2 var(--fg-font-body); cursor: pointer; text-decoration: none; }
.fg-b2b .fg-btn:hover { background: var(--fg-red-dark); border-color: var(--fg-red-dark); color: #ffffff; }
.fg-b2b .fg-btn--ghost { background: transparent; color: var(--fg-red); }
.fg-b2b .fg-btn--ghost:hover { background: var(--fg-red); color: #ffffff; }
.fg-b2b .fg-btn[disabled], .fg-b2b .fg-btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.fg-b2b .fg-btn:focus-visible { outline: 3px solid var(--fg-red); outline-offset: 3px; }

.fg-status { display: grid; gap: 0.35rem; padding: 0.9rem 1.1rem; border-radius: 10px; font-size: 1rem; }
.fg-status:empty { display: none; }
.fg-status--ok { background: var(--fg-ok-bg); color: var(--fg-ok); }
.fg-status--warn { background: var(--fg-warn-bg); color: var(--fg-warn); }
.fg-status--err { background: var(--fg-err-bg); color: var(--fg-err); }
.fg-status strong { font-weight: 700; }
.fg-status small { font-size: 0.9rem; color: var(--fg-ink-2); }

.fg-b2b__products { display: grid; gap: 0.75rem; }
.fg-b2b__product { display: grid; gap: 0.75rem 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 1rem 1.1rem; border: 1px solid var(--fg-line); border-radius: 12px; background: #ffffff; }
@media (min-width: 640px) { .fg-b2b__product { grid-template-columns: minmax(0, 1fr) auto; } }
.fg-b2b__product h3 { font-size: 1.1rem; }
.fg-b2b__product p { font-size: 0.95rem; color: var(--fg-ink-2); }
.fg-b2b__price { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg-ink); }
.fg-qty { display: inline-flex; align-items: center; gap: 0.35rem; }
.fg-b2b .fg-qty button { width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; border: 1.5px solid var(--fg-field); background: var(--fg-card); color: var(--fg-ink); font: 700 1.35rem/1 var(--fg-font-body); cursor: pointer; }
.fg-b2b .fg-qty button:hover { border-color: var(--fg-red); color: var(--fg-red); background: var(--fg-card); }
.fg-b2b .fg-qty input { width: 5rem; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.fg-b2b .fg-qty input::-webkit-outer-spin-button, .fg-b2b .fg-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.fg-b2b__summary { margin: 0; display: grid; gap: 0; border: 1px solid var(--fg-line); border-radius: 12px; overflow: hidden; background: #ffffff; font-variant-numeric: tabular-nums; }
.fg-b2b__summary div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 1.1rem; border-bottom: 1px solid var(--fg-line); }
.fg-b2b__summary div:last-child { border-bottom: 0; background: var(--fg-paper); font-weight: 700; font-size: 1.1rem; }
.fg-b2b__summary dt, .fg-b2b__summary dd { margin: 0; }

.fg-check { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.6rem; align-items: start; cursor: pointer; }
.fg-check input { width: 1.3rem; height: 1.3rem; margin: 0.15rem 0 0; accent-color: var(--fg-red); }
.fg-b2b__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fg-b2b__errors { padding: 1rem 1.2rem; border: 2px solid var(--fg-err); border-radius: 12px; background: var(--fg-err-bg); color: var(--fg-err); display: grid; gap: 0.5rem; }
.fg-b2b__errors:empty { display: none; }
.fg-b2b__errors ul { margin: 0; padding-left: 1.2rem; }
.fg-b2b__errors a { color: var(--fg-err); font-weight: 700; }
.fg-b2b__done { padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--fg-radius); background: var(--fg-ok-bg); color: var(--fg-ink); display: grid; gap: 0.8rem; }
.fg-b2b__done h2 { font: 700 clamp(1.8rem, 3vw, 2.4rem)/1.1 var(--fg-font-display); font-variant-numeric: lining-nums; color: var(--fg-ok); }
.fg-b2b__done:focus { outline: 3px solid var(--fg-ok); outline-offset: 3px; }
.fg-b2b [hidden] { display: none !important; }