/* ==========================================================================
   landing.css – Landingpage: Netzwerk-Bild mit Login-Feld in der Mitte
   Aufbau: 1 Seite · 2 Bild + Formular · 3 Fußzeile · 4 Mobil (verschiebbares Bild)
   ========================================================================== */

/* Zweck: Schrift nie automatisch vergrößern. iOS-Safari bläht sonst Text in breiten Blöcken auf (Login-Text wurde viel größer als das Bild und ragte aus dem Kreis).
     Verwendet von: gesamte Startseite (landing.css wird nur dort geladen).
     Registrierung: Regel in landing.css. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* 1. Seite: Bild mittig */
/* Zweck: Seitenbereich: zentriert das Bild; mobil (Abschnitt 4) wird er zum Verschiebe-Bereich.
     Verwendet von: <main class="seite"> in Startseite/Index.cshtml; landing.js setzt mobil scrollLeft/scrollTop darauf.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.seite {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px; padding: max(8px, min(2vw, 28px));   /* ohne clamp(): Rückfall 16 px für ältere Safari-Versionen */
}

/* 2. Bild + Formular. .netz ist ein "Container": Formular-Maße skalieren mit der Bildbreite (cqw).
      1 Einheit --u = 1 Pixel der Bild-Zeichenfläche (Breite 1768.9 Einheiten). */
/* Zweck: Container des Bildes; --u = 1 Einheit der Bild-Zeichenfläche (Breite 1768.9), damit das Formular mit dem Bild skaliert.
     Verwendet von: <div class="netz"> in Startseite/Index.cshtml; landing.js setzt --u als Rückfall, wenn cqw-Einheiten fehlen.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
/* Breite = kleinster Wert aus: Fensterbreite, 1500 px und der Breite, bei der das Bild (Seitenverhältnis 1,5) in die sichtbare Höhe passt
   (Höhe minus Fußzeile/Abstand ca. 110 px, mal 1,5). Dadurch ist die Seite auf Laptops mit niedrigem Fenster ohne Verkleinern (Strg -) komplett sichtbar.
   Untergrenze 640 px, damit das Formular bei sehr niedrigen Fenstern lesbar bleibt. Mobil (<= 900 px) überschreibt den Wert in Abschnitt 4. */
.netz { position: relative; width: min(100%, 1500px, max(640px, calc((100vh - 110px) * 1.5))); container-type: inline-size; --u: calc(100cqw / 1768.9); }
/* Zweck: Das transparente Netzwerk-Bild (Gelb scheint durch).
     Verwendet von: <img class="netz__bild"> in Startseite/Index.cshtml.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.netz__bild { display: block; width: 100%; height: auto; }   /* transparentes PNG, Gelb scheint durch */

/* Zweck: Positioniert das Formular mittig im Login-Kreis des Bildes (Prozentwerte aus der Bildberechnung).
     Verwendet von: <form class="formular"> in Startseite/Index.cshtml; landing.js nutzt dieselben Werte (data-cx/data-cy) zum Zentrieren.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.formular {
  position: absolute;
  left: calc(49.619% - 142.5 * var(--u));              /* Formular mittig im Login-Kreis (Prozent aus der Bildberechnung) */
  top: calc(49.453% - 14 * var(--u));                  /* obere Kante des Eingabefelds (4 Einheiten höher: der letzte Text lag sonst am Kreisrand) */
  width: calc(285 * var(--u));
}
/* Zweck: Spalte aus Eingabefeld, Knopf, Hinweisen und Status.
     Verwendet von: <div class="login"> in Startseite/Index.cshtml; landing.js setzt die Zustandsklassen login--ok/laedt/info/fehler.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login { display: flex; flex-direction: column; gap: calc(9 * var(--u)); }   /* Abstände enger (vorher 14): die ganze Spalte passt jetzt in den Kreis */
/* Zweck: Eingabefeld-Rahmen (dunkel mit goldener Linie).
     Verwendet von: <label class="login__feld"> um das Feld #code.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login__feld {                                         /* Eingabefeld wie im Bild: dunkel mit goldener Linie */
  display: flex; align-items: center; height: calc(38 * var(--u)); padding: 0 calc(14 * var(--u));
  background: #ffffff; border: 1.3px solid rgba(194, 125, 0, .6); border-radius: calc(8 * var(--u));   /* helle Kreismitte: weißes Feld mit dunklem Gold */
}
/* Zweck: Sichtbarer Fokus für Tastatur-Nutzer.
     Verwendet von: wie .login__feld.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login__feld:focus-within {                            /* sichtbarer Fokus für Tastatur-Nutzer */
  border-color: #1b7bbd; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(27, 123, 189, .30);
}
/* Zweck: Schloss-Symbol im Eingabefeld.
     Verwendet von: <svg class="login__icon"> in Startseite/Index.cshtml.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login__icon { flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); margin-right: calc(8 * var(--u)); }
/* Zweck: Das Eingabefeld für den Zugangscode (#code).
     Verwendet von: <input class="login__eingabe" id="code">; landing.js liest und prüft den Wert.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login__eingabe {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #13202b;
  font: inherit; font-size: max(8px, calc(14.5 * var(--u))); letter-spacing: .02em;
}
/* Zweck: Farbe des Platzhaltertextes.
     Verwendet von: wie .login__eingabe.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login__eingabe::placeholder { color: #6b7785; opacity: 1; }
/* Zweck: Schloss-Symbol im Feld dunkler (Kontrast auf Weiß). Verwendet von: <svg class="login__icon">; CSS-Eigenschaft stroke überschreibt das Attribut im SVG. */
.login__icon path, .login__icon circle, .login__icon rect { stroke: #c27d00; }
/* Zweck: Hellblauer Login-Schalter.
     Verwendet von: <button class="login__knopf"> in Startseite/Index.cshtml; landing.js setzt disabled während der Prüfung.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login__knopf {                                        /* Login-Schalter in Hellblau */
  display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u));
  height: calc(36 * var(--u)); border: 0; border-radius: calc(7 * var(--u)); cursor: pointer;
  background: linear-gradient(180deg, var(--hellblau-1), var(--hellblau-2)); color: #06223a;
  font: 600 max(8px, calc(14.5 * var(--u))) var(--schrift); transition: filter .15s, transform .05s;
}
/* Zweck: Hover-Zustand.
     Verwendet von: wie .login__knopf.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login__knopf:hover { filter: brightness(1.07); }
/* Zweck: Gedrückt-Zustand.
     Verwendet von: wie .login__knopf.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login__knopf:active { transform: translateY(1px); }
/* Zweck: Tastaturfokus.
     Verwendet von: wie .login__knopf.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login__knopf:focus-visible { outline: 2px solid #13202b; outline-offset: 2px; }
/* Zweck: Zustand während der Prüfung (landing.js setzt disabled).
     Verwendet von: wie .login__knopf.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login__knopf[disabled] { cursor: progress; filter: saturate(.6) brightness(.95); }   /* während der Prüfung */
/* Zweck: Kleiner Hinweistext unter dem Knopf.
     Verwendet von: <p class="login__hinweis"> in Startseite/Index.cshtml.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login__hinweis {
  display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u));
  margin: calc(4 * var(--u)) 0 0; color: #3b4a57; font-size: max(7.5px, calc(12.5 * var(--u)));
}
/* Zweck: Zeile "Noch kein Zugang? Zugang anfordern".
     Verwendet von: <p class="login__anfrage"> in Startseite/Index.cshtml.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login__anfrage {                                      /* Zeile "Noch kein Zugang? Zugang anfordern" unter dem Hinweis */
  margin: calc(-6 * var(--u)) 0 0; text-align: center; color: #3b4a57; font-size: max(7.5px, calc(12.5 * var(--u)));
}
/* Zweck: Knopf, der wie ein Link aussieht; öffnet den Dialog.
     Verwendet von: <button class="login__anfrage-knopf js-anfrage-oeffnen">; anfrage.js öffnet den Dialog.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login__anfrage-knopf {                                /* wie ein Link gestaltet, aber ein echter Knopf (Tastatur, Vorlese-Programme) */
  padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600;
  color: #1b6fb0; text-decoration: underline; text-underline-offset: 2px;
}
/* Zweck: Hover-Zustand.
     Verwendet von: wie .login__anfrage-knopf.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login__anfrage-knopf:hover { color: #0b4a80; }
/* Zweck: Tastaturfokus.
     Verwendet von: wie .login__anfrage-knopf.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login__anfrage-knopf:focus-visible { outline: 2px solid #13202b; outline-offset: 2px; border-radius: 3px; }
/* Zweck: Rückmeldezeile (Fehler rot, Erfolg grün, Hinweis blau).
     Verwendet von: <p class="login__status">; landing.js schreibt den Text.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login__status {                                       /* Rückmeldung: Fehler rot, Erfolg grün, Hinweis blau */
  min-height: 1.3em; margin: 0; text-align: center; font-weight: 600; color: #b3261e;
  font-size: max(8px, calc(12.5 * var(--u))); line-height: 1.3;
}
/* Zweck: Erfolgsfarbe.
     Verwendet von: landing.js setzt login--ok am Formular.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login--ok .login__status { color: #1b7a43; }
/* Zweck: Lade-/Infofarbe.
     Verwendet von: landing.js setzt login--laedt bzw. login--info.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login--laedt .login__status, .login--info .login__status { color: #1b6fb0; }
/* Zweck: Wackel-Animation bei Fehler.
     Verwendet von: landing.js setzt login--fehler.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.login--fehler .login__feld { animation: schuetteln .35s; border-color: #d93025; }   /* kurzes Wackeln bei Fehler */
/* Zweck: Animation: kurzes Wackeln.
     Verwendet von: .login--fehler .login__feld.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
@keyframes schuetteln { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
/* Zweck: Bewegung abschalten, wenn der Nutzer es wünscht.
     Verwendet von: .login--fehler .login__feld.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
@media (prefers-reduced-motion: reduce) { .login--fehler .login__feld { animation: none; } }   /* Bewegung abschaltbar */

/* 3. Fußzeile */
/* Zweck: Fußzeile mit Links (Impressum/Datenschutz).
     Verwendet von: <footer class="fuss"> in Startseite/Index.cshtml.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.fuss { padding: 10px 16px 18px; text-align: center; font-size: 13px; }
/* Zweck: Links in der Fußzeile.
     Verwendet von: wie .fuss.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
.fuss a { margin: 0 8px; color: var(--navy); }

/* 4. Mobil (schmale Bildschirme): Das GANZE Bild bleibt sichtbar, ist aber größer als der Bildschirm.
      Der Bereich .seite füllt den Bildschirm und ist selbst der Verschiebe-Bereich (overflow: auto): Man schiebt mit dem
      Finger nach links/rechts/oben/unten. (Ein eigener Bereich statt der ganzen Seite, weil mobile Browser bei breiten
      Seiten die "Layout-Breite" verändern und das Scrollen der Seite dann unzuverlässig wird.)
      landing.js zentriert beim Laden das Login-Feld. Eingabeschrift mindestens 16 px: iOS zoomt dann nicht automatisch. */
/* Zweck: Mobil-Layout: Bild größer als der Bildschirm, .seite wird verschiebbarer Bereich, Schrift mindestens 16 px, Fußzeile fest unten.
     Verwendet von: Alle Elemente dieser Datei bei Bildschirmbreite bis 900 px; landing.js zentriert das Login-Feld beim Laden.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach basis.css). */
@media (max-width: 900px) {
  .seite {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;       /* füllt den Bildschirm */
    display: block; padding: 0; overflow: auto;                  /* Bild ragt hinaus -> verschiebbar */
    overscroll-behavior: contain;                                /* kein "Mitziehen" der Browserleiste am Rand */
    -webkit-overflow-scrolling: touch;                           /* weiches Schieben auf älterem iOS */
  }
  /* Fest groß, unabhängig vom Bildschirm (1700 bis 2100 px). Bewusst OHNE clamp(): Safari bis iOS 13.3 kennt clamp() nicht, die Regel wäre dort ungültig,
     das Bild bliebe bildschirmbreit und die mit max(16px, ...) gesetzten Texte im Login-Kreis wirkten riesig. max(min()) kennt Safari ab 11.1; davor gilt der feste Wert. */
  .netz { width: 1700px; width: max(1700px, min(560vw, 2100px)); }
  .login__eingabe { font-size: max(16px, calc(14.5 * var(--u))); }   /* 16 px verhindert Auto-Zoom auf iOS */
  .login__knopf { font-size: max(16px, calc(14.5 * var(--u))); }
  .login__status { font-size: max(14px, calc(12.5 * var(--u))); }
  .login__hinweis { font-size: max(12px, calc(12.5 * var(--u))); }   /* 12 px (vorher 13): schmale Zeilen am unteren Kreisrand passen sonst nicht hinein */
  .login__anfrage { font-size: max(12.5px, calc(12.5 * var(--u))); }   /* vorher 14 px: "Noch kein Zugang?" ragte links über den Kreisrand */
  .fuss {                                                        /* immer erreichbar, auch beim Verschieben */
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: 8px 12px; background: rgba(255, 210, 31, .92);
  }
}

/* Zweck: Startseite in der Farbstruktur "Gelb-Orange-Diagonalverlauf mit Punktraster" (überschreibt den radialen Verlauf aus basis.css nur für body.seite-landing).
     Verwendet von: <body class="seite-landing"> (ViewData["Seite"] in Startseite/Index.cshtml).
     Registrierung: Regel in landing.css (geladen von Startseite/Index.cshtml); Kachel wwwroot/img/punkte.svg (erzeugt von tools/bild/erzeuge_hintergruende.py). */
.seite-landing::before {
  background: url("/img/punkte.svg") 0 0 / 26px 26px repeat,
              linear-gradient(105deg, #fdf8e5 0%, #fef9e3 38%, #feeea4 56%, #fdc71c 74%, #fe8d11 88%, #fd7b0e 100%);   /* Farbablauf des Ziel-Mockups (Chevron-Abschnitt): Creme -> Gelb -> Orange, Farbwerte aus dem Mockup gemessen */
}

/* Zweck: Schild-Symbol im Hinweis dunkler (Kontrast auf der weißen Kreismitte). Verwendet von: <p class="login__hinweis"> mit svg. */
.login__hinweis path { stroke: #c27d00; }