@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 {
    /* Eine Farbe, ein Ton. Die Signaturfarbe steht oben, alle Flächen darunter
       sind derselbe Farbton in sehr hellen und sehr blassen Stufen. Deshalb ist
       das Papier nicht mehr neutralweiß, sondern ein Hauch der Akzentfarbe —
       das bindet die Seite zusammen, ohne dass irgendwo Farbe aufträgt.

       Die Familie ist an zynd.at angelehnt (dort #9a37f8 auf #f0edf4), aber
       druckreif abgedunkelt: der reine Wert hält auf hellem Grund nur 4,9:1 und
       liest sich als SaaS-Startup, was neben et-book nicht zusammengeht.

       Der Akzent tritt an genau vier Stellen auf: Name in der Kopfzeile, Linie
       an der Antwort, Unterstreichung der Links, Knopf. Mehr wäre Dekoration.
       Alle Werte prüfen und wechseln: /farbprobe/ im laufenden "npm start". */
    --akzent: #5b21a8;          /* Violett-Tinte — auf --paper 8,8:1 */
    --akzent-dunkel: #461982;   /* nur für :hover des Knopfs */

    --paper: #f8f6f9;   /* Akzentton, auf 97 % Helligkeit gezogen */
    --flaeche: #f1eef4; /* eine Stufe tiefer: Code, vorformatierter Text */
    --rule: #dad5e2;    /* Linien */
    --ink: #16131b;     /* auf --paper 17,1:1 */
    --muted: #6a6076;   /* auf --paper 5,5:1, erfüllt AA für Fließtext */
}

* {
    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(--akzent);
    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(--akzent);
    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-decoration-color: var(--akzent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

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

.cta:hover {
    background: var(--akzent-dunkel);
}

a:focus-visible {
    outline: 2px solid var(--akzent);
    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(--akzent);
}


/* --- 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: var(--flaeche);
    padding: 0.1em 0.3em;
}

.eintrag pre {
    background: var(--flaeche);
    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;
}