/* chrisinterface UI-Kit
   Christian Steiner · chrisinterface.com
   Version siehe Datei VERSION.

   ÜBER-DIALOG — die Optik. Wer die Software gemacht hat: Logo, Herausgeber,
   Nennung, Version und Bausteine, drei Gruppen untereinander, sonst nichts.
   Keine Überschrift, keine Trennlinie, kein Fett. Zwei Stufen, und Größe
   und Ton gehen miteinander: die tragenden Zeilen hell und einen Pixel unter
   dem Grundtext, alles Erklärende gedämpft und eine Stufe kleiner. Den
   Inhalt baut ueber.js. */

.ueber-zeile {
    font-size: var(--schrift-md);
    font-weight: var(--gewicht-normal);
    color: var(--text);
    line-height: 1.6;
}
.ueber-zeile.leiser { font-size: var(--schrift-xs); color: var(--text-gedaempft); }
.ueber-gruppe { margin-top: var(--abstand-20); }
/* Eine halbe Stufe Luft innerhalb einer Gruppe: trennt Anschrift und
   Registerangaben, ohne einen neuen Absatz aufzumachen. */
.ueber-zeile.abgesetzt { margin-top: var(--abstand-10); }
/* Ein Aufzählungsglied bricht nicht in sich um; umbrochen wird nur an den
   Mittelpunkten, und weil das Leerzeichen davor geschützt ist, wandert der
   Punkt nie an den Anfang der neuen Zeile. */
.ueber-zeile .nb { white-space: nowrap; }

/* Zentriert, ohne Kopfzeile und ohne Fuß — die erste und die letzte Zeile
   stießen sonst hart an die Kante, deshalb oben und unten 32 statt der 20
   eines Arbeits-Dialogs. */
.modal-ohne-kopf {
    position: relative;   /* Anker für das ×, das ohne Kopfzeile frei in der Ecke sitzt */
}
/* Das × sitzt leise in der Ecke. Es bleibt, obwohl sonst nichts im Fenster
   steht: Am Tablet gibt es kein Escape, und ein Web-Dialog bringt keinen
   Fensterrahmen mit. */
.modal-ohne-kopf .modal-x {
    position: absolute;
    top: var(--abstand-12);
    right: var(--abstand-12);
    z-index: 1;
}
.modal-ohne-kopf .modal-body {
    text-align: center;
    padding: var(--abstand-32) var(--abstand-20);
}

/* Das Logo führt den zentrierten Satz an — klein, es ist eine Herkunfts-
   marke, kein Bild. Der Abstand darunter ist eine Stufe größer als zwischen
   den Gruppen: Das Logo gehört zu keiner, es steht über allem. Umgefärbt
   wird es nicht — siehe .logo in login-gate.css. */
.ueber-logo {
    display: block;
    margin: 0 auto var(--abstand-20);
    height: 18px;
    width: auto;
}

/* Die Marke ist der Weg hinein: Sie sieht aus wie ein Logo und verhält sich
   wie ein Knopf — nur der Zeiger verrät, dass man klicken kann. */
.marke-knopf { cursor: pointer; }