/* ---------------------------------------------------------------------------
   falk.plus – Anmelde- und Startseite für Gitea (vw.falk.plus)
   Redmine #1856. Gleiche Gestaltung wie Matomo (FalkPlusTheme, #1842 / #1855):
   links das Original-Formular, rechts drei versetzte Bildrahmen mit EINEM Foto,
   darunter „Versionsverwaltung“, Adresse und „Zurück zu falk.plus“.

   Gitea liefert diese Datei unverändert aus (kein LESS-Compiler wie bei
   Matomo), min()/calc() und Container-Einheiten wirken also direkt.

   Die CI-Schrift gilt für alle Gitea-Seiten; alles Übrige wirkt nur auf
   Seiten mit .fp-anmeldung (signin.tmpl, home.tmpl).
   --------------------------------------------------------------------------- */

/* Schrift: Funnel Display, lokal ausgeliefert (SIL OFL 1.1, fonts/OFL.txt) */
@font-face {
  font-family: "Funnel Display";
  src: url("fonts/funnel-display-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Funnel Display";
  src: url("fonts/funnel-display-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   CI-Schrift für ALLE Gitea-Seiten (Wiki Corporate Identity: Fließtext
   Funnel Display Regular, Überschriften SemiBold). Gitea sieht dafür die
   Variable --fonts-override vor; Code bleibt in der Monospace-Schrift.
   Zeichen, die Funnel Display (Latin) nicht hat, kommen aus der Systemschrift.
   --------------------------------------------------------------------------- */
:root {
  --fonts-override: "Funnel Display";
}

h1, h2, h3, h4,
.ui.header {
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   CI-Farben für ALLE Gitea-Seiten (auch nach der Anmeldung), #1857.
   Hell: Blau #07304C, Dunkel: Grün #AECC53 mit blauer Schrift.
   Abstufungen: light-n/dark-n als Mischung mit Weiß bzw. Schwarz (hell) und
   mit dem Seitenhintergrund bzw. Weiß (dunkel) – wie in Giteas Themes, wo im
   Dunkelmodus „dark“ heller und „light“ dunkler bedeutet.
   Selektoren: :root:not(...) bzw. :root[...] sind spezifischer als Giteas
   :root, die Dunkel-Regeln stehen danach und gewinnen bei „auto“.
   --------------------------------------------------------------------------- */
:root:not([data-theme*="dark"]) {
  --color-primary: #07304C;
  --color-primary-contrast: #ffffff;
  --color-primary-hover: #0e4163;
  --color-primary-active: #052438;
  --color-accent: #20455e;
  --color-primary-light-1: #20455e;
  --color-primary-light-2: #395970;
  --color-primary-light-3: #516e82;
  --color-primary-light-4: #6a8394;
  --color-primary-light-5: #9cacb7;
  --color-primary-light-6: #cdd6db;
  --color-primary-light-7: #f3f5f6;
  --color-primary-dark-1: #062b44;
  --color-primary-dark-2: #06263d;
  --color-primary-dark-3: #052235;
  --color-primary-dark-4: #041d2e;
  --color-primary-dark-5: #03131e;
  --color-primary-dark-6: #010a0f;
  --color-primary-dark-7: #000204;
  --color-primary-alpha-10: #07304c19;
  --color-primary-alpha-20: #07304c33;
  --color-primary-alpha-30: #07304c4b;
  --color-primary-alpha-40: #07304c66;
  --color-primary-alpha-50: #07304c80;
  --color-primary-alpha-60: #07304c99;
  --color-primary-alpha-70: #07304cb3;
  --color-primary-alpha-80: #07304ccc;
  --color-primary-alpha-90: #07304ce1;
}

:root[data-theme*="dark"] {
  --color-primary: #AECC53;
  --color-primary-contrast: #07304C;
  --color-primary-hover: #bdd86f;
  --color-primary-active: #9ab83f;
  --color-accent: #b6d164;
  --color-primary-light-1: #a0bb4e;
  --color-primary-light-2: #91a949;
  --color-primary-light-3: #839844;
  --color-primary-light-4: #74873f;
  --color-primary-light-5: #586434;
  --color-primary-light-6: #3b422a;
  --color-primary-light-7: #252823;
  --color-primary-dark-1: #b6d164;
  --color-primary-dark-2: #bed675;
  --color-primary-dark-3: #c6db87;
  --color-primary-dark-4: #cee098;
  --color-primary-dark-5: #dfebba;
  --color-primary-dark-6: #eff5dd;
  --color-primary-dark-7: #fbfcf6;
  --color-primary-alpha-10: #aecc5319;
  --color-primary-alpha-20: #aecc5333;
  --color-primary-alpha-30: #aecc534b;
  --color-primary-alpha-40: #aecc5366;
  --color-primary-alpha-50: #aecc5380;
  --color-primary-alpha-60: #aecc5399;
  --color-primary-alpha-70: #aecc53b3;
  --color-primary-alpha-80: #aecc53cc;
  --color-primary-alpha-90: #aecc53e1;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme*="auto"] {
    --color-primary: #AECC53;
    --color-primary-contrast: #07304C;
    --color-primary-hover: #bdd86f;
    --color-primary-active: #9ab83f;
    --color-accent: #b6d164;
    --color-primary-light-1: #a0bb4e;
    --color-primary-light-2: #91a949;
    --color-primary-light-3: #839844;
    --color-primary-light-4: #74873f;
    --color-primary-light-5: #586434;
    --color-primary-light-6: #3b422a;
    --color-primary-light-7: #252823;
    --color-primary-dark-1: #b6d164;
    --color-primary-dark-2: #bed675;
    --color-primary-dark-3: #c6db87;
    --color-primary-dark-4: #cee098;
    --color-primary-dark-5: #dfebba;
    --color-primary-dark-6: #eff5dd;
    --color-primary-dark-7: #fbfcf6;
    --color-primary-alpha-10: #aecc5319;
    --color-primary-alpha-20: #aecc5333;
    --color-primary-alpha-30: #aecc534b;
    --color-primary-alpha-40: #aecc5366;
    --color-primary-alpha-50: #aecc5380;
    --color-primary-alpha-60: #aecc5399;
    --color-primary-alpha-70: #aecc53b3;
    --color-primary-alpha-80: #aecc53cc;
    --color-primary-alpha-90: #aecc53e1;
  }
}

/* ---------------------------------------------------------------------------
   Farben – hell (Standard) und dunkel (Gitea-Themes „…dark…“ bzw. „…auto…“
   bei dunklem System). Buttons und Links im CI: hell Blau #07304C, dunkel
   Grün #AECC53 mit blauer Schrift (Logopaket 2026, #1857) – wie im Matomo-Theme.
   --------------------------------------------------------------------------- */
.fp-anmeldung {
  --fp-ink: #07304C;
  --fp-muted: #5b7385;
  --fp-line: rgba(7, 48, 76, .12);
  --fp-outline: rgba(7, 48, 76, .10);
  --fp-shadow: 0 12px 36px rgba(7, 48, 76, .16), 0 2px 6px rgba(7, 48, 76, .06);
  --fp-photo: none;

  --color-primary: #07304C;
  --color-primary-contrast: #ffffff;
  --color-primary-hover: #0e4163;
  --color-primary-active: #052438;
  --color-primary-dark-1: #0e4163;
  --color-primary-dark-2: #052438;
  --color-primary-light-4: rgba(7, 48, 76, .35);
}

html[data-theme*="dark"] .fp-anmeldung {
  --fp-ink: #e6eef3;
  --fp-muted: #9ab0bf;
  --fp-line: rgba(255, 255, 255, .14);
  --fp-outline: rgba(255, 255, 255, .08);
  --fp-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
  --fp-photo: brightness(.9);

  --color-primary: #AECC53;
  --color-primary-contrast: #07304C;
  --color-primary-hover: #bdd86f;
  --color-primary-active: #9ab83f;
  --color-primary-dark-1: #bdd86f;
  --color-primary-dark-2: #9ab83f;
  --color-primary-light-4: rgba(174, 204, 83, .35);
}

@media (prefers-color-scheme: dark) {
  html[data-theme*="auto"] .fp-anmeldung {
    --fp-ink: #e6eef3;
    --fp-muted: #9ab0bf;
    --fp-line: rgba(255, 255, 255, .14);
    --fp-outline: rgba(255, 255, 255, .08);
    --fp-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
    --fp-photo: brightness(.9);

    --color-primary: #AECC53;
    --color-primary-contrast: #07304C;
    --color-primary-hover: #bdd86f;
    --color-primary-active: #9ab83f;
    --color-primary-dark-1: #bdd86f;
    --color-primary-dark-2: #9ab83f;
    --color-primary-light-4: rgba(174, 204, 83, .35);
  }
}

/* Buttons nutzen die --color-primary-Variablen oben; Links ausdrücklich setzen */
.fp-anmeldung a:not(.button) {
  color: var(--color-primary);
}

/* Überschrift des Formularkastens („Anmelden“ / „Willkommen“) */
.fp-anmeldung .ui.top.attached.header {
  font-family: "Funnel Display", var(--fonts-regular);
  font-weight: 600;
  font-size: 16px;
}

/* ---------------------------------------------------------------------------
   Aufbau: Hauptbereich füllt die Höhe zwischen Navigationsleiste und
   Fußzeile, damit die Bezeichnung rechts auf Linie über der Fußzeile endet.
   --------------------------------------------------------------------------- */
.full.height:has(> .page-content.fp-anmeldung) {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.page-content.fp-anmeldung {
  flex: 1 0 auto;
  display: flex;
}

.fp-anmeldung__layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 48px;
  padding: 32px var(--page-margin-x);
}

.fp-anmeldung__primary {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp-anmeldung__box {
  width: min(100%, 460px);
}

/* Gitea gibt .ui.container seitliche Ränder – hier bündig mit Logo und Bezeichnung */
.fp-anmeldung__box > .ui.container {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Logo über dem Formular (wie Matomo), im Dunkelmodus weiß */
.fp-logo {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 8px;
  line-height: 0;
}

.fp-logo img {
  display: block;
  width: auto;
  height: 36px;
}

html[data-theme*="dark"] .fp-logo img {
  filter: brightness(0) invert(1);
}

@media (prefers-color-scheme: dark) {
  html[data-theme*="auto"] .fp-logo img {
    filter: brightness(0) invert(1);
  }
}

/* Startseite: Kasten im Stil des Anmeldeformulars */
.fp-start {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fp-start p {
  margin: 0 0 4px;
  line-height: 1.5;
}

.fp-start .ui.button {
  margin: 0;
}

.fp-start__hinweis {
  margin: 4px 0 0 !important;
  font-size: 13px;
  color: var(--color-text-light-2);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Rechte Spalte: Bezeichnung unten (auf Linie über der Fußzeile), Bilder
   füllen den Platz darüber – höchstens 600 px hoch, kleiner bei wenig Höhe
   oder schmaler Spalte. Das regelt ein Größen-Container: Die Bildfläche
   nimmt min(Höhe, Breite × 600/644) des freien Platzes. Keine festen
   Pixelwerte für Navigationsleiste oder Formular nötig (anders als bei
   Matomo, #1855), daher robust bei Gitea-Updates.
   --------------------------------------------------------------------------- */
.fp-anmeldung__secondary {
  min-width: 0;
  min-height: 0;
}

.fpLogin {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 32px;
  height: 100%;
}

.fpLogin__strips {
  flex: 1 1 0;
  min-height: 0;
  max-height: 600px;
  container-type: size;
  display: flex;
  align-items: flex-end;
}

.fpLogin__stage {
  position: relative;
  height: min(100cqh, 100cqw * 600 / 644);
  aspect-ratio: 644 / 600;
}

/* sehr wenig Höhe: Bilder weglassen statt Briefmarken zu zeigen */
@container (max-height: 160px) {
  .fpLogin__stage {
    display: none;
  }
}

.fpLogin__item {
  position: absolute;
  width: 30.435%;   /* 196 / 644 */
  height: 83.333%;  /* 500 / 600 */
  margin: 0;
}

.fpLogin__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: var(--fp-shadow);
  filter: var(--fp-photo);
  /* feine Kontur, damit helle Bildränder nicht mit dem Hintergrund verschmelzen */
  outline: 1px solid var(--fp-outline);
  outline-offset: -1px;
}

.fpLogin__item--1 { left: 0;       top: 10%;     }  /*  60 / 600 */
.fpLogin__item--2 { left: 34.783%; top: 0;       }  /* 224 / 644 */
.fpLogin__item--3 { left: 69.565%; top: 16.667%; }  /* 448 / 644, 100 / 600 */

/* Bezeichnung der Anwendung, mit dünner grüner Akzentlinie */
.fpLogin__label {
  position: relative;
  padding-top: 18px;
  font-family: "Funnel Display", var(--fonts-regular);
  color: var(--fp-ink);
}

.fpLogin__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 2px;
  border-radius: 1px;
  background: #AECC53;
}

.fpLogin__app {
  display: block;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.fpLogin__host {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--fp-muted);
}

/* Link zurück zu falk.plus, falls sich jemand verklickt hat */
.fp-anmeldung a.fpLogin__home {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
  color: var(--fp-ink);
  text-decoration: none;
  border-bottom: 2px solid #AECC53;
  padding-bottom: 2px;
}

.fp-anmeldung a.fpLogin__home:hover,
.fp-anmeldung a.fpLogin__home:focus-visible {
  border-bottom-color: var(--fp-ink);
}

/* ---------------------------------------------------------------------------
   Tablet und Smartphone (bis 1040 px, wie Matomo): eine Spalte, ohne Bilder –
   Bezeichnung, Adresse und Link kompakt unter dem Formular, an dessen Breite.
   --------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .fp-anmeldung__layout {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    row-gap: 24px;
    padding: 24px 16px;
  }

  .fp-anmeldung__secondary {
    width: min(100%, 460px);
    justify-self: center;
  }

  .fpLogin {
    height: auto;
    gap: 0;
  }

  .fpLogin__strips {
    display: none;
  }

  .fpLogin__label {
    padding-top: 16px;
    border-top: 1px solid var(--fp-line);
  }

  .fpLogin__label::before {
    top: -1px;
  }

  .fpLogin__app {
    font-size: 22px;
  }

  .fpLogin__host {
    margin-top: 2px;
    font-size: 14px;
  }

  .fp-anmeldung a.fpLogin__home {
    margin-top: 12px;
  }
}

/* ---------------------------------------------------------------------------
   Damit das Wort LaTeX dem originalen, typografisch versetzten Logo gleicht
   --------------------------------------------------------------------------- */

.latex-logo {
  font-family: "Latin Modern Roman", CMU Serif, "Times New Roman", Times, serif;
  display: inline-block;
  letter-spacing: -0.15em; /* Schiebt die Buchstaben näher zusammen */
}

/* Das 'a' wird hochgestellt und verkleinert */
.latex-logo span:first-child {
  text-transform: uppercase;
  font-size: 0.8em;
  vertical-align: 0.28em;
  margin-left: -0.12em;
  margin-right: -0.1em;
}

/* Das 'e' wird tiefgestellt */
.latex-logo span:last-child {
  text-transform: uppercase;
  vertical-align: -0.2em;
  margin-left: -0.12em;
  margin-right: -0.08em;
}