/*
 * Gestaltung der SCA-Module.
 *
 * Die Farben kommen, wenn vorhanden, aus den Variablen des Themes
 * (--darkblue, --red, --white). Fehlen sie, greifen die Ersatzwerte.
 * Alle Klassen beginnen mit "sca-", damit nichts mit dem Theme kollidiert.
 */

:root {
    --sca-blau: var(--darkblue, #385379);
    --sca-rot: var(--red, #cc2900);
    /* Knopffarbe: das Rot des Vereinslogos, per Einstellung aenderbar */
    --sca-knopf: var(--sca-akzent, var(--red, #cc2900));
    --sca-knopf-dunkel: #a32100;
    --sca-hell: var(--lightblue, #e2f2f8);
    --sca-weiss: #ffffff;
    --sca-text: var(--black, #010b14);
    --sca-grau: #6b7785;
    --sca-linie: rgba(56, 83, 121, 0.14);
    --sca-schatten: 0 2px 10px rgba(16, 32, 55, 0.08);
    --sca-schatten-hoch: 0 8px 26px rgba(16, 32, 55, 0.16);
    --sca-rund: 10px;
}

.sca-aussen {
    padding: 1rem;
}

/* Kopfbild ueber die ganze Breite: seitlich kein Abstand */
.sca-aussen-weit {
    padding: 1rem 0;
}

/* Fallback, falls das Theme-CSS einmal fehlt: gleiche Breite wie .container */
.sca-mitte {
    max-width: 60em;
    margin: 0 auto;
}

.sca-weit {
    width: 100%;
}

.sca-block {
    margin: 0;
    color: var(--sca-text);
}

.sca-block *,
.sca-block *::before,
.sca-block *::after {
    box-sizing: border-box;
}

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

.sca-block-titel {
    margin: 0 0 1.2rem;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--sca-blau);
    line-height: 1.25;
}

.sca-block-fuss {
    margin: 1.4rem 0 0;
}

.sca-meta {
    display: block;
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    color: var(--sca-grau);
}

.sca-marke {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--sca-hell);
    color: var(--sca-blau);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}


/*
 * Lange Web-Adressen im Fliesstext.
 *
 * Steht eine komplette Adresse als sichtbarer Linktext im Inhalt (etwa der
 * wirwunder-Link im Bikepark-Beitrag), ist sie ein einziges "Wort" von ueber
 * 600 Pixeln Breite. Auf dem Handy laesst sich die Seite dadurch seitlich
 * verschieben. Diese Regel erlaubt den Umbruch - im eigenen Block und in den
 * Inhalten des Editors.
 */
.sca-block,
.ck-content {
    overflow-wrap: break-word;
}

.sca-block a,
.ck-content a {
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- Knöpfe */

.sca-knopf,
a.sca-knopf,
button.sca-knopf {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border: 2px solid var(--sca-knopf);
    border-radius: 999px;
    background: var(--sca-knopf);
    color: var(--sca-weiss) !important;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.sca-knopf:hover,
.sca-knopf:focus {
    background: var(--sca-knopf-dunkel);
    border-color: var(--sca-knopf-dunkel);
    color: var(--sca-weiss) !important;
    transform: translateY(-1px);
}

.sca-knopf-leise,
a.sca-knopf-leise {
    background: transparent;
    color: var(--sca-knopf) !important;
}

.sca-knopf-leise:hover,
.sca-knopf-leise:focus {
    background: var(--sca-knopf);
    color: var(--sca-weiss) !important;
}

.sca-knopf-hell,
a.sca-knopf-hell {
    background: var(--sca-weiss);
    border-color: var(--sca-weiss);
    color: var(--sca-knopf) !important;
}

.sca-knopf-hell:hover,
.sca-knopf-hell:focus {
    background: var(--sca-hell);
    border-color: var(--sca-hell);
    color: var(--sca-knopf-dunkel) !important;
}

.sca-mehr,
a.sca-mehr {
    font-weight: 500;
    color: var(--sca-knopf);
    text-decoration: none;
}

/* ------------------------------------------------------- Karten (News) */

.sca-karten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.4rem;
}

.sca-karte {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--sca-rund);
    background: var(--sca-weiss);
    box-shadow: var(--sca-schatten);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.sca-karte:hover {
    box-shadow: var(--sca-schatten-hoch);
    transform: translateY(-2px);
}

.sca-karte-bild {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--sca-hell);
}

.sca-karte-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sca-karte-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.1rem 1.2rem 1.3rem;
}

.sca-karte-text h3 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.3;
}

.sca-karte-text h3 a {
    color: var(--sca-blau);
    text-decoration: none;
}

.sca-karte-text p {
    margin: 0 0 0.7rem;
    font-size: 0.95rem;
    line-height: 1.55;
}

.sca-karte-text p:last-child {
    margin: auto 0 0;
    padding-top: 0.4rem;
}

/* -------------------------------------------------- einzelner Beitrag */

.sca-beitrag .sca-titel {
    margin: 0 0 1rem;
    font-size: 1.9rem;
    line-height: 1.2;
    color: var(--sca-blau);
}

.sca-beitrag-bild {
    width: 100%;
    margin: 0 0 1.4rem;
    border-radius: var(--sca-rund);
    display: block;
}

.sca-anriss {
    margin: 0 0 1.2rem;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--sca-grau);
}

.sca-text {
    line-height: 1.65;
}

.sca-text img {
    border-radius: 6px;
}

.sca-beitrag-fuss {
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--sca-linie);
}

.sca-blaettern {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1.8rem;
}

.sca-seite {
    display: inline-block;
    min-width: 2.2rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--sca-linie);
    border-radius: 6px;
    background: var(--sca-weiss);
    color: var(--sca-knopf) !important;
    text-align: center;
    text-decoration: none;
}

.sca-seite-aktiv {
    background: var(--sca-knopf);
    border-color: var(--sca-knopf);
    color: var(--sca-weiss) !important;
}

/* ---------------------------------------------------------- Kopfbild */

.sca-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 400px;
    padding: 3rem 2rem 2.6rem;
    border-radius: var(--sca-rund);
    background-color: var(--sca-blau);
    background-size: cover;
    background-position: center;
    color: var(--sca-weiss);
    overflow: hidden;
}

.sca-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 24, 44, 0.25) 0%, rgba(10, 24, 44, 0.45) 45%, rgba(10, 24, 44, 0.85) 100%);
}

.sca-hero-inhalt {
    position: relative;
    z-index: 1;
    max-width: 44rem;
}

.sca-hero-titel {
    margin: 0 0 0.7rem;
    text-shadow: 0 1px 12px rgba(6, 16, 30, 0.45);
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.15;
    color: var(--sca-weiss);
}

.sca-hero-text {
    margin: 0 0 1.4rem;
    text-shadow: 0 1px 10px rgba(6, 16, 30, 0.45);
    font-size: 1.15rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

.sca-hero-knoepfe {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* Kopfbild über die ganze Breite: die Huelle laesst dann den Container weg */
.sca-weit .sca-hero {
    border-radius: 0;
}

/* ----------------------------------------------------------- Kacheln */

.sca-kachelraster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.2rem;
}

.sca-kachel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--sca-rund);
    background: var(--sca-weiss);
    box-shadow: var(--sca-schatten);
    color: var(--sca-text) !important;
    text-decoration: none !important;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

a.sca-kachel:hover,
a.sca-kachel:focus {
    box-shadow: var(--sca-schatten-hoch);
    transform: translateY(-2px);
    color: var(--sca-text) !important;
}

.sca-kachel-bild {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sca-hell);
}

.sca-kachel-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

a.sca-kachel:hover .sca-kachel-bild img {
    transform: scale(1.04);
}

.sca-kachel-text {
    display: block;
    padding: 1rem 1.1rem 1.2rem;
}

.sca-kachel-text strong {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--sca-blau);
}

.sca-kachel-text span {
    display: block;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--sca-grau);
}

/* ----------------------------------------------------------- Termine */

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

.sca-termin {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--sca-linie);
}

.sca-termin:last-child {
    border-bottom: 1px solid var(--sca-linie);
}

.sca-termin-datum {
    flex: 0 0 3.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0;
    border-radius: 8px;
    background: var(--sca-termin-farbe, var(--sca-blau));
    color: #fff;
    line-height: 1.1;
}

.sca-termin-tag {
    font-size: 1.25rem;
    font-weight: 700;
}

.sca-termin-monat {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sca-termin-text {
    min-width: 0;
}

.sca-termin-text strong {
    display: block;
    font-weight: 500;
    overflow-wrap: break-word;
}

/* ---------------------------------------------------------- Projekt */

.sca-projekt-raster {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1.8rem;
    align-items: start;
}

.sca-projekt-bild img {
    width: 100%;
    border-radius: var(--sca-rund);
    display: block;
}

.sca-fortschritt {
    margin: 1.4rem 0;
}

.sca-fortschritt-balken {
    height: 16px;
    border-radius: 999px;
    background: var(--sca-hell);
    overflow: hidden;
}

.sca-fortschritt-balken span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--sca-rot);
}

.sca-fortschritt-text {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    color: var(--sca-grau);
}

.sca-schritte {
    margin: 1.2rem 0;
    padding: 0;
    list-style: none;
}

.sca-schritte li {
    position: relative;
    padding: 0.25rem 0 0.25rem 1.8rem;
    line-height: 1.5;
}

.sca-schritte li::before {
    position: absolute;
    left: 0;
    top: 0.25rem;
    font-weight: 700;
}

.sca-schritte .sca-erledigt::before {
    content: "\2713";
    color: #2e8b57;
}

.sca-schritte .sca-offen::before {
    content: "\2022";
    color: var(--sca-grau);
}

.sca-schritte .sca-offen {
    color: var(--sca-grau);
}

/* ---------------------------------------------------- Text mit Bild */

.sca-textbild {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.8rem;
    align-items: center;
}

.sca-textbild-bild img {
    width: 100%;
    border-radius: var(--sca-rund);
    display: block;
    box-shadow: var(--sca-schatten);
}

.sca-bild-links .sca-textbild-bild {
    order: -1;
}

/* ------------------------------------------------------------ Zahlen */

.sca-zahlenraster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    text-align: center;
}

.sca-zahl {
    padding: 1.2rem 0.8rem;
    border-radius: var(--sca-rund);
    background: var(--sca-hell);
}

.sca-zahl strong {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--sca-blau);
}

.sca-zahl span {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.9rem;
    color: var(--sca-grau);
}

/* -------------------------------------------------------- Formulare */

.sca-formular {
    padding: 1.6rem;
    border-radius: var(--sca-rund);
    background: var(--sca-weiss);
    box-shadow: var(--sca-schatten);
}

.sca-anmeldung {
    max-width: 34rem;
}

.sca-feld {
    margin-bottom: 1rem;
}

.sca-feld label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 500;
}

.sca-feld input[type="text"],
.sca-feld input[type="email"] {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--sca-linie);
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 1rem;
    color: var(--sca-text);
}

.sca-feld input:focus {
    outline: 2px solid var(--sca-blau);
    outline-offset: 1px;
}

.sca-feld-haken label {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-weight: 400;
    font-size: 0.92rem;
    line-height: 1.5;
}

.sca-feld-haken input {
    margin-top: 0.25rem;
    flex: 0 0 auto;
}

.sca-freiwillig {
    font-weight: 400;
    color: var(--sca-grau);
}

/* Falle für Roboter: für Menschen unsichtbar, für Screenreader ausgeblendet */
.sca-honig {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.sca-meldung {
    margin: 0 0 1.2rem;
    padding: 0.9rem 1.1rem;
    border-radius: 8px;
    border-left: 4px solid var(--sca-blau);
    background: var(--sca-hell);
    line-height: 1.55;
}

.sca-meldung-gut {
    border-left-color: #2e8b57;
    background: #e8f6ee;
}

.sca-meldung-fehler {
    border-left-color: var(--sca-rot);
    background: #fdeeea;
}

.sca-hinweis {
    padding: 1.2rem;
    border-radius: var(--sca-rund);
    background: var(--sca-hell);
}

/* ------------------------------------------------------ kleine Geräte */

@media (max-width: 760px) {
    .sca-projekt-raster,
    .sca-textbild {
        grid-template-columns: 1fr;
    }

    .sca-bild-links .sca-textbild-bild {
        order: 0;
    }

    .sca-hero {
        min-height: 320px;
        padding: 2rem 1.2rem 1.6rem;
    }

    .sca-hero-titel {
        font-size: 1.6rem;
    }

    .sca-beitrag .sca-titel {
        font-size: 1.5rem;
    }

    .sca-karten {
        grid-template-columns: 1fr;
    }

    .sca-formular {
        padding: 1.1rem;
    }
}