/* ═══════════════════════════════════════════════════════════════
   Universität Freiburg — Component CSS (framework-agnostic)
   ---------------------------------------------------------------
   Plain CSS classes mirroring the design-system's React primitives,
   for use directly in static-site templates (Jekyll/Hugo/Eleventy/
   Astro/11ty/etc.). All values reference the design tokens — never
   hard-code colours or sizes; change them in tokens/*.css.

   Markup examples are in the handoff README.md.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- Base type helpers (optional) ---------- */
.ufr {
  font-family: var(--font-social);
  color: var(--text-body);
}

/* ════════ Buttons ════════ */
.ufr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-social);
  font-stretch: 100%;
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.005em;
  padding: 11px 22px;
  min-height: 44px;
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast);
}
.ufr-btn:active { transform: scale(var(--press-scale)); }
.ufr-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ufr-btn[disabled], .ufr-btn.is-disabled { opacity: 0.45; cursor: not-allowed; }

.ufr-btn--sm { font-size: 14px; padding: 8px 16px; min-height: 36px; }
.ufr-btn--lg { font-size: 18px; padding: 15px 30px; min-height: 54px; }

.ufr-btn--primary {
  background: var(--ufr-blau); color: var(--text-on-brand); border-color: var(--ufr-blau);
}
.ufr-btn--primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }

.ufr-btn--secondary {
  background: transparent; color: var(--ufr-blau); border-color: var(--ufr-blau);
}
.ufr-btn--secondary:hover { background: var(--ufr-blau-20); }

.ufr-btn--ghost { background: transparent; color: var(--ufr-blau); }
.ufr-btn--ghost:hover { background: var(--ufr-blau-20); }

.ufr-btn--dark {
  background: var(--ufr-dunkelblau); color: var(--text-on-dark); border-color: var(--ufr-dunkelblau);
}
.ufr-btn--dark:hover { background: #000038; border-color: #000038; }

.ufr-btn--on-dark {
  background: var(--ufr-weiss); color: var(--ufr-dunkelblau); border-color: var(--ufr-weiss);
}
.ufr-btn--on-dark:hover { background: var(--ufr-sand); border-color: var(--ufr-sand); }

/* Icon-only */
.ufr-icon-btn {
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
}
.ufr-icon-btn--round { border-radius: 50%; }

/* ════════ Card ════════ */
.ufr-card {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.ufr-card--elevated { box-shadow: var(--shadow-md); }
/* Topic accent keyline (Zusatzfarben) */
.ufr-card--accent-blau  { border-top: 4px solid var(--ufr-blau); }
.ufr-card--accent-gruen { border-top: 4px solid var(--ufr-gruen); }
.ufr-card--accent-braun { border-top: 4px solid var(--ufr-braun); }
.ufr-card--accent-gelb  { border-top: 4px solid var(--ufr-gelb); }
.ufr-card--accent-rosa  { border-top: 4px solid var(--ufr-rosa); }

/* ════════ Badge ════════ */
.ufr-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-social); font-stretch: 100%;
  font-weight: var(--weight-medium); font-size: 12.5px; line-height: 1;
  letter-spacing: 0.01em; padding: 5px 10px; border-radius: var(--radius-sm);
}
/* soft (default) */
.ufr-badge--blau    { background: var(--ufr-blau-20);  color: #26346e; }
.ufr-badge--gruen   { background: var(--ufr-gruen-20); color: #04604e; }
.ufr-badge--braun   { background: var(--ufr-braun-20); color: #5f4619; }
.ufr-badge--gelb    { background: var(--ufr-gelb-20);  color: #6b5500; }
.ufr-badge--rosa    { background: var(--ufr-rosa-20);  color: #8a4f7d; }
.ufr-badge--neutral { background: var(--ufr-grey-100); color: var(--ufr-grey-700); }
/* solid modifier */
.ufr-badge--solid.ufr-badge--blau  { background: var(--ufr-blau);  color: #fff; }
.ufr-badge--solid.ufr-badge--gruen { background: var(--ufr-gruen); color: #fff; }
.ufr-badge--solid.ufr-badge--braun { background: var(--ufr-braun); color: #fff; }
.ufr-badge--solid.ufr-badge--gelb  { background: var(--ufr-gelb);  color: var(--ufr-schwarz); }
.ufr-badge--solid.ufr-badge--rosa  { background: var(--ufr-rosa);  color: var(--ufr-schwarz); }

/* ════════ Tag (pill filter/category) ════════ */
.ufr-tag {
  display: inline-flex; align-items: center; gap: 7px;
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-social); font-stretch: 100%;
  font-weight: var(--weight-medium); font-size: 14px; line-height: 1;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: transparent; color: var(--ufr-blau);
  border: var(--border-width) solid var(--ufr-blau-40);
  cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast);
}
.ufr-tag:hover { background: var(--ufr-blau-20); }
.ufr-tag.is-selected, .ufr-tag[aria-pressed="true"] {
  background: var(--ufr-blau); color: #fff; border-color: var(--ufr-blau);
}

/* ════════ Form controls ════════ */
.ufr-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-social); }
.ufr-label { font-size: 14px; font-weight: var(--weight-medium); color: var(--text-strong); }
.ufr-input, .ufr-select {
  font-family: var(--font-social); font-stretch: 100%; font-size: 16px;
  color: var(--text-strong); background: var(--ufr-weiss);
  height: 44px; padding: 0 14px; border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-default);
  outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ufr-input::placeholder { color: var(--text-muted); }
.ufr-input:focus, .ufr-select:focus { border-color: var(--ufr-blau); box-shadow: var(--shadow-focus); }
.ufr-input:disabled, .ufr-select:disabled { background: var(--ufr-grey-100); cursor: not-allowed; }
.ufr-input.is-invalid { border-color: var(--ufr-braun); }
.ufr-help { font-size: 12.5px; color: var(--text-muted); }
.ufr-help--error { color: var(--ufr-braun); }
.ufr-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23344a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* Checkbox: style the native input directly */
.ufr-checkbox { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-social); font-size: 16px; color: var(--text-strong); cursor: pointer; }
.ufr-checkbox input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0;
  border: var(--border-width) solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--ufr-weiss); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.ufr-checkbox input[type="checkbox"]:checked {
  background: var(--ufr-blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center no-repeat;
  border-color: var(--ufr-blau);
}

/* ════════ Brand: wordmark & ufr badge (live text) ════════ */
.ufr-wordmark {
  font-family: var(--font-social); font-stretch: 100%; font-weight: var(--weight-medium);
  font-size: 40px; line-height: 1; letter-spacing: -0.015em;
  color: var(--ufr-blau); white-space: nowrap;
}
.ufr-wordmark--weiss { color: var(--ufr-weiss); }
.ufr-wordmark--schwarz { color: var(--ufr-schwarz); }

.ufr-mark {           /* circular "ufr" short-form */
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ufr-blau); color: #fff;
  font-family: var(--font-social); font-stretch: 100%; font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
}
.ufr-mark--dunkelblau { background: var(--ufr-dunkelblau); }
.ufr-mark--outline { background: transparent; color: var(--ufr-blau); border: 1.5px solid var(--ufr-blau); }

/* ════════ Headline / subline rhythm (core CD device) ════════ */
.ufr-headline {
  font-family: var(--font-social); font-stretch: var(--width-extended);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight); color: var(--ufr-schwarz);
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem);
}
.ufr-subline {
  font-family: var(--font-social); font-stretch: var(--width-normal);
  font-weight: var(--weight-book); font-size: var(--text-lead);
  line-height: var(--leading-normal); color: var(--text-muted);
}
.ufr-overline {
  font-family: var(--font-social); font-stretch: var(--width-normal);
  font-weight: var(--weight-medium); font-size: var(--text-overline);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--ufr-blau);
}