/* ============================================
   Renderfein — Basis-Komponenten v2
   „Lichtkante · Blaue Stunde" (Styleguide v2, Juni 2026)
   Komponenten nutzen NUR semantische Rollen (--rf-*) —
   dunkle Bereiche bekommen die Klasse .rf-nacht, sonst nichts.
   ============================================ */

.rf-body {
  font-family: var(--rf-font-ui);
  background: var(--rf-canvas);
  color: var(--rf-ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* --- Überschriften (Display: Archivo 640 · 118 %) --- */
.rf-h {
  font-family: var(--rf-font-display);
  font-weight: var(--rf-display-weight);
  font-stretch: var(--rf-display-stretch);
  letter-spacing: var(--rf-display-tracking);
  line-height: var(--rf-display-leading);
  color: var(--rf-ink);
  text-wrap: balance;
}

/* --- Kicker (Mono-Register) --- */
.rf-kicker {
  font-family: var(--rf-font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rf-accent-text);
}

/* --- Buttons (46 px · Radius 10 px · ein CTA pro Ansicht) --- */
.rf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--rf-font-ui);
  font-size: 15px;
  font-weight: 600;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--rf-radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: transform var(--rf-dur-hover) var(--rf-ease),
    background-color var(--rf-dur-hover) var(--rf-ease),
    border-color var(--rf-dur-hover) var(--rf-ease),
    color var(--rf-dur-hover) var(--rf-ease);
}
.rf-btn:active { transform: scale(.97); }

.rf-btn-cta { background: var(--rf-accent); color: var(--rfp-blaustunde); }
.rf-btn-cta::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  box-shadow: var(--rf-glow-cta); opacity: 0;
  transition: opacity var(--rf-dur-fill) var(--rf-ease); pointer-events: none;
}
.rf-btn-cta:hover { background: var(--rf-accent-hover); }
.rf-btn-cta:hover::after { opacity: 1; }

.rf-btn-ghost { background: transparent; border-color: #D3D6DA; color: var(--rf-ink); }
.rf-btn-ghost:hover { border-color: var(--rf-accent-text); color: var(--rf-accent-text); }
.rf-nacht .rf-btn-ghost { border-color: var(--rfp-stahl); color: var(--rfp-galerieweiss); }
.rf-nacht .rf-btn-ghost:hover { border-color: var(--rfp-bernstein); color: var(--rfp-goldstunde); }

/* v1-Kompatibilität (alte Klassennamen) */
.rf-btn-primary { background: var(--rf-ink); color: var(--rf-canvas); }
.rf-btn-primary:hover { background: #2A2E33; }
.rf-btn-secondary { background: var(--rf-surface); color: var(--rf-ink); border-color: var(--rf-line); }
.rf-btn-secondary:hover { border-color: var(--rf-accent-text); color: var(--rf-accent-text); }

/* --- Fokus (Bernstein schafft auf hell nur 2,5:1 → Token --rf-focus) --- */
:focus-visible { outline: 2px solid var(--rf-focus); outline-offset: 3px; border-radius: 4px; }

/* --- Links --- */
.rf-link { color: var(--rf-accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rf-link:hover { text-decoration-thickness: 2px; }

/* --- Karte (Kontur → Füllung bei Hover) --- */
.rf-card {
  background: transparent;
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-radius-card);
  padding: 24px;
  transition: background-color var(--rf-dur-fill) var(--rf-ease),
    box-shadow var(--rf-dur-fill) var(--rf-ease),
    transform var(--rf-dur-fill) var(--rf-ease);
}
.rf-card:hover { background: var(--rf-surface); transform: translateY(-2px); box-shadow: var(--rf-shadow-card-hover); }
.rf-card-solid { background: var(--rf-surface); box-shadow: var(--rf-shadow-card); }
.rf-card-solid:hover { transform: none; }

/* --- Input (44 px · Fokus = Messing-Tinte) --- */
.rf-input {
  font-family: var(--rf-font-ui);
  font-size: 15px;
  color: var(--rf-ink);
  background: var(--rf-surface);
  border: 1px solid #D3D6DA;
  border-radius: var(--rf-radius-btn);
  height: 44px;
  padding: 0 14px;
  width: 100%;
  box-sizing: border-box;
}
.rf-input::placeholder { color: #8A9099; }
.rf-input:focus { outline: 2px solid var(--rf-focus); outline-offset: 0; border-color: var(--rf-focus); }

.rf-label {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--rf-ink-soft);
  margin-bottom: 6px;
}

/* --- Status (Tags, 4 px) --- */
.rf-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--rf-radius-tag);
  padding: 5px 12px;
  border: 1px solid transparent;
}
.rf-status-ok { color: var(--rf-ok); background: var(--rf-ok-bg); border-color: rgba(46,122,80,.35); }
.rf-status-warn { color: var(--rf-warn); background: var(--rf-warn-bg); border-color: rgba(138,92,16,.35); }
.rf-status-error { color: var(--rf-error); background: var(--rf-error-bg); border-color: rgba(181,71,46,.35); }

/* --- Lichtkante (nur Dunkel→Hell-Übergang, nie Deko!) --- */
.rf-lichtkante { height: 1px; background: var(--rfp-bernstein); box-shadow: var(--rf-glow-divider); border: 0; margin: 0; }

/* --- Icons (eigenes Set statt Emojis — Bauart unverändert v1) ---
   24er-Raster, Strich 1.7, eckige Enden (square/miter), currentColor.
   Farbwelt v2: Messing-Tinte auf hell, Nebel/Bernstein auf dunkel. */
.ic {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -0.18em;
}

/* --- Scroll-Reveals (nur mit JS; reduced-motion = Fade) --- */
.js .rf-rv { opacity: 0; transform: translateY(12px);
  transition: opacity var(--rf-dur-reveal) var(--rf-ease), transform var(--rf-dur-reveal) var(--rf-ease);
  transition-delay: var(--d, 0ms); }
.js .rf-rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rf-btn, .rf-card { transition: none; }
  .rf-btn:active { transform: none; }
  .js .rf-rv { transition: opacity .15s ease-out; transform: none; }
}