/*
Theme Name: Babyphony
Theme URI: https://babyphony.ovonex.com/
Author: ovonex
Description: Website für Babyphony. Handgeschriebenes CSS, kein Framework, keine externen Schriften — die Datenschutzerklärung sagt zu, dass keine Ressourcen Dritter geladen werden.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: babyphony
*/

/* Farbwelt: ein Nachtlicht im Kinderzimmer.
   Der Bernstein ist kein beliebiger warmer Akzent, sondern die Lichtfarbe,
   die man nachts neben einem Kinderbett hat. Das Gruen ist ausschliesslich
   den Sicherheitsaussagen vorbehalten - Farbe traegt hier Information. */

:root {
    --nacht:      #0d1117;
    --kammer:     #161c26;
    --kante:      #232b38;
    --text:       #e8ecf1;
    --gedaempft:  #8b97a8;
    --warmlicht:  #ffb26b;
    --ruhe:       #7dd3a0;
    --breite:     54rem;
}

@media (prefers-color-scheme: light) {
    :root {
        --nacht:      #fbf9f6;
        --kammer:     #ffffff;
        --kante:      #e7e2da;
        --text:       #1a1d23;
        --gedaempft:  #5f6b7a;
        --warmlicht:  #a85f14;
        --ruhe:       #1f7a4d;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 1.5rem;
    background: var(--nacht);
    color: var(--text);
    font: 400 1.0625rem/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.seite {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 1.75rem 0 4rem;
}

/* ── Kopf ──── */

.seitenkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1rem 2rem;
    padding-bottom: 1.75rem;
    margin-bottom: 3.5rem;
    border-bottom: 1px solid var(--kante);
}

.marke {
    font-size: 1.0625rem;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--text);
    text-decoration: none;
}

.marke::before {
    content: "";
    display: inline-block;
    width: .5rem;
    height: .5rem;
    margin-right: .5rem;
    border-radius: 50%;
    background: var(--warmlicht);
    vertical-align: .06em;
}

.navigation { margin-left: auto; }

.navigation-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .95rem;
}

.navigation-liste a { color: var(--gedaempft); text-decoration: none; }
.navigation-liste a:hover,
.navigation-liste .current-menu-item a { color: var(--text); }

/* ── Typografie ──── */

.seitentitel {
    margin: 0 0 1.25rem;
    font-size: clamp(2.1rem, 6.5vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -.033em;
    font-weight: 680;
    max-width: 16ch;
}

h2 {
    margin: 4rem 0 1.5rem;
    font-size: clamp(1.4rem, 3vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    font-weight: 640;
}

h3 {
    margin: 0 0 .45rem;
    font-size: 1.02rem;
    font-weight: 620;
    letter-spacing: -.008em;
}

p { margin: 0 0 1.1rem; max-width: 68ch; }

a { color: var(--warmlicht); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }

ul, ol { padding-left: 1.3rem; }
li { margin-bottom: .55rem; }
strong { font-weight: 640; }

hr { margin: 3.5rem 0; border: 0; border-top: 1px solid var(--kante); }
img, figure { max-width: 100%; height: auto; }

/* ── Prototyp-Hinweis: das einzige Badge in Warmlicht ──── */

.is-style-babyphony-hinweis {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 2.5rem;
    padding: .45rem .95rem .45rem .7rem;
    background: color-mix(in srgb, var(--warmlicht) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--warmlicht) 32%, transparent);
    border-radius: 999px;
    color: var(--warmlicht);
    font-size: .9rem;
}

.is-style-babyphony-hinweis p { margin: 0; max-width: none; }

.is-style-babyphony-hinweis::before {
    content: "";
    flex: none;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--warmlicht);
}

/* ── Kernversprechen ────
   Der Grund, warum es diese App gibt, steht vor allem anderen. Gruen
   traegt hier Bedeutung: es erscheint nur an nachpruefbaren
   Sicherheitsaussagen, nirgends als Schmuck.

   Die vier Marken sind das lauteste Element der Seite - deshalb sind es
   vier und nicht sechs. Jede weitere schwaecht die uebrigen.
   ──── */

.siegel {
    margin: 1.5rem 0 2.5rem;
    padding: 1.9rem 1.75rem;
    background: color-mix(in srgb, var(--ruhe) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--ruhe) 32%, transparent);
    border-radius: 1.1rem;
}

.siegel p {
    margin: 0;
    max-width: 52ch;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text);
}

.siegel-marken {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 46rem) {
    .siegel-marken { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.siegel-marken li {
    position: relative;
    margin: 0;
    padding: .85rem .9rem .85rem 2.85rem;
    background: color-mix(in srgb, var(--ruhe) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--ruhe) 38%, transparent);
    border-radius: .8rem;
    color: var(--ruhe);
    font-size: 1rem;
    font-weight: 620;
    line-height: 1.3;
    letter-spacing: -.005em;
}

/* Der Haken sitzt in einem eigenen Kreis: Bei vier gleich grossen Kacheln
   braucht das Auge einen festen Punkt am Zeilenanfang. */
.siegel-marken li::before {
    content: "";
    position: absolute;
    left: .85rem;
    top: 50%;
    width: 1.45rem;
    height: 1.45rem;
    margin-top: -.725rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ruhe) 24%, transparent);
}

.siegel-marken li::after {
    content: "";
    position: absolute;
    left: 1.27rem;
    top: 50%;
    width: .5rem;
    height: .27rem;
    margin-top: -.22rem;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-radius: 1px;
    transform: rotate(-45deg);
}

/* ── Keine Aufzeichnung ────
   Eigener Abschnitt statt einer Karte unter vielen: Eltern sollen das
   nicht ueberlesen.
   ──── */

.keine-aufnahme {
    margin: 3.25rem 0;
    padding: .2rem 0 .2rem 1.5rem;
    border-left: 3px solid var(--ruhe);
}

.keine-aufnahme h2 { margin: 0 0 1rem; }

.keine-aufnahme .leitsatz {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text);
}

.keine-aufnahme p:last-child { margin-bottom: 0; }

/* ── Vorspann ──── */

.is-style-babyphony-vorspann {
    font-size: 1.2rem;
    line-height: 1.55;
    color: var(--gedaempft);
    max-width: 46ch;
    margin-bottom: 2rem;
}

/* ── Schemazeichnungen ──── */

.schema {
    margin: 2.5rem 0 3rem;
    padding: 1.75rem 1.5rem 1.25rem;
    background: var(--kammer);
    border: 1px solid var(--kante);
    border-radius: 1.1rem;
    color: var(--text);
}

.schema svg, .schema img { display: block; width: 100%; height: auto; }

.schema figcaption {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--kante);
    color: var(--gedaempft);
    font-size: .88rem;
    text-align: center;
}

/* ── Sicherheitsliste: Farbe traegt hier Bedeutung ──── */

.sicherheit {
    display: grid;
    gap: 1.4rem 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.sicherheit li {
    margin: 0;
    padding-left: 2.1rem;
    position: relative;
    color: var(--gedaempft);
    font-size: .97rem;
    line-height: 1.55;
}

.sicherheit li strong {
    display: block;
    color: var(--text);
    font-weight: 620;
    margin-bottom: .2rem;
}

.sicherheit li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ruhe) 16%, transparent);
}

.sicherheit li::after {
    content: "";
    position: absolute;
    left: .42rem;
    top: .52rem;
    width: .5rem;
    height: .27rem;
    border-left: 2px solid var(--ruhe);
    border-bottom: 2px solid var(--ruhe);
    border-radius: 1px;
    transform: rotate(-45deg);
}

/* ── Schritte: echte Abfolge, deshalb Zahlen ──── */

.is-style-babyphony-schritte {
    list-style: none;
    padding-left: 0;
    counter-reset: schritt;
    margin: 2rem 0 0;
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.is-style-babyphony-schritte > li {
    counter-increment: schritt;
    position: relative;
    margin: 0;
    padding-top: 2.9rem;
    color: var(--gedaempft);
    font-size: .97rem;
}

.is-style-babyphony-schritte > li strong {
    display: block;
    color: var(--text);
    margin-bottom: .2rem;
}

.is-style-babyphony-schritte > li::before {
    content: counter(schritt);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid color-mix(in srgb, var(--warmlicht) 40%, transparent);
    border-radius: 50%;
    color: var(--warmlicht);
    font-size: .95rem;
    font-weight: 640;
}

/* Verbindungsstrich zwischen den Schritten - nur wo nebeneinander */
@media (min-width: 48rem) {
    .is-style-babyphony-schritte > li:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 1.05rem;
        left: 2.6rem;
        right: -1.25rem;
        height: 1px;
        background: var(--kante);
    }
}

/* ── Funktionskarten ──── */

.wp-block-columns { gap: 1.1rem; margin-bottom: 1.1rem; }

.is-style-babyphony-karte {
    height: 100%;
    padding: 1.4rem;
    background: var(--kammer);
    border: 1px solid var(--kante);
    border-radius: .9rem;
}

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

.is-style-babyphony-karte p {
    margin: 0;
    max-width: none;
    color: var(--gedaempft);
    font-size: .94rem;
    line-height: 1.55;
}

.is-style-babyphony-karte h3 {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.is-style-babyphony-karte h3 svg {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    color: var(--warmlicht);
}

/* Der Ehrlichkeits-Kasten hebt sich ab, ohne zu alarmieren */
.karte-offen {
    margin: 2rem 0;
    padding: 1.4rem 1.6rem;
    background: transparent;
    border: 1px dashed var(--kante);
    border-radius: .9rem;
}

.karte-offen h3 { margin-bottom: .5rem; }
.karte-offen p { margin: 0 0 .8rem; color: var(--gedaempft); font-size: .95rem; }
.karte-offen p:last-child { margin-bottom: 0; }
.karte-offen p strong { color: var(--text); }

/* ── Grenzen-Liste ──── */

.grenzen { margin: 1.5rem 0 0; padding: 0; list-style: none; }

.grenzen li {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
    position: relative;
    color: var(--gedaempft);
    font-size: .97rem;
}

.grenzen li::before {
    content: "";
    position: absolute;
    left: .1rem;
    top: .62rem;
    width: .65rem;
    height: 1px;
    background: var(--gedaempft);
    opacity: .6;
}

.grenzen li strong { color: var(--text); }

/* ── Kontakt ──── */

.kontaktzeile {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: .5rem;
    padding: .7rem 1.2rem;
    background: var(--kammer);
    border: 1px solid var(--kante);
    border-radius: .7rem;
    font-size: 1.02rem;
    text-decoration: none;
}

.kontaktzeile:hover { border-color: var(--warmlicht); }
.kontaktzeile svg { width: 1.1rem; height: 1.1rem; color: var(--warmlicht); }

/* ── Fuss ──── */

.fuss {
    margin-top: 5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--kante);
    color: var(--gedaempft);
    font-size: .88rem;
}

.fuss p { margin: 0; max-width: none; }

.fussnavigation { margin-bottom: .85rem; }

.fussnavigation-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fussnavigation-liste a { color: var(--gedaempft); text-decoration: none; }
.fussnavigation-liste a:hover { color: var(--text); text-decoration: underline; }

/* ── Tastaturbedienung ──── */

a:focus-visible, button:focus-visible {
    outline: 2px solid var(--warmlicht);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── Der eine bewegte Moment ──── */

@media (prefers-reduced-motion: no-preference) {
    .schema .verbindungslinie {
        stroke-dasharray: 440;
        stroke-dashoffset: 440;
        animation: linie-zeichnen 1.1s .35s ease-out forwards;
    }
}

@keyframes linie-zeichnen { to { stroke-dashoffset: 0; } }

@media (max-width: 34rem) {
    body { padding: 0 1.1rem; }
    .seitenkopf { padding-bottom: 1.25rem; margin-bottom: 2.5rem; }
    .navigation { margin-left: 0; width: 100%; }
    h2 { margin-top: 3rem; }
    .schema { padding: 1.25rem 1rem 1rem; }
}