/**
 * Dateiname: layout.css
 * Beschreibung: Seiten-Grundgerüst – Identitäts-Leiste, Container, Zweispalten-Grid
 * Version: 0.1
 * Subversion: 0.1.7
 * Änderungen 0.1.7: .footer-links (+ __sep) ergänzt - Impressum/
 * Datenschutzerklärung-Links im Footer, analog /artdate (auf Nutzerwunsch),
 * siehe footer.php sowie neue Seiten impressum.php/datenschutz.php.
 * Änderungen 0.1.6: Zweiter Rücksprung (auf Nutzerwunsch) – Markenbild
 * wieder transparent, .identity-bar__meta-group bekommt jetzt
 * position:relative + z-index:1 statt padding-right, .identity-bar__
 * markenbild explizit z-index:0 – Text läuft jetzt über dem Bild statt
 * daneben (Reserve-Padding entfällt, ebenso die Mobile-Sonderregel dafür
 * in responsive.css).
 * Änderungen 0.1.5: Bugfix – .identity-bar__markenbild mit top:0/bottom:0
 * ohne explizite Höhe wurde bei einem <img> (replaced element) nicht auf
 * die Zeilenhöhe gestreckt, sondern in Originalgröße (489x479px)
 * gerendert und überdeckte die halbe Seite. Jetzt height:100% statt
 * bottom:0 - Prozentangaben lösen bei absolut positionierten Elementen
 * zuverlässig gegen die Padding-Box des Containing Blocks auf.
 * Änderungen 0.1.4: Markenbild jetzt absolut positioniert (.identity-bar
 * bekommt position:relative), bündig mit dem echten rechten/oberen/unteren
 * Rand der Kopfzeile (bricht bewusst aus dem 40px/22px-Innenabstand aus,
 * top:0/right:0/bottom:0 greifen auf die Padding-Box der Leiste, die bis
 * zum Rand reicht) - deckt dadurch die volle Zeilenhöhe ab, auf
 * Nutzerwunsch. .identity-bar__meta-group bekommt passenden
 * padding-right, damit der Text nie unter dem Bild liegt.
 * Änderungen 0.1.3: .identity-bar__meta-group/.identity-bar__markenbild
 * ergänzt – neues Markenbild rechts in der Kopfzeile, neben "gegründet
 * 1985…" (auf Nutzerwunsch). Höhe 40px, bleibt damit unter der 46px hohen
 * Logo-Kreisfläche links, sodass sich die Zeilenhöhe der Kopfzeile nicht
 * ändert.
 * Änderungen 0.1.1: .back-link entfernt (Zurück-Pfeil auf Detailseiten entfällt).
 * Änderungen 0.1.2: .two-col__aside ergänzt – Bugfix für archiv.php: bei
 * mehr als einer Sidebar-Kachel (Rückschau + neue Such-Kachel) landete die
 * zweite Kachel durch CSS-Grid-Auto-Placement in der linken statt der
 * rechten Spalte, da .two-col nur 2 Grid-Spalten definiert und beide
 * Sidebar-Kacheln bisher direkte Grid-Kinder ohne gemeinsamen Container
 * waren. .two-col__aside bündelt sie jetzt zu einem einzigen Grid-Element
 * in Spalte 2 und stapelt sie darin per Flexbox.
 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    background: var(--color-body-bg);
    color: var(--color-body-text);
    font-family: 'Barlow', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

h1, h2, h3 {
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

img {
    max-width: 100%;
    display: block;
}

/* Identitäts-Leiste */
.identity-bar {
    position: relative;
    background: var(--color-header-bg);
    border-bottom: 1px solid var(--color-nav-bg);
    padding: 22px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.identity-bar__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: inherit;
}

.identity-bar__logo {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    background: white;
}

.identity-bar__title {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.5px;
    line-height: 1.1;
    color: var(--color-nav-bg);
}

.identity-bar__subtitle {
    font-size: 13px;
    letter-spacing: 1.5px;
    color: oklch(0.94 0.005 90);
    font-weight: 600;
}

.identity-bar__meta-group {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
}

.identity-bar__markenbild {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: auto;
    z-index: 0;
}

.identity-bar__meta {
    font-size: 13px;
    color: oklch(0.94 0.005 90);
    text-align: right;
}

.identity-bar__accent {
    height: 3px;
    background: var(--color-nav-accent);
}

/* Seiten-Container */
.page-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 40px 32px 70px;
}

.page-container--narrow {
    max-width: var(--container-max-narrow);
}

.page-title {
    font-size: 34px;
    font-weight: 700;
    margin: 0 0 6px;
}

.page-lead {
    color: var(--color-text-muted);
    font-size: 16px;
    max-width: 720px;
    margin: 0 0 36px;
}

/* Zweispalten-Layout: Kachel-Stack links, feste Sidebar rechts */
.two-col {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: var(--col-gap);
    align-items: start;
}

.two-col__main {
    display: flex;
    flex-direction: column;
}

.two-col__aside {
    display: flex;
    flex-direction: column;
    gap: var(--col-gap);
}

footer.main-footer {
    text-align: center;
    padding: 32px 20px;
    color: var(--color-text-muted);
    font-size: 13px;
}

.footer-links {
    margin: 8px 0 0;
}

.footer-links a {
    color: var(--color-text-muted);
    text-decoration: underline;
}

.footer-links a:hover {
    color: var(--color-body-text);
}

.footer-links__sep {
    margin: 0 8px;
}