/* ============================================================
   Die Lehrakte — Komponenten
   Register, Aktendeckel, Buttons, Badges, Navigation, Formular
   ============================================================ */

/* ---------- Buttons ---------- */

.la-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--la-font-text);
  font-size: var(--la-fs-s);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.7em 1.4em;
  border-radius: var(--la-radius-s);
  border: var(--la-border-stark);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--la-dauer) var(--la-ease),
    color var(--la-dauer) var(--la-ease),
    transform var(--la-dauer) var(--la-ease);
}
.la-button:active { transform: translateY(1px); }

.la-button--primaer {
  background: var(--la-petrol);
  border-color: var(--la-petrol);
  color: var(--la-papier);
}
.la-button--primaer:hover {
  background: var(--la-petrol-tief);
  border-color: var(--la-petrol-tief);
  color: var(--la-papier);
}

.la-button--sekundaer {
  background: transparent;
  border-color: var(--la-tinte);
  color: var(--la-tinte);
}
.la-button--sekundaer:hover { background: var(--la-papier-tief); color: var(--la-tinte); }

.la-button--leise {
  background: transparent;
  border-color: transparent;
  color: var(--la-petrol);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-inline: 0.4em;
}
.la-button--leise:hover { color: var(--la-petrol-tief); }

/* ---------- Registerkante (Navigation & Abschnittsmarken) ----------
   Die "Akte" zeigt sich als Registerreiter: oben abgerundet,
   auf Kartonfläche sitzend. */

.la-register {
  display: flex;
  gap: var(--la-space-1);
  align-items: flex-end;
  flex-wrap: wrap;
}
.la-register__reiter {
  font-family: var(--la-font-akte);
  font-size: var(--la-fs-xs);
  letter-spacing: var(--la-tracking-akte);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--la-tinte-soft);
  background: var(--la-karton);
  border: var(--la-border);
  border-bottom: none;
  border-radius: var(--la-radius-register);
  padding: 0.55em 1.1em;
  transition: background var(--la-dauer) var(--la-ease), color var(--la-dauer) var(--la-ease), padding-bottom var(--la-dauer) var(--la-ease);
}
.la-register__reiter:hover { background: var(--la-ocker-hell); color: var(--la-tinte); }
.la-register__reiter[aria-current="page"],
.la-register__reiter.ist-aktiv {
  background: var(--la-papier);
  color: var(--la-tinte);
  border-color: var(--la-linie-stark);
  padding-bottom: 0.75em;
  font-weight: 600;
}

/* ---------- Kopfleiste ---------- */

.la-kopf {
  border-bottom: var(--la-border-stark);
  background: var(--la-papier);
}
.la-kopf__zeile {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--la-space-4);
  padding-top: var(--la-space-4);
}
.la-marke {
  font-family: var(--la-font-display);
  font-size: 1.35rem;
  font-weight: 640;
  color: var(--la-tinte);
  text-decoration: none;
  line-height: 1;
  padding-bottom: 0.6rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
}
.la-marke__zusatz {
  font-family: var(--la-font-akte);
  font-size: var(--la-fs-xs);
  letter-spacing: var(--la-tracking-akte);
  text-transform: uppercase;
  color: var(--la-ocker);
}

/* ---------- Aktendeckel (Angebots-/Inhaltskarte) ---------- */

.la-akte {
  background: var(--la-papier);
  border: var(--la-border);
  border-top: 3px solid var(--la-tinte);
  border-radius: var(--la-radius-s);
  box-shadow: var(--la-shadow-akte);
  padding: var(--la-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--la-space-2);
  transition: transform var(--la-dauer) var(--la-ease), box-shadow var(--la-dauer) var(--la-ease);
}
a.la-akte { text-decoration: none; color: inherit; }
.la-akte:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 var(--la-linie), 0 20px 44px -20px rgb(34 48 46 / 0.45);
}
.la-akte--bibliothek { border-top-color: var(--la-petrol); }
.la-akte--studio     { border-top-color: var(--la-ocker); }
.la-akte--massarbeit { border-top-color: var(--la-tinte); }

.la-akte__kennung {
  font-family: var(--la-font-akte);
  font-size: var(--la-fs-xs);
  letter-spacing: var(--la-tracking-akte);
  text-transform: uppercase;
  color: var(--la-tinte-soft);
  display: flex;
  justify-content: space-between;
  gap: var(--la-space-2);
  border-bottom: var(--la-border);
  padding-bottom: var(--la-space-2);
}
.la-akte h3, .la-akte h4 { margin-bottom: var(--la-space-1); }
.la-akte p { font-size: var(--la-fs-s); color: var(--la-tinte-soft); margin-bottom: 0; }
.la-akte__fuss { margin-top: auto; padding-top: var(--la-space-3); }

/* ---------- Qualitätskennzeichen (Badges, §20) ---------- */

.la-siegel {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--la-font-akte);
  font-size: var(--la-fs-xs);
  letter-spacing: 0.04em;
  color: var(--la-tinte);
  background: var(--la-ocker-hell);
  border: 1px solid var(--la-ocker);
  border-radius: 999px;
  padding: 0.3em 0.9em;
  white-space: nowrap;
}
.la-siegel::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--la-positiv);
}
.la-siegel--neutral { background: var(--la-papier-tief); border-color: var(--la-linie-stark); }
.la-siegel--neutral::before { background: var(--la-tinte-soft); }

/* ---------- Formular (Kontakt via Formulargate) ---------- */

.la-feld { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: var(--la-space-3); }
.la-feld label {
  font-family: var(--la-font-akte);
  font-size: var(--la-fs-xs);
  letter-spacing: var(--la-tracking-akte);
  text-transform: uppercase;
  color: var(--la-tinte-soft);
}
.la-feld input,
.la-feld textarea,
.la-feld select {
  font-family: var(--la-font-text);
  font-size: var(--la-fs-base);
  color: var(--la-tinte);
  background: var(--la-papier);
  border: var(--la-border);
  border-radius: var(--la-radius-s);
  padding: 0.6em 0.8em;
  transition: border-color var(--la-dauer) var(--la-ease);
}
.la-feld input:focus,
.la-feld textarea:focus { border-color: var(--la-petrol); outline: none; }

/* ---------- Tabelle / Metadatenliste ---------- */

.la-metaliste {
  font-size: var(--la-fs-s);
  border-top: var(--la-border);
  max-width: var(--la-mass);
}
.la-metaliste > div {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: var(--la-space-3);
  padding: 0.6rem 0;
  border-bottom: var(--la-border);
}
.la-metaliste dt {
  font-family: var(--la-font-akte);
  font-size: var(--la-fs-xs);
  letter-spacing: var(--la-tracking-akte);
  text-transform: uppercase;
  color: var(--la-tinte-soft);
  align-self: baseline;
}
.la-metaliste dd { margin: 0; }

/* ---------- Fußzeile ---------- */

.la-fuss {
  border-top: var(--la-border-stark);
  background: var(--la-papier-tief);
  padding-block: var(--la-space-5);
  font-size: var(--la-fs-s);
  color: var(--la-tinte-soft);
}
.la-fuss a { color: inherit; }
.la-fuss__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--la-space-3) var(--la-space-5);
  justify-content: space-between;
  align-items: baseline;
}