@charset "UTF-8";

/* doeberl.at — Entwurf A2 ("Tufte mit Rückgrat")
   ==============================================
   et-book auf Tufte-Papier, aber ohne den Essay-Apparat von tufte.css:
   keine Randnoten, keine Sidenote-Counter, kein Dunkelmodus. Die Seite ist
   bewusst hell — helle, kontrastreiche Typografie liest sich in diesem Markt
   professioneller als der dunkle Entwickler-Default.

   et-book stammt aus tufte.css (MIT) und liegt weiterhin unter css/et-book/. */


/* --- Schriften ----------------------------------------------------------- */

@font-face {
    font-family: "et-book";
    src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff"),
         url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "et-book";
    src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff"),
         url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "et-book";
    src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff"),
         url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


/* --- Grundlagen ---------------------------------------------------------- */

:root {
    --paper: #fffff8;
    --ink: #111110;
    --muted: #6b6b5e;   /* auf --paper: Kontrast 5.4:1, erfüllt AA für Fließtext */
    --rule: #ddd8c4;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 17px;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "et-book", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
    line-height: 1.58;
}

.wrap {
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 2rem 9rem;
}


/* --- Kopfzeile ------------------------------------------------------------
   Der Name steht hier, damit der h1 dem Angebot gehört und nicht der Person. */

header.top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 2.25rem 0 4rem;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--muted);
}

header.top .name {
    color: var(--ink);
    font-style: italic;
    font-size: 1.1rem;
    letter-spacing: 0;
}


/* --- Typografie ---------------------------------------------------------- */

h1 {
    font-weight: normal;
    font-size: clamp(2.3rem, 5.6vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -0.012em;
    margin: 0 0 2rem;
    max-width: 15em;
}

.lead {
    font-size: 1.42rem;
    line-height: 1.5;
    max-width: 31rem;
    margin: 0 0 1.2rem;
}

p {
    font-size: 1.18rem;
    max-width: 33rem;
}

section {
    margin-bottom: 6.5rem;
}

/* Abschnittsmarke: ruhig, aber vorhanden — sonst liest sich die Seite als Essay. */
.label {
    display: block;
    font-style: italic;
    font-size: 1rem;
    color: var(--muted);
    border-top: 1px solid var(--rule);
    padding-top: 0.8rem;
    margin-bottom: 2.75rem;
}


/* --- Die drei Situationen -------------------------------------------------
   Alternativen, keine Reihenfolge — deshalb bewusst ohne Nummerierung.
   Der Größensprung gegenüber dem Fließtext ist das Signature-Element. */

.situation {
    margin-bottom: 4.5rem;
}

.situation h2 {
    font-weight: normal;
    font-style: italic;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1.14;
    letter-spacing: -0.015em;
    margin: 0 0 1.1rem;
    max-width: 18em;
}

/* Die Antwort ist die Pointe: aufrecht, etwas größer, mit Linie markiert. */
.antwort {
    font-size: 1.22rem;
    border-left: 2px solid var(--ink);
    padding-left: 1.2rem;
}


/* --- Wie ich arbeite ----------------------------------------------------- */

.prinzip {
    margin-bottom: 1.5rem;
}

.prinzip strong {
    font-weight: bold;
}


/* --- Links und Aktion ---------------------------------------------------- */

a {
    color: var(--ink);
    text-underline-offset: 3px;
}

.cta {
    display: inline-block;
    margin-top: 1.5rem;
    font-size: 1.15rem;
    text-decoration: none;
    color: var(--paper);
    background: var(--ink);
    padding: 0.75rem 1.5rem;
}

.cta:hover {
    background: #3a3a33;
}

a:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

/* Nebenkanal: steht als Signal da, nicht als Aufforderung — deshalb kleiner
   als der Knopf und ohne eigene Betonung. */
.kontaktzeile {
    margin-top: 1.75rem;
    font-size: 1.05rem;
    color: var(--muted);
}

.kontaktzeile a {
    color: var(--ink);
}


/* --- Zur Person ---------------------------------------------------------- */

.person {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: 2.5rem;
    align-items: start;
}

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

.person p:first-of-type {
    margin-top: 0;
}


/* --- Fusszeile ------------------------------------------------------------
   Impressum und Datenschutz gehoeren in diesem Markt sichtbar auf die Seite:
   laut Brief sind sie hier Vertrauenssignal und nicht Pflichtuebung. */

.fuss {
    margin-top: 5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    font-size: 0.95rem;
    color: var(--muted);
}

.fuss a {
    color: var(--muted);
}

.fuss a:hover {
    color: var(--ink);
}


/* --- Offene Punkte --------------------------------------------------------
   Sichtbar, nicht als HTML-Kommentar: was noch fehlt, soll beim Drüberschauen
   auffallen und nicht versehentlich live gehen. Vor dem Deploy muss die Seite
   frei von .todo sein. Bewusst in einer anderen Schrift als der Rest. */

.todo {
    display: block;
    max-width: 33rem;
    margin: 1.25rem 0;
    padding: 0.7rem 0.9rem;
    border-left: 4px solid #a8321e;
    background: #fdf1ee;
    color: #7a2415;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88rem;
    font-style: normal;
    line-height: 1.5;
}

.todo::before {
    content: "TODO(christoph): ";
    font-weight: bold;
}


/* --- Mobil ---------------------------------------------------------------
   Der Leser ist laut Brief auf dem Telefon zwischen zwei Terminen. */

@media (max-width: 720px) {
    html {
        font-size: 16px;
    }

    .wrap {
        padding: 0 1.25rem 6rem;
    }

    section {
        margin-bottom: 4.5rem;
    }

    .person {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .person img {
        max-width: 14rem;
    }
}


/* --- bits: Uebersicht und Eintraege ---------------------------------------
   Die Liste soll wie ein Inhaltsverzeichnis lesen, nicht wie ein Blog-Stream:
   Titel, Datum, ein Satz. Keine Kacheln, keine Vorschaubilder. */

ol.eintraege {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 34rem;
}

ol.eintraege li {
    border-top: 1px solid var(--rule);
    padding: 1.4rem 0;
}

ol.eintraege a {
    font-size: 1.35rem;
    line-height: 1.25;
    display: block;
    text-underline-offset: 4px;
}

ol.eintraege time,
.eintrag .datum {
    display: block;
    font-style: italic;
    color: var(--muted);
    font-size: 0.98rem;
    margin-top: 0.35rem;
}

ol.eintraege p {
    margin: 0.5rem 0 0;
    font-size: 1.08rem;
}

.eintrag .datum {
    margin-bottom: 2.5rem;
}

.eintrag h2 {
    font-style: italic;
    font-weight: normal;
    font-size: 1.6rem;
    margin: 2.75rem 0 0.9rem;
}

.eintrag ul,
.eintrag ol {
    max-width: 33rem;
    font-size: 1.18rem;
}

.eintrag code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
    background: #f4f1e4;
    padding: 0.1em 0.3em;
}

.eintrag pre {
    background: #f4f1e4;
    border: 1px solid var(--rule);
    padding: 1rem;
    overflow-x: auto;
    max-width: 36rem;
}

.eintrag pre code {
    background: none;
    padding: 0;
}

.zurueck {
    margin-top: 4rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    font-size: 1rem;
}