/* =========================================================================
   Spreiberg 2026 – Seiteninhalte
   Gilt im Frontend (.s26-content) und im CKEditor (.cke_editable).

   :where(...) hält die Spezifität bei 0, sodass z. B. ":where(...) h1" genauso
   stark ist wie "h1" im alten Template. CSS, das Seiteninhalte selbst
   mitbringen, verhält sich damit wie bisher.
   ========================================================================= */

/* ---------------------------------------------------------------- Typografie */
:where(.s26-content, .cke_editable) {
    color: var(--s26-text);
    overflow-wrap: break-word;
}
:where(.s26-content, .cke_editable) h1,
:where(.s26-content, .cke_editable) h2,
:where(.s26-content, .cke_editable) h3,
:where(.s26-content, .cke_editable) h4,
:where(.s26-content, .cke_editable) h5,
:where(.s26-content, .cke_editable) h6 {
    color: var(--s26-ink);
    line-height: 1.3;
    margin: .9em 0 .5em;
}
:where(.s26-content, .cke_editable) h1 { font-size: 1.6rem; }
:where(.s26-content, .cke_editable) h2 { font-size: 1.35rem; }
:where(.s26-content, .cke_editable) h3 { font-size: 1.15rem; }
:where(.s26-content, .cke_editable) h4 { font-size: 1rem; margin: .5em 0 .3em; }
:where(.s26-content, .cke_editable) h5 { font-size: .9rem; }
:where(.s26-content, .cke_editable) h6 { font-size: .8rem; }
:where(.s26-content, .cke_editable) > :first-child,
:where(.s26-content) > .section_anchor:first-child + * { margin-top: 0; }

:where(.s26-content, .cke_editable) p { margin: .6em 0; }
:where(.s26-content, .cke_editable) a { color: var(--s26-primary); text-underline-offset: 3px; }
:where(.s26-content, .cke_editable) a:hover { color: var(--s26-ink); }

/* Trennlinie: dünne Linie mit Akzent in Vereins-Orange */
:where(.s26-content, .cke_editable) hr {
    clear: both;
    height: 3px;
    border: 0;
    margin: 26px 0 16px;
    background: linear-gradient(90deg, var(--s26-accent) 0 64px, var(--s26-line) 64px);
    border-radius: 3px;
}

:where(.s26-content, .cke_editable) ul,
:where(.s26-content, .cke_editable) ol { margin: .6em 0; padding-left: 1.4em; }
:where(.s26-content, .cke_editable) li { margin: .25em 0; }
:where(.s26-content, .cke_editable) li::marker { color: var(--s26-accent-text); }

:where(.s26-content, .cke_editable) blockquote {
    margin: 1em 0;
    padding: 12px 18px;
    border-left: 4px solid var(--s26-accent);
    background: var(--s26-bg);
    border-radius: 0 10px 10px 0;
}
:where(.s26-content, .cke_editable) address {
    margin: 10px 0 20px;
    padding-left: 12px;
    border-left: 4px solid var(--s26-primary);
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
}
:where(.s26-content, .cke_editable) pre,
:where(.s26-content, .cke_editable) code {
    font-size: .92em;
    background: var(--s26-bg);
    border: 1px solid var(--s26-line);
    border-radius: 8px;
}
:where(.s26-content, .cke_editable) code { padding: 1px 5px; }
:where(.s26-content, .cke_editable) pre { padding: 12px 14px; overflow: auto; }
:where(.s26-content, .cke_editable) pre code { border: 0; padding: 0; background: none; }

/* Tabellen */
:where(.s26-content, .cke_editable) table { border-collapse: collapse; margin: 1em 0; max-width: 100%; }
:where(.s26-content, .cke_editable) th,
:where(.s26-content, .cke_editable) td { padding: 6px 10px; vertical-align: top; border-bottom: 1px solid var(--s26-line); text-align: left; }
:where(.s26-content, .cke_editable) th { background: var(--s26-bg); }
:where(.s26-content, .cke_editable) caption { text-align: left; font-weight: 600; padding-bottom: 4px; }
:where(.s26-content, .cke_editable) td p,
:where(.s26-content, .cke_editable) td h1,
:where(.s26-content, .cke_editable) td h2,
:where(.s26-content, .cke_editable) td h3,
:where(.s26-content, .cke_editable) td h4 { margin: 0; }

/* Formulare (Anmeldung, Suche, Module) – Spezifität 0, Modul-CSS hat Vorrang */
:where(.s26-content) :where(input[type="text"], input[type="password"], input[type="email"], input[type="search"],
    input[type="tel"], input[type="url"], input[type="number"], input[type="date"], textarea, select) {
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid #c9d2e0;
    border-radius: 8px;
    background: #fff;
    color: var(--s26-text);
    font: inherit;
    font-size: 16px;
}
:where(.s26-content) :where(input, textarea, select):focus { outline: 3px solid var(--s26-chip-line); border-color: var(--s26-primary); }
:where(.s26-content) :where(button, input[type="submit"], input[type="button"], input[type="reset"]) {
    padding: 8px 18px;
    border: 1px solid var(--s26-primary);
    border-radius: 999px;
    background: var(--s26-primary);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* Sehr kleine Schrift aus dem Editor (8-10px, v. a. Datum unter Beiträgen) lesbar machen */
:where(.s26-content, .cke_editable) :is(
    [style*="font-size:8px" i], [style*="font-size: 8px" i],
    [style*="font-size:9px" i], [style*="font-size: 9px" i],
    [style*="font-size:10px" i], [style*="font-size: 10px" i]
) {
    font-size: 14px !important;
}
/* Datum rechtsbündig unter einem Beitrag: dezent grau */
:where(.s26-content, .cke_editable) p[style*="text-align: right" i] > span:is(
    [style*="font-size:8px" i], [style*="font-size: 8px" i],
    [style*="font-size:9px" i], [style*="font-size: 9px" i],
    [style*="font-size:10px" i], [style*="font-size: 10px" i]
) {
    color: var(--s26-muted);
}

/* ---------------------------------------------------------------- Meldungen (z. B. "Bitte geben Sie unten Benutzername und Passwort ein") */
.s26-content .alert {
    position: relative;
    margin: 1em 0;
    padding: 12px 48px 12px 16px;
    border: 1px solid var(--s26-chip-line);
    border-radius: 12px;
    background: var(--s26-chip);
    color: var(--s26-ink);
    font-size: 15px;
    line-height: 1.5;
}
.s26-content .alert-success { border-color: #bfe3c9; background: #e8f6ec; color: #14532d; }
.s26-content .alert-warning { border-color: #f6d9a1; background: #fff5e0; color: #7a4a00; }
.s26-content .alert-danger,
.s26-content .alert-error { border-color: #f5c2c0; background: #fdecec; color: #8a1c1c; }
.s26-content .alert .close {
    position: absolute; top: 8px; right: 8px;
    width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: 8px;
    background: transparent; color: inherit;
    font-size: 22px; font-weight: 400; line-height: 1;
    opacity: .6; cursor: pointer;
}
.s26-content .alert .close:hover,
.s26-content .alert .close:focus-visible { opacity: 1; background: rgba(15, 29, 69, .08); }

/* ---------------------------------------------------------------- Konto-Formulare (Anmeldung, Passwort vergessen, Registrierung, Einstellungen)
   Das forms.css des Kontomoduls wird auf dieser Seite nicht geladen -> Gestaltung hier. */
.s26-card:has(.cpForm) { justify-self: center; width: 100%; max-width: 620px; }
.s26-content .cpForm { display: grid; gap: 16px; margin: 1.2em 0; }
.s26-content .cpForm .formRow { display: grid; gap: 6px; }
.s26-content .cpForm .settingName { color: var(--s26-ink); font-size: 15px; font-weight: 600; }
.s26-content .cpForm .settingValue :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
}
.s26-content .cpForm .formHint { color: var(--s26-muted); font-size: 14px; }
.s26-content .cpForm .input-error { color: #b42318; font-size: 14px; }
.s26-content .cpForm .buttonsRow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.s26-content .cpForm .button {
    display: inline-block;
    flex: 1 1 auto;
    margin: 0;
    padding: 11px 22px;
    border: 1px solid var(--s26-primary);
    border-radius: 999px;
    background: var(--s26-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.s26-content .cpForm .button:hover { border-color: var(--s26-ink); border-radius: 999px; background: var(--s26-ink); }

/* ---------------------------------------------------------------- Bilder und Medien */
:where(.s26-content, .cke_editable) img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    color: var(--s26-img-border);   /* Rahmen ohne Farbangabe: hellgrau statt schwarz */
}
:where(.s26-content, .cke_editable) video { max-width: 100%; height: auto; }
:where(.s26-content, .cke_editable) iframe { max-width: 100%; }
:where(.s26-content) iframe:is([src*="youtube" i], [src*="youtu.be" i], [src*="vimeo" i]) {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
}
/* Elemente mit fester Breite aus dem Inhalt nie breiter als der Inhaltsbereich */
:where(.s26-content) [style*="width" i] { max-width: 100% !important; }

/* Bisher undefinierte Klassen aus den Inhalten (116x verwendet) */
.img-responsive, .responsive-jpg, .tesponsive-jpg, .impg-reponsive { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- Klassen aus resp-blue13.12 (style.css) */
.img-cbox {
    border: 2px solid var(--s26-line);
    border-radius: 10px;
    margin: 20px;
    max-width: 40%;
    float: right;
}
.img-mod {
    border: 2px solid #f2aa1b;
    border-radius: 10px;
    margin: 20px;
    max-width: 40%;
    float: right;
}
.img-mod img:hover { transform: scale(1.2); }
.mod-ul { margin-left: 20px; }
.flex { display: flex; justify-content: center; align-items: center; }
.video { width: 100%; height: auto; }
.image-zoom { transition: transform .7s; }
.image-zoom:hover { transform: scale(1.2); box-shadow: 10px 10px 15px silver; }

.myButton {
    justify-content: center;
    box-shadow: 0 1px 0 0 #fff6af;
    background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    background-color: #ffec64;
    border-radius: 22px;
    border: 3px solid #ffaa22;
    display: inline-block;
    cursor: pointer;
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 26px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0 1px 0 #ffee66;
}
.myButton:hover { background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%); background-color: #ffab23; }
.myButton:active { position: relative; top: 1px; }

/* Elektronik-Seite */
.tronic { width: 23%; padding: 1%; margin: 1%; float: left; }
.tronicpreis { width: 13%; padding: 1%; margin: 1%; float: left; }

/* ---------------------------------------------------------------- Klassen aus resp-blue13.12 (editor.css) */
pf { color: #0033ff; }
ol.satzung { list-style-type: lower-alpha; }
.biete-suche { width: 60%; padding: 1%; margin: 1%; float: right; }
.vorstand { width: 70%; padding: 1%; margin: 1%; float: right; }

.button,
.teaserbutton {
    display: block;
    clear: both;
    padding: 6px 14px;
    margin: 10px 10px 10px auto;
    text-align: center;
    border: 2px solid var(--s26-chip-line);
    border-radius: 1.2em;
    background: var(--s26-chip);
    color: var(--s26-ink);
    text-decoration: none;
    transition: .3s all;
}
.teaserbutton { margin: 10px; }
.button:hover,
.teaserbutton:hover { background: var(--s26-primary); border-color: var(--s26-primary); color: #fff; border-radius: .5em; }

.highlight { background-color: #ffcc00; }

.responsiveVideo, .flex-video { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.responsiveVideo iframe, .flex-video iframe,
.responsiveVideo object, .flex-video object,
.responsiveVideo embed, .flex-video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

table.table { clear: both; border: none; margin: 20px 0 5px; width: 100%; }
table.table th,
table.table tbody td { padding: 6px 8px; vertical-align: top; border: none; border-bottom: 1px solid var(--s26-line); }
table.table tbody tr:hover td { background-color: var(--s26-bg); }

.picfull { max-width: 100%; height: auto; }
.pic2left { float: left; max-width: 48%; margin: 3px 3% 2px 0; height: auto; }
.pic2right { float: right; max-width: 48%; margin: 3px 0 2px .9%; height: auto; }
.pic3left { float: left; max-width: 32%; margin: 3px 1.5% 2px 0; height: auto; }
.pic3right { float: right; max-width: 32%; margin: 3px 0 2px .3%; height: auto; }
.pic4left { float: left; max-width: 24%; margin: 3px 1% 2px 0; height: auto; }
.pic4right { float: right; max-width: 24%; margin: 3px 0 2px .5%; height: auto; }

.hideOnDesktops { display: none; }

@media (max-width: 768px) {
    .pic2left, .pic2right { max-width: 100%; margin: 3px 0 2px; }
    .pic3left, .pic3right, .pic4left, .pic4right { max-width: 49%; }
    body .hideOnTablets { display: none; }
    .hideOnDesktops { display: block; }
}
@media (max-width: 479px) {
    .hideOnMobiles { display: none; }
    body .hideOnTablets { display: block; }
    body .hideOnDesktops { display: block; }
    table.responsivetable, table.responsivetable tr,
    table.responsivetable th, table.responsivetable td { display: block; width: 99%; }
}

/* ---------------------------------------------------------------- Farben aus dem alten, dunklen Design
   Inline-Schriftfarben, die nur auf dunklem Grund lesbar waren, werden auf
   hellem Grund korrigiert. Bilder bleiben unverändert (dort färbt "color" den Rahmen). */

/* Weiße Schrift -> normale Textfarbe (außer bei eigenem Hintergrund) */
:where(.s26-content, .cke_editable) :is(
    [style^="color:#fff" i], [style^="color: #fff" i],
    [style*=";color:#fff" i], [style*="; color:#fff" i], [style*="; color: #fff" i], [style*=";color: #fff" i],
    [style^="color:white" i], [style^="color: white" i], [style*="; color: white" i], [style*=";color:white" i],
    [style*="color: rgb(255, 255, 255)" i], [style*="color:rgb(255,255,255)" i]
):not(img):not([style*="background" i]) {
    color: inherit !important;
}

/* Vereins-Orange als Schrift -> dunkleres Orange mit genug Kontrast */
:where(.s26-content, .cke_editable) :is(
    [style^="color:#f2aa1b" i], [style^="color: #f2aa1b" i],
    [style*=";color:#f2aa1b" i], [style*="; color:#f2aa1b" i], [style*="; color: #f2aa1b" i], [style*=";color: #f2aa1b" i],
    [style^="color: rgb(242, 170, 27)" i], [style*="; color: rgb(242, 170, 27)" i]
):not(img) {
    color: var(--s26-accent-text) !important;
}

/* Hellblaue Schrift -> etwas dunkleres Blau */
:where(.s26-content, .cke_editable) :is(
    [style^="color:#3498db" i], [style^="color: #3498db" i],
    [style*=";color:#3498db" i], [style*="; color:#3498db" i], [style*="; color: #3498db" i], [style*=";color: #3498db" i]
):not(img) {
    color: var(--s26-link-blue) !important;
}

/* Seite 76: Inhalt bringt eigenes CSS mit weißer ".container h1" mit */
.s26-content .container h1 { color: var(--s26-ink); }

/* ---------------------------------------------------------------- Schmale Bildschirme */
@media (max-width: 700px) {
    /* Umflossene Elemente untereinander statt nebeneinander */
    :where(.s26-content) :is(img, div, p, span, table, iframe, video)[style*="float" i],
    :where(.s26-content) img[align],
    .img-cbox, .img-mod, .biete-suche, .vorstand, .tronic, .tronicpreis {
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    :where(.s26-content) img:is([style*="float" i], [align]),
    .img-cbox, .img-mod {
        display: block;
        box-sizing: border-box;    /* dicke Rahmen zählen zur Breite */
        width: auto !important;
        max-width: 100% !important;
    }
    .biete-suche, .vorstand, .tronic, .tronicpreis { width: auto; }

    /* Bilder mit Rahmen und Außenabstand (z. B. style="margin: 20px") passen in die Breite */
    :where(.s26-content) img { box-sizing: border-box; }
    :where(.s26-content) img[style*="margin" i]:not([style*="float" i]) { max-width: calc(100% - 40px) !important; }

    /* Große Einrückungen aus dem Editor aufheben */
    :where(.s26-content) [style*="margin-left" i] { margin-left: 0 !important; }

    /* Breite Tabellen seitlich scrollbar */
    :where(.s26-content) table:not(.responsivetable) { display: block; overflow-x: auto; }

    /* Kleine Bilder vor Überschriften: links neben den Text */
    :where(.s26-content) :is(h1, h2, h3) img {
        float: left;
        max-height: 44px;
        width: auto;
        margin: 2px 12px 4px 0;
    }
    :where(.s26-content) :is(h1, h2, h3)::after { content: ""; display: table; clear: both; }
}