/* =========================================================================
   penemo-mockup — Gestaltung der Anmeldeseite

   MOCKUP: hier wird ausprobiert, nicht gebaut. Was sich bewaehrt, zieht
   spaeter nach penemo-web um - dort aber als Token in src/themes/, nicht
   als feste Farbe im Bauteil.

   Zwei Grundsaetze aus der Design-Richtung:
     - durchscheinend und gerundet statt kantig und satt
     - Hintergrund plus ZWEI Hauptfarben, hier Cyan und Orange aus dem
       Blumen-Logo. Mehr Farben machen es nicht froehlicher, nur unruhiger.
   ========================================================================= */

/* --- Farben und Masse an EINER Stelle -----------------------------------
   Damit ein Farbwechsel ein Zeilenwechsel ist und keine Suche. Genau das
   Muster, das penemo-app in themes/ schon verwendet. */
:root {
  /* Aus dem Logo abgenommen: die Wortmarke ist orange, der Untertitel cyan. */
  --orange:        #f5a21c;
  --orange-tief:   #d8880c;
  --cyan:          #1fa3be;
  --cyan-tief:     #17879e;

  --schrift:       #23252a;
  --schrift-leise: #6c7078;
  --linie:         #e3e6ea;

  --grund:         #ffffff;
  --karte:         rgba(255, 255, 255, 0.72);

  --rundung:       16px;
  --rundung-gross: 26px;

  /* --- Senkrechtes Mass -------------------------------------------------
     ZWEI Groessen, nicht eine, weil sie Verschiedenes tun:

       --luft     der Abstand ZWISCHEN den Bloecken. Darf eng werden.
       --polster  die Fuellung IN Feldern und Knoepfen. Darf das nur wenig -
                  ein Knopf, der auf 30 Pixel schrumpft, ist auf dem Handy
                  nicht mehr zu treffen.

     Sie haengen an der FENSTERHOEHE, nicht an der Breite. Der Grund, aus
     dem gescrollt werden musste, war nie zu wenig Platz seitlich. */
  --luft:    1rem;
  --polster: 0.8rem;

  /* --- Die zwei Regler fuer die Gesamtwirkung --------------------------
     Absichtlich hier oben und nicht im Layout verstreut: das sind die
     beiden Zahlen, an denen man dreht, wenn "zu gross" oder "zu dicht".

     --hoehe  wie hoch die beiden Karten sind. NICHT 100 % des Fensters:
              dann fuellte das hochkante Bild den ganzen Bildschirm, und
              die Seite wirkt groesser, obwohl die Schrift kleiner wurde.
     --spalt  der Abstand zwischen den Karten. Seit die Spalten nur noch
              inhaltsbreit sind, ist er der GANZE sichtbare Zwischenraum -
              vorher kam die Spaltenluft noch dazu. Derselbe Zahlenwert
              wirkt hier also viel enger als frueher. */
  --hoehe: min(86vh, 726px);        /* 30.08.2026: +10 % (war min(78vh, 660px)) */
  --spalt: clamp(1rem, 2.2vw, 2.25rem);

  /* Schatten in zwei Lagen: eine enge fuer die Kante, eine weite fuer die
     Tiefe. Ein einzelner grosser Schatten sieht immer nach Aufkleber aus. */
  --schatten:
    0 1px 2px rgba(20, 24, 30, 0.05),
    0 12px 40px rgba(20, 24, 30, 0.08);

  --system-schrift:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
}

/* Laptop-Klasse: hier war es zu hoch. */
@media (max-height: 900px) {
  :root { --luft: 0.72rem; --polster: 0.7rem; }
}

/* Sehr flach (kleine Notebooks, Fenster mit vielen Leisten). */
@media (max-height: 780px) {
  :root { --luft: 0.55rem; --polster: 0.62rem; }
}

*, *::before, *::after { box-sizing: border-box; }

/* 15 % kleiner. Ein Wert, der alles in rem gleichmaessig mitnimmt -
   Schrift, Abstaende, Fuellungen, Kartenbreite. Wer es wieder groesser
   will, aendert diese eine Zahl. */
html { font-size: 93.5%; }   /* 30.08.2026: +10 % (war 85 %) */

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--system-schrift);
  color: var(--schrift);
  background: var(--grund);

  /* Der Hintergrund: EINE sehr blasse Farbwolke, unten rechts.
     Die zweite lag oben links bei 12% 8% - also genau hinter dem Bild.
     Seit das Bild ohne Karte frei auf der Seite steht, war sie als
     leichte Abdunkelung sichtbar und nahm ihm den randlosen Uebergang.
     Unten rechts stoert sie nichts und haelt die Flaeche lebendig. */
  background-image:
    radial-gradient(52rem 38rem at 92% 92%, rgba(245, 162, 28, 0.12), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* --- Buehne: zwei Spalten ------------------------------------------------ */
.buehne {
  min-height: 100vh;
  display: grid;

  /* auto auto statt 1.05fr 1fr - DAS war der eigentliche Grund fuer den
     grossen Abstand: fr-Spalten fuellen die ganze Breite, und jede Karte
     schwamm mittig in ihrer viel zu breiten Spalte. Der Leerraum
     dazwischen war also gar kein gap und liess sich ueber ihn auch nicht
     wegnehmen.
     Jetzt sind die Spalten nur so breit wie ihr Inhalt, und
     justify-content: center rueckt das PAAR in die Mitte. */
  grid-template-columns: auto auto;
  justify-content: center;
  gap: var(--spalt);

  /* Die Zeile ist so hoch wie --hoehe und sitzt MITTIG im Fenster.
     Vorher streckte sie sich auf die volle Fensterhoehe - daher der
     Eindruck, alles sei groesser geworden. */
  align-content: center;
  align-items: stretch;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  max-width: 1500px;
  margin: 0 auto;
}

/* --- Links: das Bild -----------------------------------------------------
   KEINE Karte. Das Bild steht frei auf dem Seitenhintergrund - ohne
   Rundung, ohne Schatten, ohne eigene Flaeche. Sein eigener Hintergrund
   ist weiss und geht damit nahtlos in die Seite ueber; sichtbar bleibt
   allein die Collage.

   Der Gegensatz ist Absicht: rechts eine Karte, die etwas umschliesst und
   Eingaben aufnimmt, links ein Bild, das einfach da ist. Zwei gleich
   gerundete Flaechen nebeneinander lesen sich als zwei Bedienbereiche -
   und einer davon ist keiner.

   `contain`, nicht `cover`: das Bild wird IMMER vollstaendig gezeigt.
   `cover` wuerde je nach Fenstergroesse mal die Collage, mal die
   Wortmarke abschneiden, und zwar unvorhersehbar. */
.bildseite {

  /* Raster statt Flex: das Kind streckt sich von allein auf die volle
     Hoehe, und mit min-height/min-width 0 kann es auch wieder schrumpfen.
     Bei Flex braeuchte es dafuer Zusatzregeln. */
  display: grid;
  min-width: 0;
  min-height: 0;

  /* Hoehe vorgegeben, Breite daraus ausgerechnet: 1104 / 1408 = 0.784,
     das Seitenverhaeltnis der Bilddatei. Kein aspect-ratio, weil dessen
     Breite von der Zeilenhoehe abhinge, die Zeile aber von der Spalte -
     das ist ein Kreis, den der Browser zwar aufloest, aber nicht
     unbedingt so, wie man es meint.
     WIRD DAS BILD AUSGETAUSCHT, gehoeren diese beiden Zahlen nachgezogen. */
  height: var(--hoehe);
  width: calc(var(--hoehe) * 1104 / 1408);
}

.bildseite__bild {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;

  /* contain, nicht cover: das Bild wird IMMER vollstaendig gezeigt, nie
     angeschnitten. Der Leerraum, der dabei oben und unten entsteht, ist
     weiss - genau wie der Bildhintergrund. Man sieht ihn deshalb nicht. */
  object-fit: contain;
}

/* --- Rechts: die Anmeldung ---------------------------------------------- */
.anmeldung {
  display: flex;
  justify-content: center;
  align-items: stretch;      /* die Karte nimmt die volle Zeilenhoehe */
  min-width: 0;

  /* Die Spalte ist genau so breit wie die Karte darin. Sonst haette die
     auto-Spalte wieder Luft, in der die Karte schwimmt - derselbe Fehler
     wie oben, nur eine Ebene tiefer. */
  width: 26rem;
  max-width: 100%;

  /* Dieselbe Hoehe wie die Bildkarte - darum ging es ja. */
  height: var(--hoehe);
}

.karte {
  width: 100%;
  max-width: 26rem;
  padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1.5rem, 2.4vw, 2.25rem);

  /* Der Inhalt sitzt mittig in der gestreckten Karte. Ohne das klebte er
     bei hohen Fenstern oben und die Karte waere unten leer. */
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* Durchscheinend statt deckend - der Hintergrund schimmert durch. */
  background: var(--karte);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--rundung-gross);
  box-shadow: var(--schatten);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Der Satz aus dem Bild. Dieselbe Schriftart und dieselbe Farbe wie der
   Untertitel im Logo ("Social network for all lifestyles") - das ist die
   Klammer, die die linke und die rechte Seite zusammenhaelt. */
.karte__marke {
  margin: 0 0 var(--luft);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  font-size: clamp(0.875rem, 1.15vw, 0.9375rem);
  line-height: 1.5;
  color: var(--cyan);
  letter-spacing: -0.01em;
}

.karte__titel {
  margin: 0 0 calc(var(--luft) * 1.25);
  /* 05.09.2026: um ein Viertel verkleinert (war clamp(1.4rem, 2.4vw, 1.75rem)).
     Alle drei Werte mit 3/4 multipliziert, damit das Mitwachsen mit der
     Fensterbreite erhalten bleibt - eine feste Groesse waere auf kleinen
     Schirmen zu gross und auf grossen zu klein.
     Ein Drittel war zu viel: dann lag die Ueberschrift auf der Groesse der
     Marke darueber, und die Hierarchie hing nur noch am Fettdruck. */
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- Eingabefelder ------------------------------------------------------- */
.formular { display: grid; gap: var(--luft); }

.feld { display: grid; gap: 0.35rem; }

.feld__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--schrift-leise);
}

.feld__eingabe {
  width: 100%;
  padding: var(--polster) 0.95rem;
  font: inherit;
  color: var(--schrift);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.feld__eingabe::placeholder { color: #a8adb5; }

/* Sichtbarer Fokus ist keine Zierde. Wer mit der Tastatur navigiert, sieht
   sonst nicht, wo er ist - und der Browser-Standard verschwindet auf
   hellem Grund. */
.feld__eingabe:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(31, 163, 190, 0.18);
}

/* --- Knoepfe ------------------------------------------------------------- */
.knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  padding: var(--polster) 1rem;
  font: inherit;
  font-weight: 600;
  border-radius: var(--rundung);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.05s;
}

.knopf:active { transform: translateY(1px); }

.knopf:focus-visible {
  outline: 3px solid rgba(31, 163, 190, 0.45);
  outline-offset: 2px;
}

/* Der eigentliche Weg: als einziger satt gefuellt. Wenn alles gleich laut
   ist, ist nichts mehr betont. */
.knopf--haupt {
  margin-top: 0.25rem;
  color: #ffffff;
  background: var(--orange);
}
.knopf--haupt:hover { background: var(--orange-tief); }

/* Die drei Fremdanbieter tragen ihre Marke im Zeichen, nicht in der
   Flaeche. Drei verschiedenfarbige Knoepfe untereinander waeren ein
   Flickenteppich - und die Aufmerksamkeit gehoert dem Anmelden-Knopf. */
.knopf--fremd {
  color: var(--schrift);
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--linie);
  font-weight: 500;
  justify-content: flex-start;
}
.knopf--fremd:hover { border-color: #c9cfd6; background: #ffffff; }

.knopf--zweit {
  color: var(--cyan-tief);
  background: transparent;
  border-color: var(--cyan);
}
.knopf--zweit:hover { background: rgba(31, 163, 190, 0.08); }

.marke { width: 20px; height: 20px; flex: 0 0 20px; }

/* --- Trenner ------------------------------------------------------------- */
.trenner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: calc(var(--luft) * 1.15) 0;
  color: var(--schrift-leise);
  font-size: 0.8125rem;
}
.trenner::before,
.trenner::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linie);
}

.fremdanmeldung { display: grid; gap: calc(var(--luft) * 0.55); }

/* --- Kleinkram ----------------------------------------------------------- */
.vergessen {
  margin: var(--luft) 0;
  text-align: center;
  font-size: 0.875rem;
}

.verweis {
  color: var(--cyan-tief);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.verweis:hover { border-bottom-color: currentColor; }

.fusszeile {
  margin: calc(var(--luft) * 1.2) 0 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--schrift-leise);
}

/* =========================================================================
   Schmale Fenster: untereinander statt nebeneinander.
   Das Bild wird zur Kopfzeile - es soll den Anmeldebereich nicht unter
   den Bildschirmrand druecken.
   ========================================================================= */
@media (max-width: 900px) {
  .buehne {
    grid-template-columns: 1fr;
    justify-content: stretch;   /* untereinander: volle Breite nutzen */
    align-content: start;
    gap: 1rem;
  }
  /* Untereinander gilt weder das feste Seitenverhaeltnis noch die feste
     Spaltenbreite - beide wuerden die Karten hier verzerren. */
  .bildseite { width: auto; height: auto; }
  .anmeldung { width: auto; height: auto; }
  /* Untereinander gilt "gleich hoch" nicht mehr - da wuerde das hochkante
     Bild den Anmeldebereich unter den Bildschirmrand druecken. */
  .bildseite__bild { height: auto; max-height: 38vh; }
}

/* Wer Bewegung reduziert haben moechte, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}