/* =====================================================================
   enhancements.css — Ergaenzungen aus dem Maßnahmenplan 07/2026
   Barrierefreiheit (K3), mobile Startseite (M5), Mitglieder-CTA (M1),
   Konzert-Leerzustand (S5). Bewusst in einer eigenen, reviewbaren Datei.
   ===================================================================== */

/* ---------- K3: Barrierefreiheit ---------- */

/* Sichtbarer Tastaturfokus auf allen interaktiven Elementen */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.menu-toggle:focus-visible {
    outline: 3px solid #C1121F;
    outline-offset: 2px;
}

/* Links im Fliesstext nicht nur ueber Farbe erkennbar (WCAG 1.4.1) */
.entry-content a:not(.button):not([class*="wp-block-button"]):not(.single-link),
.widget-area a:not(.button) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Das rote Text-Logo steht auf dem Gruppenfoto – Schatten hebt den Kontrast,
   ohne die Markenfarbe zu aendern (WCAG 1.4.3). */
.text-logo,
.site-title,
.site-description {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* Social-Icons im Footer: der Screenreader-Text ist vorhanden – hier nur
   sicherstellen, dass die Klickflaeche gross genug ist (WCAG 2.5.5). */
.social-navigation a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

/* ---------- M5/D3: Mobile Startseite ---------- */

@media screen and (max-width: 48em) {
    /* Titelbild nicht mehr den ganzen ersten Bildschirm fuellen,
       damit direkt Inhalt sichtbar wird. */
    .has-header-image .custom-header-media,
    .has-header-video .custom-header-media,
    .custom-header-media {
        height: 60vh !important;
        min-height: 320px;
    }

    /* Menue-Knopf klar vom unruhigen Foto abheben */
    .menu-toggle {
        background: #14161A !important;
        color: #fff !important;
        border-radius: 4px;
        padding: 0.5em 1em !important;
        margin: 0.6em auto !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    }
    .menu-toggle:hover,
    .menu-toggle:focus {
        background: #C1121F !important;
    }
}

/* ---------- S5: Konzert-Leerzustand ---------- */

.konzerte-leer {
    max-width: 640px;
    margin: 1.5em auto;
    padding: 1.4em 1.6em;
    background: #F0EDE8;
    border-left: 4px solid #C1121F;
}
.konzerte-leer p { margin: 0 0 0.6em; }
.konzerte-leer p:last-child { margin-bottom: 0; }

/* ---------- M1: Mitglieder-CTA (Startseite + Mitgliedsseite) ---------- */

.mitglied-cta {
    max-width: 1000px;
    margin: 2.5em auto;
    padding: 2em 2.2em;
    background: #14161A;
    color: #F7F5F2;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2em 2em;
}
.mitglied-cta__text { flex: 1 1 340px; }
.mitglied-cta__text h2 {
    margin: 0 0 0.4em;
    color: #fff;
    font-size: 1.6em;
    letter-spacing: 0.01em;
}
.mitglied-cta__text p { margin: 0; color: #D8D4CE; line-height: 1.55; }
.mitglied-cta__actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.7em;
}
.mitglied-cta .button-primary,
.mitglied-cta .button-secondary {
    display: inline-block;
    text-align: center;
    padding: 0.8em 1.6em;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
}
.mitglied-cta .button-primary {
    background: #C1121F;
    color: #fff;
}
.mitglied-cta .button-primary:hover,
.mitglied-cta .button-primary:focus {
    background: #E0323F;
}
.mitglied-cta .button-secondary {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
}
.mitglied-cta .button-secondary:hover,
.mitglied-cta .button-secondary:focus {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* „Mitglied werden" als hervorgehobener Menuepunkt (1. Ebene) */
.main-navigation .menu-item.menu-mitglied-werden > a {
    background: #C1121F;
    color: #fff !important;
    border-radius: 4px;
    padding-left: 1em;
    padding-right: 1em;
}
.main-navigation .menu-item.menu-mitglied-werden > a:hover {
    background: #E0323F;
}

/* Beitragsstufen offen und vergleichbar darstellen (M1) */
.beitragsstufen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2em;
    margin: 1.5em 0;
    padding: 0;
    list-style: none;
}
.beitragsstufen li {
    background: #fff;
    border: 1px solid #DCD7CF;
    border-top: 3px solid #C1121F;
    padding: 1.2em 1.3em;
}
.beitragsstufen .stufe-name { font-weight: 700; font-size: 1.05em; }
.beitragsstufen .stufe-betrag {
    font-size: 1.7em;
    font-weight: 700;
    color: #C1121F;
    margin: 0.2em 0;
}
.beitragsstufen .stufe-info { color: #4A4F57; font-size: 0.95em; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* =====================================================================
   Blog/Startseite (07/2026): breitere Mittelspalte, Sidebar weiter außen,
   „Weiterlesen"-Button für die einheitlich gekürzten Vorschautexte.
   ===================================================================== */
@media screen and (min-width: 48em) {
    body.home .wrap,
    body.blog .wrap,
    body.archive .wrap,
    body.search .wrap,
    body.single-post .wrap {
        max-width: 1240px;
    }
    body.home.has-sidebar:not(.error404) #primary,
    body.blog.has-sidebar:not(.error404) #primary,
    body.archive.has-sidebar:not(.error404) #primary,
    body.search.has-sidebar:not(.error404) #primary,
    body.single-post.has-sidebar:not(.error404) #primary {
        width: 70%;
    }
    body.home.has-sidebar #secondary,
    body.blog.has-sidebar #secondary,
    body.archive.has-sidebar #secondary,
    body.search.has-sidebar #secondary,
    body.single-post.has-sidebar #secondary {
        width: 26%;
    }
}

/* Konzerte-Seite (/konzerte/, ID 1841): breitere Spalte – vergleichbar mit der
   Blog-Startseite. Ein-Spalten-Layout ohne Sidebar, daher zentriert verbreitert. */
@media screen and (min-width: 48em) {
    body.page-id-1841 .wrap { max-width: 1160px; }
    /* schlägt die Twenty-Seventeen-Regel „…#primary { max-width:740px }“ (ID-Selektor) */
    body.page-id-1841 .content-area { max-width: 900px !important; }
}

/* Vorschautext luftiger; den nativen „weiterlesen"-Link (Twenty Seventeen)
   als Markenrot-Button gestalten. */
.blog .entry-content, .home .entry-content, .archive .entry-content, .search .entry-content { margin-top: 0.6em; }
.blog .link-more, .home .link-more, .archive .link-more, .search .link-more { margin: 0.9em 0 0; }
.blog .link-more .more-link,
.home .link-more .more-link,
.archive .link-more .more-link,
.search .link-more .more-link {
    display: inline-block;
    padding: 0.5em 1.2em;
    background: #C1121F;
    color: #fff !important;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none !important;
    font-size: 0.95em;
    text-transform: none;
}
.blog .link-more .more-link:hover,
.home .link-more .more-link:hover,
.archive .link-more .more-link:hover,
.search .link-more .more-link:hover,
.blog .link-more .more-link:focus,
.home .link-more .more-link:focus,
.archive .link-more .more-link:focus,
.search .link-more .more-link:focus { background: #a10f1a; color: #fff !important; }

/* =====================================================================
   Konzert-Karten modernisiert (07/2026) – überschreibt die alten
   Vollfarb-/Scroll-Stile aus style.css. Saubere weiße Karten mit
   Format-Akzentkante, klaren Buttons, ohne Scroll-Container.
   ===================================================================== */

/* Karten-Rahmen */
article.konzert:not(.single-konzert) {
    box-shadow: 0 2px 12px rgba(20,22,26,.08) !important;
    border: 1px solid #E4E0DA;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
/* Vollflächige Farbhintergründe entfernen, Format als linke Akzentkante */
article.konzert div.entry-body-list,
article.konzert div.entry-body-list.chamber,
article.konzert div.entry-body-list.symfony,
article.konzert div.entry-body-list.expedit,
article.konzert div.entry-body-list.philco2 {
    background: #fff !important;
}
article.konzert div.entry-body-list { border-left: 5px solid #9aa0a6; }
article.konzert div.entry-body-list.chamber  { border-left-color: #C8860D; } /* Kammerkonzert */
article.konzert div.entry-body-list.symfony,
article.konzert div.entry-body-list.expedit  { border-left-color: #2E74B5; } /* Philharmonisch */
article.konzert div.entry-body-list.child    { border-left-color: #E8791C; } /* Kinder */
article.konzert div.entry-body-list.newyear  { border-left-color: #C1121F; } /* Neujahr */
article.konzert div.entry-body-list.philco2  { border-left-color: #3FA535; }

/* Inhalt: kein Scrollbalken, sauber auf wenige Zeilen begrenzt */
article.konzert div.entry-container div.entry-content {
    background: transparent !important;
    overflow: hidden !important;
    padding: 4px 2px 0 !important;
    color: #4A4F57;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

/* Titel & Datum/Ort */
article.konzert:not(.single-konzert) h3.konzert-title {
    font-size: 1.7em !important;
    font-weight: 600 !important;
    color: #1A1D22;
}
article.konzert:not(.single-konzert) h3.konzert-title a { color: #1A1D22; }
article.konzert:not(.single-konzert) h3.place-title {
    font-size: 1.15em !important;
    font-weight: 500 !important;
    color: #2E74B5;
}

/* Buttons – klare rote Pillen (kein dünner Rahmen mehr) */
article.konzert header div.info-row .buttons a {
    float: none !important;
    display: inline-block;
    border: 1.5px solid #C1121F !important;
    color: #C1121F !important;
    background: #fff !important;
    padding: 6px 14px !important;
    margin: 0 6px 6px 0 !important;
    border-radius: 5px;
    font-weight: 600;
    font-size: .92em;
    text-decoration: none !important;
}
article.konzert header div.info-row .buttons a:hover {
    background: #C1121F !important;
    color: #fff !important;
}

/* STN-Logo: nicht mehr gedreht an der Seite, sondern klein & dezent */
@media (min-width: 800px) {
    article.konzert:not(.single-konzert) { height: auto !important; min-height: 240px; }
    article .owner {
        position: absolute !important;
        transform: none !important;
        left: auto !important; right: 12px; bottom: auto; top: 12px;
        width: 150px !important; opacity: .9;
        background: rgba(255,255,255,.85); padding: 4px 8px; border-radius: 4px;
    }
    article.konzert div.entry-container div.entry-content { -webkit-line-clamp: 5; }
}

/* =====================================================================
   Konzert-Karten: seitliches Format-Band, Bild-Cover-Höhe, Bild-Platzhalter (07/2026)
   ===================================================================== */

/* Format-Farbe je Karte als Variable (für Band + Platzhalter) */
article.konzert div.entry-body-list         { --fmt: #9aa0a6; }
article.konzert div.entry-body-list.chamber { --fmt: #C8860D; }
article.konzert div.entry-body-list.symfony { --fmt: #2E74B5; }
article.konzert div.entry-body-list.expedit { --fmt: #2E74B5; }
article.konzert div.entry-body-list.child   { --fmt: #E8791C; }
article.konzert div.entry-body-list.newyear { --fmt: #C1121F; }
article.konzert div.entry-body-list.philco2 { --fmt: #3FA535; }

/* Seitliches, um 90° gedrehtes Format-Band (ersetzt die schmale Akzentkante) */
article.konzert:not(.single-konzert) div.entry-body-list {
    position: relative;
    padding-left: 30px;
    border-left: none !important;
}
article.konzert:not(.single-konzert) div.entry-body-list::before {
    content: "Konzert";
    position: absolute; left: 0; top: 0; bottom: 0; width: 30px; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    writing-mode: vertical-rl; transform: rotate(180deg);
    background: var(--fmt);
    color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; white-space: nowrap; overflow: hidden;
}
article.konzert div.entry-body-list.chamber::before { content: "Kammerkonzert"; }
article.konzert div.entry-body-list.symfony::before { content: "Philharmonisch"; }
article.konzert div.entry-body-list.expedit::before { content: "Exkursionskonzert"; }
article.konzert div.entry-body-list.child::before   { content: "Kinderkonzert"; }
article.konzert div.entry-body-list.newyear::before { content: "Neujahrskonzert"; }
article.konzert div.entry-body-list.philco2::before { content: "PhilForNature"; }

/* Beitragsbild füllt die Bildspalte immer vollständig (fix trotz <a>-Zwischenebene) */
article.konzert:not(.single-konzert) div.post-thumbnail {
    position: relative;
    align-self: stretch;
    min-height: 200px;
    overflow: hidden;
    background: #eef0ec;
}
article.konzert:not(.single-konzert) div.post-thumbnail a {
    position: absolute; inset: 0; display: block;
}
article.konzert:not(.single-konzert) div.post-thumbnail img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
}

/* Platzhalter für Konzerte ohne Beitragsbild – markenfarbener Farbverlauf + Notensymbol */
article.konzert:not(.single-konzert) div.post-thumbnail.is-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: #eef0ec;
    background: linear-gradient(135deg, color-mix(in srgb, var(--fmt) 16%, #fff) 0%, #f4f5f3 72%);
}
article.konzert div.post-thumbnail.is-placeholder a {
    display: flex; align-items: center; justify-content: center;
}
article.konzert div.post-thumbnail.is-placeholder svg {
    width: 42%; max-width: 78px; height: auto;
    fill: var(--fmt); opacity: .4;
}

/* =====================================================================
   Konzerte: Filter-/Suchbox modernisiert (07/2026)
   ===================================================================== */
#formcontainer {
    border: 1px solid #E4E0DA !important;
    border-radius: 12px !important;
    background: #fff;
    box-shadow: 0 2px 12px rgba(20,22,26,.06);
    padding: 18px 22px !important;
    margin: 32px 0 40px !important;
}
#formcontainer.closed:hover { background: #FAFAF8 !important; border-radius: 12px; }
#filterSwitch { font-size: 1.05em; color: #1A1D22; align-items: center; }
#formcontainer h3 { font-size: 1.05em; color: #C1121F; margin: 18px 0 6px; }
#formcontainer p { font-size: .9em !important; color: #6b7078 !important; }

/* Aktive Filter als Chip */
#activeFilters { font-size: .95em; color: #4A4F57; }
#activeFilters strong { color: #1A1D22; }

/* Eingabefelder & Selects: rund, mit Fokus */
#formcontainer select,
#formcontainer input {
    border: 1px solid #B9B4AC !important;
    border-radius: 6px !important;
    height: auto !important;
    padding: 8px 10px !important;
    background: #fff;
    font: inherit;
    box-sizing: border-box;
}
#formcontainer input { margin: 0 0 12px !important; width: 100% !important; }
#formcontainer select:focus,
#formcontainer input:focus {
    outline: 3px solid rgba(193,18,31,.28);
    outline-offset: 1px;
    border-color: #C1121F !important;
}
#formcontainer div.filters { gap: 18px; flex-wrap: wrap; }
#formcontainer fieldset { min-width: 200px; }

/* Buttons: Markenrot gefüllt */
#formcontainer button {
    background: #C1121F !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    padding: 9px 18px !important;
    margin-left: 0 !important;
    font-weight: 600 !important;
    cursor: pointer;
}
#formcontainer button:hover { background: #a10f1a !important; }
#formcontainer .inlineSearch { margin-bottom: 10px !important; }
#formcontainer #searchform, #formcontainer #konzertfilter { margin-top: 6px; }