/* ============================================================
   ABMAHN-CHECKER · V5 · LEGACY-BRIDGE  ⚠ TEMPORÄR ⚠
   ------------------------------------------------------------
   Zweck: Hält die ~20 noch NICHT umgebauten V4-Seiten-Templates
   funktional und HELL, bis sie in Phase 3–6 einzeln auf das neue
   System portiert sind. Mappt V4-Token-Namen + .ac-/.u-/.btn-*-
   Klassen auf die neuen hellen Tokens (tokens.css).

   ⚠ ABBAU: Pro umgebauter Seite die zugehörigen Selektoren prüfen;
   am Ende von Phase 6 (spätestens Phase 8 QA) GANZE DATEI löschen
   + <link> aus den 4 Layouts entfernen. Nicht erweitern, nur
   schrumpfen. Tracking: V5/GEPLANTE-AENDERUNGEN.md.

   Lädt NACH tokens/base/components/layout.css.
   Kollision --white/--black ist durch tokens.css-Entkopplung
   (--c-white/--c-black) ausgeschlossen.
   ============================================================ */

:root {
  /* ---- V4-Roh-Tokens → neue HELLE Semantik ---------------- */
  --black:        var(--bg);        /* V4: Seiten-BG dunkel → hell */
  --dark:         var(--bg-2);
  --border:       var(--rule-2);
  --border-light: var(--rule-3);

  --red-dim:      var(--red-ink);
  --red-glow:     var(--red-ring);
  --gold-strong:  var(--gold-ink);
  --gold-dim:     var(--gold-tint);

  --white:        var(--ink);       /* V4: hellster Text → dunkler Ink */
  --muted:        var(--ink-3);
  --muted-strong: var(--ink-4);
  --text:         var(--ink-2);

  --green:        var(--moss);
  --green-dim:    var(--moss-tint);
  --yellow:       var(--gold);
  --yellow-dim:   var(--gold-tint);

  --serif:        var(--font-sans); /* Redesign: keine Serif (§4) */
  --sans:         var(--font-sans);
  --mono:         var(--font-mono);
  --ease-signature: var(--ease);
  --ease-out-expo:  var(--ease);

  /* V4-Legacy-Aliase (Result/Analyzing) */
  --surface:      var(--card);
  --surface2:     var(--card-2);
  --accent:       var(--red);
  --accent-hover: var(--red-ink);
  --accent-glow:  var(--red-ring);
  --text-dim:     var(--ink-3);
  --text-mid:     var(--ink-3);

  /* GEO-Check-Seiten (eigene Page-Styles; sichere Fallbacks) */
  --geo-accent:   var(--red);
  --geo-muted:    var(--ink-3);

  /* ---- V4.1 Semantic Layer → neu ------------------------- */
  --color-surface-bg:        var(--bg);
  --color-surface-secondary: var(--bg-2);
  --color-surface-card:      var(--card);
  --color-surface-elevated:  var(--card-2);
  --color-border:            var(--rule-2);
  --color-border-strong:     var(--rule-3);
  --color-text-primary:      var(--ink);
  --color-text-default:      var(--ink-2);
  --color-text-secondary:    var(--ink-3);
  --color-text-muted:        var(--ink-4);
  --color-intent-primary:    var(--red);
  --color-intent-accent:     var(--gold);
  --color-intent-success:    var(--moss);
  --color-intent-warning:    var(--gold);

  accent-color: var(--red);
}

/* Hinweis: --bg, --card, --red, --gold NICHT neu definiert —
   die neuen Werte (Stein/Weiß/Brand) sind im Hell-Theme bereits
   korrekt für Alt-Seiten. */

/* ---- V4.1 Utility-Klassen (Definition wandert aus main.phtml
        hierher; Farben kommen aus den remappten Tokens) ----- */
.u-text-primary   { color: var(--color-text-primary); }
.u-text-default   { color: var(--color-text-default); }
.u-text-secondary { color: var(--color-text-secondary); }
.u-text-muted     { color: var(--color-text-muted); }
.u-text-accent    { color: var(--color-intent-accent); }
.u-text-brand     { color: var(--color-intent-primary); }
.u-text-success   { color: var(--color-intent-success); }
.u-text-warning   { color: var(--color-intent-warning); }
.u-text-error     { color: var(--red-ink); }
.u-text-bfsg      { color: var(--indigo); }
.u-text-on-dark   { color: #fff; }

.u-bg-surface     { background: var(--color-surface-bg); }
.u-bg-secondary   { background: var(--color-surface-secondary); }
.u-bg-card        { background: var(--color-surface-card); }
.u-bg-elevated    { background: var(--color-surface-elevated); }
.u-bg-accent-dim  { background: var(--gold-tint); }
.u-bg-success-dim { background: var(--moss-tint); }
.u-bg-brand-dim   { background: var(--red-tint); }

.u-border         { border: 1px solid var(--color-border); }
.u-border-strong  { border: 1px solid var(--color-border-strong); }
.u-border-accent  { border: 1px solid rgba(198,138,18,0.30); }
.u-border-success { border: 1px solid rgba(39,122,74,0.25); }

.u-text-xs { font-size: 0.88rem; }
.u-text-sm { font-size: 0.94rem; }
.u-text-md { font-size: 1rem; }
.u-text-lg { font-size: 1.125rem; }
.u-font-mono { font-family: var(--font-mono); letter-spacing: 0.04em; }
.u-tracking-caps { text-transform: uppercase; letter-spacing: 0.1em; }

.u-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.u-dot-critical { background: var(--red); }
.u-dot-high     { background: var(--gold); }
.u-dot-medium   { background: var(--gold-ink); }
.u-dot-low      { background: var(--moss); }
.u-dot-info     { background: var(--ink-4); }

/* ---- V4-Sekundär-Buttons ------------------------------------ */
.btn-gold {
  background: var(--gold); color: #fff; border: none; border-radius: var(--r-3);
  padding: 12px 24px; font-weight: 700; cursor: pointer; text-decoration: none;
  display: inline-block; transition: background var(--t-fast) var(--ease);
}
.btn-gold:hover { background: var(--gold-ink); }
.btn-bfsg {
  background: var(--indigo); color: #fff; border: none; border-radius: var(--r-3);
  padding: 12px 24px; font-weight: 700; cursor: pointer; text-decoration: none;
  display: inline-block; transition: filter var(--t-fast) var(--ease);
}
.btn-bfsg:hover { filter: brightness(1.08); }
.btn-success {
  background: var(--moss); color: #fff; border: none; border-radius: var(--r-3);
  padding: 12px 24px; font-weight: 700; cursor: pointer; text-decoration: none;
  display: inline-block; transition: filter var(--t-fast) var(--ease);
}
.btn-success:hover { filter: brightness(1.06); }

/* ---- V4-Content-Page-Utilities (aus main.phtml portiert,
        Farben jetzt aus remappten Tokens = hell) ------------- */
.ac-container    { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.ac-container-sm { max-width: 780px; margin: 0 auto; padding: 0 24px; }
.ac-page         { padding: 64px 0; }
.ac-card {
  background: var(--card); border: 1px solid var(--rule-1);
  border-radius: var(--r-4); padding: 24px;
}
.ac-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ac-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 768px) {
  .ac-grid-2, .ac-grid-3 { grid-template-columns: 1fr; }
}

.ac-content h1 { font-family: var(--font-sans); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; color: var(--ink); }
.ac-content h2 { font-family: var(--font-sans); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.015em; margin: 32px 0 12px; color: var(--ink); }
.ac-content h3 { font-size: 1.1rem; font-weight: 600; margin: 24px 0 8px; color: var(--ink); }
.ac-content p  { color: var(--ink-2); font-size: 17px; line-height: 1.7; margin-bottom: 16px; max-width: 68ch; }
.ac-content a  { color: var(--red); transition: opacity 0.2s var(--ease); }
.ac-content a:hover { opacity: 0.8; }
.ac-content ul, .ac-content ol { color: var(--ink-2); font-size: 17px; margin: 0 0 16px 20px; }
.ac-content ul { list-style: disc; }
.ac-content ol { list-style: decimal; }
.ac-content li { margin-bottom: 6px; line-height: 1.6; }
.ac-content strong { color: var(--ink); font-weight: 600; }
.ac-content code { font-family: var(--font-mono); background: var(--card-2); padding: 2px 6px; border-radius: var(--r-2); font-size: 0.9em; }
.ac-content table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.ac-content th { text-align: left; font-size: 12px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-4); padding: 8px 12px; border-bottom: 1px solid var(--rule-2); }
.ac-content td { padding: 10px 12px; border-bottom: 1px solid var(--rule-1); color: var(--ink-2); font-size: 16px; }