/*
 * Nur für die Seiten der Taschengeld-App (über $customCss eingebunden).
 *
 * Die Abschnittsüberschriften sind <h2>, nicht <h3>: Ein Sprung von h1 auf h3
 * ist für den Nu-Validator ein FEHLER, nicht bloß ein Schönheitsfehler, und für
 * Screenreader eine Lücke in der Gliederung. Die gewohnte, kleinere Optik der
 * übrigen Seiten kommt deshalb hier aus dem Stylesheet statt aus einem falschen
 * Element.
 */
#content-div h2 {
    font-size: 1.17em;
    margin-top: 1.4em;
    margin-bottom: 0.4em;
}

/* Hinweis, wenn die Löschfunktion nicht konfiguriert ist. Nicht nur Farbe:
   Wer Farben nicht unterscheiden kann, braucht ein zweites Signal. */
.pm-fehler {
    color: #a33;
    font-weight: bold;
}

.pm-fehler::before {
    content: "\26A0\FE0F\00A0";
}

/* Der Löschknopf soll aussehen wie das, was er tut. */
#pm-loeschen {
    padding: 0.6em 1.2em;
    font-size: 1em;
    color: #fff;
    background-color: #a33;
    border: 1px solid #822;
    border-radius: 4px;
    cursor: pointer;
}

#pm-loeschen:disabled {
    background-color: #bbb;
    border-color: #999;
    cursor: not-allowed;
}

/* ==========================================================================
 * Eltern-Weboberfläche (/apps/pocketmoney/eltern/)
 *
 * Die Seiten HINTER der Anmeldung tragen bewusst nicht die Chrome der Website:
 * "Home | Blog | Apps" über einem Buchungsformular lädt zum Weggehen ein, und
 * die Brotkrumen zeigen einen Pfad, der für ein Werkzeug nichts bedeutet. Sie
 * binden deshalb styles.css plus diesen Abschnitt ein und bauen ihre eigene,
 * schlanke Kopfzeile.
 *
 * Grün wie das App-Symbol (#0a7d55), damit die Oberfläche und das Symbol auf
 * dem Startbildschirm erkennbar zusammengehören.
 * ========================================================================== */

#pm-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 0.7em 1em;
    background-color: #0a7d55;
    color: #fff;
}

#pm-kopf a {
    color: #fff;
    text-decoration: none;
    margin-left: 0.9em;
}

#pm-kopf a:hover,
#pm-kopf a:focus {
    text-decoration: underline;
}

/* Die Ueberschrift der Seite sitzt in der Kopfzeile. Sie muss ein h1 sein, damit
   die Gliederung nicht bei h2 anfaengt - ihre Groesse kommt von hier. */
#pm-kopf h1 {
    display: inline;
    font-size: 1.1em;
    margin: 0;
}

#pm-kopf-titel {
    display: flex;
    align-items: baseline;
}

#pm-kopf .pm-zurueck {
    margin-left: 0;
    margin-right: 0.5em;
    font-size: 1.2em;
}

#pm-inhalt {
    max-width: 46em;
    margin: 0 auto;
    padding: 1em;
}

#pm-inhalt h2 {
    font-size: 1.17em;
    margin-top: 1.4em;
    margin-bottom: 0.4em;
}

.pm-karte {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.8em 1em;
    margin-bottom: 0.8em;
}

.pm-kind-kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
}

.pm-saldo {
    font-size: 1.2em;
    font-weight: bold;
    white-space: nowrap;
}

/* Ein negativer Kontostand haengt nicht an der Farbe allein: Das Minuszeichen
   steht ohnehin im Betrag, hier kommt nur das Gewicht dazu. */
.pm-saldo.pm-minus {
    color: #a33;
}

.pm-nebentext,
.pm-leer {
    color: #555;
    font-size: 0.92em;
    margin: 0.3em 0;
}

.pm-zitat {
    margin: 0.4em 0;
    padding-left: 0.8em;
    border-left: 3px solid #ddd;
    font-style: italic;
}

.pm-aktionen a {
    margin-right: 1em;
}

.pm-inline {
    display: inline;
}

.pm-liste {
    margin: 0.3em 0;
    padding-left: 1.4em;
}

/* Erfolg, das Gegenstueck zu .pm-fehler. Ebenfalls mit Zeichen, nicht nur
   Farbe. */
.pm-erfolg {
    color: #0a7d55;
    font-weight: bold;
}

.pm-erfolg::before {
    content: "\2713\00A0";
}

.pm-abo {
    color: #555;
    font-size: 0.92em;
}

/* Der Kopplungscode wird abgetippt – gross, gesperrt und mit fester Breite,
   damit 0 und O auseinanderzuhalten sind. */
.pm-code-wert {
    font-family: monospace;
    font-size: 1.8em;
    letter-spacing: 0.15em;
    margin: 0.3em 0;
}

#pm-inhalt label {
    display: block;
    margin: 0.5em 0;
}

#pm-inhalt input[type="text"],
#pm-inhalt input[type="number"],
#pm-inhalt input[type="date"],
#pm-inhalt select {
    display: block;
    width: 100%;
    max-width: 20em;
    padding: 0.4em;
    font-size: 1em;
}

#pm-inhalt button {
    padding: 0.5em 1.1em;
    font-size: 1em;
    color: #fff;
    background-color: #0a7d55;
    border: 1px solid #086044;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 0.4em;
}

#pm-inhalt button.pm-sekundaer {
    color: #0a7d55;
    background-color: #fff;
}

/* Loeschen sieht aus wie das, was es tut - dieselbe Farbe wie der Loeschknopf
   der Kontoloeschung weiter oben. */
#pm-inhalt button.pm-gefahr {
    color: #fff;
    background-color: #a33;
    border-color: #822;
}

/* --------------------------------------------------------------- Konto ---- */

.pm-saldo-gross {
    font-size: 2em;
    font-weight: bold;
    margin: 0.2em 0;
}

.pm-saldo-gross.pm-minus,
.pm-betrag.pm-minus {
    color: #a33;
}

.pm-buchung-kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1em;
}

/* Der Betrag ist die Zahl, um die es geht - er darf nie umbrechen. Ein langer
   Verwendungszweck bricht stattdessen links um. */
.pm-betrag {
    font-weight: bold;
    white-space: nowrap;
}

.pm-richtung {
    border: 0;
    padding: 0;
    margin: 0.5em 0;
}

.pm-richtung legend {
    padding: 0;
    font-size: 0.92em;
    color: #555;
}

.pm-richtung label {
    display: inline-block;
    margin-right: 1.2em;
}

.pm-bearbeiten {
    border-top: 1px solid #eee;
    margin-top: 0.6em;
    padding-top: 0.6em;
}

.pm-abbrechen {
    margin-left: 0.6em;
}

/* Der Loeschknopf steht in einem eigenen Formular neben einem Link; ohne das
   hier saesse er auf einer eigenen Zeile. */
.pm-aktionen .pm-inline button {
    padding: 0.2em 0.7em;
    font-size: 0.9em;
}

/* -------------------------------------------------------------- Regeln ---- */

/* Eine Zeile der Vorschau. Sie wiegt schwerer als der uebrige Text: Was hier
   steht, liest das Kind spaeter wortgleich in seinem Verlauf. */
.pm-aenderung {
    font-weight: bold;
    margin: 0.5em 0;
}

/* Die Zinsbasis-Optionen tragen ihre Begruendung unter sich - die ganze Zeile
   ist anklickbar, nicht nur der Knopf. */
.pm-basis {
    display: block;
    margin: 0.6em 0;
}

.pm-basis .pm-nebentext {
    display: block;
    margin-left: 1.6em;
}

/* Ein Kaestchen gehoert neben seine Beschriftung, nicht darueber - die
   allgemeine Regel "label ist ein Block" gilt fuer Eingabefelder. */
.pm-schalter {
    display: block;
    margin: 0.8em 0;
}

.pm-schalter input {
    margin-right: 0.4em;
}

/* Die Startwelten stehen nebeneinander und brechen um: Mit der Vollversion sind
   es sieben, und eine Reihe, die genau am Rand endet, sieht nicht nach "hier
   geht es weiter" aus, sondern nach "das sind alle". */
.pm-welt {
    display: inline-block;
    margin: 0.3em 1.2em 0.3em 0;
}