/* Kunden-Layout ÖGGL (www.oeggl.at) auf Basis von Klar. Farben aus dem Logo: Anthrazit #3b4148 (Parlament, Schrift)
   und Rot #c8102e (Gebälk, Linie); Rot auf Weiß 5,9 : 1, Anthrazit auf Weiß 10 : 1 (WCAG AA). Titel in einer Slab-Serif
   (Rockwell) wie im Logo, Fließtext in der Systemschrift; keine fremden Schriften (CSP 'self'). Die Farben der Gestaltung
   (Akzent, Fläche, Kopf, Fuß) gelten weiter, hier nur, was darüber hinausgeht. */
:root {
    --text: #2b3036;
    --gedimmt: #4a5568;
    --blau: #3b4148;
    --rot: #c8102e;
    --linie: #dfe3ea;
    --titelschrift: Rockwell, "Rockwell Nova", Georgia, "Times New Roman", serif;
    --radius: 4px;
}

/* ---------- Kopf: Logo größer als im Grund-Layout, Rot-Weiß-Rot als schmale Leiste oben ---------- */
.kopf { border-top: 4px solid var(--rot); }
.kopf-zeile { min-height: 132px; padding-top: 12px; padding-bottom: 12px; }
/* Querformat-Logo (4,2 : 1): bei 104 px Höhe ist der Name gut 17 px groß */
.marke-logo img { max-height: 104px; max-width: min(440px, 100%); }
.hauptmenue a { font-weight: 500; }
.hauptmenue li ul a { padding: 5px 0; }

/* ---------- Einstieg der Startseite: Anthrazit mit roter Linie wie im Logo ---------- */
.vorlage-startseite .held { background: var(--blau); color: #ffffff; border-bottom: 4px solid var(--rot); padding: 56px 0 52px; }
.vorlage-startseite .held h1 { color: #ffffff; font-size: 2.5em; max-width: 20em; }
.vorlage-startseite .held h1::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 18px; background: var(--rot); }
.vorlage-startseite .held-text { color: rgba(255, 255, 255, 0.88); }

/* Willkommen (Bild mit Text): Parlament im Hochformat schmal, das Zitat als Blockzitat */
.vorlage-startseite .block-bildmittext > figure,
.vorlage-startseite .block-bildmittext > img,
.vorlage-startseite .block-bildmittext > picture { flex: 0 0 34%; }
.block-bildmittext > figure { margin: 0; }
.block-bildmittext img { display: block; border-radius: var(--radius); }
.block-bild figure { margin: 0; }
.block-bild img { display: block; border-radius: var(--radius); }
blockquote { margin: 1.4em 0; padding: 0.2em 0 0.2em 1.2em; border-left: 4px solid var(--rot); font-family: var(--titelschrift); font-size: 1.2em; font-style: italic; color: var(--blau); }
blockquote p:last-child { margin-bottom: 0; }

/* Drei Einstiege nebeneinander (Text in ⅓-Breite): helle Karte, Titel mit Link */
.block-text.breite-drittel { background: var(--flaeche); border-top: 3px solid var(--rot); border-radius: 0 0 var(--radius) var(--radius); padding: 18px 20px 6px; }
.block-text.breite-drittel h2, .block-text.breite-drittel h3 { margin-top: 0; font-size: 1.2em; }
.block-text.breite-drittel h2::after { display: none; }

/* ---------- Inhalt ---------- */
.seitentitel h1 { color: var(--blau); }
.block-text h2 { color: var(--blau); }
.block-text h2::after { background: var(--rot); }
.block-text h3 { color: var(--blau); margin-bottom: 0.3em; }
/* Listen von Personen und Adressen (Organe, Links) etwas luftiger */
.block-text li { margin-bottom: 0.35em; }
.block-text hr { border: 0; border-top: 1px solid var(--linie); margin: 2em 0; }
.knopf { border-radius: var(--radius); }

/* ---------- Fuß: Anthrazit wie der Einstieg ---------- */
.fuss { border-top: 4px solid var(--rot); }

@media (max-width: 800px) {
    .kopf-zeile { min-height: 80px; }
    /* Platz für den Menü-Knopf daneben lassen */
    .marke-logo img { max-height: 72px; max-width: calc(100vw - 150px); }
    .vorlage-startseite .held { padding: 36px 0; }
    .vorlage-startseite .held h1 { font-size: 1.8em; }
    .vorlage-startseite .block-bildmittext > figure,
    .vorlage-startseite .block-bildmittext > img,
    .vorlage-startseite .block-bildmittext > picture { flex-basis: auto; max-width: 320px; }
}