/* =====================================================================
   GF BASE — identisch für alle Kunden. Werte kommen aus client.css.
   Quelle: 04 Wissen/Design/gf-base CSS-Vorlage (Design Tokens und Utilities)
   ===================================================================== */

/* ---------- ELEMENT-STYLES (in .gf-scope, um Astra nicht global zu überschreiben) */
.gf-scope h1, .gf-scope h2, .gf-scope h3,
.gf-scope h4, .gf-scope h5, .gf-scope h6 {
  font-family: var(--font-base);
  color: var(--c-brand);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-s);
}
.gf-scope h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
.gf-scope h2 { font-size: var(--fs-h2); font-weight: var(--fw-semi); }
.gf-scope h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); }
.gf-scope h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); }
.gf-scope h5 { font-size: var(--fs-h5); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .04em; }
.gf-scope h6 { font-size: var(--fs-h6); font-weight: var(--fw-medium); color: var(--c-text-muted); }

.gf-scope p, .gf-scope li {
  font-family: var(--font-base);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
}
.gf-scope a       { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.gf-scope a:hover { color: var(--c-accent-dark); }

.gf-scope .eyebrow {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-accent);
  margin-bottom: var(--space-xs);
}

/* ---------- UTILITIES */
.text-brand  { color: var(--c-brand); }
.text-accent { color: var(--c-accent); }
.text-muted  { color: var(--c-text-muted); }
.bg-brand    { background: var(--c-brand);  color: #fff; }
.bg-accent   { background: var(--c-accent); color: #fff; }
.bg-soft     { background: var(--c-bg-soft); }
.bg-tile     { background: var(--c-bg-tile); }

.mt-s { margin-top: var(--space-s); }   .mt-m { margin-top: var(--space-m); }   .mt-l { margin-top: var(--space-l); }
.mb-s { margin-bottom: var(--space-s); }.mb-m { margin-bottom: var(--space-m); }.mb-l { margin-bottom: var(--space-l); }
.py-m { padding-block: var(--space-m); } .py-l { padding-block: var(--space-l); }
.p-m  { padding: var(--space-m); }        .p-l  { padding: var(--space-l); }

.container { max-width: var(--maxw-content); margin-inline: auto; padding-inline: var(--space-s); }
.center    { text-align: center; }
.stack-s > * + * { margin-top: var(--space-s); }
.stack-m > * + * { margin-top: var(--space-m); }

/* ---------- KOMPONENTEN */
.gf-btn {
  display: inline-block;
  font-family: var(--font-base);
  font-weight: var(--fw-medium);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);        /* 0 = eckig, GF-Prinzip */
  background: var(--c-accent);
  color: #fff;
  text-decoration: none;
  transition: background .2s ease;
}
.gf-btn:hover        { background: var(--c-accent-dark); color:#fff; }
.gf-btn--ghost       { background: transparent; color: var(--c-brand); box-shadow: inset 0 0 0 2px var(--c-brand); }
.gf-btn--ghost:hover { background: var(--c-brand); color:#fff; }

.gf-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: var(--space-m);
  box-shadow: var(--shadow-card);
}

.gf-note        { padding: var(--space-s) var(--space-m); border-left: 4px solid; }
.gf-note--info  { background: var(--c-bg-soft);  border-color: var(--c-brand); }
.gf-note--ok    { background: var(--c-ok-bg);    border-color: #16a34a; }
.gf-note--warn  { background: var(--c-warn-bg);  border-color: #d97706; }
.gf-note--danger{ background: var(--c-danger-bg);border-color: #dc2626; }