/* Meine Reise zu mir – Gestaltung der Internetseite.
   Dieselben Farben und dieselbe Schrift wie in der App.

   Bewusst ohne fremde Schriften und ohne Skripte von anderen Servern:
   Eingebundene Google-Schriften übertragen die IP-Adresse der Besucher in
   die USA und sind in Deutschland schon abgemahnt worden. Hier lädt jede
   Datei vom eigenen Server. */

:root {
    /* Der Hintergrund trägt genau den Ton, den die Wortmarke mitbringt.
       Weicht er auch nur leicht ab, zeichnet sich um das Logo ein Kasten ab –
       die Bilddatei hat keinen durchsichtigen Grund. */
    --hintergrund: #f4f0ea;
    --flaeche: #ffffff;
    --text: #3a342c;
    --fliesstext: #4a443b;
    --gedaempft: #8a8176;
    --akzent: #8a7460;
    --linie: #e4ddd5;

    /* Aus der Wortmarke abgenommen */
    --gold: #b18f5c;
    --gold-hell: #d9c69a;

    /* Die farbige Fläche: ein Erdbraun.
       Viel heller darf es nicht werden – ab etwa #8a7159 reicht der Abstand
       zur hellen Schrift nicht mehr für gut lesbaren Text. Hier ändern, wenn
       der Ton nachgeregelt werden soll. */
    --dunkel: #7a6450;
    --dunkel-text: #fbf7f1;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--hintergrund);
    color: var(--fliesstext);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
}

.mitte {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Kopfbereich */

header {
    padding: 48px 0 8px;
    text-align: center;
}

header img {
    max-width: 460px;
    width: 100%;
    height: auto;
}

h1 {
    font-size: 30px;
    line-height: 1.3;
    color: var(--text);
    font-weight: normal;
    margin: 40px 0 8px;
}

h2 {
    font-size: 22px;
    color: var(--text);
    font-weight: normal;
    margin: 44px 0 12px;
}

h3 {
    font-size: 18px;
    color: var(--text);
    margin: 28px 0 8px;
}

.leitzeile {
    color: var(--gedaempft);
    font-size: 15px;
    text-transform: uppercase;
    margin: 0 auto 32px;
    /* Probeweise, auf Wunsch von Manuela, noch nicht bestaetigt: Statt die
       Unterzeile auf die Textmitte der Wortmarke auszurichten, wird sie auf
       dieselbe Breite wie die ganze Wortmarke (Schrift + Zeichen) gedehnt -
       damit stellt sich die Frage nach der "richtigen" Mitte nicht mehr.
       Ersetzt die Version mit transform: translateX(). */
    max-width: 460px;
    text-align: justify;
    text-align-last: justify;
    text-justify: inter-character;
}

a { color: var(--akzent); }
a:hover { color: var(--text); }

/* Karten und Bilder */

.karte {
    background: var(--flaeche);
    border-radius: 16px;
    padding: 28px 30px;
    margin: 32px 0;
}

/* Eine dunkle Fläche als Anker.
   Die Seite bewegt sich sonst durchgehend in einem schmalen hellen Band –
   Beige, Weiß, Braun. Ein dunkler Abschnitt lässt das Beige gewollt wirken
   statt blass. Soll die Karte wieder hell werden, genügt es, in index.html
   die Klasse "karte-dunkel" zu entfernen. */

.karte-dunkel {
    background: var(--dunkel);
    color: var(--dunkel-text);
}

.karte-dunkel strong { color: #ffffff; }

/* Auf der farbigen Fläche steht das Zeichen ohne Kachel.
   Das App-Symbol bringt einen cremefarbenen Grund mit; als heller Block auf
   dem Braun war der Sprung zu hart. Hier stehen nur die Linien. */
.karte-dunkel .symbol {
    width: 92px;
    height: 92px;
    border-radius: 0;
    opacity: 0.9;
}

/* Vorstellung mit Bild */

.vorstellung {
    display: flex;
    gap: 26px;
    align-items: flex-start;
    margin: 22px 0 8px;
}

.vorstellung > div > p:first-child { margin-top: 0; }

.autorin {
    flex: 0 0 auto;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    object-fit: cover;
    /* Kein Filter. Das Bild ist schwarzweiß und bleibt es – im Buch steht es
       ebenso, und die drei Medien sollen nicht auseinanderlaufen. Ein
       Sepia-Filter stand hier einmal; er hob den Rotkanal so an, dass helle
       Stellen anschlugen und die Zähne blass gegen die warme Haut standen.
       Aufbereitet wird das Bild jetzt in werkzeuge/autorinnenbild.ps1. */
}

/* Ein Verweis, der sich als solcher zu erkennen gibt */

.knopf {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--gold);
    border-radius: 999px;
    color: var(--akzent);
    text-decoration: none;
    font-size: 16px;
}

.knopf:hover {
    background: var(--gold);
    color: #ffffff;
}

.knopf-bald {
    display: inline-block;
    padding: 10px 20px;
    border: 1px dashed var(--gold);
    border-radius: 999px;
    color: var(--akzent);
    opacity: 0.7;
    font-size: 16px;
}

/* Auf der dunklen Karte (.karte-dunkel) verschwindet der helle Knopf-Text
   sonst fast im Braun - hier hell auf dunkel statt dunkel auf hell. */
.karte-dunkel .knopf {
    border-color: var(--dunkel-text);
    color: var(--dunkel-text);
}

.karte-dunkel .knopf:hover {
    background: var(--dunkel-text);
    color: var(--dunkel);
}

.karte-dunkel .knopf-bald {
    border-color: var(--dunkel-text);
    color: var(--dunkel-text);
    opacity: 0.75;
}

.bilder {
    display: flex;
    gap: 16px;
    margin: 36px 0;
}

.bilder img {
    width: 50%;
    height: auto;
    border-radius: 14px;
    display: block;
}

.symbol {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    display: block;
    margin: 0 auto 20px;
}

/* Das Kopfbild – damit die Seite nicht mit einer Textwand beginnt.
   Es reicht bewusst über den Textrand hinaus. */

.kopfbild {
    margin: 36px 0 8px;
    border-radius: 18px;
    overflow: hidden;
    line-height: 0;
}

.kopfbild img {
    width: 100%;
    height: auto;
    display: block;
}

/* Der Umschlag.
   Bis zum 20.08.2026 stand hier ein gezeichneter Kasten aus Schrift, Linien
   und dem Zweigsymbol, weil kein Bild des Umschlags vorlag. Jetzt liegt es
   vor: bilder/buchumschlag.jpg, erzeugt von werkzeuge/umschlagbild.ps1 aus
   denselben Massen wie die Druckvorlage. Ändert sich der Umschlag, wird das
   Bild neu erzeugt – hier ist dann nichts zu tun. */

.buch-schau {
    display: flex;
    gap: 34px;
    align-items: center;
    margin: 30px 0 36px;
}

/* Die Höhe kommt aus dem Seitenverhältnis der Datei (170 : 220), damit beim
   Laden nichts springt. Der Schatten hebt den Umschlag vom Grund ab; das
   ungleiche Eckenrund deutet an, wo der Buchrücken sitzt. */
.buch {
    flex: 0 0 auto;
    width: 210px;
    height: auto;
    border-radius: 2px 6px 6px 2px;
    box-shadow:
        0 1px 2px rgba(58, 52, 44, 0.16),
        0 14px 30px -10px rgba(58, 52, 44, 0.34);
}

.buch-angaben {
    font-size: 15px;
    color: var(--gedaempft);
    margin: 14px 0 0;
}

/* Leseprobe */

.impuls {
    background: var(--flaeche);
    border-radius: 14px;
    padding: 22px 24px;
    margin: 16px 0;
}

.impuls-tag {
    font-size: 13px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 6px;
}

.impuls h3 {
    margin: 0 0 8px;
    font-size: 19px;
}

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

/* Die zwölf Monate */

.monate {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 28px 0 36px;
}

.monat {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
}

.monat img {
    width: 100%;
    height: auto;
    display: block;
}

/* Die Beschriftung nimmt die Anordnung der Wortmarke auf.
   Dort steht der Name groß, darunter zwischen zwei Zierstrichen der
   Zusatz, und rechts daneben der Zweig im offenen Kreis. Hier steht an der
   Stelle des Namens das Thema und an der des Zusatzes der Monat.
   Ausgemessen und begründet in entwuerfe/MONATSBESCHRIFTUNG.md. */

.monat span.schrift {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* **Hier steht die Schrift nicht ganz mittig**, anders als in der App.
       Das ist keine Nachlaessigkeit, sondern eine Platzfrage: Der Ausgleich
       links braeuchte 45 Punkte, dann blieben dem Thema noch 69 – und
       „Wahrnehmung“ misst in Georgia 15px genau 100. Das Wort staende ueber
       dem Zeichen.

       Mittig wird es erst, wenn die Kacheln breiter werden: drei je Zeile
       statt vier, also 216 statt 159 Punkte. Solange es vier sind, sitzt
       der Schriftblock um die halbe Zeichenbreite nach links versetzt.
       Begruendet in entwuerfe/MONATSBESCHRIFTUNG.md. */
    padding: 34px 8px 11px;
    display: flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(transparent, rgba(38, 33, 27, 0.55) 42%, rgba(30, 25, 20, 0.86));
}

/* Der Schriftblock ist in sich mittig – so wie im Logo der Zusatz mittig
   unter dem Namen steht. Linksbündig wäre eine andere Anordnung. */
.m-block {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.m-thema {
    display: block;
    font-size: 15px;
    line-height: 1.15;
    color: #ffffff;
    margin-bottom: 4px;
}

/* Die Zierstriche sind das Kennzeichen der Wortmarke. Sie füllen die Zeile
   bis zur Breite des Themas – im Logo sind es 82 Prozent der Titelbreite. */
.m-monat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 7.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gold-hell);
}

.m-monat::before,
.m-monat::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gold-hell);
    opacity: 0.65;
}

/* Das Zeichen steht rechts neben dem Block, nicht darüber. Im Logo ist es
   mehr als doppelt so hoch wie die Schrift; in einer hochkanten Kachel
   ginge das zu Lasten der Schrift, deshalb hier maßvoller. */
.m-zeichen {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    background: url("bilder/zweig-hell.png") center / contain no-repeat;
    opacity: 0.92;
}

/* Listen */

ul { padding-left: 22px; }
li { margin-bottom: 10px; }

.schlicht { list-style: none; padding-left: 0; }

/* Fußbereich */

footer {
    margin-top: 64px;
    padding: 28px 0 48px;
    border-top: 1px solid var(--linie);
    font-size: 15px;
    color: var(--gedaempft);
    text-align: center;
}

footer a { margin: 0 10px; }

/* Die beiden Kanäle.
   Die Zeichen sind als Linien gezeichnet und liegen im Text der Seite. Ein
   fertiges Zeichen von einem fremden Server würde die IP-Adresse jeder
   Besucherin dorthin übertragen – genau das, was diese Seite vermeidet. */

.kanaele {
    margin: 0 0 26px;
    display: flex;
    justify-content: center;
    gap: 18px;
}

.kanaele a {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--linie);
    color: var(--akzent);
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.kanaele svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Der Punkt im Instagram-Zeichen ist gefüllt, nicht umrandet. */
.kanaele svg .voll {
    fill: currentColor;
    stroke: none;
}

.kanaele a:hover,
.kanaele a:focus-visible {
    color: var(--flaeche);
    background: var(--akzent);
    border-color: var(--akzent);
}

/* Ohne diese Zeile bliebe der Tastaturweg durch die Seite unsichtbar. */
.kanaele a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* Rechtstexte */

.rechtstext { font-size: 17px; }
.rechtstext h2 { font-size: 20px; margin-top: 38px; }
.rechtstext .stand { color: var(--gedaempft); font-size: 15px; }

.hinweis {
    background: var(--flaeche);
    border-left: 3px solid var(--akzent);
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    margin: 28px 0;
    font-size: 16px;
}

@media (max-width: 560px) {
    body { font-size: 17px; }
    h1 { font-size: 25px; }
    .bilder { flex-direction: column; }
    .bilder img { width: 100%; }
    .karte { padding: 22px 20px; }

    /* Nebeneinander wird das Buch zu klein zum Lesen – also untereinander. */
    .buch-schau {
        flex-direction: column;
        gap: 26px;
        text-align: center;
    }

    .buch { width: 194px; }
    .buch-angaben { text-align: center; }

    /* Zwei statt drei nebeneinander.
       Mit dem Zeichen neben der Schrift bleiben bei drei Spalten nur rund
       60 Punkte für das Thema übrig – „Wahrnehmung“ braucht 84 und bräche
       um. Zwei Spalten geben der Kachel 160 Punkte; die hochkanten Motive
       kommen dabei ohnehin besser zur Geltung. */
    .monate { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .monat span.schrift { padding: 30px 7px 10px; gap: 6px; }
    .m-monat { font-size: 7px; letter-spacing: 1.3px; }
    .m-zeichen { width: 26px; height: 26px; }
    .m-thema { font-size: 14px; }

    .impuls { padding: 20px; }

    /* Nebeneinander bliebe fürs Bild und den Text zu wenig Platz. */
    .vorstellung {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    .autorin { width: 132px; height: 132px; }
}