/* ============================================
   UI-Konsistenz-Basis
   ------------------------------------------------------------
   Einheitliche Grundwerte für Seiten, die keine eigene
   Spezial-Regel mitbringen.

   Wichtig: Alle Selektoren sind in :where() gekapselt.
   Dadurch ist die Spezifität 0 und jedes seitenspezifische
   CSS (auch einfache Klassen) gewinnt immer. Diese Datei
   überschreibt also nichts Bestehendes, sondern füllt nur
   Lücken, damit Schriftgrößen, Buttons, Formularfelder und
   Tabellen überall gleich aussehen.
   ============================================ */

/* --- Überschriften --- */
:where(.ke-page-content) :where(h1) {
  margin: 0 0 var(--ke-space-3, 12px);
  font-family: inherit;
  font-size: var(--ke-font-2xl, 24px);
  font-weight: var(--ke-weight-bold, 700);
  line-height: var(--ke-line-tight, 1.2);
  color: var(--ke-text);
}

:where(.ke-page-content) :where(h2) {
  margin: 0 0 var(--ke-space-2, 8px);
  font-family: inherit;
  font-size: var(--ke-font-xl, 20px);
  font-weight: var(--ke-weight-semibold, 600);
  line-height: var(--ke-line-tight, 1.2);
  color: var(--ke-text);
}

:where(.ke-page-content) :where(h3) {
  margin: 0 0 var(--ke-space-2, 8px);
  font-family: inherit;
  font-size: var(--ke-font-lg, 16px);
  font-weight: var(--ke-weight-semibold, 600);
  line-height: var(--ke-line-tight, 1.2);
  color: var(--ke-text);
}

:where(.ke-page-content) :where(h4) {
  margin: 0 0 var(--ke-space-2, 8px);
  font-family: inherit;
  font-size: var(--ke-font-md, 15px);
  font-weight: var(--ke-weight-semibold, 600);
  line-height: var(--ke-line-tight, 1.2);
  color: var(--ke-text);
}

/* --- Fließtext & Listen --- */
:where(.ke-page-content) :where(p) {
  margin: 0 0 var(--ke-space-2, 8px);
  line-height: var(--ke-line, 1.35);
}

:where(.ke-page-content) :where(ul),
:where(.ke-page-content) :where(ol) {
  margin: 0 0 var(--ke-space-3, 12px);
  padding-left: var(--ke-space-5, 20px);
  line-height: var(--ke-line, 1.35);
}

:where(.ke-page-content) :where(small) {
  font-size: var(--ke-font-sm, 12px);
  color: var(--ke-text-muted);
}

/* --- Links --- */
:where(.ke-page-content) :where(a) {
  color: var(--ke-primary);
}

/* --- Buttons ohne eigene Klasse --- */
:where(.ke-page-content) button:not([class]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ke-space-1, 4px);
  min-height: 36px;
  width: auto;
  padding: 6px 12px;
  font-family: inherit;
  font-size: var(--ke-font, 14px);
  font-weight: var(--ke-weight-medium, 500);
  line-height: var(--ke-line-tight, 1.2);
  color: var(--ke-text);
  background: var(--ke-surface-2);
  border: 1px solid var(--ke-border);
  border-radius: var(--ke-radius-sm, 4px);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

:where(.ke-page-content) button:not([class]):hover {
  filter: brightness(1.06);
}

:where(.ke-page-content) button:not([class]):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Formularfelder ohne eigene Klasse --- */
:where(.ke-page-content) input:not([class]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
:where(.ke-page-content) select:not([class]),
:where(.ke-page-content) textarea:not([class]) {
  box-sizing: border-box;
  width: auto;
  font-family: inherit;
  font-size: var(--ke-font, 14px);
  line-height: var(--ke-line, 1.35);
  text-align: left;
  color: var(--ke-text);
  background: var(--ke-bg);
  border: 1px solid var(--ke-border);
  border-radius: var(--ke-radius-sm, 4px);
  padding: 7px 9px;
}

:where(.ke-page-content) input:not([class]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
:where(.ke-page-content) select:not([class]):focus,
:where(.ke-page-content) textarea:not([class]):focus {
  outline: 2px solid var(--ke-primary-focus);
  outline-offset: 1px;
}

:where(.ke-page-content) input[type="checkbox"]:not([class]),
:where(.ke-page-content) input[type="radio"]:not([class]) {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  flex: 0 0 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--ke-primary);
}

:where(.ke-page-content) label:not([class]) {
  font-size: var(--ke-font, 14px);
}

/* --- Tabellen --- */
:where(.ke-page-content) :where(table) {
  width: 100%;
  border-collapse: collapse;
}

:where(.ke-page-content) :where(th),
:where(.ke-page-content) :where(td) {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

:where(.ke-page-content) :where(th) {
  font-weight: var(--ke-weight-semibold, 600);
  color: var(--ke-text-muted);
  font-size: var(--ke-font-sm, 12px);
}

/* --- Button-Größen: Flat-Aliase an BEM angleichen --- */
.ke-btn-sm { min-height: 30px; }
.ke-btn-lg { min-height: 44px; }
.ke-btn-xxs {
  padding: 2px 6px;
  min-height: 22px;
  font-size: var(--ke-font-xs, 11px);
  border-radius: var(--ke-radius-sm, 4px);
}

/* --- Trennlinien & Bilder --- */
:where(.ke-page-content) :where(hr) {
  border: 0;
  border-top: 1px solid var(--ke-border);
  margin: var(--ke-space-3, 12px) 0;
}

:where(.ke-page-content) :where(img) {
  max-width: 100%;
  height: auto;
}

/* --- Karten/Panels ohne eigene Klasse --- */
:where(.ke-page-content) :where(fieldset) {
  border: 1px solid var(--ke-border);
  border-radius: var(--ke-radius, 8px);
  padding: var(--ke-space-4, 16px);
  margin: 0 0 var(--ke-space-4, 16px);
}

:where(.ke-page-content) :where(legend) {
  padding: 0 var(--ke-space-2, 8px);
  font-weight: var(--ke-weight-semibold, 600);
  color: var(--ke-text);
}

/* --- Dark Theme: hellgruener Erfolgsbutton/-badge braucht dunkle Schrift (Kontrast) --- */
[data-theme="dark"] .ke-btn--success,
[data-theme="dark"] .ke-btn-success,
[data-theme="dark"] .ke-badge--success {
  color: #052e16;
}
[data-theme="dark"] .ke-btn--success:hover,
[data-theme="dark"] .ke-btn--success:focus-visible,
[data-theme="dark"] .ke-btn-success:hover,
[data-theme="dark"] .ke-btn-success:focus-visible {
  color: #052e16;
}

/* --- Dark Theme: gelber Warnbutton braucht dunkle Schrift (Kontrast) --- */
[data-theme="dark"] .ke-btn--warning,
[data-theme="dark"] .ke-btn-warning {
  color: #111;
}

/* --- Dark Theme: Verbrauch-Link (inline gruen) braucht dunkle Schrift --- */
[data-theme="dark"] a[style*="background:var(--ke-success)"] {
  color: #052e16 !important;
}