/*
 * Senseler Schützenkompanie Volders – Website-Stylesheet
 * =====================================================================
 * Einzige CSS-Datei der Seite. Geladen von senseler/design.php nach den
 * Stilen des Themes "Twenty Twenty-Five".
 *
 * Seitenbreiten (760px Text, 1180px weit) sind NICHT hier, sondern in
 * design.php als Theme-Einstellung festgelegt.
 *
 * Umbruchpunkte – nur diese drei verwenden:
 *   max-width: 599px   Handy       (WordPress zeigt hier das Overlay-Menü)
 *   max-width: 899px   Tablet
 *   max-width: 1199px  kleiner Desktop
 *
 * !important nur dort, wo WordPress Werte mit sehr spezifischen Selektoren
 * oder als style="…" direkt im HTML setzt – jeweils kommentiert.
 *
 * Inhalt
 *   1. Farben & Grundwerte
 *   2. Grundlayout & Typografie
 *   3. Header & Navigation (inkl. Handy-Menü)
 *   4. Karten (gemeinsamer Kastenstil)
 *   5. Beitragslisten (Aktuelles, Archiv, Startseite)
 *   6. Einzelbeitrag & alte Joomla-Inhalte
 *   7. Startseite
 *   8. Termine
 *   9. Kontakt, Kompanie, Rechtliches
 *  10. Mitglieder
 *  11. Footer
 *  12. Hilfsklassen
 */


/* =====================================================================
   1. FARBEN & GRUNDWERTE
   ===================================================================== */

:root {
    --senseler-green: #5f6f1f;       /* Hauptfarbe: Buttons, Kartenoberkante */
    --senseler-green-dark: #3f4a16;  /* Links, Hover */
    --senseler-text: #161616;
    --senseler-muted: #666666;       /* Datum, Nebeninfos */
    --senseler-border: #dddddd;
    --senseler-soft: #f6f7f2;        /* zarte Hintergründe (Badges, Hover) */
    --senseler-radius: 13px;
    --senseler-shadow: 0 7px 22px rgba(0, 0, 0, 0.07);
    --senseler-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.11);
}


/* =====================================================================
   2. GRUNDLAYOUT & TYPOGRAFIE
   ===================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    color: var(--senseler-text);
    background: #ffffff;
}

/* Seitentitel (Seiten): zentriert. Beitragstitel siehe Abschnitt 6. */
.wp-block-post-title {
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    line-height: 1.15;
    font-weight: 500;
    text-align: center;
    margin-top: 48px;
    margin-bottom: 42px;
}

h2 {
    line-height: 1.2;
}

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

/* Buttons überall in Vereinsgrün */
.wp-block-button__link {
    background: var(--senseler-green);
    color: #ffffff;
    border-radius: 999px;
    font-weight: 700;
    padding: 12px 24px;
    transition: background 0.2s ease;
}

.wp-block-button__link:hover {
    background: var(--senseler-green-dark);
}

/* Breite Tabellen auf dem Handy waagrecht scrollbar statt abgeschnitten */
@media (max-width: 599px) {
    main table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }

    .wp-block-post-title {
        margin-top: 32px;
        margin-bottom: 28px;
    }
}


/* =====================================================================
   3. HEADER & NAVIGATION
   Aufbau (Website-Editor -> Vorlagenteil "Header"):
     .senseler-header
       .senseler-brand   (Logo + Seitentitel)
       Navigation        (Menü "Hauptmenü")
   ===================================================================== */

header.wp-block-template-part {
    position: relative;
    z-index: 10;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.035);
}

.senseler-header {
    --logo-size: 86px;
    gap: clamp(16px, 3vw, 48px);
    padding: 8px clamp(16px, 4vw, 64px);
}

.senseler-brand {
    gap: 16px;
    flex-shrink: 0;
}

.senseler-brand .wp-block-site-logo img {
    width: var(--logo-size);
    height: auto;
}

.senseler-brand .wp-block-site-title {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.senseler-brand .wp-block-site-title a {
    color: #1f2f16;
    text-decoration: none;
}

/* Menüpunkte – Größe so gewählt, dass das Menü ab 1200px in EINE Zeile passt */
.senseler-header .wp-block-navigation {
    font-size: 1.06rem;
    font-weight: 600;
}

.senseler-header .wp-block-navigation .wp-block-navigation__container {
    column-gap: 16px;
    row-gap: 8px;
}

.senseler-header .wp-block-navigation a {
    color: #111111;
    text-decoration: none;
    white-space: nowrap;
}

.senseler-header .wp-block-navigation a:hover {
    color: var(--senseler-green-dark);
}

/* Aufklappmenüs am Desktop */
.senseler-header .wp-block-navigation .wp-block-navigation__submenu-container {
    padding: 8px;
    border: 1px solid var(--senseler-border);
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
    background: #ffffff;
}

.senseler-header .wp-block-navigation .wp-block-navigation__submenu-container a {
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 1rem;
}

.senseler-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover {
    background: var(--senseler-soft);
}

/* Menü-Knopf (Handy): mind. 44x44px Touch-Fläche */
.senseler-header .wp-block-navigation__responsive-container-open,
.senseler-header .wp-block-navigation__responsive-container-close {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1199px) {
    .senseler-header {
        --logo-size: 70px;
    }

    .senseler-brand .wp-block-site-title {
        font-size: 1.3rem;
    }

    .senseler-header .wp-block-navigation {
        font-size: 1rem;
        font-weight: 500;
    }

    .senseler-header .wp-block-navigation .wp-block-navigation__container {
        column-gap: 13px;
    }
}

/* Tablet: Logo/Titel oben, Menü zentriert darunter (umbrechend) */
@media (min-width: 600px) and (max-width: 899px) {
    .senseler-header {
        flex-direction: column;
        gap: 10px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .senseler-header .wp-block-navigation .wp-block-navigation__container {
        justify-content: center;
    }
}

/* Handy: Logo/Titel links, Menü-Knopf rechts */
@media (max-width: 599px) {
    .senseler-header {
        --logo-size: 54px;
        gap: 12px;
        padding: 10px 14px;
    }

    .senseler-brand {
        gap: 10px;
    }

    .senseler-brand .wp-block-site-title {
        font-size: 1.05rem;
        white-space: normal;
    }
}

/* ---------------------------------------------------------------------
   Handy-Menü (Overlay, nur unter 600px)
   Untermenüs sind zugeklappt und öffnen per Pfeil (assets/mobile-nav.js).
   Die WordPress-Regeln für das Overlay sind sehr spezifisch; deshalb hier
   gebündelt mit !important.
   --------------------------------------------------------------------- */

.senseler-sub-toggle {
    display: none; /* nur im Overlay sichtbar, siehe unten */
}

@media (max-width: 599px) {
    .senseler-header .is-menu-open .wp-block-navigation__responsive-container-content {
        align-items: stretch !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .senseler-header .is-menu-open .wp-block-navigation__container {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
    }

    .senseler-header .is-menu-open .wp-block-navigation-item {
        position: relative;
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center;
    }

    .senseler-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(:last-child) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .senseler-header .is-menu-open .wp-block-navigation-item__content {
        display: flex !important;
        justify-content: center !important;
        align-items: center;
        min-height: 44px;
        padding: 11px 48px !important; /* rechts Platz für den Pfeil */
        white-space: normal !important;
    }

    /* Untermenü: eingerückter Kasten, standardmäßig zu */
    .senseler-header .is-menu-open .wp-block-navigation__submenu-container {
        display: none !important;
        position: static !important;
        width: auto !important;
        margin: 4px 0 14px !important;
        padding: 6px 8px !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }

    .senseler-header .is-menu-open li.senseler-sub-open > .wp-block-navigation__submenu-container {
        display: flex !important;
        flex-direction: column;
    }

    .senseler-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        padding: 9px 8px !important;
        font-size: 1rem;
    }

    /* WordPress' eigener Pfeil ist im Overlay funktionslos -> ausblenden */
    .senseler-header .is-menu-open .wp-block-navigation-submenu__toggle,
    .senseler-header .is-menu-open .wp-block-navigation__submenu-icon {
        display: none !important;
    }

    /* Eigener Pfeil-Knopf (von mobile-nav.js eingefügt) */
    .senseler-header .is-menu-open .senseler-sub-toggle {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2; /* über dem Menülink, sonst fängt der den Tipp ab */
        width: 48px;
        height: 44px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        background: none;
        color: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .senseler-header .is-menu-open .senseler-sub-toggle svg {
        transition: transform 0.2s ease;
    }

    .senseler-header .is-menu-open li.senseler-sub-open > .senseler-sub-toggle svg {
        transform: rotate(180deg);
    }

    .senseler-header .is-menu-open .senseler-sub-toggle:focus-visible {
        outline: 2px solid var(--senseler-green);
        outline-offset: -4px;
        border-radius: 6px;
    }
}


/* =====================================================================
   4. KARTEN – gemeinsamer Kastenstil
   Weißer Kasten, grüne Oberkante, weicher Schatten.
   ===================================================================== */

.wp-block-post-template > li,
.senseler-section,
.senseler-kontakt-card,
.senseler-kompanie-card,
.senseler-member-card {
    background: #ffffff;
    border: 1px solid var(--senseler-border);
    border-top: 5px solid var(--senseler-green);
    border-radius: var(--senseler-radius);
    box-shadow: var(--senseler-shadow);
    box-sizing: border-box;
}


/* =====================================================================
   5. BEITRAGSLISTEN – Aktuelles, Archiv, Startseite
   Bild immer randlos im Format 3:2 zugeschnitten (Einstellung "3:2" am
   Block "Beitragsbild"); Beiträge ohne Bild zeigen einfach keines.
   ===================================================================== */

.wp-block-post-template {
    gap: 28px;
}

.wp-block-post-template > li {
    padding: 24px 32px;
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.wp-block-post-template > li:hover {
    box-shadow: var(--senseler-shadow-hover);
}

.wp-block-post-template .wp-block-post-featured-image {
    margin: 0 0 16px;
}

.wp-block-post-template .wp-block-post-featured-image img {
    border-radius: 10px;
}

.wp-block-post-template .wp-block-post-title {
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    font-weight: 600;
    line-height: 1.22;
    text-align: left;
    margin: 0 0 8px;
}

.wp-block-post-template .wp-block-post-title a {
    color: #111111;
    text-decoration: none;
}

.wp-block-post-template .wp-block-post-title a:hover {
    color: var(--senseler-green-dark);
}

.wp-block-post-template .wp-block-post-date {
    font-size: 0.85rem;
    color: var(--senseler-muted);
    margin: 0 0 10px;
}

.wp-block-post-excerpt {
    font-size: 0.98rem;
    line-height: 1.55;
    color: #222222;
}

.wp-block-post-excerpt__excerpt {
    margin-bottom: 8px;
}

.wp-block-post-excerpt__more-link,
.wp-block-read-more {
    display: inline-block;
    color: var(--senseler-green-dark);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* Seitenzahlen unter Aktuelles/Archiv */
.wp-block-query-pagination {
    margin-top: 32px;
}

@media (max-width: 599px) {
    .wp-block-post-template > li {
        padding: 20px;
    }
}


/* =====================================================================
   6. EINZELBEITRAG & ALTE JOOMLA-INHALTE
   ===================================================================== */

.single-post .wp-block-post-title {
    text-align: left;
    margin-bottom: 28px;
}

.single-post .wp-block-post-featured-image img {
    border-radius: 14px;
}

.single-post .wp-block-post-content {
    font-size: 1.05rem;
    line-height: 1.75;
}

/* Alte Joomla-Texte (bis 2025 importiert) tragen feste Formatierungen im
   HTML: Schrift Arial 10pt, Blocksatz, seitlich schwebende Bilder.
   Diese Regeln gleichen sie an die Seite an, ohne 247 Texte einzeln
   bearbeiten zu müssen. !important, weil die Werte als style="…" im
   Text stehen. */
.wp-block-post-content span[style] {
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
}

.wp-block-post-content p[style*="justify"] {
    text-align: left !important;
}

@media (max-width: 599px) {
    .wp-block-post-content img.alignleft,
    .wp-block-post-content img.alignright,
    .wp-block-post-content img[style*="float"] {
        float: none !important;
        display: block;
        margin: 0 auto 1em !important;
    }
}


/* =====================================================================
   7. STARTSEITE
   Aufbau (Seite "Startseite", Vorlage "Seiten ohne Titel"):
     Titelbild (Block "Cover", Klasse senseler-hero)
     Abschnitte als Gruppen mit Klasse senseler-section:
       Aktuelles (3 neueste Beiträge), Nächste Termine,
       Über die Kompanie, Ansprechpartner
   ===================================================================== */

.wp-block-cover.senseler-hero {
    min-height: clamp(360px, 52vw, 560px);
    margin-bottom: 40px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    padding: clamp(28px, 5vw, 56px);
}

.senseler-hero .wp-block-cover__inner-container {
    max-width: 760px;
    min-width: 0; /* sonst wird der Textblock so breit wie das längste Wort */
}

.senseler-hero .senseler-kicker {
    margin: 0 0 12px;
    color: #d9e6a8;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.senseler-hero h1 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(1.6rem, 5.5vw, 3.4rem); /* Handy ~26px, Desktop 54px */
    font-weight: 700;
    line-height: 1.12;
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
}

.senseler-hero p {
    max-width: 640px;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.6;
    color: #f1f2ea;
}

/* Zweiter Button (Stil "Kontur"): hell durchscheinend. Selektor so spezifisch
   wie die WordPress-Regel für Kontur-Buttons, sonst wäre er durchsichtig. */
.senseler-hero .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
    background: rgba(255, 255, 255, 0.14);
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    color: #ffffff;
}

.senseler-hero .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
    background: rgba(255, 255, 255, 0.28);
}

/* Abschnitts-Kasten */
.senseler-section {
    padding: 30px 34px;
    margin-bottom: 30px;
}

.senseler-section > h2 {
    font-size: 1.6rem;
    margin: 0 0 20px;
}

/* "Aktuelles" auf der Startseite: kompaktere Karten im 3er-Raster */
.senseler-section .wp-block-post-template > li {
    padding: 0 0 18px;
    border-top-width: 1px;
    box-shadow: none;
}

.senseler-section .wp-block-post-template .wp-block-post-featured-image {
    margin: 0 0 14px;
}

.senseler-section .wp-block-post-template .wp-block-post-featured-image img {
    border-radius: 0;
}

.senseler-section .wp-block-post-template > li > :not(.wp-block-post-featured-image) {
    padding-left: 18px;
    padding-right: 18px;
}

.senseler-section .wp-block-post-template .wp-block-post-title {
    font-size: 1.15rem;
}

/* Unter 900px eine Spalte (WordPress selbst stellt erst unter 600px um –
   auf Tablets wären drei Spalten zu schmal für die Titel). */
@media (max-width: 899px) {
    .senseler-section .wp-block-post-template.is-layout-grid {
        grid-template-columns: 1fr;
    }
}

/* Fußzeile eines Abschnitts: "Alle … ansehen" (+ Facebook) */
.senseler-section-foot {
    margin-top: 22px;
    gap: 8px 26px;
}

.senseler-section-foot a,
.senseler-text-link a,
a.senseler-text-link {
    color: var(--senseler-green-dark);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.senseler-section-foot .wp-block-social-links {
    font-size: inherit; /* Block setzt sonst 24px -> Beschriftung zu groß */
    margin: 0;
}

.senseler-section-foot .wp-social-link a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    font-weight: 700;
    border-bottom: 1px solid currentColor;
}

/* WordPress verkleinert die Beschriftung sonst auf 65 %
   (Regel ".wp-block-social-links .wp-social-link span:not(…)") */
.senseler-section-foot .wp-block-social-links .wp-social-link span.wp-block-social-link-label {
    font-size: inherit;
    margin-left: 0;
}

.senseler-section-foot .wp-social-link svg {
    width: 1.05em;
    height: 1.05em;
}

/* Über die Kompanie (Block "Medien und Text") */
.senseler-about .wp-block-media-text__media img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
}

.senseler-about .wp-block-media-text__content {
    padding-right: 0;
}

/* Ansprechpartner */
.senseler-contact-card {
    padding: 20px 22px;
    border: 1px solid var(--senseler-border);
    border-radius: 10px;
    background: #fafaf7;
}

.senseler-contact-card h3 {
    margin: 0 0 10px;
    font-size: 1.15rem;
}

.senseler-contact-card p {
    margin: 0;
}

@media (max-width: 599px) {
    .wp-block-cover.senseler-hero {
        border-radius: 12px;
        padding: 22px;
    }

    .senseler-section {
        padding: 22px 18px;
    }

    .senseler-about .wp-block-media-text__content {
        padding: 18px 0 0;
    }
}


/* =====================================================================
   8. TERMINE – Liste aus termine.php, Seite "Termine" + Startseite
   ===================================================================== */

.senseler-termine-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.senseler-termin-card {
    display: flex;
    background: #ffffff;
    border: 1px solid var(--senseler-border);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.senseler-termin-date {
    flex: 0 0 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    background: var(--senseler-green);
    color: #ffffff;
}

.senseler-termin-day {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
}

.senseler-termin-month {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.senseler-termin-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 16px;
}

.senseler-termin-datumzeile {
    margin-bottom: 3px;
    font-size: 0.85rem;
    color: #555555;
}

.senseler-termin-titel {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111111;
    overflow-wrap: break-word;
    hyphens: auto;
}

.senseler-termin-ort {
    margin-top: 3px;
    font-size: 0.9rem;
    color: #444444;
}

.senseler-termin-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--senseler-soft);
    color: var(--senseler-green-dark);
    font-size: 0.72rem;
    font-weight: 700;
    vertical-align: middle;
}

.senseler-termin-next-label {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--senseler-green-dark);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
}

.senseler-termin-card.is-past {
    opacity: 0.6;
}

.senseler-termin-card.is-past .senseler-termin-date {
    background: #999999;
}

.senseler-termin-card.is-next {
    border-color: var(--senseler-green);
    box-shadow: 0 6px 18px rgba(95, 111, 31, 0.18);
}

.senseler-termine-empty {
    color: #555555;
}

/* Seite "Termine": Jahresüberschrift, Öffnungszeiten Schützenheim, Hinweis */
.senseler-termine-jahr {
    text-align: center;
    margin: 26px 0 22px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #1f2f22;
}

.oeffnungszeiten-box {
    display: grid;
    grid-template-columns: 180px 1fr;
    margin-top: 30px;
    border: 1px solid #b8b09d;
    border-radius: 10px;
    overflow: hidden;
    background: #f6f4ed;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
    font-size: 16px;
    line-height: 1.35;
}

.oeffnungszeiten-title {
    padding: 12px 14px;
    border-right: 1px solid #d4cdbb;
    background: #ebe5d6;
    color: #1f2f22;
    font-weight: 800;
}

.oeffnungszeiten-info {
    padding: 12px 14px;
}

.oeffnungszeiten-text {
    margin-bottom: 10px;
    font-weight: 600;
}

.oeffnungszeiten-dates {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: 6px 38px;
}

.oeffnungszeiten-col {
    display: flex;
    flex-direction: column;
    gap: 5px;
    white-space: nowrap;
}

.advent-col {
    padding-left: 18px;
    border-left: 2px solid #a67c1b;
}

.advent-col strong {
    margin-top: 4px;
    font-size: 15px;
    color: #1f2f22;
}

.termine-hinweis {
    margin-top: 16px;
    font-size: 15px;
    color: #333333;
}

@media (max-width: 899px) {
    .senseler-termin-card {
        flex-direction: column;
    }

    .senseler-termin-date {
        flex-basis: auto;
        flex-direction: row;
        justify-content: flex-start;
        gap: 8px;
        padding: 8px 14px;
    }

    .senseler-termin-day {
        font-size: 1.15rem;
    }

    .senseler-termin-month {
        font-size: 0.85rem;
    }

    .senseler-termin-body {
        padding: 12px 14px;
    }
}

@media (max-width: 599px) {
    .senseler-termine-jahr {
        font-size: 25px;
    }

    .oeffnungszeiten-box {
        grid-template-columns: 1fr;
    }

    .oeffnungszeiten-title {
        border-right: none;
        border-bottom: 1px solid #d4cdbb;
    }

    .oeffnungszeiten-dates {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 20px;
    }

    .advent-col {
        grid-column: 1 / -1;
        padding: 10px 0 0;
        border-left: none;
        border-top: 2px solid #a67c1b;
    }
}


/* =====================================================================
   9. KONTAKT, KOMPANIE, RECHTLICHES
   ===================================================================== */

/* Kontakt (Seite steht in einer Gruppe mit Ausrichtung "weit") */
.senseler-kontakt {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.senseler-kontakt-intro {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: center;
    line-height: 1.6;
}

.senseler-kontakt-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 28px;
    align-items: start;
}

.senseler-kontakt-card {
    padding: 28px 30px;
}

.senseler-kontakt-card h2 {
    margin: 0 0 18px;
    font-size: 1.4rem;
}

.senseler-kontakt-card p {
    margin: 0 0 14px;
    line-height: 1.6;
}

.senseler-kontakt-rolle {
    font-weight: 700;
    color: var(--senseler-green-dark);
}

.senseler-kontakt-card .wpcf7-form label {
    display: block;
    margin-bottom: 16px;
    font-weight: 600;
}

.senseler-kontakt-card .wpcf7-form input[type="text"],
.senseler-kontakt-card .wpcf7-form input[type="email"],
.senseler-kontakt-card .wpcf7-form textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid var(--senseler-border);
    border-radius: 8px;
    font: inherit;
    box-sizing: border-box;
}

.senseler-kontakt-card .wpcf7-form textarea {
    min-height: 130px;
    resize: vertical;
}

.senseler-kontakt-card .wpcf7-submit {
    padding: 11px 26px;
    border: none;
    border-radius: 999px;
    background: var(--senseler-green);
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

.senseler-kontakt-card .wpcf7-submit:hover {
    background: var(--senseler-green-dark);
}

/* Kompanie: verlinkte Kacheln zu den Unterseiten */
.senseler-kompanie-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 28px 0;
}

.senseler-kompanie-card {
    display: block;
    padding: 22px 24px;
    color: #111111;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.senseler-kompanie-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--senseler-shadow-hover);
}

.senseler-kompanie-card h3 {
    margin: 0 0 8px;
    font-size: 1.2rem;
}

.senseler-kompanie-card p {
    margin: 0;
    color: #333333;
    font-size: 0.95rem;
    line-height: 1.5;
}

@media (max-width: 899px) {
    .senseler-kontakt-grid,
    .senseler-kompanie-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 599px) {
    .senseler-kontakt-card {
        padding: 22px 18px;
    }
}


/* =====================================================================
   10. MITGLIEDER – [mitglieder_uebersicht] aus mitglieder.php
   Die Übersicht steht in einer Gruppe mit Ausrichtung "weit".
   ===================================================================== */

.senseler-board-layout {
    margin-top: 42px;
}

/* Obere Reihe: fünf kleine Karten */
.senseler-board-top {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
    margin-bottom: 28px;
}

/* Darunter drei Spalten, Hauptmann in der Mitte */
.senseler-board-around {
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 26px;
    align-items: start;
}

.senseler-board-column {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.senseler-member-card {
    overflow: hidden;
}

.senseler-card-title {
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid #e1e1e1;
    background: #f5f6f1;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.senseler-member-list {
    margin: 0;
    padding: 15px 18px 17px 32px;
}

.senseler-member-list li {
    margin: 6px 0;
    font-size: 0.96rem;
    line-height: 1.36;
}

.senseler-member-list a {
    color: #1f1f1f;
    text-decoration: none;
}

.senseler-member-list a:hover {
    text-decoration: underline;
}

.senseler-board-top .senseler-card-title {
    padding: 10px 13px;
    font-size: 0.92rem;
}

.senseler-board-top .senseler-member-list {
    padding: 12px 14px 14px 28px;
}

.senseler-board-top .senseler-member-list li {
    font-size: 0.9rem;
    line-height: 1.3;
}

/* Hauptmann-Karte */
.senseler-main-heading {
    margin: 0 0 16px;
    text-align: center;
    font-size: 1.45rem;
    font-weight: 700;
}

.senseler-member-card-main {
    padding: 28px 30px;
    border-radius: 16px;
}

.senseler-member-image img {
    display: block;
    max-width: 165px;
    margin: 0 auto 18px;
    border-radius: 12px;
}

.senseler-member-card-main h3 {
    margin: 0 0 16px;
    font-size: 1.22rem;
    line-height: 1.25;
}

.senseler-member-content {
    font-size: 0.96rem;
    line-height: 1.42;
}

@media (max-width: 1199px) {
    .senseler-board-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .senseler-board-around {
        grid-template-columns: 1fr 1fr;
    }

    .senseler-board-center {
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }
}

@media (max-width: 599px) {
    .senseler-board-top,
    .senseler-board-around {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .senseler-board-center {
        grid-column: auto;
        grid-row: auto;
    }

    .senseler-member-card-main {
        padding: 26px;
    }
}

/* Einzelseite eines Mitglieds: schmal, Porträt zentriert, ohne Autor/Datum.
   !important, weil das Theme Bildformat und Breiten als style="…" setzt. */
.senseler-single-member-page main .wp-block-group.alignfull {
    max-width: 560px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.senseler-single-member-page .wp-block-post-title {
    text-align: center;
    margin-bottom: 12px;
}

.senseler-single-member-page .wp-block-post-featured-image {
    width: fit-content !important;
    max-width: 220px !important;
    margin: 10px auto 18px !important;
    aspect-ratio: auto !important;
}

.senseler-single-member-page .wp-block-post-featured-image img {
    width: auto !important;
    max-width: 220px;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    border-radius: 12px;
}

/* Zeile "Geschrieben von … in …", Datum und Kategorien bei Mitgliedern ausblenden */
.senseler-single-member-page .wp-block-post-author-name,
.senseler-single-member-page .wp-block-group:has(> .wp-block-post-author-name),
.senseler-single-member-page .wp-block-post-date,
.senseler-single-member-page .wp-block-post-terms {
    display: none;
}

@media (max-width: 599px) {
    .senseler-single-member-page .wp-block-post-featured-image,
    .senseler-single-member-page .wp-block-post-featured-image img {
        max-width: 180px !important;
    }
}


/* =====================================================================
   11. FOOTER
   Aufbau (Website-Editor -> Vorlagenteil "Footer"): Gruppe .senseler-footer
   mit vier Infokästen, Facebook-Symbol und Links Kontakt/Impressum/Datenschutz.
   ===================================================================== */

.senseler-footer {
    margin-top: 70px;
    padding: 48px 20px 32px;
    background: #f7f7f3;
    border-top: 1px solid #e2e2dc;
}

.senseler-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 22px;
}

.senseler-footer-col {
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid var(--senseler-border);
    border-top: 4px solid var(--senseler-green);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}

.senseler-footer h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: #111111;
}

.senseler-footer p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.55;
    color: #333333;
}

.senseler-footer .wp-block-social-links {
    max-width: 1180px;
    margin: 26px auto 0;
    gap: 10px;
}

.senseler-footer .wp-social-link svg {
    width: 26px;
    height: 26px;
}

.senseler-footer .wp-social-link a:hover {
    opacity: 0.7;
}

.senseler-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    max-width: 1180px;
    margin: 24px auto 0;
}

.senseler-footer-links a {
    font-size: 13px;
    font-weight: 600;
    color: var(--senseler-green-dark);
    text-decoration: none;
}

.senseler-footer-links a:hover {
    text-decoration: underline;
}

@media (max-width: 899px) {
    .senseler-footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .senseler-footer-legal {
        grid-column: 1 / -1;
    }
}

@media (max-width: 599px) {
    .senseler-footer {
        margin-top: 45px;
        padding: 32px 14px 24px;
    }

    .senseler-footer-inner {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .senseler-footer-links {
        flex-direction: column;
        gap: 12px;
    }
}


/* =====================================================================
   12. HILFSKLASSEN
   ===================================================================== */

/* Honeypot im Kontaktformular (siehe sicherheit.php): für Menschen
   unsichtbar, aber nicht display:none – sonst überspringen Bots es. */
.senseler-hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Tastaturbedienung: sichtbarer Fokus */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--senseler-green-dark);
    outline-offset: 2px;
}