/* Farbvariante und Kartenoptik fuer alle oeffentlichen Seiten und Startbereiche. */
/* Ueberschreibt die globalen Variablen gezielt fuer Blog, Inhaltsseiten und Works-Uebersicht. */
body {
    --bg: #07110f;
    --bg-accent: #0d1815;
    --panel: rgba(8, 17, 14, 0.9);
    --panel-strong: rgba(6, 12, 10, 0.96);
    --line: #2a5344;
    --line-strong: #7fddb1;
    --text: #cff5e2;
    --text-soft: #88b29f;
    --heading: #f2ff8f;
    --link: #8df1c4;
    --link-hover: #fff7a7;
    --button-bg: #123126;
    --button-bg-hover: #1a4334;
    --button-text: #f4ffc2;
    --success: #92f6b7;
    --error: #ff9c90;
}

/* Oeffentliche Seiten beginnen mit etwas Luft unter der Navigation. */
main {
    padding-top: 30px;
}

/* Grundkarten fuer Intro, statische Seiten, Blog und Works-Uebersicht. */
.home-intro,
.public-page,
.blogboard,
.works-overview {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: var(--shadow);
}

/* Der Blogcontainer darf fuer dekorative Effekte Inhalte maskieren. */
.blogboard {
    position: relative;
    overflow: hidden;
}

/* Kleine pseudo-technische Zugangsmarke ueber oeffentlichen Panels. */
.blogboard::before,
.home-intro::before,
.public-page::before,
.works-overview::before {
    content: "// public access";
    display: block;
    margin-bottom: 1rem;
    color: var(--text-soft);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Standardabstaende innerhalb klassischer Text- und Intro-Panels. */
.home-intro,
.public-page,
.works-overview {
    padding: 1.35rem 1.5rem;
    margin-bottom: 1.5rem;
}

.home-intro h2,
.public-page h2,
.works-overview h2 {
    margin-bottom: 0.75rem;
}

/* Texte bleiben in oeffentlichen Lesebereichen bewusst auf angenehmer Zeilenlaenge. */
.public-page p,
.home-intro p,
.works-overview p {
    max-width: 72ch;
    color: var(--text-soft);
}