/* =========================================================
   Theme-Grundstruktur.
   Die Farben selbst kommen als CSS-Variablen aus einem
   Inline-<style>-Block (siehe theme/header.php), damit sie im
   Admin-Bereich unter "Einstellungen" änderbar sind. Hier wird
   nur definiert, WAS diese Variablen gestalten.
   ========================================================= */

* { box-sizing: border-box; }

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

/* Manche Schriftarten (z.B. eine Zierschrift) wirken bei gleicher
   Schriftgröße optisch kleiner als andere. --font-scale (siehe
   theme/header.php, je nach unter Admin -> Einstellungen -> Schriftart
   gewählter Schrift) gleicht das aus, indem die Grundschriftgröße der
   gesamten Seite passend mit-skaliert wird. Bewusst auf <html> (nicht
   <body>), damit auch alle "rem"-Angaben in diesem Stylesheet (z.B. bei
   Überschriften) automatisch mitskalieren. */
html {
    font-size: calc(100% * var(--font-scale, 1));
}

body {
    /* Hintergrundfarbe IMMER gesetzt (auch ohne Hintergrundbild), Bild-
       bezogene Eigenschaften einzeln mit unschädlichem Standardwert, falls
       kein Hintergrundbild aktiv ist (siehe Admin -> Einstellungen & Design
       -> Hintergrundbild bzw. theme/header.php, das --bg-image & Co. nur
       setzt, wenn tatsächlich eines ausgewählt wurde) - "Kachel" lässt
       background-attachment bewusst auf seinem Standardwert "scroll", damit
       das Bild ganz normal mit dem Seiteninhalt mitwächst/-scrollt; "Fest"
       hält es dagegen exakt auf Bildschirmgröße fixiert, während Text/Bilder
       darüber hinweg gleiten. */
    background-color: var(--bg);
    background-image: var(--bg-image, none);
    background-repeat: var(--bg-repeat, no-repeat);
    background-attachment: var(--bg-attachment, scroll);
    background-size: var(--bg-size, auto);
    background-position: var(--bg-position, top left);
    color: var(--text);
    font-family: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    line-height: 1.6;
    transition: background-color .2s ease, color .2s ease;
}

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

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

.container {
    /* Die nutzbare Breite ist unter Admin -> Einstellungen & Design ->
       "Layout" einstellbar (--container-width, siehe theme/header.php);
       1100px ist nur der Rueckfallwert, falls diese Einstellung fehlt. */
    max-width: var(--container-width, 1100px);
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Header / Bar ---------- */

.site-header {
    background: var(--bar-bg);
    color: var(--bar-text);
    border-bottom: 1px solid rgba(128,128,128,.2);
}

.site-header .header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.site-header a { color: var(--bar-text); }

/* Menüposition "same_row": Menü nimmt den Platz zwischen Logo/Titel und Konto-Bereich ein.
   Die Ausrichtung innerhalb dieses Platzes (links/zentriert/rechts) kommt über die
   Klasse "menu-align-*" (siehe theme/header.php, Einstellung "Ausrichtung des
   Hauptmenüs"); "zentriert" ist der Standard und daher hier direkt gesetzt, die
   beiden anderen Ausrichtungen überschreiben das gezielt weiter unten. */
.site-header.menu-same_row .header-row nav.main-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}
.site-header.menu-same_row.menu-align-left .header-row nav.main-nav { justify-content: flex-start; }
.site-header.menu-same_row.menu-align-right .header-row nav.main-nav { justify-content: flex-end; }

/* Menüposition "above"/"below": eigene volle Leiste über bzw. unter der Kopfzeile.
   Auch hier "zentriert" als Standard, überschreibbar über "menu-align-*". */
.nav-bar {
    background: var(--bar-bg);
    border-bottom: 1px solid rgba(128,128,128,.15);
}
.site-header.menu-above .header-row { border-top: 1px solid rgba(128,128,128,.15); }
.nav-bar .container {
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
}
.site-header.menu-align-left .nav-bar .container { justify-content: flex-start; }
.site-header.menu-align-right .nav-bar .container { justify-content: flex-end; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.account-area {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .88rem;
    white-space: nowrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.brand img.logo {
    /* Bewusst "height" (feste Höhe), nicht "max-height": max-height wirkt
       nur als Obergrenze und VERKLEINERT ein zu großes Bild, VERGRÖSSERT
       ein kleineres Bild aber nie über seine tatsächlich gespeicherte
       Pixelgröße hinaus - genau das war der gemeldete Fehler ("Logo wird
       nicht weiter vergrößert als bis zu den gespeicherten Größen der
       Grafik"). Mit einer festen Höhe skaliert der Browser das Bild in
       beide Richtungen; "width: auto" hält dabei weiterhin automatisch das
       Seitenverhältnis ein. */
    height: var(--logo-height, 56px);
    width: auto;
}

.brand-text h1 {
    font-size: 1.4rem;
    margin: 0;
}

.brand-text p {
    margin: 2px 0 0;
    font-size: .9rem;
    opacity: .8;
}

.header-image-wrap img {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
}

/* ---------- Navigation (mehrstufig) ---------- */

nav.main-nav { position: relative; }

nav.main-nav ul {
    list-style: none;
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

nav.main-nav li {
    position: relative;
}

nav.main-nav > ul > li > a {
    /* display:flex (statt "block") sorgt - genau wie bei den Untermenü-Links
       weiter unten - dafür, dass ein optionales Menüpunkt-Icon (siehe
       .menu-item-icon) IMMER in derselben Zeile vor dem Text steht, statt
       als eigener Block darüber zu stehen. */
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 500;
}

nav.main-nav > ul > li > a:hover {
    background: rgba(128,128,128,.15);
    text-decoration: none;
}

nav.main-nav ul.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bar-bg);
    border: 1px solid rgba(128,128,128,.25);
    border-radius: 8px;
    padding: 6px;
    min-width: 200px;
    flex-direction: column;
    z-index: 50;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

nav.main-nav li:hover > ul.submenu,
nav.main-nav li:focus-within > ul.submenu {
    display: flex;
}

nav.main-nav ul.submenu ul.submenu {
    top: 0;
    left: 100%;
}

nav.main-nav ul.submenu li > a {
    /* display:flex (statt des Standards "inline") sorgt dafuer, dass ein
       optionales Menüpunkt-Icon (siehe .menu-item-icon) IMMER in derselben
       Zeile vor dem Text steht und mittig dazu ausgerichtet ist. Als reines
       Inline-Element rutschte das Icon hier sonst in eine eigene Zeile über
       den Text, wodurch der Menüpunkt unnötig hoch wirkte und wie
       abgeschnitten aussah. */
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

nav.main-nav ul.submenu li > a:hover {
    background: rgba(128,128,128,.15);
}

/* Menüpunkt-Icon (optional, je Menüpunkt einzeln hochladbar - siehe Admin -> Navigation/Menü).
   vertical-align:middle statt eines fest verdrahteten Pixel-Versatzes, damit
   die Mitte des Icons unabhängig von Schriftgröße/Zeilenhöhe sauber auf
   Höhe des Textes bleibt; flex-shrink:0 verhindert, dass es in den
   flex-basierten Menü-Links unten gestaucht wird. */
.menu-item-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Menüpunkt als kompakte Schaltfläche statt als Textlink (siehe display_style
   in menu_items). display:inline-flex (statt des von den Basis-Regeln oben
   geerbten "block"/"flex") sorgt dafür, dass die Schaltfläche sich eng um
   Icon+Text zusammenzieht, statt die volle Zeilenbreite auszufüllen -
   zusammen mit align-items:center bleiben Icon und Text dabei garantiert in
   EINER Zeile nebeneinander (siehe Kommentar bei "ul.submenu li > a" oben -
   ohne diese explizite Flex-Ausrichtung konnte das Icon sonst über den Text
   rutschen und die Schaltfläche wirkte doppelt so hoch). border-radius
   bewusst moderat (nicht mehr volles Pill-Oval) gewählt, damit die
   Schaltfläche eher rechteckig mit abgerundeten Ecken wirkt. Das
   vertikale Padding ist bewusst knapper als das horizontale bemessen:
   dadurch bleibt die Schaltflächen-Höhe trotz eines größeren Icons
   (.menu-item-icon) unverändert - das Icon füllt die Höhe weitgehend
   aus, statt die Schaltfläche zusätzlich aufzublähen. */
nav.main-nav > ul > li.menu-item-button > a,
nav.main-nav ul.submenu li.menu-item-button > a {
    display: inline-flex;
    align-items: center;
    background: var(--accent);
    color: #fff;
    padding: 4px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: .85rem;
    white-space: nowrap;
    line-height: 1.3;
}
nav.main-nav > ul > li.menu-item-button > a:hover,
nav.main-nav ul.submenu li.menu-item-button > a:hover {
    /* text-decoration:none unterdrückt gezielt die allgemeine Link-Unterstreichung
       bei Hover (siehe "a:hover" oben) - die soll nur bei normalen Textlinks
       erscheinen, nicht bei Schaltflächen. Im Hauptmenü ergab sich das bisher
       zufällig schon richtig (die dortige Textlink-Hover-Regel setzt es bereits),
       im Untermenü fehlte das aber, da die dortige Textlink-Hover-Regel bewusst
       KEIN text-decoration:none setzt (Unterstreichung soll dort bei normalen
       Textlinks ja weiterhin erscheinen). */
    opacity: .88;
    background: var(--accent);
    text-decoration: none;
}

.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(128,128,128,.4);
    color: inherit;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
}

@media (max-width: 780px) {
    .nav-toggle { display: inline-block; }
    nav.main-nav { width: 100%; display: none; }
    nav.main-nav.open { display: block; }
    nav.main-nav > ul { flex-direction: column; }
    nav.main-nav ul.submenu { position: static; box-shadow: none; border: none; padding-left: 12px; }
    nav.main-nav ul.submenu ul.submenu { left: 0; }
    nav.main-nav li:hover > ul.submenu { display: none; }
    nav.main-nav li.open > ul.submenu { display: flex; }
}

/* ---------- Inhalt ---------- */

main { padding: 40px 0 60px; min-height: 50vh; }

.page-content h1:first-child,
article.post h1:first-child { margin-top: 0; }

/* =========================================================
   Darstellung der Formatierungsmöglichkeiten des WYSIWYG-Editors
   (Quill, siehe assets/js/quill-init.js) im veröffentlichten Inhalt.
   Der Editor selbst bekommt sein Aussehen von quill.snow.css (nur im
   Admin-Bereich eingebunden) - hier wird nachgebildet, wie dieselben,
   im gespeicherten HTML enthaltenen Klassen/Attribute (z.B. "ql-indent-2"
   oder data-checked="true") auch auf der eigentlichen Website aussehen
   sollen. Farben (Text-/Hintergrundfarbe) sowie hoch-/tiefgestellt
   brauchen hier keine eigenen Regeln: Quill speichert sie direkt als
   Inline-Style bzw. als normale <sub>/<sup>-Tags im HTML.
   ========================================================= */

.page-content blockquote,
article.post blockquote {
    margin: 16px 0;
    padding: 4px 18px;
    border-left: 4px solid var(--accent);
    opacity: .9;
}
.page-content pre,
article.post pre {
    margin: 16px 0;
    padding: 12px 14px;
    background: var(--bar-bg);
    color: var(--text);
    border-radius: 8px;
    overflow-x: auto;
    font-family: Monaco, Consolas, "Courier New", monospace;
    font-size: .92em;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Aufzaehlungs-/nummerierte Listen und Checklisten: Quill legt Verschachtelung
   nicht als echt verschachtelte <ul>/<ol> an, sondern flach mit "ql-indent-N"
   je Eintrag - deshalb hier (getreu nach quill.core.css) ueber
   CSS-Zaehler/Pseudo-Elemente nachgebildet statt sich auf die native
   Listendarstellung des Browsers zu verlassen. */
.page-content ol, .page-content ul,
article.post ol, article.post ul {
    padding-left: 1.5em;
    margin: 12px 0;
}
.page-content ol > li, .page-content ul > li,
article.post ol > li, article.post ul > li {
    list-style-type: none;
}
.page-content ul > li::before,
article.post ul > li::before { content: '\2022'; }
.page-content ul[data-checked] > li::before,
article.post ul[data-checked] > li::before { color: var(--text); opacity: .7; }
.page-content ul[data-checked="true"] > li::before,
article.post ul[data-checked="true"] > li::before { content: '\2611'; }
.page-content ul[data-checked="false"] > li::before,
article.post ul[data-checked="false"] > li::before { content: '\2610'; }
.page-content li::before,
article.post li::before {
    display: inline-block;
    white-space: nowrap;
    width: 1.2em;
}
.page-content li:not(.ql-direction-rtl)::before,
article.post li:not(.ql-direction-rtl)::before {
    margin-left: -1.5em;
    margin-right: .3em;
    text-align: right;
}
.page-content li.ql-direction-rtl::before,
article.post li.ql-direction-rtl::before { margin-left: .3em; margin-right: -1.5em; }
.page-content ol li:not(.ql-direction-rtl), .page-content ul li:not(.ql-direction-rtl),
article.post ol li:not(.ql-direction-rtl), article.post ul li:not(.ql-direction-rtl) { padding-left: 1.5em; }
.page-content ol li.ql-direction-rtl, .page-content ul li.ql-direction-rtl,
article.post ol li.ql-direction-rtl, article.post ul li.ql-direction-rtl { padding-right: 1.5em; }

.page-content ol, article.post ol {
    counter-reset: tbql-1 tbql-2 tbql-3 tbql-4 tbql-5 tbql-6 tbql-7 tbql-8 tbql-9;
}
.page-content ol li, article.post ol li { counter-increment: tbql-0; }
.page-content ol li::before, article.post ol li::before { content: counter(tbql-0, decimal) '. '; }
/* Verschachtelungsebenen 1-8 sowie das dazugehoerige Nummerierungsschema
   (Buchstaben/roemisch/Dezimal im Wechsel, exakt wie Quill es selbst tut). */
.page-content .ql-indent-1:not(.ql-direction-rtl), article.post .ql-indent-1:not(.ql-direction-rtl) { padding-left: 3em; }
.page-content li.ql-indent-1:not(.ql-direction-rtl), article.post li.ql-indent-1:not(.ql-direction-rtl) { padding-left: 4.5em; }
.page-content .ql-indent-2:not(.ql-direction-rtl), article.post .ql-indent-2:not(.ql-direction-rtl) { padding-left: 6em; }
.page-content li.ql-indent-2:not(.ql-direction-rtl), article.post li.ql-indent-2:not(.ql-direction-rtl) { padding-left: 7.5em; }
.page-content .ql-indent-3:not(.ql-direction-rtl), article.post .ql-indent-3:not(.ql-direction-rtl) { padding-left: 9em; }
.page-content li.ql-indent-3:not(.ql-direction-rtl), article.post li.ql-indent-3:not(.ql-direction-rtl) { padding-left: 10.5em; }
.page-content .ql-indent-4:not(.ql-direction-rtl), article.post .ql-indent-4:not(.ql-direction-rtl) { padding-left: 12em; }
.page-content li.ql-indent-4:not(.ql-direction-rtl), article.post li.ql-indent-4:not(.ql-direction-rtl) { padding-left: 13.5em; }
.page-content .ql-indent-5:not(.ql-direction-rtl), article.post .ql-indent-5:not(.ql-direction-rtl) { padding-left: 15em; }
.page-content li.ql-indent-5:not(.ql-direction-rtl), article.post li.ql-indent-5:not(.ql-direction-rtl) { padding-left: 16.5em; }
.page-content .ql-indent-6:not(.ql-direction-rtl), article.post .ql-indent-6:not(.ql-direction-rtl) { padding-left: 18em; }
.page-content li.ql-indent-6:not(.ql-direction-rtl), article.post li.ql-indent-6:not(.ql-direction-rtl) { padding-left: 19.5em; }
.page-content .ql-indent-7:not(.ql-direction-rtl), article.post .ql-indent-7:not(.ql-direction-rtl) { padding-left: 21em; }
.page-content li.ql-indent-7:not(.ql-direction-rtl), article.post li.ql-indent-7:not(.ql-direction-rtl) { padding-left: 22.5em; }
.page-content .ql-indent-8:not(.ql-direction-rtl), article.post .ql-indent-8:not(.ql-direction-rtl) { padding-left: 24em; }
.page-content li.ql-indent-8:not(.ql-direction-rtl), article.post li.ql-indent-8:not(.ql-direction-rtl) { padding-left: 25.5em; }
.page-content .ql-indent-1.ql-direction-rtl.ql-align-right, article.post .ql-indent-1.ql-direction-rtl.ql-align-right { padding-right: 3em; }
.page-content .ql-indent-2.ql-direction-rtl.ql-align-right, article.post .ql-indent-2.ql-direction-rtl.ql-align-right { padding-right: 6em; }
.page-content .ql-indent-3.ql-direction-rtl.ql-align-right, article.post .ql-indent-3.ql-direction-rtl.ql-align-right { padding-right: 9em; }
.page-content .ql-indent-4.ql-direction-rtl.ql-align-right, article.post .ql-indent-4.ql-direction-rtl.ql-align-right { padding-right: 12em; }
.page-content .ql-indent-5.ql-direction-rtl.ql-align-right, article.post .ql-indent-5.ql-direction-rtl.ql-align-right { padding-right: 15em; }
.page-content .ql-indent-6.ql-direction-rtl.ql-align-right, article.post .ql-indent-6.ql-direction-rtl.ql-align-right { padding-right: 18em; }
.page-content .ql-indent-7.ql-direction-rtl.ql-align-right, article.post .ql-indent-7.ql-direction-rtl.ql-align-right { padding-right: 21em; }
.page-content .ql-indent-8.ql-direction-rtl.ql-align-right, article.post .ql-indent-8.ql-direction-rtl.ql-align-right { padding-right: 24em; }

/* Nummerierungsschema je Verschachtelungsebene (1=a,b,c / 2=i,ii,iii /
   3=1,2,3 / ... im Wechsel), identisch zu Quills eigener Editor-Darstellung. */
.page-content ol li.ql-indent-1, article.post ol li.ql-indent-1 { counter-increment: tbql-1; }
.page-content ol li.ql-indent-1::before, article.post ol li.ql-indent-1::before { content: counter(tbql-1, lower-alpha) '. '; }
.page-content ol li.ql-indent-1, article.post ol li.ql-indent-1 { counter-reset: tbql-2 tbql-3 tbql-4 tbql-5 tbql-6 tbql-7 tbql-8; }
.page-content ol li.ql-indent-2, article.post ol li.ql-indent-2 { counter-increment: tbql-2; }
.page-content ol li.ql-indent-2::before, article.post ol li.ql-indent-2::before { content: counter(tbql-2, lower-roman) '. '; }
.page-content ol li.ql-indent-2, article.post ol li.ql-indent-2 { counter-reset: tbql-3 tbql-4 tbql-5 tbql-6 tbql-7 tbql-8; }
.page-content ol li.ql-indent-3, article.post ol li.ql-indent-3 { counter-increment: tbql-3; }
.page-content ol li.ql-indent-3::before, article.post ol li.ql-indent-3::before { content: counter(tbql-3, decimal) '. '; }
.page-content ol li.ql-indent-3, article.post ol li.ql-indent-3 { counter-reset: tbql-4 tbql-5 tbql-6 tbql-7 tbql-8; }
.page-content ol li.ql-indent-4, article.post ol li.ql-indent-4 { counter-increment: tbql-4; }
.page-content ol li.ql-indent-4::before, article.post ol li.ql-indent-4::before { content: counter(tbql-4, lower-alpha) '. '; }
.page-content ol li.ql-indent-4, article.post ol li.ql-indent-4 { counter-reset: tbql-5 tbql-6 tbql-7 tbql-8; }
.page-content ol li.ql-indent-5, article.post ol li.ql-indent-5 { counter-increment: tbql-5; }
.page-content ol li.ql-indent-5::before, article.post ol li.ql-indent-5::before { content: counter(tbql-5, lower-roman) '. '; }
.page-content ol li.ql-indent-6, article.post ol li.ql-indent-6 { counter-increment: tbql-6; }
.page-content ol li.ql-indent-6::before, article.post ol li.ql-indent-6::before { content: counter(tbql-6, decimal) '. '; }
.page-content ol li.ql-indent-7, article.post ol li.ql-indent-7 { counter-increment: tbql-7; }
.page-content ol li.ql-indent-7::before, article.post ol li.ql-indent-7::before { content: counter(tbql-7, lower-alpha) '. '; }
.page-content ol li.ql-indent-8, article.post ol li.ql-indent-8 { counter-increment: tbql-8; }
.page-content ol li.ql-indent-8::before, article.post ol li.ql-indent-8::before { content: counter(tbql-8, lower-roman) '. '; }

/* Schriftart / Schriftgröße (aus der Werkzeugleiste des Editors) */
.page-content .ql-font-serif, article.post .ql-font-serif { font-family: Georgia, "Times New Roman", serif; }
.page-content .ql-font-monospace, article.post .ql-font-monospace { font-family: Monaco, Consolas, "Courier New", monospace; }
.page-content .ql-size-small, article.post .ql-size-small { font-size: .75em; }
.page-content .ql-size-large, article.post .ql-size-large { font-size: 1.5em; }
.page-content .ql-size-huge, article.post .ql-size-huge { font-size: 2.5em; }

/* Ausrichtung und Textrichtung */
.page-content .ql-align-center, article.post .ql-align-center { text-align: center; }
.page-content .ql-align-right, article.post .ql-align-right { text-align: right; }
.page-content .ql-align-justify, article.post .ql-align-justify { text-align: justify; }
.page-content .ql-direction-rtl, article.post .ql-direction-rtl { direction: rtl; text-align: inherit; }

/* Eingebettetes Video (Werkzeug „Video“) */
.page-content .ql-video, article.post .ql-video {
    display: block;
    width: 100%;
    max-width: 720px;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 8px;
    margin: 16px 0;
}
.page-content .ql-video.ql-align-center, article.post .ql-video.ql-align-center { margin-left: auto; margin-right: auto; }
.page-content .ql-video.ql-align-right, article.post .ql-video.ql-align-right { margin-left: auto; margin-right: 0; }

.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li { padding: 20px 0; border-bottom: 1px solid rgba(128,128,128,.2); }
.post-list li:first-child { padding-top: 0; }
.post-meta { font-size: .85rem; opacity: .7; margin: 4px 0 8px; }

/* --- Beitragsbild (Blog) --------------------------------------------
   Grosses Bild oben im einzelnen Beitrag, kleine Vorschau links in der
   Übersichts-/Kategorie-Liste - beides optional, nur falls beim Beitrag
   unter "Beitragsbild" eines ausgewählt wurde (siehe admin/post-edit.php). */
.post-featured-image {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 10px;
    margin: 0 0 20px;
}
.post-list li.has-thumb { display: flex; gap: 16px; align-items: flex-start; }
.post-list-thumb-link { flex: 0 0 auto; display: block; }
.post-list-thumb {
    width: 130px;
    height: 92px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.post-list-body { flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) {
    .post-list li.has-thumb { flex-direction: column; }
    .post-list-thumb { width: 100%; height: auto; max-height: 200px; }
}

/* Bilder im Seiten-/Beitragsinhalt: kleines Vorschaubild, Klick öffnet es
   groß (Lightbox), erneuter Klick schließt es wieder (siehe site.js). Ein
   Bild, das bereits selbst als Link verwendet wird, bekommt diese Klasse
   nicht (siehe style_content_images() in includes/functions.php) und
   bleibt ein ganz normaler, funktionierender Link. Wurde ein Bild im Editor
   per Ziehpunkt in der Größe verändert (Zusatzmodul "quill-image-resize-module",
   siehe quill-init.js), trägt es ein eigenes width-Attribut - die folgende
   180px-Standardbreite gilt deshalb nur für Bilder OHNE eigenes width-Attribut
   (:not([width])); die eigene Größe wird dabei weiterhin nie breiter als die
   verfügbare Spalte (max-width: 100%). */
.page-content img.content-thumb,
article.post img.content-thumb {
    max-width: 100%;
    height: auto;
    display: inline-block;
    border-radius: 6px;
    cursor: zoom-in;
    margin: 6px 12px 6px 0;
    vertical-align: top;
    transition: opacity .15s ease;
}
.page-content img.content-thumb:not([width]),
article.post img.content-thumb:not([width]) {
    width: 180px;
}
.page-content img.content-thumb:hover,
article.post img.content-thumb:hover { opacity: .88; }

.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh 5vw;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}
.lightbox-overlay.open {
    opacity: 1;
    visibility: visible;
}
.lightbox-overlay .lightbox-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    cursor: zoom-out;
}

/* Video-Dateien direkt aus der Medienbibliothek eingebettet */
.page-content video,
article.post video {
    max-width: 100%;
    border-radius: 8px;
    display: block;
    margin: 16px 0;
}

/* Automatische YouTube-Vorschau für alleinstehende Video-Links */
.youtube-embed {
    position: relative;
    width: 100%;
    max-width: 720px;
    aspect-ratio: 16 / 9;
    margin: 16px 0;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}
.youtube-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
@supports not (aspect-ratio: 16 / 9) {
    .youtube-embed { padding-bottom: 56.25%; height: 0; }
}

.btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: .95rem;
}
.btn:hover { opacity: .9; text-decoration: none; }

.card {
    border: 1px solid rgba(128,128,128,.25);
    border-radius: 10px;
    padding: 20px;
}

/* ---------- Footer ---------- */

.site-footer {
    background: var(--bar-bg);
    color: var(--bar-text);
    border-top: 1px solid rgba(128,128,128,.2);
    padding: 24px 0;
    font-size: .9rem;
}

.site-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.site-footer a { color: var(--bar-text); }

.site-footer nav ul {
    list-style: none;
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

/* Untermenüs im Footer - wie im Hauptmenü (siehe "nav.main-nav ul.submenu"
   weiter oben) per Hover/Fokus als Dropdown, nur öffnet es sich hier nach
   OBEN statt nach unten (bottom:100% statt top:100%), da der Footer am
   unteren Seitenende sitzt und ein nach unten aufklappendes Menü dort meist
   nicht mehr sichtbar wäre. Vorher war hier nur "display:none" ohne jede
   Möglichkeit, das Untermenü wieder einzublenden - die unteren Ebenen im
   Footermenü ließen sich dadurch gar nicht aufklappen. */
.site-footer ul.submenu {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    background: var(--bar-bg);
    border: 1px solid rgba(128,128,128,.25);
    border-radius: 8px;
    padding: 6px;
    min-width: 200px;
    flex-direction: column;
    z-index: 50;
    box-shadow: 0 -8px 24px rgba(0,0,0,.15);
    /* KEIN margin-bottom hier (bewusst anders als ein erster Versuch): ein
       Abstand zwischen Link und Dropdown erzeugt eine Lücke, in der die Maus
       beim Hochfahren zur Schaltfläche kurz weder über dem Link noch über
       dem Dropdown steht - der Hover-Zustand (li:hover) geht dadurch
       zwischendurch verloren und das Menü klappt wieder zu, bevor man es
       erreicht. Bündig anliegend (wie beim nach unten öffnenden Hauptmenü,
       siehe "nav.main-nav ul.submenu" mit top:100% ohne Abstand) bleibt der
       Hover-Bereich durchgehend. */
}

.site-footer nav li { position: relative; }

.site-footer nav li:hover > ul.submenu,
.site-footer nav li:focus-within > ul.submenu {
    display: flex;
}

/* Untermenüs ab der 2. Ebene öffnen sich seitlich statt weiter nach oben -
   analog zu "nav.main-nav ul.submenu ul.submenu" im Hauptmenü, nur am
   unteren statt oberen Rand ausgerichtet (bottom:0 statt top:0), damit sie
   bündig zum jeweils übergeordneten (nach oben geöffneten) Untermenü stehen. */
.site-footer ul.submenu ul.submenu {
    bottom: 0;
    left: 100%;
    margin-bottom: 0;
}

/* display:inline-flex sorgt (wie im Hauptmenü, siehe theme/style.css weiter
   oben) dafür, dass ein optionales Menüpunkt-Icon in derselben Zeile vor dem
   Text bleibt, statt darüber zu rutschen. */
.site-footer nav ul li > a {
    display: inline-flex;
    align-items: center;
}

.site-footer ul.submenu li > a {
    padding: 8px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.site-footer ul.submenu li > a:hover {
    background: rgba(128,128,128,.15);
}

.site-footer li.menu-item-button > a {
    background: var(--accent);
    color: #fff;
    padding: 3px 12px;
    border-radius: 10px;
    font-weight: 600;
    font-size: .82rem;
    white-space: nowrap;
    line-height: 1.3;
}
.site-footer li.menu-item-button > a:hover {
    /* text-decoration:none unterdrückt die allgemeine Link-Unterstreichung bei
       Hover (siehe "a:hover" oben) gezielt bei Schaltflächen - siehe
       gleichlautenden Kommentar bei "nav.main-nav ... li.menu-item-button > a:hover"
       weiter oben für den vollen Hintergrund. */
    opacity: .88;
    text-decoration: none;
}

/* Footer-Untermenüs auf Touch-Geräten: kein Hover verfügbar, daher hier -
   wie im Hauptmenü (siehe die frühere "@media (max-width: 780px)"-Regel
   weiter oben) - auf Klick/Tipp per ".open"-Klasse umgestellt (siehe
   assets/js/site.js) und statt als schwebendes Dropdown einfach eingerückt
   darunter angezeigt. Bewusst als EIGENE, hier (nach den .site-footer-Basis-
   regeln) platzierte Media-Query: bei gleicher Selektor-Spezifität
   entscheidet in CSS die Reihenfolge im Stylesheet, und die Grundregel
   "position:absolute" für ".site-footer ul.submenu" steht weiter oben -
   eine frühere Media-Query würde von dieser späteren Grundregel wieder
   überschrieben. */
@media (max-width: 780px) {
    .site-footer ul.submenu { position: static; box-shadow: none; border: none; padding-left: 12px; margin-bottom: 0; }
    .site-footer ul.submenu ul.submenu { left: 0; }
    .site-footer nav li:hover > ul.submenu { display: none; }
    .site-footer nav li.open > ul.submenu { display: flex; }
}

/* ---------- Formulare (z.B. Login) ---------- */

.login-form { max-width: 360px; }
.login-form label {
    display: block;
    font-weight: 600;
    margin: 14px 0 6px;
}
.login-form label:first-child { margin-top: 0; }
.login-form input[type=text],
.login-form input[type=password] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid rgba(128,128,128,.35);
    border-radius: 7px;
    background: var(--bg);
    color: var(--text);
    font-size: .95rem;
    font-family: inherit;
}

/* Checkbox "Eingeloggt bleiben" (und ähnliche Checkbox-Felder in Formularen):
   bewusst NICHT die normale block-label-Regel oben verwenden, sondern
   Kästchen und Text nebeneinander in einer Zeile. */
.remember-me-field { margin: 14px 0 0; }
.checkbox-label {
    display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; cursor: pointer;
}
.checkbox-label input[type=checkbox] { width: auto; margin: 0; }

/* Passwortfeld mit "anzeigen"-Auge, siehe data-password-toggle in assets/js/site.js. */
.password-field-wrap { position: relative; }
.password-field-wrap input[type=password], .password-field-wrap input[type=text] { padding-right: 40px; }
.password-toggle-btn {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; padding: 0; border-radius: 5px; color: var(--text);
    opacity: .6; font-size: 15px; line-height: 1;
}
.password-toggle-btn:hover { opacity: 1; background: rgba(128,128,128,.15); }

.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}
.alert-error { background: #fde8e8; color: #7a1f1f; }
.alert-success { background: #e6f7ec; color: #14532d; }

@media (prefers-color-scheme: dark) {
    .alert-error { background: #3a1f1f; color: #f8b4b4; }
    .alert-success { background: #103322; color: #86efac; }
}