/* Babyphony - der Tag.

   WARUM EINE EIGENE DATEI: Der Webspace nimmt ueber FTP nur Dateien bis
   rund 15 000 Byte an (siehe web/README.md). Die Grenze gilt je Datei,
   nicht in Summe - also lieber drei kleine Dateien als eine grosse an der
   Grenze. Eingebunden in functions.php, abhaengig von 'babyphony'.

   HIER STEHT ALLES AUSSER DER NACHT: die vier Zusagen, die Aussage zur
   Aufzeichnung, der Beleg aus der laufenden App, der Ehrlichkeits-Kasten,
   Koennen und Nicht-Koennen, der Kontakt.

   Es gibt auf der ganzen Seite keine Karten. Abschnitte trennen sich durch
   Raum und Schriftgrad. Wo dennoch Linien stehen, tragen sie Information:
   Sie zerlegen eine Aufzaehlung gleichrangiger Aussagen in ihre einzelnen
   Posten - wie in einer Aufstellung, in der jede Zeile fuer sich gilt und
   einzeln nachpruefbar ist. Genau das sind die Zusagen und die Funktionen.
   Deshalb tragen beide dieselbe Form; es ist ein Mittel, nicht zwei. */

/* ===== Die vier Zusagen =====
   Sie standen vorher als vier gleich grosse Kacheln nebeneinander, jede mit
   einem Haken - vier Behauptungen ohne Beleg. Jetzt traegt jede Zusage
   ihren Nachweis in derselben Zeile. Das ist der Unterschied zwischen einem
   Abzeichen und einer Aussage. */

.zusagen-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0 clamp(1.5rem, 4vw, 3.5rem);
    margin: 2.5rem 0 0;
    border-top: 1px solid var(--linie);
}

.zusagen-liste > div {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--linie);
}

.zusagen-liste dt {
    font-size: 1.25rem;
    font-weight: 620;
    letter-spacing: -.022em;
}

.zusagen-liste dd {
    margin: .4rem 0 0;
    max-width: 42ch;
    color: var(--leise);
    font-size: .9375rem;
    line-height: 1.55;
}

/* ===== Keine Aufzeichnung =====
   Kein Kasten, keine Farbe, kein Rahmen - nur Platz und ein groesserer
   Grad. Wer eine Aussage einrahmt, macht sie zu einem Aushang; diese hier
   soll gelesen werden wie ein Satz. */

.leitsatz {
    max-width: 46ch;
    font-size: clamp(1.15rem, 2.1vw, 1.45rem);
    line-height: 1.45;
    letter-spacing: -.012em;
}

.gedaempft { color: var(--leise); }

/* ===== Der Beleg =====
   Die Messleiste ist die Stelle, an der die App selbst Auskunft gibt statt
   wir. Sie steht hier im Tageslicht und nicht in der Nacht, weil sie zur
   nuechternen Haelfte der Seite gehoert: zu dem, was sich nachpruefen
   laesst, nicht zu dem, was sich anfuehlt. Ein Ausschnitt bleibt ein
   Ausschnitt und kommt deshalb in keinen Telefonrahmen. */

.beleg { margin-top: 2.5rem; }

.beleg img {
    display: block;
    width: 100%;
    max-width: 30rem;
    border: 1px solid var(--linie);
    border-radius: .5rem;
}

.beleg figcaption {
    margin-top: 1.1rem;
    max-width: 54ch;
    color: var(--leise);
    font-size: .9375rem;
    line-height: 1.55;
}

.beleg figcaption b { color: var(--tinte); }

/* ===== Wobei wir ehrlich sein wollen =====
   DER EINZIGE KASTEN DER SEITE, und er hat einen Grund: Das ist die eine
   Stelle, an der die Seite gegen sich selbst argumentiert. Sie darf nicht
   im Fliesstext untergehen, und niemand soll spaeter sagen koennen, sie
   habe versteckt gestanden. Ein Kasten ist hier kein Gestaltungsmittel,
   sondern eine Zusage: Das hier gehoert zusammen, und es fehlt nichts.

   Das blasse Rosa ist die Farbe der Wangen im App-Symbol. Es hebt ab, ohne
   zu alarmieren - ein Warnton waere falsch, denn hier wird nicht gewarnt,
   sondern eingeraeumt. Es ist die einzige Verwendung dieses Werts.

   Nichts in diesem Kasten ist gedaempft. Ueberall sonst steht Nebentext in
   der leisen Farbe; hier nicht. */

.ehrlich-innen {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: var(--wange);
    border-radius: 1.25rem;
}

.ehrlich-innen h2 {
    margin-bottom: 1.25rem;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
}

.ehrlich-innen p {
    max-width: 58ch;
    font-size: 1rem;
}

.ehrlich-innen p:last-child { margin-bottom: 0; }

/* ===== Was es kann =====
   Dieselbe Aufstellung wie bei den Zusagen, einen Grad kleiner: Die
   Zusagen sind der Grund, warum es diese App gibt, die Funktionen sind,
   was sie tut. Keine Symbole - sechs gleich grosse Kreise nebeneinander
   sagen nichts, was die Ueberschrift nicht schon sagt. */

.koennen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 0 clamp(1.5rem, 4vw, 3.5rem);
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--linie);
}

.koennen li {
    margin: 0;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--linie);
    color: var(--leise);
    font-size: .9375rem;
    line-height: 1.55;
}

.koennen li b {
    display: block;
    margin-bottom: .25rem;
    color: var(--tinte);
    font-size: 1.0625rem;
    letter-spacing: -.012em;
}

/* ===== Was es noch nicht kann =====
   Ein Strich statt eines Punktes: Hier wird nichts abgehakt. */

.grenzen {
    margin: 2rem 0 0;
    padding: 0;
    max-width: 62ch;
    list-style: none;
}

.grenzen li {
    position: relative;
    margin: 0 0 1.15rem;
    padding-left: 1.7rem;
    color: var(--leise);
}

.grenzen li b { color: var(--tinte); }

.grenzen li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .82em;
    width: .8rem;
    height: 1px;
    background: var(--dunst);
}

/* ===== Kontakt =====
   Kein Knopf. Es gibt nichts zu kaufen und nichts herunterzuladen - es gibt
   eine Adresse, an die man schreiben kann. Also steht dort eine Adresse. */

.kontakt-adresse {
    display: inline-block;
    margin-top: .5rem;
    font-size: clamp(1.25rem, 3.2vw, 2rem);
    font-weight: 620;
    letter-spacing: -.028em;
    text-decoration-line: underline;
    text-decoration-color: var(--dunst);
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
}

.kontakt-adresse:hover {
    text-decoration-color: var(--tinte);
    text-decoration-thickness: 2px;
}

/* ===== Block-Stile fuer die Rechtstexte =====
   Datenschutzerklaerung und Nutzungsbedingungen sind im Block-Editor
   gebaut und benutzen drei Stile, die die Startseite nicht mehr braucht.
   Sie bleiben deshalb erhalten - und bekommen die neue Farbwelt, damit die
   Seiten nicht auseinanderfallen.

   Aus "Karte" ist dabei keine Karte mehr geworden: eine Haarlinie am linken
   Rand tut dasselbe, ohne einen Kasten aufzumachen. Der Hinweis-Kasten
   dagegen bleibt ein Kasten - er traegt auf beiden Seiten dieselbe Aussage
   wie "Wobei wir ehrlich sein wollen" auf der Startseite (eine Grenze, die
   eingeraeumt wird) und deshalb bewusst dieselbe Form und dasselbe Rosa. */

.is-style-babyphony-vorspann {
    margin-top: 1.6rem;
    margin-bottom: 2rem;
    max-width: 44ch;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.5;
    letter-spacing: -.01em;
}

.is-style-babyphony-karte {
    margin: 2rem 0;
    padding: .2rem 0 .2rem 1.4rem;
    border-left: 2px solid var(--dunst);
}

.is-style-babyphony-karte > *:last-child { margin-bottom: 0; }

.is-style-babyphony-hinweis {
    margin: 2rem 0;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    background: var(--wange);
    border-radius: 1rem;
}

.is-style-babyphony-hinweis > *:last-child { margin-bottom: 0; }

/* ===== Bilanz: was geht, was nicht =====
 *
 * Die beiden Abschnitte gehoeren zusammen und werden deshalb als Paar
 * gestaltet: gleiche Form, zwei Toene derselben Farbfamilie. Zwei fremde
 * Farben nebeneinander saehen aus wie zwei Bausteine aus einem Katalog -
 * genau das, was hier nicht sein soll.
 *
 * Beide Toene sind aus vorhandenen Werten gemischt, nicht neu erfunden:
 * --himmel fuer das Koennen, --tinte fuer die Grenzen, jeweils weit
 * heruntergezogen ins Cremeweiss. Das Rosa der Wangen bleibt dem
 * Ehrlichkeits-Kasten vorbehalten; es ein zweites Mal zu benutzen naehme ihm
 * seine Sonderstellung.
 */

.bilanz {
    padding: clamp(1.75rem, 4.5vw, 3rem) clamp(1.25rem, 4vw, 2.75rem);
    border-radius: 1.25rem;
}

.bilanz-kann    { background: color-mix(in srgb, var(--himmel) 34%, var(--wolke)); }
.bilanz-grenzen { background: color-mix(in srgb, var(--tinte) 7%, var(--wolke)); }

/* Faellt color-mix aus, bleibt es beim Cremeweiss der Seite - lesbar, nur
   ohne Hervorhebung. Kein Fall, in dem Text auf Text steht. */

.bilanz h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem .75rem;
}

/* Das Abzeichen steht neben der Ueberschrift, nicht als gesperrte
   Grossbuchstaben darueber: eine Zeile ueber jeder Ueberschrift ist das
   Erkennungszeichen einer Vorlage, und genau davon soll die Seite frei
   bleiben. */
.abzeichen {
    padding: .18em .7em .24em;
    border-radius: 999px;
    font-size: .6em;
    font-weight: 620;
    letter-spacing: 0;
    white-space: nowrap;
}

.abzeichen-kann    { background: var(--dunst); color: var(--wolke); }
.abzeichen-grenzen { background: color-mix(in srgb, var(--tinte) 16%, var(--wolke)); color: var(--tinte); }

/* Die Striche der Listen sitzen jetzt auf farbigem Grund und muessen dunkler
   sein, sonst verschwinden sie darin. */
.bilanz-kann .koennen,
.bilanz-kann .koennen li { border-color: color-mix(in srgb, var(--dunst) 45%, transparent); }

/* Ein Haken vor jedem Punkt - zwei Striche, gedreht. Als Zeichen gezeichnet
   und nicht als Schriftzeichen gesetzt: Ein Haken aus der Schrift sieht auf
   jedem System anders aus, und auf manchen ist er ein Emoji.
 *
 * Die Einrueckung sitzt am li, nicht am b: Im Markup folgt der
 * Beschreibungstext direkt auf die fette Zeile, im selben li. Haengt die
 * Einrueckung am b, rueckt nur die Ueberschrift ein und der Text darunter
 * steht am linken Rand - eine Stufe, die niemand gewollt hat. */
.bilanz-kann .koennen li {
    position: relative;
    padding-left: 1.9rem;
}

.bilanz-kann .koennen li::before {
    content: "";
    position: absolute;
    left: .35rem;
    top: 1.7rem;
    width: .42rem;
    height: .78rem;
    border: solid var(--dunst);
    border-width: 0 2px 2px 0;
    transform: rotate(42deg);
}

/* Bei den Grenzen bleibt es beim Strich: Hier wird nichts abgehakt. Er wird
   nur kraeftiger, damit er auf dem Grund noch zu sehen ist. */
.bilanz-grenzen .grenzen li::before {
    height: 2px;
    background: color-mix(in srgb, var(--tinte) 55%, transparent);
}

.bilanz-grenzen .grenzen li,
.bilanz-kann .koennen li { color: color-mix(in srgb, var(--tinte) 78%, var(--wolke)); }