/* =============================================================================
   WissensHub, Grundgestalt
   -----------------------------------------------------------------------------
   Angelegt am 27.08.2026 fuer Etappe 1, Schritt 2.

   Absichtlich klein. Das ist die Mechanik, nicht das Aussehen eines Kunden.
   Je Hub kommt spaeter ein eigenes Thema darueber, so wie `112-thema.css` und
   `simplex-thema.css` ueber `fundament.css` liegen. Deshalb stehen alle Farben
   und Schriften hier als Variablen und nirgends fest im Regelwerk: ein Thema
   ueberschreibt dann nur den `:root`-Block und nicht dreissig Regeln.

   Fuers Handy gebaut und nicht handytauglich gemacht. Ein Lernender oeffnet
   den Hub in der Bahn, nicht am Schreibtisch.
   ============================================================================= */

:root {
  --navy:      #1E3A5F;
  --karmesin:  #922B3E;
  --grund:     #FEFEFE;
  --text:      #1F2933;
  --leise:     #52637A;
  --linie:     #E2E8F0;
  --schrift:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --rundung:   10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2rem 1.25rem 4rem;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.blatt {
  max-width: 34rem;
  margin: 0 auto;
}

h1 {
  color: var(--navy);
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0 0 .75rem;
}

.lead {
  color: var(--leise);
  margin: 0 0 1.75rem;
}

/* --- Meldungen ------------------------------------------------------------ */
.meldung {
  border-left: 3px solid var(--navy);
  background: #F4F7FA;
  border-radius: 0 var(--rundung) var(--rundung) 0;
  padding: .85rem 1rem;
  margin: 0 0 1.5rem;
}
.meldung.hinweis { border-left-color: var(--karmesin); }

/* --- Anmeldung ------------------------------------------------------------ */
.anmeldung { display: flex; flex-direction: column; gap: .5rem; }

.anmeldung label {
  font-weight: 600;
  font-size: .95rem;
  color: var(--navy);
}

/* 17px und keinen Punkt weniger: unter 16px zoomt iOS beim Hineintippen in das
   Feld hinein, die Seite springt, und es sieht aus, als sei sie kaputt.
   Dieselbe Begruendung steht in 112-tuer.css. */
.anmeldung input[type="email"],
.anmeldung input[type="password"] {
  font: inherit;
  font-size: 17px;
  padding: .8rem .9rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: #fff;
}
.anmeldung input[type="email"]:focus,
.anmeldung input[type="password"]:focus {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
  border-color: var(--navy);
}

.anmeldung button {
  font: inherit;
  font-weight: 600;
  margin-top: .5rem;
  padding: .85rem 1rem;
  border: 0;
  border-radius: var(--rundung);
  background: var(--navy);
  color: #fff;
  cursor: pointer;
}
.anmeldung button:hover { background: #16304f; }

/* Der zweite Knopf ist ein gleichwertiger Weg und kein Notausgang, deshalb
   sichtbar und nicht als kleiner Link versteckt. Ruhiger als der erste, damit
   die Seite eine Empfehlung ausspricht, ohne den anderen Weg zu verbergen. */
.anmeldung button.zweitrangig {
  margin-top: .15rem;
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--linie);
}
.anmeldung button.zweitrangig:hover { background: #F4F7FA; }

.leise { font-weight: 400; color: var(--leise); }

/* Zaehlt beim Tippen mit, statt nach dem Absenden abzulehnen. */
.zaehler {
  margin: .1rem 0 0;
  font-size: .88rem;
  color: var(--leise);
}
.zaehler.kurz { color: var(--karmesin); }
.zaehler.gut  { color: #1B7A4B; }

.meldung ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.meldung li { margin: .15rem 0; }
.meldung p  { margin: 0; }

/* Die Falle fuer Maschinen. Nicht `display:none`: manche Ausfueller fuellen
   auch verborgene Felder, aber viele ueberspringen ausgeblendete. So steht das
   Feld im Baum, ist aber fuer Menschen unsichtbar und nicht erreichbar. */
.falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Angebote ------------------------------------------------------------- */
.angebote { list-style: none; margin: 0 0 1.5rem; padding: 0; }

.angebote li {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .9rem 1rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  margin-bottom: .6rem;
}
.angebote span { color: var(--leise); font-size: .9rem; }
.angebote .zu   { color: var(--karmesin); }

/* --- Verwaltung ----------------------------------------------------------- */
h2 {
  color: var(--navy);
  font-size: 1.15rem;
  margin: 2.25rem 0 .75rem;
}

.anmeldung select,
.reihe select,
.reihe input {
  font: inherit;
  font-size: 17px;
  padding: .7rem .8rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: #fff;
  color: var(--text);
}

.ankreuz {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 400;
  color: var(--text);
  margin-top: .4rem;
}
.ankreuz input { width: 1.1rem; height: 1.1rem; }

/* Eine Karte je Person. Keine Tabelle: auf dem Handy waere sie unlesbar, und
   die Verwaltung wird unterwegs benutzt wie alles andere hier. */
.karte {
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  padding: .9rem 1rem;
  margin-bottom: .7rem;
}
.karte.gesperrt { border-color: var(--karmesin); }

.karte .kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}
.karte .rolle {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--leise);
}
.klein { font-size: .85rem; }
.warn  { color: var(--karmesin); }

.zugaenge { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .92rem; }
.zugaenge li { padding: .15rem 0; }

details { margin-top: .6rem; }
summary {
  cursor: pointer;
  color: var(--navy);
  font-size: .9rem;
}
.werkzeuge { margin-top: .6rem; display: flex; flex-direction: column; gap: .5rem; }

/* Auf dem Handy untereinander, ab Tablet nebeneinander. */
.reihe { display: flex; flex-wrap: wrap; gap: .4rem; }
.reihe input, .reihe select { flex: 1 1 8rem; min-width: 0; }
.reihe button {
  font: inherit;
  font-size: .92rem;
  padding: .7rem .9rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}
.reihe button:hover { background: #F4F7FA; }
.reihe button.warnknopf { color: var(--karmesin); border-color: var(--karmesin); }

/* --- Fuss ----------------------------------------------------------------- */
.fussnote {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
  color: var(--leise);
  font-size: .9rem;
}
.fussnote a { color: var(--navy); }

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #12181F;
    --text:  #E8EDF2;
    --leise: #9AAABC;
    --linie: #2A3542;
    --navy:  #7FA9D4;
  }
  .meldung { background: #1A222C; }
  .anmeldung input[type="email"],
  .anmeldung input[type="password"] { background: #1A222C; color: var(--text); }
  .anmeldung button { color: #10161C; }
  .anmeldung button.zweitrangig { background: transparent; color: var(--navy); }
  .anmeldung button.zweitrangig:hover { background: #1A222C; }
  .anmeldung select,
  .reihe select,
  .reihe input { background: #1A222C; color: var(--text); }
  .reihe button:hover { background: #1A222C; }
  .zaehler.gut { color: #5FD19A; }
}