/* =========================================================================
   KRONENWERK — the unauthenticated surfaces
   =========================================================================

   Login, signup and password reset, on a two-panel composition: what the product
   is on the left, what to do about it on the right.

   The panel on the left exists because this is the only screen where KRONENWERK
   has to introduce itself. A centred form on an empty page says nothing about
   whether the software behind it keeps books for six countries or prints one
   kind of PDF, and the previous version said the latter.
   ========================================================================= */

.auth-seite {
  min-height: 100vh;
  /* Und die kleine Ansicht dort, wo der Browser eine Leiste einblendet:
     100vh ist auf iOS die GROSSE Ansicht, und die Anmeldeseite scrollte
     dadurch um die Hoehe der Adressleiste, ohne dass darunter etwas stand. */
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  position: relative;
  background: var(--grund);
}

/* ------------------------------------------------------------------ left */

.auth-links {
  background:
    /* A single warm pool of light behind the mark. Restraint is the point: gold
       used as a wash rather than an accent is how a premium palette becomes a
       novelty one. */
    radial-gradient(120% 80% at 12% 8%,
      color-mix(in srgb, var(--gold) 11%, transparent) 0%,
      transparent 58%),
    var(--flaeche-tief);
  border-right: 1px solid var(--linie);
  padding: clamp(40px, 6vw, 76px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.saeulen { max-width: 46ch; }

.saeulen-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.saeulen-kopf .mark { width: 46px; height: auto; color: var(--gold); flex: none; }
.wortmarke {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .21em;
  color: var(--tinte);
}

.saeulen-anspruch {
  font-size: clamp(22px, 2.4vw, 29px);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--tinte);
  margin: 0 0 34px;
  text-wrap: balance;
}

.saeulen-liste { list-style: none; padding: 0; margin: 0 0 34px; display: grid; gap: 18px; }
.saeulen-liste li { padding-left: 15px; border-left: 1px solid var(--linie-stark); }
.saeulen-liste h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-dunkel);
  letter-spacing: .01em;
  margin: 0 0 3px;
}
.saeulen-liste p { font-size: 13.5px; color: var(--tinte-3); margin: 0; line-height: 1.5; }

/* The six launch markets, stated rather than implied. A prospective customer in
   Poland should be able to see that Poland is real here without signing up. */
.saeulen-laender {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .07em;
  color: var(--tinte-2);
  margin: 0;
}

/* ------------------------------------------------------------------ right */

.auth-rechts {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 56px);
  background:
    /* The faintest lift toward the top edge, so the panel has a horizon rather
       than being a flat field with a form floating in the middle of it. */
    linear-gradient(180deg,
      color-mix(in srgb, var(--flaeche) 55%, transparent) 0%,
      transparent 42%),
    var(--grund);
}

/* Form and the free-checker card as one centred column, so the panel has content
   top and bottom rather than a form floating in an empty field. The previous
   version anchored the form near the top and left a third of the screen dead. */
.auth-rechts-inhalt {
  width: 100%;
  max-width: 372px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* Bei 200% Zoom auf einem 390er Telefon bleiben 195 CSS-Pixel, und davon nimmt der
   Namenszug mit seiner Sperrung allein 154. Er behält das Zeichen und gibt die Sperrung
   auf, statt die Anmeldemaske aus dem Fenster zu schieben. */
@media (max-width: 340px) {
  .saeulen-kopf { gap: 8px; }
  .saeulen-kopf .mark { width: 30px; }
  .wortmarke { font-size: 13px; letter-spacing: .1em; overflow-wrap: anywhere; }
}

.auth-form { width: 100%; min-width: 0; }
/* Ein Eingabefeld bringt eine eigene Mindestbreite mit (die Grösse-Voreinstellung des
   Browsers) und schiebt sonst seinen Behälter auf. */
.auth-form input, .auth-form select, .auth-form textarea { min-width: 0; max-width: 100%; }

.auth-nebenan a {
  display: block;
  padding: 13px 15px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
}
.auth-nebenan a:hover { border-color: var(--gold-linie); background: var(--flaeche-hoch); }
.auth-nebenan strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-dunkel);
  margin-bottom: 2px;
}
.auth-nebenan span { font-size: 12.5px; color: var(--tinte-3); line-height: 1.45; }

.auth-form h1 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.auth-form > .unter {
  color: var(--tinte-3);
  font-size: 13.5px;
  margin: 0 0 26px;
}

.auth-form .field { margin-bottom: 15px; }

/* A password field with a reveal control. Typing a long password blind, on a
   screen that will reject it without saying which character was wrong, is the
   most common reason people give up at a signup form. */
.passwortfeld { position: relative; }
.passwortfeld input { padding-right: 42px; }
.passwortfeld button {
  position: absolute;
  right: 1px; top: 1px; bottom: 1px;
  width: 38px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--tinte-3);
  cursor: pointer;
}
.passwortfeld button:hover { color: var(--tinte); }

.auth-form .btn-primary { width: 100%; padding: 11px 16px; font-size: 14.5px; }

.auth-fuss {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--linie);
  font-size: 13.5px;
  color: var(--tinte-3);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
/* Unterstrichen, nicht nur eingefaerbt.
   Hier stehen "Passwort vergessen?" und der Wechsel zwischen Anmelden und
   Registrieren -- fuer jemanden, der Farbe schlecht unterscheidet, waren das
   drei Woerter, die aussahen wie der Text daneben. */
.auth-fuss a { color: var(--gold-dunkel); text-decoration: underline;
  text-underline-offset: 2px; }
.auth-fuss a:hover { text-decoration: underline; text-decoration-color: var(--gold); }

/* ------------------------------------------------------------------ country */

/* The country field carries a consequence, so it says so. This is the one answer
   on the form that cannot be freely changed later, and a person who discovers
   that afterwards has a support ticket rather than a product. */
.landwahl { margin-bottom: 15px; }
.landwahl .warnung {
  font-size: 12px;
  color: var(--tinte-3);
  margin-top: 6px;
  padding-left: 11px;
  border-left: 2px solid var(--gold-linie);
  line-height: 1.45;
}

/* ------------------------------------------------------------------ language */

.sprachwahl { position: absolute; top: 20px; right: 24px; z-index: 30; }

.sprachwahl details { background: none; border: none; }
.sprachwahl summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: color-mix(in srgb, var(--flaeche) 80%, transparent);
  backdrop-filter: blur(6px);
  color: var(--tinte-2);
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}
.sprachwahl summary::-webkit-details-marker { display: none; }
.sprachwahl summary::before { content: none; }
.sprachwahl summary:hover { color: var(--tinte); border-color: var(--tinte-2); }
.sprachwahl .pfeil { font-size: 9px; color: var(--tinte-2); }

.sprachwahl ul {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 168px;
  list-style: none;
  margin: 0;
  padding: 5px;
  background: var(--flaeche-hoch);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  box-shadow: var(--schatten-hoch);
}
.sprachwahl li { padding: 0; border: none; }
.sprachwahl ul a {
  display: block;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  color: var(--tinte-2);
  text-decoration: none;
  font-size: 13.5px;
}
.sprachwahl ul a:hover { background: var(--flaeche); color: var(--tinte); }
.sprachwahl ul a.gewaehlt {
  color: var(--gold-dunkel);
  background: var(--gold-tief);
  font-weight: 500;
}
/* A tick as well as the colour, so the current language is legible in greyscale. */
.sprachwahl ul a.gewaehlt::after { content: " ✓"; float: right; }

/* ------------------------------------------------------------------ narrow */

@media (max-width: 880px) {
  /* minmax(0,1fr) und nicht 1fr.
   *
   * Eine 1fr-Spalte ist minmax(AUTO,1fr), und ihr Mindestmass ist der min-content ihres
   * Inhalts. Ein Formularfeld bringt einen eigenen Mindestwert mit, und so wurde die
   * einzige Spalte auf einem 390px-Telefon bei 200% Zoom 258 Pixel breit -- in einem
   * Fenster von 195. Die Anmeldemaske stand dann teils ausserhalb des Bildschirms. */
  .auth-seite { grid-template-columns: minmax(0, 1fr); }
  .auth-links, .auth-rechts { min-width: 0; }
  /* The proposition panel becomes a header rather than disappearing: somebody
     arriving on a phone should still learn what this is. */
  .auth-links {
    border-right: none;
    border-bottom: 1px solid var(--linie);
    padding: 62px 22px 26px;
  }
  .saeulen { max-width: none; }
  .saeulen-liste { display: none; }
  .saeulen-anspruch { font-size: 19px; margin-bottom: 18px; }
  .auth-rechts { padding: 28px 22px 44px; align-items: flex-start; }
  .auth-rechts-inhalt { max-width: none; gap: 22px; }
  .sprachwahl { top: 14px; right: 16px; }
}

/*
  Sechzehn Pixel in den Feldern -- und der Grund ist nicht die Lesbarkeit.

  Unterhalb von 16px vergroessert Safari auf dem iPhone beim Antippen eines
  Feldes die ganze Seite, und es zoomt danach nicht zurueck. Wer sich also auf
  dem Telefon registriert, tippt in das erste Feld und fuellt den Rest des
  Formulars auf einer Seite aus, die breiter ist als das Fenster: er muss zur
  Seite schieben, um den Knopf zu finden. Die Felder der Anwendung sind 14px,
  weil dort Dichte zaehlt; auf diesen fuenf Seiten zaehlt sie nicht.
*/
@media (max-width: 880px) {
  .auth-form input, .auth-form select, .auth-form textarea { font-size: 16px; }
}

/* ------------------------------------------------------- der zweite Weg hinein */

/*
  Die Schaltflaeche fuer Google, und der Trenner darunter.

  Sie steht ueber dem Formular und sieht deshalb bewusst NICHT aus wie der
  Absendeknopf: gleiche Groesse, aber heller Grund und eine Linie statt einer
  Fuellung. Wer das Formular ausfuellen will, soll den einen Knopf am Ende
  finden, ohne zwei gleich aussehende Knoepfe unterscheiden zu muessen.

  Das Zeichen ist eingebettetes SVG in Googles eigenen Farben -- kein
  Fremdbild: eine Anmeldeseite, die ein Bild von einem fremden Server holt,
  erzaehlt diesem Server, wer sich hier gerade anmeldet.
*/
.fremdanmeldung { display: flex; flex-direction: column; gap: 18px; margin-bottom: 4px; }

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--linie-stark);
  border-radius: 3px;
  background: var(--flaeche);
  color: var(--tinte);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease;
}

.btn-google:hover { border-color: var(--tinte-3); background: var(--flaeche-hoch); }
.btn-google:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn-google-zeichen { flex: none; display: block; }

/* Eine Linie mit einem Wort darin, ohne ein zusaetzliches Element dafuer. */
.fremdanmeldung-trenner {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tinte-3);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fremdanmeldung-trenner::before,
.fremdanmeldung-trenner::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linie);
}

@media (max-width: 880px) {
  .btn-google { font-size: 16px; }
}

/*
  Das Codefeld.

  Breiter Zeichenabstand und Tabellenziffern, damit sechs Ziffern als sechs
  Ziffern lesbar sind und nicht als eine Zahl -- wer abtippt, vergleicht
  Zeichen fuer Zeichen. Monospace waere naheliegend und ist hier falsch: die
  Ziffern der Hausschrift sind bereits gleich breit, und ein zweiter Schriftsatz
  auf einem Bildschirm mit einem einzigen Feld ist Laerm.
*/
.codefeld {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  font-size: 24px;
  text-align: center;
}

@media (max-width: 880px) {
  .codefeld { font-size: 24px; }
}