/* ============================================================================
   gx-portal.css , Optik-Anhebung nach GX-Baukasten (10.08.2026)

   Zweck: die Regeln aus 12_ASSETS/Optik_Bibliothek/baukasten/DNA.md auf die
   Außenseiten des Portals anwenden, OHNE bestehende Dateien umzuschreiben.
   Diese Datei wird als LETZTES eingebunden und korrigiert gezielt.

   Betrifft: Anmeldung (index.html), Seitenkopf, Projektaufnahme.
   Nichts hier verändert Logik, Klassen oder IDs. Reine Darstellung.

   Regeln, die hier durchgesetzt werden (DNA §3):
     1  Mikrotypo in Versalien nur für kurze Label, nie für Fließtext
     2  Glühen weich, aus einer Ecke, eine Farbe
     3  Displayzeilen enger stellen (Laufweite negativ)
     4  Text über Fläche mindestens 4,5:1
   ========================================================================= */

/* ------------------------------------------------------------- Anmeldung */

/* 1  Der Hinweis "Zugang ausschließlich auf Einladung" stand in 11 px
      Versalien mit 0,18em Sperrung. Das ist Label-Typografie auf 106 Zeichen
      Fließtext, dadurch schwer lesbar und unruhig. Die Signaturzeile darunter
      darf Versalien behalten, sie ist kurz. */
.login-footer-note{
  display: block;                      /* war flex, dadurch klebten beide Zeilen */
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  font-family: inherit;
  font-size: .8125rem;
  line-height: 1.6;
  color: #A8B0A0;
}
.login-footer-note > div:first-child{
  font-size: .8125rem !important;      /* überschreibt den Inline-Wert 11px */
  color: #A8B0A0 !important;           /* gemessen 7,2:1 gegen die Fläche */
  letter-spacing: normal;
  max-width: 34ch;
  margin-inline: auto;
}
.login-footer-note a{
  color: #FEDA03 !important;           /* schlägt die grüne Inline-Farbe der Altfassung */
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.login-footer-note a:hover{ text-decoration-thickness: 2px; }
/* Signaturzeile: kurz, darf Mikrotypo bleiben, aber ruhiger gesetzt */
.login-footer-note > div:last-child{
  margin-top: .85rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7C8472;
}

/* 2  Kein zusätzliches Glühen. Der bestehende Hintergrund der Anmeldung
      trägt bereits einen goldenen Schein. Ein zweiter Verlauf darüber hat die
      Fläche im Test gelb überzogen und wirkte schlechter als vorher.
      Übernommen wird nur die feine Rasterstruktur, sehr zurückhaltend. */

/* 3  Feine senkrechte Rasterlinien geben der leeren Fläche Halt.
      Kommt in fast jeder Referenz vor, kostet nichts. */
.login-page::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: calc(100% / 8) 100%;
  -webkit-mask-image: radial-gradient(68% 58% at 50% 42%, #000 26%, transparent 76%);
  mask-image: radial-gradient(68% 58% at 50% 42%, #000 26%, transparent 76%);
}
.login-page > *{ position: relative; z-index: 1; }

/* 4  Displaytypografie: Zeilenhöhe und Laufweite nach DNA */
.login-title{
  letter-spacing: -.03em;
  line-height: 1.04;
}
.login-sub{
  max-width: 46ch;          /* 36ch ließ das Wort "an." allein in Zeile 2 stehen */
  margin-inline: auto;
  line-height: 1.6;
  text-wrap: balance;
}

/* 5  Die Karte bekommt die Glanzkante oben. Ohne sie wirkt Glas wie ein
      grauer Kasten (DNA §3.5). */
.login-card{
  position: relative;
  overflow: hidden;
}
.login-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  pointer-events: none;
}

/* 6  Der Anmeldeknopf trägt das Gold flächig. Ein Hauch Tiefe genügt,
      damit er nicht wie ein Farbbalken wirkt. */
.login-btn{
  letter-spacing: -.005em;
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s cubic-bezier(.22,.61,.36,1);
}
.login-btn:hover{ transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce){
  .login-btn{ transition: none; }
  .login-btn:hover{ transform: none; }
}

/* --------------------------------------------------------- Seitenköpfe */

/* Displayzeilen enger stellen. Das ist der einzige Eingriff am Seitenkopf:
   die Glas-Pille trägt bereits die 7-Schicht-DNA aus /glass-hero, ein
   zweites Materialkonzept darüber würde nur kollidieren. */
.topbar-title{
  letter-spacing: -.03em;
  line-height: 1.06;
}
.topbar-breadcrumb .crumb{
  letter-spacing: .02em;
}

/* ------------------------------------------------ Datenraum-Außenseiten */

/* Außenseiten sehen Externe, oft als Erstes. Fließtext bekommt eine
   lesbare Zeilenlänge und ruhigen Durchschuss (DNA: 62 Zeichen, 1,62). */
.e-sub,
.page-sub,
.datenraum-sub{
  max-width: 62ch;
  line-height: 1.62;
}

/* Sektionslabel mit vorangestelltem Strich, falls eine Seite es nutzen will.
   Kein Markup-Zwang: wer die Klasse nicht setzt, merkt nichts davon. */
.gx-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--text-muted, #8A7E6E);
  margin-bottom: .55rem;
}
.gx-eyebrow::before{
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold, #FEDA03);
  flex: none;
}