/* Angleichung an das Erscheinungsbild von beyond-content.de.
   Überschreibt nur Farben, Schriften und Flächen des PaperMod-Themes.
   Inhalt, Seitenaufbau und Responsive-Verhalten bleiben unberührt.
   Wird über layouts/partials/extend_head.html nach dem Theme-Stylesheet geladen. */

@font-face {
    font-display: swap;
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 300;
    src: url(/fonts/titillium-web-v18-latin-300.woff2) format("woff2");
}

/* 600 wird von keiner Regel direkt gesetzt, dient aber als Fettschnitt:
   fett ausgezeichneter Fließtext greift sonst zur künstlich verfetteten 300.
   Eine nicht benutzte Schnittstelle wird vom Browser nicht geladen. */
@font-face {
    font-display: swap;
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 600;
    src: url(/fonts/titillium-web-v18-latin-600.woff2) format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Roboto Slab";
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/roboto-slab-v35-latin-regular.woff2) format("woff2");
}

/* ---- Farben aus dem beyond-content-Stylesheet ---- */

:root {
    --theme: #ffffff;
    --entry: #1F2F2D;
    --primary: #1F2F2D;
    --secondary: #717770;
    --tertiary: #B0BAB3;
    --content: #1F2F2D;
    --border: #1F2F2D;
    --radius: 16px;
}

.dark {
    --theme: #0F1D1D;
    --entry: #1F2F2D;
    --primary: #ebebef;
    --secondary: #B0BAB3;
    --tertiary: #717770;
    --content: #ebebef;
    --border: #1F2F2D;
}

body.list { background: #ffffff; }
body.dark.list { background: #0F1D1D; }

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

body {
    font-family: "Titillium Web", "Segoe UI", system-ui, sans-serif;
    font-weight: 300;
    font-size: 16px;
}

@media screen and (min-width: 768px) {
    body { font-size: 18px; }
}

h1, h2, h3, h4, h5, h6,
.logo a {
    font-family: "Roboto Slab", "Zilla Slab", Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* Die Linknamen stehen seit dem 11.09.2026 in Satzschreibung, damit sie wie
   alle anderen Überschriften in Roboto Slab stehen können. Die Marke setzt
   Roboto Slab nie in Versalien — beides gehört zusammen. */
.post-content .entry-header h3 { letter-spacing: -0.02em; }

/* ---- Links: gepunktet, türkis beim Überfahren ---- */

.post-content a {
    box-shadow: none;
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 0.06em;
}

.post-content a:hover { color: #4DBAB3; }

/* Die Icons standen im Entwurf mittig, im Markup gibt es aber keine Zentrierung:
   auf der Startseite liegen sie in einem Block ohne text-align. */
.social-icons {
    display: flex;
    justify-content: center;
}

.social-icons a {
    text-decoration: none;
    box-shadow: none;
    color: #717770;
    transition: color 0.3s ease-in-out;
}

.dark .social-icons a { color: #B0BAB3; }

/* Beim Überfahren gelb. Im hellen Modus steht die Ikone auf Weiß, dort wäre
   Gelb praktisch unsichtbar (Kontrast 1,2:1) — deshalb dort das Dunkelgrün,
   das die Marke auf hellem Grund ohnehin als Akzent führt. */
.social-icons a:hover { color: #1F2F2D; }
.dark .social-icons a:hover { color: #FFF155; }

/* ---- Linkkarten als dunkelgrüne Flächen ---- */

.post-entry {
    background: #1F2F2D;
    border: 0;
    border-radius: 16px;
    padding: var(--gap);
    transition: background-color 0.3s ease-in-out;
}

/* Signaturgeste der Marke: die Karte färbt sich beim Überfahren gelb. */
.post-entry:hover { background: #FBEF82; }
.post-content .post-entry:hover .entry-header h3 { color: #1F2F2D; }

/* Der hervorgehobene Eintrag ist schon gelb, dort dreht der Hover andersherum. */
.post-content .linktree-highlight:hover { background: #1F2F2D; }
.post-content .linktree-highlight:hover .entry-header h3 { color: #FFF155; }

.post-content .entry-header { margin: 0; }

/* Das Theme setzt hier justify-content: space-between. Solange die Überschrift
   nur aus einem Textknoten bestand, war das folgenlos. Mit dem Emoji als eigenem
   Element wären es zwei Flex-Elemente und der Text rutschte an den rechten Rand. */
.post-content .entry-header h3 {
    justify-content: flex-start;
    align-items: baseline;
    margin: 16px 0;
    color: #ffffff;
    transition: color 0.3s ease-in-out;
}
.dark .post-content .entry-header h3 { color: #ebebef; }

.entry-header h3 .emoji { margin-right: 14px; }

/* Ab Tablet mehr Luft in der Karte, darunter bleibt es beim Theme-Abstand */
@media screen and (min-width: 769px) {
    .post-entry { padding: 20px 32px; }
}

/* ---- Bilder ---- */

.post-content img { border-radius: 4px; }

/* ---- Social-Media-Block auf der Startseite ---- */

.first-entry {
    background: #1F2F2D;
    border-radius: 16px;
    padding: var(--gap);
}

.first-entry .entry-header h1 {
    text-align: center;
    color: #ffffff;
}

.first-entry .social-icons a,
.dark .first-entry .social-icons a { color: #B0BAB3; }

/* Auf der dunkelgrünen Fläche der Startseite trägt Gelb in beiden Modi. */
.first-entry .social-icons a:hover,
.dark .first-entry .social-icons a:hover { color: #FFF155; }

.dark .first-entry .entry-header h1 { color: #ebebef; }

@media screen and (min-width: 769px) {
    .first-entry { padding: 32px; }
}

/* ---- Hinweis auf beyond content, Markenblock mit dem Wortzeichen ---- */

.post-content a.beyond-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 36px 0 40px;
    padding: 26px 32px;
    background: #1F2F2D;
    border-radius: 16px;
    text-decoration: none;
    box-shadow: none;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.beyond-block-label {
    color: #B0BAB3;
    font-size: 16px;
    transition: color 0.3s ease-in-out;
}

.beyond-block-mark {
    display: block;
    color: #FFF155;
    transition: color 0.3s ease-in-out;
}

.beyond-block-mark .bc-wordmark {
    display: block;
    height: 28px;
    width: auto;
}

/* Beim Überfahren färbt sich die Fläche gelb — das ist die Hover-Geste der Marke */
.post-content a.beyond-block:hover { background: #FBEF82; }
.post-content a.beyond-block:hover .beyond-block-label,
.post-content a.beyond-block:hover .beyond-block-mark { color: #1F2F2D; }