/*
 * Cassiopeia – Lernstudio (Child-Template)
 *
 * Gleiche Bildsprache wie Lernstudio-Komponente und Angebotsseite:
 * Tintenblau, Textmarker-Gelb als einziger Akzent, Lora für Überschriften.
 * Lora wird lokal ausgeliefert (SIL OFL 1.1) – keine Anfragen an Google Fonts.
 *
 * ":root:root" erhöht die Spezifität, weil Cassiopeia seine Farbvariablen
 * als Inline-Style nach dieser Datei ausgibt.
 */

@font-face {
  font-family: "Lora LS";
  src: url("../fonts/Lora-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root:root {
  --ls-tinte: #1d2b4f;
  --ls-tinte-2: #4a5878;
  --ls-tinte-hell: #2a3c68;
  --ls-papier: #f5f7f9;
  --ls-linie: #d5dce6;
  --ls-marker: #f2c94c;
  --ls-gruen: #2f7d5b;
  --ls-rot: #c2412d;
  --ls-serif: "Lora LS", Georgia, "Times New Roman", serif;

  --cassiopeia-color-primary: var(--ls-tinte);
  --cassiopeia-color-hover: var(--ls-tinte-hell);
  --cassiopeia-color-link: var(--ls-tinte);
  --link-color: var(--ls-tinte);
  --link-color-rgb: 29, 43, 79;
  --link-hover-color: var(--ls-tinte-hell);
  --link-hover-color-rgb: 42, 60, 104;
  --template-special-color: var(--ls-tinte);
  --template-link-color: var(--ls-tinte);
  --cassiopeia-font-family-headings: var(--ls-serif);
  --cassiopeia-font-weight-headings: 600;
  --body-color: #1d2b4f;
  --primary: var(--ls-tinte);
  --blue: var(--ls-tinte);
  --btn-primary: var(--ls-tinte);
}

body.site {
  color: var(--ls-tinte);
  background: #fff;
}

h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--ls-serif);
  font-weight: 600;
  color: var(--ls-tinte);
}

a {
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 2px solid var(--ls-tinte);
  outline-offset: 3px;
}

/* ---------- Bootstrap-Knöpfe im Lernstudio-Stil ---------- */

.btn-primary {
  --btn-bg: var(--ls-tinte);
  --btn-border-color: var(--ls-tinte);
  --btn-hover-bg: var(--ls-tinte-hell);
  --btn-hover-border-color: var(--ls-tinte-hell);
  --btn-active-bg: var(--ls-tinte-hell);
  --btn-active-border-color: var(--ls-tinte-hell);
  background-color: var(--ls-tinte);
  border-color: var(--ls-tinte);
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ls-tinte-hell);
  border-color: var(--ls-tinte-hell);
}

.btn-outline-primary {
  --btn-color: var(--ls-tinte);
  --btn-border-color: var(--ls-tinte);
  --btn-hover-bg: var(--ls-tinte);
  --btn-hover-border-color: var(--ls-tinte);
  color: var(--ls-tinte);
  border-color: var(--ls-tinte);
  border-width: 1.5px;
  font-weight: 600;
}

.btn-outline-primary:hover {
  background-color: var(--ls-tinte);
  color: #fff;
}

/* ---------- Kopfbereich ---------- */

.container-header {
  background-color: var(--ls-tinte);
  background-image: none;
  box-shadow: inset 0 -3px 0 var(--ls-marker);
}

.container-header .navbar-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 1rem;
  padding-block: 0.4rem;
  font-family: var(--ls-serif);
  font-size: 1.6rem;
  font-weight: 600;
}

.container-header .brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.container-header .brand-logo img {
  display: block;
  width: auto;
  height: 2.25rem;
}

.container-header .site-description {
  padding-left: 1rem;
  border-left: 1px solid rgb(255 255 255 / 0.35);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.3;
  color: rgb(255 255 255 / 0.85);
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .metismenu > li > a,
.container-header .metismenu > li > button {
  font-weight: 600;
}

/* Marker statt weißer Linie unter dem aktiven Menüpunkt */
.container-header .mod-menu > li.active::after,
.container-header .mod-menu > li:hover::after,
.container-header .metismenu > li > a:hover::after,
.container-header .metismenu > li.active > a::after {
  background: var(--ls-marker);
  opacity: 1;
}

@media (max-width: 575.98px) {
  .container-header .site-description {
    flex-basis: 100%;
    padding-left: 0;
    border-left: 0;
  }
}

/* Logo, Menü und Anmelden in einer Zeile (ab Tablet quer) */
@media (min-width: 992px) {
  .container-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 2rem;
    padding-inline: max(2rem, calc((100% - 1320px) / 2 + 2rem));
  }

  .container-header > .grid-child {
    width: auto;
    max-width: none;
    margin: 0;
    padding-inline: 0;
  }

  .container-header > .container-topbar,
  .container-header > .container-below-top {
    flex: 1 0 100%;
  }

  .container-header > .grid-child:has(.navbar-brand) {
    flex: 0 0 auto;
  }

  .container-header > .container-nav {
    flex: 1 1 0%;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.5rem;
    padding-block: 0.5em;
  }

  .container-header .container-nav nav,
  .container-header .container-nav .container-search {
    margin-top: 0;
  }

  .container-header .container-nav .container-search {
    margin-left: auto;
  }
}

/* ---------- Anmelde-Knopf im Kopf (mod_login, Layout "kompakt") ---------- */

.ls-kopf-login {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 0.9rem;
  margin: 0;
  color: #fff;
}

.ls-kopf-login__gruss {
  font-size: 0.92rem;
  color: rgb(255 255 255 / 0.85);
}

.ls-kopf-login__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  border-radius: 4px;
  background: var(--ls-marker);
  color: var(--ls-tinte) !important;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.ls-kopf-login__knopf:hover,
.ls-kopf-login__knopf:focus {
  background: #f6d777;
  color: var(--ls-tinte);
}

.ls-kopf-login__knopf:focus-visible,
.ls-kopf-login__abmelden:focus-visible {
  outline-color: #fff;
}

.ls-kopf-login__abmelden {
  padding: 0.35rem 0.2rem;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* Handy/Tablet: "Als Teilnehmer anmelden" als breite Leiste ganz oben, über Logo und Menü */
@media (max-width: 991.98px) {
  .container-header {
    display: flex;
    flex-direction: column;
  }

  .container-header:has(.container-search) {
    padding-top: 0;
  }

  .container-header > .container-nav:has(.container-search) {
    display: contents;
  }

  .container-header .container-search,
  .container-header .container-nav .container-search {
    order: -1;
    width: 100%;
    margin: 0;
    padding: 0.6rem 1rem;
    background: rgb(0 0 0 / 0.22);
    border-bottom: 1px solid rgb(255 255 255 / 0.12);
  }

  .container-header > .grid-child,
  .container-header .mod-menu {
    order: 0;
  }

  .container-header > .container-nav:has(.container-search) > .mod-menu,
  .container-header > .container-nav:has(.container-search) > nav {
    padding-inline: 1rem;
    margin-bottom: 0.75rem;
  }

  .ls-kopf-login {
    justify-content: center;
  }

  .ls-kopf-login:not(.ls-kopf-login--angemeldet) .ls-kopf-login__knopf {
    width: 100%;
    max-width: 28rem;
    justify-content: center;
    min-height: 2.9rem;
    font-size: 1.05rem;
  }
}

/* ---------- Anmeldeseite ---------- */

.ls-login {
  display: grid;
  grid-template-columns: minmax(0, 27rem) minmax(0, 22rem);
  justify-content: center;
  align-items: start;
  gap: 2rem 3rem;
  margin-block: clamp(1rem, 4vw, 3rem);
}

.ls-login--angemeldet {
  grid-template-columns: minmax(0, 32rem);
}

.ls-login__karte {
  padding: clamp(1.4rem, 1rem + 2vw, 2.25rem);
  border: 1px solid var(--ls-linie);
  border-top: 4px solid var(--ls-tinte);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 40px -28px rgb(29 43 79 / 0.55);
}

.ls-login__karte h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
}

.ls-login__intro {
  margin-bottom: 1.5rem;
  color: var(--ls-tinte-2);
}

.ls-login__intro p:last-child {
  margin-bottom: 0;
}

.ls-feld {
  margin-bottom: 1.15rem;
}

.ls-feld label,
.ls-feld__kopf label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 650;
}

.ls-feld__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 1rem;
}

.ls-feld__link {
  font-size: 0.9rem;
}

.ls-feld__hinweis {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--ls-tinte-2);
}

.ls-login .form-control {
  min-height: 3rem;
  border: 1.5px solid #9aa6bb;
  border-radius: 4px;
  font-size: 1.05rem;
}

.ls-login .form-control:focus {
  border-color: var(--ls-tinte);
  box-shadow: 0 0 0 3px rgb(242 201 76 / 0.6);
}

.ls-login .form-control.invalid {
  border-color: var(--ls-rot);
}

.ls-login .input-password-toggle {
  min-width: 3rem;
  border: 1.5px solid #9aa6bb;
  border-left: 0;
  background: var(--ls-papier);
  color: var(--ls-tinte);
}

.ls-login .input-password-toggle:hover {
  background: #e8edf3;
}

.ls-login__merken {
  margin: 0 0 1.25rem;
}

.ls-login__merken .form-check-input {
  width: 1.2em;
  height: 1.2em;
}

.ls-login__merken .form-check-input:checked {
  background-color: var(--ls-tinte);
  border-color: var(--ls-tinte);
}

.ls-login__absenden {
  width: 100%;
  min-height: 3rem;
  font-size: 1.05rem;
}

.ls-login__weitere {
  margin-top: 0.75rem;
}

.ls-login__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.ls-login__aktionen .ls-login__absenden {
  width: auto;
  flex: 1 1 14rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ls-login__aktionen form {
  margin: 0;
}

.ls-login__aktionen .btn-outline-secondary {
  min-height: 3rem;
}

.ls-login__hilfe {
  display: grid;
  gap: 1.75rem;
  padding-top: 0.5rem;
}

.ls-login__block h2 {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
}

.ls-login__block p,
.ls-login__block ul {
  color: var(--ls-tinte-2);
}

.ls-login__block ul {
  margin: 0;
  padding-left: 1.1rem;
}

.ls-login__block li + li {
  margin-top: 0.4rem;
}

.ls-login__block .btn {
  margin-top: 0.25rem;
}

.ls-login__hilfe .ls-login__block:first-child {
  padding: 1.1rem 1.25rem;
  border-left: 4px solid var(--ls-marker);
  background: var(--ls-papier);
}

@media (max-width: 767.98px) {
  .ls-login {
    grid-template-columns: minmax(0, 1fr);
    margin-block: 0.5rem 2rem;
  }
}

/* Passwort zurücksetzen / Benutzername anfordern: gleicher Kartenstil */
.com-users-reset,
.com-users-reset-confirm,
.com-users-reset-complete,
.com-users-remind {
  max-width: 34rem;
  margin: clamp(1rem, 4vw, 3rem) auto;
  padding: clamp(1.4rem, 1rem + 2vw, 2.25rem);
  border: 1px solid var(--ls-linie);
  border-top: 4px solid var(--ls-tinte);
  border-radius: 6px;
  box-shadow: 0 18px 40px -28px rgb(29 43 79 / 0.55);
}

.com-users-reset .btn-primary,
.com-users-reset-confirm .btn-primary,
.com-users-reset-complete .btn-primary,
.com-users-remind .btn-primary {
  width: 100%;
  min-height: 3rem;
}

/* ---------- Systemmeldungen (z. B. falsches Passwort) gut lesbar ---------- */

joomla-alert,
.alert {
  border-radius: 4px;
}

/* ---------- Brotkrümel nur dort, wo sie helfen ---------- */

.site.view-angebot .mod-breadcrumbs__wrapper,
.site.com_users .mod-breadcrumbs__wrapper {
  display: none;
}

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

.container-footer {
  background: var(--ls-tinte);
  background-image: none;
  box-shadow: inset 0 3px 0 var(--ls-marker);
  color: rgb(255 255 255 / 0.85);
  font-size: 0.92rem;
}

.container-footer a {
  color: #fff;
}

@media (min-width: 992px) {
  .container-footer .grid-child {
    padding-inline: 2rem;
  }
}

.ls-fusszeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  width: 100%;
}

.ls-fusszeile p {
  margin: 0;
}

.ls-fusszeile nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* ---------- Zurück nach oben ---------- */

.back-to-top-link {
  background-color: var(--ls-tinte);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }
}