/* Cornelius Schwehr – öffentliche Website
   Behutsam modernisierte Fassung des alten Erscheinungsbilds:
   dunkelrote Menüspalte, ruhige Typografie, viel Weißraum. */

:root {
    --rot: #9f0505;
    --rot-dunkel: #7e0404;
    --grau: #bcbcbc;
    --text: #222;
    --text-leise: #666;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background: #e9e8e6;
    min-height: 100vh;
}

a { color: var(--rot); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

/* ----- Layout: Menüspalte links, Inhalt rechts ----- */

#layout {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

#seitenmenu {
    flex: 0 0 220px;
    background: var(--rot);
    color: #fff;
    padding: 28px 24px;
}

#seitenmenu .name {
    display: block;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 0.02em;
    margin-bottom: 28px;
}

#seitenmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#seitenmenu a {
    color: #fff;
    display: inline-block;
    padding: 4px 0;
}

#seitenmenu .untermenu {
    margin: 2px 0 6px 16px;
}

#seitenmenu .untermenu a {
    font-size: 14px;
    padding: 2px 0;
    opacity: 0.92;
}

#seitenmenu li.aktiv > a {
    text-decoration: underline;
    font-weight: bold;
}

#seitenmenu .pferd {
    margin-top: 48px;
}

#seitenmenu .pferd img {
    display: block;
    border-radius: 2px;
}

#inhalt {
    flex: 1 1 auto;
    background: lightgrey;
    padding: 36px 48px 64px;
    max-width: 860px;
}

#inhalt h1 {
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 24px;
}

#inhalt h2 {
    font-size: 17px;
    margin: 36px 0 12px;
}

#inhalt p { margin: 0 0 1em; }
#inhalt ul { padding-left: 20px; }
#inhalt li { margin-bottom: 6px; }

/* ----- Einträge (Werke, Texte, Diskografie, …) ----- */

.eintrag {
    margin: 0 0 26px;
}

.eintrag h3 {
    font-size: 15px;
    font-weight: bold;
    margin: 0;
}

.eintrag .details {
    margin: 2px 0 4px;
    color: var(--text);
}

.eintrag .downloads {
    margin: 2px 0 0;
}

.eintrag .dateityp {
    color: var(--text-leise);
    font-size: 13px;
}

.intro {
    margin-bottom: 28px;
}

/* ----- Mobile Kopfleiste ----- */

#kopfleiste {
    display: none;
    background: var(--rot);
    color: #fff;
    padding: 10px 16px;
    align-items: center;
    justify-content: space-between;
}

#kopfleiste .name {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}

#menueknopf {
    background: none;
    border: 0;
    width: 44px;
    height: 38px;
    padding: 6px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#menueknopf span {
    display: block;
    height: 3px;
    background: #fff;
    border-radius: 2px;
}

@media (max-width: 767px) {
    #kopfleiste { display: flex; }

    #layout { display: block; }

    #seitenmenu {
        display: none;
        padding: 16px 24px 24px;
    }

    body.menue-offen #seitenmenu { display: block; }

    #seitenmenu .name { display: none; }
    #seitenmenu .pferd { margin-top: 24px; }
    #seitenmenu .untermenu { display: block; }

    #inhalt { padding: 24px 20px 48px; }
}

/* ----- Splash- und Startseite ----- */

body.splash {
    background: var(--rot);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

body.splash p {
    text-align: center;
    font-size: 16px;
}

body.splash img { vertical-align: middle; }

body.splash a { color: #fff; }

body.startseite {
    background: var(--rot);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.startbox {
    display: flex;
    gap: 64px;
    align-items: flex-start;
}

.startlinks {
    list-style: none;
    margin: 0;
    padding: 0;
}

.startlinks a {
    color: #fff;
    font-size: 16px;
    line-height: 2;
}

.startmenue .pferd { margin: 40px 0 0; }
.startmenue .pferd img { display: block; }

.startbild img { display: block; }

@media (max-width: 600px) {
    .startbox { flex-direction: column-reverse; gap: 32px; }
}