/* base.css — Layer: base (Grundtypografie, Layout-Gerüst, Fließtext).
 * Element-Defaults (body, Überschriften, Links) und seitenweite Bausteine:
 * Container/Grid, Sektionen, Seitenkopf/Breadcrumbs, .flow, Footer-Rahmen. */
@layer base {

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-4);
  hyphens: auto; /* Notumbrüche (reset: break-word) mit Trennstrich statt hart */
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--sp-4); }

a {
  color: var(--color-accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--color-accent); }

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: var(--ink-100);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
}

.type-meta {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Eyebrow — kleine Versal-Überzeile. Abweichungen (Farbe, Sperrung, Abstand)
 * trägt die begleitende Kontext-Klasse; Reihenfolge/Layer regeln den Vorrang. */
.frgs-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-3);
}


/* =====================================================
 * 3. LAYOUT — container, grid, sections, footer
 * ===================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Sticky Footer: main füllt die Resthöhe, Footer schließt am Viewport ab */
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--sp-8); }
}

.ds-grid { display: grid; gap: var(--sp-4); }
.ds-grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Feste Spaltenzahl statt auto-fit: sonst streckt sich eine einzelne
   (z. B. gefilterte) Karte über die volle Breite. */
.ds-grid-3 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .ds-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .ds-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.frgs-section {
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--color-border);
}

.frgs-section-eyebrow { font-weight: 500; }

.frgs-section-sub {
  color: var(--color-text-muted);
  margin-bottom: var(--sp-8);
  max-width: 60ch;
}

.frgs-footer {
  background: var(--ink-100);
  border-top: 1px solid var(--color-border);
  color: var(--ink-700);
  padding: var(--sp-8) 0;
  font-size: var(--fs-sm);
}
.frgs-footer p { margin: 0; }
.frgs-footer a { color: var(--ink-700); }
.frgs-footer a:hover { color: var(--frgs-red-dark); }


/* =====================================================
 * CTA row — shared by Trainingskonzept + Einstieg
 * ===================================================== */
.frgs-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-8) 0 0;
}


/* =====================================================
 * Bildunterschriften
 * ===================================================== */
.frgs-caption {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: var(--sp-3) 0 0;
}


/* =====================================================
 * Page banner — Rücksprung-Link + H1
 * Applied via .backlink (<nav>) und .frgs-page-header.
 * ===================================================== */
.backlink {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
}
.backlink a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.backlink a::before {
  content: "← ";
}
.backlink a:hover {
  color: var(--color-accent);
}

.frgs-page-header {
  padding: var(--sp-4) 0 var(--sp-6);
  margin: 0 0 var(--sp-6);
  border-bottom: 1px solid var(--color-border);
}
.frgs-page-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
}

/* ——— Additions for the Kirby build ——— */
.icon { display: inline-block; /* reset.css macht svg zum Block */
        width: 1em; height: 1em; stroke: currentColor; fill: none;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
        flex-shrink: 0; vertical-align: -0.125em; }

/* Weiterführende Links: Pfeil-Icon ohne unterstrichenes Leerzeichen */
.frgs-more { font-weight: 600; }
.frgs-more .icon,
.frgs-feature-cta .icon { margin-left: var(--sp-1); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { position: static; }

main {
  display: block;
  flex: 1 0 auto;
  padding-bottom: var(--sp-16);
}


/* =====================================================
 * Fließtext-Inhalte (.flow) — Rhythmus, Tabellen, Bilder
 * ===================================================== */

/* Abschnitte atmen lassen: Überschriften mit Vorlauf */
.flow > h2:not(:first-child) { margin-top: var(--sp-8); }
.flow > h3:not(:first-child) { margin-top: var(--sp-6); }

/* Inhaltstabellen (markdown-Blocks): Karte mit Hairline-Zeilen */
.flow table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: var(--sp-6) 0;
}
.flow th,
.flow td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
}
.flow thead th {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.flow tbody td { border-top: 1px solid var(--ink-100); }
.flow tbody tr:first-child td { border-top: 0; }

/* Bilder im Fließtext: gerahmt, Hochformate nicht raumgreifend */
.flow figure { margin: var(--sp-6) 0; }
.flow figure img,
.flow > img {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  max-height: 420px;
  width: auto;
  max-width: 100%;
  /* height:auto ist Pflicht, sobald das <img> width/height-Attribute trägt:
   * die wirken als Presentational Hints, sodass max-width:100% die Breite
   * schrumpft, die Höhe aber beim Attributwert bliebe (von max-height nur
   * gekappt) — das Bild würde vertikal gestreckt. Vor der Umstellung der
   * image-Blöcke auf image.php fiel das nicht auf, weil Kirbys Default-Snippet
   * keine Maße ausgab. */
  height: auto;
}

/* Inhalts-Lede — ungescopt, stammt aus dem Timeline-Kopf, ist aber
 * allgemeine Inhalts-Typografie (Timeline-Regeln liegen in blocks.css). */
.frgs-lede {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  max-width: 62ch;
  color: var(--ink-700);
}


/* =====================================================
 * Footer: dreispaltig
 * ===================================================== */

.frgs-footer-grid { display: grid; gap: var(--sp-8); }
@media (min-width: 768px) { .frgs-footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.frgs-footer-name { font-weight: 600; }
.frgs-footer-head {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.frgs-footer-links { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.frgs-footer-links li { margin-top: var(--sp-1); }
.frgs-footer-copy { font-size: var(--fs-xs); color: var(--color-text-muted); }

.frgs-footer-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
}
.frgs-footer-credit { font-size: var(--fs-xs); color: var(--color-text-muted); }
.frgs-footer-heart { color: var(--frgs-red); }

} /* Ende @layer base */